pukaad-ui-lib 1.3.3 → 1.4.2

package/dist/runtime/components/card/card-recommend-publisher.vue

@@ -1,55 +1,55 @@
 <template>
-  <Card gap="8" variant="outline">
-    <template #header>
-      <div class="flex justify-between items-center">
-        <div class="font-title-medium-prominent">ติดตามใครดี</div>
-        <Button
-          color="primary"
-          variant="text"
-          disabled-padding
-          size="tiny"
-          append-icon="lucide:chevron-right"
-          :icon-size="16"
-          @click="emit('view-all')"
-        >
-          ดูทั้งหมด
-        </Button>
-      </div>
-    </template>
-    <div v-if="!items || items.length === 0">
-      <div
-        class="flex flex-col items-center justify-center h-[392px] gap-[10px]"
-      >
-        <Icon name="pukaad:page-not-found" size="60" />
-        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
-      </div>
-    </div>
-    <div
-      v-else
-      v-for="item in props.items"
-      :key="item.id"
-      class="flex py-[8px] gap-[16px] items-center cursor-pointer"
-      @click="handleClickCard(item)"
-    >
-      <!-- <Avatar :src="item.profile_image.image_url" alt="image" size="40" /> -->
-      <div class="flex flex-col gap-[4px]">
-        <div class="flex items-center gap-[4px]">
-          <div class="font-body-large max-w-[268px] truncate">
-            {{ item.profile_name }}
-          </div>
-          <Icon
-            v-if="item.profile_verified === true"
-            name="pukaad-verify"
-            size="20"
-          />
-        </div>
-        <div class="text-gray font-body-medium">
-          กำลังเผยแพร่ {{ item.profile_posts }} • ผู้ติดตาม
-          {{ item.profile_followers }}
-        </div>
-      </div>
-    </div>
-  </Card>
+  <Card gap="8" variant="outline">
+    <template #header>
+      <div class="flex justify-between items-center">
+        <div class="font-title-medium-prominent">ติดตามใครดี</div>
+        <Button
+          color="primary"
+          variant="text"
+          disabled-padding
+          size="tiny"
+          append-icon="lucide:chevron-right"
+          :icon-size="16"
+          @click="emit('view-all')"
+        >
+          ดูทั้งหมด
+        </Button>
+      </div>
+    </template>
+    <div v-if="!items || items.length === 0">
+      <div
+        class="flex flex-col items-center justify-center h-[392px] gap-[10px]"
+      >
+        <Icon name="pukaad:page-not-found" size="60" />
+        <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+      </div>
+    </div>
+    <div
+      v-else
+      v-for="item in props.items"
+      :key="item.id"
+      class="flex py-[8px] gap-[16px] items-center cursor-pointer"
+      @click="handleClickCard(item)"
+    >
+      <!-- <Avatar :src="item.profile_image.image_url" alt="image" size="40" /> -->
+      <div class="flex flex-col gap-[4px]">
+        <div class="flex items-center gap-[4px]">
+          <div class="font-body-large max-w-[268px] truncate">
+            {{ item.profile_name }}
+          </div>
+          <Icon
+            v-if="item.profile_verified === true"
+            name="pukaad-verify"
+            size="20"
+          />
+        </div>
+        <div class="text-gray font-body-medium">
+          กำลังเผยแพร่ {{ item.profile_posts }} • ผู้ติดตาม
+          {{ item.profile_followers }}
+        </div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script setup>

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

@@ -1,80 +1,80 @@
 <template>
-  <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
-    <div v-if="props.item.user.avatar">
-      <!-- <Avatar :src="props.item.user.avatar" alt="profile_myProfile" size="30" class="cursor-pointer"
-        @click="NavigateToProfile(props.item.user.path_name)" /> -->
-    </div>
-    <div class="flex flex-col gap-[24px] w-full">
-      <div class="flex flex-col gap-[8px]">
-        <div class="flex flex-col gap-[6px]">
-          <div class="flex flex-col gap-[4px]">
-            <div class="flex justify-between items-center">
-              <div
-                @click="NavigateToProfile(props.item.user.path_name)"
-                class="font-body-large cursor-pointer"
-              >
-                {{ props.item.user?.name }}
-              </div>
-              <div class="flex gap-[8px] items-center">
-                <Button
-                  type="text"
-                  :variant="liked ? 'primary' : 'black'"
-                  :icon-size="20"
-                  size="tiny"
+  <div class="py-[16px] border-b-[1px] border-mercury flex gap-[16px] w-full">
+    <div v-if="props.item.user.avatar">
+      <!-- <Avatar :src="props.item.user.avatar" alt="profile_myProfile" size="30" class="cursor-pointer"
+        @click="NavigateToProfile(props.item.user.path_name)" /> -->
+    </div>
+    <div class="flex flex-col gap-[24px] w-full">
+      <div class="flex flex-col gap-[8px]">
+        <div class="flex flex-col gap-[6px]">
+          <div class="flex flex-col gap-[4px]">
+            <div class="flex justify-between items-center">
+              <div
+                @click="NavigateToProfile(props.item.user.path_name)"
+                class="font-body-large cursor-pointer"
+              >
+                {{ props.item.user?.name }}
+              </div>
+              <div class="flex gap-[8px] items-center">
+                <Button
+                  type="text"
+                  :variant="liked ? 'primary' : 'black'"
+                  :icon-size="20"
+                  size="tiny"
                   :prepend-icon="
   liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
