pukaad-ui-lib 1.450.2 → 1.451.0

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.url"
-            class="w-full h-full object-contain select-none"
-            draggable="false"
-          />
-        </ShadCarouselItem>
-      </ShadCarouselContent>
-      <ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
-      <ShadCarouselNext v-if="props.items.length > 1" 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.url"
+            class="w-full h-full object-contain select-none"
+            draggable="false"
+          />
+        </ShadCarouselItem>
+      </ShadCarouselContent>
+      <ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
+      <ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
+    </ShadCarousel>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/chart/chart-approval-activity.vue

@@ -92,72 +92,72 @@ const dayLabelOf = (k, i) => {
 </script>
 
 <template>
-  <div
-    class="flex flex-col gap-[16px] w-full"
-    :class="rootHeight ? '' : 'h-full'"
-    :style="rootHeight ? { height: rootHeight } : void 0"
-  >
-    <div
-      v-for="(row, ri) in rows"
-      :key="row.key"
-      class="flex flex-col gap-[16px] flex-1 min-h-0"
-    >
-      <div class="flex items-end justify-between gap-[16px]">
-        <div class="font-title-small-prominent">{{ row.title }}</div>
-        <div v-if="ri === 0" class="flex gap-[17px]">
-          <div
-            v-for="m in summaryMeta"
-            :key="m.key"
-            class="flex flex-col items-center border rounded-[8px] py-[8px] px-[16px] min-w-[114px]"
-          >
-            <div
-              class="font-title-medium-prominent"
-              :style="{ color: m.color }"
-            >
-              {{ summaryByKey[m.key] }}
-            </div>
-            <div class="font-body-large-prominent text-gray">{{ m.label }}</div>
-          </div>
-        </div>
-      </div>
-
-      <ChartContainer
-        :config="chartConfig"
-        class="flex-1 min-h-0 w-full aspect-auto"
-      >
-        <VisXYContainer :data="normalizedByKey[row.key]">
-          <VisGroupedBar
-            :x="(_d, i) => i"
-            :y="[(d) => d.value]"
-            :color="[row.color]"
-            :rounded-corners="4"
-            bar-padding="0.25"
-          />
-          <VisAxis
-            type="x"
-            :x="(_d, i) => i"
-            :tick-values="indicesOf(row.key)"
-            :tick-format="(i) => dayLabelOf(row.key, i)"
-            :tick-line="false"
-            :domain-line="false"
-            :grid-line="false"
-          />
-        </VisXYContainer>
-      </ChartContainer>
-
-      <div
-        class="flex items-center justify-between font-label-sans-serif-small-prominent text-gray uppercase"
-      >
-        <div class="flex items-center cursor-pointer" @click="goPrev(row.key)">
-          <Icon name="lucide:chevrons-left" size="16" />
-          {{ prevLabelOf(row.key) }}
-        </div>
-        <div>{{ monthLabelOf(row.key) }}</div>
-        <div class="flex items-center cursor-pointer" @click="goNext(row.key)">
-          {{ nextLabelOf(row.key) }}
-          <Icon name="lucide:chevrons-right" size="16" />
-        </div>
-      </div>
-    </div>
-  </div>
+  <div
+    class="flex flex-col gap-[16px] w-full"
+    :class="rootHeight ? '' : 'h-full'"
+    :style="rootHeight ? { height: rootHeight } : void 0"
+  >
+    <div
+      v-for="(row, ri) in rows"
+      :key="row.key"
+      class="flex flex-col gap-[16px] flex-1 min-h-0"
+    >
+      <div class="flex items-end justify-between gap-[16px]">
+        <div class="font-title-small-prominent">{{ row.title }}</div>
+        <div v-if="ri === 0" class="flex gap-[17px]">
+          <div
+            v-for="m in summaryMeta"
+            :key="m.key"
+            class="flex flex-col items-center border rounded-[8px] py-[8px] px-[16px] min-w-[114px]"
+          >
+            <div
+              class="font-title-medium-prominent"
+              :style="{ color: m.color }"
+            >
+              {{ summaryByKey[m.key] }}
+            </div>
+            <div class="font-body-large-prominent text-gray">{{ m.label }}</div>
+          </div>
+        </div>
+      </div>
+
+      <ChartContainer
+        :config="chartConfig"
+        class="flex-1 min-h-0 w-full aspect-auto"
+      >
+        <VisXYContainer :data="normalizedByKey[row.key]">
+          <VisGroupedBar
+            :x="(_d, i) => i"
+            :y="[(d) => d.value]"
+            :color="[row.color]"
+            :rounded-corners="4"
+            bar-padding="0.25"
+          />
+          <VisAxis
+            type="x"
+            :x="(_d, i) => i"
+            :tick-values="indicesOf(row.key)"
+            :tick-format="(i) => dayLabelOf(row.key, i)"
+            :tick-line="false"
+            :domain-line="false"
+            :grid-line="false"
+          />
+        </VisXYContainer>
+      </ChartContainer>
+
+      <div
+        class="flex items-center justify-between font-label-sans-serif-small-prominent text-gray uppercase"
+      >
+        <div class="flex items-center cursor-pointer" @click="goPrev(row.key)">
+          <Icon name="lucide:chevrons-left" size="16" />
+          {{ prevLabelOf(row.key) }}
+        </div>
+        <div>{{ monthLabelOf(row.key) }}</div>
+        <div class="flex items-center cursor-pointer" @click="goNext(row.key)">
+          {{ nextLabelOf(row.key) }}
+          <Icon name="lucide:chevrons-right" size="16" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

package/dist/runtime/components/chat/chat-conversation-item-skeleton.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex items-center gap-[8px] p-[8px]">
-    <Skeleton class="size-[40px] shrink-0 rounded-full" />
-    <div class="flex flex-1 min-w-0 flex-col gap-[6px]">
-      <Skeleton class="h-[14px] w-1/2" />
-      <Skeleton class="h-[12px] w-3/4" />
-    </div>
-  </div>
+  <div class="flex items-center gap-[8px] p-[8px]">
+    <Skeleton class="size-[40px] shrink-0 rounded-full" />
+    <div class="flex flex-1 min-w-0 flex-col gap-[6px]">
+      <Skeleton class="h-[14px] w-1/2" />
+      <Skeleton class="h-[12px] w-3/4" />
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/chat/chat-conversation-item.vue

@@ -1,56 +1,56 @@
 <template>
-  <div :class="['relative group', props.class]">
-    <component
-      :is="to ? NuxtLink : 'div'"
-      :to="to"
+  <div :class="['relative group', props.class]">
+    <component
+      :is="to ? NuxtLink : 'div'"
+      :to="to"
       :class="[
   'flex items-center gap-[8px] rounded-[8px] p-[8px] cursor-pointer',
   active ? 'bg-info' : 'hover:bg-smoke'
-]"
-      @click="emit('click')"
-    >
-      <Avatar :src="avatar || void 0" :size="40" class="shrink-0" />
-      <div class="flex-1 min-w-0">
-        <div class="font-body-medium-prominent truncate">
-          {{ name || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49" }}
-        </div>
-        <div
-          v-if="preview || typing || time"
-          class="flex items-center gap-[4px] font-body-small text-gray"
-        >
-          <span v-if="typing" class="truncate text-primary">กำลังพิมพ์...</span>
-          <span v-else class="truncate">{{ preview }}</span>
-          <span v-if="time" class="shrink-0">• {{ convertChatRelativeText(time) }}</span>
-        </div>
-      </div>
-      <div
-        v-if="muted || unreadCount > 0"
-        :class="['flex shrink-0', menuVisibleClass && 'group-hover:invisible group-focus-within:invisible', isMenuOpen && 'invisible']"
-      >
-        <Icon
-          v-if="muted"
-          name="lucide:bell-off"
-          class="size-[18px] text-gray"
-        />
-        <BadgeCount v-else :count="unreadCount" color="primary" />
-      </div>
-    </component>
-    <div
-      v-if="!disabledMenu"
+]"
+      @click="emit('click')"
+    >
+      <Avatar :src="avatar || void 0" :size="40" class="shrink-0" />
+      <div class="flex-1 min-w-0">
+        <div class="font-body-medium-prominent truncate">
+          {{ name || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49" }}
+        </div>
+        <div
+          v-if="preview || typing || time"
+          class="flex items-center gap-[4px] font-body-small text-gray"
+        >
+          <span v-if="typing" class="truncate text-primary">กำลังพิมพ์...</span>
+          <span v-else class="truncate">{{ preview }}</span>
+          <span v-if="time" class="shrink-0">• {{ convertChatRelativeText(time) }}</span>
+        </div>
+      </div>
+      <div
+        v-if="muted || unreadCount > 0"
+        :class="['flex shrink-0', menuVisibleClass && 'group-hover:invisible group-focus-within:invisible', isMenuOpen && 'invisible']"
+      >
+        <Icon
+          v-if="muted"
+          name="lucide:bell-off"
+          class="size-[18px] text-gray"
+        />
+        <BadgeCount v-else :count="unreadCount" color="primary" />
+      </div>
+    </component>
+    <div
+      v-if="!disabledMenu"
       :class="[
   'absolute right-[8px] top-1/2 -translate-y-1/2',
   isMenuOpen ? 'flex' : menuVisibleClass
-]"
-    >
-      <PickerOptionMenu
-        v-model:open="isMenuOpen"
-        :items="menuItems"
-        circle
-        icon-size="18"
-        trigger-class="bg-white shadow-sm"
-      />
-    </div>
-  </div>
+]"
+    >
+      <PickerOptionMenu
+        v-model:open="isMenuOpen"
+        :items="menuItems"
+        circle
+        icon-size="18"
+        trigger-class="bg-white shadow-sm"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/chat/chat-conversation-list.vue

@@ -1,30 +1,30 @@
 <template>
-  <div class="flex flex-col">
-    <ChatConversationItem
-      v-for="conversation in storeChat.conversations"
-      :key="conversation.id"
-      :name="conversation.profile?.name"
-      :avatar="conversation.profile?.avatar"
-      :preview="storeChat.previewOf(conversation)"
-      :time="conversation.last_message?.created_at"
-      :to="props.linkTo(conversation.id)"
-      :active="conversation.id === props.activeId"
-      :typing="storeChat.isPeerTyping(conversation.id)"
-      :unread-count="storeChat.unreadCountOf(conversation)"
-      @action="(action) => onAction(conversation, action)"
-    />
-    <template v-if="storeChat.isLoadingConversations">
-      <ChatConversationItemSkeleton
-        v-for="n in storeChat.conversations.length ? 2 : 8"
-        :key="`skeleton-${n}`"
-      />
-    </template>
-    <div
-      v-else-if="storeChat.hasMoreConversations"
-      ref="sentinelRef"
-      class="h-[1px] w-full"
-    />
-  </div>
+  <div class="flex flex-col">
+    <ChatConversationItem
+      v-for="conversation in storeChat.conversations"
+      :key="conversation.id"
+      :name="conversation.profile?.name"
+      :avatar="conversation.profile?.avatar"
+      :preview="storeChat.previewOf(conversation)"
+      :time="conversation.last_message?.created_at"
+      :to="props.linkTo(conversation.id)"
+      :active="conversation.id === props.activeId"
+      :typing="storeChat.isPeerTyping(conversation.id)"
+      :unread-count="storeChat.unreadCountOf(conversation)"
+      @action="(action) => onAction(conversation, action)"
+    />
+    <template v-if="storeChat.isLoadingConversations">
+      <ChatConversationItemSkeleton
+        v-for="n in storeChat.conversations.length ? 2 : 8"
+        :key="`skeleton-${n}`"
+      />
+    </template>
+    <div
+      v-else-if="storeChat.hasMoreConversations"
+      ref="sentinelRef"
+      class="h-[1px] w-full"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/chat/chat-media-grid.vue

@@ -1,61 +1,61 @@
 <template>
-  <div
+  <div
     :class="[
   'relative overflow-hidden',
   items.length > 1 ? 'rounded-[8px]' : 'rounded-[12px]',
   items.length > 1 ? `grid gap-[4px] ${items.length === 2 || items.length === 4 ? 'grid-cols-2' : 'grid-cols-3'}` : ''
-]"
-  >
-    <button
-      v-for="(item, i) in items"
-      :key="i"
-      type="button"
+]"
+  >
+    <button
+      v-for="(item, i) in items"
+      :key="i"
+      type="button"
       :class="[
   'relative block overflow-hidden bg-silver',
   items.length > 1 ? 'size-[100px] rounded-[8px]' : 'max-w-[300px]'
