pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,132 +1,132 @@
 <template>
-  <Drawer
-    class="w-[888px]"
-    :title="drawerTitle"
-    :loading="loading"
-    v-model="isOpen"
-  >
-    <!-- backoffice / business: แสดงแบบมี tabs (Figma 2778-244494) -->
-    <ShadTabs
-      v-if="props.state === 'backoffice' || props.state === 'business'"
-      default-value="business-info"
-    >
-      <ShadTabsList>
-        <ShadTabsTrigger value="business-info">ข้อมูลธุรกิจ</ShadTabsTrigger>
-        <ShadTabsTrigger value="image">รูปภาพ</ShadTabsTrigger>
-        <ShadTabsTrigger value="video">วิดีโอ</ShadTabsTrigger>
-      </ShadTabsList>
-      <ShadTabsContent value="business-info">
-        <SuggestPlaceForm
-          ref="formRef"
-          v-model="formData"
-          :state="props.state"
-          :fixed-province-id="fixedProvinceId"
-          :edit-id="props.editId"
-        />
-      </ShadTabsContent>
-      <ShadTabsContent value="image">
-        <div class="flex flex-col gap-[16px] w-full">
-          <div class="flex justify-between items-center">
-            <div class="flex flex-col gap-[4px]">
-              <div class="font-body-large-prominent">รูปภาพ</div>
-              <div class="font-label-serif-medium text-gray">
-                รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน
-                30 mb
-              </div>
-            </div>
-            <div class="flex gap-[8px]">
-              <Icon
-                name="lucide:list"
-                size="20"
+  <Drawer
+    class="w-[888px]"
+    :title="drawerTitle"
+    :loading="loading"
+    v-model="isOpen"
+  >
+    <!-- backoffice / business: แสดงแบบมี tabs (Figma 2778-244494) -->
+    <ShadTabs
+      v-if="props.state === 'backoffice' || props.state === 'business'"
+      default-value="business-info"
+    >
+      <ShadTabsList>
+        <ShadTabsTrigger value="business-info">ข้อมูลธุรกิจ</ShadTabsTrigger>
+        <ShadTabsTrigger value="image">รูปภาพ</ShadTabsTrigger>
+        <ShadTabsTrigger value="video">วิดีโอ</ShadTabsTrigger>
+      </ShadTabsList>
+      <ShadTabsContent value="business-info">
+        <SuggestPlaceForm
+          ref="formRef"
+          v-model="formData"
+          :state="props.state"
+          :fixed-province-id="fixedProvinceId"
+          :edit-id="props.editId"
+        />
+      </ShadTabsContent>
+      <ShadTabsContent value="image">
+        <div class="flex flex-col gap-[16px] w-full">
+          <div class="flex justify-between items-center">
+            <div class="flex flex-col gap-[4px]">
+              <div class="font-body-large-prominent">รูปภาพ</div>
+              <div class="font-label-serif-medium text-gray">
+                รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif ขนาดไฟล์ไม่เกิน
+                30 mb
+              </div>
+            </div>
+            <div class="flex gap-[8px]">
+              <Icon
+                name="lucide:list"
+                size="20"
                 :class="
   photoColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-                @click="photoColumns = true"
-              />
-              <Icon
-                name="lucide:layout-grid"
-                size="20"
+"
+                @click="photoColumns = true"
+              />
+              <Icon
+                name="lucide:layout-grid"
+                size="20"
                 :class="
   !photoColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-                @click="photoColumns = false"
-              />
-            </div>
-          </div>
-          <InputFile
-            accept="image/*"
-            :column="photoColumns"
-            show-cover
-            :model-value="formData.photos"
+"
+                @click="photoColumns = false"
+              />
+            </div>
+          </div>
+          <InputFile
+            accept="image/*"
+            :column="photoColumns"
+            show-cover
+            :model-value="formData.photos"
             @update:model-value="
   (val) => {
     formData = { ...formData, photos: val };
   }
