pukaad-ui-lib 1.81.0 → 1.83.0

package/dist/module.json

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

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

@@ -1,6 +1,7 @@
 export interface CardProps {
     title?: string;
     description?: string;
+    variant?: "default" | "outline";
 }
 declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: any, __VLS_46: any;
 type __VLS_Slots = {} & {
@@ -14,7 +15,9 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_46) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {
+    variant: "default" | "outline";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/card/card.vue

@@ -1,5 +1,8 @@
 <template>
-  <ShadCard v-slot="slotScope">
+  <ShadCard
+    v-slot="slotScope"
+    :class="props.variant === 'outline' && 'border-[1px] border-mecury'"
+  >
     <ShadCardHeader
       v-if="$slots.header || props.title || props.description"
       v-bind="slotScope"
@@ -30,6 +33,7 @@
 <script setup>
 const props = defineProps({
   title: { type: String, required: false },
-  description: { type: String, required: false }
+  description: { type: String, required: false },
+  variant: { type: String, required: false, default: "default" }
 });
 </script>

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

@@ -1,6 +1,7 @@
 export interface CardProps {
     title?: string;
     description?: string;
+    variant?: "default" | "outline";
 }
 declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: any, __VLS_46: any;
 type __VLS_Slots = {} & {
@@ -14,7 +15,9 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_46) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {
+    variant: "default" | "outline";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/drawer/drawer-post-review.d.vue.ts

@@ -0,0 +1,28 @@
+export interface DrawerPostReviewItem {
+    placeName: string;
+    address: string;
+    coverImage: string;
+    rating: number;
+    description: string;
+    photos: File[];
+}
+export interface DrawerPostReviewProps {
+    item?: DrawerPostReviewItem;
+}
+type __VLS_Props = DrawerPostReviewProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: (data: DrawerPostReviewItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((data: DrawerPostReviewItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    item: DrawerPostReviewItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/drawer/drawer-post-review.vue

@@ -0,0 +1,121 @@
+<template>
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[16px]">
+        <div
+          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
+        >
+          <Image
+            v-if="form.coverImage"
+            :src="form.coverImage"
+            width="auto"
+            height="auto"
+            fit="cover"
+          />
+        </div>
+        <div class="flex flex-col gap-[4px]">
+          <div class="font-body-large-prominent">
+            {{ form.placeName }}
+          </div>
+          <div class="font-body-small text-gray">
+            {{ form.address }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center">
+        <InputRating v-model="form.rating" :size="40" />
+      </div>
+      <InputTextarea
+        name="description"
+        label="คำอธิบาย"
+        placeholder="เขียนรีวิวของคุณ"
+        showCounter
+        v-model="form.description"
+        class="min-h-[120px]"
+      />
+      <div class="flex flex-col gap-[8px]">
+        <div class="flex flex-col gap-[4px]">
+          <div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
+          <div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
+        </div>
+        <InputFile
+          :limit="9"
+          name="photos"
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.photos"
+        />
+        <div class="flex flex-col text-gray font-body-small">
+          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
+          <div>ขนาดไฟล์สูงสุด 30 mb</div>
+        </div>
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose">ยกเลิก</Button>
+        <Button type="submit" color="primary" :disabled="form.rating === 0">
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer>
+</template>
+
+<script setup>
+import { ref, watch, computed } from "vue";
+import { useNuxtApp } from "nuxt/app";
+const { $alert } = useNuxtApp();
+const emit = defineEmits(["submit"]);
+const props = defineProps({
+  item: { type: Object, required: false, default: () => ({
+    placeName: "",
+    address: "",
+    coverImage: "",
+    rating: 0,
+    description: "",
+    photos: []
+  }) }
+});
+const form = ref(JSON.parse(JSON.stringify(props.item)));
+const isOpen = defineModel({ type: Boolean, ...{
+  default: false
+} });
+const drawerTitle = computed(() => {
+  const hasDescription = props.item?.description?.trim();
+  return hasDescription ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27" : "\u0E40\u0E02\u0E35\u0E22\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27";
+});
+watch(isOpen, (newVal) => {
+  if (newVal) {
+    form.value = JSON.parse(JSON.stringify(props.item));
+  }
+});
+const onClose = async () => {
+  const isModified = JSON.stringify(form.value) !== JSON.stringify(props.item);
+  if (isModified) {
+    const { isConfirmed } = await $alert.show({
+      type: "warning",
+      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      description: "\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      confirmText: "\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07",
+      cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
+      showCancelBtn: true
+    });
+    if (isConfirmed) {
+      isOpen.value = false;
+    }
+  } else {
+    isOpen.value = false;
+  }
+};
+const onSubmit = () => {
+  emit("submit", form.value);
+  isOpen.value = false;
+};
+</script>

package/dist/runtime/components/drawer/drawer-post-review.vue.d.ts

@@ -0,0 +1,28 @@
+export interface DrawerPostReviewItem {
+    placeName: string;
+    address: string;
+    coverImage: string;
+    rating: number;
+    description: string;
+    photos: File[];
+}
+export interface DrawerPostReviewProps {
+    item?: DrawerPostReviewItem;
+}
+type __VLS_Props = DrawerPostReviewProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: (data: DrawerPostReviewItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((data: DrawerPostReviewItem) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    item: DrawerPostReviewItem;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -64,8 +64,8 @@ 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;
-    background: boolean;
     modal: boolean;
+    background: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;

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

@@ -64,8 +64,8 @@ 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;
-    background: boolean;
     modal: boolean;
+    background: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;

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;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     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;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     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;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: 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;
-    new: boolean;
     disabledForgotPassword: boolean;
+    new: 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;
     max: number;
     min: 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;
     max: number;
     min: number;
-    step: number;
     lineHeight: number | string;
     appearance: boolean;
     thumbSize: number | string;

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     onClose?: (() => any) | undefined;
 }>, {
     title: string;
-    disabledForgotPassword: boolean;
     confirmText: string;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/card/Card.vue

@@ -1,11 +1,14 @@
 <template>
   <Form v-slot="{ meta }" @submit="onSubmit">
-    <div data-slot="card" :class="
+    <div
+      data-slot="card"
+      :class="
   cn(
-    'bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-4',
+    'bg-card text-card-foreground flex flex-col gap-4 rounded-xl py-4',
     props.class
   )
-">
+"
+    >
       <slot name="default" :meta="meta" />
     </div>
   </Form>

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

@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

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

@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

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

@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

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

@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
+    'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/package.json

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