@unsource/ui 2.9.38 → 2.9.45

package/dist/runtime/components/UnInput.vue

@@ -16,10 +16,10 @@
       @input="SetText"
     >
     <div
-      v-if="Input?.append"
+      v-if="append || Input?.append"
       class="flex items-center justify-center text-gray-500"
     >
-      {{ Input.append }}
+      {{ append || Input.append }}
     </div>
   </div>
 </template>
@@ -27,14 +27,16 @@
 <script setup>
 import { s2n, p2e, computed } from "#imports";
 import numeral from "numeral";
-const { Type, Input } = defineProps({
+const { Type, Input, precision = 0 } = defineProps({
   disabled: { type: Boolean, required: false },
   Input: { type: Object, required: false },
   Type: { type: String, required: false },
   isError: { type: Boolean, required: false },
-  index: { type: Number, required: false }
+  index: { type: Number, required: false },
+  append: { type: String, required: false },
+  precision: { type: Number, required: false }
 });
 const modelValue = defineModel({ type: null });
-const Text = computed(() => Type === "number" ? numeral(modelValue.value).format("0,0") : ["numeric", "decimal"].includes(Input?.keyboadType) ? s2n(p2e(modelValue.value + "")) : modelValue.value);
+const Text = computed(() => Type === "number" ? numeral(modelValue.value).format(precision ? `0,0[.][${"0".repeat(precision)}]` : "0,0") : ["numeric", "decimal"].includes(Input?.keyboadType) ? s2n(p2e(modelValue.value + "")) : modelValue.value);
 const SetText = (v) => modelValue.value = Type === "number" ? Number(s2n(p2e(v.target.value || 0))) : v.target.value || "";
 </script>

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

@@ -1,12 +1,14 @@
 import type { Input } from '../types/models.js';
 type __VLS_Props = {
     disabled?: boolean;
-    Input?: Partial<Input>;
+    Input?: Input;
     Type?: Input['type'];
     isError?: boolean;
     index?: number;
+    append?: string;
+    precision?: number;
 };
-declare const Input: Partial<Input> | undefined;
+declare const Input: Input | undefined;
 type __VLS_ModelProps = {
     modelValue?: any;
 };

package/dist/runtime/components/UnList.vue

@@ -1,30 +1,30 @@
 <template>
-  <div
-    class="flex flex-col p-3 bg-white rounded-2xl gap-4"
-  >
-    <div
-      v-if="title || $slots.default"
-      :class="customClass?.header"
-      class="flex items-center justify-between"
-    >
-      <h3
-        v-if="title"
-        :class="customClass?.title"
-        class="text-(lg gray-600) font-semibold"
-      >
-        {{ title }}
-      </h3>
-      <slot />
-    </div>
-    <UnCard
-      v-for="(item, index) in items"
-      :key="index"
-      :class="customClass.items"
-      :custom-class="customClass.item"
-      :item="item"
-      :to="to?.(item)"
-    />
-  </div>
+  <div
+    class="flex flex-col p-3 bg-white rounded-2xl gap-4"
+  >
+    <div
+      v-if="title || $slots.default"
+      :class="customClass?.header"
+      class="flex items-center justify-between"
+    >
+      <h3
+        v-if="title"
+        :class="customClass?.title"
+        class="text-(lg gray-600) font-semibold"
+      >
+        {{ title }}
+      </h3>
+      <slot />
+    </div>
+    <UnCard
+      v-for="(item, index) in items"
+      :key="index"
+      :class="customClass.items"
+      :custom-class="customClass.item"
+      :item="item"
+      :to="to?.(item)"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/UnProfile.vue

@@ -1,52 +1,52 @@
 <template>
-  <div class="grow flex flex-col gap-3">
-    <div class="flex flex-col items-stretch gap-3 grow-1 p-4">
-      <UnCard
-        v-for="(item, index) in items.filter((e) => !e.disable)"
-        :key="index"
+  <div class="grow flex flex-col gap-3">
+    <div class="flex flex-col items-stretch gap-3 grow-1 p-4">
+      <UnCard
+        v-for="(item, index) in items.filter((e) => !e.disable)"
+        :key="index"
         :custom-class="_mergeWith(customClass.item, {
   logo: '!w-8 !h-8 !border-none !rounded-0',
   body: '!items-center'
-}, merge)"
-        :class="customClass.items"
-        :to="item.to"
-        :item="item"
-        @click="item.handler?.()"
-      >
-        <template #header>
-          <UnNuxtIcon
-            :class="customClass.appendIcon"
-            :name="item.appendIcon || 'solar:alt-arrow-left-line-duotone'"
-            class="text-sm"
-          />
-        </template>
-      </UnCard>
-    </div>
-    <div class="grow" />
-    <div class="flex flex-col gap-2 text-sm text-center self-stretch">
-      <slot>
-        <NuxtLink
-          v-if="developer"
-          :to="developerLink || '#'"
-          target="_blank"
-          class="flex justify-center gap-1 self-center"
-        >طراحی و توسعه توسط <span class="text-blue-6 font-bold">{{ developer }}</span>
-          <UnNuxtIcon
-            v-if="developerIcon"
-            :name="developerIcon"
-            class="!text-xl"
-          />
-        </NuxtLink>
-        <p v-if="owner">
-          کلیه حقوق مادی و معنوی این نرم‌افزار متعلق به شرکت <span class="text-primary-500 font-bold">{{ owner }}</span>
-          می‌باشد.
-        </p>
-        <p v-if="version">
-          V{{ version }}
-        </p>
-      </slot>
-    </div>
-  </div>
+}, merge)"
+        :class="customClass.items"
+        :to="item.to"
+        :item="item"
+        @click="item.handler?.()"
+      >
+        <template #header>
+          <UnNuxtIcon
+            :class="customClass.appendIcon"
+            :name="item.appendIcon || 'solar:alt-arrow-left-line-duotone'"
+            class="text-sm"
+          />
+        </template>
+      </UnCard>
+    </div>
+    <div class="grow" />
+    <div class="flex flex-col gap-2 text-sm text-center self-stretch">
+      <slot>
+        <NuxtLink
+          v-if="developer"
+          :to="developerLink || '#'"
+          target="_blank"
+          class="flex justify-center gap-1 self-center"
+        >طراحی و توسعه توسط <span class="text-blue-6 font-bold">{{ developer }}</span>
+          <UnNuxtIcon
+            v-if="developerIcon"
+            :name="developerIcon"
+            class="!text-xl"
+          />
+        </NuxtLink>
+        <p v-if="owner">
+          کلیه حقوق مادی و معنوی این نرم‌افزار متعلق به شرکت <span class="text-primary-500 font-bold">{{ owner }}</span>
+          می‌باشد.
+        </p>
+        <p v-if="version">
+          V{{ version }}
+        </p>
+      </slot>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/UnRadioItem.vue

