pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,100 +1,100 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField, errorMessage }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel v-if="props.label || $slots.label" 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 v-if="props.label || $slots.label" 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="[
   'bg-white',
   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"
-            :maxlength="props.maxLength"
-            @click="emits('click', $event)"
-            @keydown="emits('keydown', $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>
-      <p
-        v-if="!props.disabledErrorMessage && errorMessage"
-        class="font-body-small text-destructive"
-      >
-        {{ errorMessage }}
-      </p>
-    </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"
+            :maxlength="props.maxLength"
+            @click="emits('click', $event)"
+            @keydown="emits('keydown', $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>
+      <p
+        v-if="!props.disabledErrorMessage && errorMessage"
+        class="font-body-small text-destructive"
+      >
+        {{ errorMessage }}
+      </p>
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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

@@ -1,71 +1,71 @@
 <template>
-  <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
+  <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
+]"
+          >
+            {{ 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="[
   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"
+]"
+      >
+        <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 ? `${props.height}px` : autoHeightPx,
   width: props.fullWidth ? '100%' : props.width ? `${props.width}px` : void 0
-}"
-            @input="autoHeight()"
-            @keydown.space="handleSpace"
-          >
-          </ShadInputGroupTextarea>
-        </ShadFormControl>
-      </ShadInputGroup>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-    </ShadFormItem>
-  </ShadFormField>
+}"
+            @input="autoHeight()"
+            @keydown.space="handleSpace"
+          >
+          </ShadInputGroupTextarea>
+        </ShadFormControl>
+      </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-typed-field.vue

@@ -1,58 +1,58 @@
 <template>
-  <div class="flex items-start gap-[8px]">
-    <div class="min-w-0 flex-1">
-      <div
-        v-if="props.label || props.showCounter"
-        class="mb-[8px] flex w-full items-center justify-between gap-2"
-      >
-        <div class="font-body-large-prominent text-gray">
-          {{ props.label }}
-          <span v-if="props.required" class="text-destructive">*</span>
-        </div>
-        <div
-          v-if="props.showCounter && props.limit > 0"
+  <div class="flex items-start gap-[8px]">
+    <div class="min-w-0 flex-1">
+      <div
+        v-if="props.label || props.showCounter"
+        class="mb-[8px] flex w-full items-center justify-between gap-2"
+      >
+        <div class="font-body-large-prominent text-gray">
+          {{ props.label }}
+          <span v-if="props.required" class="text-destructive">*</span>
+        </div>
+        <div
+          v-if="props.showCounter && props.limit > 0"
           :class="[
   'font-body-small text-gray',
   (value || '').length > props.limit && 'text-destructive'
-]"
-        >
-          {{ (value || "").length }}/{{ props.limit }}
-        </div>
-      </div>
-
-      <div class="flex items-start gap-[8px] font-body-large">
-        <InputSelect
-          v-if="!props.hideType"
-          :name="`${props.name}-type`"
-          :class="props.selectClass"
-          :options="props.options"
-          :model-value="type"
-          @update:model-value="onSelectType"
-        />
-        <div :class="['flex-1', props.fieldClass]">
-          <InputTextField
-            :key="fieldKey"
-            :name="`${props.name}-value`"
-            class="w-full"
-            :placeholder="props.placeholder"
-            :rules="props.rules"
-            @change="onFieldChange"
-            v-model="value"
-          />
-        </div>
-      </div>
-    </div>
-
-    <Button
-      v-if="props.removable"
-      variant="icon"
-      color="destructive"
-      size="icon"
-      @click="emit('remove')"
-    >
-      <Icon name="lucide:trash-2" class="size-[20px]" />
-    </Button>
-  </div>
+]"
+        >
+          {{ (value || "").length }}/{{ props.limit }}
+        </div>
+      </div>
+
+      <div class="flex items-start gap-[8px] font-body-large">
+        <InputSelect
+          v-if="!props.hideType"
+          :name="`${props.name}-type`"
+          :class="props.selectClass"
+          :options="props.options"
+          :model-value="type"
+          @update:model-value="onSelectType"
+        />
+        <div :class="['flex-1', props.fieldClass]">
+          <InputTextField
+            :key="fieldKey"
+            :name="`${props.name}-value`"
+            class="w-full"
+            :placeholder="props.placeholder"
+            :rules="props.rules"
+            @change="onFieldChange"
+            v-model="value"
+          />
+        </div>
+      </div>
+    </div>
+
+    <Button
+      v-if="props.removable"
+      variant="icon"
+      color="destructive"
+      size="icon"
+      @click="emit('remove')"
+    >
+      <Icon name="lucide:trash-2" class="size-[20px]" />
+    </Button>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,57 +1,57 @@
 <template>
