pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,48 +1,48 @@
 <template>
-  <ShadDialog v-model:open="isOpen">
-    <ShadDialogContent
-      :class="props.class"
-      :disabled-close-btn="props.disabledCloseBtn"
-      :no-padding="props.disablePadding"
-      :disable-outside-pointer-events="false"
-      v-slot="{ meta }"
-      @submit="onSubmit"
-      @close="onClose"
-    >
-      <Loading :loading="props.loading" :text="props.loadingText" />
-      <ShadDialogHeader :class="[props.disablePadding ? 'bg-background' : '']">
-        <slot name="header">
-          <ShadDialogTitle>
-            <slot name="title">
-              {{ props.title }}
-            </slot>
-          </ShadDialogTitle>
-          <ShadDialogDescription v-if="props.description || $slots.description">
-            <slot name="description">
-              {{ props.description }}
-            </slot>
-          </ShadDialogDescription>
-        </slot>
-      </ShadDialogHeader>
-      <ShadDialogDescription
-        v-if="!props.description && !$slots.description"
-        class="sr-only"
-      >
-        {{ props.title }}
-      </ShadDialogDescription>
-      <div
-        :class="props.contentMaxHeight ? '-mx-6 px-6' : void 0"
+  <ShadDialog v-model:open="isOpen">
+    <ShadDialogContent
+      :class="props.class"
+      :disabled-close-btn="props.disabledCloseBtn"
+      :no-padding="props.disablePadding"
+      :disable-outside-pointer-events="false"
+      v-slot="{ meta }"
+      @submit="onSubmit"
+      @close="onClose"
+    >
+      <Loading :loading="props.loading" :text="props.loadingText" />
+      <ShadDialogHeader :class="[props.disablePadding ? 'bg-background' : '']">
+        <slot name="header">
+          <ShadDialogTitle>
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </ShadDialogTitle>
+          <ShadDialogDescription v-if="props.description || $slots.description">
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </ShadDialogDescription>
+        </slot>
+      </ShadDialogHeader>
+      <ShadDialogDescription
+        v-if="!props.description && !$slots.description"
+        class="sr-only"
+      >
+        {{ props.title }}
+      </ShadDialogDescription>
+      <div
+        :class="props.contentMaxHeight ? '-mx-6 px-6' : void 0"
         :style="
   props.contentMaxHeight ? { maxHeight: `${props.contentMaxHeight}px`, overflowY: 'auto' } : void 0
-"
-      >
-        <slot name="default" :meta="meta" />
-      </div>
-      <ShadDialogFooter v-if="$slots.footer">
-        <slot name="footer" :meta="meta" />
-      </ShadDialogFooter>
-    </ShadDialogContent>
-  </ShadDialog>
+"
+      >
+        <slot name="default" :meta="meta" />
+      </div>
+      <ShadDialogFooter v-if="$slots.footer">
+        <slot name="footer" :meta="meta" />
+      </ShadDialogFooter>
+    </ShadDialogContent>
+  </ShadDialog>
 </template>
 
 <script setup>

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

@@ -1,261 +1,261 @@
 <template>
-  <Modal
-    class="w-[512px]"
-    v-model="isOpen"
-    :loading="isSubmitting"
-    @submit="onSubmit"
-  >
-    <template #header>
-      <div v-if="activeField === 'list'" class="font-title-medium-prominent">
-        แนะนำให้แก้ไข
-      </div>
-      <div v-else class="font-title-medium-prominent">
-        <div
+  <Modal
+    class="w-[512px]"
+    v-model="isOpen"
+    :loading="isSubmitting"
+    @submit="onSubmit"
+  >
+    <template #header>
+      <div v-if="activeField === 'list'" class="font-title-medium-prominent">
+        แนะนำให้แก้ไข
+      </div>
+      <div v-else class="font-title-medium-prominent">
+        <div
           v-if="
   activeField === 'phone' || activeField === 'link' || activeField === 'description' || activeField === 'dateopening'
