pukaad-ui-lib 1.30.0 → 1.32.0

package/dist/module.json

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

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

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     color: InputSliderColor;
     fullWidth: boolean;
     label: string;
-    step: number;
     min: number;
     max: number;
+    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

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

@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     color: InputSliderColor;
     fullWidth: boolean;
     label: string;
-    step: number;
     min: number;
     max: number;
+    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/modal/modal-personal-card-ID.vue

@@ -1,25 +1,23 @@
 <template>
   <Modal
     :title="props.item ? '\u0E41\u0E01\u0E49\u0E44\u0E02\u0E1A\u0E31\u0E15\u0E23\u0E1B\u0E23\u0E30\u0E0A\u0E32\u0E0A\u0E19' : '\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E1A\u0E31\u0E15\u0E23\u0E1B\u0E23\u0E30\u0E0A\u0E32\u0E0A\u0E19'"
-    width="499"
-    divider
-    :gap="imageFile ? 0 : 16"
+    class="lg:max-w-[512px] gap-[24px]"
     @close="onCancel"
     v-model="isOpenModal"
   >
-    <div v-if="!imageFile" class="flex flex-col gap-[16px]">
-      <div class="px-[16px]">
-        <ul
-          class="list-disc list-inside flex flex-col gap-[8px] font-body-medium-prominent text-gray"
-        >
-          <li>จัดวางรูปหน้าและตราครุฑตรงช่องกรอบ</li>
-          <li>ต้องชัดเจน อ่านง่าย ไม่เบลอ</li>
-          <li>มีแสงสว่างเพียงพอ และไม่มีแสงสะท้อน</li>
-          <li>ไม่มีนิ้วมือมาปิดบังบัตรประชาชน</li>
-          <li>บัตรประชาชนต้องไม่หมดอายุ</li>
-        </ul>
-      </div>
-      <div v-if="props.item" class="px-[16px]">
+    <template #description v-if="!imageFile">
+      <ul
+        class="list-disc list-inside flex flex-col gap-[8px] font-body-medium-prominent text-gray"
+      >
+        <li>จัดวางรูปหน้าและตราครุฑตรงช่องกรอบ</li>
+        <li>ต้องชัดเจน อ่านง่าย ไม่เบลอ</li>
+        <li>มีแสงสว่างเพียงพอ และไม่มีแสงสะท้อน</li>
+        <li>ไม่มีนิ้วมือมาปิดบังบัตรประชาชน</li>
+        <li>บัตรประชาชนต้องไม่หมดอายุ</li>
+      </ul>
+    </template>
+    <div v-if="!imageFile" class="flex flex-col">
+      <div v-if="props.item">
         <div class="relative w-[467px] h-[263px]">
           <Image
             :src="props.item"
@@ -47,7 +45,7 @@
           </div>
         </div>
       </div>
-      <div v-else class="px-[16px]">
+      <div v-else>
         <input
           ref="fileInputRef"
           type="file"
@@ -112,20 +110,13 @@
         </div>
       </div>
       <div class="p-[16px] flex gap-[40px] items-center">
-        <div class="flex gap-[16px] items-center">
+        <div class="flex gap-[8px] items-center">
           <div>
             <Icon name="lucide:zoom-in" :size="20" />
           </div>
-          <Button
-            variant="text"
-            disabled-padding
-            :disabled="!imageFile"
-            @click="onZoomOut"
-          >
-            <div>
-              <Icon name="f7:minus" :size="16" />
-            </div>
-          </Button>
+          <div class="cursor-pointer" @click="onZoomOut">
+            <Icon name="f7:minus" :size="20" />
+          </div>
           <InputSlider
             :thumb-size="16"
             :min="isZoomMin"
@@ -135,31 +126,17 @@
             full-width
             v-model="isZoom"
           />