-"
-          />
-        </div>
-      </ShadTabsContent>
-      <ShadTabsContent value="video">
-        <div class="flex flex-col gap-[16px] w-full">
-          <div class="flex justify-between items-center">
-            <div class="flex flex-col gap-[4px]">
-              <div class="font-body-large-prominent">วิดีโอ</div>
-              <div class="font-label-serif-medium text-gray">
-                รองรับไฟล์ *.mp4 *.mov ขนาดไฟล์ไม่เกิน 25 Mb หรือ 10-60 วินาที
-              </div>
-            </div>
-            <div class="flex gap-[8px]">
-              <Icon
-                name="lucide:list"
-                size="20"
+"
+          />
+        </div>
+      </ShadTabsContent>
+      <ShadTabsContent value="video">
+        <div class="flex flex-col gap-[16px] w-full">
+          <div class="flex justify-between items-center">
+            <div class="flex flex-col gap-[4px]">
+              <div class="font-body-large-prominent">วิดีโอ</div>
+              <div class="font-label-serif-medium text-gray">
+                รองรับไฟล์ *.mp4 *.mov ขนาดไฟล์ไม่เกิน 25 Mb หรือ 10-60 วินาที
+              </div>
+            </div>
+            <div class="flex gap-[8px]">
+              <Icon
+                name="lucide:list"
+                size="20"
                 :class="
   videoColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-                @click="videoColumns = true"
-              />
-              <Icon
-                name="lucide:layout-grid"
-                size="20"
+"
+                @click="videoColumns = true"
+              />
+              <Icon
+                name="lucide:layout-grid"
+                size="20"
                 :class="
   !videoColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-                @click="videoColumns = false"
-              />
-            </div>
-          </div>
-          <InputFile
-            accept="video/*"
-            :column="videoColumns"
-            :model-value="formData.videos"
+"
+                @click="videoColumns = false"
+              />
+            </div>
+          </div>
+          <InputFile
+            accept="video/*"
+            :column="videoColumns"
+            :model-value="formData.videos"
             @update:model-value="
   (val) => {
     formData = { ...formData, videos: val };
   }
-"
-          />
-        </div>
-      </ShadTabsContent>
-    </ShadTabs>
-
-    <!-- personal: แสดงตรงๆ ไม่มี tabs -->
-    <div v-else>
-      <SuggestPlaceForm
-        ref="formRef"
-        v-model="formData"
-        :state="props.state"
-        :fixed-province-id="fixedProvinceId"
-        :edit-id="props.editId"
-      />
-    </div>
-    <template #footer>
-      <div class="flex gap-[8px] justify-end">
-        <Button variant="outline" @click="isOpen = false">ยกเลิก</Button>
-        <Button color="primary" :disabled="!isFormValid" @click="onSubmit">{{
-          props.state === "personal" ? "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" : "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E30\u0E40\u0E1C\u0E22\u0E41\u0E1E\u0E23\u0E48"
-        }}</Button>
-      </div>
-    </template>
-  </Drawer>
+"
+          />
+        </div>
+      </ShadTabsContent>
+    </ShadTabs>
+
+    <!-- personal: แสดงตรงๆ ไม่มี tabs -->
+    <div v-else>
+      <SuggestPlaceForm
+        ref="formRef"
+        v-model="formData"
+        :state="props.state"
+        :fixed-province-id="fixedProvinceId"
+        :edit-id="props.editId"
+      />
+    </div>
+    <template #footer>
+      <div class="flex gap-[8px] justify-end">
+        <Button variant="outline" @click="isOpen = false">ยกเลิก</Button>
+        <Button color="primary" :disabled="!isFormValid" @click="onSubmit">{{
+          props.state === "personal" ? "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" : "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E30\u0E40\u0E1C\u0E22\u0E41\u0E1E\u0E23\u0E48"
+        }}</Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>

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

@@ -1,156 +1,156 @@
 <template>