-"
-        >
-          แนะนำให้แก้ไข
-        </div>
-        <div v-if="activeField === 'place_name'">แก้ไขชื่อสถานที่</div>
-        <div v-if="activeField === 'address'">แก้ไขที่อยู่</div>
-        <div v-if="activeField === 'category'">แก้ไขหมวดหมู่</div>
-        <div v-if="activeField === 'description_edit'">แก้ไขคำอธิบาย</div>
-        <div v-if="activeField === 'dateopening_edit'">แก้ไขวัน เวลาทำการ</div>
-        <div v-if="activeField === 'phone_edit'">แก้ไขเบอร์โทรศัพท์</div>
-        <div v-if="activeField === 'link_edit'">แก้ไขช่องทางติดต่อ</div>
-      </div>
-    </template>
-
-    <div v-if="activeField === 'list'" class="flex flex-col">
-      <div
-        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
-        @click="openField('place_name')"
-      >
-        <div class="flex w-full gap-[8px]">
-          <Icon name="lucide:store" :size="20" class="text-primary shrink-0" />
-          <div class="font-body-large">
-            {{ props.item.place_name }}
-          </div>
-        </div>
-        <Icon name="lucide:chevron-right" :size="16" />
-      </div>
-      <div
-        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
-        @click="openField('address')"
-      >
-        <div class="flex w-full gap-[8px]">
-          <Icon
-            name="lucide:map-pin"
-            :size="20"
-            class="text-primary shrink-0"
-          />
-          <div class="font-body-large">
-            {{ props.item.address }}
-          </div>
-        </div>
-        <Icon name="lucide:chevron-right" :size="16" />
-      </div>
-      <div
-        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
-        @click="openField('category')"
-      >
-        <div class="flex w-full gap-[8px]">
-          <Icon name="lucide:tag" :size="20" class="text-primary shrink-0" />
-          <div class="font-body-large">
-            {{ categoryText }}
-          </div>
-        </div>
-        <Icon name="lucide:chevron-right" :size="16" />
-      </div>
-      <div
-        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+"
+        >
+          แนะนำให้แก้ไข
+        </div>
+        <div v-if="activeField === 'place_name'">แก้ไขชื่อสถานที่</div>
+        <div v-if="activeField === 'address'">แก้ไขที่อยู่</div>
+        <div v-if="activeField === 'category'">แก้ไขหมวดหมู่</div>
+        <div v-if="activeField === 'description_edit'">แก้ไขคำอธิบาย</div>
+        <div v-if="activeField === 'dateopening_edit'">แก้ไขวัน เวลาทำการ</div>
+        <div v-if="activeField === 'phone_edit'">แก้ไขเบอร์โทรศัพท์</div>
+        <div v-if="activeField === 'link_edit'">แก้ไขช่องทางติดต่อ</div>
+      </div>
+    </template>
+
+    <div v-if="activeField === 'list'" class="flex flex-col">
+      <div
+        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+        @click="openField('place_name')"
+      >
+        <div class="flex w-full gap-[8px]">
+          <Icon name="lucide:store" :size="20" class="text-primary shrink-0" />
+          <div class="font-body-large">
+            {{ props.item.place_name }}
+          </div>
+        </div>
+        <Icon name="lucide:chevron-right" :size="16" />
+      </div>
+      <div
+        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+        @click="openField('address')"
+      >
+        <div class="flex w-full gap-[8px]">
+          <Icon
+            name="lucide:map-pin"
+            :size="20"
+            class="text-primary shrink-0"
+          />
+          <div class="font-body-large">
+            {{ props.item.address }}
+          </div>
+        </div>
+        <Icon name="lucide:chevron-right" :size="16" />
+      </div>
+      <div
+        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+        @click="openField('category')"
+      >
+        <div class="flex w-full gap-[8px]">
+          <Icon name="lucide:tag" :size="20" class="text-primary shrink-0" />
+          <div class="font-body-large">
+            {{ categoryText }}
+          </div>
+        </div>
+        <Icon name="lucide:chevron-right" :size="16" />
+      </div>
+      <div
+        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
         @click="
   props.item.description ? openDescriptionEditField() : openField('description')
