pukaad-ui-lib 1.109.0 → 1.111.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/input/input-content.d.vue.ts +23 -1
  3. package/dist/runtime/components/input/input-content.vue +51 -7
  4. package/dist/runtime/components/input/input-content.vue.d.ts +23 -1
  5. package/dist/runtime/components/input/input-file.d.vue.ts +1 -1
  6. package/dist/runtime/components/input/input-file.vue.d.ts +1 -1
  7. package/dist/runtime/components/input/input-textarea.d.vue.ts +1 -1
  8. package/dist/runtime/components/input/input-textarea.vue.d.ts +1 -1
  9. package/dist/runtime/components/picker/picker-image-cover-profile.d.vue.ts +9 -3
  10. package/dist/runtime/components/picker/picker-image-cover-profile.vue +207 -143
  11. package/dist/runtime/components/picker/picker-image-cover-profile.vue.d.ts +9 -3
  12. package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.d.vue.ts +4 -4
  13. package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.vue.d.ts +4 -4
  14. package/dist/runtime/components/ui/dialog/DialogContent.d.vue.ts +4 -4
  15. package/dist/runtime/components/ui/dialog/DialogContent.vue.d.ts +4 -4
  16. package/dist/runtime/components/ui/dialog/DialogScrollContent.d.vue.ts +4 -4
  17. package/dist/runtime/components/ui/dialog/DialogScrollContent.vue.d.ts +4 -4
  18. package/dist/runtime/components/ui/dropdown-menu/DropdownMenuContent.d.vue.ts +2 -2
  19. package/dist/runtime/components/ui/dropdown-menu/DropdownMenuContent.vue.d.ts +2 -2
  20. package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.d.vue.ts +4 -4
  21. package/dist/runtime/components/ui/dropdown-menu/DropdownMenuSubContent.vue.d.ts +4 -4
  22. package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts +2 -2
  23. package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts +2 -2
  24. package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts +2 -2
  25. package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts +2 -2
  26. package/dist/runtime/components/ui/popover/PopoverContent.d.vue.ts +4 -4
  27. package/dist/runtime/components/ui/popover/PopoverContent.vue.d.ts +4 -4
  28. package/dist/runtime/components/ui/select/SelectContent.d.vue.ts +2 -2
  29. package/dist/runtime/components/ui/select/SelectContent.vue.d.ts +2 -2
  30. package/dist/runtime/components/ui/sheet/SheetContent.d.vue.ts +4 -4
  31. package/dist/runtime/components/ui/sheet/SheetContent.vue.d.ts +4 -4
  32. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pukaad-ui-lib",
3
3
  "configKey": "pukaadUI",
4
- "version": "1.109.0",
4
+ "version": "1.111.0",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
@@ -1,4 +1,9 @@
1
1
  export interface InputContentProps {
2
+ id?: string;
3
+ name?: string;
4
+ label?: string;
5
+ description?: string;
6
+ required?: boolean;
2
7
  height?: string | number;
3
8
  placeholder?: string;
4
9
  disabledBorder?: boolean;
@@ -9,13 +14,30 @@ type __VLS_ModelProps = {
9
14
  modelValue?: any;
10
15
  };
11
16
  type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
12
- declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
17
+ declare var __VLS_21: {};
18
+ type __VLS_Slots = {} & {
19
+ label?: (props: typeof __VLS_21) => any;
20
+ };
21
+ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
22
+ setErrors: (errMsg: string[]) => void;
23
+ validate: () => Promise<any>;
24
+ fieldRef: import("vue").Ref<any, any>;
25
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
13
26
  "update:modelValue": (value: any) => any;
14
27
  }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
15
28
  "onUpdate:modelValue"?: ((value: any) => any) | undefined;
16
29
  }>, {
17
30
  height: string | number;
31
+ required: boolean;
32
+ id: string;
33
+ name: string;
18
34
  disableMedia: boolean;
19
35
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
36
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
20
37
  declare const _default: typeof __VLS_export;
21
38
  export default _default;
39
+ type __VLS_WithSlots<T, S> = T & {
40
+ new (): {
41
+ $slots: S;
42
+ };
43
+ };
@@ -1,14 +1,38 @@
1
1
  <template>
2
- <div>
3
- <div class="quill-wrapper" :class="{ 'drag-not-allowed': isDraggingMedia }">
2
+ <ShadFormField
3
+ ref="fieldRef"
4
+ :name="props.name"
5
+ :rules="defaultRules"
6
+ v-slot="{ componentField, errorMessage }"
7
+ v-model="modelValue"
8
+ >
9
+ <ShadFormItem>
10
+ <ShadFormLabel v-if="props.label || $slots.label" class="w-full">
11
+ <slot name="label">
12
+ <div class="flex-1">
13
+ {{ props.label }}
14
+ <span v-if="props.required" class="text-destructive">*</span>
15
+ </div>
16
+ </slot>
17
+ </ShadFormLabel>
18
+
4
19
  <div
5
- ref="contentRef"
6
- :style="{
20
+ class="quill-wrapper"
21
+ :class="{ 'drag-not-allowed': isDraggingMedia }"
22
+ >
23
+ <div
24
+ ref="contentRef"
25
+ :style="{
7
26
  '--height': `${props.height}px`
8
27
  }"
