@unsource/ui 2.1.4 → 2.1.5

package/dist/module.json

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

package/dist/runtime/components/UnFormItem.vue

@@ -56,10 +56,9 @@
     <UnSelect
       v-else-if="Type === 'select' && options?.length"
       v-model="modelValue"
-      :options="options"
+      :items="options.map((e) => ({ title: e.title, value: e.key }))"
+      value-key="value"
       :light="true"
-      value-key="key"
-      label-key="title"
       :searchable="true"
       :disabled="item.disabled"
       :is-error

package/dist/runtime/components/UnIRDatePicker.vue

@@ -21,7 +21,7 @@
               value ? moment(value, format[type]).locale(locale).format(display[type]) : focused ? "" : placeholder
             }}
           </p>
-          <TheNuxtIcon
+          <UnNuxtIcon
             name="solar:close-circle-bold-duotone"
             class="text-5 c-gray-400"
             @click.prevent.stop="emit('append')"

package/dist/runtime/components/UnMap.vue

@@ -2,33 +2,51 @@
   <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"
+        ref="map"
+        :map-key="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"/>
+        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]"
+      >
+        <UnNuxtIcon
+          name="solar:add-square-line-duotone"
+          @click="zoom(1)"
+        />
+        <UnNuxtIcon
+          name="solar:minus-square-line-duotone"
+          @click="zoom(-1)"
+        />
+        <UnNuxtIcon
+          v-if="isSupported && !readonly"
+          name="solar:gps-line-duotone"
+          @click="setCenterFromLoc"
+        />
+        <a
+          v-if="readonly"
+          :href="geo"
+        >
+          <UnNuxtIcon 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"/>
+      <UnNuxtIcon
+        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>
@@ -39,7 +57,7 @@ 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 { Point, Circle as GeomCircle } from "ol/geom";
 import { fromLonLat, transform } from "ol/proj";
 import Big from "big.js";
 const emit = defineEmits(["select-point"]);

package/dist/runtime/components/UnMultiUploader.vue

@@ -1,75 +1,78 @@
 <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"
+    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)"
-    />
+      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="[
+      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"/>
+        <UnNuxtIcon 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"
+      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="[
+        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"/>
+          <UnNuxtIcon 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="[
+        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"
+          :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 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)"
+        <UnNuxtIcon
+          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>

package/dist/runtime/components/UnSelect.vue

@@ -5,10 +5,11 @@
   >
     <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 ? show = !show : ''"
+      @click="!readonly && !inline ? toggle() : ''"
     >
       <UnNuxtIcon
         v-if="icon"
@@ -39,11 +40,11 @@
       <div
         v-on-click-outside="close"
         name="wrapper"
-        :style="dropdownStyles"
+        :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"
         :class="[
   customClass.wrapper,
-  inline ? 'relative' : 'absolute',
+  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'
 ]"
@@ -108,7 +109,8 @@
 
 <script setup>
 import { vOnClickOutside } from "@vueuse/components";
