@unsource/ui 1.9.6 → 1.9.7

package/dist/runtime/components/UnSelect.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    ref="wrapper"
+    class="cursor-pointer relative"
+  >
+    <div
+      v-if="!inline"
+      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 : ''"
+    >
+      <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 && 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>
+      <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"
+      :disabled="inline"
+      to="body"
+    >
+      <div
+        v-on-click-outside="close"
+        name="wrapper"
+        :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="[
+  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)"
+        >
+          <UnSearch
+            v-if="Searchable"
+            v-model="search"
+            name="search"
+            :class="customClass.search"
+            class="h-10"
+            placeholder="جستجو..."
+          />
+          <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">
+              <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))"
+                @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)"
+                class="!min-w-60"
+                @click="handleSelect(option)"
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { vOnClickOutside } from "@vueuse/components";
+import { _get, computed, isEqual, nextTick, ref, watch } from "#imports";
+const { valueKey, items, multi, searchable, customClass = {} } = defineProps({
+  placeholder: { type: String, required: false },
+  icon: { type: String, required: false },
+  light: { type: Boolean, required: false },
+  items: { type: Array, required: true },
+  multi: { type: Boolean, required: false },
+  searchable: { type: Boolean, required: false },
+  valueKey: { type: String, required: false },
+  readonly: { 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(() => 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()));
+});
+const close = () => {
+  show.value = false;
+};
+const dropdownStyles = ref({});
+const Value = (option) => _get(option, valueKey || "value", option) || option;
+const Label = (option) => typeof option === "string" ? { title: option } : option;
+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 (!multi) {
+    value.value = Value(data);
+    close();
+    return;
+  }
+  const existingItem = value.value?.includes(Value(data));
+  let items2 = [];
+  if (existingItem) {
+    items2 = value.value.filter((item) => item !== Value(data));
+  } else {
+    items2 = [...value.value || [], Value(data)];
+  }
+  value.value = items2;
+};
+const wrapper = ref(null);
+const updateDropdownPosition = () => {
+  if (!wrapper.value) return;
+  const rect = wrapper.value.getBoundingClientRect();
+  dropdownStyles.value = {
+    position: "absolute",
+    top: `${rect.bottom + window.scrollY}px`,
+    right: `${window.innerWidth - rect.right}px`,
+    width: `${rect.width}px`,
+    zIndex: "1000"
+  };
+};
+watch(show, (val) => {
+  if (val) {
+    nextTick(() => updateDropdownPosition());
+  }
+});
+</script>

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

