@termehui/vtermeh

v1.0.2

Published

2 months ago

Vue 3 components base on @termehui/termeh

Downloads

0High
0Medium
0Low

mekramy

vue3 component

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.

| variable | description | default | | :------- | :---------------------------------------------------- | :------ | | sizes | list of non-iterable sizes to include in choose sizes | () |

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>

| Property | Type | Description | Default | | :------- | :------- | :------------------------------------- | ---------------------------------- | | mobile | number | column count on mobile device | 1 | | tablet | number | column count on tablet device | 2 | | desktop | number | column count on desktop device | 3 | | wide | number | column count on wide device and higher | 4 | | mobileQ | string | query string for mobile | "screen and (max-width: 768px)" | | desktopQ | string | query string for desktop | "screen and (min-width: 1024px)" | | wideQ | string | query string for wide | "screen and (min-width: 1408px)" |

Columns component have following classes:

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

| variable | description | default | | :------- | :--------------------------------------------------- | :------ | | gaps | list of non-iterable gaps to include in columns 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.

| Property | Type | default | Description | | :---------- | :------------------------------------------------- | :---------- | ------------------------------------------------------- | | search | Boolean | false | allow search | | delete | Boolean | true | allow delete item with ctrl+backspace | | autoClose | Boolean | true | close dropdown after select on single mode | | multiple | Boolean | false | allow multiple selection | | disabled | Boolean | false | disabled state | | failed | Boolean | false | failed state (error) | | placeholder | String | 'Select' | placeholder text | | identifier | String | '' | id field of item, empty identifier for non-object items | | items | Array | [] | items list | | searchValue | String | '' | search model value | | modelValue | any | undefined | model value | | keyHandler | (e: KeyboardEvent, selected: unknown) => boolean | undefined | custom keyboard handler |

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>

| Property | Type | Description | | | :------- | :------- | :---------------------------------------------------------- | ---------------------------------------- | | errors | Array | Object | list of error keys or error with message | | messages | Object | list of error messages (can override default error message) | | | label | string | label text | | | help | string | help text | | | default | string | default error message | | | required | bool | mark field as required | | | fit | bool | add is-marginless to field | |

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.

| variable | description | default | | :------- | :-------------------------------------------------- | :------ | | gaps | list of non-iterable gaps to include in option gaps | () |

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.

| variable | description | default | | :------- | :---------------------------------------------------------- | :------ | | colors | list of non-iterable colors to include in pagination 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.

| variable | description | default | | :------- | :--------------------------------------------------- | :------ | | sizes | list of pie sizes ("small" 10em, "medium" 20em) | () | | colors | list of non-iterable colors to include in pie 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.

| variable | description | default | | :------- | :--------------------------------------------------- | :------ | | gaps | list of non-iterable gaps to include in tab gaps | () | | colors | list of non-iterable colors to include in tab colors | () |

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

| variable | description | default | | :------- | :------------------------------------------------ | :------ | | columns | tiles column count | 3 | | gaps | list of non-iterable gaps to include in tile gaps | () |

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.

| variable | description | default | | :------- | :------------------------------------------------------ | :------ | | colors | list of non-iterable colors to include in toggle 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.