pukaad-ui-lib 1.1.0 → 1.2.0

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

@@ -1,84 +1,84 @@
 <template>
-  <Drawer class="w-[748px]" title="เพิ่มบล็อก" v-model="isOpen">
-    <div class="flex flex-col gap-4">
-      <InputTextField
-        label="หัวข้อ"
-        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
-        showCounter
-        disabled-border
-        :limit="180"
-        required
-      />
-      <InputContent placeholder="อยากเล่าอะไร" />
-
-      <InputCheckbox label="ไม่อนุญาตให้แสดงความคิดเห็น" />
-      <!-- <div class="flex flex-col gap-[8px]">
-        <div class="text-gray font-body-large">ภาพหน้าปก</div>
-        <InputFile
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          :limit="1"
-        />
-        <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>
-  </Drawer>
-  <!-- <Drawer
-    :width="788"
-    title="เล่าเรื่องราวของคุณ"
-    v-model="isOpen"
-    @submit="onSubmit"
-  >
-    <Card full-width>
-      <div class="flex flex-col gap-[16px]">
-        <InputTextField
-          placeholder="ตั้งชื่อบทความให้น่าสนใจ"
-          label="หัวข้อ"
-          fullWidth
-          showCounter
-          disabled-border
-          :limit="180"
-          required
-          v-model="state.title"
-        />
-        <InputContent
-          placeholder="อยากเล่าอะไร"
-          class="h-[140px]"
-          v-model="state.content"
-        />
-        <InputTag v-model="state.tag" />
-        <InputCheckbox
-          label="ไม่อนุญาตให้แสดงความคิดเห็น"
-          :label-gap="10"
-          v-model="state.disabled_comment"
-        />
-        <div class="flex flex-col gap-[8px]">
-          <div class="text-gray font-body-large">ภาพหน้าปก</div>
-          <InputFile
-            accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-            :limit="1"
-            v-model="state.file"
-          />
-          <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>
-    </Card>
-
-    <template #footer="{ meta }">
-      <div class="flex justify-end items-center gap-[16px]">
-        <Button variant="text" color="black" @click="onClose"> ยกเลิก </Button>
-        <Button variant="solid" @click="onSave"> บันทึกแบบร่าง </Button>
-        <Button type="submit" color="primary" :disabled="!meta.valid">
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Drawer> -->
+  <Drawer class="w-[748px]" title="เพิ่มบล็อก" v-model="isOpen">
+    <div class="flex flex-col gap-4">
+      <InputTextField
+        label="หัวข้อ"
+        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
+        showCounter
+        disabled-border
+        :limit="180"
+        required
+      />
+      <InputContent placeholder="อยากเล่าอะไร" />
+
+      <InputCheckbox label="ไม่อนุญาตให้แสดงความคิดเห็น" />
+      <!-- <div class="flex flex-col gap-[8px]">
+        <div class="text-gray font-body-large">ภาพหน้าปก</div>
+        <InputFile
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          :limit="1"
+        />
+        <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>
+  </Drawer>
+  <!-- <Drawer
+    :width="788"
+    title="เล่าเรื่องราวของคุณ"
+    v-model="isOpen"
+    @submit="onSubmit"
+  >
+    <Card full-width>
+      <div class="flex flex-col gap-[16px]">
+        <InputTextField
+          placeholder="ตั้งชื่อบทความให้น่าสนใจ"
+          label="หัวข้อ"
+          fullWidth
+          showCounter
+          disabled-border
+          :limit="180"
+          required
+          v-model="state.title"
+        />
+        <InputContent
+          placeholder="อยากเล่าอะไร"
+          class="h-[140px]"
+          v-model="state.content"
+        />
+        <InputTag v-model="state.tag" />
+        <InputCheckbox
+          label="ไม่อนุญาตให้แสดงความคิดเห็น"
+          :label-gap="10"
+          v-model="state.disabled_comment"
+        />
+        <div class="flex flex-col gap-[8px]">
+          <div class="text-gray font-body-large">ภาพหน้าปก</div>
+          <InputFile
+            accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+            :limit="1"
+            v-model="state.file"
+          />
+          <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>
+    </Card>
+
+    <template #footer="{ meta }">
+      <div class="flex justify-end items-center gap-[16px]">
+        <Button variant="text" color="black" @click="onClose"> ยกเลิก </Button>
+        <Button variant="solid" @click="onSave"> บันทึกแบบร่าง </Button>
+        <Button type="submit" color="primary" :disabled="!meta.valid">
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer> -->
 </template>
 
 <script setup>

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

@@ -1,42 +1,42 @@
 <template>