-  <div :class="['relative', props.class]">
-    <div
-      ref="scroller"
-      class="flex items-center gap-[8px] scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-      :class="isEllipsis ? 'overflow-hidden' : 'overflow-x-auto'"
-      @scroll="syncArrows"
-    >
-      <div
-        v-for="(item, index) in labels"
-        :key="`${item.text}-${index}`"
+  <div :class="['relative', props.class]">
+    <div
+      ref="scroller"
+      class="flex items-center gap-[8px] scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      :class="isEllipsis ? 'overflow-hidden' : 'overflow-x-auto'"
+      @scroll="syncArrows"
+    >
+      <div
+        v-for="(item, index) in labels"
+        :key="`${item.text}-${index}`"
         :class="[
   'inline-flex items-center rounded-[2px] bg-mercury px-[4px] py-[2px] font-label-sans-serif-large',
   isEllipsis ? 'min-w-0' : 'shrink-0',
   props.clickable && 'cursor-pointer'
-]"
-        @click="props.clickable && emit('click', item)"
-      >
-        <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{{
-          item.text
-        }}</span>
-      </div>
-    </div>
-
-    <template v-if="canSlide">
-      <div
-        v-if="canScrollLeft"
-        class="absolute top-0 left-0 flex h-[32px] w-[50px] items-center bg-gradient-to-r from-bright from-50% to-transparent pl-[4px]"
-      >
-        <Button
-          variant="icon"
-          circle
-          class="size-[24px] hover:bg-mercury hover:drop-shadow"
-          @click="slide(-1)"
-        >
-          <Icon name="lucide:chevron-left" size="16" />
-        </Button>
-      </div>
-
-      <div
-        v-if="canScrollRight"
-        class="absolute top-0 right-0 flex h-[32px] w-[50px] items-center justify-end bg-gradient-to-l from-bright from-50% to-transparent pr-[4px]"
-      >
-        <Button
-          variant="icon"
-          circle
-          class="size-[24px] hover:bg-mercury hover:drop-shadow"
-          @click="slide(1)"
-        >
-          <Icon name="lucide:chevron-right" size="16" />
-        </Button>
-      </div>
-    </template>
-  </div>
+]"
+        @click="props.clickable && emit('click', item)"
+      >
+        <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{{
+          item.text
+        }}</span>
+      </div>
+    </div>
+
+    <template v-if="canSlide">
+      <div
+        v-if="canScrollLeft"
+        class="absolute top-0 left-0 flex h-[32px] w-[50px] items-center bg-gradient-to-r from-bright from-50% to-transparent pl-[4px]"
+      >
+        <Button
+          variant="icon"
+          circle
+          class="size-[24px] hover:bg-mercury hover:drop-shadow"
+          @click="slide(-1)"
+        >
+          <Icon name="lucide:chevron-left" size="16" />
+        </Button>
+      </div>
+
+      <div
+        v-if="canScrollRight"
+        class="absolute top-0 right-0 flex h-[32px] w-[50px] items-center justify-end bg-gradient-to-l from-bright from-50% to-transparent pr-[4px]"
+      >
+        <Button
+          variant="icon"
+          circle
+          class="size-[24px] hover:bg-mercury hover:drop-shadow"
+          @click="slide(1)"
+        >
+          <Icon name="lucide:chevron-right" size="16" />
+        </Button>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/label/label.vue