@@ -1,28 +1,28 @@
 <template>
-  <div
-    class="relative select-none group px-4 py-3 flex flex-row items-center gap-3 transition duration-300 hover:bg-primary-500/10 border-0 min-w-fit"
-    :class="{ 'opacity-50 grayscale': disabled, 'disable': disabled, 'selected': selected }"
-    @click.prevent.stop="toggle"
-  >
-    <div
-      name="radio"
-      :class="customClass.radio"
-      class="group-[.disable]:border-secondary border-(1 solid primary) rounded-1/2 w-4 h-4 flex justify-center items-center"
-    >
-      <div
-        name="radioInside"
-        class="bg-primary-500 rounded-1/2 h-10px w-10px transition-opacity duration-200"
-        :class="[customClass.radioInside, selected ? 'opacity-full' : 'opacity-0']"
-      />
-    </div>
-    <UnCard
-      :item="item"
-      class="!bg-transparent grow-1"
-      :class="customClass.card"
-      :custom-class="customClass.item"
-      :info-icon="infoIcon"
-    />
-  </div>
+  <div
+    class="relative select-none group px-4 py-3 flex flex-row items-center gap-3 transition duration-300 hover:bg-primary-500/10 border-0 min-w-fit"
+    :class="{ 'opacity-50 grayscale': disabled, 'disable': disabled, 'selected': selected }"
+    @click.prevent.stop="toggle"
+  >
+    <div
+      name="radio"
+      :class="customClass.radio"
+      class="group-[.disable]:border-secondary border-(1 solid primary) rounded-1/2 w-4 h-4 flex justify-center items-center"
+    >
+      <div
+        name="radioInside"
+        class="bg-primary-500 rounded-1/2 h-10px w-10px transition-opacity duration-200"
+        :class="[customClass.radioInside, selected ? 'opacity-full' : 'opacity-0']"
+      />
+    </div>
+    <UnCard
+      :item="item"
+      class="!bg-transparent grow-1"
+      :class="customClass.card"
+      :custom-class="customClass.item"
+      :info-icon="infoIcon"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/UnSelect.vue