-  <!-- <Drawer
-    width="788"
-    title="เกี่ยวกับ"
-    @close="onClose"
-    @submit="onSubmit"
-    v-model="isDrawerOpen"
-  >
-    <Card full-width>
-      <div class="flex flex-col gap-[16px]">
-        <InputTextarea
-          name="description"
-          placeholder="เพิ่มคำอธิบายที่จะช่วยให้ค้นพบและติดตามคุณได้ง่ายขึ้น (สูงสุด 220 ตัวอักษร)"
-          label="คำอธิบาย"
-          full-width
-          show-counter
-          :max-length="220"
-          resize="none"
-          v-model="formState.description"
-        />
-
-        <InputTextField
-          name="phone"
-          placeholder="กรอกเบอร์โทรศัพท์"
-          label="เบอร์โทรศัพท์สำหรับติดต่อ"
-          full-width
-          hint="เบอร์โทรศัพท์นี้จะแสดงในโปรไฟล์ของคุณ และสามารถมองเห็นได้โดยสาธารณะ"
-          v-model="formState.phone"
-        />
-        <InputLink name="links" v-model="formState.links" />
-      </div>
-    </Card>
-    <template #footer>
-      <div class="flex justify-end gap-[16px] items-center">
-        <Button type="outline" @click="onClose"> ยกเลิก </Button>
-        <Button button-type="submit" variant="primary"> ยืนยัน </Button>
-      </div>
-    </template>
-  </Drawer> -->
+  <!-- <Drawer
+    width="788"
+    title="เกี่ยวกับ"
+    @close="onClose"
+    @submit="onSubmit"
+    v-model="isDrawerOpen"
+  >
+    <Card full-width>
+      <div class="flex flex-col gap-[16px]">
+        <InputTextarea
+          name="description"
+          placeholder="เพิ่มคำอธิบายที่จะช่วยให้ค้นพบและติดตามคุณได้ง่ายขึ้น (สูงสุด 220 ตัวอักษร)"
+          label="คำอธิบาย"
+          full-width
+          show-counter
+          :max-length="220"
+          resize="none"
+          v-model="formState.description"
+        />
+
+        <InputTextField
+          name="phone"
+          placeholder="กรอกเบอร์โทรศัพท์"
+          label="เบอร์โทรศัพท์สำหรับติดต่อ"
+          full-width
+          hint="เบอร์โทรศัพท์นี้จะแสดงในโปรไฟล์ของคุณ และสามารถมองเห็นได้โดยสาธารณะ"
+          v-model="formState.phone"
+        />
+        <InputLink name="links" v-model="formState.links" />
+      </div>
+    </Card>
+    <template #footer>
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button type="outline" @click="onClose"> ยกเลิก </Button>
+        <Button button-type="submit" variant="primary"> ยืนยัน </Button>
+      </div>
+    </template>
+  </Drawer> -->
 </template>
 
 <script setup>

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

@@ -1,20 +1,20 @@
 <template>
-  <ShadSheet v-model:open="isOpen">
-    <ShadSheetContent v-bind="props" v-slot="{ meta }" @submit="onSubmit">
-      <ShadSheetHeader>
-        <slot name="header">
-          <ShadSheetTitle>{{ props.title }}</ShadSheetTitle>
-          <ShadSheetDescription>
-            {{ props.description }}
-          </ShadSheetDescription>
-        </slot>
-      </ShadSheetHeader>
-      <slot name="default" :meta="meta" />
-      <ShadSheetFooter v-if="$slots.footer">
-        <slot name="footer" :meta="meta" />
-      </ShadSheetFooter>
-    </ShadSheetContent>
-  </ShadSheet>
+  <ShadSheet v-model:open="isOpen">
+    <ShadSheetContent v-bind="props" v-slot="{ meta }" @submit="onSubmit">
+      <ShadSheetHeader>
+        <slot name="header">
+          <ShadSheetTitle>{{ props.title }}</ShadSheetTitle>
+          <ShadSheetDescription>
+            {{ props.description }}
+          </ShadSheetDescription>
+        </slot>
+      </ShadSheetHeader>
+      <slot name="default" :meta="meta" />
+      <ShadSheetFooter v-if="$slots.footer">
+        <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>

package/dist/runtime/components/filter/filter-list-chip.vue

@@ -1,19 +1,19 @@
 <template>