-]"
-      :style="items.length === 1 ? singleStyle(item) : void 0"
-      @click="emit('open', i)"
-    >
-      <img
-        v-if="item.kind === 'image'"
-        :src="item.url"
-        alt=""
-        class="size-full object-cover"
-        loading="lazy"
-        @error="emit('error')"
-      >
-      <template v-else>
-        <img
-          v-if="item.thumbnail_url"
-          :src="item.thumbnail_url"
-          alt=""
-          class="size-full object-cover"
-          loading="lazy"
-          @error="emit('error')"
-        >
-        <video v-else :src="item.url" class="size-full object-cover" preload="metadata" muted playsinline />
-        <div class="absolute inset-0 flex items-center justify-center">
-          <div class="flex size-[44px] items-center justify-center rounded-full bg-black/50 text-white">
-            <Icon name="lucide:play" class="size-[22px] translate-x-[1px]" />
-          </div>
-        </div>
-        <div
-          v-if="item.duration_ms"
-          class="absolute bottom-[6px] right-[6px] rounded-[4px] bg-black/60 px-[4px] font-body-small text-white"
-        >
-          {{ formatDuration(item.duration_ms) }}
-        </div>
-      </template>
-    </button>
-
-    <div
-      v-if="progress !== void 0"
-      class="absolute inset-0 flex items-center justify-center bg-black/40 font-body-medium-prominent text-white"
-    >
-      {{ Math.round(progress * 100) }}%
-    </div>
-  </div>
+]"
+      :style="items.length === 1 ? singleStyle(item) : void 0"
+      @click="emit('open', i)"
+    >
+      <img
+        v-if="item.kind === 'image'"
+        :src="item.url"
+        alt=""
+        class="size-full object-cover"
+        loading="lazy"
+        @error="emit('error')"
+      >
+      <template v-else>
+        <img
+          v-if="item.thumbnail_url"
+          :src="item.thumbnail_url"
+          alt=""
+          class="size-full object-cover"
+          loading="lazy"
+          @error="emit('error')"
+        >
+        <video v-else :src="item.url" class="size-full object-cover" preload="metadata" muted playsinline />
+        <div class="absolute inset-0 flex items-center justify-center">
+          <div class="flex size-[44px] items-center justify-center rounded-full bg-black/50 text-white">
+            <Icon name="lucide:play" class="size-[22px] translate-x-[1px]" />
+          </div>
+        </div>
+        <div
+          v-if="item.duration_ms"
+          class="absolute bottom-[6px] right-[6px] rounded-[4px] bg-black/60 px-[4px] font-body-small text-white"
+        >
+          {{ formatDuration(item.duration_ms) }}
+        </div>
+      </template>
+    </button>
+
+    <div
+      v-if="progress !== void 0"
+      class="absolute inset-0 flex items-center justify-center bg-black/40 font-body-medium-prominent text-white"
+    >
+      {{ Math.round(progress * 100) }}%
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/chat/chat-media-viewer.vue