@@ -1,117 +1,118 @@
 <template>
-  <div
-    ref="wrapper"
-    class="cursor-pointer relative"
-  >
-    <div
-      v-if="!inline"
-      :id
-      name="header"
-      :class="customClass.header"
-      class="bg-white h-12 rounded-2xl flex flex-row gap-1 items-center px-2 py-1  cursor-pointer text-black-1 relative"
-      @click="!readonly && !inline ? toggle() : ''"
-    >
-      <UnNuxtIcon
-        v-if="icon"
-        :name="icon"
-        :class="customClass.icon"
-        class="text-xl"
-      />
-      <p
-        name="label"
-        :class="customClass.label"
-        class="flex-grow text-sm select-none whitespace-nowrap"
-      >
-        {{
-          (multi && isArray(value) && !value?.length || isNil(value) ? placeholder : multi ? value.map((v) => Label(IsSelected(v))?.title).join(", ") : Label(Selected)?.title) || placeholder
-        }}
-      </p>
-      <UnNuxtIcon
-        name="iconsax:arrow-down-bold"
-        class="transform transition-transform duration-300 text-xl"
-        :class="[customClass.arrowIcon, { 'rotate-180': show }]"
-      />
-    </div>
-    <Teleport
-      v-if="show && !readonly || inline"
-      :disabled="inline"
-      to="body"
-    >
-      <div
-        v-on-click-outside="close"
-        name="wrapper"
-        :style="!isMobile && !inline && dropdownStyles"
-        class="z-1000 md:mt-3  rounded-2xl w-full min-w-fit text-base flex flex-col items-stretch overflow-y-auto scrollbar-thin"
+  <div
+    ref="wrapper"
+    class="cursor-pointer relative"
+  >
+    <div
+      v-if="!inline"
+      :id
+      name="header"
+      :class="customClass.header"
+      class="bg-white h-12 rounded-2xl flex flex-row gap-1 items-center px-2 py-1  cursor-pointer text-black-1 relative"
+      @click="!readonly && !inline ? toggle() : ''"
+    >
+      <UnNuxtIcon
+        v-if="icon"
+        :name="icon"
+        :class="customClass.icon"
+        class="text-xl"
+      />
+      <p
+        name="label"
+        :class="customClass.label"
+        class="flex-grow text-sm select-none whitespace-nowrap"
+      >
+        {{
+          (multi && isArray(value) && !value?.length || isNil(value) ? placeholder : multi ? value.map((v) => Label(IsSelected(v))?.title).join(", ") : Label(Selected)?.title) || placeholder
+        }}
+      </p>
+      <UnNuxtIcon
+        name="iconsax:arrow-down-bold"
+        class="transform transition-transform duration-300 text-xl"
+        :class="[customClass.arrowIcon, { 'rotate-180': show }]"
+      />
+    </div>
+    <Teleport
+      :disabled="inline"
+      to="body"
+    >
+      <div
+        v-show="show && !readonly || inline"
+        v-on-click-outside="close"
+        name="wrapper"
+        ref="list"
+        :style="!isMobile && !inline && dropdownStyles"
+        class="z-1000 md:mt-3  rounded-2xl w-auto <md:w-full min-w-fit text-base flex flex-col items-stretch overflow-y-auto scrollbar-thin"
         :class="[
   customClass.wrapper,
   inline ? 'relative' : 'absolute <md:(bg-black/10 fixed inset-0 backdrop-blur-xs justify-end)',
   light ? 'bg-white' : 'bg-border',
   inline ? '' : Searchable ? 'md:max-h-230px' : 'md:max-h-160px'