9
- />
10
- </div>
11
- </div>
28
+ />
29
+ </div>
30
+
31
+ <ShadFormDescription v-if="props.description">
32
+ {{ props.description }}
33
+ </ShadFormDescription>
34
+ </ShadFormItem>
35
+ </ShadFormField>
12
36
  </template>
13
37
 
14
38
  <script setup>
@@ -18,6 +42,11 @@ const { $quill } = useNuxtApp();
18
42
  const contentRef = ref(null);
19
43
  let quillEditor = null;
20
44
  const props = defineProps({
45
+ id: { type: String, required: false, default: "input-content" },
46
+ name: { type: String, required: false, default: "input-content" },
47
+ label: { type: String, required: false },
48
+ description: { type: String, required: false },
49
+ required: { type: Boolean, required: false, default: false },
21
50
  height: { type: [String, Number], required: false, default: 288 },
22
51
  placeholder: { type: String, required: false },
23
52
  disabledBorder: { type: Boolean, required: false },
@@ -25,6 +54,21 @@ const props = defineProps({
25
54
  });
26
55
  const modelValue = defineModel();
27
56
  const isDraggingMedia = ref(false);
57
+ const fieldRef = ref();
58
+ const defaultRules = () => {
59
+ return true;
60
+ };
61
+ const setErrors = (errMsg) => {
62
+ fieldRef.value?.setErrors(errMsg);
63
+ };
64
+ const validate = async () => {
65
+ return await fieldRef.value?.validate?.();
66
+ };
67
+ defineExpose({
68
+ setErrors,
69
+ validate,
70
+ fieldRef
71
+ });
28
72
  onMounted(() => {
29
73
  if (contentRef.value) {
30
74
  const toolbarOptions = [
@@ -1,4 +1,9 @@
1
1
  export interface InputContentProps {
2
+ id?: string;
3
+ name?: string;
4
+ label?: string;
5
+ description?: string;
6
+ required?: boolean;
2
7
  height?: string | number;
3
8
  placeholder?: string;
4
9
  disabledBorder?: boolean;
@@ -9,13 +14,30 @@ type __VLS_ModelProps = {
9
14
  modelValue?: any;
10
15
  };
11
16
  type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
12
- declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
17
+ declare var __VLS_21: {};
18
+ type __VLS_Slots = {} & {
19
+ label?: (props: typeof __VLS_21) => any;
20
+ };
21
+ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
22
+ setErrors: (errMsg: string[]) => void;
23
+ validate: () => Promise<any>;
24
+ fieldRef: import("vue").Ref<any, any>;
25
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
13
26
  "update:modelValue": (value: any) => any;
14
27
  }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
15
28
  "onUpdate:modelValue"?: ((value: any) => any) | undefined;
16
29
  }>, {
17
30
  height: string | number;
31
+ required: boolean;
32
+ id: string;
33
+ name: string;
18
34
  disableMedia: boolean;
19
35
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
36
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
20
37
  declare const _default: typeof __VLS_export;
21
38
  export default _default;
39
+ type __VLS_WithSlots<T, S> = T & {
40
+ new (): {
41
+ $slots: S;
42
+ };
43
+ };
@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
27
27
  fullHeight: boolean;
28
28
  name: string;
29
29
  limit: number;
30
- disabledErrorMessage: boolean;
31
30
  accept: string;
31
+ disabledErrorMessage: boolean;
32
32
  labelIcon: string;
33
33
  disabledDrop: boolean;
34
34
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
27
27
  fullHeight: boolean;
28
28
  name: string;
29
29
  limit: number;
30
- disabledErrorMessage: boolean;
31
30
  accept: string;
31
+ disabledErrorMessage: boolean;
32
32
  labelIcon: string;
33
33
  disabledDrop: boolean;
34
34
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -45,11 +45,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
45
45
  name: string;
46
46
  disabled: boolean;
47
47
  limit: number;
48
+ resize: "none" | "both" | "horizontal" | "vertical";
48
49
  disabledErrorMessage: boolean;
49
50
  disabledBorder: boolean;
50
51
  showCounter: boolean;
51
52
  readonly: boolean;
52
- resize: "none" | "both" | "horizontal" | "vertical";
53
53
  rows: number;
54
54
  heightScroll: boolean;
55
55
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -45,11 +45,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
45
45
  name: string;
46
46
  disabled: boolean;
47
47
  limit: number;
48
+ resize: "none" | "both" | "horizontal" | "vertical";
48
49
  disabledErrorMessage: boolean;
49
50
  disabledBorder: boolean;
50
51
  showCounter: boolean;
51
52
  readonly: boolean;
52
- resize: "none" | "both" | "horizontal" | "vertical";
53
53
  rows: number;
54
54
  heightScroll: boolean;
55
55
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -1,10 +1,16 @@
1
+ export interface IImageCoverProfile {
2
+ file?: File | null;
3
+ src?: string | null;
4
+ x?: number;
5
+ y?: number;
6
+ }
1
7
  type __VLS_ModelProps = {
2
- modelValue?: File | null;
8
+ modelValue?: IImageCoverProfile | null;
3
9
  };
4
10
  declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
5
- "update:modelValue": (value: File | null | undefined) => any;
11
+ "update:modelValue": (value: IImageCoverProfile | null) => any;
6
12
  }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
7
- "onUpdate:modelValue"?: ((value: File | null | undefined) => any) | undefined;
13
+ "onUpdate:modelValue"?: ((value: IImageCoverProfile | null) => any) | undefined;
8
14
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
15
  declare const _default: typeof __VLS_export;
10
16
  export default _default;
@@ -1,176 +1,240 @@
1
1
  <template>
2
- <ShadDropdownMenu>
3
- <ShadDropdownMenuTrigger as-child>
4
- <Button variant="outline" class="bg-white"
5
- ><Icon name="lucide:camera" /> แก้ไขรูปภาพหน้าปก
6
- </Button>
7
- </ShadDropdownMenuTrigger>
2
+ <div class="w-full">
3
+ <ShadDropdownMenu>
4
+ <ShadDropdownMenuTrigger as-child>
5
+ <Button variant="outline" class="bg-white">
6
+ <Icon name="lucide:camera" /> แก้ไขรูปภาพหน้าปก
7
+ </Button>
8
+ </ShadDropdownMenuTrigger>
8
9
 
9
- <ShadDropdownMenuContent align="start">
10
- <ShadDropdownMenuItem
11
- v-if="originalFile || modelValue"
12
- class="flex gap-[4px] items-center cursor-pointer"
13
- @click="onEditImage"
14
- >
15
- <Icon name="lucide:crop" :size="16" />
16
- <span class="font-body-medium">แก้ไขรูปภาพหน้าปก</span>
17
- </ShadDropdownMenuItem>
18
- <ShadDropdownMenuItem
19
- class="flex gap-[4px] items-center cursor-pointer"
20
- @click="onUploadImage"
21
- >
22
- <Icon name="lucide:upload" :size="16" />
23
- <span class="font-body-medium">อัปโหลดรูปภาพ</span>
24
- </ShadDropdownMenuItem>
25
- </ShadDropdownMenuContent>
26
- </ShadDropdownMenu>
27
- <input
28
- ref="fileInputRef"
29
- type="file"
30
- accept="image/*"
31
- @change="onFileChange"
32
- class="hidden"
33
- />
34
- <Modal
35
- title="ปรับแต่งรูปภาพหน้าปก"
36
- class="min-w-[512px]"
37
- v-model="isOpenModal"
38
- >
39
- <div
40
- class="flex justify-center items-center rounded-[8px] overflow-hidden relative"
10
+ <ShadDropdownMenuContent align="start">
11
+ <ShadDropdownMenuItem
12
+ v-if="hasImage"
13
+ class="flex gap-[4px] items-center cursor-pointer"
14
+ @click="onEditImage"
15
+ >
16
+ <Icon name="lucide:crop" :size="16" />
17
+ <span class="font-body-medium">จัดตำแหน่ง</span>
18
+ </ShadDropdownMenuItem>
19
+ <ShadDropdownMenuItem
20
+ class="flex gap-[4px] items-center cursor-pointer"
21
+ @click="onUploadImage"
22
+ >
23
+ <Icon name="lucide:upload" :size="16" />
24
+ <span class="font-body-medium">อัปโหลดรูปภาพ</span>
25
+ </ShadDropdownMenuItem>
26
+ </ShadDropdownMenuContent>
27
+ </ShadDropdownMenu>
28
+ <input
29
+ ref="fileInputRef"
30
+ type="file"
31
+ accept="image/*"
32
+ class="hidden"
33
+ @change="onFileChange"
34
+ />
35
+ <Modal
36
+ title="ปรับแต่งรูปภาพหน้าปก"
37
+ class="w-[512px]"
38
+ v-model="isOpenModal"
39
+ @close="onCancel"
41
40
  >
42
- <ImageCropper
43
- v-if="imageUrl"
44
- ref="cropperRef"
45
- dragMode="move"
46
- :container-style="{
47
- width: '600px',
48
- height: '240px',
49
- overflow: 'hidden',
50
- position: 'relative'
51
- }"
52
- :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
53
- :src="imageUrl"
54
- :aspect-ratio="5 / 2"
55
- :initial-aspect-ratio="5 / 2"
56
- :view-mode="3"
57
- :guides="false"
58
- :movable="true"
59
- :crop-box-movable="false"
60
- :crop-box-resizable="false"
61
- :background="false"
62
- :center="false"
63
- :auto-crop-area="1"
64
- :responsive="true"
65
- :zoom-on-wheel="false"
66
- :zoom-on-touch="false"
67
- :zoomable="false"
68
- :rotatable="false"
69
- :scalable="false"
70
- />
71
-
72
41
  <div
73
- class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none"
42
+ ref="containerRef"
43
+ class="relative w-full h-[261px] overflow-hidden select-none cursor-move group"
44
+ @mousedown="startDrag"
45
+ @touchstart="startDrag"
74
46
  >
47
+ <img
48
+ v-if="imageUrl"
49
+ :src="imageUrl"
50
+ class="absolute inset-0 w-full h-full object-cover pointer-events-none"
51
+ :style="{ objectPosition: `${posX}% ${posY}%` }"
52
+ @load="onImageLoad"
53
+ alt="Cover Preview"
54
+ draggable="false"
55
+ />
56
+
75
57
  <div
76
- class="flex h-[40px] items-center gap-[8px] px-[16px] py-[8px] rounded-[8px] bg-black/60"
58
+ class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity"
59
+ :class="{ 'opacity-0': isDragging, 'opacity-100': !isDragging }"
77
60
  >
78
- <Icon name="lucide:move" color="white" />
79
- <div class="text-white font-body-large">ลากเพื่อเปลี่ยนตำแหน่ง</div>
61
+ <div
62
+ class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-[8px] bg-black/50"
63
+ >
64
+ <Icon name="lucide:move" class="text-white" :size="16" />
65
+ <span class="text-white font-body-medium">ลากเพื่อจัดตำแหน่ง</span>
66
+ </div>
80
67
  </div>
81
68
  </div>
82
- </div>
83
69
 
84
- <template #footer>
85
- <div class="flex items-center gap-[16px] w-full">
86
- <Button variant="outline" class="w-full" @click="onCancel">
87
- ยกเลิก
88
- </Button>
89
- <Button color="primary" class="w-full" @click="onCropImage">
90
- บันทึก
91
- </Button>
92
- </div>
93
- </template>
94
- </Modal>
70
+ <template #footer>
71
+ <div class="flex items-center gap-[16px] w-full">
72
+ <Button variant="outline" class="w-full" @click="onCancel">
73
+ ยกเลิก
74
+ </Button>
75
+ <Button color="primary" class="w-full" @click="onSave">
76
+ บันทึก
77
+ </Button>
78
+ </div>
79
+ </template>
80
+ </Modal>
81
+ </div>
95
82
  </template>
96
83
 
97
84
  <script setup>
98
- import { ref } from "vue";
99
- const cropperRef = ref(null);
85
+ import { ref, computed, onUnmounted } from "vue";
86
+ const modelValue = defineModel({ type: [Object, null], ...{ default: null } });
100
87
  const fileInputRef = ref(null);
101
- const imageUrl = ref(null);
88
+ const containerRef = ref(null);
102
89
  const isOpenModal = ref(false);
103
- const selectedFile = ref(null);
104
- const originalFile = ref(null);
105
- const modelValue = defineModel({ type: null });
90
+ const imageUrl = ref(null);
91
+ const workingFile = ref(null);
92
+ const posX = ref(50);
93
+ const posY = ref(50);
94
+ const isDragging = ref(false);
95
+ let startClientX = 0;
96
+ let startClientY = 0;
97
+ let startPosX = 50;
98
+ let startPosY = 50;
99
+ let imageNaturalWidth = 0;
100
+ let imageNaturalHeight = 0;
101
+ const hasImage = computed(
102
+ () => !!(modelValue.value?.file || modelValue.value?.src)
103
+ );
104
+ const onUploadImage = () => {
105
+ fileInputRef.value?.click();
106
+ };
106
107
  const onEditImage = () => {
107
- const fileToEdit = originalFile.value || modelValue.value;
108
- if (fileToEdit) {
109
- selectedFile.value = fileToEdit;
110
- if (imageUrl.value) {
111
- URL.revokeObjectURL(imageUrl.value);
112
- }
113
- imageUrl.value = URL.createObjectURL(fileToEdit);
108
+ if (!modelValue.value) return;
109
+ const { file, src, x, y } = modelValue.value;
110
+ posX.value = x ?? 50;
111
+ posY.value = y ?? 50;
112
+ if (file) {
113
+ prepareImageForModal(file);
114
+ workingFile.value = file;
115
+ } else if (src) {
116
+ imageUrl.value = src;
117
+ workingFile.value = null;
114
118
  isOpenModal.value = true;
115
119
  }
116
120
  };
117
- const onUploadImage = () => {
118
- fileInputRef.value?.click();
119
- };
120
121
  const onFileChange = (event) => {
121
122
  const input = event.target;
122
- if (input.files && input.files.length > 0) {
123
+ if (input.files?.[0]) {
123
124
  const file = input.files[0];
124
- if (file) {
125
- selectedFile.value = file;
126
- originalFile.value = file;
127
- if (imageUrl.value) {
128
- URL.revokeObjectURL(imageUrl.value);
129
- }
130
- imageUrl.value = URL.createObjectURL(file);
131
- isOpenModal.value = true;
132
- input.value = "";
125
+ posX.value = 50;
126
+ posY.value = 50;
127
+ prepareImageForModal(file);
128
+ workingFile.value = file;
129
+ }
130
+ input.value = "";
131
+ };
132
+ const prepareImageForModal = (file) => {
133
+ if (imageUrl.value && imageUrl.value.startsWith("blob:")) {
134
+ URL.revokeObjectURL(imageUrl.value);
135
+ }
136
+ imageUrl.value = URL.createObjectURL(file);
137
+ isOpenModal.value = true;
138
+ };
139
+ const onImageLoad = (e) => {
140
+ const img = e.target;
141
+ imageNaturalWidth = img.naturalWidth;
142
+ imageNaturalHeight = img.naturalHeight;
143
+ };
144
+ const startDrag = (e) => {
145
+ e.preventDefault();
146
+ isDragging.value = true;
147
+ if (e instanceof MouseEvent) {
148
+ startClientX = e.clientX;
149
+ startClientY = e.clientY;
150
+ } else {
151
+ const touch = e.touches?.[0];
152
+ if (touch) {
153
+ startClientX = touch.clientX;
154
+ startClientY = touch.clientY;
133
155
  }
134
156
  }
157
+ startPosX = posX.value;
158
+ startPosY = posY.value;
159
+ window.addEventListener("mousemove", onDrag);
160
+ window.addEventListener("touchmove", onDrag, { passive: false });
161
+ window.addEventListener("mouseup", stopDrag);
162
+ window.addEventListener("touchend", stopDrag);
163
+ };
164
+ const onDrag = (e) => {
165
+ if (!isDragging.value || !containerRef.value) return;
166
+ e.preventDefault();
167
+ let clientX, clientY;
168
+ if (e instanceof MouseEvent) {
169
+ clientX = e.clientX;
170
+ clientY = e.clientY;
171
+ } else {
172
+ const touch = e.touches?.[0];
173
+ if (touch) {
174
+ clientX = touch.clientX;
175
+ clientY = touch.clientY;
176
+ } else {
177
+ return;
178
+ }
179
+ }
180
+ const deltaXPixels = clientX - startClientX;
181
+ const deltaYPixels = clientY - startClientY;
182
+ const containerW = containerRef.value.offsetWidth;
183
+ const containerH = containerRef.value.offsetHeight;
184
+ const imgRatio = imageNaturalWidth / imageNaturalHeight;
185
+ const containerRatio = containerW / containerH;
186
+ let slidableWidth = 0;
187
+ let slidableHeight = 0;
188
+ if (imgRatio > containerRatio) {
189
+ const renderedWidth = containerH * imgRatio;
190
+ slidableWidth = renderedWidth - containerW;
191
+ if (slidableWidth > 0) {
192
+ const deltaPercent = deltaXPixels / slidableWidth * 100;
193
+ posX.value = clamp(startPosX - deltaPercent, 0, 100);
194
+ }
195
+ } else {
196
+ const renderedHeight = containerW / imgRatio;
197
+ slidableHeight = renderedHeight - containerH;
198
+ if (slidableHeight > 0) {
199
+ const deltaPercent = deltaYPixels / slidableHeight * 100;
200
+ posY.value = clamp(startPosY - deltaPercent, 0, 100);
201
+ }
202
+ }
203
+ };
204
+ const stopDrag = () => {
205
+ isDragging.value = false;
206
+ window.removeEventListener("mousemove", onDrag);
207
+ window.removeEventListener("touchmove", onDrag);
208
+ window.removeEventListener("mouseup", stopDrag);
209
+ window.removeEventListener("touchend", stopDrag);
210
+ };
211
+ const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
212
+ const onSave = () => {
213
+ const newModel = {
214
+ ...modelValue.value || {},
215
+ x: Math.round(posX.value * 100) / 100,
216
+ y: Math.round(posY.value * 100) / 100
217
+ };
218
+ if (workingFile.value) {
219
+ newModel.file = workingFile.value;
220
+ newModel.src = null;
221
+ }
222
+ modelValue.value = newModel;
223
+ onCancel();
135
224
  };
136
225
  const onCancel = () => {
137
226
  isOpenModal.value = false;
138
- if (imageUrl.value) {
227
+ if (imageUrl.value && imageUrl.value.startsWith("blob:")) {
139
228
  URL.revokeObjectURL(imageUrl.value);
140
- imageUrl.value = null;
141
229
  }
142
- selectedFile.value = null;
230
+ imageUrl.value = null;
231
+ workingFile.value = null;
232
+ stopDrag();
143
233
  };
144
- const onCropImage = async () => {
145
- if (!cropperRef.value) return;
146
- const cropper = cropperRef.value;
147
- const croppedFile = await getFileFromCanvas(
148
- cropper,
149
- "image_cover_crop.jpg",
150
- "image/jpeg"
151
- );
152
- originalFile.value = croppedFile;
153
- modelValue.value = croppedFile;
154
- isOpenModal.value = false;
155
- if (imageUrl.value) {
234
+ onUnmounted(() => {
235
+ if (imageUrl.value && imageUrl.value.startsWith("blob:")) {
156
236
  URL.revokeObjectURL(imageUrl.value);
157
- imageUrl.value = null;
158
237
  }
159
- selectedFile.value = null;
160
- };
161
- function getFileFromCanvas(cropper, fileName, mimeType = "image/jpeg") {
162
- return new Promise((resolve, reject) => {
163
- const canvas = cropper.getCroppedCanvas();
164
- if (!canvas || typeof canvas.toBlob !== "function") {
165
- return reject(new Error("Canvas \u0E2B\u0E23\u0E37\u0E2D toBlob \u0E44\u0E21\u0E48\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19"));
166
- }
167
- canvas.toBlob((blob) => {
168
- if (!blob) {
169
- return reject(new Error("\u0E2A\u0E23\u0E49\u0E32\u0E07 Blob \u0E44\u0E21\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08"));
170
- }
171
- const file = new File([blob], fileName, { type: mimeType });
172
- resolve(file);
173
- }, mimeType);
174
- });
175
- }
238
+ stopDrag();
239
+ });
176
240
  </script>
@@ -1,10 +1,16 @@
1
+ export interface IImageCoverProfile {
2
+ file?: File | null;
3
+ src?: string | null;
4
+ x?: number;
5
+ y?: number;
6
+ }
1
7
  type __VLS_ModelProps = {
2
- modelValue?: File | null;
8
+ modelValue?: IImageCoverProfile | null;
3
9
  };
4
10
  declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
5
- "update:modelValue": (value: File | null | undefined) => any;
11
+ "update:modelValue": (value: IImageCoverProfile | null) => any;
6
12
  }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
7
- "onUpdate:modelValue"?: ((value: File | null | undefined) => any) | undefined;
13
+ "onUpdate:modelValue"?: ((value: IImageCoverProfile | null) => any) | undefined;
8
14
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
15
  declare const _default: typeof __VLS_export;
10
16
  export default _default;
@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_19) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- openAutoFocus: (event: Event) => any;
12
- closeAutoFocus: (event: Event) => any;
13
11
  escapeKeyDown: (event: KeyboardEvent) => any;
14
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
15
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
16
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ openAutoFocus: (event: Event) => any;
16
+ closeAutoFocus: (event: Event) => any;
17
17
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
18
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
19
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
20
18
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
21
19
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
22
20
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
23
21
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
22
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
23
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
24
24
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
25
25
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
26
26
  declare const _default: typeof __VLS_export;
@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_19) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- openAutoFocus: (event: Event) => any;
12
- closeAutoFocus: (event: Event) => any;
13
11
  escapeKeyDown: (event: KeyboardEvent) => any;
14
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
15
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
16
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ openAutoFocus: (event: Event) => any;
16
+ closeAutoFocus: (event: Event) => any;
17
17
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
18
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
19
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
20
18
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
21
19
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
22
20
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
23
21
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
22
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
23
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
24
24
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
25
25
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
26
26
  declare const _default: typeof __VLS_export;
@@ -13,21 +13,21 @@ type __VLS_Slots = {} & {
13
13
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
14
14
  submit: (event: Event) => any;
15
15
  close: (event: Event) => any;
16
- openAutoFocus: (event: Event) => any;
17
- closeAutoFocus: (event: Event) => any;
18
16
  escapeKeyDown: (event: KeyboardEvent) => any;
19
17
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
20
18
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
21
19
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
20
+ openAutoFocus: (event: Event) => any;
21
+ closeAutoFocus: (event: Event) => any;
22
22
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
23
23
  onSubmit?: ((event: Event) => any) | undefined;
24
24
  onClose?: ((event: Event) => any) | undefined;
25
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
26
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
27
25
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
28
26
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
29
27
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
30
28
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
29
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
30
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
31
31
  }>, {
32
32
  disabledCloseBtn: boolean;
33
33
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -13,21 +13,21 @@ type __VLS_Slots = {} & {
13
13
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
14
14
  submit: (event: Event) => any;
15
15
  close: (event: Event) => any;
16
- openAutoFocus: (event: Event) => any;
17
- closeAutoFocus: (event: Event) => any;
18
16
  escapeKeyDown: (event: KeyboardEvent) => any;
19
17
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
20
18
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
21
19
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
20
+ openAutoFocus: (event: Event) => any;
21
+ closeAutoFocus: (event: Event) => any;
22
22
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
23
23
  onSubmit?: ((event: Event) => any) | undefined;
24
24
  onClose?: ((event: Event) => any) | undefined;
25
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
26
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
27
25
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
28
26
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
29
27
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
30
28
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
29
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
30
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
31
31
  }>, {
32
32
  disabledCloseBtn: boolean;
33
33
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_22) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- openAutoFocus: (event: Event) => any;
12
- closeAutoFocus: (event: Event) => any;
13
11
  escapeKeyDown: (event: KeyboardEvent) => any;
14
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
15
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
16
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ openAutoFocus: (event: Event) => any;
16
+ closeAutoFocus: (event: Event) => any;
17
17
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
18
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
19
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
20
18
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
21
19
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
22
20
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
23
21
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
22
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
23
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
24
24
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
25
25
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
26
26
  declare const _default: typeof __VLS_export;
@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_22) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- openAutoFocus: (event: Event) => any;
12
- closeAutoFocus: (event: Event) => any;
13
11
  escapeKeyDown: (event: KeyboardEvent) => any;
14
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
15
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
16
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ openAutoFocus: (event: Event) => any;
16
+ closeAutoFocus: (event: Event) => any;
17
17
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
18
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
19
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
20
18
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
21
19
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
22
20
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
23
21
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
22
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
23
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
24
24
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
25
25
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
26
26
  declare const _default: typeof __VLS_export;
@@ -8,17 +8,17 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_14) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- closeAutoFocus: (event: Event) => any;
12
11
  escapeKeyDown: (event: KeyboardEvent) => any;
13
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
14
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
15
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ closeAutoFocus: (event: Event) => any;
16
16
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
17
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
18
17
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
19
18
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
20
19
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
21
20
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
21
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
22
22
  }>, {
23
23
  sideOffset: number;
24
24
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -8,17 +8,17 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_14) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- closeAutoFocus: (event: Event) => any;
12
11
  escapeKeyDown: (event: KeyboardEvent) => any;
13
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
14
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
15
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ closeAutoFocus: (event: Event) => any;
16
16
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
17
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
18
17
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
19
18
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
20
19
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
21
20
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
21
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
22
22
  }>, {
23
23
  sideOffset: number;
24
24
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -8,20 +8,20 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_8) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- openAutoFocus: (event: Event) => any;
12
- closeAutoFocus: (event: Event) => any;
13
11
  escapeKeyDown: (event: KeyboardEvent) => any;
14
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
15
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
16
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ openAutoFocus: (event: Event) => any;
16
+ closeAutoFocus: (event: Event) => any;
17
17
  entryFocus: (event: Event) => any;
18
18
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
19
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
20
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
21
19
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
22
20
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
23
21
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
24
22
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
23
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
24
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
25
25
  onEntryFocus?: ((event: Event) => any) | undefined;
26
26
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
27
27
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -8,20 +8,20 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_8) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- openAutoFocus: (event: Event) => any;
12
- closeAutoFocus: (event: Event) => any;
13
11
  escapeKeyDown: (event: KeyboardEvent) => any;
14
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
15
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
16
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ openAutoFocus: (event: Event) => any;
16
+ closeAutoFocus: (event: Event) => any;
17
17
  entryFocus: (event: Event) => any;
18
18
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
19
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
20
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
21
19
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
22
20
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
23
21
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
24
22
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
23
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
24
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
25
25
  onEntryFocus?: ((event: Event) => any) | undefined;
26
26
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
27
27
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
59
59
  'aria-colindex'?: (string | number) | undefined;
60
60
  'aria-colspan'?: (string | number) | undefined;
61
61
  'aria-controls'?: string | undefined | undefined;
62
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
62
+ 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
63
63
  'aria-describedby'?: string | undefined | undefined;
64
64
  'aria-details'?: string | undefined | undefined;
65
65
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
253
253
  'aria-colindex'?: (string | number) | undefined;
254
254
  'aria-colspan'?: (string | number) | undefined;
255
255
  'aria-controls'?: string | undefined | undefined;
256
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
256
+ 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
257
257
  'aria-describedby'?: string | undefined | undefined;
258
258
  'aria-details'?: string | undefined | undefined;
259
259
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
59
59
  'aria-colindex'?: (string | number) | undefined;
60
60
  'aria-colspan'?: (string | number) | undefined;
61
61
  'aria-controls'?: string | undefined | undefined;
62
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
62
+ 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
63
63
  'aria-describedby'?: string | undefined | undefined;
64
64
  'aria-details'?: string | undefined | undefined;
65
65
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
253
253
  'aria-colindex'?: (string | number) | undefined;
254
254
  'aria-colspan'?: (string | number) | undefined;
255
255
  'aria-controls'?: string | undefined | undefined;
256
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
256
+ 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
257
257
  'aria-describedby'?: string | undefined | undefined;
258
258
  'aria-details'?: string | undefined | undefined;
259
259
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
61
61
  'aria-colindex'?: (string | number) | undefined;
62
62
  'aria-colspan'?: (string | number) | undefined;
63
63
  'aria-controls'?: string | undefined | undefined;
64
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
64
+ 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
65
65
  'aria-describedby'?: string | undefined | undefined;
66
66
  'aria-details'?: string | undefined | undefined;
67
67
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
257
257
  'aria-colindex'?: (string | number) | undefined;
258
258
  'aria-colspan'?: (string | number) | undefined;
259
259
  'aria-controls'?: string | undefined | undefined;
260
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
260
+ 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
261
261
  'aria-describedby'?: string | undefined | undefined;
262
262
  'aria-details'?: string | undefined | undefined;
263
263
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
61
61
  'aria-colindex'?: (string | number) | undefined;
62
62
  'aria-colspan'?: (string | number) | undefined;
63
63
  'aria-controls'?: string | undefined | undefined;
64
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
64
+ 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
65
65
  'aria-describedby'?: string | undefined | undefined;
66
66
  'aria-details'?: string | undefined | undefined;
67
67
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
257
257
  'aria-colindex'?: (string | number) | undefined;
258
258
  'aria-colspan'?: (string | number) | undefined;
259
259
  'aria-controls'?: string | undefined | undefined;
260
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
260
+ 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
261
261
  'aria-describedby'?: string | undefined | undefined;
262
262
  'aria-details'?: string | undefined | undefined;
263
263
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_14) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- openAutoFocus: (event: Event) => any;
12
- closeAutoFocus: (event: Event) => any;
13
11
  escapeKeyDown: (event: KeyboardEvent) => any;
14
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
15
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
16
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ openAutoFocus: (event: Event) => any;
16
+ closeAutoFocus: (event: Event) => any;
17
17
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
18
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
19
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
20
18
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
21
19
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
22
20
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
23
21
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
22
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
23
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
24
24
  }>, {
25
25
  align: "start" | "center" | "end";
26
26
  sideOffset: number;
@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_14) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- openAutoFocus: (event: Event) => any;
12
- closeAutoFocus: (event: Event) => any;
13
11
  escapeKeyDown: (event: KeyboardEvent) => any;
