pukaad-ui-lib 1.0.1

package/dist/runtime/components/card/card-recommend-place.d.vue.ts

@@ -0,0 +1,21 @@
+interface Item {
+    id: number;
+    title: string;
+    image: string;
+    rating: number;
+    review_count: number;
+}
+type __VLS_Props = {
+    items?: Item[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "item-click": (...args: any[]) => void;
+    "view-all": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onItem-click"?: ((...args: any[]) => any) | undefined;
+    "onView-all"?: ((...args: any[]) => any) | undefined;
+}>, {
+    items: Item[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,62 @@
+<template>
+  <Card column-gap="8" variant="outline" width="380">
+    <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="!props.items || props.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 items-center gap-[16px] cursor-pointer py-[8px]"
+      @click="handleClickCard(item)"
+    >
+      <Image
+        :src="item.image"
+        alt="image"
+        width="100"
+        height="56"
+        class="rounded-[4px]"
+      />
+      <div class="flex flex-col gap-[4px]">
+        <div class="font-body-large max-w-[232px] truncate">
+          {{ item.title }}
+        </div>
+        <div class="flex gap-[8px] text-gray font-body-medium">
+          <InputRating v-model="item.rating" readonly :rating-size="14" />
+          {{ item.review_count }} พัน
+        </div>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["item-click", "view-all"]);
+const handleClickCard = (item) => {
+  emit("item-click", item);
+};
+</script>

package/dist/runtime/components/card/card-recommend-place.vue.d.ts

@@ -0,0 +1,21 @@
+interface Item {
+    id: number;
+    title: string;
+    image: string;
+    rating: number;
+    review_count: number;
+}
+type __VLS_Props = {
+    items?: Item[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "item-click": (...args: any[]) => void;
+    "view-all": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onItem-click"?: ((...args: any[]) => any) | undefined;
+    "onView-all"?: ((...args: any[]) => any) | undefined;
+}>, {
+    items: Item[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,24 @@
+interface Item {
+    id: number;
+    profile_name: string;
+    profile_verified: boolean;
+    profile_posts: number;
+    profile_followers: number;
+    profile_image: {
+        image_url: string;
+    };
+}
+type __VLS_Props = {
+    items?: Item[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "item-click": (...args: any[]) => void;
+    "view-all": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onItem-click"?: ((...args: any[]) => any) | undefined;
+    "onView-all"?: ((...args: any[]) => any) | undefined;
+}>, {
+    items: Item[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,63 @@
+<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>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] }
+});
+const emit = defineEmits(["item-click", "view-all"]);
+const handleClickCard = (item) => {
+  emit("item-click", item);
+};
+</script>

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

@@ -0,0 +1,24 @@
+interface Item {
+    id: number;
+    profile_name: string;
+    profile_verified: boolean;
+    profile_posts: number;
+    profile_followers: number;
+    profile_image: {
+        image_url: string;
+    };
+}
+type __VLS_Props = {
+    items?: Item[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "item-click": (...args: any[]) => void;
+    "view-all": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onItem-click"?: ((...args: any[]) => any) | undefined;
+    "onView-all"?: ((...args: any[]) => any) | undefined;
+}>, {
+    items: Item[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+import type { CardReviewProps } from "@/types/components/card/card-review";
+type __VLS_Props = {
+    item: CardReviewProps;
+    isProfile: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "toggle-like": (item: CardReviewProps, liked: boolean) => any;
+    "select-image": (item: CardReviewProps, index: number, liked: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
+    "onSelect-image"?: ((item: CardReviewProps, index: number, liked: boolean) => any) | undefined;
+}>, {
+    item: CardReviewProps;
+    isProfile: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,134 @@
+<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"
+                  :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>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const isOpen = ref(false);
+const props = defineProps({
+  item: { type: Object, required: true, default: () => ({
+    review_id: "0",
+    user: {
+      user_id: "0",
+      name: "",
+      avatar: "",
+      path_name: "",
+      review_count: 0,
+      like_count: 0
+    },
+    review: {
+      rating: 0,
+      created_at: "",
+      description: "",
+      like_count: 0,
+      liked: false
+    },
+    replies: {
+      replies_id: 0,
+      author: "",
+      description: "",
+      created_at: ""
+    }
+  }) },
+  isProfile: { type: Boolean, required: true, default: false }
+});
+const emit = defineEmits(["toggle-like", "select-image"]);
+const liked = ref(props.item.review?.liked ?? false);
+const likeCount = ref(props.item.review?.like_count ?? 0);
+const menuType = computed(() => props.isProfile ? "my-profile" : "profile");
+const NavigateToProfile = (pathName) => {
+  if (!pathName) return;
+  router.push(`/${pathName}`);
+};
+function toggleLike() {
+  if (liked.value) {
+    likeCount.value -= 1;
+    liked.value = false;
+  } else {
+    likeCount.value += 1;
+    liked.value = true;
+  }
+  emit("toggle-like", props.item, liked.value);
+}
+const selectImage = (index) => {
+  isOpen.value = true;
+  emit("select-image", props.item, index, liked.value);
+};
+</script>

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

@@ -0,0 +1,17 @@
+import type { CardReviewProps } from "@/types/components/card/card-review";
+type __VLS_Props = {
+    item: CardReviewProps;
+    isProfile: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "toggle-like": (item: CardReviewProps, liked: boolean) => any;
+    "select-image": (item: CardReviewProps, index: number, liked: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
+    "onSelect-image"?: ((item: CardReviewProps, index: number, liked: boolean) => any) | undefined;
+}>, {
+    item: CardReviewProps;
+    isProfile: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+import type { CardUserBlogProps } from "@/types/components/card/card-user-blog";
+type __VLS_Props = {
+    item: CardUserBlogProps;
+    isProfile?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "blog-pin": () => any;
+    "blog-unpin": () => any;
+    "blog-edit": (item: CardUserBlogProps) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onBlog-pin"?: (() => any) | undefined;
+    "onBlog-unpin"?: (() => any) | undefined;
+    "onBlog-edit"?: ((item: CardUserBlogProps) => any) | undefined;
+}>, {
+    isProfile: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,110 @@
+<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
+          :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
+        :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>
+</template>
+
+<script setup>
+import Image from "../image/image.vue";
+import { useRouter } from "vue-router";
+import { ref, watch } from "vue";
+const props = defineProps({
+  item: { type: Object, required: true },
+  isProfile: { type: Boolean, required: false, default: false }
+});
+const router = useRouter();
+const emit = defineEmits(["blog-pin", "blog-unpin", "blog-edit"]);
+const isPinned = ref(props.item.ispinned);
+watch(
+  () => props.item.ispinned,
+  (val) => {
+    isPinned.value = !!val;
+  }
+);
+const onProfileClick = () => {
+  router.push(`/${props.item.user.path_name}`);
+};
+const onBlogPin = () => {
+  isPinned.value = true;
+  emit("blog-pin");
+};
+const onBlogUnpin = () => {
+  isPinned.value = false;
+  emit("blog-unpin");
+};
+const onBlogEdit = () => {
+  emit("blog-edit", props.item);
+  console.log(props.item);
+};
+</script>

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

@@ -0,0 +1,18 @@
+import type { CardUserBlogProps } from "@/types/components/card/card-user-blog";
+type __VLS_Props = {
+    item: CardUserBlogProps;
+    isProfile?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "blog-pin": () => any;
+    "blog-unpin": () => any;
+    "blog-edit": (item: CardUserBlogProps) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onBlog-pin"?: (() => any) | undefined;
+    "onBlog-unpin"?: (() => any) | undefined;
+    "onBlog-edit"?: ((item: CardUserBlogProps) => any) | undefined;
+}>, {
+    isProfile: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,40 @@
+export interface User {
+    id: string;
+    profile_image: {
+        image_url: string;
+    };
+    profile_name: string;
+    profile_verified?: boolean;
+    profile_followers?: number;
+    profile_path: {
+        path_name: string;
+    };
+    profile_posts: number;
+    profile_bio: string | null;
+    is_following?: boolean;
+    is_blocked?: boolean;
+}
+type __VLS_Props = {
+    disabledPaddingHorizontal?: boolean;
+    hiddenInfo?: boolean;
+    variant?: "normal" | "search";
+    ellipsis?: boolean;
+    showBlockOption?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: User;
+};
+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: User) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: User) => any) | undefined;
+}>, {
+    variant: "normal" | "search";
+    disabledPaddingHorizontal: boolean;
+    hiddenInfo: boolean;
+    ellipsis: boolean;
+    showBlockOption: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;