@termehui/vtermeh v1.0.2

vTermeh

Termeh based component for vue 3.

Installation

You must import and register components manually.

CDN

This package published as vTermeh module in umd.

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

NPM

npm i @termehui/vtermeh

Choose

Choose component. You can set default slot to change default item template.

<template>
  <vChoose :items="items" v-model="item">
    <template #default="{ item, failed, disabled }">
      {{ item == "first" ? "1th" : item == "second" ? "2th" : item }}
    </template>
  </vChoose>
</template>
<script lang="ts" setup>
import { vChoose } from "@termehui/vtermeh";
const items = ref(["first", "second", "third"]);
const item = ref("");
</script>

<style lang="scss">
@import "@termehui/vtermeh/choose.scss";
@import "@termehui/vtermeh/dist/choose.scss"; // old node version
</style>

Choose component have following classes:

• is-stacked: set choose direction as vertical.
• is-{device}-stacked: set choose direction as vertical for device.
• is-{size}: set choose size to size.
• is-{color}: set choose color to registered iterable colors.

Columns

Responsive columns generator.

Note: child items must have column-item class and data-priority attribute.

Note: this component does not support dynamic fields.

Note: you can use update exposed function to manually update layout.

<template>
  <vColumns>
    <div
      v-for="(v, i) in items"
      :key="i"
      class="column-item"
      :data-priority="i + 1"
    >
      {{ v }}
    </div>

    <div class="column-item" data-priority="0">AA</div>
  </vColumns>
</template>
<script lang="ts" setup>
import { vColumns } from "@termehui/vtermeh";
import { ref } from "vue";

const items = ref(["hi", "a", "b", "c"]);
</script>

<style lang="scss">
@import "@termehui/vtermeh/columns.scss";
@import "@termehui/vtermeh/dist/columns.scss"; // old node version
</style>

Columns component have following classes:

• is-gapless: remove gap between columns.
• is-{gap}-gaped: set options gap to registered iterable gaps.

Dropdown

Dropdown component.

<template>
  <vDropdown :items="items" v-model="item" v-model:searchValue="search">
    <template #icon="{ isEmpty, isOpen, isFiltered, failed, disabled }">
      Icon
    </template>
    <template #selected="{ item, failed, disabled }"> Single item </template>
    <template #selected="{ item, remove, failed, disabled }">
      Multi Select items
    </template>
    <template #action="{ isEmpty, isOpen, isFiltered, failed, disabled }">
      action
    </template>
    <template #menu="{ isEmpty, isOpen, isFiltered, failed, disabled }">
      <div class="item" v-if="isFiltered">Add new</div>
    </template>
    <template #default="{ id, selected, active, failed, disabled, item }">
      Menu Item
    </template>
  </vDropdown>
</template>
<script lang="ts" setup>
import { vDropdown } from "@termehui/vtermeh";
const items = ref([{...}, {...}]);
const item = ref();
</script>

<style lang="scss">
@import "@termehui/vtermeh/dropdown.scss";
@import "@termehui/vtermeh/dist/dropdown.scss"; // old node version
</style>

Note: if you return true from key handler function, default dropdown keyboard handler not fired!

Note: you can use close exposed function to manually close dropdown.

Field

Field wrapper component (based on termeh form field).

<template>
  <vField
    :errors="errors"
    :messages="messages"
    label="Enter name"
    help="enter your full name"
    default="name is invalid"
    :required="true"
    :fit="true"
  >
    <template #default="{ id }">
      <div class="input">
        <input :id="id" v-model="name" />
      </div>
    </template>
  </vField>
</template>
<script lang="ts" setup>
import { vField } from "@termehui/vtermeh";
</script>
<style lang="scss">
@import "@termehui/vtermeh/field.scss";
@import "@termehui/vtermeh/dist/field.scss"; // old node version
</style>

FileUpload

File upload with preview. You can get selected files from @select event.

Note: You can call clear inner method to clear input (e.g. refVar.value.clear());