-"
-                  :aria-pressed="liked"
-                  @click="toggleLike"
-                  disabled-padding
-                >
-                  <div>
-                    {{ likeCount }}
-                  </div>
-                </Button>
-                <PickerOptionMenuUser :state="menuType" disabled-padding />
-              </div>
-            </div>
-            <div class="text-gray font-body-small">
-              {{ props.item.user?.review_count }} รีวิว •
-              {{ props.item.user?.like_count }} ชื่นชอบรีวิว
-            </div>
-          </div>
-          <div class="flex gap-[8px] items-center">
-            <InputRating
-              :size="16"
-              readonly
-              :model-value="props.item.review?.rating"
-            />
-            <div class="text-gray font-body-small">
-              {{ props.item.review?.created_at }}
-            </div>
-          </div>
-        </div>
-
-        <div v-if="props.item.review?.description" class="font-body-large">
-          {{ props.item.review?.description }}
-        </div>
-
-        <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
-          <DisplayImageReview
-            :items="props.item.review?.images"
-            @select="selectImage"
-          />
-        </div>
-      </div>
-      <div v-if="props.item.replies">
-        <div class="p-[16px] rounded-sm bg-bright">
-          <div class="text-gray font-body-large">
-            การตอบกลับจาก {{ props.item.replies?.author }}
-          </div>
-          <div class="font-body-large">
-            {{ props.item.replies?.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+"
+                  :aria-pressed="liked"
+                  @click="toggleLike"
+                  disabled-padding
+                >
+                  <div>
+                    {{ likeCount }}
+                  </div>
+                </Button>
+                <PickerOptionMenuUser :state="menuType" disabled-padding />
+              </div>
+            </div>
+            <div class="text-gray font-body-small">
+              {{ props.item.user?.review_count }} รีวิว •
+              {{ props.item.user?.like_count }} ชื่นชอบรีวิว
+            </div>
+          </div>
+          <div class="flex gap-[8px] items-center">
+            <InputRating
+              :size="16"
+              readonly
+              :model-value="props.item.review?.rating"
+            />
+            <div class="text-gray font-body-small">
+              {{ props.item.review?.created_at }}
+            </div>
+          </div>
+        </div>
+
+        <div v-if="props.item.review?.description" class="font-body-large">
+          {{ props.item.review?.description }}
+        </div>
+
+        <div v-if="props.item.review?.images?.length" class="flex gap-[8px]">
+          <DisplayImageReview
+            :items="props.item.review?.images"
+            @select="selectImage"
+          />
+        </div>
+      </div>
+      <div v-if="props.item.replies">
+        <div class="p-[16px] rounded-sm bg-bright">
+          <div class="text-gray font-body-large">
+            การตอบกลับจาก {{ props.item.replies?.author }}
+          </div>
+          <div class="font-body-large">
+            {{ props.item.replies?.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,78 +1,78 @@
 <template>
-  <div>
-    <div
-      class="py-[16px] 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 class="flex gap-[4px] items-center">
-              <div
-                class="font-body-large cursor-pointer"
-                @click="onProfileClick"
-              >
-                {{ props.item.user.name }}
-              </div>
-              <Icon
-                v-if="props.item.user.verified"
-                name="pukaad:verify"
-                :size="16"
-              />
-            </div>
-            <div class="text-gray font-body-small flex gap-[4px] items-center">
-              <div>{{ props.item.content.create_at }}</div>
-              <div>•</div>
-              <div>{{ props.item.content.view_count }}</div>
-            </div>
-          </div>
-        </div>
-        <Button
-          v-if="isPinned"
-          prepend-icon="lucide:pin"
-          variant="text"
-          :icon-size="20"
-          disabled-padding
-          color="black"
-        />
-        <PickerOptionMenuUser
+  <div>
+    <div
+      class="py-[16px] 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 class="flex gap-[4px] items-center">
+              <div
+                class="font-body-large cursor-pointer"
+                @click="onProfileClick"
+              >
+                {{ props.item.user.name }}
+              </div>
+              <Icon
+                v-if="props.item.user.verified"
+                name="pukaad:verify"
+                :size="16"
+              />
+            </div>
+            <div class="text-gray font-body-small flex gap-[4px] items-center">
+              <div>{{ props.item.content.create_at }}</div>
+              <div>•</div>
+              <div>{{ props.item.content.view_count }}</div>
+            </div>
+          </div>
+        </div>
+        <Button
+          v-if="isPinned"
+          prepend-icon="lucide:pin"
+          variant="text"
+          :icon-size="20"
+          disabled-padding
+          color="black"
+        />
+        <PickerOptionMenuUser
           :state="
   props.isProfile ? isPinned ? 'my-blog-pined' : 'my-blog' : 'report-announce'
-"
-          disabled-padding
-          @blog-unpin="onBlogUnpin"
-          @blog-pin="onBlogPin"
-          @blog-edit="onBlogEdit"
-        />
-      </div>
-      <Image
-        v-if="props.item.content.image"
-        :src="props.item.content.image"
-        :width="668"
-        :height="376"
-        fit="fill"
-      />
-      <div class="font-title-medium-prominent">
-        {{ props.item.content.title }}
-      </div>
-      <div class="text-gray font-body-large">
-        {{ props.item.content.description }}
-      </div>
-      <CardReaction
-        padding="0"
-        disabled-divider-top
-        disabled-divider-bottom
+"
+          disabled-padding
+          @blog-unpin="onBlogUnpin"
+          @blog-pin="onBlogPin"
+          @blog-edit="onBlogEdit"
+        />
+      </div>
+      <Image
+        v-if="props.item.content.image"
+        :src="props.item.content.image"
+        :width="668"
+        :height="376"
+        fit="fill"
+      />
+      <div class="font-title-medium-prominent">
+        {{ props.item.content.title }}
+      </div>
+      <div class="text-gray font-body-large">
+        {{ props.item.content.description }}
+      </div>
+      <CardReaction
+        padding="0"
+        disabled-divider-top
+        disabled-divider-bottom
         :item-count="{
   liked: props.item.content.likes_count,
   commented: props.item.content.comments_count,
   shared: props.item.content.shares_count
-}"
+}"
         :itemReacted="{
   liked: props.item.content.liked
-}"
-      />
-    </div>
-  </div>
+}"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,69 +1,69 @@
 <template>
