@unsource/ui 1.0.1 → 1.1.0

package/dist/runtime/components/Un/UploadFile.vue

@@ -0,0 +1,83 @@
+<template>
+  <form
+      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}">
+      <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"/>
+          <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"/>
+      </slot>
+      <input
+          :disabled="!disabled" :accept="accept"
+          alt="uploadImage" hidden type="file"
+          @change="upload($event.target)"/>
+    </label>
+
+  </form>
+</template>
+
+<script setup>
+const props = defineProps({
+  edit: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: true
+  },
+  icon: {
+    type: String,
+    default: "gallery-add"
+  },
+  label: {
+    type: String,
+    default: ""
+  },
+  accept: {
+    type: String,
+    default: ""
+  }
+});
+const hovered = ref(false);
+const value = defineModel();
+const drop = (e) => {
+  hovered.value = false;
+  upload(e.dataTransfer);
+};
+const upload = (evt) => {
+  compile(evt.files[0]);
+};
+const loading = ref(false);
+const compile = async (file) => {
+  loading.value = true;
+  const fm = new FormData();
+  fm.append("file", file);
+  const { result } = await usePost("/upload", fm);
+  if (result) {
+    value.value = result;
+  }
+  loading.value = false;
+};
+</script>

package/dist/runtime/components/Un/UploadFile.vue.d.ts

@@ -0,0 +1,24 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    label: string;
+    icon: string;
+    disabled: boolean;
+    accept: string;
+    edit: boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    icon?: ((props: {}) => any) | undefined;
+};
+declare const props: {
+    readonly label: string;
+    readonly icon: string;
+    readonly disabled: boolean;
+    readonly accept: string;
+    readonly edit: boolean;
+};

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

@@ -1,14 +1,37 @@
 type __VLS_Props = {
     direction?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
-    customClass?: Record<'main' | 'body' | 'title' | 'tags' | 'tag' | 'description' | 'footer' | 'image' | 'avatar', string>;
+    customClass?: Record<'main' | 'body' | 'slider' | 'sliderWrapper' | 'sliderSlides' | 'title' | 'tags' | 'tag' | 'description' | 'footer' | 'image' | 'avatar', string>;
+    item: {
+        title?: string;
+        description?: string;
+        image?: string;
+        avatar?: string;
+        images?: string[];
+        tags?: {
+            value?: string;
+            icon?: string;
+            variant?: string;
+        }[];
+    };
+    to?: string;
+};
+declare var __VLS_28: {
+    item: any;
+}, __VLS_35: {
+    item: any;
+}, __VLS_37: {
+    item: any;
+}, __VLS_39: {
+    item: any;
 };
-declare var __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_22) => any;
+    body?: (props: typeof __VLS_28) => any;
+} & {
+    header?: (props: typeof __VLS_35) => any;
 } & {
-    footerStart?: (props: typeof __VLS_24) => any;
+    footerStart?: (props: typeof __VLS_37) => any;
 } & {
-    footerEnd?: (props: typeof __VLS_26) => any;
+    footerEnd?: (props: typeof __VLS_39) => 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>;

package/dist/runtime/components/UnCard.vue

@@ -2,38 +2,73 @@
   <NuxtLink
     class="flex items-stretch bg-white rounded-2xl overflow-hidden"
     :class="headerClass[direction]"
-    to="#"
+    no-prefetch
+    :to="to"
   >
     <UnNuxtIcon
+      v-if="item.image"
       class="grow-1 basis-1"
-      :class="customClass.image"
-      name="https://picsum.photos/400/200"
+      :class="[customClass.image, { 'min-h-50': direction.includes('column') }]"
+      :name="item.image"
       icon-type="img"
     />
+    <UnSwiperSlider
+      v-else-if="item.images"
+      :items="item.images || []"
+      :slides="1"
+      :navigation="true"
+      :pagination="true"
+      :initial-slide="0"
+      :slide-class="`!px-0 ${customClass.sliderSlides}`"
+      :wrapper-class="`!px-0 ${customClass.sliderWrapper}`"
+      :class="[customClass.slider, direction.includes('column') ? 'h-50' : 'w-50', 'aspect-square']"
+      :autoplay="{
+  delay: 1e3,
+  disableOnInteraction: false
+}"
+    >
+      <template #default="{ item }">
+        <div class="h-full self-stretch max-w-screen">
+          <UnNuxtIcon
+            :name="item"
+            icon-type="img"
+            class="object-cover !w-full !h-full"
+          />
+        </div>
+      </template>
+    </UnSwiperSlider>
     <div
       :class="customClass.main"
       class="flex flex-col items-stretch grow-2.5 basis-2.5"
     >
       <div
         :class="customClass.body"
-        class="flex gap-2 items-stretch p-3"
+        class="flex gap-2 items-stretch p-3 grow"
       >
         <UnNuxtIcon
+          v-if="item.avatar"
           :class="customClass.avatar"
-          :name="`https://s3.parand.app/files/parand/images/shop-logo.png`"
+          :name="item.avatar"
           icon-type="img"
           class="!object-cover shrink-0 w-14 h-14 aspect-square rounded-full border-(2 solid primary-500)"
         />
         <div class="flex justify-start flex-col gap-1 grow-1">
           <h3