@@ -0,0 +1,28 @@
+import type { RadioCustomClass } from './UnRadioItem.vue.js';
+import type { CheckboxCustomClass } from './UnCheckboxItem.vue.js';
+type __VLS_Props = {
+    placeholder?: string;
+    icon?: string;
+    light?: boolean;
+    items: (Record<string, unknown> | string)[];
+    multi?: boolean;
+    searchable?: boolean;
+    valueKey?: 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 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/UnSwiperControl.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    swiper: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnSwiperControl.vue

@@ -0,0 +1,15 @@
+<template>
+
+</template>
+
+<script setup>
+const props = defineProps({
+  name: { type: String, required: false }
+});
+const swiper = useState(props.name || "stepperSwiper");
+swiper.value = useSwiper();
+defineExpose({ swiper });
+onUnmounted(() => {
+  swiper.value = void 0;
+});
+</script>

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

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    name?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    swiper: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,26 @@
+import 'swiper/css/pagination';
+type __VLS_Props = {
+    slideClass?: string;
+    wrapperClass?: string;
+    items: any[];
+    name?: string;
+    slides: number | 'auto';
+    navigation?: boolean;
+    pagination?: boolean;
+    initialSlide?: number;
+};
+declare var __VLS_11: {
+    item: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/UnSwiperSlider.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="flex flex-col relative"
+    dir="ltr"
+  >
+    <Swiper
+      class="!w-full !h-full grow children:(flex) px-3"
+      :class="wrapperClass"
+      :slides-per-view="slides"
+      :space-between="0"
+      :loop="false"
+      :pagination="pagination"
+      :keyboard="true"
+      :modules="modules"
+      :initial-slide="initialSlide || 0"
+      :simulate-touch="true"
+      :autoplay="{
+  delay: 5e3,
+  disableOnInteraction: false,
+  pauseOnMouseEnter: true
+}"
+    >
+      <!--      <TheSwiperControl :name="name"/> -->
+      <SwiperSlide
+        v-for="(item, index) in items"
+        :key="index"
+        class="!flex flex-col !self-stretch !items-center transition-all"
+        :class="slideClass"
+      >
+        <slot :item="item" />
+      </SwiperSlide>
+    </Swiper>
+  </div>
+</template>
+
+<script setup>
+import "swiper/css/pagination";
+import { Autoplay } from "swiper/modules";
+import { SwiperNavigation, SwiperPagination } from "#imports";
+defineProps({
+  slideClass: { type: String, required: false },
+  wrapperClass: { type: String, required: false },
+  items: { type: Array, required: true },
+  name: { type: String, required: false },
+  slides: { type: [Number, String], required: true },
+  navigation: { type: Boolean, required: false },
+  pagination: { type: Boolean, required: false },
+  initialSlide: { type: Number, required: false }
+});
+const modules = [SwiperPagination, SwiperNavigation, Autoplay];
+</script>
+
+<style>
+.swiper {
+  @apply static;
+}
+
+.swiper-pagination {
+  @apply absolute bottom-5 !left-auto right-1/2 transform translate-x-1/2 z-10 flex justify-center items-center bg-white/10 !w-fit px-2 py-1.5 rounded-full backdrop-blur-md;
+}
+.swiper-pagination .swiper-pagination-bullet {
+  @apply bg-gray-400 w-4 h-1.5 rounded-full !important;
+}
+.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+  @apply bg-white !important;
+}
+
+.swiper-button-next, .swiper-button-prev {
+  @apply w-12 w-12 h-12 bg-secondary-900 rounded-1/2;
+}
+.swiper-button-next::after, .swiper-button-prev::after {
+  @apply text-white transform text-lg;
+}
+
+.swiper-button-prev::after {
+  @apply translate-x-1/4;
+}
+
+.swiper-button-next::after {
+  @apply -translate-x-1/4;
+}
+</style>

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

