pukaad-ui-lib 1.426.1 → 1.427.0

package/dist/module.json

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

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

@@ -64,11 +64,11 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
     modal: boolean;
     guides: boolean;
     highlight: boolean;

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

@@ -64,11 +64,11 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
     modal: boolean;
     guides: boolean;
     highlight: boolean;

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

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

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

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

package/dist/runtime/components/input/input-birth-date.d.vue.ts

@@ -30,8 +30,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
-    placeholder: string;
     locale: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;

package/dist/runtime/components/input/input-birth-date.vue.d.ts

@@ -30,8 +30,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     id: string;
     name: string;
     required: boolean;
-    placeholder: string;
     locale: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -44,8 +44,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    placeholder: string;
     locale: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -44,8 +44,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    placeholder: string;
     locale: string;
+    placeholder: string;
     disabledErrorMessage: boolean;
     layout: "month-and-year" | "month-only" | "year-only";
     dateFormat: string;

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

@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    readonly: boolean;
     placeholder: string;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
     disabledIcon: boolean;

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

@@ -36,8 +36,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     required: boolean;
-    readonly: boolean;
     placeholder: string;
+    readonly: boolean;
     disabledErrorMessage: boolean;
     iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
     disabledIcon: boolean;

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

@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    placeholder: string;
     labelKey: string;
+    placeholder: string;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
-    placeholder: string;
     labelKey: string;
+    placeholder: string;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

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

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

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

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    readonly: boolean;
     rows: number;
+    readonly: boolean;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    readonly: boolean;
     rows: number;
+    readonly: boolean;
     limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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/dist/runtime/components/ui/chart/ChartTooltipContent.d.vue.ts

@@ -18,8 +18,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    payload: Record<string, any>;
     config: ChartConfig;
+    payload: Record<string, any>;
     indicator: "line" | "dot" | "dashed";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/chart/ChartTooltipContent.vue.d.ts

@@ -18,8 +18,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    payload: Record<string, any>;
     config: ChartConfig;
+    payload: Record<string, any>;
     indicator: "line" | "dot" | "dashed";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts

@@ -14,7 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -208,7 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts

@@ -14,7 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -208,7 +208,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -212,7 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts

@@ -16,7 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;
@@ -212,7 +212,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    enterKeyHint?: "search" | "done" | "send" | "next" | "enter" | "go" | "previous" | undefined;
+    enterKeyHint?: "search" | "done" | "next" | "send" | "enter" | "go" | "previous" | undefined;
     hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
     id?: string | undefined | undefined;
     inert?: (boolean | "true" | "false") | undefined;

package/package.json

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