pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,161 +1,161 @@
 <template>
-  <Drawer v-model="modelValue" :title="drawerTitle" class="w-[748px]">
-    <div class="flex gap-[16px] w-full">
-      <div class="flex flex-col gap-[16px] w-full min-w-0">
-        <div class="flex flex-col gap-[2px] w-full">
-          <div v-if="hasCoverFile" class="font-body-small-prominent text-gray">
-            หน้าปก
-            <span class="text-destructive">*</span>
-          </div>
-          <!-- v-if ไม่ใช่ v-show — root ของ InputTextarea เป็น ShadFormField (renderless)
-               style จาก v-show เลยตกไปไม่ถึง DOM จริง ซ่อนไม่ได้ -->
-          <InputTextarea
-            v-if="!hasCoverFile"
-            v-model="coverText"
-            name="cover-text"
-            label="หน้าปก"
-            class="w-full"
-            required
-            placeholder="พิมพ์ข้อความหน้าปกหรืออัปโหลดไฟล์มีเดีย"
-            disabledBorder
-            resize="none"
-            :rows="1"
-          />
-          <div
-            v-show="hasCoverFile && coverFileType !== 'video'"
-            class="flex gap-[8px] justify-end items-center"
-          >
-            <Icon
-              name="lucide:list"
-              size="20"
-              :class="fileColumns ? 'text-primary' : 'cursor-pointer text-gray'"
-              @click="fileColumns = true"
-            />
-            <Icon
-              name="lucide:layout-grid"
-              size="20"
+  <Drawer v-model="modelValue" :title="drawerTitle" class="w-[748px]">
+    <div class="flex gap-[16px] w-full">
+      <div class="flex flex-col gap-[16px] w-full min-w-0">
+        <div class="flex flex-col gap-[2px] w-full">
+          <div v-if="hasCoverFile" class="font-body-small-prominent text-gray">
+            หน้าปก
+            <span class="text-destructive">*</span>
+          </div>
+          <!-- v-if ไม่ใช่ v-show — root ของ InputTextarea เป็น ShadFormField (renderless)
+               style จาก v-show เลยตกไปไม่ถึง DOM จริง ซ่อนไม่ได้ -->
+          <InputTextarea
+            v-if="!hasCoverFile"
+            v-model="coverText"
+            name="cover-text"
+            label="หน้าปก"
+            class="w-full"
+            required
+            placeholder="พิมพ์ข้อความหน้าปกหรืออัปโหลดไฟล์มีเดีย"
+            disabledBorder
+            resize="none"
+            :rows="1"
+          />
+          <div
+            v-show="hasCoverFile && coverFileType !== 'video'"
+            class="flex gap-[8px] justify-end items-center"
+          >
+            <Icon
+              name="lucide:list"
+              size="20"
+              :class="fileColumns ? 'text-primary' : 'cursor-pointer text-gray'"
+              @click="fileColumns = true"
+            />
+            <Icon
+              name="lucide:layout-grid"
+              size="20"
               :class="
   !fileColumns ? 'text-primary' : 'cursor-pointer text-gray'
