vComs

Vue 3 components.

Installation

You must import and register components manually.

CDN

This package published as vComs module in umd.

<script src="https://unpkg.com/@termehui/vcoms"></script>

NPM

npm i @termehui/vcoms

DataView

Data view container for lists rendering.

<template>
  <vDataView :data="records" :error="error">
    <template #error="{ error }">{{ error }} occurred!</template>
    <template #empty>No records exists</template>
    <template #default="{ records }">
      <!-- Show cards layout on mobile  -->
      <div class="my-card-layout show-on-mobile">
        <div v-for="(item, index) in records" :key="index">
          <p>{{ item.name }}</p>
        </div>
      </div>
      <!-- Show table on other devices  -->
      <table class="hide-on-mobile">
        <tbody>
          <tr v-for="(item, index) in records" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
          </tr>
        </tbody>
      </table>
    </template>
  </vDataView>
</template>

Data View have three slots:

• error: content for render when error property not a falsy value (error passed as scoped-slot value).
• empty: content to render when no record exists.
• default: list views to render (records passed as scoped-slot value).

Note: Data view have no wrapper element and rendered directly in dom!

Note: for safe list rendering use records scoped-slot!

Note: you can use multiple list renderer for different device with default Termeh visibility classes (like above example).

Property	Type	Default	Description
data	`Array	null`	null
error	any	null	error message

Jalaali

Format and display jalaali date.

<script lang="ts">
import { vJalaali } from "@termehui/vcoms";
</script>

<template>
  <vJalaali value="2022-01-01T12:00:00Z" format="ago" />
</template>

Property	Type	Default	Description
format	String	"jDD jMMMM jYYYY ساعت HH:mm:ss"	display format. you can use ago
alter	String	""	text to shown if date is invalid
value	any		date value (moment js inputs allowed)

JalaaliInput

Jalaali date input component.

Note: minimum and maximum check applied on v-model change and input blur on valid input only.

Note: modal value is a standard gregorian date string.

Note: min and max accept jalaali date string.

<script lang="ts">
// index.ts
import { vJalaaliInput } from "@termehui/vcoms";
import { ref } from "vue";
const v = ref("");
</script>

<template>
  <v-jalaali-input separator="/" v-model="v" />
</template>

Property	Type	Default	Description
separator	String	"-"	separator string
min	String	""	minimum jalaali date
max	String	""	maximum jalaali date

MaskInput

Masked input component.

<script lang="ts">
// index.ts
import { vMaskInput } from "@termehui/vcoms";
import { ref } from "vue";
const v = ref("");
</script>

<template>
  <v-mask-input guide="_" mask="####-###.##" v-model="v">
</template>

Property	Type	Default	Description
options	Options	{}	default options. see Text Mask Core Options for more details
mask	string|array|function		mask. see vMask for more details
guide	String	""	guide character to show as placeholder

Number

Format and display number.

<script lang="ts">
import { vNumber } from "@termehui/vcoms";
</script>

<template>
  <vNumber :value="123451000" separator="/" />
</template>

Property	Type	Default	Description
value	Number	0	value
separator	String	","	separator character

NumberAnim

Animate number. Default slot contains two value:

• value (number): animated value.
• formatted (string): formatted animated value.

<script lang="ts">
// index.ts
import { vNumberAnim } from "@termehui/vcoms";
import { ref } from "vue";
const v = ref(0);
</script>

<template>
  <v-number-anim
    :value="v_num"
    :decimals="3"
    separator="/"
    easing="linear"
    :duration="500"
  >
    <template #="{ formatted, value }">
      <h1>{{ formatted }}</h1>
      <p>{{ value }}</p>
    </template>
  </v-number-anim>
</template>

Property	Type	Default	Description
value	Number		number to animate
decimals	Number	0	decimal places limit
separator	String	","	number format separator
easing	String	"cubicBezier(0.25, 0.46, 0.45, 0.94)"	animation easing
duration	Number	750	animation duration in (milliseconds)

Numeric

Numeric input component.

<script lang="ts">
// index.ts
import { vNumericInput } from "@termehui/vcoms";
import { ref } from "vue";
const v = ref("");
</script>

<template>
  <v-numeric-input prefix="$ " separator="," :min="-10" :decimal="2" v-model="v">
</template>

Property	Type	Default	Description
prefix	String	""	Number prefix
suffix	String	""	Number suffix
separator	String	","	separator string
decimal	number	0	max allowed fraction number
min	number	0	minimum number
max	number	Number.MAX_SAFE_INTEGER	maximum number

Caution: when passed min and max property, value set to min/max if goes out of range.

Event	Type	Description
format	(v: string) => void	pass formatted number on value update