-"
-      >
-        <div class="flex w-full gap-[8px] font-body-large">
-          <Icon
-            name="lucide:circle-alert"
-            :size="20"
-            class="text-primary shrink-0"
-          />
-          <div v-if="props.item.description">
-            {{ props.item.description }}
-          </div>
-          <div v-else class="text-cloud">เพิ่มคำอธิบาย</div>
-        </div>
-        <Icon name="lucide:chevron-right" :size="16" />
-      </div>
-      <div
-        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+"
+      >
+        <div class="flex w-full gap-[8px] font-body-large">
+          <Icon
+            name="lucide:circle-alert"
+            :size="20"
+            class="text-primary shrink-0"
+          />
+          <div v-if="props.item.description">
+            {{ props.item.description }}
+          </div>
+          <div v-else class="text-cloud">เพิ่มคำอธิบาย</div>
+        </div>
+        <Icon name="lucide:chevron-right" :size="16" />
+      </div>
+      <div
+        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
         @click="
   hasOpeningHoursData ? openDateOpeningEditField() : openField('dateopening')
-"
-      >
-        <div class="flex w-full gap-[8px] font-body-large">
-          <Icon name="lucide:clock" :size="20" class="text-primary shrink-0" />
-          <div v-if="todayStatus.label" class="font-body-large">
-            {{ todayStatus.label }}
-          </div>
-          <div v-else class="text-cloud">เพิ่มวัน เวลาทำการ</div>
-        </div>
-        <Icon name="lucide:chevron-right" :size="16" />
-      </div>
-      <template v-if="phoneList.length">
-        <div
-          v-for="(phoneItem, index) in phoneList"
-          :key="`phone-${index}`"
-          class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
-          @click="openPhoneEditField(phoneItem)"
-        >
-          <div class="flex w-full gap-[8px] font-body-large">
-            <Icon
-              name="lucide:phone"
-              :size="20"
-              class="text-primary shrink-0"
-            />
-            <div>{{ phoneItem }}</div>
-          </div>
-          <Icon name="lucide:chevron-right" :size="16" />
-        </div>
-      </template>
-      <div
-        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
-        @click="openField('phone')"
-      >
-        <div class="flex w-full gap-[8px] font-body-large">
-          <Icon name="lucide:phone" :size="20" class="text-primary shrink-0" />
-          <div class="text-cloud">เพิ่มเบอร์โทรศัพท์</div>
-        </div>
-        <Icon name="lucide:chevron-right" :size="16" />
-      </div>
-      <template v-if="channelList.length">
-        <div
-          v-for="(channel, index) in channelList"
-          :key="`link-${index}`"
-          class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
-          @click="openLinkEditField(channel)"
-        >
-          <div class="flex w-full gap-[8px] font-body-large min-w-0">
-            <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
-            <div class="flex-1 w-[396px] truncate">{{ channel.value }}</div>
-          </div>
-          <Icon name="lucide:chevron-right" :size="16" />
-        </div>
-      </template>
-      <div
-        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
-        @click="openField('link')"
-      >
-        <div class="flex w-full gap-[8px] font-body-large">
-          <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
-          <div class="text-cloud">เพิ่มช่องทางติดต่ออื่น</div>
-        </div>
-        <Icon name="lucide:chevron-right" :size="16" />
-      </div>
-    </div>
-
-    <PlaceName
-      v-else-if="activeField === 'place_name'"
-      :current-name="props.item.place_name"
-      :fetch-fn="fetchApprovedPlaces"
-      description-key="description"
-      :existing-localized-names="props.item.localized_names"
-      v-model:edit-type="editType"
-      v-model:new-name="newName"
-      v-model:localized-names="localizedNames"
-      @select="emit('select-suggested-place', $event)"
-    />
-
-    <PlaceAddress
-      v-else-if="activeField === 'address'"
-      :current-address="props.item.address"
-      :fixed-province-id="props.fixedProvinceId"
-      v-model:edit-type="addressEditType"
-      v-model:address-value="addressValue"
-      v-model:lat-lng="addressLatLng"
-    />
-
-    <PlaceCategory
-      v-else-if="activeField === 'category'"
-      :current-categories="categoryText"
-      :options="categoryOptions"
-      v-model:edit-type="categoryEditType"
-      v-model:categories="categories"
-    />
-
-    <PlaceDescription
-      v-else-if="activeField === 'description'"
-      v-model:description-value="descriptionValue"
-    />
-
-    <PlaceDescriptionEdit
-      v-else-if="activeField === 'description_edit'"
-      :current-description="props.item.description"
-      v-model:edit-type="descriptionEditType"
-      v-model:description-value="descriptionValue"
-    />
-
-    <PlaceDateOpening
-      v-else-if="activeField === 'dateopening'"
-      v-model:opening-hours="newOpeningHours"
-      v-model:special-days="newSpecialDays"
-    />
-
-    <PlaceDateOpeningEdit
-      v-else-if="activeField === 'dateopening_edit'"
-      :current-opening-hours="props.item.opening_hours"
-      :current-special-days="props.item.special_days"
-      :current-open-status="props.item.open_status"
-      v-model:edit-type="dateOpeningEditType"
-      v-model:opening-hours="newOpeningHours"
-      v-model:special-days="newSpecialDays"
-    />
-
-    <PlacePhone
-      v-else-if="activeField === 'phone'"
-      v-model:phone-value="phoneValue"
-    />
-
-    <PlacePhoneEdit
-      v-else-if="activeField === 'phone_edit'"
-      :current-phone="editingPhone"
-      v-model:edit-type="phoneEditType"
-      v-model:phone-value="editPhoneValue"
-    />
-
-    <PlaceLink
-      v-else-if="activeField === 'link'"
-      v-model:channels="newContactChannels"
-    />
-
-    <PlaceLinkEdit
-      v-else-if="activeField === 'link_edit'"
-      :current-channel="editingChannel"
-      v-model:edit-type="linkEditType"
-      v-model:channel-value="editChannelValue"
-    />
-
-    <template v-if="activeField !== 'list'" #footer>
-      <Button
-        class="w-full"
-        variant="outline"
-        type="button"
-        @click="cancelEdit"
-      >
-        ยกเลิก
-      </Button>
-      <Button
-        class="w-full"
-        type="submit"
-        color="primary"
-        :disabled="!canSubmit"
-      >
-        ส่ง
-      </Button>
-    </template>
-  </Modal>
+"
+      >
+        <div class="flex w-full gap-[8px] font-body-large">
+          <Icon name="lucide:clock" :size="20" class="text-primary shrink-0" />
+          <div v-if="todayStatus.label" class="font-body-large">
+            {{ todayStatus.label }}
+          </div>
+          <div v-else class="text-cloud">เพิ่มวัน เวลาทำการ</div>
+        </div>
+        <Icon name="lucide:chevron-right" :size="16" />
+      </div>
+      <template v-if="phoneList.length">
+        <div
+          v-for="(phoneItem, index) in phoneList"
+          :key="`phone-${index}`"
+          class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+          @click="openPhoneEditField(phoneItem)"
+        >
+          <div class="flex w-full gap-[8px] font-body-large">
+            <Icon
+              name="lucide:phone"
+              :size="20"
+              class="text-primary shrink-0"
+            />
+            <div>{{ phoneItem }}</div>
+          </div>
+          <Icon name="lucide:chevron-right" :size="16" />
+        </div>
+      </template>
+      <div
+        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+        @click="openField('phone')"
+      >
+        <div class="flex w-full gap-[8px] font-body-large">
+          <Icon name="lucide:phone" :size="20" class="text-primary shrink-0" />
+          <div class="text-cloud">เพิ่มเบอร์โทรศัพท์</div>
+        </div>
+        <Icon name="lucide:chevron-right" :size="16" />
+      </div>
+      <template v-if="channelList.length">
+        <div
+          v-for="(channel, index) in channelList"
+          :key="`link-${index}`"
+          class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+          @click="openLinkEditField(channel)"
+        >
+          <div class="flex w-full gap-[8px] font-body-large min-w-0">
+            <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
+            <div class="flex-1 w-[396px] truncate">{{ channel.value }}</div>
+          </div>
+          <Icon name="lucide:chevron-right" :size="16" />
+        </div>
+      </template>
+      <div
+        class="flex w-full gap-[8px] py-[6px] px-[8px] items-center hover:cursor-pointer"
+        @click="openField('link')"
+      >
+        <div class="flex w-full gap-[8px] font-body-large">
+          <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
+          <div class="text-cloud">เพิ่มช่องทางติดต่ออื่น</div>
+        </div>
+        <Icon name="lucide:chevron-right" :size="16" />
+      </div>
+    </div>
+
+    <PlaceName
+      v-else-if="activeField === 'place_name'"
+      :current-name="props.item.place_name"
+      :fetch-fn="fetchApprovedPlaces"
+      description-key="description"
+      :existing-localized-names="props.item.localized_names"
+      v-model:edit-type="editType"
+      v-model:new-name="newName"
+      v-model:localized-names="localizedNames"
+      @select="emit('select-suggested-place', $event)"
+    />
+
+    <PlaceAddress
+      v-else-if="activeField === 'address'"
+      :current-address="props.item.address"
+      :fixed-province-id="props.fixedProvinceId"
+      v-model:edit-type="addressEditType"
+      v-model:address-value="addressValue"
+      v-model:lat-lng="addressLatLng"
+    />
+
+    <PlaceCategory
+      v-else-if="activeField === 'category'"
+      :current-categories="categoryText"
+      :options="categoryOptions"
+      v-model:edit-type="categoryEditType"
+      v-model:categories="categories"
+    />
+
+    <PlaceDescription
+      v-else-if="activeField === 'description'"
+      v-model:description-value="descriptionValue"
+    />
+
+    <PlaceDescriptionEdit
+      v-else-if="activeField === 'description_edit'"
+      :current-description="props.item.description"
+      v-model:edit-type="descriptionEditType"
+      v-model:description-value="descriptionValue"
+    />
+
+    <PlaceDateOpening
+      v-else-if="activeField === 'dateopening'"
+      v-model:opening-hours="newOpeningHours"
+      v-model:special-days="newSpecialDays"
+    />
+
+    <PlaceDateOpeningEdit
+      v-else-if="activeField === 'dateopening_edit'"
+      :current-opening-hours="props.item.opening_hours"
+      :current-special-days="props.item.special_days"
+      :current-open-status="props.item.open_status"
+      v-model:edit-type="dateOpeningEditType"
+      v-model:opening-hours="newOpeningHours"
+      v-model:special-days="newSpecialDays"
+    />
+
+    <PlacePhone
+      v-else-if="activeField === 'phone'"
+      v-model:phone-value="phoneValue"
+    />
+
+    <PlacePhoneEdit
+      v-else-if="activeField === 'phone_edit'"
+      :current-phone="editingPhone"
+      v-model:edit-type="phoneEditType"
+      v-model:phone-value="editPhoneValue"
+    />
+
+    <PlaceLink
+      v-else-if="activeField === 'link'"
+      v-model:channels="newContactChannels"
+    />
+
+    <PlaceLinkEdit
+      v-else-if="activeField === 'link_edit'"
+      :current-channel="editingChannel"
+      v-model:edit-type="linkEditType"
+      v-model:channel-value="editChannelValue"
+    />
+
+    <template v-if="activeField !== 'list'" #footer>
+      <Button
+        class="w-full"
+        variant="outline"
+        type="button"
+        @click="cancelEdit"
+      >
+        ยกเลิก
+      </Button>
+      <Button
+        class="w-full"
+        type="submit"
+        color="primary"
+        :disabled="!canSubmit"
+      >
+        ส่ง
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,16 +1,16 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon name="lucide:clock" :size="20" class="text-primary shrink-0" />
-      <div class="font-body-large-prominent">เพิ่มวัน เวลาทำการ</div>
-    </div>
-    <InputDateOpening name="new_opening_hours" v-model="newOpeningHours" />
-    <InputDateOpeningSpecial
-      v-if="isNewOpeningHoursCompleted"
-      name="new_special_days"
-      v-model="newSpecialDays"
-    />
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon name="lucide:clock" :size="20" class="text-primary shrink-0" />
+      <div class="font-body-large-prominent">เพิ่มวัน เวลาทำการ</div>
+    </div>
+    <InputDateOpening name="new_opening_hours" v-model="newOpeningHours" />
+    <InputDateOpeningSpecial
+      v-if="isNewOpeningHoursCompleted"
+      name="new_special_days"
+      v-model="newSpecialDays"
+    />
+  </div>
 </template>
 
 <script setup>