-"
-              @click="fileColumns = false"
-            />
-          </div>
-          <div v-show="!hasCoverText" class="flex gap-[8px] items-center">
-            <!-- วิดีโอมีได้ตัวเดียว — เปิดช่องอัปโหลดภาพหน้าปก (poster) ไว้ข้างหน้าวิดีโอ -->
-            <InputFile
-              v-if="coverFileType === 'video'"
-              v-model="posterFiles"
-              name="cover-poster"
-              accept="image/*"
-              :limit="1"
-              label="หน้าปก"
-            />
-            <InputFile
-              v-model="coverFiles"
-              name="cover-files"
-              :accept="coverAccept"
-              :column="coverFileType !== 'video' && fileColumns"
-              :full-width="!hasCoverFile"
-              :limit="coverFileType === 'video' ? 1 : 9"
-              show-cover
-              class="w-full"
-            >
-              <!-- ส่ง slot เฉพาะตอนยังไม่มีไฟล์ — พอมีไฟล์แล้วปุ่มเพิ่มไฟล์ใช้หน้าตา default ของ InputFile -->
-              <template v-if="!hasCoverFile" #default>
-                <div
-                  class="flex flex-col gap-[8px] justify-center items-center"
-                >
-                  <Icon name="lucide:upload" size="24" class="text-gray" />
-                  <div class="flex flex-col gap-[4px] text-center">
-                    <div class="font-body-medium">เพิ่มรูปภาพ/วีดีโอ</div>
-                    <div class="font-body-small text-gray">หรือลากและวาง</div>
-                  </div>
-                </div>
-              </template>
-            </InputFile>
-          </div>
-          <div
-            v-show="hasCoverText && !hasCoverFile"
-            class="flex gap-[8px] py-[4px] px-[12px]"
-          >
-            <div
-              v-for="color in colors"
-              :key="color.name"
-              class="w-[40px] h-[40px] cursor-pointer transition-all"
+"
+              @click="fileColumns = false"
+            />
+          </div>
+          <div v-show="!hasCoverText" class="flex gap-[8px] items-center">
+            <!-- วิดีโอมีได้ตัวเดียว — เปิดช่องอัปโหลดภาพหน้าปก (poster) ไว้ข้างหน้าวิดีโอ -->
+            <InputFile
+              v-if="coverFileType === 'video'"
+              v-model="posterFiles"
+              name="cover-poster"
+              accept="image/*"
+              :limit="1"
+              label="หน้าปก"
+            />
+            <InputFile
+              v-model="coverFiles"
+              name="cover-files"
+              :accept="coverAccept"
+              :column="coverFileType !== 'video' && fileColumns"
+              :full-width="!hasCoverFile"
+              :limit="coverFileType === 'video' ? 1 : 9"
+              show-cover
+              class="w-full"
+            >
+              <!-- ส่ง slot เฉพาะตอนยังไม่มีไฟล์ — พอมีไฟล์แล้วปุ่มเพิ่มไฟล์ใช้หน้าตา default ของ InputFile -->
+              <template v-if="!hasCoverFile" #default>
+                <div
+                  class="flex flex-col gap-[8px] justify-center items-center"
+                >
+                  <Icon name="lucide:upload" size="24" class="text-gray" />
+                  <div class="flex flex-col gap-[4px] text-center">
+                    <div class="font-body-medium">เพิ่มรูปภาพ/วีดีโอ</div>
+                    <div class="font-body-small text-gray">หรือลากและวาง</div>
+                  </div>
+                </div>
+              </template>
+            </InputFile>
+          </div>
+          <div
+            v-show="hasCoverText && !hasCoverFile"
+            class="flex gap-[8px] py-[4px] px-[12px]"
+          >
+            <div
+              v-for="color in colors"
+              :key="color.name"
+              class="w-[40px] h-[40px] cursor-pointer transition-all"
               :class="
   selectedColor === color.hex ? 'p-[4px] bg-white shadow-xl rounded-[4px]' : ''