-          <Button
-            variant="text"
-            disabled-padding
-            :disabled="!imageFile"
-            @click="onZoomIn"
-          >
-            <div>
-              <Icon name="f7:plus" :size="16" />
-            </div>
-          </Button>
+          <div class="cursor-pointer" @click="onZoomIn">
+            <Icon name="f7:plus" :size="20" />
+          </div>
         </div>
-        <div class="flex gap-[16px] items-center">
+        <div class="flex gap-[8px] items-center">
           <div>
             <Icon name="lucide:refresh-cw" :size="20" />
           </div>
-          <Button
-            variant="text"
-            disabled-padding
-            :disabled="!imageFile"
-            @click="onRotateLeft"
-          >
-            <div>
-              <Icon name="f7:minus" size="16" />
-            </div>
-          </Button>
+          <div class="cursor-pointer" @click="onRotateLeft">
+            <Icon name="f7:minus" :size="20" />
+          </div>
           <InputSlider
             :thumb-size="16"
             :min="isRotateMin"
@@ -169,24 +146,20 @@
             full-width
             v-model="isRotate"
           />
-          <Button
-            variant="text"
-            disabled-padding
-            :disabled="!imageFile"
-            @click="onRotateRight"
-            aria-label="หมุนขวา"
-          >
-            <Icon name="f7:plus" :size="16" />
-          </Button>
+          <div class="cursor-pointer" @click="onRotateRight">
+            <Icon name="f7:plus" :size="20" />
+          </div>
         </div>
       </div>
     </div>
     <template #footer>
-      <div class="flex gap-[16px] w-full">
-        <Button variant="outline" full-width @click="onCancel">ยกเลิก</Button>
+      <div class="flex gap-[16px]">
+        <Button variant="outline" class="w-[224px]" @click="onCancel"
+          >ยกเลิก</Button
+        >
         <Button
           color="primary"
-          full-width
+          class="w-[224px]"
           :disabled="!imageFile"
           @click="onCropImage"
         >

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

