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