@unsource/ui 1.9.0 → 1.9.5

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "unsource-ui",
   "configKey": "unsourceUi",
-  "version": "1.9.0",
+  "version": "1.9.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -41,17 +41,13 @@ const module = defineNuxtModule({
           prefix: "iconsax-linear",
           dir: resolver.resolve("./runtime/assets/icons/linear")
         },
-        // {
-        //   prefix: 'iconsax-outline',
-        //   dir: resolver.resolve('./runtime/assets/icons/outline'),
-        // },
         {
           prefix: "iconsax-twotone",
           dir: resolver.resolve("./runtime/assets/icons/twotone")
         },
         {
           prefix: "my-icon",
-          dir: "./assets/icons"
+          dir: resolver.resolve("./runtime/assets/icons")
         }
       ]
     });

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

@@ -1,18 +1,17 @@
 import type { CardItem } from './UnCard.vue.js';
+import type { CardCustomClass } from "./UnCard.vue.js";
+export type CheckboxCustomInput = Partial<Record<'box' | 'innerBox' | 'card', string>> & {
+    item?: CardCustomClass;
+};
+export type CheckboxCustomClass = CheckboxCustomInput & {
+    selected?: CheckboxCustomInput;
+    notSelected?: CheckboxCustomInput;
+};
 type __VLS_Props = {
     item: CardItem;
     selected?: boolean;
+    customClass?: CheckboxCustomClass;
 };
-declare var __VLS_6: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/UnCheckboxItem.vue

@@ -1,28 +1,30 @@
 <template>
   <div
-    class="px-4 py-3 flex gap-3 transition duration-300 hover:bg-primary-100"
+    class="px-4 py-3 flex items-center gap-2 transition duration-300 hover:bg-primary-100"
     @click="toggle"
   >
-    <div class="flex items-center grow-1 gap-2">
+    <div
+      name="box"
+      :class="[customClass.box, customClass[selected ? 'selected' : 'notSelected']?.box]"
+      class="border-(1 solid primary) rounded w-4 h-4 flex justify-center items-center"
+    >
       <div
-        class="border-(1 solid primary) rounded w-4 h-4 flex justify-center items-center"
-      >
-        <div
-          class="bg-primary rounded h-8px w-10px transition-height duration-200"
-          :class="[selected ? '!h-10px' : '!h-1px']"
-        />
-      </div>
-      <UnCard :item />
+        name="innerBox"
+        class="bg-primary rounded h-8px w-10px transition-height duration-200"
+        :class="[customClass.innerBox, customClass[selected ? 'selected' : 'notSelected']?.innerBox, selected ? '!h-10px' : '!h-1px']"
+      />
     </div>
-    <slot />
+    <UnCard :class="[customClass.card, customClass[selected ? 'selected' : 'notSelected']?.card]" :custom-class="_mergeWith(customClass.item, customClass[selected ? 'selected' : 'notSelected']?.item, merge)" :item/>
   </div>
 </template>
 
 <script setup>
+import { _mergeWith, merge } from "#imports";
 const emit = defineEmits(["input"]);
