pukaad-ui-lib 1.19.0 → 1.21.1

package/dist/runtime/components/input/input-text-field.vue

@@ -1,92 +1,92 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField, errorMessage }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel class="w-full">
-        <slot name="label">
-          <div
+  <ShadFormField
+    ref="fieldRef"
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField, errorMessage }"
+    v-model="modelValue"
+  >
+    <ShadFormItem>
+      <ShadFormLabel class="w-full">
+        <slot name="label">
+          <div
             :class="[
   'flex-1',
   props.disabledBorder && 'font-body-small-prominent'
-]"
-          >
-            {{ props.label }}
-            <span v-if="props.required" class="text-destructive">*</span>
-          </div>
-        </slot>
-        <div
-          v-if="props.showCounter"
-          :class="[props.disabledBorder && 'font-body-small']"
-        >
-          <div
-            v-if="props.limit > 0"
-            :class="[modelValue.length > props.limit && 'text-destructive']"
-          >
-            {{ modelValue.length }}/{{ props.limit }}
-          </div>
-        </div>
-      </ShadFormLabel>
-
-      <ShadInputGroup
+]"
+          >
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+        <div
+          v-if="props.showCounter"
+          :class="[props.disabledBorder && 'font-body-small']"
+        >
+          <div
+            v-if="props.limit > 0"
+            :class="[modelValue.length > props.limit && 'text-destructive']"
+          >
+            {{ modelValue.length }}/{{ props.limit }}
+          </div>
+        </div>
+      </ShadFormLabel>
+
+      <ShadInputGroup
         :class="[
   props.disabledBorder && 'border-0 ring-0 focus-within:border-0 focus-within:ring-0'
