pukaad-ui-lib 1.449.0 → 1.450.0

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

@@ -1,49 +1,49 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon name="lucide:map-pin" :size="20" class="text-primary shrink-0" />
-      <div class="font-body-large-prominent">ที่อยู่</div>
-    </div>
-    <div class="flex flex-col gap-[8px]">
-      <div class="font-body-large-prominent text-gray">ที่อยู่เดิม</div>
-      <div class="font-body-large">{{ props.currentAddress }}</div>
-    </div>
-
-    <InputSelect
-      name="address_edit_type"
-      label="ประเภทการแก้ไข"
-      v-model="editType"
-      placeholder="เลือกประเภทการแก้ไข"
-      :options="editTypeOptions"
-      class="w-full"
-    />
-
-    <template v-if="editType === 'new'">
-      <!-- แผนที่โชว์เลยตั้งแต่แรก วาด polygon ไล่ตามจังหวัด/อำเภอ/ตำบลที่เลือก
-           เหมือน suggest-place-form.vue เป๊ะ ไม่ต้องรอกรอกที่อยู่ครบ (รหัสไปรษณีย์ไม่เกี่ยวกับแผนที่) -->
-      <SuggestPlaceMap
-        class="w-full h-[160px]"
-        :province-id="addressValue.province_id"
-        :amphur-id="addressValue.amphur_id"
-        :tambon-id="addressValue.tambon_id"
-        @update:lat-lng="latLng = $event"
-      />
-      <InputTextField
-        name="address_lat_lng"
-        icon-prepend="lucide:locate-fixed"
-        readonly
-        placeholder="ละติจูด, ลองจิจูด"
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon name="lucide:map-pin" :size="20" class="text-primary shrink-0" />
+      <div class="font-body-large-prominent">ที่อยู่</div>
+    </div>
+    <div class="flex flex-col gap-[8px]">
+      <div class="font-body-large-prominent text-gray">ที่อยู่เดิม</div>
+      <div class="font-body-large">{{ props.currentAddress }}</div>
+    </div>
+
+    <InputSelect
+      name="address_edit_type"
+      label="ประเภทการแก้ไข"
+      v-model="editType"
+      placeholder="เลือกประเภทการแก้ไข"
+      :options="editTypeOptions"
+      class="w-full"
+    />
+
+    <template v-if="editType === 'new'">
+      <!-- แผนที่โชว์เลยตั้งแต่แรก วาด polygon ไล่ตามจังหวัด/อำเภอ/ตำบลที่เลือก
+           เหมือน suggest-place-form.vue เป๊ะ ไม่ต้องรอกรอกที่อยู่ครบ (รหัสไปรษณีย์ไม่เกี่ยวกับแผนที่) -->
+      <SuggestPlaceMap
+        class="w-full h-[160px]"
+        :province-id="addressValue.province_id"
+        :amphur-id="addressValue.amphur_id"
+        :tambon-id="addressValue.tambon_id"
+        @update:lat-lng="latLng = $event"
+      />
+      <InputTextField
+        name="address_lat_lng"
+        icon-prepend="lucide:locate-fixed"
+        readonly
+        placeholder="ละติจูด, ลองจิจูด"
         :model-value="
   latLng ? `${latLng.lat.toFixed(6)}, ${latLng.lng.toFixed(6)}` : ''