14
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
15
13
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
16
14
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
15
+ openAutoFocus: (event: Event) => any;
16
+ closeAutoFocus: (event: Event) => any;
17
17
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
18
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
19
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
20
18
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
21
19
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
22
20
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
23
21
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
22
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
23
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
24
24
  }>, {
25
25
  align: "start" | "center" | "end";
26
26
  sideOffset: number;
@@ -8,13 +8,13 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_25) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- closeAutoFocus: (event: Event) => any;
12
11
  escapeKeyDown: (event: KeyboardEvent) => any;
13
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
13
+ closeAutoFocus: (event: Event) => any;
14
14
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
16
15
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
17
16
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
17
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
18
18
  }>, {
19
19
  position: "item-aligned" | "popper";
20
20
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -8,13 +8,13 @@ type __VLS_Slots = {} & {
8
8
  default?: (props: typeof __VLS_25) => any;
9
9
  };
10
10
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
- closeAutoFocus: (event: Event) => any;
12
11
  escapeKeyDown: (event: KeyboardEvent) => any;
13
12
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
13
+ closeAutoFocus: (event: Event) => any;
14
14
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
16
15
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
17
16
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
17
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
18
18
  }>, {
19
19
  position: "item-aligned" | "popper";
20
20
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -13,21 +13,21 @@ type __VLS_Slots = {} & {
13
13
  declare const __VLS_base: import("vue").DefineComponent<SheetContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
14
14
  submit: (event: Event) => any;
15
15
  close: () => any;
16
- openAutoFocus: (event: Event) => any;
17
- closeAutoFocus: (event: Event) => any;
18
16
  escapeKeyDown: (event: KeyboardEvent) => any;
19
17
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
20
18
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
21
19
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
20
+ openAutoFocus: (event: Event) => any;
21
+ closeAutoFocus: (event: Event) => any;
22
22
  }, string, import("vue").PublicProps, Readonly<SheetContentProps> & Readonly<{
23
23
  onSubmit?: ((event: Event) => any) | undefined;
24
24
  onClose?: (() => any) | undefined;
25
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
26
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
27
25
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
28
26
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
29
27
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
30
28
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
29
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
30
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
31
31
  }>, {
32
32
  side: "top" | "right" | "bottom" | "left";
33
33
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -13,21 +13,21 @@ type __VLS_Slots = {} & {
13
13
  declare const __VLS_base: import("vue").DefineComponent<SheetContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
14
14
  submit: (event: Event) => any;
15
15
  close: () => any;
16
- openAutoFocus: (event: Event) => any;
17
- closeAutoFocus: (event: Event) => any;
18
16
  escapeKeyDown: (event: KeyboardEvent) => any;
19
17
  pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
20
18
  focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
21
19
  interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
20
+ openAutoFocus: (event: Event) => any;
21
+ closeAutoFocus: (event: Event) => any;
22
22
  }, string, import("vue").PublicProps, Readonly<SheetContentProps> & Readonly<{
23
23
  onSubmit?: ((event: Event) => any) | undefined;
24
24
  onClose?: (() => any) | undefined;
25
- onOpenAutoFocus?: ((event: Event) => any) | undefined;
26
- onCloseAutoFocus?: ((event: Event) => any) | undefined;
27
25
  onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
28
26
  onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
29
27
  onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
30
28
  onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
29
+ onOpenAutoFocus?: ((event: Event) => any) | undefined;
30
+ onCloseAutoFocus?: ((event: Event) => any) | undefined;
31
31
  }>, {
32
32
  side: "top" | "right" | "bottom" | "left";
33
33
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pukaad-ui-lib",
3
- "version": "1.109.0",
3
+ "version": "1.111.0",
4
4
  "description": "pukaad-ui for MeMSG",
5
5
  "repository": {
6
6
  "type": "git",