pukaad-ui-lib 1.282.2 → 1.284.0

package/dist/runtime/components/card/card-user-blog.vue

@@ -1,88 +1,88 @@
 <template>
-  <div class="flex flex-col gap-[16px] w-[668px] border-mercury border-b-[1px]">
-    <div class="flex gap-[16px] items-center w-full">
-      <div class="flex gap-[8px] items-center w-full">
-        <Avatar
-          :src="props.item.user.avatar"
-          :size="40"
-          class="cursor-pointer"
-          @click="onProfileClick"
-        />
-        <div class="flex flex-col gap-[4px]">
-          <div>
-            <span
-              class="font-body-large cursor-pointer"
-              @click="onProfileClick"
-              >{{ props.item.user.name }}</span
-            ><Icon
-              v-if="props.item.user.verified"
-              name="pukaad:verify"
-              :size="16"
-              class="inline-block align-middle ml-[8px]"
-            />
-          </div>
-          <div class="text-gray font-body-small flex gap-[4px] items-center">
-            <div>
-              {{ convertDateTorelativeText(props.item.create_at) }}
-            </div>
-            <div>•</div>
-            <div>{{ convertNumber(props.item.view_count) }} วิว</div>
-          </div>
-        </div>
-      </div>
-      <Icon v-if="isPinned" name="lucide:pin" :size="20" />
-      <PickerOptionMenuUser
+  <div class="flex flex-col gap-[16px] w-[668px] border-mercury border-b-[1px]">
+    <div class="flex gap-[16px] items-center w-full">
+      <div class="flex gap-[8px] items-center w-full">
+        <Avatar
+          :src="props.item.user.avatar"
+          :size="40"
+          class="cursor-pointer"
+          @click="onProfileClick"
+        />
+        <div class="flex flex-col gap-[4px]">
+          <div>
+            <span
+              class="font-body-large cursor-pointer"
+              @click="onProfileClick"
+              >{{ props.item.user.name }}</span
+            ><Icon
+              v-if="props.item.user.verified"
+              name="pukaad:verify"
+              :size="16"
+              class="inline-block align-middle ml-[8px]"
+            />
+          </div>
+          <div class="text-gray font-body-small flex gap-[4px] items-center">
+            <div>
+              {{ convertDateTorelativeText(props.item.create_at) }}
+            </div>
+            <div>•</div>
+            <div>{{ convertNumber(props.item.view_count) }} วิว</div>
+          </div>
+        </div>
+      </div>
+      <Icon v-if="isPinned" name="lucide:pin" :size="20" />
+      <PickerOptionMenuUser
         :state="
   props.isMyProfile ? isPinned ? 'my-blog-pined' : 'my-blog' : 'report-announce'
-"
-        disabled-padding
-        @blog-unpin="onBlogUnpin"
-        @blog-pin="onBlogPin"
-        @blog-edit="onBlogEdit"
-        @blog-delete="onBlogDelete"
-      />
-    </div>
-    <div class="flex flex-col gap-[16px] cursor-pointer" @click="onBlogClick">
-      <Image
-        v-if="props.item.image"
-        :src="props.item.image"
-        :width="668"
-        :height="376"
-        fit="fill"
-      />
-      <div class="font-title-medium-prominent">
-        {{ props.item.title }}
-      </div>
-      <div
-        v-if="!props.item.image"
-        class="text-gray font-body-large line-clamp-4"
-      >
-        {{ props.item.description }}
-      </div>
-    </div>
-    <CardReaction
-      disabled-divider-top
-      disabled-divider-bottom
-      :id="props.item.id"
+"
+        disabled-padding
+        @blog-unpin="onBlogUnpin"
+        @blog-pin="onBlogPin"
+        @blog-edit="onBlogEdit"
+        @blog-delete="onBlogDelete"
+      />
+    </div>
+    <div class="flex flex-col gap-[16px] cursor-pointer" @click="onBlogClick">
+      <Image
+        v-if="props.item.image"
+        :src="props.item.image"
+        :width="668"
+        :height="376"
+        fit="fill"
+      />
+      <div class="font-title-medium-prominent">
+        {{ props.item.title }}
+      </div>
+      <div
+        v-if="!props.item.image"
+        class="text-gray font-body-large line-clamp-4"
+      >
+        {{ props.item.description }}
+      </div>
+    </div>
+    <CardReaction
+      disabled-divider-top
+      disabled-divider-bottom
+      :id="props.item.id"
       :item-count="{
   liked: props.item.like_count,
   commented: props.item.comment_count,
   shared: props.item.share_count