-"
-              @click="selectedColor = color.hex"
-            >
-              <div
-                :style="{ backgroundColor: color.hex }"
-                class="w-full h-full"
-              />
-            </div>
-          </div>
-        </div>
-        <Divider height="1" />
-        <InputTextarea
-          v-model="description"
-          name="description"
-          label="คำอธิบาย"
-          class="w-full"
-          placeholder="อยากบอกอะไรเกี่ยวกับโพสต์นี้"
-          disabledBorder
-          resize="none"
-          required
-        />
-        <Divider height="1" />
-        <InputTag
-          v-model="selectedTags"
-          :profile-scope="props.state"
-          label="เพิ่มแท็ก"
-          placeholder="กรอกชื่อแท็ก"
-        />
-
-        <InputMention v-model:mentions="selectedMentions" />
-        <InputSelectPlace
-          v-model:places="selectedPlaces"
-          :profile-scope="props.state"
-          required
-        />
-      </div>
-      <div class="hidden md:flex flex-col gap-[8px] items-center shrink-0">
-        <!-- cursor-default ทับ cursor-pointer ของการ์ด — พรีวิวคลิกไม่มีผล อย่าหลอกว่าเป็นปุ่ม
-             (ห้ามใช้ pointer-events-none เพราะจะบล็อก hover จน hover-play ของวิดีโอไม่ทำงาน) -->
-        <CardContent v-if="previewItem" :item="previewItem" disabled-navigate />
-        <div
-          v-else
-          class="w-[194px] h-[345px] border-[1px] border-mercury rounded-[4px] flex items-center justify-center"
-        >
-          <Icon name="pukaad:memsg-fade" size="100" />
-        </div>
-        <div class="font-body-small text-gray">ตัวอย่างหน้าปก</div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex gap-[8px] items-center justify-end w-full">
-        <Button variant="outline" :disabled="isSubmitting" @click="onClose">
-          ยกเลิก
-        </Button>
-        <Button
-          :loading="isSubmitting"
-          :disabled="isSubmitting || !isFormComplete"
-          @click="onSaveDraft"
-        >
-          บันทึกแบบร่าง
-        </Button>
-        <Button
-          color="primary"
-          :loading="isSubmitting"
-          :disabled="isSubmitting || !isFormComplete"
-          @click="submitContent('PUBLISHED')"
-        >
-          เผยแพร่
-        </Button>
-      </div>
-    </template>
-  </Drawer>
+"
+              @click="selectedColor = color.hex"
+            >
+              <div
+                :style="{ backgroundColor: color.hex }"
+                class="w-full h-full"
+              />
+            </div>
+          </div>
+        </div>
+        <Divider height="1" />
+        <InputTextarea
+          v-model="description"
+          name="description"
+          label="คำอธิบาย"
+          class="w-full"
+          placeholder="อยากบอกอะไรเกี่ยวกับโพสต์นี้"
+          disabledBorder
+          resize="none"
+          required
+        />
+        <Divider height="1" />
+        <InputTag
+          v-model="selectedTags"
+          :profile-scope="props.state"
+          label="เพิ่มแท็ก"
+          placeholder="กรอกชื่อแท็ก"
+        />
+
+        <InputMention v-model:mentions="selectedMentions" />
+        <InputSelectPlace
+          v-model:places="selectedPlaces"
+          :profile-scope="props.state"
+          required
+        />
+      </div>
+      <div class="hidden md:flex flex-col gap-[8px] items-center shrink-0">
+        <!-- cursor-default ทับ cursor-pointer ของการ์ด — พรีวิวคลิกไม่มีผล อย่าหลอกว่าเป็นปุ่ม
+             (ห้ามใช้ pointer-events-none เพราะจะบล็อก hover จน hover-play ของวิดีโอไม่ทำงาน) -->
+        <CardContent v-if="previewItem" :item="previewItem" disabled-navigate />
+        <div
+          v-else
+          class="w-[194px] h-[345px] border-[1px] border-mercury rounded-[4px] flex items-center justify-center"
+        >
+          <Icon name="pukaad:memsg-fade" size="100" />
+        </div>
+        <div class="font-body-small text-gray">ตัวอย่างหน้าปก</div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex gap-[8px] items-center justify-end w-full">
+        <Button variant="outline" :disabled="isSubmitting" @click="onClose">
+          ยกเลิก
+        </Button>
+        <Button
+          :loading="isSubmitting"
+          :disabled="isSubmitting || !isFormComplete"
+          @click="onSaveDraft"
+        >
+          บันทึกแบบร่าง
+        </Button>
+        <Button
+          color="primary"
+          :loading="isSubmitting"
+          :disabled="isSubmitting || !isFormComplete"
+          @click="submitContent('PUBLISHED')"
+        >
+          เผยแพร่
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>

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

@@ -1,81 +1,81 @@
 <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