<template>
  <vFileUpload
    :multiple="true"
    accept="image-*"
    :icons="{ '.*/x-zip.*': 'zip.png', '*': 'default.png' }"
    @select="log_file_list"
  >
    <template #thumbnails>
      <img src="default thumb.jpg" />
    </template>
    <template v-slot="{ count }">
      <div v-if="count == 0">Please select image</div>
      <div v-else>{{ count }} Image</div>
    </template>
  </vFileUpload>
</template>

<script lang="ts" setup>
import { vFileUpload } from "@termehui/vtermeh";
const page = ref(0);
</script>

<style lang="scss">
@import "@termehui/vtermeh/file-upload.scss";
@import "@termehui/vtermeh/dist/file-upload.scss"; // old node version
</style>

File upload component use default termeh .input for styling.

You must use "file-upload" as component name for overriding variable in termeh.

Icon Toggle

Icon toggle component. you must set icon and active slot to set different state icons.

<template>
  <vIconToggle v-model="selected" class="is-large is-primary">
    <template #icon>
      <Star />
    </template>
    <template #active>
      <StarFill />
    </template>
  </vIconToggle>
</template>
<script lang="ts" setup>
import { vIconToggle } from "@termehui/vtermeh";
const selected = ref(false);
</script>

<style lang="scss">
@import "@termehui/vtermeh/icon-toggle.scss";
@import "@termehui/vtermeh/dist/icon-toggle.scss"; // old node version
</style>

Icon toggle follow icon styling.

Jalaali Date Picker

Create jalaali date picker input.

Caution: you must install vue3-persian-datetime-picker and register component as v3-datetime-picker to make date picker work!

Note: you must set picker color using color option on register time or color property.

<template>
  <vJalaaliPicker v-model="jalaali" type="datetime" />
  <br />
  <vJalaaliPicker v-model="jalaali" :icon="true">
    <template #icon="{ show }">
      <div class="button is-primary" @click="show()">Select</div>
    </template>
  </vJalaaliPicker>
  <br />
  <vJalaaliPicker v-model="jalaalies" :range="true" clear="CLS" />
  <br />
  <vJalaaliPicker
    v-model="jalaalies"
    :multiple="true"
    :icon="true"
    clear="CLEAR"
  />
</template>
<script lang="ts" setup>
import { vJalaaliPicker } from "@termehui/vtermeh";
const jalaali = ref();
const jalaalies = ref([]);
</script>

<style lang="scss">
@import "@termehui/vtermeh/jalaali-picker.scss";
@import "@termehui/vtermeh/dist/jalaali-picker.scss"; // old node version
</style>

Note: this component accept all vue3-persian-datetime-picker properties.

Jalaali picker component have following slots:

<template>
  <vJalaaliPicker>
    <!-- only in non-icon mode for add extra content to input -->
    <template #input="{ show, clear }"></template>
    <!-- input calendar icon in non-icon and action icon in icon mode -->
    <template #input="{ show }"></template>
  </vJalaaliPicker>
</template>

Options

options component. You can set default slot to change default item template.

<template>
  <vOptions :items="items" v-model="item">
    <template #default="{ item, disabled }">
      {{ item == "first" ? "1th" : item == "second" ? "2th" : item }}
    </template>
  </vOptions>
</template>
<script lang="ts" setup>
import { vOptions } from "@termehui/vtermeh";
const items = ref(["first", "second", "third"]);
const item = ref("");
</script>

<style lang="scss">
@import "@termehui/vtermeh/options.scss";
@import "@termehui/vtermeh/dist/options.scss"; // old node version
</style>

Options component have following classes:

• is-gapless: remove item gaps.
• is-{gap}-gaped: set options gap to registered iterable gaps.
• is-{color}: set options color to registered iterable colors.

Pagination

Pagination component. You can fill default slot for change template of empty pagination.

<template>
  <vPagination :count="5" :total="23" v-model="page"> No Records </vPagination>
</template>
<script lang="ts" setup>
import { vPagination } from "@termehui/vtermeh";
const page = ref(0);
</script>

<style lang="scss">
@import "@termehui/vtermeh/pagination.scss";
@import "@termehui/vtermeh/dist/pagination.scss"; // old node version
</style>

