pukaad-ui-lib 1.21.1 → 1.22.2

package/dist/runtime/components/profile-cover.vue

@@ -1,84 +1,84 @@
 <template>
-  <!-- <div class="h-[512px] w-full">
-    <div class="relative">
-      <Image :height="512" />
-      <div class="absolute bottom-[24px] right-[24px]" v-if="props.isMyProfile">
-        <PickerImageCoverProfile />
-      </div>
-    </div>
-    <div class="relative w-full p-[24px] pl-[200px]">
-      <div
-        class="absolute left-[24px] top-[-86px] flex justify-center p-[24px]"
-      >
-        <div class="relative">
-          <Avatar :size="128" class="border-[6px] border-white" />
-          <div class="absolute bottom-0 right-0" v-if="props.isMyProfile">
-            <PickerImageProfile>
-              <Button
-                circle
-                size="small"
-                :icon-size="20"
-                prepend-icon="lucide:camera"
-              />
-            </PickerImageProfile>
-          </div>
-        </div>
-      </div>
-      <div class="flex gap-[100px]">
-        <div class="flex flex-col gap-[8px] w-full">
-          <div class="inline-flex flex-wrap items-center gap-[16px]">
-            <div class="font-headline-medium-prominent">
-              {{ props.item?.profile_name || props.item?.id || "-" }}
-            </div>
-            <Icon name="pukaad:verify" size="20" />
-          </div>
-          <div class="flex gap-[24px] text-gray font-body-large">
-            <div
-              v-for="info in infoToShow"
-              :key="info.label"
-              class="flex gap-[4px]"
-            >
-              {{ info.label }}
-              <div class="text-black">{{ info.value }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="flex gap-[16px] items-center">
-          <template v-if="props.isMyProfile">
-            <Button
-              prepend-icon="lucide:plus"
-              :icon-size="20"
-              color="primary"
-              @click="emit('create-post')"
-            >
-              สร้างโพสต์
-            </Button>
-            <PickerOptionMenuUser state="my-profile" disabled-padding />
-          </template>
-          <template v-else>
-            <Button
-              prepend-icon="lucide:message-circle"
-              :icon-size="20"
-              color="primary"
-              @click="emit('chat')"
-            >
-              แชท
-            </Button>
-            <Button
-              v-if="!props.isMyProfile"
-              prepend-icon="lucide:user-round-plus"
-              :icon-size="20"
-              variant="outline"
-              @click="emit('follow')"
-            >
-              ติดตาม
-            </Button>
-            <PickerOptionMenuUser state="profile" disabled-padding />
-          </template>
-        </div>
-      </div>
-    </div>
-  </div> -->
+  <!-- <div class="h-[512px] w-full">
+    <div class="relative">
+      <Image :height="512" />
+      <div class="absolute bottom-[24px] right-[24px]" v-if="props.isMyProfile">
+        <PickerImageCoverProfile />
+      </div>
+    </div>
+    <div class="relative w-full p-[24px] pl-[200px]">
+      <div
+        class="absolute left-[24px] top-[-86px] flex justify-center p-[24px]"
+      >
+        <div class="relative">
+          <Avatar :size="128" class="border-[6px] border-white" />
+          <div class="absolute bottom-0 right-0" v-if="props.isMyProfile">
+            <PickerImageProfile>
+              <Button
+                circle
+                size="small"
+                :icon-size="20"
+                prepend-icon="lucide:camera"
+              />
+            </PickerImageProfile>
+          </div>
+        </div>
+      </div>
+      <div class="flex gap-[100px]">
+        <div class="flex flex-col gap-[8px] w-full">
+          <div class="inline-flex flex-wrap items-center gap-[16px]">
+            <div class="font-headline-medium-prominent">
+              {{ props.item?.profile_name || props.item?.id || "-" }}
+            </div>
+            <Icon name="pukaad:verify" size="20" />
+          </div>
+          <div class="flex gap-[24px] text-gray font-body-large">
+            <div
+              v-for="info in infoToShow"
+              :key="info.label"
+              class="flex gap-[4px]"
+            >
+              {{ info.label }}
+              <div class="text-black">{{ info.value }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="flex gap-[16px] items-center">
+          <template v-if="props.isMyProfile">
+            <Button
+              prepend-icon="lucide:plus"
+              :icon-size="20"
+              color="primary"
+              @click="emit('create-post')"
+            >
+              สร้างโพสต์
+            </Button>
+            <PickerOptionMenuUser state="my-profile" disabled-padding />
+          </template>
+          <template v-else>
+            <Button
+              prepend-icon="lucide:message-circle"
+              :icon-size="20"
+              color="primary"
+              @click="emit('chat')"
+            >
+              แชท
+            </Button>
+            <Button
+              v-if="!props.isMyProfile"
+              prepend-icon="lucide:user-round-plus"
+              :icon-size="20"
+              variant="outline"
+              @click="emit('follow')"
+            >
+              ติดตาม
+            </Button>
+            <PickerOptionMenuUser state="profile" disabled-padding />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div> -->
 </template>
 
 <script setup>

package/dist/runtime/components/progress-bar.vue

@@ -1,21 +1,21 @@
 <template>
-  <div
-    class="rounded-full"
+  <div
+    class="rounded-full"
     :style="{
   backgroundColor: props.colorBackground,
   height: `${props.height}px`,
   width: props.fullWidth ? '100%' : `${props.width}px`
-}"
-  >
-    <div
-      class="rounded-full"
+}"
+  >
+    <div
+      class="rounded-full"
       :style="{
   backgroundColor: props.colorActive,
   height: `${props.height}px`,
   width: `${value}%`