-  <div
+  <div
     :class="[
   'flex gap-[16px] items-center border-b border-mercury w-full',
   props.disabledPaddingHorizontal ? 'py-[16px]' : 'p-[16px]'
-]"
-  >
-    <div class="flex w-full gap-[16px]">
-      <!-- <Avatar
-        :src="user.profile_image.image_url"
-        size="48"
-        class="cursor-pointer"
-      /> -->
-      <div class="flex flex-col gap-[4px]">
-        <div class="flex gap-[4px] items-center">
-          <div
+]"
+  >
+    <div class="flex w-full gap-[16px]">
+      <!-- <Avatar
+        :src="user.profile_image.image_url"
+        size="48"
+        class="cursor-pointer"
+      /> -->
+      <div class="flex flex-col gap-[4px]">
+        <div class="flex gap-[4px] items-center">
+          <div
             :class="[
   props.hiddenInfo ? 'font-body-large-prominent' : 'font-body-small-prominent'
-]"
-          >
-            {{ user.profile_name }}
-          </div>
-          <Icon
-            v-if="user.profile_verified === true"
-            name="pukaad-verify"
-            :size="props.hiddenInfo ? 20 : 16"
-          />
-        </div>
-        <div
-          v-if="!props.hiddenInfo"
+]"
+          >
+            {{ user.profile_name }}
+          </div>
+          <Icon
+            v-if="user.profile_verified === true"
+            name="pukaad-verify"
+            :size="props.hiddenInfo ? 20 : 16"
+          />
+        </div>
+        <div
+          v-if="!props.hiddenInfo"
           :class="[
   'flex gap-[4px] text-gray items-center',
   props.variant === 'search' ? 'font-body-large' : 'font-body-small'
-]"
-        >
-          <div>ผู้ติดตาม {{ user.profile_followers }}</div>
-          <div>•</div>
-          <div>กำลังเผยแพร่ {{ user.profile_posts }}</div>
-        </div>
-        <div
-          v-if="!props.hiddenInfo"
+]"
+        >
+          <div>ผู้ติดตาม {{ user.profile_followers }}</div>
+          <div>•</div>
+          <div>กำลังเผยแพร่ {{ user.profile_posts }}</div>
+        </div>
+        <div
+          v-if="!props.hiddenInfo"
           :class="[
   'text-gray',
   props.variant === 'search' ? 'font-body-large' : 'font-body-small'