-]"
-      >
-        <div
-          name="innerWrapper"
-          :class="customClass.innerWrapper"
-          class="flex flex-col items-stretch min-w-fit <md:(max-h-80dvh bg-white border-(1 solid primary) rounded-t-2xl pb-24)"
-        >
-          <UnSearch
-            v-if="Searchable"
-            v-model="search"
-            name="search"
-            :class="customClass.search"
-            class="h-10"
-            placeholder="جستجو..."
-          />
-          <div
-            name="list"
-            :class="customClass.list"
-            class="min-w-fit divide-(y dashed border) flex flex-col items-stretch overflow-y-auto scrollbar-width-thin !children:b-x-0"
-          >
-            <template v-if="multi">
-              <UnCheckboxItem
-                v-for="option in searchedOptions"
-                :key="Value(option)"
-                :value="Value(option)"
-                :item="Label(option)"
-                :class="customClass.checkbox"
-                :custom-class="customClass.checkboxItem"
-                :selected="value?.includes?.(Value(option))"
-                :disabled="option.disable"
-                @click="handleSelect(option)"
-              />
-              <UnButton
-                v-if="!inline"
-                variant="primary-fill"
-                label="تایید"
-                class="m-2"
-                :class="customClass.checkboxButton"
-                @click="close"
-              />
-            </template>
-            <template v-else>
-              <UnRadioItem
-                v-for="option in searchedOptions"
-                :key="Value(option)"
-                :value="Value(option)"
-                :item="Label(option)"
-                :class="customClass.radio"
-                :custom-class="customClass.radioItem"
-                :selected="isEqual(Value(option), value)"
-                :disabled="option.disable"
-                class="!min-w-60"
-                @click="handleSelect(option)"
-              />
-            </template>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-  </div>
+]"
+      >
+        <div
+          name="innerWrapper"
+          :class="customClass.innerWrapper"
+          class="flex flex-col items-stretch min-w-fit <md:(max-h-80dvh bg-white border-(1 solid primary) rounded-t-2xl pb-24)"
+        >
+          <UnSearch
+            v-if="Searchable"
+            v-model="search"
+            name="search"
+            :class="customClass.search"
+            class="h-10"
+            placeholder="جستجو..."
+          />
+          <div
+            name="list"
+            :class="customClass.list"
+            class="min-w-fit divide-(y dashed border) flex flex-col items-stretch overflow-y-auto scrollbar-width-thin !children:b-x-0"
+          >
+            <template v-if="multi">
+              <UnCheckboxItem
+                v-for="option in searchedOptions"
+                :key="Value(option)"
+                :value="Value(option)"
+                :item="Label(option)"
+                :class="customClass.checkbox"
+                :custom-class="customClass.checkboxItem"
+                :selected="value?.includes?.(Value(option))"
+                :disabled="option.disable"
+                @click="handleSelect(option)"
+              />
+              <UnButton
+                v-if="!inline"
+                variant="primary-fill"
+                label="تایید"
+                class="m-2"
+                :class="customClass.checkboxButton"
+                @click="close"
+              />
+            </template>
+            <template v-else>
+              <UnRadioItem
+                v-for="option in searchedOptions"
+                :key="Value(option)"
+                :value="Value(option)"
+                :item="Label(option)"
+                :class="customClass.radio"
+                :custom-class="customClass.radioItem"
+                :selected="isEqual(Value(option), value)"
+                :disabled="option.disable"
+                class="!min-w-60"
+                @click="handleSelect(option)"
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
 </template>
 
 <script setup>
 import { vOnClickOutside } from "@vueuse/components";