+            v-if="item.title"
             :class="customClass.title"
             class="text-(lg gray-600) font-medium"
           >{{ item.title }}</h3>
           <small
+            v-if="item.description"
             :class="customClass.description"
             class="text-(base gray-500)"
           >{{ item.description }}</small>
+          <slot
+            name="body"
+            :item="item"
+          />
           <div
+            v-if="item.tags?.length"
             :class="customClass.tags"
             class="flex items-center justify-start gap-2"
           >
@@ -49,24 +84,35 @@
             />
           </div>
         </div>
-        <slot name="header" />
+        <slot
+          name="header"
+          :item="item"
+        />
       </div>
       <div
         v-if="$slots.footerStart || $slots.footerEnd"
         :class="customClass.footer"
         class="flex justify-between items-stretch border-t-(2 dashed border) p-3"
       >
-        <slot name="footerStart" />
-        <slot name="footerEnd" />
+        <slot
+          name="footerStart"
+          :item="item"
+        />
+        <slot
+          name="footerEnd"
+          :item="item"
+        />
       </div>
     </div>
   </NuxtLink>
 </template>
 
 <script setup>
-const { direction = "row-reverse", customClass = {} } = defineProps({
+const { direction = "column", customClass = {}, to = "#" } = defineProps({
   direction: { type: String, required: false },
-  customClass: { type: Object, required: false }
+  customClass: { type: Object, required: false },
+  item: { type: Object, required: true },
+  to: { type: String, required: false }
 });
 const headerClass = {
   "column": "flex-col",
@@ -74,16 +120,4 @@ const headerClass = {
   "row-reverse": "flex-row-reverse",
   "column-reverse": "flex-col-reverse"
 };
-const item = {
-  title: "\u062A\u0633\u062A",
-  description: "\u0644\u0648\u0631\u0645 \u0627\u06CC\u067E\u0633\u0648\u0645 \u0645\u062A\u0646 \u0633\u0627\u062E\u062A\u06AF\u06CC \u0628\u0627 \u062A\u0648\u0644\u06CC\u062F \u0633\u0627\u062F\u06AF\u06CC \u0646\u0627\u0645\u0641\u0647\u0648\u0645 \u0627\u0632 \u0635\u0646\u0639\u062A \u0686\u0627\u067E \u0648 \u0628\u0627 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0627\u0632 \u0637\u0631\u0627\u062D\u0627\u0646 \u06AF\u0631\u0627\u0641\u06CC\u06A9 \u0627\u0633\u062A ",
-  tags: [
-    {
-      value: "\u062A\u0633\u062A"
-    },
-    {
-      value: "\u062A\u0633\u062A"
-    }
-  ]
-};
 </script>

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

@@ -1,14 +1,37 @@
 type __VLS_Props = {
     direction?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
-    customClass?: Record<'main' | 'body' | 'title' | 'tags' | 'tag' | 'description' | 'footer' | 'image' | 'avatar', string>;
+    customClass?: Record<'main' | 'body' | 'slider' | 'sliderWrapper' | 'sliderSlides' | 'title' | 'tags' | 'tag' | 'description' | 'footer' | 'image' | 'avatar', string>;
+    item: {
+        title?: string;
+        description?: string;
+        image?: string;
+        avatar?: string;
+        images?: string[];
+        tags?: {
+            value?: string;
+            icon?: string;
+            variant?: string;
+        }[];
+    };
+    to?: string;
+};
+declare var __VLS_28: {
+    item: any;
+}, __VLS_35: {
+    item: any;
+}, __VLS_37: {
+    item: any;
+}, __VLS_39: {
+    item: any;
 };
-declare var __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_22) => any;
+    body?: (props: typeof __VLS_28) => any;
+} & {
+    header?: (props: typeof __VLS_35) => any;
 } & {
-    footerStart?: (props: typeof __VLS_24) => any;
+    footerStart?: (props: typeof __VLS_37) => any;
 } & {
-    footerEnd?: (props: typeof __VLS_26) => any;
+    footerEnd?: (props: typeof __VLS_39) => 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>;

package/dist/runtime/components/UnChips.vue

@@ -28,6 +28,7 @@
 </template>
 
 <script setup>
+import { computed } from "#imports";
 const props = defineProps({
   label: { type: String, required: false },
   icon: { type: String, required: false },

package/dist/runtime/components/UnNuxtIcon.vue

@@ -32,5 +32,5 @@ const props = defineProps({
   alt: { type: String, required: false }
 });
 const iconType = props.iconType || "icon";
-const loaded = ref(false);
+const loaded = ref(true);
 </script>

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsource/ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "description": "My new Nuxt module",
   "repository": "your-org/my-module",
@@ -35,7 +35,10 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
+    "@neshan-maps-platform/vue3-openlayers": "^2.0.1",
     "@nuxt/kit": "^4.1.3",
+    "nuxt-swiper": "^1.2.2",
+    "swiper": "^11.2.10",
     "unocss-preset-scrollbar": "^3.2.0"
   },
   "devDependencies": {
@@ -51,6 +54,8 @@
     "changelogen": "^0.6.2",
     "eslint": "^9.37.0",
     "nuxt": "^3.19.3",
+    "sass": "^1.93.2",
+    "sass-embedded": "^1.93.2",
     "typescript": "~5.9.3",
     "unocss": "^66.5.3",
     "vitest": "^3.2.4",