-  <div class="flex gap-[16px] w-full">
-    <!-- กรอกข้อมูล -->
-    <div class="flex flex-col gap-[16px] w-[490px]">
-      <InputAddress
-        name="address"
-        v-model="modelValue.address"
-        :fixed-province-id="props.fixedProvinceId"
-      />
-      <template v-if="isAddressCompleted">
-        <div class="font-body-large-prominent">รายละเอียด</div>
-        <div class="flex flex-col gap-[4px]">
-          <InputSuggest
-            name="businessName"
-            v-model="modelValue.businessName"
-            label="ชื่อสถานที่ธุรกิจ"
-            placeholder="กรอกชื่อสถานที่"
-            required
-            show-counter
-            :limit="180"
-            :fetch-fn="fetchApprovedPlaces"
-            value-key="business_name"
-            label-key="business_name"
-            @select="onSelectSuggestedPlace"
-          />
-          <InputLocalizedName
-            name="localizedNames"
-            v-model="modelValue.localizedNames"
-          />
-        </div>
-        <InputCombobox
-          name="categories"
-          v-model="modelValue.categories"
-          label="หมวดหมู่"
-          placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
-          :limit="3"
-          show-counter
-          :options="categoryOptions"
-          required
-          multiple
-        />
-        <InputTextarea
-          name="description"
-          v-model="modelValue.description"
-          label="คำอธิบาย"
-          placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
-          :limit="220"
-          show-counter
-        />
-        <InputDateOpening
-          name="openingHours"
-          v-model="modelValue.openingHours"
-        />
-        <InputDateOpeningSpecial
-          v-if="props.state === 'business' && isOpeningHoursCompleted"
-          name="specialDays"
-          v-model="modelValue.specialDays"
-        />
-        <div class="flex flex-col gap-[8px]">
-          <InputTextField
-            name="phone"
-            v-model="modelValue.phone"
-            label="เบอร์โทรศัพท์"
-            placeholder="กรอกเบอร์โทรศัพท์"
-          />
-          <InputTextField
-            v-for="(_, index) in modelValue.extraPhones"
-            :key="index"
-            :name="`extraPhone-${index}`"
-            label="เบอร์โทรศัพท์"
-            placeholder="กรอกเบอร์โทรศัพท์"
-            v-model="modelValue.extraPhones[index]"
-          />
-          <Button
-            variant="text"
-            color="primary"
-            class="w-[145px]"
-            @click="modelValue.extraPhones.push('')"
-          >
-            <Icon name="lucide:plus" />
-            เพิ่มเบอร์โทรศัพท์
-          </Button>
-          <InputLink
-            ref="contactChannelsRef"
-            name="contactChannels"
-            format="contact_channel"
-            default-first
-            v-model="modelValue.contactChannels"
-          />
-        </div>
-        <template v-if="props.state === 'personal'">
-          <div class="flex flex-col gap-[16px]">
-            <InputCheckbox
-              name="isReview"
-              v-model="modelValue.isReview"
-              label="คุณต้องการรีวิวสถานที่นี้"
-            />
-            <template v-if="modelValue.isReview">
-              <InputRating
-                name="rating"
-                v-model="modelValue.rating"
-                class="flex py-4 justify-center"
-              />
-              <InputTextarea
-                name="reviewDescription"
-                v-model="modelValue.reviewDescription"
-                label="คำอธิบาย"
-                placeholder="คำอธิบายเกี่ยวกับสถานที่"
-                show-counter
-              />
-              <div class="flex flex-col gap-[8px]">
-                <div class="flex flex-col gap-[4px]">
-                  <div class="font-body-large-prominent text-gray">
-                    เพิ่มภาพถ่าย
-                  </div>
-                  <div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
-                </div>
-                <InputFile
-                  name="reviewPhotos"
-                  v-model="modelValue.reviewPhotos"
-                  accept="image/*"
-                  :limit="9"
-                />
-                <div class="font-body-small text-gray w-[250px]">
-                  รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif
-                  ขนาดไฟล์ไม่เกิน 30 mb
-                </div>
-              </div>
-            </template>
-          </div>
-        </template>
-      </template>
-    </div>
-
-    <!-- แสดง polygon -->
-    <div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
-      <SuggestPlaceMap
-        :province-id="modelValue.address?.province_id"
-        :amphur-id="modelValue.address?.amphur_id"
-        :tambon-id="modelValue.address?.tambon_id"
-        @update:lat-lng="modelValue.latLng = $event"
-      />
-      <InputTextField
-        name="latitude-longitude"
-        icon-prepend="lucide:locate-fixed"
-        readonly
-        placeholder="ละติจูด, ลองจิจูด"
+  <div class="flex gap-[16px] w-full">
+    <!-- กรอกข้อมูล -->
+    <div class="flex flex-col gap-[16px] w-[490px]">
+      <InputAddress
+        name="address"
+        v-model="modelValue.address"
+        :fixed-province-id="props.fixedProvinceId"
+      />
+      <template v-if="isAddressCompleted">
+        <div class="font-body-large-prominent">รายละเอียด</div>
+        <div class="flex flex-col gap-[4px]">
+          <InputSuggest
+            name="businessName"
+            v-model="modelValue.businessName"
+            label="ชื่อสถานที่ธุรกิจ"
+            placeholder="กรอกชื่อสถานที่"
+            required
+            show-counter
+            :limit="180"
+            :fetch-fn="fetchApprovedPlaces"
+            value-key="business_name"
+            label-key="business_name"
+            @select="onSelectSuggestedPlace"
+          />
+          <InputLocalizedName
+            name="localizedNames"
+            v-model="modelValue.localizedNames"
+          />
+        </div>
+        <InputCombobox
+          name="categories"
+          v-model="modelValue.categories"
+          label="หมวดหมู่"
+          placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
+          :limit="3"
+          show-counter
+          :options="categoryOptions"
+          required
+          multiple
+        />
+        <InputTextarea
+          name="description"
+          v-model="modelValue.description"
+          label="คำอธิบาย"
+          placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
+          :limit="220"
+          show-counter
+        />
+        <InputDateOpening
+          name="openingHours"
+          v-model="modelValue.openingHours"
+        />
+        <InputDateOpeningSpecial
+          v-if="props.state === 'business' && isOpeningHoursCompleted"
+          name="specialDays"
+          v-model="modelValue.specialDays"
+        />
+        <div class="flex flex-col gap-[8px]">
+          <InputTextField
+            name="phone"
+            v-model="modelValue.phone"
+            label="เบอร์โทรศัพท์"
+            placeholder="กรอกเบอร์โทรศัพท์"
+          />
+          <InputTextField
+            v-for="(_, index) in modelValue.extraPhones"
+            :key="index"
+            :name="`extraPhone-${index}`"
+            label="เบอร์โทรศัพท์"
+            placeholder="กรอกเบอร์โทรศัพท์"
+            v-model="modelValue.extraPhones[index]"
+          />
+          <Button
+            variant="text"
+            color="primary"
+            class="w-[145px]"
+            @click="modelValue.extraPhones.push('')"
+          >
+            <Icon name="lucide:plus" />
+            เพิ่มเบอร์โทรศัพท์
+          </Button>
+          <InputLink
+            ref="contactChannelsRef"
+            name="contactChannels"
+            format="contact_channel"
+            default-first
+            v-model="modelValue.contactChannels"
+          />
+        </div>
+        <template v-if="props.state === 'personal'">
+          <div class="flex flex-col gap-[16px]">
+            <InputCheckbox
+              name="isReview"
+              v-model="modelValue.isReview"
+              label="คุณต้องการรีวิวสถานที่นี้"
+            />
+            <template v-if="modelValue.isReview">
+              <InputRating
+                name="rating"
+                v-model="modelValue.rating"
+                class="flex py-4 justify-center"
+              />
+              <InputTextarea
+                name="reviewDescription"
+                v-model="modelValue.reviewDescription"
+                label="คำอธิบาย"
+                placeholder="คำอธิบายเกี่ยวกับสถานที่"
+                show-counter
+              />
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex flex-col gap-[4px]">
+                  <div class="font-body-large-prominent text-gray">
+                    เพิ่มภาพถ่าย
+                  </div>
+                  <div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
+                </div>
+                <InputFile
+                  name="reviewPhotos"
+                  v-model="modelValue.reviewPhotos"
+                  accept="image/*"
+                  :limit="9"
+                />
+                <div class="font-body-small text-gray w-[250px]">
+                  รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif
+                  ขนาดไฟล์ไม่เกิน 30 mb
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <!-- แสดง polygon -->
+    <div class="flex flex-col gap-[16px] w-[334px] sticky top-0 self-start">
+      <SuggestPlaceMap
+        :province-id="modelValue.address?.province_id"
+        :amphur-id="modelValue.address?.amphur_id"
+        :tambon-id="modelValue.address?.tambon_id"
+        @update:lat-lng="modelValue.latLng = $event"
+      />
+      <InputTextField
+        name="latitude-longitude"
+        icon-prepend="lucide:locate-fixed"
+        readonly
+        placeholder="ละติจูด, ลองจิจูด"
         :model-value="
   modelValue.latLng ? `${modelValue.latLng.lat.toFixed(6)}, ${modelValue.latLng.lng.toFixed(6)}` : ''
