pukaad-ui-lib 1.450.0 → 1.450.2

package/dist/runtime/components/modal/modal-review-detail.vue

@@ -1,192 +0,0 @@
-<template>
-  <Modal
-    v-model="modelValue"
-    :title="props.title"
-    :width="1280"
-    divider
-    @close="onClosed"
-  >
-    <Carousel
-      :items="props.items"
-      :select-index="currentIndex"
-      @clicked-image="switcComment = false"
-      :width="1280"
-      :height="768"
-    >
-      <Card v-if="switcComment" full-width>
-        <div class="flex gap-[16px] max-h-[318px]">
-          <div>
-            <!-- <Avatar :src="props.review.user?.avatar" :name="props.review.user?.name" /> -->
-          </div>
-          <div class="flex flex-col gap-[8px] w-full">
-            <div class="flex flex-col gap-[2px]">
-              <div class="flex justify-between items-center">
-                <div class="font-body-large">{{ props.review.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="flex flex-col gap-[6px]">
-                <div class="font-body-small">
-                  {{ props.review.user?.review_count }} รีวิว •
-                  {{ props.review.user?.like_count }} ชื่นชอบรีวิว
-                </div>
-                <div class="flex gap-[8px] items-center">
-                  <InputRating
-                    :size="16"
-                    readonly
-                    :model-value="props.review.review?.rating"
-                  />
-                  <div class="font-body-small">
-                    {{ props.review.review?.created_at }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              v-if="props.review.review?.description"
-              class="font-body-large max-h-[208px] overflow-y-auto"
-            >
-              {{ props.review.review?.description }}
-            </div>
-          </div>
-        </div>
-      </Card>
-      <div
-        v-else
-        class="w-full bg-gradient-to-b from-transparent to-black/70 p-[16px] text-white flex gap-[16px]"
-      >
-        <div>
-          <!-- <Avatar
-            :src="props.review.user?.avatar"
-            :name="props.review.user?.name"
-          /> -->
-        </div>
-        <div class="flex flex-col gap-[8px] w-full">
-          <div class="flex flex-col gap-[2px]">
-            <div class="flex justify-between items-center">
-              <div class="font-body-large">{{ props.review.user?.name }}</div>
-              <div class="flex gap-[8px] items-center">
-                <Button variant="text" disabled-padding @click="toggleComment">
-                  <Icon
-                    name="lucide:message-square-warning"
-                    :size="20"
-                    color="white"
-                  />
-                </Button>
-              </div>
-            </div>
-            <div class="flex flex-col gap-[6px]">
-              <div class="font-body-small">
-                {{ props.review.user?.review_count }} รีวิว •
-                {{ props.review.user?.like_count }} ชื่นชอบรีวิว
-              </div>
-              <div class="flex gap-[8px] items-center">
-                <InputRating
-                  :size="16"
-                  readonly
-                  :model-value="props.review.review?.rating"
-                />
-                <div class="font-body-small">
-                  {{ props.review.review?.created_at }}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="props.review.review?.description"
-            class="font-body-large line-clamp-1"
-          >
-            {{ props.review.review?.description }}
-          </div>
-        </div>
-      </div>
-    </Carousel>
-  </Modal>
-</template>
-
-<script setup>
-import { ref, watch, computed } from "vue";
-import Carousel from "../carousel.vue";
-const modelValue = defineModel({ type: Boolean, ...{ default: false } });
-const switcComment = ref(false);
-const emit = defineEmits(["toggle-like"]);
-const props = defineProps({
-  title: { type: String, required: true, default: "\u0E41\u0E2A\u0E14\u0E07\u0E2A\u0E37\u0E48\u0E2D" },
-  items: { type: Array, required: true, default: () => [] },
-  review: { type: Object, required: true, default: () => ({
-    review_id: "0",
-    user: {
-      user_id: "0",
-      name: "Guest",
-      avatar: "",
-      path_name: "",
-      review_count: 0,
-      like_count: 0
-    },
-    review: {
-      rating: 0,
-      created_at: "",
-      description: "",
-      like_count: 0,
-      liked: false
-    }
-  }) },
-  selectIndex: { type: Number, required: true, default: 0 },
-  isProfile: { type: Boolean, required: true, default: false }
-});
-const currentIndex = ref(props.selectIndex);
-const liked = ref(props.review.review.liked);
-const likeCount = ref(props.review.review.like_count);
-function onClosed() {
-  modelValue.value = false;
-  currentIndex.value = props.selectIndex;
-  switcComment.value = false;
-}
-function toggleLike() {
-  if (liked.value) {
-    likeCount.value -= 1;
-    liked.value = false;
-  } else {
-    likeCount.value += 1;
-    liked.value = true;
-  }
-  emit("toggle-like", props.review.review_id, liked.value);
-}
-function toggleComment() {
-  switcComment.value = !switcComment.value;
-}
-const menuType = computed(() => props.isProfile ? "my-profile" : "profile");
-watch(
-  () => props.selectIndex,
-  (newVal) => currentIndex.value = newVal
-);
-watch(
-  () => props.review.review.liked,
-  (newVal) => {
-    liked.value = newVal;
-  }
-);
-watch(
-  () => props.review.review.like_count,
-  (newVal) => {
-    likeCount.value = newVal;
-  }
-);
-</script>

package/dist/runtime/components/modal/modal-review-detail.vue.d.ts

@@ -1,21 +0,0 @@
-import type { ModalReviewDetailProps } from "#pukaad-ui/types/components/modal/modal-review-detail";
-type __VLS_Props = ModalReviewDetailProps;
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
-    "toggle-like": (reviewId: string, liked: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    "onToggle-like"?: ((reviewId: string, liked: boolean) => any) | undefined;
-}>, {
-    title: string;
-    items: string[];
-    selectIndex: number;
-    isProfile: boolean;
-    review: import("../../../types/components/card/card-review.js").CardReviewProps;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,86 +0,0 @@
-<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> -->
-</template>
-
-<script setup>
-
-</script>

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

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,48 +0,0 @@
-import type { TabProps, TabColor, TabVariant } from "#pukaad-ui/types/components/tab";
-type __VLS_Props = TabProps;
-type __VLS_ModelProps = {
-    modelValue?: string | number;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: `tab-${any}-label`, __VLS_8: {
-    active: boolean;
-    disabled: any;
-}, __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 = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
-} & {
-    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
-} & {
-    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
-} & {
-    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
-} & {
-    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
-} & {
-    [K in NonNullable<typeof __VLS_47>]?: (props: typeof __VLS_48) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-}>, {
-    variant: TabVariant;
-    color: TabColor;
-    items: Item[];
-    disabledHeader: boolean;
-    tabButtonSize: import("#pukaad-ui/types/components/tab").TabButtonSize;
-    tabButtonGap: string | number;
-    changeTabContentReset: boolean;
-    disabledHeaderDivider: boolean;
-    disabledContent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/tab_old.vue

@@ -1,176 +0,0 @@
-<template>
-  <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"
-        :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
-              :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
-                  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
-                  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"
-        :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"
-    :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>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from "vue";
-import { useScroll } from "@vueuse/core";
-const props = defineProps({
-  items: { type: Array, required: false, default: () => [] },
-  color: { type: String, required: false, default: "primary" },
-  variant: { type: String, required: false, default: "button" },
-  tabButtonPrependIcon: { type: String, required: false },
-  tabButtonAppendIcon: { type: String, required: false },
-  tabButtonSize: { type: String, required: false, default: "medium" },
-  tabButtonGap: { type: [String, Number], required: false, default: 8 },
-  tabContentGab: { type: null, required: false },
-  changeTabContentReset: { type: Boolean, required: false, default: false },
-  disabledHeader: { type: Boolean, required: false, default: false },
-  disabledHeaderDivider: { type: Boolean, required: false, default: false },
-  disabledContent: { type: Boolean, required: false, default: false }
-});
-const tabHeaderRef = ref(null);
-const activeTab = defineModel({ type: [String, Number] });
-const items = computed(() => {
-  return props.items?.filter((item) => !item.hidden);
-});
-const color = (tab) => {
-  if (activeTab.value == tab) {
-    const colors = {
-      primary: {
-        button: "font-body-large-prominent text-primary bg-info rounded-[8px] ",
-        text: " font-body-large-prominent text-primary border-b-[2px] border-primary",
-        outline: "font-body-large-prominent text-primary border-[1px] rounded-full"
-      },
-      black: {
-        button: "font-body-large-prominent bg-dark text-white rounded-[8px]",
-        text: "font-body-large-prominent border-b-[2px] text-black",
-        outline: "font-body-large-prominent border-[1px] border-black rounded-full text-black "
-      }
-    };
-    return colors[props.color]?.[props.variant];
-  } else {
-    const types = {
-      button: "bg-bright rounded-[8px]",
-      outline: "rounded-[8px] border-[1px] border-mercury rounded-full ",
-      text: ""
-    };
-    return types[props.variant];
-  }
-};
-const buttonSize = computed(() => {
-  const sizes = {
-    small: "h-[32px]",
-    medium: "h-[40px]",
-    large: "h-[48px]"
-  };
-  return sizes[props.tabButtonSize];
-});
-const { x, arrivedState } = useScroll(tabHeaderRef, {
-  behavior: "smooth"
-});
-const onScrollLeft = () => {
-  x.value -= 100;
-};
-const onScrollRight = () => {
-  x.value += 100;
-};
-const isTabScrollLeft = computed(() => {
-  return arrivedState.left;
-});
-const isTabScrollRight = computed(() => arrivedState.right);
-onMounted(() => {
-  if (!activeTab.value) {
-    activeTab.value = props.items[0]?.value;
-  }
-});
-</script>

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

@@ -1,48 +0,0 @@
-import type { TabProps, TabColor, TabVariant } from "#pukaad-ui/types/components/tab";
-type __VLS_Props = TabProps;
-type __VLS_ModelProps = {
-    modelValue?: string | number;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: `tab-${any}-label`, __VLS_8: {
-    active: boolean;
-    disabled: any;
-}, __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 = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
-} & {
-    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
-} & {
-    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
-} & {
-    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
-} & {
-    [K in NonNullable<typeof __VLS_28>]?: (props: typeof __VLS_29) => any;
-} & {
-    [K in NonNullable<typeof __VLS_47>]?: (props: typeof __VLS_48) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-}>, {
-    variant: TabVariant;
-    color: TabColor;
-    items: Item[];
-    disabledHeader: boolean;
-    tabButtonSize: import("#pukaad-ui/types/components/tab").TabButtonSize;
-    tabButtonGap: string | number;
-    changeTabContentReset: boolean;
-    disabledHeaderDivider: boolean;
-    disabledContent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};