pukaad-ui-lib 1.369.9 → 1.370.0

package/dist/module.json

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

package/dist/runtime/assets/svg/flags/uk.svg

@@ -0,0 +1,14 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8829_2067)">
+<path d="M0 0H20V20H0V0Z" fill="#012169"/>
+<path d="M20 0V2.5L12.5781 10L20 17.3047V20H17.3828L9.92188 12.6562L2.65625 20H0V17.3438L7.26562 10.0391L0 2.89062V0H2.42188L9.92188 7.34375L17.1875 0H20Z" fill="white"/>
+<path d="M7.1875 12.6562L7.61719 13.9844L1.64062 20H0V19.8828L7.1875 12.6562ZM12.0312 12.1875L14.1406 12.5L20 18.2422V20L12.0312 12.1875ZM20 0L12.5 7.65625L12.3438 5.9375L18.2031 0H20ZM0 0.0390625L7.53906 7.42188L5.23438 7.10938L0 1.91406V0.0390625Z" fill="#C8102E"/>
+<path d="M6.875 0V20H13.125V0H6.875ZM0 6.875V13.125H20V6.875H0Z" fill="white"/>
+<path d="M0 8.125V11.875H20V8.125H0ZM8.125 0V20H11.875V0H8.125Z" fill="#C8102E"/>
+</g>
+<defs>
+<clipPath id="clip0_8829_2067">
+<rect width="20" height="20" rx="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/runtime/components/card/card-place-detail.d.vue.ts

@@ -1,35 +1,5 @@
-export interface Category {
-    id: string;
-    category_name: string;
-}
-export interface TimeSlot {
-    start: string;
-    end: string;
-}
-export interface OpeningHour {
-    day: number;
-    isOpen: boolean;
-    isAllDay?: boolean;
-    timeSlots?: TimeSlot[];
-}
-export interface ContactChannel {
-    channel_type: string;
-    value: string;
-}
-export interface SpecialDay {
-    date: string | Date;
-    isOpen: boolean;
-    timeSlots?: TimeSlot[];
-}
-export interface PlaceDetailItem {
-    description?: string;
-    categories?: Category[];
-    open_status?: string;
-    opening_hours?: OpeningHour[];
-    special_days?: SpecialDay[];
-    phone?: string;
-    contact_channels?: ContactChannel[];
-}
+import type { PlaceDetailItem } from "#pukaad-ui/types/models/place";
+export type { PlaceDetailItem } from "#pukaad-ui/types/models/place";
 type __VLS_Props = {
     item?: PlaceDetailItem;
 };

package/dist/runtime/components/card/card-place-detail.vue

@@ -85,7 +85,25 @@
         <div v-if="props.item.phone">{{ props.item.phone }}</div>
         <div v-else class="text-cloud">ไม่มีข้อมูลเบอร์โทรศัพท์</div>
       </div>
-
+      <div class="flex gap-[12px]">
+        <Icon
+          name="lucide:shield-check"
+          :size="20"
+          class="text-primary shrink-0 mt-[2px]"
+        />
+        <div class="font-body-large">หากคุณเป็นเจ้าของธุรกิจนี้</div>
+      </div>
+      <div
+        class="flex gap-[12px] hover:cursor-pointer"
+        @click="isOpenModalSuggestEdit = true"
+      >
+        <Icon
+          name="lucide:square-pen"
+          :size="20"
+          class="text-primary shrink-0 mt-[2px]"
+        />
+        <div class="font-body-large">แนะนำให้แก้ไข</div>
+      </div>
       <Divider />
 
       <div v-if="socialLinks.length" class="flex flex-col gap-[8px]">
@@ -108,11 +126,15 @@
         <span class="text-cloud">ไม่มีข้อมูลช่องทางติดต่อ</span>
       </div>
     </div>
+    <ModalSuggestEditPlace
+      v-model="isOpenModalSuggestEdit"
+      :item="props.item"
+    />
   </Card>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import dayjs from "#pukaad-ui/runtime/utils/dayjs";
 const DAY_NAMES = [
   "\u0E27\u0E31\u0E19\u0E2D\u0E32\u0E17\u0E34\u0E15\u0E22\u0E4C",
@@ -126,9 +148,10 @@ const DAY_NAMES = [
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({}) }
 });