@@ -0,0 +1,26 @@
+import 'swiper/css/pagination';
+type __VLS_Props = {
+    slideClass?: string;
+    wrapperClass?: string;
+    items: any[];
+    name?: string;
+    slides: number | 'auto';
+    navigation?: boolean;
+    pagination?: boolean;
+    initialSlide?: number;
+};
+declare var __VLS_11: {
+    item: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/UnTab.d.vue.ts

@@ -0,0 +1,25 @@
+export type TabItem = {
+    icon?: string;
+    value: string;
+    title?: string;
+    to?: Record<string, unknown>;
+};
+type __VLS_Props = {
+    items: TabItem[];
+    mini?: boolean;
+    routable?: boolean;
+    routeTarget?: 'query' | 'hash' | 'name' | 'params';
+    label?: string;
+    customClass?: Partial<Record<'label' | 'selectedLabel' | 'normalLabel' | 'title' | 'icon', string>>;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+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: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/UnTab.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex items-stretch text-(base gray-600) font-semibold bg-transparent h-13">
+    <label
+      v-for="item in items"
+      :key="item.value"
+      :class="[
+  customClass.label,
+  item?.value === value ? customClass.selectedLabel : customClass.normalLabel,
+  item?.value === value ? 'font-semibold text-primary cursor-default border-b-primary' : 'border-b-border',
+  mini ? 'px-3' : ' px-4'
+]"
+      class="flex gap-2 justify-center items-center flex-grow basis-1 border-b-(2 solid) cursor-pointer p-3 text-sm"
+      @click="addToQuery(item)"
+    >
+      <input
+        v-model="value"
+        type="radio"
+        :value="item.value"
+        hidden
+      >
+      <UnNuxtIcon
+        :class="customClass.icon"
+        :name="item.icon"
+      />
+      <p
+        :class="customClass.title"
+        class="whitespace-nowrap"
+      >
+        {{ item.title || item.value }}
+      </p>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { _merge, useRoute, useRouter } from "#imports";
+const { customClass = {}, label, routeTarget, routable } = defineProps({
+  items: { type: Array, required: true },
+  mini: { type: Boolean, required: false },
+  routable: { type: Boolean, required: false },
+  routeTarget: { type: String, required: false },
+  label: { type: String, required: false },
+  customClass: { type: Object, required: false }
+});
+const value = defineModel({ type: [String, Number] });
+const route = useRoute();
+const router = useRouter();
+const addToQuery = (i) => {
+  value.value = i.value;
+  if (routable) {
+    if (i.to) {
+      router.replace(i.to);
+    } else if (routeTarget) {
+      const q = _merge(route, {
+        [routeTarget]: label ? { [label]: i.value } : `${routeTarget === "hash" ? "#" : ""}${i.value}`
+      });
+      router.replace(q);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,25 @@
+export type TabItem = {
+    icon?: string;
+    value: string;
+    title?: string;
+    to?: Record<string, unknown>;
+};
+type __VLS_Props = {
+    items: TabItem[];
+    mini?: boolean;
+    routable?: boolean;
+    routeTarget?: 'query' | 'hash' | 'name' | 'params';
+    label?: string;
+    customClass?: Partial<Record<'label' | 'selectedLabel' | 'normalLabel' | 'title' | 'icon', string>>;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+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: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/runtime/uno.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("unocss").UserConfig<object>;
+export default _default;

package/dist/runtime/uno.config.js

@@ -0,0 +1,60 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup
+} from "unocss";
+import { presetScrollbar } from "unocss-preset-scrollbar";
+export default defineConfig({
+  theme: {
+    colors: {
+      border: "#cccdd5",
+      danger: "#e60c21",
+      warning: "#ffc600",
+      success: "#35d123",
+      secondary: {
+        500: "#fdf037"
+      },
+      primary: "#1270da",
+      text: {
+        head: "#4D4444"
+      },
+      gray: {
+        200: "#949494",
+        500: "#696969",
+        600: "#1e1e1e"
+      }
+    },
+    boxShadow: {
+      navbar: "0 1px 10px 0px #f79520",
+      header: "0 1px 10px 0px #cccdd5"
+    },
+    gridTemplateColumn: {
+      "fill-45": "repeat(auto-fill, minmax(4rem, 1fr))",
+      "fill-60": "repeat(auto-fill, minmax(6rem, 1fr))",
+      "fill-90": "repeat(auto-fill, minmax(22.5rem, 1fr))",
+      "fill-120": "repeat(auto-fill, minmax(30rem, 1fr))"
+    },
+    fontSize: {
+      "2xs": "10px"
+    }
+  },
+  shortcuts: {},
+  transformers: [
+    transformerVariantGroup(),
+    transformerDirectives({
+      // the defaults
+      applyVariable: ["--at-apply", "--uno-apply", "--uno"]
+      // or disable with:
+      // applyVariable: false
+    })
+  ],
+  presets: [
+    presetWind4(),
+    presetAttributify(),
+    presetScrollbar({
+      noCompatible: false
+    })
+  ]
+});

package/dist/types.d.mts

@@ -1,13 +1,7 @@
-import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+import type { NuxtModule } from '@nuxt/schema'
 
-declare module '#app' {
-  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
-}
+import type { default as Module } from './module.mjs'
 
-declare module '@nuxt/schema' {
-  interface NuxtHooks extends ModuleHooks {}
-  interface RuntimeConfig extends ModuleRuntimeConfig {}
-  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
-}
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export * from "./module.mjs"
+export { default } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsource/ui",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "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 && xcopy playground\\assets\\icons dist\\runtime\\assets\\icons /D /E",
     "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/dist/module.d.cts

@@ -1,2 +0,0 @@
-export * from "C:/programing/packages/ui-kit/src/module.js";
-export { default } from "C:/programing/packages/ui-kit/src/module.js";