-import { _get, computed, isArray, isEqual, isNil, nextTick, ref, useDevice, useId, watch } from "#imports";
+import { _get, computed, isArray, isEqual, isNil, nextTick, ref, useDevice, useId, useTemplateRef, watch } from "#imports";
 const { isMobile } = useDevice();
 const { valueKey, items, multi, searchable, customClass = {} } = defineProps({
   placeholder: { type: String, required: false },
@@ -166,14 +167,19 @@ const handleSelect = (data) => {
   value.value = items2;
 };
 const wrapper = ref(null);
+const list = useTemplateRef("list");
 const updateDropdownPosition = () => {
   if (!wrapper.value) return;
+  if (!list.value) return;
   const rect = wrapper.value.getBoundingClientRect();
+  const mainRect = list.value.getBoundingClientRect();
+  console.log(mainRect, rect, window.scrollY, window.innerWidth, window.innerHeight);
   dropdownStyles.value = {
-    position: "absolute",
-    top: `${rect.bottom + window.scrollY}px`,
-    right: `${window.innerWidth - rect.right}px`,
-    width: `${rect.width}px`,
+    // position: 'absolute',
+    top: mainRect.height > window.innerHeight - rect.bottom ? "auto" : `${rect.bottom + window.scrollY}px`,
+    bottom: mainRect.height > window.innerHeight - rect.bottom ? `${window.innerHeight - rect.top - window.scrollY + 5}px` : "auto",
+    right: mainRect.width > rect.right ? `${window.innerWidth - mainRect.width - 5}px` : `${window.innerWidth - rect.right}px`,
+    // width: `${rect.width}px`,
     zIndex: "1000"
   };
 };

package/dist/runtime/components/UnTableRow.vue

@@ -1,79 +1,79 @@
 <template>
-  <tr
-    class="children:p-3 <md:children:p-1 text-center border-b-(2 solid border) hover:bg-primary-500/10"
-    :class="[trClass?.(item, items), { '!bg-primary-500/20': selected?.[idKey] === item[idKey] }]"
+  <tr
+    class="children:p-3 <md:children:p-1 text-center border-b-(2 solid border) hover:bg-primary-500/10"
+    :class="[trClass?.(item, items), { '!bg-primary-500/20': selected?.[idKey] === item[idKey] }]"
     @click="$emit('click:row', item);
-  selected = item"
-    @dbclick="$emit('dbclick:row', item)"
-  >
-    <td
-      v-if="parentKey"
-      class="!max-w-1 !w-1"
-      :style="{ paddingInlineStart: level * 10 + 5 + 'px' }"
-    >
-      <UnNuxtIcon
-        v-if="subItems?.length"
-        class="cursor-pointer w-5 h-5"
-        :name="open ? 'solar:folder-open-broken' : 'solar:add-folder-broken'"
-        @click="open = !open"
-      />
-    </td>
-    <td
-      v-for="col in cols.filter((e) => !e.disabled)"
-      :key="col.name + '-td'"
-      class="text-gray-400 text-sm text-center  first:rounded-l-lg last:rounded-r-lg"
-      :style="{ paddingInlineStart: parentKey ? level * 10 + 5 + 'px' : 'unset' }"
-      :class="[col.classHandler?.(item, col, items, cols), col.class, { '<md:hidden': col.isDesktop, 'hidden <md:table-cell': col.isMobile }, tdClass]"
-      :dir="col.dir"
-    >
-      <slot
-        :name="col.name"
-        :col="col"
-        :item="item"
-        :items="_at(item, col.key)"
-        :index="col.name + '-slot'"
-      >
-        <div class="flex flex-col gap-0.5">
-          <p :class="textClass">
-            {{ col.handler ? col.handler(_at(item, col.key), item, col, items, cols) : _at(item, col.key).join(" ") }}
-          </p>
-          <small
-            v-if="col.subKey?.length"
-            class="font-500 text-gray-600 text-xs"
-          >{{ _at(item, col.subKey).join(" ") }}</small>
-        </div>
-      </slot>
-    </td>
-    <td
-      v-if="parentKey"
-      class="!max-w-1 !w-1 !p-1"
-    >
-      <UnNuxtIcon
-        class="cursor-pointer w-5 h-5"
-        name="solar:add-circle-broken"
-        @click="$emit('add:row', item)"
-      />
-    </td>
-  </tr>
-  <template v-if="parentKey && subItems?.length && open">
-    <UnTableRow
-      v-for="(i, index) in subItems"
-      :key="index"
-      v-model="selected"
-      :item="i"
-      :items
-      :cols
-      :parent-key
-      :level="level + 1"
-      :id-key
-      :text-class
-      :td-class
-      :tr-class
-      @click:row="$emit('click:row', i)"
-      @dbclick:row="$emit('dbclick:row', i)"
-      @add:row="$emit('add:row', i)"
-    />
-  </template>
+  selected = item"
+    @dbclick="$emit('dbclick:row', item)"
+  >
+    <td
+      v-if="parentKey"
+      class="!max-w-1 !w-1"
+      :style="{ paddingInlineStart: level * 10 + 5 + 'px' }"
+    >
+      <UnNuxtIcon
+        v-if="subItems?.length"
+        class="cursor-pointer w-5 h-5"
+        :name="open ? 'solar:folder-open-broken' : 'solar:add-folder-broken'"
+        @click="open = !open"
+      />
+    </td>
+    <td
+      v-for="col in cols.filter((e) => !e.disabled)"
+      :key="col.name + '-td'"
+      class="text-gray-400 text-sm text-center  first:rounded-l-lg last:rounded-r-lg"
+      :style="{ paddingInlineStart: parentKey ? level * 10 + 5 + 'px' : 'unset' }"
+      :class="[col.classHandler?.(item, col, items, cols), col.class, { '<md:hidden': col.isDesktop, 'hidden <md:table-cell': col.isMobile }, tdClass]"
+      :dir="col.dir"
+    >
+      <slot
+        :name="col.name"
+        :col="col"
+        :item="item"
+        :items="_at(item, col.key)"
+        :index="col.name + '-slot'"
+      >
+        <div class="flex flex-col gap-0.5">
+          <p :class="textClass">
+            {{ col.handler ? col.handler(_at(item, col.key), item, col, items, cols) : _at(item, col.key).join(" ") }}
+          </p>
+          <small
+            v-if="col.subKey?.length"
+            class="font-500 text-gray-600 text-xs"
+          >{{ _at(item, col.subKey).join(" ") }}</small>
+        </div>
+      </slot>
+    </td>
+    <td
+      v-if="parentKey"
+      class="!max-w-1 !w-1 !p-1"
+    >
+      <UnNuxtIcon
+        class="cursor-pointer w-5 h-5"
+        name="solar:add-circle-broken"
+        @click="$emit('add:row', item)"
+      />
+    </td>
+  </tr>
+  <template v-if="parentKey && subItems?.length && open">
+    <UnTableRow
+      v-for="(i, index) in subItems"
+      :key="index"
+      v-model="selected"
+      :item="i"
+      :items
+      :cols
+      :parent-key
+      :level="level + 1"
+      :id-key
+      :text-class
+      :td-class
+      :tr-class
+      @click:row="$emit('click:row', i)"
+      @dbclick:row="$emit('dbclick:row', i)"
+      @add:row="$emit('add:row', i)"
+    />
+  </template>
 </template>
 
 <script setup>