pukaad-ui-lib 1.309.0 → 1.311.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.309.0",
+  "version": "1.311.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/button.vue

@@ -4,16 +4,16 @@
   props.variant === 'text' || props.variant === 'link' ? '!p-0 !h-auto' : '',
   props.circle && 'rounded-full aspect-square',
   props.class
-]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
-    :disabled="props.loading || props.disabled">
-    <span class="inline-grid place-items-center">
-      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
-        :class="{ invisible: props.loading }">
-        <slot />
-      </span>
-      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
-    </span>
-  </ShadButton>
+]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
+    :disabled="props.loading || props.disabled">
+    <span class="inline-grid place-items-center">
+      <span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
+        :class="{ invisible: props.loading }">
+        <slot />
+      </span>
+      <ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
+    </span>
+  </ShadButton>
 </template>
 
 <script setup>

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

@@ -95,6 +95,7 @@
     v-model="isOpen"
     :items="props.item.review?.images"
     :start-index="startIndex"
+    :review="props.item"
     title="รูปภาพรีวิว"
   />
 

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-rating.d.vue.ts

@@ -1,20 +1,17 @@
 import type { InputRatingProps } from "#pukaad-ui/types/components/input/input-rating";
-type __VLS_Props = InputRatingProps;
-declare const ratingValue: import("vue").ModelRef<number, string, number, number>;
-type __VLS_ModelProps = {
-    modelValue?: typeof ratingValue['value'];
+type __VLS_Props = InputRatingProps & {
+    modelValue?: number;
 };
-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: number) => any;
-} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (value: number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     size: number;
     borderColor: string;
+    modelValue: number;
     backgroundColor: string;
     readonly: boolean;
     ratingStep: number;

package/dist/runtime/components/input/input-rating.vue

@@ -1,54 +1,52 @@
 <template>
-  <NuxtRating
-    :border-color="props.borderColor"
-    :active-color="props.activeColor"
-    :inactive-color="props.backgroundColor"
-    :border-width="props.borderSize"
-    :read-only="props.readonly"
-    :rating-step="props.ratingStep"
-    :rounded-corners="true"
-    :rating-size="`${props.size}px`"
-    :rating-content="[
-  12,
-  17.27,
-  16.15,
-  19.78,
-  17.64,
-  18.7,
-  16.54,
-  13.98,
-  20.21,
-  10.8,
-  19.64,
-  9.05,
-  14.81,
-  8.64,
-  12.92,
-  4.18,
-  11.08,
-  4.18,
-  9.19,
-  8.63,
-  4.36,
-  9.04,
-  3.79,
-  10.8,
-  7.46,
-  13.98,
-  6.36,
-  18.7,
-  7.85,
-  19.78,
-  12,
-  17.27
-]"
-    @rating-selected="onSelect"
-    :rating-value="ratingValue"
-  />
+  <div class="inline-flex items-center gap-0">
+    <svg
+      v-for="n in 5"
+      :key="n"
+      :width="props.size"
+      :height="props.size"
+      viewBox="4 2 16.42 20.21"
+      xmlns="http://www.w3.org/2000/svg"
+      :style="{
+  cursor: props.readonly ? 'default' : 'pointer',
+  marginRight: n < 5 ? '2px' : '0'
+}"
+      @click="!props.readonly && onSelect(n)"
+    >
+      <defs>
+        <linearGradient
+          :id="`star-grad-${uid}-${n}`"
+          x1="0"
+          x2="100%"
+          y1="0"
+          y2="0"
+        >
+          <stop
+            :offset="`${getFill(n)}%`"
+            :stop-color="props.activeColor"
+            stop-opacity="1"
+          />
+          <stop
+            :offset="`${getFill(n)}%`"
+            :stop-color="props.backgroundColor"
+            stop-opacity="1"
+          />
+        </linearGradient>
+      </defs>
+      <polygon
+        points="12,17.27,16.15,19.78,17.64,18.7,16.54,13.98,20.21,10.8,19.64,9.05,14.81,8.64,12.92,4.18,11.08,4.18,9.19,8.63,4.36,9.04,3.79,10.8,7.46,13.98,6.36,18.7,7.85,19.78,12,17.27"
+        :fill="`url(#star-grad-${uid}-${n})`"
+        :stroke="props.borderSize > 0 ? props.borderColor : 'none'"
+        :stroke-width="props.borderSize"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </div>
 </template>
 
 <script setup>