-defineProps({
+const { customClass = {} } = defineProps({
   item: { type: Object, required: true },
-  selected: { type: Boolean, required: false }
+  selected: { type: Boolean, required: false },
+  customClass: { type: Object, required: false }
 });
 const toggle = () => {
   emit("input");

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

@@ -1,18 +1,17 @@
 import type { CardItem } from './UnCard.vue.js';
+import type { CardCustomClass } from "./UnCard.vue.js";
+export type CheckboxCustomInput = Partial<Record<'box' | 'innerBox' | 'card', string>> & {
+    item?: CardCustomClass;
+};
+export type CheckboxCustomClass = CheckboxCustomInput & {
+    selected?: CheckboxCustomInput;
+    notSelected?: CheckboxCustomInput;
+};
 type __VLS_Props = {
     item: CardItem;
     selected?: boolean;
+    customClass?: CheckboxCustomClass;
 };
-declare var __VLS_6: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,5 +1,5 @@
 import type { CardCustomClass, CardItem } from './UnCard.vue.js';
-export type RadioCustomInput = Partial<Record<'radio' | 'radioInside', string>> & {
+export type RadioCustomInput = Partial<Record<'radio' | 'radioInside' | 'card', string>> & {
     item?: CardCustomClass;
 };
 export type RadioCustomClass = RadioCustomInput & {

package/dist/runtime/components/UnRadioItem.vue

@@ -17,13 +17,14 @@
     <UnCard
       :item="item"
       class="!bg-transparent"
+      :class="[customClass.card, customClass[selected ? 'selected' : 'notSelected']?.card]"
       :custom-class="_mergeWith(customClass.item, customClass[selected ? 'selected' : 'notSelected']?.item, merge)"
     />
   </div>
 </template>
 
 <script setup>
-import { _mergeWith, isPlainObject } from "#imports";
+import { _mergeWith, merge } from "#imports";
 const emit = defineEmits(["input"]);
 const { customClass = {} } = defineProps({
   value: { type: null, required: true },
@@ -34,12 +35,4 @@ const { customClass = {} } = defineProps({
 const toggle = () => {
   emit("input");
 };
-const merge = (v, s) => {
-  if (typeof v === "string") {
-    return s + " " + v;
-  }
-  if (isPlainObject(v)) {
-    return _mergeWith(s, v, merge);
-  }
-};
 </script>

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

@@ -1,5 +1,5 @@
 import type { CardCustomClass, CardItem } from './UnCard.vue.js';
-export type RadioCustomInput = Partial<Record<'radio' | 'radioInside', string>> & {
+export type RadioCustomInput = Partial<Record<'radio' | 'radioInside' | 'card', string>> & {
     item?: CardCustomClass;
 };
 export type RadioCustomClass = RadioCustomInput & {

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

@@ -1,3 +1,5 @@
+import type { RadioCustomClass } from "./UnRadioItem.vue.js";
+import type { CheckboxCustomClass } from "./UnCheckboxItem.vue.js";
 type __VLS_Props = {
     placeholder?: string;
     icon?: string;
@@ -6,29 +8,21 @@ type __VLS_Props = {
     multi?: boolean;
     searchable?: boolean;
     valueKey?: string;
-    descriptionKey?: string;
-    wrapperClass?: string;
     readonly?: boolean;
     inline?: boolean;
+    customClass?: Partial<Record<'header' | 'icon' | 'label' | 'arrowIcon' | 'wrapper' | 'innerWrapper' | 'search' | 'list' | 'radio' | 'checkbox' | 'checkboxButton', unknown>> & {
+        radioItem?: RadioCustomClass;
+        checkboxItem?: CheckboxCustomClass;
+    };
 };
 type __VLS_ModelProps = {
     modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/UnSelect.vue

@@ -4,40 +4,28 @@
     class="cursor-pointer relative"
   >
     <div
+      name="header"
       v-if="!inline"
-      :class="wrapperClass"
+      :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 ? show = !show : ''"
     >
-      <div
+      <UnNuxtIcon
         v-if="icon"
-        class="flex items-center justify-center"
-        @click.self="!readonly && !inline ? show = !show : ''"
-      >
-        <slot name="icon">
-          <UnNuxtIcon
-            :name="icon"
-            class="text-xl"
-            @click.self="!readonly && !inline ? show = !show : ''"
-          />
-        </slot>
-      </div>
-      <p class="flex-grow text-sm select-none whitespace-nowrap">
+        :name="icon"
+        :class="customClass.icon"
+        class="text-xl"
+      />
+      <p name="label" :class="customClass.label" class="flex-grow text-sm select-none whitespace-nowrap">
         {{
           (multi && Array.isArray(value) && !value?.length || value === void 0 ? placeholder : multi ? value.map((v) => Label(IsSelected(v)).title).join(", ") : Label(Selected).title) || "\u0627\u0646\u062A\u062E\u0627\u0628"
         }}
       </p>
-      <div
-        class="flex items-center justify-center"
-        @click.self="!readonly ? show = !show : ''"
-      >
-        <UnNuxtIcon
-          name="iconsax-bold:arrow-down"
-          class="transform transition-transform duration-300 text-xl"
-          :class="{ 'rotate-180': show }"
-          @click.self="show = !show"
-        />
-      </div>
+      <UnNuxtIcon
+        name="iconsax-bold:arrow-down"
+        class="transform transition-transform duration-300 text-xl"
+        :class="[customClass.arrowIcon, { 'rotate-180': show }]"
+      />
     </div>
     <Teleport
       v-if="show && !readonly || inline"
@@ -45,29 +33,32 @@
       to="body"
     >
       <div
+        name="wrapper"
         v-on-click-outside="close"
         :style="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"
         :class="[
-  inline ? 'relative' : 'absolute',
+  customClass.wrapper.inline ? 'relative' : 'absolute',
   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)"
         >
-          <div
-            v-if="Searchable"
-            class="p-1"
-          >
             <UnSearch
+              name="search"
+              :class="customClass.search"
+              v-if="Searchable"
               v-model="search"
               class="h-10"
               placeholder="جستجو..."
             />
-          </div>
           <div
+            name="list"
+            :class="customClass.list"
             class="divide-y divide-border min-w-fit divide-dashed divide-solid flex flex-col items-stretch overflow-y-auto scrollbar-width-thin !children:b-x-0"
           >
             <template v-if="multi">
@@ -76,6 +67,8 @@
                 :key="Value(option)"
                 :value="Value(option)"
                 :item="Label(option)"
+                :class="customClass.checkbox"
+                :custom-class="customClass.checkboxItem"
                 :selected="value?.includes(Value(option))"
                 @click="handleSelect(option)"
               />
@@ -84,6 +77,7 @@
                 variant="primary-fill"
                 label="تایید"
                 class="m-2"
+                :class="customClass.checkboxButton"
                 @click="close"
               />
             </template>
@@ -93,6 +87,8 @@
                 :key="Value(option)"
                 :value="Value(option)"
                 :item="Label(option)"
+                :class="customClass.radio"
+                :custom-class="customClass.radioItem"
                 :selected="isEqual(Value(option), value)"
                 class="!min-w-60"
                 @click="handleSelect(option)"
@@ -108,7 +104,7 @@
 <script setup>
 import { vOnClickOutside } from "@vueuse/components";
 import { _get, computed, isEqual, nextTick, ref, watch } from "#imports";
-const props = defineProps({
+const { valueKey, items, multi, searchable, customClass = {} } = defineProps({
   placeholder: { type: String, required: false },
   icon: { type: String, required: false },
   light: { type: Boolean, required: false },
@@ -116,41 +112,40 @@ const props = defineProps({
   multi: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   valueKey: { type: String, required: false },
-  descriptionKey: { type: String, required: false },
-  wrapperClass: { type: String, required: false },
   readonly: { type: Boolean, required: false },
-  inline: { type: Boolean, required: false }
+  inline: { type: Boolean, required: false },
+  customClass: { type: Object, required: false }
 });
 const value = defineModel({ type: null });
 const show = ref(false);
 const search = ref("");
-const Searchable = computed(() => props.searchable && props.items?.length > 8);
+const Searchable = computed(() => searchable && items?.length > 8);
 const searchedOptions = computed(() => {
-  if (!search.value) return props.items;
-  return props.items.filter((option) => Label(option).title?.toLowerCase().includes(search.value?.toLowerCase()?.trim()));
+  if (!search.value) return items;
+  return items.filter((option) => Label(option).title?.toLowerCase().includes(search.value?.toLowerCase()?.trim()));
 });
 const close = () => {
   show.value = false;
 };
 const dropdownStyles = ref({});
-const Value = (option) => _get(option, props.valueKey || "value", option) || option;
+const Value = (option) => _get(option, valueKey || "value", option) || option;
 const Label = (option) => typeof option === "string" ? { title: option } : option;
-const Selected = computed(() => props.items.find((o) => isEqual(Value(o), value.value)));
-const IsSelected = (v) => props.items.find((o) => isEqual(Value(o), v));
+const Selected = computed(() => items.find((o) => isEqual(Value(o), value.value)));
+const IsSelected = (v) => items.find((o) => isEqual(Value(o), v));
 const handleSelect = (data) => {
-  if (!props.multi) {
+  if (!multi) {
     value.value = Value(data);
     close();
     return;
   }
   const existingItem = value.value?.includes(Value(data));
-  let items = [];
+  let items2 = [];
   if (existingItem) {
-    items = value.value.filter((item) => item !== Value(data));
+    items2 = value.value.filter((item) => item !== Value(data));
   } else {
-    items = [...value.value || [], Value(data)];
+    items2 = [...value.value || [], Value(data)];
   }
-  value.value = items;
+  value.value = items2;
 };
 const wrapper = ref(null);
 const updateDropdownPosition = () => {

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

@@ -1,3 +1,5 @@
+import type { RadioCustomClass } from "./UnRadioItem.vue.js";
+import type { CheckboxCustomClass } from "./UnCheckboxItem.vue.js";
 type __VLS_Props = {
     placeholder?: string;
     icon?: string;
@@ -6,29 +8,21 @@ type __VLS_Props = {
     multi?: boolean;
     searchable?: boolean;
     valueKey?: string;
-    descriptionKey?: string;
-    wrapperClass?: string;
     readonly?: boolean;
     inline?: boolean;
+    customClass?: Partial<Record<'header' | 'icon' | 'label' | 'arrowIcon' | 'wrapper' | 'innerWrapper' | 'search' | 'list' | 'radio' | 'checkbox' | 'checkboxButton', unknown>> & {
+        radioItem?: RadioCustomClass;
+        checkboxItem?: CheckboxCustomClass;
+    };
 };
 type __VLS_ModelProps = {
     modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/composables/global.d.ts

@@ -0,0 +1 @@
+export declare const merge: (v: string | Record<string, unknown>, s: string | Record<string, unknown>) => string | Record<string, unknown> | undefined;

package/dist/runtime/composables/global.js

@@ -0,0 +1,9 @@
+import { _mergeWith, isPlainObject } from "#imports";
+export const merge = (v, s) => {
+  if (typeof v === "string") {
+    return s + " " + v;
+  }
+  if (isPlainObject(v)) {
+    return _mergeWith(s, v, merge);
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsource/ui",
-  "version": "1.9.0",
+  "version": "1.9.5",
   "private": false,
   "description": "nuxt ui kit for unsource env",
   "repository": "https://github.com/alisa2142/unsource-ui",
@@ -24,7 +24,7 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build build",
+
     "dev": "npm run dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "eslint.experimental.useFlatConfig": true
-}