-]"
-      >
-        <ShadFormControl>
-          <ShadInputGroupInput
-            v-bind="componentField"
-            :id="props.id || props.name"
-            :class="props.class"
-            :readonly="props.readonly"
-            :disabled="props.disabled"
-            :placeholder="props.placeholder"
-            :type="props.type"
-            @click="emits('click', $event)"
-          >
-          </ShadInputGroupInput>
-        </ShadFormControl>
-        <ShadInputGroupAddon
-          v-if="$slots.prepend || props.iconPrepend"
-          align="inline-start"
-          @click="emits('clickPrepend', $event)"
-        >
-          <ShadInputGroupButton
-            class="rounded-full"
-            size="icon-xs"
-            @click="emits('clickIconPrepend', $event)"
-          >
-            <slot name="prepend">
-              <Icon :name="props.iconPrepend" size="16" />
-            </slot>
-          </ShadInputGroupButton>
-        </ShadInputGroupAddon>
-        <ShadInputGroupAddon
-          v-if="$slots.append || props.iconAppend"
-          align="inline-end"
-          @click="emits('clickAppend', $event)"
-        >
-          <slot name="append">
-            <ShadInputGroupButton
-              class="rounded-full"
-              @click="emits('clickIconAppend', $event)"
-            >
-              <Icon :name="props.iconAppend" size="16" />
-            </ShadInputGroupButton>
-          </slot>
-        </ShadInputGroupAddon>
-      </ShadInputGroup>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-    </ShadFormItem>
-  </ShadFormField>
+]"
+      >
+        <ShadFormControl>
+          <ShadInputGroupInput
+            v-bind="componentField"
+            :id="props.id || props.name"
+            :class="props.class"
+            :readonly="props.readonly"
+            :disabled="props.disabled"
+            :placeholder="props.placeholder"
+            :type="props.type"
+            @click="emits('click', $event)"
+          >
+          </ShadInputGroupInput>
+        </ShadFormControl>
+        <ShadInputGroupAddon
+          v-if="$slots.prepend || props.iconPrepend"
+          align="inline-start"
+          @click="emits('clickPrepend', $event)"
+        >
+          <ShadInputGroupButton
+            class="rounded-full"
+            size="icon-xs"
+            @click="emits('clickIconPrepend', $event)"
+          >
+            <slot name="prepend">
+              <Icon :name="props.iconPrepend" size="16" />
+            </slot>
+          </ShadInputGroupButton>
+        </ShadInputGroupAddon>
+        <ShadInputGroupAddon
+          v-if="$slots.append || props.iconAppend"
+          align="inline-end"
+          @click="emits('clickAppend', $event)"
+        >
+          <slot name="append">
+            <ShadInputGroupButton
+              class="rounded-full"
+              @click="emits('clickIconAppend', $event)"
+            >
+              <Icon :name="props.iconAppend" size="16" />
+            </ShadInputGroupButton>
+          </slot>
+        </ShadInputGroupAddon>
+      </ShadInputGroup>
+
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -23,13 +23,13 @@ type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_18: {}, __VLS_54: {}, __VLS_69: {};
+declare var __VLS_21: {}, __VLS_58: {}, __VLS_73: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_18) => any;
+    label?: (props: typeof __VLS_21) => any;
 } & {
-    prepend?: (props: typeof __VLS_54) => any;
+    prepend?: (props: typeof __VLS_58) => any;
 } & {
-    append?: (props: typeof __VLS_69) => any;
+    append?: (props: typeof __VLS_73) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
@@ -53,8 +53,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
-    disabled: boolean;
     limit: number;
+    disabled: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -1,44 +1,57 @@
-import type { InputTextareaProps } from "@/types/components/input/input-textarea";
+export interface InputTextareaProps {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    rules?: object | string | Function;
+    readonly?: boolean;
+    placeholder?: string;
+    description?: string;
+    disabledErrorMessage?: boolean;
+    disabledBorder?: boolean;
+    required?: boolean;
+    showCounter?: boolean;
+    limit?: number;
+    resize?: "none" | "both" | "horizontal" | "vertical";
+    rows?: number;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    heightScroll?: boolean;
+    height?: number;
+    width?: number;
+    class?: string;
+}
 type __VLS_Props = InputTextareaProps;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: {
-    label: string | undefined;
-}, __VLS_9: {};
+declare var __VLS_21: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_7) => any;
-} & {
-    error?: (props: typeof __VLS_9) => any;
+    label?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => void;
+    setErrors: (errMsg: string[]) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    variant: "default" | "primary" | "error";
     fullWidth: boolean;
     fullHeight: boolean;
     required: boolean;
+    id: string;
     name: string;
+    limit: number;
     disabled: boolean;
-    disabledPadding: boolean;
-    rows: number | string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
-    standalone: boolean;
-    inputClass: string;
-    disabledBorderFocus: boolean;
+    rows: number;
     heightScroll: boolean;
-    validateOnBlur: boolean;
-    validateOnInput: boolean;
-    maxLength: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,132 +1,111 @@
 <template>
-  <Field
-    :name="props.name"
-    v-slot="{ field, errorMessage }"
-    :validate-on-blur="props.validateOnBlur"
-    :validate-on-input="props.validateOnInput"
-    :standalone="props.standalone"
-    :rules="rules || defaultRule"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[4px]">
-      <slot
-        v-if="$slots.label || props.label"
-        name="label"
-        :label="props.label"
-      >
-        <div class="text-gray flex items-center">
-          <div class="font-body-large-prominent flex-1">
-            {{ props.label }}
-            <span v-if="props.required" class="text-error">*</span>
-          </div>
-          <div v-if="props.showCounter" :class="['font-body-small']">
-            <div
-              v-if="props.maxLength"
-              :class="[textCounter > props.maxLength && 'text-error']"
-            >
-              {{ textCounter }} / {{ props.maxLength }}
-            </div>
-            <div v-else>{{ textCounter }} ตัวอักษร</div>
-          </div>
-        </div>
-      </slot>
-
-      <textarea
-        v-bind="field"
-        ref="textareaRef"
+  <ShadFormField
+    ref="fieldRef"
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField }"
+    v-model="modelValue"
+  >
+    <ShadFormItem>
+      <ShadFormLabel class="w-full">
+        <slot name="label">
+          <div
+            :class="[
+  'flex-1',
+  props.disabledBorder && 'font-body-small-prominent'
+]"
+          >
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+        <div
+          v-if="props.showCounter"
+          :class="[props.disabledBorder && 'font-body-small']"
+        >
+          <div
+            v-if="props.limit > 0"
+            :class="[modelValue.length > props.limit && 'text-destructive']"
+          >
+            {{ modelValue.length }}/{{ props.limit }}
+          </div>
+          <div v-else>{{ modelValue.length }} ตัวอักษร</div>
+        </div>
+      </ShadFormLabel>
+
+      <ShadInputGroup
         :class="[