+const isOpenModalSuggestEdit = ref(false);
 const toArray = (value) => Array.isArray(value) ? value : [];
 const categoryText = computed(
-  () => toArray(props.item.categories).filter((c) => c?.category_name).map((c) => c.category_name).join(", ")
+  () => props.item.categories?.map((c) => c.category_name).join(", ") ?? ""
 );
 const getTimeLines = (isOpen, timeSlots, isAllDay) => {
   if (!isOpen) return ["\u0E2B\u0E22\u0E38\u0E14\u0E17\u0E33\u0E01\u0E32\u0E23"];

package/dist/runtime/components/card/card-place-detail.vue.d.ts

@@ -1,35 +1,5 @@
-export interface Category {
-    id: string;
-    category_name: string;
-}
-export interface TimeSlot {
-    start: string;
-    end: string;
-}
-export interface OpeningHour {
-    day: number;
-    isOpen: boolean;
-    isAllDay?: boolean;
-    timeSlots?: TimeSlot[];
-}
-export interface ContactChannel {
-    channel_type: string;
-    value: string;
-}
-export interface SpecialDay {
-    date: string | Date;
-    isOpen: boolean;
-    timeSlots?: TimeSlot[];
-}
-export interface PlaceDetailItem {
-    description?: string;
-    categories?: Category[];
-    open_status?: string;
-    opening_hours?: OpeningHour[];
-    special_days?: SpecialDay[];
-    phone?: string;
-    contact_channels?: ContactChannel[];
-}
+import type { PlaceDetailItem } from "#pukaad-ui/types/models/place";
+export type { PlaceDetailItem } from "#pukaad-ui/types/models/place";
 type __VLS_Props = {
     item?: PlaceDetailItem;
 };

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-map.d.vue.ts

@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
     provinceId?: number;
     amphurId?: number;
     tambonId?: number;
+    class?: HTMLAttributes["class"];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:latLng": (val: {

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-map.vue

@@ -1,19 +1,25 @@
 <template>
-  <div
-    class="relative w-[334px] h-[434px] rounded-[12px] overflow-hidden bg-gray-300 z-0"
-  >
+  <div :class="rootClass">
     <div ref="mapContainer" class="w-full h-full z-0"></div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { computed, ref, onMounted, watch } from "vue";
 import mapPinSvg from "#pukaad-ui/runtime/assets/svg/map-pin.svg?raw";
+import { cn } from "#pukaad-ui/runtime/plugins/shadcn";
 const props = defineProps({
   provinceId: { type: Number, required: false },
   amphurId: { type: Number, required: false },
-  tambonId: { type: Number, required: false }
+  tambonId: { type: Number, required: false },
+  class: { type: null, required: false }
 });
+const rootClass = computed(
+  () => cn(
+    "relative w-[334px] h-[434px] rounded-[12px] overflow-hidden bg-gray-300 z-0",
+    props.class
+  )
+);
 const emits = defineEmits(["update:latLng"]);
 const mapContainer = ref(null);
 let map = null;

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-map.vue.d.ts

@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
     provinceId?: number;
     amphurId?: number;
     tambonId?: number;
+    class?: HTMLAttributes["class"];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:latLng": (val: {

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

@@ -2,8 +2,10 @@ import type { InputLinkItem, ContactChannel, InputLinkProps } from "#pukaad-ui/t
 type __VLS_Props = InputLinkProps & {
     modelValue?: InputLinkItem[] | ContactChannel[];
     defaultFirst?: boolean;
+    defaultType?: string;
     showCounter?: boolean;
     limit?: number;
+    label?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     hasError: () => boolean;
@@ -12,11 +14,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: InputLinkItem[] | ContactChannel[]) => any) | undefined;
 }>, {
+    label: string;
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
     limit: number;
     showCounter: boolean;
     format: "legacy" | "contact_channel";
+    hideType: boolean;
+    hideAddButton: boolean;
     defaultFirst: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-link.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative">
-    <div class="font-body-large-prominent text-gray">ช่องทางการติดต่อ</div>
+    <div class="font-body-large-prominent text-gray">{{ props.label }}</div>
     <ul class="flex flex-col gap-[16px]">
       <li v-for="(link, i) in linkValue" :key="i">
         <InputTypedField
@@ -10,12 +10,13 @@
           :rules="(v) => rules(v, link.name)"
           :show-counter="props.showCounter"
           :limit="props.limit"
+          :hide-type="props.hideType"
           v-model:type="link.name"
           v-model:value="link.link"
           @change="onChangeLink(link, i)"
         />
       </li>
-      <li>
+      <li v-if="!props.hideAddButton">
         <Button variant="text" color="primary" @click="addLink">
           <Icon name="lucide:plus" />
           เพิ่มช่องทาง
@@ -30,10 +31,14 @@ import { computed, ref, watch, onMounted } from "vue";
 const props = defineProps({
   name: { type: String, required: false, default: "link" },
   format: { type: String, required: false, default: "legacy" },
+  hideType: { type: Boolean, required: false, default: false },
+  hideAddButton: { type: Boolean, required: false, default: false },
   modelValue: { type: Array, required: false, default: () => [] },
   defaultFirst: { type: Boolean, required: false, default: false },
+  defaultType: { type: String, required: false },
   showCounter: { type: Boolean, required: false, default: false },
-  limit: { type: Number, required: false, default: 0 }
+  limit: { type: Number, required: false, default: 0 },
+  label: { type: String, required: false, default: "\u0E0A\u0E48\u0E2D\u0E07\u0E17\u0E32\u0E07\u0E01\u0E32\u0E23\u0E15\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E2D\u0E37\u0E48\u0E19" }
 });
 const emit = defineEmits(["update:modelValue"]);
 const listSocial = [
@@ -167,13 +172,14 @@ watch(
   },
   { deep: true }
 );
+const findSocial = (name) => listSocial.find((item) => item.name.toLowerCase() === name?.toLowerCase());
 const rules = (v, linkName) => {
   if (!v) return true;
-  const socialItem = listSocial.find((item) => item.name === linkName);
+  const socialItem = findSocial(linkName);
   if (socialItem && socialItem.regex) {
     if (!socialItem.regex.test(v)) {
-      if (linkName === "Email") return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E2D\u0E35\u0E40\u0E21\u0E25\u0E17\u0E35\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
-      return `\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E25\u0E34\u0E07\u0E04\u0E4C ${linkName} \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07`;
+      if (socialItem.name === "Email") return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E2D\u0E35\u0E40\u0E21\u0E25\u0E17\u0E35\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
+      return `\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E25\u0E34\u0E07\u0E04\u0E4C ${socialItem.name} \u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07`;
     }
     return true;
   }
@@ -181,7 +187,7 @@ const rules = (v, linkName) => {
   return regex.test(v) || "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E25\u0E34\u0E07\u0E04\u0E4C\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
 };
 const getPlaceholder = (name) => {
-  return listSocial.find((f) => f.name === name)?.example || "";
+  return findSocial(name)?.example || "";
 };
 const listOption = computed(() => {
   const arr = listSocial.map((item) => {
@@ -200,7 +206,7 @@ onMounted(() => {
 });
 const addLink = () => {
   const link = {
-    name: "Email",
+    name: props.defaultType || "Email",
     link: ""
   };
   if (!Array.isArray(linkValue.value)) {

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

@@ -2,8 +2,10 @@ import type { InputLinkItem, ContactChannel, InputLinkProps } from "#pukaad-ui/t
 type __VLS_Props = InputLinkProps & {
     modelValue?: InputLinkItem[] | ContactChannel[];
     defaultFirst?: boolean;
+    defaultType?: string;
     showCounter?: boolean;
     limit?: number;
+    label?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     hasError: () => boolean;
@@ -12,11 +14,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: InputLinkItem[] | ContactChannel[]) => any) | undefined;
 }>, {
+    label: string;
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
     limit: number;
     showCounter: boolean;
     format: "legacy" | "contact_channel";
+    hideType: boolean;
+    hideAddButton: boolean;
     defaultFirst: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-typed-field.vue

@@ -21,6 +21,7 @@
 
     <div class="flex items-start gap-[8px] font-body-large">
       <InputSelect
+        v-if="!props.hideType"
         :name="`${props.name}-type`"
         :class="props.selectClass"
         :options="props.options"
@@ -55,7 +56,8 @@ const props = defineProps({
   limit: { type: Number, required: false, default: 0 },
   selectClass: { type: null, required: false, default: "w-[172px]" },
   fieldClass: { type: null, required: false },
-  resetOnTypeChange: { type: Boolean, required: false, default: true }
+  resetOnTypeChange: { type: Boolean, required: false, default: true },
+  hideType: { type: Boolean, required: false }
 });
 const emit = defineEmits(["typeChange", "change"]);
 const type = defineModel("type", { type: String, ...{ default: "" } });

package/dist/runtime/components/modal/suggest-edit-place/modal-suggest-edit-place.d.vue.ts

@@ -0,0 +1,118 @@
+import type { PlaceDetailItem, ContactChannel } from "#pukaad-ui/types/models/place";
+import type { InputAddressValue } from "#pukaad-ui/runtime/components/input/input-address.vue";
+import type { BusinessHoursSchedule } from "#pukaad-ui/runtime/components/input/input-date-opening.vue";
+import type { SpecialDaySchedule } from "#pukaad-ui/runtime/components/input/input-date-opening-special.vue";
+type __VLS_Props = {
+    item?: PlaceDetailItem;
+    state?: "personal" | "business" | "backoffice";
+    fixedProvinceId?: number;
+};
+interface LocalizedNameRow {
+    language: string;
+    currentName: string;
+    editType: string;
+    newName: string;
+}
+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-field": (payload: {
+        field: "place_name";
+        editType: string;
+        value: string;
+        localizedNames: LocalizedNameRow[];
+    } | {
+        field: "address";
+        editType: string;
+        addressValue: InputAddressValue;
+        latLng: {
+            lat: number;
+            lng: number;
+        } | null;
+    } | {
+        field: "category";
+        editType: string;
+        categories: string[];
+    } | {
+        field: "description";
+        editType: string;
+        value: string;
+    } | {
+        field: "dateopening";
+        editType: string;
+        openingHours: BusinessHoursSchedule[];
+        specialDays: SpecialDaySchedule[];
+    } | {
+        field: "phone";
+        value: string;
+    } | {
+        field: "phone_edit";
+        currentPhone: string;
+        editType: string;
+        value: string;
+    } | {
+        field: "link";
+        channels: ContactChannel[];
+    } | {
+        field: "link_edit";
+        currentChannel: ContactChannel | null;
+        editType: string;
+        value: string;
+    }) => any;
+    "select-suggested-place": (item: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onSubmit-field"?: ((payload: {
+        field: "place_name";
+        editType: string;
+        value: string;
+        localizedNames: LocalizedNameRow[];
+    } | {
+        field: "address";
+        editType: string;
+        addressValue: InputAddressValue;
+        latLng: {
+            lat: number;
+            lng: number;
+        } | null;
+    } | {
+        field: "category";
+        editType: string;
+        categories: string[];
+    } | {
+        field: "description";
+        editType: string;
+        value: string;
+    } | {
+        field: "dateopening";
+        editType: string;
+        openingHours: BusinessHoursSchedule[];
+        specialDays: SpecialDaySchedule[];
+    } | {
+        field: "phone";
+        value: string;
+    } | {
+        field: "phone_edit";
+        currentPhone: string;
+        editType: string;
+        value: string;
+    } | {
+        field: "link";
+        channels: ContactChannel[];
+    } | {
+        field: "link_edit";
+        currentChannel: ContactChannel | null;
+        editType: string;
+        value: string;
+    }) => any) | undefined;
+    "onSelect-suggested-place"?: ((item: Record<string, any>) => any) | undefined;
+}>, {
+    item: PlaceDetailItem;
+    state: "personal" | "business" | "backoffice";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;