@termehui/vcoms v1.0.0

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).

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>

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>

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>

Number

Format and display number.

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

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

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>

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>

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