pukaad-ui-lib 1.313.0 → 1.314.0

package/dist/module.json

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

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-address.d.vue.ts

@@ -49,11 +49,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     required: boolean;
     name: string;
-    gap: string;
     placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
+    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -49,11 +49,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     required: boolean;
     name: string;
-    gap: string;
     placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;
+    gap: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
-    disabledForgotPassword: boolean;
     new: boolean;
+    disabledForgotPassword: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,41 +1,10 @@
 <template>
-  <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>
-        <!-- ใช้ clipPath แทน linearGradient เพื่อหลีกเลี่ยง Vue set offset บน SVGStopElement (read-only property) -->
-        <clipPath :id="`star-clip-${uid}-${n}`" clipPathUnits="objectBoundingBox">
-          <rect x="0" y="0" :width="getFill(n) / 100" height="1" />
-        </clipPath>
-      </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="props.backgroundColor"
-        :stroke="props.borderSize > 0 ? props.borderColor : 'none'"
-        :stroke-width="props.borderSize"
-        stroke-linejoin="round"
-      />
-      <!-- ดาว active (clip ตาม % ที่เติม) -->
-      <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="props.activeColor"
-        :clip-path="`url(#star-clip-${uid}-${n})`"
-        stroke="none"
-      />
-    </svg>
-  </div>
+  <!-- v-html เพื่อหลีกเลี่ยง Vue patch SVG attributes เป็น DOM property (read-only getter bug) -->
+  <div
+    class="inline-flex items-center gap-0"
+    v-html="starsHtml"
+    @click="handleClick"
+  />
 </template>
 
 <script setup>
@@ -59,8 +28,33 @@ const getFill = (n) => {
   if (val < n - 1) return 0;
   return Math.round((val - (n - 1)) * 100);
 };
-const onSelect = (value) => {
-  emit("update:modelValue", value);
-  emit("select", value);
+const 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";
+const starsHtml = computed(
+  () => Array.from({ length: 5 }, (_, i) => {
+    const n = i + 1;
+    const w = getFill(n) / 100;
+    const cursor = props.readonly ? "default" : "pointer";
+    const margin = n < 5 ? "margin-right:2px" : "";
+    const stroke = props.borderSize > 0 ? `stroke="${props.borderColor}" stroke-width="${props.borderSize}" stroke-linejoin="round"` : `stroke="none"`;
+    return `<svg width="${props.size}" height="${props.size}" viewBox="4 2 16.42 20.21" xmlns="http://www.w3.org/2000/svg" style="cursor:${cursor};${margin}" data-star="${n}">
+  <defs>
+    <clipPath id="sc-${uid}-${n}" clipPathUnits="objectBoundingBox">
+      <rect x="0" y="0" width="${w}" height="1"/>
+    </clipPath>
+  </defs>
+  <polygon points="${POINTS}" fill="${props.backgroundColor}" ${stroke}/>
+  <polygon points="${POINTS}" fill="${props.activeColor}" clip-path="url(#sc-${uid}-${n})" stroke="none"/>
+</svg>`;
+  }).join("")
+);
+const handleClick = (e) => {
+  if (props.readonly) return;
+  const svg = e.target.closest("svg[data-star]");
+  if (!svg) return;
+  const n = Number(svg.getAttribute("data-star"));
+  if (n >= 1 && n <= 5) {
+    emit("update:modelValue", n);
+    emit("select", n);
+  }
 };
 </script>

package/dist/runtime/components/modal/modal-password-confirmed.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-confirmed.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     }) => any) | undefined;
 }>, {
     title: string;
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/modal/modal-password-verify.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     title: string;
     mode: "login" | "secure";
-    confirmText: string;
     disabledForgotPassword: boolean;
+    confirmText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

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