@unsource/ui 1.9.12 → 2.0.1

package/dist/runtime/components/UnInput.vue.d.ts

@@ -0,0 +1,20 @@
+import type { Input } from '../types/models.js';
+type __VLS_Props = {
+    disabled?: boolean;
+    Input?: Input;
+    Type?: Input['type'];
+    isError?: boolean;
+    index?: number;
+};
+declare const Input: Input | undefined;
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnLabel.d.vue.ts

@@ -0,0 +1,16 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    header: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly header: string;
+};

package/dist/runtime/components/UnLabel.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col">
+    <h2 v-if="header" class="text-base text-black-1">
+      {{ header }}
+    </h2>
+    <p class="text-sm text-black-2 whitespace-pre-line">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  header: {
+    type: String,
+    default: ""
+  }
+});
+</script>

package/dist/runtime/components/UnLabel.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    header: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly header: string;
+};

package/dist/runtime/components/UnLocationInput.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    isError?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnLocationInput.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div
+      class="h-100 overflow-hidden rounded-lg <md:h-50"
+      @click.prevent.stop="addressModal = true"
+    >
+      <UnMap
+        :class="{ '!border-danger': isError }"
+        :remove="true"
+        :readonly="true"
+        :points="points"
+      />
+    </div>
+    <UnModalLocation
+      v-show="addressModal"
+      @close="addressModal = false"
+      @input="modelValue = $event;
+  addressModal = false"
+    />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isError: { type: Boolean, required: false }
+});
+const modelValue = defineModel({ type: null });
+const addressModal = ref(false);
+const points = computed(() => [
+  modelValue.value ? {
+    image: "/images/home-marker.svg",
+    anchor: [0.5, 0.1],
+    coords: [modelValue.value.lng, modelValue.value?.lat]
+  } : null
+]);
+</script>

package/dist/runtime/components/UnLocationInput.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    isError?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnLog.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    fixed: boolean;
+    data: string | number | boolean | unknown[] | Record<string, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly fixed: boolean;
+    readonly data: string | number | boolean | unknown[] | Record<string, any>;
+};

package/dist/runtime/components/UnLog.vue

@@ -0,0 +1,28 @@
+<template>
+  <DevOnly>
+    <VueJsonPretty
+      dir="ltr"
+      :class="{ fixed: fixed }"
+      class="bottom-0 right-0 left-0 overflow-auto max-h-100 bg-dark-500 z-100 text-white"
+      :data="data"
+      :deep="2"
+      :show-length="true"
+      :show-line-number="true"
+      :show-icon="true"
+      :virtual="false"
+    />
+  </DevOnly>
+</template>
+
+<script setup>
+defineProps({
+  data: {
+    type: [Number, Object, Array, String, Boolean],
+    default: "none"
+  },
+  fixed: {
+    type: Boolean,
+    default: true
+  }
+});
+</script>

package/dist/runtime/components/UnLog.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    fixed: boolean;
+    data: string | number | boolean | unknown[] | Record<string, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly fixed: boolean;
+    readonly data: string | number | boolean | unknown[] | Record<string, any>;
+};

package/dist/runtime/components/UnMap.d.vue.ts

