pukaad-ui-lib 1.426.0 → 1.427.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.426.0",
+  "version": "1.427.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/card/card-profile/card-profile-header.d.vue.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onChat?: (() => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    preview: boolean;
     disabledPadding: boolean;
+    preview: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/card-profile/card-profile-header.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<CardProfileAboutProps,
     onChat?: (() => any) | undefined;
 }>, {
     type: "article" | "media" | "sale-info";
-    preview: boolean;
     disabledPadding: boolean;
+    preview: boolean;
     optionMenuButtonType: "solid" | "text";
     actionsHidden: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/card-reaction.d.vue.ts

@@ -25,7 +25,6 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
-    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;
@@ -33,6 +32,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     disabledDividerTop: boolean;
     disabledDividerBottom: boolean;
     iconSize: number | string;
+    state: string;
     loginPath: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/card/card-reaction.vue.d.ts

@@ -25,7 +25,6 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
     id: string;
-    state: string;
     itemCount: Count;
     itemActive: Reacted;
     padding: string | number;
@@ -33,6 +32,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     disabledDividerTop: boolean;
     disabledDividerBottom: boolean;
     iconSize: number | string;
+    state: string;
     loginPath: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/card/card-review.d.vue.ts

@@ -36,17 +36,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
+    disabledMenu: boolean;
+    isProfile: boolean;
+    disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;
         address?: string;
         cover?: string;
     };
-    disabledMenu: boolean;
-    isProfile: boolean;
-    disabledLike: boolean;
-    allowReply: boolean;
-    replyAvatar: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card-review.vue.d.ts

@@ -36,17 +36,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
+    disabledMenu: boolean;
+    isProfile: boolean;
+    disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;
         address?: string;
         cover?: string;
     };