-"
-      />
-      <InputAddress
-        name="address_new_value"
-        v-model="addressValue"
-        :fixed-province-id="props.fixedProvinceId"
-      />
-    </template>
-  </div>
+"
+      />
+      <InputAddress
+        name="address_new_value"
+        v-model="addressValue"
+        :fixed-province-id="props.fixedProvinceId"
+      />
+    </template>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,36 +1,36 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon name="lucide:tag" :size="20" class="text-primary shrink-0" />
-      <div class="font-body-large-prominent">หมวดหมู่</div>
-    </div>
-
-    <div class="flex flex-col gap-[8px]">
-      <div class="font-body-large-prominent text-gray">หมวดหมู่เดิม</div>
-      <div class="font-body-large">{{ props.currentCategories }}</div>
-    </div>
-    <InputSelect
-      name="category_edit_type"
-      label="ประเภทการแก้ไข"
-      v-model="editType"
-      placeholder="เลือกประเภทการแก้ไข"
-      :options="editTypeOptions"
-      class="w-full"
-    />
-    <template v-if="editType === 'new'">
-      <InputCombobox
-        name="categories"
-        v-model="categories"
-        label="หมวดหมู่"
-        placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
-        :limit="3"
-        show-counter
-        :options="props.options"
-        required
-        multiple
-      />
-    </template>
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon name="lucide:tag" :size="20" class="text-primary shrink-0" />
+      <div class="font-body-large-prominent">หมวดหมู่</div>
+    </div>
+
+    <div class="flex flex-col gap-[8px]">
+      <div class="font-body-large-prominent text-gray">หมวดหมู่เดิม</div>
+      <div class="font-body-large">{{ props.currentCategories }}</div>
+    </div>
+    <InputSelect
+      name="category_edit_type"
+      label="ประเภทการแก้ไข"
+      v-model="editType"
+      placeholder="เลือกประเภทการแก้ไข"
+      :options="editTypeOptions"
+      class="w-full"
+    />
+    <template v-if="editType === 'new'">
+      <InputCombobox
+        name="categories"
+        v-model="categories"
+        label="หมวดหมู่"
+        placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
+        :limit="3"
+        show-counter
+        :options="props.options"
+        required
+        multiple
+      />
+    </template>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,36 +1,36 @@
 <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>