@@ -0,0 +1,17 @@
+import type { Address, Point as PointType } from '~/types/app';
+type __VLS_Props = {
+    points?: PointType[];
+    readonly?: boolean;
+    marker?: string;
+};
+type __VLS_ModelProps = {
+    'center'?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    Map: any;
+    getCenter: () => any;
+    setCenter: (coords: Address) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnMap.vue

@@ -0,0 +1,153 @@
+<template>
+  <ClientOnly>
+    <div class="relative h-full z-1">
+      <NeshanMap
+          ref="map"
+          :mapKey="NESHAN_WEB_KEY"
+          :service-key="NESHAN_API_KEY"
+          class="h-100"
+          :poi="true"
+          :traffic="true"
+          default-type="dreamy-gold"
+          :zoom="15"
+          :hide-search-container="true"
+          :hide-layers="true"
+          :cluster="true"
+          :center="center"
+          :reverse-on-click="false"
+          :popup-on-marker-hover="false"
+      />
+      <div
+          class="absolute left-1/50 top-1/40 flex flex-col rounded-2xl gap-1 items-center select-none
+           text-primary-500 children:(bg-primary w-8 h-8 p-1 flex justify-center items-center rounded-2xl cursor-pointer) z-[999999]">
+        <TheNuxtIcon @click="zoom(1)" name="solar:add-square-line-duotone"/>
+        <TheNuxtIcon @click="zoom(-1)" name="solar:minus-square-line-duotone"/>
+        <TheNuxtIcon v-if="isSupported && !readonly" @click="setCenterFromLoc" name="solar:gps-line-duotone"/>
+        <a v-if="readonly" :href="geo">
+          <TheNuxtIcon name="solar:share-line-duotone"/>
+        </a>
+      </div>
+      <TheNuxtIcon v-if="!readonly" :name="`${marker || 'my-icon:home-marker'}`" icon-type="img"
+                   class="!absolute right-1/2 bottom-1/2 transform translate-x-1/2"/>
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup>
+import NeshanMap from "@neshan-maps-platform/vue3-openlayers";
+import { Feature } from "ol";
+import { Vector } from "ol/layer";
+import { Vector as SourceVector } from "ol/source";
+import { Style, Icon, Stroke, Fill } from "ol/style";
+import { Geometry, Point, Circle as GeomCircle } from "ol/geom";
+import { fromLonLat, transform } from "ol/proj";
+import Big from "big.js";
+const emit = defineEmits(["select-point"]);
+const { points = [], readonly, marker } = defineProps({
+  points: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  marker: { type: String, required: false }
+});
+const mapCenter = defineModel("center");
+const { isIos } = useDevice();
+const geo = computed(() => isIos ? `maps://maps.google.com/?q=${points[0]?.coords[1]},${points[0]?.coords[0]}` : `geo:${points[0]?.coords[1]},${points[0]?.coords[0]}`);
+const center = {
+  latitude: points[0]?.coords[1] || 30.5584422,
+  longitude: points[0]?.coords[0] || 49.1903995
+};
+const { coords, pause, isSupported, resume } = useGeolocation();
+const setCenterFromLoc = () => {
+  resume();
+};
+const setCenter = (coords2) => {
+  coords2?.length && Map.value?.getView().setCenter(transform(coords2, "EPSG:4326", "EPSG:3857"));
+};
+watch(() => coords.value, () => {
+  pause();
+  !readonly && setCenter([coords.value.longitude, coords.value.latitude]);
+});
+const map = ref(null);
+const filteredPoints = computed(() => points.filter(Boolean));
+const getCenter = () => transform(Map.value?.getView().getCenter(), "EPSG:3857", "EPSG:4326");
+const addVector = (e, isPoint = true) => {
+  const style = isPoint ? new Style({
+    image: new Icon({
+      src: e?.image,
+      anchor: e?.anchor || [0.5, 0],
+      // size: [50,50],
+      anchorOrigin: "bottom-left"
+    })
+  }) : new Style({
+    fill: new Fill({
+      color: "rgba(255, 100, 50, 0.3)"
+    }),
+    stroke: new Stroke({
+      width: 2,
+      color: "rgba(255, 100, 50, 0.8)"
+    })
+  });
+  return new Vector({
+    source: new SourceVector(),
+    style
+  });
+};
+const dataToFeature = (e, isPoint = true) => {
+  return isPoint ? new Feature(new Point(fromLonLat(e.coords))) : new Feature(new GeomCircle(fromLonLat(e.coords), 200));
+};
+let addedLayers = [];
+const durationInLongLat = (points2) => {
+  const a2 = new Big(points2?.[1].coords[0]).minus(points2?.[0].coords[0]).pow(2);
+  const b2 = new Big(points2?.[1].coords[1]).minus(points2?.[0].coords[1]).pow(2);
+  return a2.plus(b2).sqrt();
+};
+const centerOfLatLong = (points2) => {
+  const x = new Big(points2?.[1].coords[0]).plus(points2?.[0].coords[0]).div(2).toNumber();
+  const y = new Big(points2?.[1].coords[1]).plus(points2?.[0].coords[1]).div(2).toNumber();
+  return [x, y];
+};
+const zoomOfPoints = (du) => new Big(Math.log(du)).times(1.3691).minus(8.895).abs().toNumber();
+const setZoom = (number) => {
+  Map.value?.getView().setZoom(number);
+};
+const refreshPoints = async () => {
+  addedLayers.map((l) => {
+    const layers = map.value?.state?.map?.getLayers();
+    const ll = layers.getArray().findIndex((e) => e.ol_uid === l.ol_uid);
+    layers?.removeAt(ll);
+  });
+  addedLayers = [];
+  filteredPoints.value.forEach((e) => {
+    const layer = addVector(e, true);
+    layer?.getSource()?.addFeature(dataToFeature(e, true));
+    addedLayers.push(layer);
+  });
+  addedLayers.map((l) => map.value?.state?.map?.addLayer(l));
+  if ((points?.length || 0) > 1) {
+    const du = durationInLongLat(filteredPoints.value);
+    const zoom2 = zoomOfPoints(du.toNumber());
+    setZoom(zoom2);
+    setCenter([centerOfLatLong(filteredPoints.value)[0], Math.min(filteredPoints.value?.[0].coords[1], filteredPoints.value?.[1].coords[1])]);
+  } else {
+    setCenter(filteredPoints.value?.[0]?.coords);
+  }
+};
+const zoom = (number) => {
+  const view = map.value?.state.map.getView();
+  const zoom2 = view.getZoom();
+  view.setZoom(zoom2 + number);
+};
+const Map = computed(() => map.value?.state?.map);
+watch(() => Map.value, () => {
+  refreshPoints();
+  const center2 = map.value?.state.map.getView().getCenter();
+  mapCenter.value = transform(center2, "EPSG:3857", "EPSG:4326");
+});
+watch(() => points, () => {
+  refreshPoints();
+});
+defineExpose({ Map, getCenter, setCenter });
+</script>
+
+<style>
+@import "@neshan-maps-platform/vue3-openlayers/dist/style.css";
+</style>

package/dist/runtime/components/UnMap.vue.d.ts

@@ -0,0 +1,17 @@
+import type { Address, Point as PointType } from '~/types/app';
+type __VLS_Props = {
+    points?: PointType[];
+    readonly?: boolean;
+    marker?: string;
+};
+type __VLS_ModelProps = {
+    'center'?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    Map: any;
+    getCenter: () => any;
+    setCenter: (coords: Address) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnMultiUploader.d.vue.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    label?: string;
+    selected?: number;
+    max?: number;
+    uploaderClass?: string;
+    filesClass?: string;
+    selectable?: string;
+    watermark?: string | null;
+    accept?: string | null;
+};
+declare const __VLS_defaultModels: {
+    modelValue: () => never[];
+};
+type __VLS_ModelProps = {
+    modelValue?: typeof __VLS_defaultModels['modelValue'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnMultiUploader.vue

@@ -0,0 +1,126 @@
+<template>
+  <form
+      class="flex gap-4 items-stretch text-base text-primary-500 min-h-16"
+      @submit.prevent="upload"
+      @dragover.prevent
+      @dragenter="hovered = true"
+      @dragleave="hovered = false"
+      @drop.stop.prevent="drop"
+  >
+    <input
+        v-if="!max || files?.length < max"
+        id="image"
+        type="file"
+        alt="uploadImage"
+        hidden
+        :accept="accept"
+        multiple
+        @change="upload($event.target)"
+    />
+    <label
+        v-if="false"
+        for="image"
+        class="flex flex-row items-center justify-center gap-2 bg-box rounded-lg w-57 outline-1 outline-dashed outline-offset-6 my-2 mr-2 cursor-pointer border-border border-1"
+        :class="[
+  hovered ? 'outline-danger text-danger' : 'outline-primary text-primary-500',
+  uploaderClass
+]"
+    >
+      <i class="flex justify-center items-center svg:(w-8 h-8)">
+        <TheNuxtIcon name="solar:gallery-add-line-duotone"/>
+      </i>
+      <b>{{ label || $t("\u0622\u067E\u0644\u0648\u062F \u062A\u0635\u0648\u06CC\u0631") }}</b>
+    </label>
+    <transition-group
+        name="list"
+        tag="div"
+        class="flex flex-row flex-wrap gap-4 items-stretch"
+        :class="filesClass"
+    >
+      <label
+          key="label"
+          for="image"
+          class="flex flex-row items-center justify-center gap-2 bg-box rounded-lg w-57 outline-1 outline-dashed outline-offset-6 my-2 mr-2 cursor-pointer border-border border-1"
+          :class="[
+  hovered ? 'outline-danger text-danger' : 'outline-primary text-primary-500',
+  uploaderClass
+]">
+        <i class="flex justify-center items-center svg:(w-8 h-8)">
+          <TheNuxtIcon name="solar:gallery-add-line-duotone"/>
+        </i>
+        <b>{{ label || $t("\u0622\u067E\u0644\u0648\u062F \u062A\u0635\u0648\u06CC\u0631") }}</b>
+      </label>
+      <div
+          v-for="(image, index) in files"
+          :key="index"
+          class="bg-box rounded-lg aspect-square w-16 overflow-hidden relative border-(1 solid)"
+          :class="[
+  selected === index && selectable ? 'border-primary' : 'border-transparent'
+]"
+      >
+        <img
+            :src="image"
+            :alt="index"
+            class="w-full h-full object-cover"
+        />
+        <div v-if="selectable"
+             class="absolute inset-0 bg-white bg-opacity-50 svg:(w-6 h-6) opacity-30 transition duration-300 cursor-pointer hover:(opacity-100)"
+             @click.self="emit('select', index)">
+        </div>
+        <TheNuxtIcon name="solar:gallery-remove-line-duotone"
+                     class="z-1 !absolute left-0 bottom-0 hover:(text-danger) cursor-pointer w-6 h-6"
+                     @click="deleteImage(index)"
+        />
+      </div>
+    </transition-group>
+  </form>
+</template>
+
+<script setup>
+const emit = defineEmits(["select", "update:modelValue"]);
+const props = defineProps({
+  label: { type: String, required: false },
+  selected: { type: Number, required: false },
+  max: { type: Number, required: false },
+  uploaderClass: { type: String, required: false },
+  filesClass: { type: String, required: false },
+  selectable: { type: String, required: false },
+  watermark: { type: [String, null], required: false },
+  accept: { type: [String, null], required: false }
+});
+const hovered = ref(false);
+const loadedpicture = ref("");
+const files = defineModel({ default: () => [] });
+const drop = (e) => {
+  hovered.value = false;
+  upload(e.dataTransfer);
+};
+const upload = (evt) => {
+  if (props.max && files.value?.length >= props.max) return;
+  for (let i = 0; i < evt?.files?.length; i++) {
+    compile(evt.files[i]);
+  }
+};
+const compile = async (file) => {
+  if (!file.type.includes("image")) return;
+  uploadToServer(file);
+};
+const loading = ref(false);
+const uploadToServer = async (file) => {
+  loading.value = true;
+  const fm = new FormData();
+  fm.append("file", file);
+  const { result } = await usePost("/upload", fm);
+  if (result) {
+    files.value = [...files.value, result];
+  }
+  loading.value = false;
+};
+const deleteImage = (index) => {
+  files.value.splice(index, 1);
+  emit(
+    "select",
+    props.selected > 0 ? props.selected - 1 : props.selected
+  );
+};
+</script>