pagination component have following classes:

• is-flat: remove paginator border and paddings.
• is-disabled: disable pagination component.
• is-rounded: make page buttons corner round.
• is-{color}: set pagination color to registered iterable colors.

Pie

Pie chart component. You can fill default slot to set label content.

<template>
  <vPie :percent="75" class="is-primary">
    <span>Interaction percent</span>
  </vPie>
</template>
<script lang="ts" setup>
import { vPie } from "@termehui/vtermeh";
</script>

<style lang="scss">
@import "@termehui/vtermeh/pie.scss";
@import "@termehui/vtermeh/dist/pie.scss"; // old node version
</style>

pie component have following classes:

• is-{color}: set pie color to registered iterable colors.

Simple Pagination

Simple pagination component. You can fill default slot for change template of empty pagination. pagination contains prev-icon and next-icon slots to change pagination icons.

<template>
  <vSimplePagination :total="23" v-model="page" next="Go Next" prev="Go Prev">
    <template #prev-icon>...</template>
    <template #next-icon>...</template>
    <template #default> No Records </template>
  </vSimplePagination>
</template>
<script lang="ts" setup>
import { vPagination } from "@termehui/vtermeh";
const page = ref(0);
</script>

<style lang="scss">
@import "@termehui/vtermeh/simple-pagination.scss";
@import "@termehui/vtermeh/dist/simple-pagination.scss"; // old node version
</style>

pagination component have following classes:

• is-disabled: disable pagination component.
• is-{color}: set pagination color to registered iterable colors.

Tab

Tab component.

<template>
  <vTab class="is-large-padded is-primary" v-model:tab="tab" animation="slide">
    <template #tabs="{ style }">
      <div class="tab" :class="style('A')" @click="tab = 'A'">A</div>
      <div class="tab" :class="style('B')" @click="tab = 'B'">B</div>
      <div class="tab" :class="style('C')" @click="tab = 'C'">C</div>
    </template>
    <template #A>A Content</template>
    <template #B>B Content</template>
    <template #C>C Content</template>
  </vTab>
</template>

tab component have following events:

tab component have following classes:

• is-centered: center aligned tab content.
• is-paddingless: remove tab content padding.
• is-{gap}-padded: set tab content padding.
• is-{color}: set tab header color.

Tile

Create optimized tile layout.

Caution: if your content size changed you must call update() method on tile component.

<template>
  <vTile ref="el" class="is-large-gaped" :horizontalOrder="false">
    <div class="tile is-2">...</div>
    <div class="tile">...</div>
    <div class="tile">...</div>
    <div class="tile">...</div>
    <div class="tile">...</div>
    <div class="tile">...</div>
    <div class="tile">...</div>
  </vTile>
</template>

tile component have following classes:

• is-{gap}-gaped: set tile items gap to registered iterable gaps.
• is-{column}: set tile item width to column. e.g. tile is-2

Toggle

Toggle component. You can fill default slot to change label content.

<template>
  <vToggle :disabled="false" v-model="isEnabled">Reporting Service</vToggle>
</template>
<script lang="ts" setup>
import { vToggle } from "@termehui/vtermeh";
const isEnabled = ref(true);
</script>

<style lang="scss">
@import "@termehui/vtermeh/toggle.scss";
@import "@termehui/vtermeh/dist/toggle.scss"; // old node version
</style>

toggle component have following classes:

• is-rounded: make page buttons corner round.
• is-{color}: set toggle color to registered iterable colors.

Toman

Persian currency (تومان) component with icon.

<template>
  <vToman :value="1200000" class="is-primary" />
  <h6>
    <vToman :value="9310500" class="is-error" />
  </h6>
</template>
<script lang="ts" setup>
import { vToman } from "@termehui/vtermeh";
</script>

<style lang="scss">
@import "@termehui/vtermeh/toman.scss";
@import "@termehui/vtermeh/dist/toman.scss"; // old node version
</style>

Toman component have following classes:

• is-{color}: set toman color to registered iterable colors.