-}"
-    ></div>
-  </div>
+}"
+    ></div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/read-more-text.vue

@@ -1,5 +1,5 @@
 <template>
- <div>แก้หมด</div>
+ <div>แก้หมด</div>
 </template>
 
 <script setup>

package/dist/runtime/components/tab.d.vue.ts

@@ -4,10 +4,10 @@ type __VLS_ModelProps = {
     modelValue?: string | number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: any, __VLS_8: {
+declare var __VLS_7: `tab-${any}-label`, __VLS_8: {
     active: boolean;
     disabled: any;
-}, __VLS_11: any, __VLS_12: {}, __VLS_15: any, __VLS_16: {}, __VLS_24: any, __VLS_25: {}, __VLS_28: any, __VLS_29: {}, __VLS_47: any, __VLS_48: {
+}, __VLS_11: `tab-${any}-label-text`, __VLS_12: {}, __VLS_15: `tab-${any}-label-text-prepend-icon`, __VLS_16: {}, __VLS_24: `tab-${any}-label-text-word`, __VLS_25: {}, __VLS_28: `tab-${any}-label-text-append-icon`, __VLS_29: {}, __VLS_47: `tab-content-${any}`, __VLS_48: {
     active: boolean;
 };
 type __VLS_Slots = {} & {

package/dist/runtime/components/tab.vue

@@ -1,104 +1,104 @@
 <template>
-  <div v-if="!props.disabledHeader">
-    <div class="relative">
-      <button
-        v-if="!isTabScrollLeft"
+  <div v-if="!props.disabledHeader">
+    <div class="relative">
+      <button
+        v-if="!isTabScrollLeft"
         :class="[
   'absolute flex items-center justify-start left-0 top-1/2 transform -translate-y-1/2',
   'bg-gradient-to-r from-white via-white to-transparent w-12 cursor-pointer',
   buttonSize
-]"
-        @click="onScrollLeft"
-      >
-        <Icon name="mdi:chevron-left" size="24" />
-      </button>
-
-      <div
-        ref="tabHeaderRef"
-        class="flex overflow-x-hidden"
+]"
+        @click="onScrollLeft"
+      >
+        <Icon name="mdi:chevron-left" size="24" />
+      </button>
+
+      <div
+        ref="tabHeaderRef"
+        class="flex overflow-x-hidden"
         :style="{
   columnGap: `${props.tabButtonGap}px`
-}"
-      >
-        <div v-for="(tab, i) in items" :key="i" @click="activeTab = tab.value">
-          <slot
-            :name="`tab-${tab.value}-label`"
-            :active="activeTab == tab.value"
-            :disabled="tab.disabled"
-          >
-            <button
+}"
+      >
+        <div v-for="(tab, i) in items" :key="i" @click="activeTab = tab.value">
+          <slot
+            :name="`tab-${tab.value}-label`"
+            :active="activeTab == tab.value"
+            :disabled="tab.disabled"
+          >
+            <button
               :class="[
   'flex items-center justify-center font-body-large p-[16px] gap-[8px] text-nowrap',
   'cursor-pointer disabled:cursor-not-allowed',
   tab.disabled ? 'text-cloud' : 'text-gray',
   color(tab.value),
   buttonSize