-  'w-full bg-white',
-  'font-body-large placeholder:text-cloud rounded-[8px] overflow-auto',
-  props.inputClass,
-  errorMessage && !props.disabled ? ' focus:ring-error' : borderFocus,
-  errorMessage && !props.disabled ? 'ring-[1px] ring-error' : variaint,
-  padding
-]"
-        :placeholder="props.placeholder"
-        :disabled="props.disabled"
-        :style="{
+  props.disabledBorder && 'border-0 ring-0 focus-within:border-0 focus-within:ring-0'
+]"
+      >
+        <ShadFormControl>
+          <ShadInputGroupTextarea
+            v-bind="componentField"
+            ref="textareaRef"
+            :id="props.id || props.name"
+            :class="props.class"
+            :readonly="props.readonly"
+            :disabled="props.disabled"
+            :placeholder="props.placeholder"
+            :rows="props.rows"
+            :style="{
   resize: props.resize,
-  height: props.fullHeight ? '100%' : `${props.height}px`,
-  width: props.fullWidth ? '100%' : `${props.width}px`
-}"
-        :rows="props.rows"
-        :readonly="props.readonly"
-        @input="autoHeight()"
-      />
-
-      <div
-        v-if="!props.disabledErrorMessage && errorMessage"
-        class="font-body-small text-error"
-      >
-        <slot name="error">
-          {{ errorMessage }}
-        </slot>
-      </div>
-    </div>
-  </Field>
+  height: props.fullHeight ? '100%' : props.height ? `${props.height}px` : void 0,
+  width: props.fullWidth ? '100%' : props.width ? `${props.width}px` : void 0
+}"
+            @input="autoHeight()"
+          >
+          </ShadInputGroupTextarea>
+        </ShadFormControl>
+      </ShadInputGroup>
+
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 const props = defineProps({
-  inputClass: { type: String, required: false, default: "" },
+  id: { type: String, required: false, default: "input-textarea" },
+  name: { type: String, required: false, default: "input-textarea" },
+  disabled: { type: Boolean, required: false, default: false },
   label: { type: String, required: false },
-  name: { type: String, required: false, default: "text-area" },
-  placeholder: { type: String, required: false },
   rules: { type: [Object, String, Function], required: false },
-  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  placeholder: { type: String, required: false },
+  description: { type: String, required: false },
   disabledErrorMessage: { type: Boolean, required: false, default: false },
   disabledBorder: { type: Boolean, required: false, default: false },
-  disabledBorderFocus: { type: Boolean, required: false, default: false },
-  disabledPadding: { type: Boolean, required: false, default: false },
-  variant: { type: String, required: false, default: "default" },
   required: { type: Boolean, required: false, default: false },
+  showCounter: { type: Boolean, required: false, default: false },
+  limit: { type: Number, required: false, default: 0 },
   resize: { type: String, required: false, default: "both" },
-  rows: { type: [Number, String], required: false, default: 4 },
-  height: { type: [Number, String], required: false },
-  width: { type: [Number, String], required: false },
+  rows: { type: Number, required: false, default: 4 },
   fullWidth: { type: Boolean, required: false, default: false },
   fullHeight: { type: Boolean, required: false, default: false },
   heightScroll: { type: Boolean, required: false, default: true },
-  standalone: { type: Boolean, required: false, default: false },
-  validateOnBlur: { type: Boolean, required: false, default: true },
-  validateOnInput: { type: Boolean, required: false, default: true },
-  showCounter: { type: Boolean, required: false, default: false },
-  maxLength: { type: Number, required: false, default: 0 },
-  readonly: { type: Boolean, required: false, default: false }
+  height: { type: Number, required: false },
+  width: { type: Number, required: false },
+  class: { type: String, required: false }
 });
-const modelValue = defineModel({ type: String });
+const modelValue = defineModel({ type: String, ...{
+  default: ""
+} });
+const fieldRef = ref();
 const textareaRef = ref();