-]"
-        >
-          {{ user.profile_bio }}
-        </div>
-      </div>
-    </div>
-
-    <Button
-      :color="buttonState.variant"
-      :variant="buttonState.type"
-      @click="buttonState.action"
-    >
-      {{ buttonState.text }}
-    </Button>
-
-    <PickerOptionMenuUser
-      v-if="ellipsis"
-      state="follower"
-      circle
-      variant="text"
-    />
-  </div>
+]"
+        >
+          {{ user.profile_bio }}
+        </div>
+      </div>
+    </div>
+
+    <Button
+      :color="buttonState.variant"
+      :variant="buttonState.type"
+      @click="buttonState.action"
+    >
+      {{ buttonState.text }}
+    </Button>
+
+    <PickerOptionMenuUser
+      v-if="ellipsis"
+      state="follower"
+      circle
+      variant="text"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,29 +1,29 @@
 <template>
-  <ShadCard v-slot="slotScope">
-    <ShadCardHeader
-      v-if="$slots.header || props.title || props.description"
-      v-bind="slotScope"
-    >
-      <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">
+    <ShadCardHeader
+      v-if="$slots.header || props.title || props.description"
+      v-bind="slotScope"
+    >
+      <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

@@ -2,35 +2,35 @@
   <div class="relative bg-black" @mouseenter="isHovered = true" @mouseleave="isHovered = false" :style="{
   width: props.fullWidth ? '100%' : `${props.width}px`,
   height: props.fullHeight ? '100%' : `${props.height}px`
-}">
-    <div v-if="props.items?.length && props.items[currentIndex]" class="flex items-center justify-center w-full h-full"
-      @click="onClickedImage">
-      <Image v-if="!props.items[currentIndex]?.includes('.mp4')" :src="props.items[currentIndex]"
-        :width="props.fullWidth ? 'auto' : props.width" :height="props.fullHeight ? 'auto' : props.height"
-        fit="contain" />
-      <Video v-else :src="props.items[currentIndex]" fit="contain" controls full-width full-height />
-    </div>
-    <div v-if="props.items.length > 1 && isHovered" class="absolute top-[16px] left-1/2 transform -translate-x-1/2">
-      <div class="rounded-full py-[4px] px-[8px] bg-black/50 w-[100px] items-center">
-        <div class="font-body-medium w-full text-center text-white">
-          {{ currentIndex + 1 }}/{{ props.items.length }}
-        </div>
-      </div>
-    </div>
-    <div v-if="props.items.length > 1 && currentIndex > 0 && isHovered"
-      class="absolute left-[16px] top-1/2 transform -translate-y-1/2">
-      <Button prependIcon="lucide:chevron-left" circle variant="solid" color="black" @click="back" :icon-size="24"
-        :padding="0" />
-    </div>
-    <div v-if="props.items.length > 1 && currentIndex < props.items.length - 1 && isHovered"
-      class="absolute right-[16px] top-1/2 transform -translate-y-1/2">
-      <Button prependIcon="lucide:chevron-right" circle variant="solid" color="black" @click="next" :icon-size="24"
-        :padding="0" />
-    </div>
-    <div class="absolute bottom-[0] w-full">
-      <slot name="default" />
-    </div>
-  </div>
+}">
+    <div v-if="props.items?.length && props.items[currentIndex]" class="flex items-center justify-center w-full h-full"
+      @click="onClickedImage">
+      <Image v-if="!props.items[currentIndex]?.includes('.mp4')" :src="props.items[currentIndex]"
+        :width="props.fullWidth ? 'auto' : props.width" :height="props.fullHeight ? 'auto' : props.height"
+        fit="contain" />
+      <Video v-else :src="props.items[currentIndex]" fit="contain" controls full-width full-height />
+    </div>
+    <div v-if="props.items.length > 1 && isHovered" class="absolute top-[16px] left-1/2 transform -translate-x-1/2">
+      <div class="rounded-full py-[4px] px-[8px] bg-black/50 w-[100px] items-center">
+        <div class="font-body-medium w-full text-center text-white">
+          {{ currentIndex + 1 }}/{{ props.items.length }}
+        </div>
+      </div>
+    </div>
+    <div v-if="props.items.length > 1 && currentIndex > 0 && isHovered"
+      class="absolute left-[16px] top-1/2 transform -translate-y-1/2">
+      <Button prependIcon="lucide:chevron-left" circle variant="solid" color="black" @click="back" :icon-size="24"
+        :padding="0" />
+    </div>
+    <div v-if="props.items.length > 1 && currentIndex < props.items.length - 1 && isHovered"
+      class="absolute right-[16px] top-1/2 transform -translate-y-1/2">
+      <Button prependIcon="lucide:chevron-right" circle variant="solid" color="black" @click="next" :icon-size="24"
+        :padding="0" />
+    </div>
+    <div class="absolute bottom-[0] w-full">
+      <slot name="default" />
+    </div>
+  </div>
 </template>
 
 <script setup>