package/dist/runtime/components/UnMultiUploader.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    label?: string;
+    selected?: number;
+    max?: number;
+    uploaderClass?: string;
+    filesClass?: string;
+    selectable?: string;
+    watermark?: string | null;
+    accept?: string | null;
+};
+declare const __VLS_defaultModels: {
+    modelValue: () => never[];
+};
+type __VLS_ModelProps = {
+    modelValue?: typeof __VLS_defaultModels['modelValue'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnSelect.vue

@@ -72,9 +72,9 @@
                 :key="Value(option)"
                 :value="Value(option)"
                 :item="Label(option)"
-                :class="[customClass.checkbox, customClass[value?.includes(Value(option)) ? 'selected' : 'notSelected']?.checkbox]"
+                :class="[customClass.checkbox, customClass[value?.includes?.(Value(option)) ? 'selected' : 'notSelected']?.checkbox]"
                 :custom-class="customClass.checkboxItem"
-                :selected="value?.includes(Value(option))"
+                :selected="value?.includes?.(Value(option))"
                 @click="handleSelect(option)"
               />
               <UnButton
@@ -127,7 +127,7 @@ const search = ref("");
 const Searchable = computed(() => searchable && items?.length > 8);
 const searchedOptions = computed(() => {
   if (!search.value) return items;
-  return items.filter((option) => Label(option).title?.toLowerCase().includes(search.value?.toLowerCase()?.trim()));
+  return items.filter((option) => Label(option).title?.toLowerCase().includes?.(search.value?.toLowerCase()?.trim()));
 });
 const close = () => {
   show.value = false;
@@ -143,7 +143,7 @@ const handleSelect = (data) => {
     close();
     return;
   }
-  const existingItem = value.value?.includes(Value(data));
+  const existingItem = value.value?.includes?.(Value(data));
   let items2 = [];
   if (existingItem) {
     items2 = value.value.filter((item) => item !== Value(data));

package/dist/runtime/components/UnTableCard.d.vue.ts

@@ -0,0 +1,22 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    items: unknown[];
+    cols: unknown[];
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    [x: string]: ((props: {
+        col: any;
+        item: any;
+        items: any;
+    }) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly items: unknown[];
+    readonly cols: unknown[];
+};

package/dist/runtime/components/UnTableCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-col children:(p-4)">
+    <table class="flex-grow">
+      <thead>
+      <tr class="border-b-2 border-gray-100 children:(text-center p-4) rounded-2xl <md:children:p-1">
+        <th v-for="col in cols"
+            :class="{'<md:hidden':col.isDesktop,'hidden <md:table-cell':col.isMobile}"
+            class="text-xs text-gray-400 font-medium first:text-right last:text-left">
+          {{ col.title }}
+        </th>
+      </tr>
+      </thead>
+      <tbody >
+      <tr v-for="item in items"
+          @click="$emit('click:row',item)"
+          class="children:p-3 <md:children:p-1 text-center children:(border-b border-gray-100) hover:children:(bg-gray-100)">
+        <td v-for="col in cols"
+            class="text-gray-400 text-sm first:text-right last:text-left text-center first:rounded-r-lg last:rounded-l-lg"
+            :class="[col.class,{'<md:hidden':col.isDesktop,'hidden <md:table-cell':col.isMobile}]" :dir="col.dir">
+          <slot :name="col.name" :col="col" :item="item" :items="_at(item,col.key)">
+            {{ _at(item, col.key).join(' ') }}
+          </slot>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <div v-if="!items.length" class="flex justify-center items-center p-24 font-bold text-sm text-text">
+      {{ $t('هیچ موردی برای این جستجو یافت نشد') }}
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  cols: {
+    type: Array,
+    default: () => []
+  },
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+const { isDesktop, isMobile } = useDevice();
+</script>