-const emit = defineEmits(["select"]);
+import { computed } from "vue";
+const emit = defineEmits(["select", "update:modelValue"]);
 const props = defineProps({
   readonly: { type: Boolean, required: false, default: false },
   ratingStep: { type: Number, required: false, default: 1 },
@@ -56,14 +54,19 @@ const props = defineProps({
   borderSize: { type: Number, required: false, default: 0 },
   borderColor: { type: String, required: false, default: "#fbc02d" },
   backgroundColor: { type: String, required: false, default: "#c4c4c4" },
-  activeColor: { type: String, required: false, default: "#fbc02d" }
-});
-const ratingValue = defineModel({
-  type: Number,
-  default: 0
+  activeColor: { type: String, required: false, default: "#fbc02d" },
+  modelValue: { type: Number, required: false, default: 0 }
 });
+const uid = Math.random().toString(36).slice(2, 7);
+const ratingVal = computed(() => props.modelValue ?? 0);
+const getFill = (n) => {
+  const val = ratingVal.value;
+  if (val >= n) return 100;
+  if (val < n - 1) return 0;
+  return Math.round((val - (n - 1)) * 100);
+};
 const onSelect = (value) => {
-  ratingValue.value = value;
+  emit("update:modelValue", value);
   emit("select", value);
 };
 </script>

package/dist/runtime/components/input/input-rating.vue.d.ts

@@ -1,20 +1,17 @@
 import type { InputRatingProps } from "#pukaad-ui/types/components/input/input-rating";
-type __VLS_Props = InputRatingProps;
-declare const ratingValue: import("vue").ModelRef<number, string, number, number>;
-type __VLS_ModelProps = {
-    modelValue?: typeof ratingValue['value'];
+type __VLS_Props = InputRatingProps & {
+    modelValue?: number;
 };
-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: number) => any;
-} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (value: number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     size: number;
     borderColor: string;
+    modelValue: number;
     backgroundColor: string;
     readonly: boolean;
     ratingStep: number;

package/dist/runtime/components/modal/modal-media-view.d.vue.ts

@@ -1,7 +1,10 @@
+import type { CardReviewProps } from "#pukaad-ui/types/components/card/card-review";
 export interface ModalMediaViewProps {
     items?: string[];
     title?: string;
     startIndex?: number;
+    /** ข้อมูล review เต็ม (user, review, replies) สำหรับแสดงที่ overlay ด้านล่าง */
+    review?: CardReviewProps;
 }
 type __VLS_Props = ModalMediaViewProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/modal/modal-media-view.vue

@@ -9,15 +9,153 @@
         :select-index="props.startIndex"
         class="h-full"
       />
+
+      <!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
+      <div
+        v-if="props.review"
+        class="absolute bottom-0 w-full z-10"
+        style="
+          background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.75) 0%,
+            transparent 100%
+          );
+        "
+      >
+        <div class="flex flex-colw-full">
+          <!-- User row -->
+          <div
+            v-if="!showMoreDescription"
+            class="flex gap-[16px] p-[16px] w-full text-white"
+          >
+            <Avatar
+              :src="props.review.user?.avatar"
+              :alt="props.review.user?.name"
+              :size="36"
+              class="shrink-0"
+            />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex justify-between w-full">
+                  <span class="font-body-large">
+                    {{ props.review.user?.name }}
+                  </span>
+                  <Icon name="lucide:flag" />
+                </div>
+                <div class="flex flex-col">
+                  <span class="font-body-small">
+                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
+                    รีวิว •
+                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
+                    ชื่นชอบรีวิว
+                  </span>
+
+                  <!-- Rating + date -->
+                  <div
+                    v-if="props.review.review"
+                    class="flex items-center gap-[8px]"
+                  >
+                    <InputRating
+                      :size="14"
+                      readonly
+                      :model-value="props.review.review.rating"
+                    />
+                    <span class="font-body-small opacity-75">
+                      {{
+                        convertDateTorelativeText(
+  props.review.review.created_at ?? ""
+)
+                      }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <!-- Description -->
+              <p
+                v-if="props.review.review?.description"
+                class="font-body-large line-clamp-1 cursor-pointer"
+                @click="showMoreDescription = true"
+              >
+                {{ props.review.review.description }}
+              </p>
+            </div>
+          </div>
+          <div
+            v-if="showMoreDescription"
+            class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
+          >
+            <Avatar
+              :src="props.review.user?.avatar"
+              :alt="props.review.user?.name"
+              :size="36"
+              class="shrink-0"
+            />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="flex flex-col gap-[8px]">
+                <div class="flex justify-between w-full">
+                  <span class="font-body-large">
+                    {{ props.review.user?.name }}
+                  </span>
+                  <Icon
+                    name="lucide:x"
+                    class="cursor-pointer"
+                    @click="showMoreDescription = false"
+                  />
+                </div>
+                <div class="flex flex-col">
+                  <span class="font-body-small">
+                    {{ convertNumber(props.review.user?.review_count ?? 0) }}
+                    รีวิว •
+                    {{ convertNumber(props.review.user?.like_count ?? 0) }}
+                    ชื่นชอบรีวิว
+                  </span>
+
+                  <!-- Rating + date -->
+                  <div
+                    v-if="props.review.review"
+                    class="flex items-center gap-[8px]"
+                  >
+                    <InputRating
+                      :size="14"
+                      readonly
+                      :model-value="props.review.review.rating"
+                    />
+                    <span class="font-body-small opacity-75">
+                      {{
+                        convertDateTorelativeText(
+  props.review.review.created_at ?? ""
+)
+                      }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <!-- Description -->
+              <p
+                v-if="props.review.review?.description"
+                class="font-body-large max-h-[280px] overflow-y-auto"
+                @click="showMoreDescription = true"
+              >
+                {{ props.review.review.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </Modal>
 </template>
 
 <script setup>
+import { ref } from "vue";
+import { useConvert } from "../../composables/useConvert";
+const { convertNumber, convertDateTorelativeText } = useConvert();
 const props = defineProps({
   items: { type: Array, required: false, default: () => [] },
   title: { type: String, required: false, default: "" },
-  startIndex: { type: Number, required: false, default: 0 }
+  startIndex: { type: Number, required: false, default: 0 },
+  review: { type: Object, required: false }
 });
 const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const showMoreDescription = ref(false);
 </script>

package/dist/runtime/components/modal/modal-media-view.vue.d.ts

@@ -1,7 +1,10 @@
+import type { CardReviewProps } from "#pukaad-ui/types/components/card/card-review";
 export interface ModalMediaViewProps {
     items?: string[];
     title?: string;
     startIndex?: number;
+    /** ข้อมูล review เต็ม (user, review, replies) สำหรับแสดงที่ overlay ด้านล่าง */
+    review?: CardReviewProps;
 }
 type __VLS_Props = ModalMediaViewProps;
 type __VLS_ModelProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.309.0",
+  "version": "1.311.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",