-        v-if="form.coverImage || form.placeName || form.address"
-        class="flex gap-[16px]"
-      >
-        <div
-          v-if="form.coverImage"
-          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
-        >
-          <Image
-            :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 py-[16px]">
-        <InputRating v-model="form.rating" :size="28" />
-      </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>
-      <div class="flex justify-end gap-[16px] items-center">
-        <Button variant="outline" @click="onClose" :disabled="isSubmitting"
-          >ยกเลิก</Button
-        >
-        <Button
-          type="submit"
-          color="primary"
-          :disabled="form.rating === 0 || isSubmitting"
-          :loading="isSubmitting"
-        >
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Drawer>
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div
+        v-if="form.coverImage || form.placeName || form.address"
+        class="flex gap-[16px]"
+      >
+        <div
+          v-if="form.coverImage"
+          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
+        >
+          <Image
+            :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 py-[16px]">
+        <InputRating v-model="form.rating" :size="28" />
+      </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>
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose" :disabled="isSubmitting"
+          >ยกเลิก</Button
+        >
+        <Button
+          type="submit"
+          color="primary"
+          :disabled="form.rating === 0 || isSubmitting"
+          :loading="isSubmitting"
+        >
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>

package/dist/runtime/components/drawer/drawer-profile-about.vue

@@ -1,56 +1,56 @@
 <template>
-  <Drawer
-    class="w-[748px]"
-    title="ข้อมูลทั่วไป"
-    :loading="loading"
-    @close="onClose"
-    disabled-auto-close
-    @submit="onSubmit"
-    v-model="isDrawerOpen"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <InputTextarea
-        name="description"
-        placeholder="เพิ่มคำอธิบายที่จะช่วยให้ค้นพบและติดตามคุณได้ง่ายขึ้น (สูงสุด 220 ตัวอักษร)"
-        label="คำอธิบาย"
-        show-counter
-        :limit="220"
-        v-model="form.description"
-        class="min-h-[120px]"
-      />
-      <InputTextField
-        name="address"
-        placeholder="บ้านเลขที่, ถนน, เขต/อำเภอ, จังหวัด, รหัสไปรษณีย์"
-        label="ที่อยู่"
-        v-model="form.address"
-      />
-
-      <div class="flex flex-col gap-[8px]">
-        <InputTextField
-          name="phone"
-          placeholder="กรอกเบอร์โทรศัพท์"
-          label="เบอร์โทรศัพท์สำหรับติดต่อ"
-          v-model="form.contact_phone"
-        />
-        <div class="font-body-small text-gray">
-          เบอร์โทรศัพท์นี้จะแสดงในโปรไฟล์ของคุณ และสามารถมองเห็นได้โดยสาธารณะ
-        </div>
-      </div>
-      <InputLink
-        name="links"
-        format="contact_channel"
-        v-model="form.contact_channels"
-      />
-    </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="!meta.valid">
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Drawer>
+  <Drawer
+    class="w-[748px]"
+    title="ข้อมูลทั่วไป"
+    :loading="loading"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isDrawerOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <InputTextarea
+        name="description"
+        placeholder="เพิ่มคำอธิบายที่จะช่วยให้ค้นพบและติดตามคุณได้ง่ายขึ้น (สูงสุด 220 ตัวอักษร)"
+        label="คำอธิบาย"
+        show-counter
+        :limit="220"
+        v-model="form.description"
+        class="min-h-[120px]"
+      />
+      <InputTextField
+        name="address"
+        placeholder="บ้านเลขที่, ถนน, เขต/อำเภอ, จังหวัด, รหัสไปรษณีย์"
+        label="ที่อยู่"
+        v-model="form.address"
+      />
+
+      <div class="flex flex-col gap-[8px]">
+        <InputTextField
+          name="phone"
+          placeholder="กรอกเบอร์โทรศัพท์"
+          label="เบอร์โทรศัพท์สำหรับติดต่อ"
+          v-model="form.contact_phone"
+        />
+        <div class="font-body-small text-gray">
+          เบอร์โทรศัพท์นี้จะแสดงในโปรไฟล์ของคุณ และสามารถมองเห็นได้โดยสาธารณะ
+        </div>
+      </div>
+      <InputLink
+        name="links"
+        format="contact_channel"
+        v-model="form.contact_channels"
+      />
+    </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="!meta.valid">
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>