-    disabledMenu: boolean;
-    isProfile: boolean;
-    disabledLike: boolean;
-    allowReply: boolean;
-    replyAvatar: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-profile-network.d.vue.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onExplore-places"?: (() => any) | undefined;
     "onRequire-auth"?: (() => any) | undefined;
 }>, {
+    isMyProfile: boolean;
     profileId: string;
     defaultTab: "followers" | "following" | "favorites";
-    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-profile-network.vue.d.ts

@@ -30,9 +30,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onExplore-places"?: (() => any) | undefined;
     "onRequire-auth"?: (() => any) | undefined;
 }>, {
+    isMyProfile: boolean;
     profileId: string;
     defaultTab: "followers" | "following" | "favorites";
-    isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -65,14 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
     src: string;
     center: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -65,14 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
     src: string;
     center: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    background: boolean;
-    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-autocomplete.d.vue.ts

@@ -69,9 +69,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    options: AutocompleteOption[] | string[] | number[];
     labelKey: string;
     placeholder: string;
-    options: AutocompleteOption[] | string[] | number[];
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/input/input-autocomplete.vue.d.ts

@@ -69,9 +69,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    options: AutocompleteOption[] | string[] | number[];
     labelKey: string;
     placeholder: string;
-    options: AutocompleteOption[] | string[] | number[];
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
+    placeholder: string;
     limit: number;
     showCounter: boolean;
     addLabel: string;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     label: string;
     name: string;
     modelValue: LocalizedNameItem[];
-    placeholder: string;
     options: InputSelectItem[];
+    placeholder: string;
     limit: number;
     showCounter: boolean;
     addLabel: string;

package/dist/runtime/components/input/input-tag-modal.d.vue.ts

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    options: InputTagModalOption[];
     labelKey: string;
     placeholder: string;
-    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

package/dist/runtime/components/input/input-tag-modal.vue.d.ts

@@ -40,9 +40,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
+    options: InputTagModalOption[];
     labelKey: string;
     placeholder: string;
-    options: InputTagModalOption[];
     disabledErrorMessage: boolean;
     valueKey: string;
     searchPlaceholder: string;

package/dist/runtime/components/input/input-tag.d.vue.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
+    placeholder: string;
     profileScope: "personal" | "business";
     limit: number;
     ignore: string[];

package/dist/runtime/components/input/input-tag.vue.d.ts

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
 }>, {
     name: string;
-    placeholder: string;
     state: "user" | "admin";
+    placeholder: string;
     profileScope: "personal" | "business";
     limit: number;
     ignore: string[];

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

@@ -0,0 +1,12 @@
+import type { LabelProps, LabelItem } from "#pukaad-ui/types/components/label";
+declare const __VLS_export: import("vue").DefineComponent<LabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "item-click": (item: LabelItem) => any;
+}, string, import("vue").PublicProps, Readonly<LabelProps> & Readonly<{
+    "onItem-click"?: ((item: LabelItem) => any) | undefined;
+}>, {
+    items: LabelItem[];
+    slide: boolean;
+    clickable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/label/label.vue

@@ -0,0 +1,135 @@
+<template>
+  <div v-if="hasItems" class="relative flex items-center">
+    <div
+      ref="scroller"
+      :class="[
+  'flex items-center gap-[8px]',
+  isSlide ? 'w-full scroll-smooth overflow-x-hidden' : 'flex-wrap'
+]"
+      @scroll="syncArrows"
+    >
+      <div
+        v-for="(item, index) in props.items"
+        :id="item.id != null ? String(item.id) : void 0"
+        :key="item.id ?? `${item.label}-${index}`"
+        :class="[
+  'inline-flex items-center rounded-[2px] bg-mercury px-[4px] py-[2px] font-label-sans-serif-large text-black shrink-0 max-w-full select-none h-[24px]',
+  props.clickable && 'cursor-pointer'
+]"
+        @click="handleItemClick(item)"
+      >
+        <span class="truncate">{{ item.label }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="isSlide && canScrollLeft"
+      class="absolute top-0 left-0 flex h-full w-[48px] items-center bg-gradient-to-r from-white via-white to-transparent pl-[4px] pointer-events-none"
+    >
+      <Button
+        variant="icon"
+        circle
+        class="pointer-events-auto size-[24px]"
+        @click="slideScroll(-1)"
+      >
+        <Icon name="lucide:chevron-left" :size="16" />
+      </Button>
+    </div>
+
+    <div
+      v-if="isSlide && canScrollRight"
+      class="absolute top-0 right-0 flex h-full w-[48px] items-center justify-end bg-gradient-to-l from-white via-white to-transparent pr-[4px] pointer-events-none"
+    >
+      <Button
+        variant="icon"
+        circle
+        class="pointer-events-auto size-[24px]"
+        @click="slideScroll(1)"
+      >
+        <Icon name="lucide:chevron-right" :size="16" />
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  nextTick
+} from "vue";
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  slide: { type: Boolean, required: false, default: false },
+  clickable: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["item-click"]);
+const hasItems = computed(
+  () => Array.isArray(props.items) && props.items.length > 0
+);
+const isSlide = computed(() => Boolean(props.slide && hasItems.value));
+const scroller = ref(null);
+const canScrollLeft = ref(false);
+const canScrollRight = ref(false);
+const SCROLL_EPSILON = 1;
+const syncArrows = () => {
+  const el = scroller.value;
+  if (!el || !isSlide.value) {
+    canScrollLeft.value = false;
+    canScrollRight.value = false;
+    return;
+  }
+  canScrollLeft.value = el.scrollLeft > SCROLL_EPSILON;
+  canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - SCROLL_EPSILON;
+};
+const slideScroll = (direction) => {
+  const el = scroller.value;
+  if (!el) return;
+  el.scrollBy({
+    left: direction * Math.max(150, el.clientWidth * 0.6),
+    behavior: "smooth"
+  });
+};
+let observer;
+const setupObserver = () => {
+  if (observer || !scroller.value || typeof ResizeObserver === "undefined")
+    return;
+  observer = new ResizeObserver(syncArrows);
+  observer.observe(scroller.value);
+};
+onMounted(() => {
+  if (isSlide.value) {
+    syncArrows();
+    setupObserver();
+  }
+});
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  observer = void 0;
+});
+watch(
+  () => [props.items, props.slide],
+  () => {
+    if (isSlide.value) {
+      nextTick(() => {
+        syncArrows();
+        setupObserver();
+      });
+    } else {
+      observer?.disconnect();
+      observer = void 0;
+      canScrollLeft.value = false;
+      canScrollRight.value = false;
+    }
+  },
+  { deep: true }
+);
+const handleItemClick = (item) => {
+  if (props.clickable) {
+    emit("item-click", item);
+  }
+};
+</script>

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

@@ -0,0 +1,12 @@
+import type { LabelProps, LabelItem } from "#pukaad-ui/types/components/label";
+declare const __VLS_export: import("vue").DefineComponent<LabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "item-click": (item: LabelItem) => any;
+}, string, import("vue").PublicProps, Readonly<LabelProps> & Readonly<{
+    "onItem-click"?: ((item: LabelItem) => any) | undefined;
+}>, {
+    items: LabelItem[];
+    slide: boolean;
+    clickable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.426.0",
+  "version": "1.427.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",