-const textCounter = computed(() => modelValue.value?.length || 0);
-const defaultRule = (v) => {
-  if (props.required && v == "") return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25";
-  if (props.maxLength > 0 && v && v.length > props.maxLength)
-    return "\u0E40\u0E01\u0E34\u0E19\u0E08\u0E33\u0E19\u0E27\u0E19\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23\u0E17\u0E35\u0E48\u0E01\u0E33\u0E2B\u0E19\u0E14";
+const defaultRules = (v) => {
+  if (!v && props.required) {
+    return `\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38 ${props.label || "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25"}`;
+  }
+  if (props.limit > 0 && modelValue.value.length > props.limit) {
+    return `\u0E08\u0E33\u0E19\u0E27\u0E19\u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23\u0E15\u0E49\u0E2D\u0E07\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 ${props.limit} \u0E15\u0E31\u0E27\u0E2D\u0E31\u0E01\u0E29\u0E23`;
+  }
   return true;
 };
-const padding = computed(() => {
-  if (props.disabledPadding) return;
-  return "px-[12px] py-[7px]";
-});
-const borderFocus = computed(() => {
-  if (props.disabledBorder || props.disabledBorderFocus) return;
-  const borders = {
-    default: "focus:ring-[2px] focus:ring-primary",
-    primary: "focus:ring-[2px] focus:ring-primary",
-    error: "focus:ring-[2px] focus:ring-error"
-  };
-  return borders[props.variant];
-});
-const variaint = computed(() => {
-  if (props.disabledBorder) return;
-  if (props.disabled) return "bg-cloud ring-cloud";
-  const variants = {
-    default: "ring-[1px] ring-cloud",
-    primary: "ring-[1px] ring-primary",
-    error: "ring-[1px] ring-error"
-  };
-  return variants[props.variant];
-});
 const autoHeight = () => {
   const el = textareaRef.value;
   if (el) {
@@ -140,10 +119,16 @@ const focus = () => {
   if (!textareaRef.value) return;
   textareaRef.value.focus();
 };
+const setErrors = (errMsg) => {
+  fieldRef.value?.setErrors(errMsg);
+};
 defineExpose({
-  focus
+  focus,
+  setErrors
 });
 onMounted(() => {
-  autoHeight();
+  nextTick(() => {
+    autoHeight();
+  });
 });
 </script>

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

@@ -1,44 +1,57 @@
-import type { InputTextareaProps } from "@/types/components/input/input-textarea";
+export interface InputTextareaProps {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    rules?: object | string | Function;
+    readonly?: boolean;
+    placeholder?: string;
+    description?: string;
+    disabledErrorMessage?: boolean;
+    disabledBorder?: boolean;
+    required?: boolean;
+    showCounter?: boolean;
+    limit?: number;
+    resize?: "none" | "both" | "horizontal" | "vertical";
+    rows?: number;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    heightScroll?: boolean;
+    height?: number;
+    width?: number;
+    class?: string;
+}
 type __VLS_Props = InputTextareaProps;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: {
-    label: string | undefined;
-}, __VLS_9: {};
+declare var __VLS_21: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_7) => any;
-} & {
-    error?: (props: typeof __VLS_9) => any;
+    label?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => void;
+    setErrors: (errMsg: string[]) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    variant: "default" | "primary" | "error";
     fullWidth: boolean;
     fullHeight: boolean;
     required: boolean;
+    id: string;
     name: string;
+    limit: number;
     disabled: boolean;
-    disabledPadding: boolean;
-    rows: number | string;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
     resize: "none" | "both" | "horizontal" | "vertical";
     readonly: boolean;
-    standalone: boolean;
-    inputClass: string;
-    disabledBorderFocus: boolean;
+    rows: number;
     heightScroll: boolean;
-    validateOnBlur: boolean;
-    validateOnInput: boolean;
-    maxLength: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/label/label-announce-time.vue

@@ -1,13 +1,13 @@
 <template>
-  <!-- <div
-    v-if="timeStatus.show"
-    :class="[
-      'inline-flex rounded-[4px] p-[4px] font-body-small text-white',
-      timeStatus.backgroundColor,
-    ]"
-  >
-    {{ timeStatus.text }}
-  </div> -->
+  <!-- <div
+    v-if="timeStatus.show"
+    :class="[
+      'inline-flex rounded-[4px] p-[4px] font-body-small text-white',
+      timeStatus.backgroundColor,
+    ]"
+  >
+    {{ timeStatus.text }}
+  </div> -->
 </template>
 
 <script setup>

package/dist/runtime/components/label/label-card-atom.vue

@@ -1,9 +1,9 @@
 <template>
-  <!-- <div :class="['flex py-[2px]', state, color]">
-    <div class="font-body-extra-small text-word-on-surface">
-      {{ props.text }}
-    </div>
-  </div> -->
+  <!-- <div :class="['flex py-[2px]', state, color]">
+    <div class="font-body-extra-small text-word-on-surface">
+      {{ props.text }}
+    </div>
+  </div> -->
 </template>
 
 <script setup>
@@ -11,7 +11,7 @@
 </script>
 
 <style scoped>
-/* .state-last {
-//   clip-path: "polygon(0 0, 100% 0, 90% 100%, 0 100%)";
-// } */
+/* .state-last {
+//   clip-path: "polygon(0 0, 100% 0, 90% 100%, 0 100%)";
+// } */
 </style>