-  <div v-if="hasSelectedChips" class="flex gap-[8px] flex-wrap">
-    <Chip
-      v-for="(chip, index) in selectedChips"
-      :key="index"
-      color="primary"
-      closable
-      @closable="onClosable(chip)"
-    >
-      {{ chip.label }}
-    </Chip>
-
-    <Button variant="text" color="primary" padding="8" @click="clearAll">
-      ล้างตัวกรอง
-    </Button>
-  </div>
+  <div v-if="hasSelectedChips" class="flex gap-[8px] flex-wrap">
+    <Chip
+      v-for="(chip, index) in selectedChips"
+      :key="index"
+      color="primary"
+      closable
+      @closable="onClosable(chip)"
+    >
+      {{ chip.label }}
+    </Chip>
+
+    <Button variant="text" color="primary" padding="8" @click="clearAll">
+      ล้างตัวกรอง
+    </Button>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/filter/filter-list.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col gap-[8px]">
-    <div class="text-gray font-body-large-prominent">
-      {{ props.label }}
-    </div>
-
-    <InputCheckbox
-      v-for="(item, index) in modelValue"
-      :key="index"
-      :label="item.label"
-      label-position="left"
-      :disabled="item.disabled"
-      labelGap="auto"
-      v-model="item.checked"
-    />
-
-    <Button type="text" variant="primary"> แสดงเพิ่มเติม </Button>
-  </div>
+  <div class="flex flex-col gap-[8px]">
+    <div class="text-gray font-body-large-prominent">
+      {{ props.label }}
+    </div>
+
+    <InputCheckbox
+      v-for="(item, index) in modelValue"
+      :key="index"
+      :label="item.label"
+      label-position="left"
+      :disabled="item.disabled"
+      labelGap="auto"
+      v-model="item.checked"
+    />
+
+    <Button type="text" variant="primary"> แสดงเพิ่มเติม </Button>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/icons.vue

@@ -1,5 +1,5 @@
 <template>
-  <Icon :name="props.name" :size="props.size" :color="props.color" />
+  <Icon :name="props.name" :size="props.size" :color="props.color" />
 </template>
 
 <script setup>

package/dist/runtime/components/image/image-cropper.vue

@@ -1,13 +1,13 @@
 <template>
-  <div :style="containerStyle">
-    <img
-      ref="imgRef"
-      :src="src"
-      :alt="alt || 'image'"
-      :style="[{ 'max-width': '100%' }, imgStyle]"
-      :crossorigin="crossorigin"
-    />
-  </div>
+  <div :style="containerStyle">
+    <img
+      ref="imgRef"
+      :src="src"
+      :alt="alt || 'image'"
+      :style="[{ 'max-width': '100%' }, imgStyle]"
+      :crossorigin="crossorigin"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/image/image.vue

@@ -1,47 +1,47 @@
 <template>
-  <NuxtImg
-    :class="props.class"
-    :src="props.src"
-    :alt="props.alt"
-    :custom="true"
+  <NuxtImg
+    :class="props.class"
+    :src="props.src"
+    :alt="props.alt"
+    :custom="true"
     :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
   height: props.height == 'auto' ? '100%' : `${props.height}px`,
   objectFit: props.fit
-}"
-    loading="lazy"
-    v-slot="{ src, isLoaded, imgAttrs }"
-  >
-    <div
-      v-if="isLoaded || src"
+}"
+    loading="lazy"
+    v-slot="{ src, isLoaded, imgAttrs }"
+  >
+    <div
+      v-if="isLoaded || src"
       :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
   height: props.height == 'auto' ? '100%' : `${props.height}px`
-}"
-    >
-      <img
-        v-bind="imgAttrs"
-        :src="src"
-        :alt="props.alt"
+}"
+    >
+      <img
+        v-bind="imgAttrs"
+        :src="src"
+        :alt="props.alt"
         :style="{
   width: '100%',
   height: '100%',
   objectFit: props.fit
-}"
-      />
-    </div>
-    <div
-      v-else
-      ref="refLazy"
-      :class="['flex justify-center items-center bg-fade', props.class]"
+}"
+      />
+    </div>
+    <div
+      v-else
+      ref="refLazy"
+      :class="['flex justify-center items-center bg-fade', props.class]"
       :style="{
   width: props.width == 'auto' ? '100%' : `${props.width}px`,
   height: props.height == 'auto' ? '100%' : `${props.height}px`
-}"
-    ></div>
-
-  
-  </NuxtImg>
+}"
+    ></div>
+
+  
+  </NuxtImg>
 </template>
 
 <script setup>

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

@@ -1,20 +1,20 @@
 <template>
-  <ShadFormField :rules="defaultRules" :name="props.name" v-model="modelValue">
-    <ShadFormItem>
-      <ShadPinInput
-        :id="props.id || props.name"
-        :disabled="props.disabled"
-        @complete="handleComplete"
-        v-model="pin"
-      >
-        <ShadPinInputGroup>
-          <ShadFormControl v-for="(n, i) in props.digit" :key="n" :index="i">
-            <ShadPinInputSlot />
-          </ShadFormControl>
-        </ShadPinInputGroup>
-      </ShadPinInput>
-    </ShadFormItem>
-  </ShadFormField>
+  <ShadFormField :rules="defaultRules" :name="props.name" v-model="modelValue">
+    <ShadFormItem>
+      <ShadPinInput
+        :id="props.id || props.name"
+        :disabled="props.disabled"
+        @complete="handleComplete"
+        v-model="pin"
+      >
+        <ShadPinInputGroup>
+          <ShadFormControl v-for="(n, i) in props.digit" :key="n" :index="i">
+            <ShadPinInputSlot />
+          </ShadFormControl>
+        </ShadPinInputGroup>
+      </ShadPinInput>
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>