@@ -1,29 +1,29 @@
 <template>
-  <Teleport to="body">
-    <div v-if="isOpen && items.length" class="fixed inset-0 z-[9999] bg-black">
-      <DisplayVideo
-        v-if="video"
-        :src="video.url"
-        :poster="video.thumbnail_url || void 0"
-        full-width
-        full-height
-        fit="contain"
-        autoplay
-        play-button
-        click-to-play
-        close-button
-        @close="close"
-      />
-      <template v-else>
-        <Carousel :items="images" :select-index="startIndex" />
-        <div class="absolute top-[24px] left-[24px] z-10">
-          <Button circle color="dark" class="w-[40px] h-[40px]" aria-label="ปิด" @click="close">
-            <Icon name="lucide:x" class="size-[24px]" />
-          </Button>
-        </div>
-      </template>
-    </div>
-  </Teleport>
+  <Teleport to="body">
+    <div v-if="isOpen && items.length" class="fixed inset-0 z-[9999] bg-black">
+      <DisplayVideo
+        v-if="video"
+        :src="video.url"
+        :poster="video.thumbnail_url || void 0"
+        full-width
+        full-height
+        fit="contain"
+        autoplay
+        play-button
+        click-to-play
+        close-button
+        @close="close"
+      />
+      <template v-else>
+        <Carousel :items="images" :select-index="startIndex" />
+        <div class="absolute top-[24px] left-[24px] z-10">
+          <Button circle color="dark" class="w-[40px] h-[40px]" aria-label="ปิด" @click="close">
+            <Icon name="lucide:x" class="size-[24px]" />
+          </Button>
+        </div>
+      </template>
+    </div>
+  </Teleport>
 </template>
 
 <script setup>