-]"
-              :disabled="tab.disabled"
-            >
-              <slot :name="`tab-${tab.value}-label-text`">
-                <slot
+]"
+              :disabled="tab.disabled"
+            >
+              <slot :name="`tab-${tab.value}-label-text`">
+                <slot
                   v-if="
   $slots[`tab-${tab.value}-label-text-prepend-icon`] || props.tabButtonPrependIcon
-"
-                  :name="`tab-${tab.value}-label-text-prepend-icon`"
-                >
-                  <Icon :name="props.tabButtonPrependIcon" />
-                </slot>
-                <slot :name="`tab-${tab.value}-label-text-word`">
-                  {{ tab.label }}
-                </slot>
-                <slot
+"
+                  :name="`tab-${tab.value}-label-text-prepend-icon`"
+                >
+                  <Icon :name="props.tabButtonPrependIcon" />
+                </slot>
+                <slot :name="`tab-${tab.value}-label-text-word`">
+                  {{ tab.label }}
+                </slot>
+                <slot
                   v-if="
   $slots[`tab-${tab.value}-label-text-append-icon`] || props.tabButtonAppendIcon
-"
-                  :name="`tab-${tab.value}-label-text-append-icon`"
-                >
-                  <Icon :name="props.tabButtonAppendIcon" />
-                </slot>
-              </slot>
-            </button>
-          </slot>
-        </div>
-      </div>
-
-      <button
-        v-if="!isTabScrollRight"
+"
+                  :name="`tab-${tab.value}-label-text-append-icon`"
+                >
+                  <Icon :name="props.tabButtonAppendIcon" />
+                </slot>
+              </slot>
+            </button>
+          </slot>
+        </div>
+      </div>
+
+      <button
+        v-if="!isTabScrollRight"
         :class="[
   'absolute flex items-center justify-end right-0 top-1/2 transform -translate-y-1/2',
   'bg-gradient-to-l from-white via-white to-transparent w-12 cursor-pointer',
   buttonSize
-]"
-        @click="onScrollRight"
-      >
-        <Icon name="mdi:chevron-right" size="24" />
-      </button>
-    </div>
-
-    <Divider
-      v-if="!props.disabledHeaderDivider && props.variant == 'text'"
-      class="mt-[-2px]"
-    />
-  </div>
-
-  <div
-    v-if="!props.disabledContent"
-    v-for="(content, i_content) in items"
-    :key="i_content"
-    v-show="activeTab == content.value"
+]"
+        @click="onScrollRight"
+      >
+        <Icon name="mdi:chevron-right" size="24" />
+      </button>
+    </div>
+
+    <Divider
+      v-if="!props.disabledHeaderDivider && props.variant == 'text'"
+      class="mt-[-2px]"
+    />
+  </div>
+
+  <div
+    v-if="!props.disabledContent"
+    v-for="(content, i_content) in items"
+    :key="i_content"
+    v-show="activeTab == content.value"
     :style="{
   marginTop: !props.disabledHeader ? `${props.tabContentGab}px` : '0px'