-import { _get, computed, isEqual, nextTick, ref, watch } from "#imports";
+import { _get, computed, isEqual, nextTick, ref, useDevice, useId, watch } from "#imports";
+const { isMobile } = useDevice();
 const { valueKey, items, multi, searchable, customClass = {} } = defineProps({
   placeholder: { type: String, required: false },
   icon: { type: String, required: false },
@@ -121,6 +123,7 @@ const { valueKey, items, multi, searchable, customClass = {} } = defineProps({
   inline: { type: Boolean, required: false },
   customClass: { type: Object, required: false }
 });
+const id = useId();
 const value = defineModel({ type: null });
 const show = ref(false);
 const search = ref("");
@@ -129,9 +132,18 @@ const searchedOptions = computed(() => {
   if (!search.value) return items;
   return items.filter((option) => Label(option).title?.toLowerCase().includes?.(search.value?.toLowerCase()?.trim()));
 });
-const close = () => {
+const close = (e = {}) => {
+  const name = e?.target?.id;
+  const pname = e?.target?.parentElement?.id;
+  const ppname = e?.target?.parentElement?.parentElement?.id;
+  console.log(e);
+  if ([name, pname, ppname].includes(id)) return;
   show.value = false;
 };
+const toggle = () => {
+  console.log("aaa");
+  show.value = !show.value;
+};
 const dropdownStyles = ref({});
 const Value = (option) => valueKey ? _get(option, valueKey, option) : option;
 const Label = (option) => typeof option === "string" ? { title: option } : option;

package/dist/runtime/components/UnUploadFile.vue

@@ -1,39 +1,52 @@
 <template>
   <form
-      class="flex flex-col relative"
-      @dragenter="hovered=true"
-      @dragleave="hovered=false"
-      @submit.prevent="upload"
-      @dragover.prevent
-      @drop.stop.prevent="drop">
+    class="flex flex-col relative"
+    @dragenter="hovered=true"
+    @dragleave="hovered=false"
+    @submit.prevent="upload"
+    @dragover.prevent
+    @drop.stop.prevent="drop"
+  >
     <label
-        class="flex justify-center items-stretch bg-transparent rounded-2xl relative overflow-hidden cursor-pointer h-full"
-        :class="{'p-2' : !value}">
+      class="flex justify-center items-stretch bg-transparent rounded-2xl relative overflow-hidden cursor-pointer h-full"
+      :class="{ 'p-2': !value }"
+    >
       <slot name="icon">
-        <div v-if="!value || loading"
-             class="flex flex-col justify-center items-center gap-3 p-2 border-(2 dashed) rounded-2xl grow"
-             :class="label ? 'border-(primary-500)' : 'border-transparent' ">
-          <TheNuxtIcon
-              v-if="!loading"
-              class="flex justify-center items-center text-primary-500 rounded-lg"
-              :class="label ? 'text-3xl' : 'text-8xl'"
-              :name="icon"/>
-          <TheNuxtIcon v-else name="loading" icon-type="svg"/>
+        <div
+          v-if="!value || loading"
+          class="flex flex-col justify-center items-center gap-3 p-2 border-(2 dashed) rounded-2xl grow"
+          :class="label ? 'border-(primary-500)' : 'border-transparent' "
+        >
+          <UnNuxtIcon
+            v-if="!loading"
+            class="flex justify-center items-center text-primary-500 rounded-lg"
+            :class="label ? 'text-3xl' : 'text-8xl'"
+            :name="icon"
+          />
+          <UnNuxtIcon
+            v-else
+            name="loading"
+            icon-type="svg"
+          />
           <p class="text-(xs gray-400) font-extrabold text-center">
             {{ label }}
           </p>
         </div>
-        <TheNuxtIcon
-            v-else
-            :name="value"
-            class="object-contain bg-gray-100 rounded-lg !w-full !h-full"/>
+        <UnNuxtIcon
+          v-else
+          :name="value"
+          class="object-contain bg-gray-100 rounded-lg !w-full !h-full"
+        />
       </slot>
       <input
-          :disabled="!disabled" :accept="accept"
-          alt="uploadImage" hidden type="file"
-          @change="upload($event.target)"/>
+        :disabled="!disabled"
+        :accept="accept"
+        alt="uploadImage"
+        hidden
+        type="file"
+        @change="upload($event.target)"
+      >
     </label>
-
   </form>
 </template>
 

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

@@ -24,9 +24,9 @@ export declare const useMeta: (v?: {
     handler?: () => any;
 }>;
 export declare const useReload: () => import("vue").Ref<number, number>;
-export declare const useUserId: () => import("nuxt/app").CookieRef<string | null | undefined>;
-export declare const useToken: () => import("nuxt/app").CookieRef<string | null | undefined>;
-export declare const useProviderId: () => import("nuxt/app").CookieRef<string | null | undefined>;
+export declare const useUserId: () => import("#app").CookieRef<string | null | undefined>;
+export declare const useToken: () => import("#app").CookieRef<string | null | undefined>;
+export declare const useProviderId: () => import("#app").CookieRef<string | null | undefined>;
 export declare const useCurrentProductIndex: (products: ServiceSetting[], p: Partial<ServiceSetting>) => number;
 export declare const SettingToType: (setting: ServiceSetting) => ServiceSettingType;
 export declare const NotInProcessBooking: (e: Booking["status"]) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsource/ui",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "private": false,
   "description": "nuxt ui kit for unsource env",
   "repository": "https://github.com/alisa2142/unsource-ui",
@@ -27,8 +27,7 @@
     "prepack": "nuxt-module-build build",
     "dev": "npm run dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare:main": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "dev:prepare": "nuxt-module-build build && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",