-"
-      />
-    </div>
-  </div>
+"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,7 +1,7 @@
 <template>
-  <div :class="rootClass">
-    <div ref="mapContainer" class="w-full h-full z-0"></div>
-  </div>
+  <div :class="rootClass">
+    <div ref="mapContainer" class="w-full h-full z-0"></div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/drawer/drawer.vue

@@ -1,28 +1,28 @@
 <template>
-  <ShadSheet v-model:open="isOpen">
-    <ShadSheetContent
-      v-bind="props"
-      v-slot="{ meta }"
-      @submit="onSubmit"
-      @close="onClose"
-    >
-      <Loading :loading="props.loading" :text="props.loadingText" />
-      <ShadSheetHeader class="flex-shrink-0">
-        <slot name="header">
-          <ShadSheetTitle>{{ props.title }}</ShadSheetTitle>
-          <ShadSheetDescription>
-            {{ props.description }}
-          </ShadSheetDescription>
-        </slot>
-      </ShadSheetHeader>
-      <div class="flex-1 overflow-y-auto px-[24px]">
-        <slot name="default" :meta="meta" />
-      </div>
-      <ShadSheetFooter class="flex-shrink-0">
-        <slot name="footer" :meta="meta" />
-      </ShadSheetFooter>
-    </ShadSheetContent>
-  </ShadSheet>
+  <ShadSheet v-model:open="isOpen">
+    <ShadSheetContent
+      v-bind="props"
+      v-slot="{ meta }"
+      @submit="onSubmit"
+      @close="onClose"
+    >
+      <Loading :loading="props.loading" :text="props.loadingText" />
+      <ShadSheetHeader class="flex-shrink-0">
+        <slot name="header">
+          <ShadSheetTitle>{{ props.title }}</ShadSheetTitle>
+          <ShadSheetDescription>
+            {{ props.description }}
+          </ShadSheetDescription>
+        </slot>
+      </ShadSheetHeader>
+      <div class="flex-1 overflow-y-auto px-[24px]">
+        <slot name="default" :meta="meta" />
+      </div>
+      <ShadSheetFooter class="flex-shrink-0">
+        <slot name="footer" :meta="meta" />
+      </ShadSheetFooter>
+    </ShadSheetContent>
+  </ShadSheet>
 </template>
 
 <script setup>

package/dist/runtime/components/dropdown.vue

@@ -1,12 +1,12 @@
 <template>
-  <ShadDropdownMenu>
-    <ShadDropdownMenuTrigger>
-      <slot />
-    </ShadDropdownMenuTrigger>
-    <ShadDropdownMenuContent class="w-56" align="bottom">
-      asd
-    </ShadDropdownMenuContent>
-  </ShadDropdownMenu>
+  <ShadDropdownMenu>
+    <ShadDropdownMenuTrigger>
+      <slot />
+    </ShadDropdownMenuTrigger>
+    <ShadDropdownMenuContent class="w-56" align="bottom">
+      asd
+    </ShadDropdownMenuContent>
+  </ShadDropdownMenu>
 </template>
 
 <script setup>