@@ -11,29 +11,31 @@ type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_20: {}, __VLS_27: {}, __VLS_34: {}, __VLS_36: {
+declare var __VLS_21: {}, __VLS_28: {}, __VLS_35: {}, __VLS_37: {
     meta: any;
-}, __VLS_43: {
+}, __VLS_44: {
     meta: any;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_20) => any;
+    header?: (props: typeof __VLS_21) => any;
 } & {
-    title?: (props: typeof __VLS_27) => any;
+    title?: (props: typeof __VLS_28) => any;
 } & {
-    description?: (props: typeof __VLS_34) => any;
+    description?: (props: typeof __VLS_35) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_37) => any;
 } & {
-    footer?: (props: typeof __VLS_43) => any;
+    footer?: (props: typeof __VLS_44) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
     submit: () => any;
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal.vue

@@ -5,6 +5,7 @@
       :disabled-close-btn="props.disabledCloseBtn"
       v-slot="{ meta }"
       @submit="onSubmit"
+      @close="onClose"
     >
       <ShadDialogHeader>
         <slot name="header">
@@ -29,7 +30,7 @@
 </template>
 
 <script setup>
-const emits = defineEmits(["submit"]);
+const emits = defineEmits(["submit", "close"]);
 const props = defineProps({
   class: { type: null, required: false },
   title: { type: String, required: false },
@@ -43,4 +44,7 @@ const isOpen = defineModel({ type: Boolean, ...{
 const onSubmit = (e) => {
   emits("submit");
 };
+const onClose = () => {
+  emits("close");
+};
 </script>

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

@@ -11,29 +11,31 @@ type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_20: {}, __VLS_27: {}, __VLS_34: {}, __VLS_36: {
+declare var __VLS_21: {}, __VLS_28: {}, __VLS_35: {}, __VLS_37: {
     meta: any;
-}, __VLS_43: {
+}, __VLS_44: {
     meta: any;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_20) => any;
+    header?: (props: typeof __VLS_21) => any;
 } & {
-    title?: (props: typeof __VLS_27) => any;
+    title?: (props: typeof __VLS_28) => any;
 } & {
-    description?: (props: typeof __VLS_34) => any;
+    description?: (props: typeof __VLS_35) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    default?: (props: typeof __VLS_37) => any;
 } & {
-    footer?: (props: typeof __VLS_43) => any;
+    footer?: (props: typeof __VLS_44) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
     submit: () => any;
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/picker/picker-image-profile.vue

@@ -14,73 +14,93 @@
   </label>
 
   <Modal
-    title="ปรับแต่งรูปภาพหน้าปก"
-    width="500"
-    title-position="left"
-    divider-header
-    divider-footer
-    disabled-padding-content
+    title="ปรับแต่งรูปภาพหน้าโปรไฟล์"
+    class="lg:max-w-[512px] gap-[24px]"
     v-model="isOpenModal"
   >
-    <div
-      class="h-[500px] flex justify-center items-center overflow-hidden circular-cropper-container"
-    >
-      <ImageCropper
-        v-if="imageFile"
-        ref="cropperRef"
-        dragMode="move"
-        :container-style="{
+    <div class="flex flex-col gap-[16px]">
+      <div
+        class="flex justify-center items-center overflow-hidden circular-cropper-container"
+      >
+        <ImageCropper
+          v-if="imageFile"
+          ref="cropperRef"
+          dragMode="move"
+          :container-style="{
   width: '320px',
   height: '320px',
   overflow: 'visible',
   position: 'relative'
 }"
-        :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
-        :src="imageUrl"
-        :aspect-ratio="1"
-        :initial-aspect-ratio="1"
-        :view-mode="3"
-        :guides="false"
-        :movable="true"
-        :crop-box-movable="false"
-        :crop-box-resizable="false"
-        :background="false"
-        :center="false"
-        :min-crop-box-width="320"
-        :min-crop-box-height="320"
-        :min-canvas-width="320"
-        :min-canvas-height="320"
-        :auto-crop-area="1"
-        :responsive="true"
-        :zoom-on-wheel="false"
-        :zoom-on-touch="false"
-        @zoom="onZoom"
-      />
-    </div>
-
-    <div class="p-[16px] flex gap-[16px] items-center text-mercury">
-      <Button variant="text" disabled-padding @click="onZoomOut">
-        <Icon name="f7:minus" size="16" />
-      </Button>
-      <InputSlider
-        thumb-size="16"
-        :min="isZoomMin"
-        :max="isZoomMax"
-        :step="isZoomStep"
-        full-width
-        v-model="isZoom"
-      />
-      <Button variant="text" disabled-padding @click="onZoomIn">
-        <Icon name="f7:plus" size="16" />
-      </Button>
+          :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
+          :src="imageUrl"
+          :aspect-ratio="1"
+          :initial-aspect-ratio="1"
+          :view-mode="3"
+          :guides="false"
+          :movable="true"
+          :crop-box-movable="false"
+          :crop-box-resizable="false"
+          :background="false"
+          :center="false"
+          :min-crop-box-width="320"
+          :min-crop-box-height="320"
+          :min-canvas-width="320"
+          :min-canvas-height="320"
+          :auto-crop-area="1"
+          :responsive="true"
+          :zoom-on-wheel="false"
+          :zoom-on-touch="false"
+          @zoom="onZoom"
+        />
+      </div>
+      <div class="flex gap-[40px] items-center p-[16px]">
+        <div class="flex gap-[8px] items-center w-full">
+          <Icon name="lucide:zoom-in" size="20" />
+          <div @click="onZoomOut">
+            <Icon name="f7:minus" size="20" />
+          </div>
+          <InputSlider
+            thumb-size="16"
+            :min="isZoomMin"
+            :max="isZoomMax"
+            :step="isZoomStep"
+            full-width
+            v-model="isZoom"
+          />
+          <div @click="onZoomIn">
+            <Icon name="f7:plus" size="20" />
+          </div>
+        </div>
+        <div class="flex gap-[8px] items-center w-full">
+          <Icon name="lucide:rotate-cw" size="20" />
+          <div @click="onRotateLeft" class="cursor-pointer">
+            <Icon name="f7:minus" size="20" />
+          </div>
+          <InputSlider
+            thumb-size="16"
+            :min="isRotateMin"
+            :max="isRotateMax"
+            :step="isRotateStep"
+            full-width
+            v-model="isRotate"
+          />
+          <div @click="onRotateRight" class="cursor-pointer">
+            <Icon name="f7:plus" size="20" />
+          </div>
+        </div>
+      </div>
     </div>
-
     <template #footer>
-      <div class="flex items-center gap-[16px]">
-        <Button variant="outline" full-width @click="isOpenModal = false">
+      <div class="flex items-center gap-[16px] w-[464px]">
+        <Button
+          variant="outline"
+          class="w-[224px]"
+          @click="isOpenModal = false"
+        >
           ยกเลิก
         </Button>
-        <Button color="primary" full-width @click="onCropImage">
+        <Button color="primary" class="w-[224px]" @click="onCropImage">
           บันทึก
         </Button>
       </div>
@@ -99,6 +119,10 @@ const isZoom = ref(0);
 const isZoomMin = 0;
 const isZoomMax = 5;
 const isZoomStep = 1;
+const isRotate = ref(0);
+const isRotateMin = -180;
+const isRotateMax = 180;
+const isRotateStep = 15;
 const fileCrop = defineModel({ type: null });
 const onTriggerFileInput = (event) => {
   event.preventDefault();
@@ -114,6 +138,16 @@ const onZoomIn = () => {
     isZoom.value += isZoomStep;
   }
 };
+const onRotateLeft = () => {
+  if (isRotate.value > isRotateMin) {
+    isRotate.value -= isRotateStep;
+  }
+};
+const onRotateRight = () => {
+  if (isRotate.value < isRotateMax) {
+    isRotate.value += isRotateStep;
+  }
+};
 const onChange = (event) => {
   const input = event.target;
   if (input.files && input.files.length > 0) {
@@ -165,8 +199,17 @@ watch(
     }
   }
 );
+watch(
+  () => isRotate.value,
+  (newRotate) => {
+    if (cropperRef.value) {
+      const cropper = cropperRef.value;
+      cropper.rotateTo(newRotate);
+    }
+  }
+);
 </script>
 
 <style>
-.circular-cropper-container .cropper-view-box{border:2px solid var(--color-primary)!important;border-radius:50%!important}.circular-cropper-container .cropper-face,.circular-cropper-container .cropper-modal{background-color:transparent!important}.circular-cropper-container .cropper-wrap-box{opacity:.25!important;overflow:visible!important}
+.circular-cropper-container .cropper-view-box{border:2px solid var(--color-transparent)!important;border-radius:50%!important}.circular-cropper-container .cropper-face,.circular-cropper-container .cropper-modal{background-color:transparent!important}.circular-cropper-container .cropper-wrap-box{opacity:.25!important;overflow:visible!important}.circular-cropper-container .cropper-view-box{outline-color:transparent!important}.circular-cropper-container .cropper-line,.circular-cropper-container .cropper-point{background-color:transparent!important}
 </style>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.d.vue.ts

@@ -3,7 +3,6 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuProps,
     variant: ButtonVariant;
     items: PickerOptionMenuItem[];
     circle: boolean;
-    size: ButtonSize;
     horizontal: boolean;
     disabled: boolean;
     disabledPadding: boolean;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.vue

@@ -1,54 +1,49 @@
 <template>
-  <Dropdown v-model="isOpenDrawer">
-    <Button
-      :variant="props.variant"
-      :disabled-padding="props.disabledPadding"
-      :circle="props.circle"
-      :color="props.variant === 'text' ? 'black' : 'default'"
-      :icon-size="props.iconSize"
-      :size="props.size"
-      :prepend-icon="
+  <ShadDropdownMenu>
+    <ShadDropdownMenuTrigger as-child>
+      <Button
+        :variant="props.variant"
+        :class="[
+  props.circle ? 'rounded-full bg-mercury' : 'rounded-md',
+  props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+  props.disabledPadding ? 'p-0' : ''
+]"
+      >
+        <Icon
+          :name="
   props.horizontal ? 'lucide:ellipsis' : 'lucide:ellipsis-vertical'
 "
-      :disabled="props.disabled"
-    />
+          :size="props.iconSize"
+        />
+      </Button>
+    </ShadDropdownMenuTrigger>
 
-    <template #content>
-      <div v-for="(item, i) in props.items" :key="i" class="flex flex-col">
-        <div
-          :class="[
-  'flex gap-[4px] p-[8px] items-center cursor-pointer hover:bg-smoke',
-  i == 0 && 'rounded-t-[8px]',
-  i == props.items.length - 1 && 'rounded-b-[8px]'
-]"
+    <ShadDropdownMenuContent align="start">
+      <template v-for="(item, i) in props.items" :key="i">
+        <ShadDropdownMenuItem
+          class="flex gap-[4px] items-center cursor-pointer hover:bg-smoke"
           @click="onAction(item)"
         >
-          <Icon :name="item.icon" size="16" />
-          <div class="font-body-large">
-            {{ item.label }}
-          </div>
-        </div>
-        <Divider v-if="i !== props.items.length - 1" height="0" />
-      </div>
-    </template>
-  </Dropdown>
+          <Icon :name="item.icon" :size="16" />
+          <span class="font-body-large">{{ item.label }}</span>
+        </ShadDropdownMenuItem>
+      </template>
+    </ShadDropdownMenuContent>
+  </ShadDropdownMenu>
 </template>
 
 <script setup>
-import { ref } from "vue";
 const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
   variant: { type: null, required: false, default: "text" },
   circle: { type: Boolean, required: false, default: false },
   horizontal: { type: Boolean, required: false, default: false },
-  size: { type: null, required: false, default: "medium" },
+  size: { type: null, required: false },
   iconSize: { type: String, required: false, default: "20" },
   disabledPadding: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false }
 });
-const isOpenDrawer = ref(false);
 const onAction = (item) => {
   item.action();
-  isOpenDrawer.value = false;
 };
 </script>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.vue.d.ts

@@ -3,7 +3,6 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuProps,
     variant: ButtonVariant;
     items: PickerOptionMenuItem[];
     circle: boolean;
-    size: ButtonSize;
     horizontal: boolean;
     disabled: boolean;
     disabledPadding: boolean;

package/dist/runtime/components/ui/dialog/DialogContent.d.vue.ts

@@ -12,6 +12,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
+    close: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
@@ -20,6 +21,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
+    onClose?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;

package/dist/runtime/components/ui/dialog/DialogContent.vue

@@ -18,6 +18,7 @@
         <DialogClose
           v-if="!props.disabledCloseBtn"
           class="absolute top-4 right-4 rounded-xs opacity-70 cursor-pointer transition-opacity hover:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6"
+          @click="onClose"
         >
           <Icon name="lucide:x" size="24" />
           <span class="sr-only">Close</span>
@@ -45,7 +46,7 @@ const props = defineProps({
   class: { type: null, required: false },
   disabledCloseBtn: { type: Boolean, required: false, default: false }
 });
-const emits = defineEmits(["submit", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"]);
+const emits = defineEmits(["submit", "close", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"]);
 const delegatedProps = reactiveOmit(props, "class");
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 const onOutSideClick = (e) => {
@@ -54,4 +55,7 @@ const onOutSideClick = (e) => {
 const onSubmit = (e) => {
   emits("submit", e);
 };
+const onClose = (e) => {
+  emits("close", e);
+};
 </script>

package/dist/runtime/components/ui/dialog/DialogContent.vue.d.ts

@@ -12,6 +12,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
+    close: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
@@ -20,6 +21,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
+    onClose?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;

package/package.json

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