@unsource/ui 2.1.4 → 2.2.0

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

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

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

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

package/dist/runtime/components/UnLog.vue

@@ -15,6 +15,8 @@
 </template>
 
 <script setup>
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
 defineProps({
   data: {
     type: [Number, Object, Array, String, Boolean],

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/UnNormalInput.d.vue.ts

@@ -0,0 +1,51 @@
+interface Props {
+    className?: string;
+    valueClassName?: string;
+    focusClassName?: string;
+    labelClass?: string;
+    prependIcon?: string;
+    prependIconType?: string;
+    appendIcon?: string;
+    appendIconType?: string;
+    appendIconClass?: string;
+    appendText?: string;
+    inputType?: string;
+    placeholder?: string;
+    label?: string;
+    password?: boolean;
+    date?: boolean;
+    disabled?: boolean;
+    inputMode?: string;
+    iconColor?: string;
+    bgStyle?: string;
+    handler?: any;
+    focusable?: boolean;
+}
+type __VLS_Props = Props;
+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, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+    date: boolean;
+    password: boolean;
+    appendIcon: string;
+    label: string;
+    inputType: string;
+    placeholder: string;
+    disabled: boolean;
+    focusable: boolean;
+    className: string;
+    valueClassName: string;
+    focusClassName: string;
+    labelClass: string;
+    prependIcon: string;
+    appendIconType: string;
+    appendIconClass: string;
+    appendText: string;
+    inputMode: string;
+    iconColor: string;
+    bgStyle: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnNormalInput.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex flex-col gap-1.5 ">
+    <p
+      v-if="label"
+      :class="labelClass"
+    >
+      {{ label }}
+    </p>
+    <div
+      v-on-click-outside="() => focused = false"
+      class="flex relative px-3 py-1 gap-1 h-12 items-center bg-white"
+      :class="[value && !focused ? valueClassName : focused ? focusClassName : bgStyle, className]"
+    >
+      <UnNuxtIcon
+        v-if="prependIcon"
+        :name="prependIcon"
+        :icon-type="prependIconType"
+        :class="[iconColor ? iconColor : 'text-gray-400']"
+      />
+      <UnIRDatePicker
+        v-if="date"
+        v-model="value"
+        format="YYYY-MM-DD[T]HH:mm:ssZ"
+        class="text-text"
+        display-format="jDD jMMMM jYYYY"
+        :placeholder="placeholder"
+      />
+      <input
+        v-if="InputType !== 'textarea'"
+        v-model="value"
+        dir="rtl"
+        :type="InputType"
+        :inputmode="inputMode"
+        class="flex-grow bg-white placeholder-gray-200 text-text-head font-300 text-sm"
+        :disabled="disabled"
+        :placeholder="!focused ? placeholder : value || ''"
+        @focus="date ? InputType = 'date' : focused = true"
+      >
+      <textarea
+        v-else
+        v-model="value"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="border-none text-sm font-400 grow c-gray-900 placeholder:(c-gray-400) outline-none bg-white h-24"
+        @focus="date ? InputType = 'date' : ''"
+        @blur="date ? InputType = 'text' : ''"
+      />
+      <UnNuxtIcon
+        v-if="password"
+        :name="InputType === 'text' ? 'eye-slash' : 'eye'"
+        icon-type="svg"
+        class="!text-gray-200 cursor-pointer"
+        @click="InputType = InputType === 'text' ? 'password' : 'text'"
+      />
+      <UnNuxtIcon
+        v-if="appendIcon"
+        :name="appendIcon"
+        :icon-type="appendIconType"
+        :class="[iconColor ? iconColor : 'text-gray-400', appendIconClass]"
+        class="!svg:(w-3 h-3) bg-bg bg-opacity-30 justify-center rounded-full"
+        @click="$emit('append')"
+      />
+      <p
+        v-if="appendText"
+        dir="ltr"
+        class="font-400 text-xs text-text-head whitespace-nowrap"
+      >
+        {{ appendText }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { vOnClickOutside } from "@vueuse/components";
+import { ref } from "#imports";
+const props = defineProps({
+  className: { type: String, required: false, default: "rounded-2xl bg-bg" },
+  valueClassName: { type: String, required: false, default: "border-(1 solid gray-200) bg-bg" },
+  focusClassName: { type: String, required: false, default: "border-(2 solid primary-500) !bg-bg" },
+  labelClass: { type: String, required: false, default: "text-(xs text-head) font-400 leading-6" },
+  prependIcon: { type: String, required: false, default: "" },
+  prependIconType: { type: String, required: false },
+  appendIcon: { type: String, required: false, default: "" },
+  appendIconType: { type: String, required: false, default: "svg" },
+  appendIconClass: { type: String, required: false, default: "" },
+  appendText: { type: String, required: false, default: "" },
+  inputType: { type: String, required: false, default: "text" },
+  placeholder: { type: String, required: false, default: "" },
+  label: { type: String, required: false, default: "" },
+  password: { type: Boolean, required: false, default: false },
+  date: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  inputMode: { type: String, required: false, default: "" },
+  iconColor: { type: String, required: false, default: "" },
+  bgStyle: { type: String, required: false, default: "bg-bg border-(1 solid gray-200)" },
+  handler: { type: null, required: false },
+  focusable: { type: Boolean, required: false, default: false }
+});
+defineEmits(["append", "update:modelValue"]);
+const value = defineModel();
+const focused = ref(false);
+const InputType = ref(props.inputType);
+</script>
+
+<style>
+input {
+  outline: none;
+}
+</style>

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

@@ -0,0 +1,51 @@
+interface Props {
+    className?: string;
+    valueClassName?: string;
+    focusClassName?: string;
+    labelClass?: string;
+    prependIcon?: string;
+    prependIconType?: string;
+    appendIcon?: string;
+    appendIconType?: string;
+    appendIconClass?: string;
+    appendText?: string;
+    inputType?: string;
+    placeholder?: string;
+    label?: string;
+    password?: boolean;
+    date?: boolean;
+    disabled?: boolean;
+    inputMode?: string;
+    iconColor?: string;
+    bgStyle?: string;
+    handler?: any;
+    focusable?: boolean;
+}
+type __VLS_Props = Props;
+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, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+    date: boolean;
+    password: boolean;
+    appendIcon: string;
+    label: string;
+    inputType: string;
+    placeholder: string;
+    disabled: boolean;
+    focusable: boolean;
+    className: string;
+    valueClassName: string;
+    focusClassName: string;
+    labelClass: string;
+    prependIcon: string;
+    appendIconType: string;
+    appendIconClass: string;
+    appendText: string;
+    inputMode: string;
+    iconColor: string;
+    bgStyle: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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/UnTimer.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    time: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    timestamp: import("vue").ShallowRef<number>;
+    pause: import("@vueuse/shared").Fn;
+    resume: import("@vueuse/shared").Fn;
+    diff: import("vue").ComputedRef<number>;
+    isExpired: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, 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/UnTimer.vue

@@ -0,0 +1,31 @@
+<template>
+  <time
+    dir="ltr"
+    class="text-center font-black text-base text-primary-500 "
+  >
+    {{ diff > d ? Math.floor(diff / d) + ":" : "" }}
+    {{ diff > h ? Math.floor(diff % d / h) + ":" : "" }}
+    {{ diff > m ? Math.floor(diff % h / m) + ":" : "" }}
+    {{ Math.floor(diff % m) }}
+  </time>
+</template>
+
+<script setup>
+import { computed, moment, useTimestamp, watch } from "#imports";
+const props = defineProps({
+  time: { type: String, required: true }
+});
+const m = 60;
+const h = 60 * m;
+const d = 24 * h;
+defineEmits(["complete"]);
+const value = defineModel();
+const { timestamp, pause, resume } = useTimestamp({ controls: true, interval: 330 });
+const diff = computed(() => (moment(props.time).valueOf() - timestamp.value) / 1e3);
+const isExpired = computed(() => diff.value <= 0);
+value.value = isExpired.value;
+watch(isExpired, () => {
+  value.value = isExpired.value;
+});
+defineExpose({ timestamp, pause, resume, diff, isExpired });
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    time: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    timestamp: import("vue").ShallowRef<number>;
+    pause: import("@vueuse/shared").Fn;
+    resume: import("@vueuse/shared").Fn;
+    diff: import("vue").ComputedRef<number>;
+    isExpired: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, 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;