-}"
+}"
       :itemActive="{
   liked: props.item.liked
-}"
-      state="blog"
-    />
-
-    <!-- Edit Blog Drawer — อยู่ใน root เดียวกันเพื่อหลีกเลี่ยง fragment -->
-    <DrawerPostBlog
-      v-if="editBlogItem"
-      v-model="isEditDrawerOpen"
-      :item="editBlogItem"
-      @success="onEditSuccess"
-    />
-  </div>
+}"
+      state="blog"
+    />
+
+    <!-- Edit Blog Drawer — อยู่ใน root เดียวกันเพื่อหลีกเลี่ยง fragment -->
+    <DrawerPostBlog
+      v-if="editBlogItem"
+      v-model="isEditDrawerOpen"
+      :item="editBlogItem"
+      @success="onEditSuccess"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card-user-item.vue

@@ -1,28 +1,28 @@
 <template>
-  <div class="flex gap-[16px] items-center justify-between cursor-pointer transition-colors" @click="onClickCard">
-    <div class="flex gap-[8px]">
-      <Avatar :src="modelValue?.avatar" :alt="modelValue?.name" :size="40" />
-      <div class="flex flex-col gap-[4px]">
-        <div class="font-body-large-prominent flex items-center gap-[4px]">
-          {{ modelValue?.name }}
-        </div>
-        <div class="flex flex-col gap-[4px] font-body-small text-gray">
-          <div class="flex items-center gap-[4px]">
-            <div>ผู้ติดตาม {{ $convert.convertNumber(modelValue?.follower_count || 0) }}</div>
-            <div>•</div>
-            <div>กำลังเผยแพร่ {{ $convert.convertNumber(modelValue?.public_count || 0) }}</div>
-          </div>
-          <div v-if="modelValue?.description" class="line-clamp-2">
-            {{ modelValue?.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <Button v-if="!modelValue?.is_my_profile" :variant="modelValue?.is_following ? 'default' : 'outline'"
-      :color="modelValue?.is_following ? 'default' : 'primary'" @click.stop="onFollowToggle">
-      {{ modelValue?.is_following ? "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E41\u0E25\u0E49\u0E27" : "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21" }}
-    </Button>
-  </div>
+  <div class="flex gap-[16px] items-center justify-between cursor-pointer transition-colors" @click="onClickCard">
+    <div class="flex gap-[8px]">
+      <Avatar :src="modelValue?.avatar" :alt="modelValue?.name" :size="40" />
+      <div class="flex flex-col gap-[4px]">
+        <div class="font-body-large-prominent flex items-center gap-[4px]">
+          {{ modelValue?.name }}
+        </div>
+        <div class="flex flex-col gap-[4px] font-body-small text-gray">
+          <div class="flex items-center gap-[4px]">
+            <div>ผู้ติดตาม {{ $convert.convertNumber(modelValue?.follower_count || 0) }}</div>
+            <div>•</div>
+            <div>กำลังเผยแพร่ {{ $convert.convertNumber(modelValue?.public_count || 0) }}</div>
+          </div>
+          <div v-if="modelValue?.description" class="line-clamp-2">
+            {{ modelValue?.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <Button v-if="!modelValue?.is_my_profile" :variant="modelValue?.is_following ? 'default' : 'outline'"
+      :color="modelValue?.is_following ? 'default' : 'primary'" @click.stop="onFollowToggle">
+      {{ modelValue?.is_following ? "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E41\u0E25\u0E49\u0E27" : "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21" }}
+    </Button>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/card/card.vue

@@ -1,33 +1,33 @@
 <template>
-  <ShadCard
-    v-slot="slotScope"
-    :class="props.variant === 'outline' && 'border-[1px] border-mecury'"
-  >
-    <ShadCardHeader
-      v-if="$slots.header || props.title || props.description"
-      v-bind="slotScope"
-      :hasGap="!!($slots.description || props.description)"
-    >
-      <slot name="header">
-        <ShadCardTitle v-if="props.title">
-          <slot name="title">
-            {{ props.title }}
-          </slot>
-        </ShadCardTitle>
-        <ShadCardDescription>
-          <slot name="description">
-            {{ props.description }}
-          </slot>
-        </ShadCardDescription>
-      </slot>
-    </ShadCardHeader>
-    <ShadCardContent>
-      <slot v-bind="slotScope" />
-    </ShadCardContent>
-    <ShadCardFooter v-if="$slots.footer">
-      <slot name="footer" v-bind="slotScope" />
-    </ShadCardFooter>
-  </ShadCard>
+  <ShadCard
+    v-slot="slotScope"
+    :class="props.variant === 'outline' && 'border-[1px] border-mecury'"
+  >
+    <ShadCardHeader
+      v-if="$slots.header || props.title || props.description"
+      v-bind="slotScope"
+      :hasGap="!!($slots.description || props.description)"
+    >
+      <slot name="header">
+        <ShadCardTitle v-if="props.title">
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+        </ShadCardTitle>
+        <ShadCardDescription>
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </ShadCardDescription>
+      </slot>
+    </ShadCardHeader>
+    <ShadCardContent>
+      <slot v-bind="slotScope" />
+    </ShadCardContent>
+    <ShadCardFooter v-if="$slots.footer">
+      <slot name="footer" v-bind="slotScope" />
+    </ShadCardFooter>
+  </ShadCard>
 </template>
 
 <script setup>

package/dist/runtime/components/carousel.vue

@@ -1,35 +1,35 @@
 <template>
-  <div class="relative w-full h-full">
-    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
-      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
-        <span class="text-white text-sm font-medium tracking-widest">
-          {{ currentIndex + 1 }} / {{ props.items.length }}
-        </span>
-      </div>
-    </div>
-
-    <ShadCarousel
-      :opts="{ startIndex: props.selectIndex }"
-      class="carousel-media w-full h-full"
-      @init-api="onInitApi"
-    >
-      <ShadCarouselContent class="h-full">
-        <ShadCarouselItem
-          v-for="(item, i) in props.items"
-          :key="i"
-          class="h-full flex items-center justify-center"
-        >
-          <img
-            :src="item"
-            class="w-full h-full object-contain select-none"
-            draggable="false"
-          />
-        </ShadCarouselItem>
-      </ShadCarouselContent>
-      <ShadCarouselPrevious class="!left-[12px]" />
-      <ShadCarouselNext class="!right-[12px]" />
-    </ShadCarousel>
-  </div>
+  <div class="relative w-full h-full">
+    <div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
+      <div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
+        <span class="text-white text-sm font-medium tracking-widest">
+          {{ currentIndex + 1 }} / {{ props.items.length }}
+        </span>
+      </div>
+    </div>
+
+    <ShadCarousel
+      :opts="{ startIndex: props.selectIndex }"
+      class="carousel-media w-full h-full"
+      @init-api="onInitApi"
+    >
+      <ShadCarouselContent class="h-full">
+        <ShadCarouselItem
+          v-for="(item, i) in props.items"
+          :key="i"
+          class="h-full flex items-center justify-center"
+        >
+          <img
+            :src="item"
+            class="w-full h-full object-contain select-none"
+            draggable="false"
+          />
+        </ShadCarouselItem>
+      </ShadCarouselContent>
+      <ShadCarouselPrevious class="!left-[12px]" />
+      <ShadCarouselNext class="!right-[12px]" />
+    </ShadCarousel>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/chip.vue

@@ -1,14 +1,14 @@
 <template>
-  <Badge :variant="variant" class="gap-1">
-    <slot name="default" />
-    <div
-      v-if="props.closable"
-      class="flex justify-center items-center cursor-pointer"
-      @click="emit('closable')"
-    >
-      <Icon name="fa6-solid:xmark" size="16" />
-    </div>
-  </Badge>
+  <Badge :variant="variant" class="gap-1">
+    <slot name="default" />
+    <div
+      v-if="props.closable"
+      class="flex justify-center items-center cursor-pointer"
+      @click="emit('closable')"
+    >
+      <Icon name="fa6-solid:xmark" size="16" />
+    </div>
+  </Badge>
 </template>
 
 <script setup>

package/dist/runtime/components/collapse/collapse-multiple.vue

@@ -1,56 +1,56 @@
 <template>
-  <div class="flex flex-col">
-    <div
-      v-for="(item, i_item) in props.items"
-      :key="i_item"
-      class="flex flex-col"
-    >
-      <div class="flex gap-[16px] select-none">
-        <div class="w-[20px] flex items-center justify-center relative">
-          <div class="h-full border-r-[2px] border-dashed border-cloud"></div>
-          <div
-            @click="handleShow(i_item)"
-            class="absolute bg-white text-primary cursor-pointer"
-            :style="{ top: toggleIconPosition(i_item) + 'px' }"
-          >
-            <Icon
+  <div class="flex flex-col">
+    <div
+      v-for="(item, i_item) in props.items"
+      :key="i_item"
+      class="flex flex-col"
+    >
+      <div class="flex gap-[16px] select-none">
+        <div class="w-[20px] flex items-center justify-center relative">
+          <div class="h-full border-r-[2px] border-dashed border-cloud"></div>
+          <div
+            @click="handleShow(i_item)"
+            class="absolute bg-white text-primary cursor-pointer"
+            :style="{ top: toggleIconPosition(i_item) + 'px' }"
+          >
+            <Icon
               :name="
   !arrShow.includes(i_item) ? 'lucide:square-chevron-right' : 'lucide:square-chevron-down'
-"
-              size="20"
-            />
-          </div>
-        </div>
-        <div class="flex flex-col w-full mb-[16px]">
-          <div
+"
+              size="20"
+            />
+          </div>
+        </div>
+        <div class="flex flex-col w-full mb-[16px]">
+          <div
             :ref="
   (el) => {
     labelRef[i_item] = el;
   }
-"
-          >
-            <div :class="divider ? 'border-b border-silver w-full' : 'w-full'">
-              <slot name="title" :label="item.label" :item="item" />
-            </div>
-          </div>
-          <div
-            v-if="arrShow.includes(i_item)"
+"
+          >
+            <div :class="divider ? 'border-b border-silver w-full' : 'w-full'">
+              <slot name="title" :label="item.label" :item="item" />
+            </div>
+          </div>
+          <div
+            v-if="arrShow.includes(i_item)"
             :class="[
   'flex flex-col gap-[16px] mt-[16px] pl-[24px]',
   ,
   divider ? '[&>*]:border-b [&>*]:border-silver [&>*]:ml-[-24px] [&>*]:pl-[24px]' : ''
-]"
-          >
-            <slot name="children" :items="item">
-              <div v-for="(cill, i_child) in item.children" :key="i_child">
-                {{ cill.label }}
-              </div>
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+]"
+          >
+            <slot name="children" :items="item">
+              <div v-for="(cill, i_child) in item.children" :key="i_child">
+                {{ cill.label }}
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/collapse/collapse.vue

@@ -1,31 +1,31 @@
 <template>
-  <div
-    class="flex flex-col"
+  <div
+    class="flex flex-col"
     :style="{
   width: props.fullWidth ? '100%' : `${props.width}`
-}"
-  >
-    <slot name="title">
-      <div
-        class="flex justify-between items-center p-2 cursor-pointer"
-        @click="isOpen = !isOpen"
-      >
-        <slot name="title-text">
-          <div>{{ props.title }}</div>
-        </slot>
-        <slot name="title-toggle">
-          <Icon
+}"
+  >
+    <slot name="title">
+      <div
+        class="flex justify-between items-center p-2 cursor-pointer"
+        @click="isOpen = !isOpen"
+      >
+        <slot name="title-text">
+          <div>{{ props.title }}</div>
+        </slot>
+        <slot name="title-toggle">
+          <Icon
             :name="
   isOpen ? 'flowbite:angle-up-outline' : 'flowbite:angle-down-outline'
-"
-          />
-        </slot>
-      </div>
-    </slot>
-    <div v-if="isOpen">
-      <slot name="content"></slot>
-    </div>
-  </div>
+"
+          />
+        </slot>
+      </div>
+    </slot>
+    <div v-if="isOpen">
+      <slot name="content"></slot>
+    </div>
+  </div>
 </template>
 
 <script setup>