-}"
-  >
-    <slot
-      :name="`tab-content-${content.value}`"
-      :active="activeTab == content.value"
-    >
-      <div class="font-body-medium">
-        {{ content.content }}
-      </div>
-    </slot>
-  </div>
+}"
+  >
+    <slot
+      :name="`tab-content-${content.value}`"
+      :active="activeTab == content.value"
+    >
+      <div class="font-body-medium">
+        {{ content.content }}
+      </div>
+    </slot>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/tab.vue.d.ts

@@ -4,10 +4,10 @@ type __VLS_ModelProps = {
     modelValue?: string | number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: any, __VLS_8: {
+declare var __VLS_7: `tab-${any}-label`, __VLS_8: {
     active: boolean;
     disabled: any;
-}, __VLS_11: any, __VLS_12: {}, __VLS_15: any, __VLS_16: {}, __VLS_24: any, __VLS_25: {}, __VLS_28: any, __VLS_29: {}, __VLS_47: any, __VLS_48: {
+}, __VLS_11: `tab-${any}-label-text`, __VLS_12: {}, __VLS_15: `tab-${any}-label-text-prepend-icon`, __VLS_16: {}, __VLS_24: `tab-${any}-label-text-word`, __VLS_25: {}, __VLS_28: `tab-${any}-label-text-append-icon`, __VLS_29: {}, __VLS_47: `tab-content-${any}`, __VLS_48: {
     active: boolean;
 };
 type __VLS_Slots = {} & {

package/dist/runtime/components/table.d.vue.ts

@@ -15,8 +15,8 @@ declare var __VLS_1: {
 }, __VLS_10: {
     item: any;
     header: any;
-    index: any;
-}, __VLS_13: any, __VLS_14: {
+    index: number;
+}, __VLS_13: `item-${any}`, __VLS_14: {
     item: any;
 };
 type __VLS_Slots = {} & {
@@ -28,7 +28,17 @@ type __VLS_Slots = {} & {
 } & {
     item?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-page": (...args: any[]) => void;
+    "change-page": (...args: any[]) => void;
+    "click-row": (...args: any[]) => void;
+    "update:page": (value: number) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSelect-page"?: ((...args: any[]) => any) | undefined;
+    "onChange-page"?: ((...args: any[]) => any) | undefined;
+    "onClick-row"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
     items: Record<string, any>[];
     fullHeight: false;
     totalPage: number;

package/dist/runtime/components/table.vue

@@ -1,93 +1,93 @@
 <template>
-  <div class="bg-white rounded-[8px] h-full">
-    <div
-      class="overflow-auto"
+  <div class="bg-white rounded-[8px] h-full">
+    <div
+      class="overflow-auto"
       :style="{
   height: props.fullHeight ? '100%' : `${props.height}px`
-}"
-    >
-      <table class="w-full">
-        <thead v-if="!props.disabledHeader">
-          <slot name="header" :item="props.itemHeader">
-            <tr>
-              <template v-for="(header, i) in itemHeaders" :key="i">
-                <th class="sticky top-0 bg-white">
-                  <div
-                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
+}"
+    >
+      <table class="w-full">
+        <thead v-if="!props.disabledHeader">
+          <slot name="header" :item="props.itemHeader">
+            <tr>
+              <template v-for="(header, i) in itemHeaders" :key="i">
+                <th class="sticky top-0 bg-white">
+                  <div
+                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
                     :style="{
   justifyContent: header.alinement || props.headerAlinement
-}"
-                  >
-                    <div class="flex">
-                      {{ header.label }}
-                    </div>
-                    <div
+}"
+                  >
+                    <div class="flex">
+                      {{ header.label }}
+                    </div>
+                    <div
                       :class="[
   'flex justify-center items-center cursor-pointer',
   sortkey === header.key && 'text-primary'
-]"
-                      @click="onSortBy(header.key)"
-                    >
-                      <Icon name="fa6-solid:sort" size="16" />
-                    </div>
-                  </div>
-                </th>
-              </template>
-            </tr>
-          </slot>
-        </thead>
-
-        <slot name="body" :items="items" :header="itemHeaders">
-          <tbody>
-            <tr
-              v-for="(body, i_body) in items"
-              :key="i_body"
-              @click="emit('click-row', body, i_body)"
-            >
-              <slot
-                name="item"
-                :item="body"
-                :header="itemHeaders"
-                :index="i_body"
-              >
-                <td
-                  v-for="(header, i_header) in itemHeaders"
-                  :key="i_header"
-                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
-                >
-                  <slot :name="`item-${header.key}`" :item="body">
-                    <div>
-                      {{ body[header.key] }}
-                    </div>
-                  </slot>
-                </td>
-              </slot>
-            </tr>
-          </tbody>
-        </slot>
-      </table>
-    </div>
-
-    <div
-      v-if="items.length === 0"
-      class="w-full h-full flex justify-center items-center p-[16px]"
-    >
-      <Icon name="pukaad:page-not-found" size="150"></Icon>
-    </div>
-
-    <div
-      v-if="items.length > 0"
-      class="p-[14px] flex justify-center items-center"
-    >
-      <Pagination
-        :totalPage="props.totalPage"
-        :totalVisible="props.paginationVisible"
-        @change="(e) => emit('change-page', e)"
-        @select="(e) => emit('select-page', e)"
-        v-model="page"
-      />
-    </div>
-  </div>
+]"
+                      @click="onSortBy(header.key)"
+                    >
+                      <Icon name="fa6-solid:sort" size="16" />
+                    </div>
+                  </div>
+                </th>
+              </template>
+            </tr>
+          </slot>
+        </thead>
+
+        <slot name="body" :items="items" :header="itemHeaders">
+          <tbody>
+            <tr
+              v-for="(body, i_body) in items"
+              :key="i_body"
+              @click="emit('click-row', body, i_body)"
+            >
+              <slot
+                name="item"
+                :item="body"
+                :header="itemHeaders"
+                :index="i_body"
+              >
+                <td
+                  v-for="(header, i_header) in itemHeaders"
+                  :key="i_header"
+                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
+                >
+                  <slot :name="`item-${header.key}`" :item="body">
+                    <div>
+                      {{ body[header.key] }}
+                    </div>
+                  </slot>
+                </td>
+              </slot>
+            </tr>
+          </tbody>
+        </slot>
+      </table>
+    </div>
+
+    <div
+      v-if="items.length === 0"
+      class="w-full h-full flex justify-center items-center p-[16px]"
+    >
+      <Icon name="pukaad:page-not-found" size="150"></Icon>
+    </div>
+
+    <div
+      v-if="items.length > 0"
+      class="p-[14px] flex justify-center items-center"
+    >
+      <Pagination
+        :totalPage="props.totalPage"
+        :totalVisible="props.paginationVisible"
+        @change="(e) => emit('change-page', e)"
+        @select="(e) => emit('select-page', e)"
+        v-model="page"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/table.vue.d.ts

@@ -15,8 +15,8 @@ declare var __VLS_1: {
 }, __VLS_10: {
     item: any;
     header: any;
-    index: any;
-}, __VLS_13: any, __VLS_14: {
+    index: number;
+}, __VLS_13: `item-${any}`, __VLS_14: {
     item: any;
 };
 type __VLS_Slots = {} & {
@@ -28,7 +28,17 @@ type __VLS_Slots = {} & {
 } & {
     item?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-page": (...args: any[]) => void;
+    "change-page": (...args: any[]) => void;
+    "click-row": (...args: any[]) => void;
+    "update:page": (value: number) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSelect-page"?: ((...args: any[]) => any) | undefined;
+    "onChange-page"?: ((...args: any[]) => any) | undefined;
+    "onClick-row"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
     items: Record<string, any>[];
     fullHeight: false;
     totalPage: number;