-    <div class="flex flex-col gap-[8px]">
-      <div class="font-body-large-prominent text-gray">วัน เวลาทำการเดิม</div>
-      <CardOpeningHours
-        :items="props.currentOpeningHours"
-        :special-days="props.currentSpecialDays"
-        :open-status="props.currentOpenStatus"
-      />
-    </div>
-
-    <InputSelect
-      name="dateopening_edit_type"
-      label="ประเภทการแก้ไข"
-      v-model="editType"
-      placeholder="เลือกประเภทการแก้ไข"
-      :options="editTypeOptions"
-      class="w-full"
-    />
-
-    <template v-if="editType === 'new'">
-      <InputDateOpening name="new_opening_hours" v-model="newOpeningHours" />
-      <InputDateOpeningSpecial
-        v-if="isNewOpeningHoursCompleted"
-        name="new_special_days"
-        v-model="newSpecialDays"
-      />
-    </template>
-  </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>
+    <div class="flex flex-col gap-[8px]">
+      <div class="font-body-large-prominent text-gray">วัน เวลาทำการเดิม</div>
+      <CardOpeningHours
+        :items="props.currentOpeningHours"
+        :special-days="props.currentSpecialDays"
+        :open-status="props.currentOpenStatus"
+      />
+    </div>
+
+    <InputSelect
+      name="dateopening_edit_type"
+      label="ประเภทการแก้ไข"
+      v-model="editType"
+      placeholder="เลือกประเภทการแก้ไข"
+      :options="editTypeOptions"
+      class="w-full"
+    />
+
+    <template v-if="editType === 'new'">
+      <InputDateOpening name="new_opening_hours" v-model="newOpeningHours" />
+      <InputDateOpeningSpecial
+        v-if="isNewOpeningHoursCompleted"
+        name="new_special_days"
+        v-model="newSpecialDays"
+      />
+    </template>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,36 +1,36 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon
-        name="lucide:circle-alert"
-        :size="20"
-        class="text-primary shrink-0"
-      />
-      <div class="font-body-large-prominent">คำอธิบาย</div>
-    </div>
-    <div class="flex flex-col gap-[8px]">
-      <div class="font-body-large-prominent text-gray">คำอธิบายเดิม</div>
-      <div class="font-body-large">{{ props.currentDescription }}</div>
-    </div>
-    <InputSelect
-      name="description_edit_type"
-      label="ประเภทการแก้ไข"
-      v-model="editType"
-      placeholder="เลือกประเภทการแก้ไข"
-      :options="editTypeOptions"
-      class="w-full"
-    />
-    <template v-if="editType === 'new'">
-      <InputTextarea
-        name="new_description"
-        v-model="descriptionValue"
-        label="คำอธิบาย"
-        placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
-        :limit="220"
-        show-counter
-      />
-    </template>
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon
+        name="lucide:circle-alert"
+        :size="20"
+        class="text-primary shrink-0"
+      />
+      <div class="font-body-large-prominent">คำอธิบาย</div>
+    </div>
+    <div class="flex flex-col gap-[8px]">
+      <div class="font-body-large-prominent text-gray">คำอธิบายเดิม</div>
+      <div class="font-body-large">{{ props.currentDescription }}</div>
+    </div>
+    <InputSelect
+      name="description_edit_type"
+      label="ประเภทการแก้ไข"
+      v-model="editType"
+      placeholder="เลือกประเภทการแก้ไข"
+      :options="editTypeOptions"
+      class="w-full"
+    />
+    <template v-if="editType === 'new'">
+      <InputTextarea
+        name="new_description"
+        v-model="descriptionValue"
+        label="คำอธิบาย"
+        placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
+        :limit="220"
+        show-counter
+      />
+    </template>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,45 +1,45 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
-      <div class="font-body-large-prominent">ช่องทางติดต่ออื่น</div>
-    </div>
-    <div class="flex flex-col gap-[16px] p-[16px] bg-bright rounded-[8px]">
-      <div class="flex gap-[8px] items-center">
-        <Icon
-          :name="`pukaad-social:${props.currentChannel?.channel_type}`"
-          :size="20"
-        />
-        <div class="font-body-large-prominent">
-          {{ props.currentChannel?.channel_type }}
-        </div>
-      </div>
-      <div class="flex flex-col gap-[8px]">
-        <div class="font-body-large-prominent text-gray">ช่องทางติดต่อเดิม</div>
-        <div class="font-body-large">{{ props.currentChannel?.value }}</div>
-      </div>
-      <InputSelect
-        name="link_edit_type"
-        label="ประเภทการแก้ไข"
-        v-model="editType"
-        placeholder="เลือกประเภทการแก้ไข"
-        :options="editTypeOptions"
-        class="w-full"
-      />
-      <template v-if="editType === 'new'">
-        <InputLink
-          name="new_contact_channel"
-          format="contact_channel"
-          label=""
-          hide-type
-          hide-add-button
-          default-first
-          :default-type="props.currentChannel?.channel_type"
-          v-model="linkItems"
-        />
-      </template>
-    </div>
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon name="lucide:link" :size="20" class="text-primary shrink-0" />
+      <div class="font-body-large-prominent">ช่องทางติดต่ออื่น</div>
+    </div>
+    <div class="flex flex-col gap-[16px] p-[16px] bg-bright rounded-[8px]">
+      <div class="flex gap-[8px] items-center">
+        <Icon
+          :name="`pukaad-social:${props.currentChannel?.channel_type}`"
+          :size="20"
+        />
+        <div class="font-body-large-prominent">
+          {{ props.currentChannel?.channel_type }}
+        </div>
+      </div>
+      <div class="flex flex-col gap-[8px]">
+        <div class="font-body-large-prominent text-gray">ช่องทางติดต่อเดิม</div>
+        <div class="font-body-large">{{ props.currentChannel?.value }}</div>
+      </div>
+      <InputSelect
+        name="link_edit_type"
+        label="ประเภทการแก้ไข"
+        v-model="editType"
+        placeholder="เลือกประเภทการแก้ไข"
+        :options="editTypeOptions"
+        class="w-full"
+      />
+      <template v-if="editType === 'new'">
+        <InputLink
+          name="new_contact_channel"
+          format="contact_channel"
+          label=""
+          hide-type
+          hide-add-button
+          default-first
+          :default-type="props.currentChannel?.channel_type"
+          v-model="linkItems"
+        />
+      </template>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,74 +1,74 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon name="lucide:store" class="text-primary shrink-0" :size="20" />
-      <div class="font-body-large-prominent">ชื่อสถานที่</div>
-    </div>
-    <div class="flex flex-col gap-[8px]">
-      <div class="font-body-large-prominent text-gray">ชื่อเดิม</div>
-      <div class="font-body-large">{{ props.currentName }}</div>
-    </div>
-    <div class="flex flex-col gap-[16px]">
-      <InputSelect
-        name="place_name_edit_type"
-        label="ประเภทการแก้ไข"
-        v-model="editType"
-        placeholder="เลือกประเภทการแก้ไข"
-        :options="editTypeOptions"
-        class="w-full"
-      />
-      <InputSuggest
-        v-if="editType === 'new'"
-        name="place_name_new_value"
-        label="ชื่อใหม่"
-        placeholder="กรอกชื่อสถานที่"
-        required
-        show-counter
-        :limit="180"
-        v-model="newName"
-        :fetch-fn="props.fetchFn"
-        :label-key="props.labelKey"
-        :description-key="props.descriptionKey"
-        @select="emit('select', $event)"
-      />
-    </div>
-
-    <!-- ชื่อภาษาอื่นๆ — โชว์เฉพาะภาษาที่สถานที่นี้มีข้อมูลอยู่แล้วเท่านั้น ไม่มีปุ่มเพิ่มเอง -->
-    <div
-      v-for="(row, index) in localizedRows"
-      :key="row.language"
-      class="flex flex-col p-[16px] gap-[16px] bg-bright rounded-[8px]"
-    >
-      <div class="flex items-center gap-[8px]">
-        <Icon :name="`pukaad-flag:${row.language}`" :size="20" />
-        <div class="font-body-large-prominent">{{ languageLabel(row.language) }}</div>
-      </div>
-      <div class="flex flex-col gap-[8px]">
-        <div class="font-body-large-prominent text-gray">ชื่อเดิม</div>
-        <div class="font-body-large">{{ row.currentName }}</div>
-      </div>
-      <div class="flex flex-col gap-[16px]">
-        <InputSelect
-          :name="`place_name_localized_${index}_edit_type`"
-          label="ประเภทการแก้ไข"
-          v-model="row.editType"
-          placeholder="เลือกประเภทการแก้ไข"
-          :options="editTypeOptions"
-          class="w-full"
-        />
-        <InputTextField
-          v-if="row.editType === 'new'"
-          :name="`place_name_localized_${index}_new_value`"
-          label="ชื่อใหม่"
-          placeholder="กรอกชื่อสถานที่"
-          required
-          show-counter
-          :limit="180"
-          v-model="row.newName"
-        />
-      </div>
-    </div>
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon name="lucide:store" class="text-primary shrink-0" :size="20" />
+      <div class="font-body-large-prominent">ชื่อสถานที่</div>
+    </div>
+    <div class="flex flex-col gap-[8px]">
+      <div class="font-body-large-prominent text-gray">ชื่อเดิม</div>
+      <div class="font-body-large">{{ props.currentName }}</div>
+    </div>
+    <div class="flex flex-col gap-[16px]">
+      <InputSelect
+        name="place_name_edit_type"
+        label="ประเภทการแก้ไข"
+        v-model="editType"
+        placeholder="เลือกประเภทการแก้ไข"
+        :options="editTypeOptions"
+        class="w-full"
+      />
+      <InputSuggest
+        v-if="editType === 'new'"
+        name="place_name_new_value"
+        label="ชื่อใหม่"
+        placeholder="กรอกชื่อสถานที่"
+        required
+        show-counter
+        :limit="180"
+        v-model="newName"
+        :fetch-fn="props.fetchFn"
+        :label-key="props.labelKey"
+        :description-key="props.descriptionKey"
+        @select="emit('select', $event)"
+      />
+    </div>
+
+    <!-- ชื่อภาษาอื่นๆ — โชว์เฉพาะภาษาที่สถานที่นี้มีข้อมูลอยู่แล้วเท่านั้น ไม่มีปุ่มเพิ่มเอง -->
+    <div
+      v-for="(row, index) in localizedRows"
+      :key="row.language"
+      class="flex flex-col p-[16px] gap-[16px] bg-bright rounded-[8px]"
+    >
+      <div class="flex items-center gap-[8px]">
+        <Icon :name="`pukaad-flag:${row.language}`" :size="20" />
+        <div class="font-body-large-prominent">{{ languageLabel(row.language) }}</div>
+      </div>
+      <div class="flex flex-col gap-[8px]">
+        <div class="font-body-large-prominent text-gray">ชื่อเดิม</div>
+        <div class="font-body-large">{{ row.currentName }}</div>
+      </div>
+      <div class="flex flex-col gap-[16px]">
+        <InputSelect
+          :name="`place_name_localized_${index}_edit_type`"
+          label="ประเภทการแก้ไข"
+          v-model="row.editType"
+          placeholder="เลือกประเภทการแก้ไข"
+          :options="editTypeOptions"
+          class="w-full"
+        />
+        <InputTextField
+          v-if="row.editType === 'new'"
+          :name="`place_name_localized_${index}_new_value`"
+          label="ชื่อใหม่"
+          placeholder="กรอกชื่อสถานที่"
+          required
+          show-counter
+          :limit="180"
+          v-model="row.newName"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,30 +1,30 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon name="lucide:phone" :size="20" class="text-primary shrink-0" />
-      <div class="font-body-large-prominent">เบอร์โทรศัพท์</div>
-    </div>
-    <div class="flex flex-col gap-[8px]">
-      <div class="font-body-large-prominent text-gray">เบอร์โทรศัพท์เดิม</div>
-      <div class="font-body-large">{{ props.currentPhone }}</div>
-    </div>
-    <InputSelect
-      name="phone_edit_type"
-      label="ประเภทการแก้ไข"
-      v-model="editType"
-      placeholder="เลือกประเภทการแก้ไข"
-      :options="editTypeOptions"
-      class="w-full"
-    />
-    <template v-if="editType === 'new'">
-      <InputTextField
-        name="new_phone"
-        v-model="phoneValue"
-        label="เบอร์โทรศัพท์ใหม่"
-        placeholder="กรอกเบอร์โทรศัพท์"
-      />
-    </template>
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon name="lucide:phone" :size="20" class="text-primary shrink-0" />
+      <div class="font-body-large-prominent">เบอร์โทรศัพท์</div>
+    </div>
+    <div class="flex flex-col gap-[8px]">
+      <div class="font-body-large-prominent text-gray">เบอร์โทรศัพท์เดิม</div>
+      <div class="font-body-large">{{ props.currentPhone }}</div>
+    </div>
+    <InputSelect
+      name="phone_edit_type"
+      label="ประเภทการแก้ไข"
+      v-model="editType"
+      placeholder="เลือกประเภทการแก้ไข"
+      :options="editTypeOptions"
+      class="w-full"
+    />
+    <template v-if="editType === 'new'">
+      <InputTextField
+        name="new_phone"
+        v-model="phoneValue"
+        label="เบอร์โทรศัพท์ใหม่"
+        placeholder="กรอกเบอร์โทรศัพท์"
+      />
+    </template>
+  </div>
 </template>
 
 <script setup>