@@ -1,55 +1,55 @@
 <template>
-  <div v-if="hasItems" class="relative flex items-center">
-    <div
-      ref="scroller"
+  <div v-if="hasItems" class="relative flex items-center">
+    <div
+      ref="scroller"
       :class="[
   'flex items-center gap-[8px]',
   isSlide ? 'w-full scroll-smooth overflow-x-hidden' : 'flex-wrap'
-]"
-      @scroll="syncArrows"
-    >
-      <div
-        v-for="(item, index) in props.items"
-        :id="item.id != null ? String(item.id) : void 0"
-        :key="item.id ?? `${item.label}-${index}`"
+]"
+      @scroll="syncArrows"
+    >
+      <div
+        v-for="(item, index) in props.items"
+        :id="item.id != null ? String(item.id) : void 0"
+        :key="item.id ?? `${item.label}-${index}`"
         :class="[
   'inline-flex items-center rounded-[2px] bg-mercury px-[4px] py-[2px] font-label-sans-serif-large text-black shrink-0 max-w-full select-none h-[24px]',
   props.clickable && 'cursor-pointer'
-]"
-        @click="handleItemClick(item)"
-      >
-        <span class="truncate">{{ item.label }}</span>
-      </div>
-    </div>
-
-    <div
-      v-if="isSlide && canScrollLeft"
-      class="absolute top-0 left-0 flex h-full w-[48px] items-center bg-gradient-to-r from-white via-white to-transparent pl-[4px] pointer-events-none"
-    >
-      <Button
-        variant="icon"
-        circle
-        class="pointer-events-auto size-[24px]"
-        @click="slideScroll(-1)"
-      >
-        <Icon name="lucide:chevron-left" :size="16" />
-      </Button>
-    </div>
-
-    <div
-      v-if="isSlide && canScrollRight"
-      class="absolute top-0 right-0 flex h-full w-[48px] items-center justify-end bg-gradient-to-l from-white via-white to-transparent pr-[4px] pointer-events-none"
-    >
-      <Button
-        variant="icon"
-        circle
-        class="pointer-events-auto size-[24px]"
-        @click="slideScroll(1)"
-      >
-        <Icon name="lucide:chevron-right" :size="16" />
-      </Button>
-    </div>
-  </div>
+]"
+        @click="handleItemClick(item)"
+      >
+        <span class="truncate">{{ item.label }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="isSlide && canScrollLeft"
+      class="absolute top-0 left-0 flex h-full w-[48px] items-center bg-gradient-to-r from-white via-white to-transparent pl-[4px] pointer-events-none"
+    >
+      <Button
+        variant="icon"
+        circle
+        class="pointer-events-auto size-[24px]"
+        @click="slideScroll(-1)"
+      >
+        <Icon name="lucide:chevron-left" :size="16" />
+      </Button>
+    </div>
+
+    <div
+      v-if="isSlide && canScrollRight"
+      class="absolute top-0 right-0 flex h-full w-[48px] items-center justify-end bg-gradient-to-l from-white via-white to-transparent pr-[4px] pointer-events-none"
+    >
+      <Button
+        variant="icon"
+        circle
+        class="pointer-events-auto size-[24px]"
+        @click="slideScroll(1)"
+      >
+        <Icon name="lucide:chevron-right" :size="16" />
+      </Button>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/loading.vue

@@ -1,12 +1,12 @@
 <template>
-  <Transition name="loading-fade">
-    <div
-      v-if="loading"
-      class="absolute inset-0 bg-white/50 flex items-center justify-center z-50"
-    >
-      <div class="loading-spinner"></div>
-    </div>
-  </Transition>
+  <Transition name="loading-fade">
+    <div
+      v-if="loading"
+      class="absolute inset-0 bg-white/50 flex items-center justify-center z-50"
+    >
+      <div class="loading-spinner"></div>
+    </div>
+  </Transition>
 </template>
 
 <script setup>