pukaad-ui-lib 1.459.0 → 1.461.0

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

@@ -1,166 +1,166 @@
 <template>
-  <ShadPopover v-model:open="popoverOpen">
-    <ShadPopoverAnchor as-child>
-      <ShadFormField :name="props.name" v-model="modelValue">
-        <ShadFormItem>
-          <ShadFormLabel v-if="props.label" class="w-full">
-            <div class="font-body-large-prominent text-gray-500">
-              {{ props.label }}
-              <span v-if="props.required" class="text-destructive">*</span>
-            </div>
-          </ShadFormLabel>
-          <div
+  <ShadPopover v-model:open="popoverOpen">
+    <ShadPopoverAnchor as-child>
+      <ShadFormField :name="props.name" v-model="modelValue">
+        <ShadFormItem>
+          <ShadFormLabel v-if="props.label" class="w-full">
+            <div class="font-body-large-prominent text-gray-500">
+              {{ props.label }}
+              <span v-if="props.required" class="text-destructive">*</span>
+            </div>
+          </ShadFormLabel>
+          <div
             :class="[
   'flex flex-wrap items-center gap-2 min-h-10 w-full rounded-lg bg-background px-[12px] py-[4px] cursor-text',
   props.state === 'admin' && 'border',
   props.state === 'admin' && (popoverOpen ? 'border-primary' : 'border-mercury')
-]"
-            @mousedown="handleContainerClick"
-          >
-            <!-- Selected Tags as Chips -->
-            <Chip
-              v-for="tag in selectedTags"
-              :key="tag.id"
-              closable
-              @closable="onRemoveTag(tag.id)"
-              class="bg-bright"
-            >
-              {{ tag.name }}
-            </Chip>
-            <!-- Input for search -->
-            <InputTextField
-              v-if="!isLimitReached"
-              ref="inputRef"
-              id="input-tag-search"
-              name="input-tag-search"
-              v-model="searchQuery"
-              disabled-border
-              :placeholder="props.placeholder"
-              class="flex-1 min-w-[100px] p-0"
-              :readonly="props.state === 'admin'"
-              @keydown="onKeydown"
-            />
-          </div>
-        </ShadFormItem>
-      </ShadFormField>
-    </ShadPopoverAnchor>
-    <ShadPopoverContent
-      @openAutoFocus.prevent
-      @interactOutside="handleInteractOutside"
-    >
-      <ShadCommand :filter="() => 1">
-        <ShadCommandInput
-          v-if="props.state === 'admin'"
-          v-model="searchQuery"
-          placeholder="ค้นหาแท็ก"
-        />
-        <ShadTabs v-model="currentTab" class="w-full p-2">
-          <ShadTabsList class="w-full grid grid-cols-2">
-            <ShadTabsTrigger value="popular">ยอดนิยม</ShadTabsTrigger>
-            <ShadTabsTrigger value="recent">{{
-              isOffice ? "\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14" : "\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14"
-            }}</ShadTabsTrigger>
-          </ShadTabsList>
-
-          <!-- Popular Tab -->
-          <ShadTabsContent value="popular" class="m-0">
-            <ShadCommandList class="max-h-64 overflow-y-auto">
-              <ShadCommandGroup>
-                <ShadCommandItem
-                  v-for="tag in filteredPopularTags"
-                  :key="tag.value"
-                  :value="tag.value"
-                  class="flex w-full justify-between"
-                  @select="onSelectTag(tag)"
-                >
-                  <span class="font-body-medium">{{ tag.label }}</span>
-                  <div class="font-body-small text-gray">
-                    {{ convertNumber(tag.postCount) }} โพสต์
-                  </div>
-                </ShadCommandItem>
-              </ShadCommandGroup>
-
-              <!-- Initital Loading / Empty State -->
-              <ShadCommandEmpty
+]"
+            @mousedown="handleContainerClick"
+          >
+            <!-- Selected Tags as Chips -->
+            <Chip
+              v-for="tag in selectedTags"
+              :key="tag.id"
+              closable
+              @closable="onRemoveTag(tag.id)"
+              class="bg-bright"
+            >
+              {{ tag.name }}
+            </Chip>
+            <!-- Input for search -->
+            <InputTextField
+              v-if="!isLimitReached"
+              ref="inputRef"
+              id="input-tag-search"
+              name="input-tag-search"
+              v-model="searchQuery"
+              disabled-border
+              :placeholder="props.placeholder"
+              class="flex-1 min-w-[100px] p-0"
+              :readonly="props.state === 'admin'"
+              @keydown="onKeydown"
+            />
+          </div>
+        </ShadFormItem>
+      </ShadFormField>
+    </ShadPopoverAnchor>
+    <ShadPopoverContent
+      @openAutoFocus.prevent
+      @interactOutside="handleInteractOutside"
+    >
+      <ShadCommand :filter="() => 1">
+        <ShadCommandInput
+          v-if="props.state === 'admin'"
+          v-model="searchQuery"
+          placeholder="ค้นหาแท็ก"
+        />
+        <ShadTabs v-model="currentTab" class="w-full p-2">
+          <ShadTabsList class="w-full grid grid-cols-2">
+            <ShadTabsTrigger value="popular">ยอดนิยม</ShadTabsTrigger>
+            <ShadTabsTrigger value="recent">{{
+              isOffice ? "\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14" : "\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14"
+            }}</ShadTabsTrigger>
+          </ShadTabsList>
+
+          <!-- Popular Tab -->
+          <ShadTabsContent value="popular" class="m-0">
+            <ShadCommandList class="max-h-64 overflow-y-auto">
+              <ShadCommandGroup>
+                <ShadCommandItem
+                  v-for="tag in filteredPopularTags"
+                  :key="tag.value"
+                  :value="tag.value"
+                  class="flex w-full justify-between"
+                  @select="onSelectTag(tag)"
+                >
+                  <span class="font-body-medium">{{ tag.label }}</span>
+                  <div class="font-body-small text-gray">
+                    {{ convertNumber(tag.postCount) }} โพสต์
+                  </div>
+                </ShadCommandItem>
+              </ShadCommandGroup>
+
+              <!-- Initital Loading / Empty State -->
+              <ShadCommandEmpty
                 :force-show="
   filteredPopularTags.length === 0 && !popularState.loading
-"
-              >
-                <div
-                  class="flex flex-col items-center justify-center h-full gap-2"
-                >
-                  <Icon name="pukaad:tag-empty" class="h-[123px] w-[180px]" />
-                  <div class="text-gray font-body-medium">
-                    {{ popularState.error || "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25" }}
-                  </div>
-                </div>
-              </ShadCommandEmpty>
-
-              <!-- Loading Indicator -->
-              <div v-if="popularState.loading" class="flex justify-center p-2">
-                <Icon
-                  name="lucide:loader-2"
-                  class="animate-spin h-5 w-5 text-primary"
-                />
-              </div>
-
-              <!-- Sentinel for Infinite Scroll -->
-              <div ref="popularSentinel" class="h-1" />
-            </ShadCommandList>
-          </ShadTabsContent>
-
-          <!-- Recent / Office latest tab -->
-          <ShadTabsContent value="recent" class="m-0">
-            <ShadCommandList class="max-h-64 overflow-y-auto">
-              <ShadCommandGroup>
-                <ShadCommandItem
-                  v-for="tag in filteredRecentTags"
-                  :key="tag.value"
-                  :value="tag.value"
-                  class="flex w-full justify-between"
-                  @select="onSelectTag(tag)"
-                >
-                  <span class="font-body-medium">{{ tag.label }}</span>
-                  <div class="font-body-small text-gray">
-                    {{ convertNumber(tag.postCount) }} โพสต์
-                  </div>
-                </ShadCommandItem>
-              </ShadCommandGroup>
-
-              <!-- Initital Loading / Empty State -->
-              <ShadCommandEmpty
+"
+              >
+                <div
+                  class="flex flex-col items-center justify-center h-full gap-2"
+                >
+                  <Icon name="pukaad:tag-empty" class="h-[123px] w-[180px]" />
+                  <div class="text-gray font-body-medium">
+                    {{ popularState.error || "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25" }}
+                  </div>
+                </div>
+              </ShadCommandEmpty>
+
+              <!-- Loading Indicator -->
+              <div v-if="popularState.loading" class="flex justify-center p-2">
+                <Icon
+                  name="lucide:loader-2"
+                  class="animate-spin h-5 w-5 text-primary"
+                />
+              </div>
+
+              <!-- Sentinel for Infinite Scroll -->
+              <div ref="popularSentinel" class="h-1" />
+            </ShadCommandList>
+          </ShadTabsContent>
+
+          <!-- Recent / Office latest tab -->
+          <ShadTabsContent value="recent" class="m-0">
+            <ShadCommandList class="max-h-64 overflow-y-auto">
+              <ShadCommandGroup>
+                <ShadCommandItem
+                  v-for="tag in filteredRecentTags"
+                  :key="tag.value"
+                  :value="tag.value"
+                  class="flex w-full justify-between"
+                  @select="onSelectTag(tag)"
+                >
+                  <span class="font-body-medium">{{ tag.label }}</span>
+                  <div class="font-body-small text-gray">
+                    {{ convertNumber(tag.postCount) }} โพสต์
+                  </div>
+                </ShadCommandItem>
+              </ShadCommandGroup>
+
+              <!-- Initital Loading / Empty State -->
+              <ShadCommandEmpty
                 :force-show="
   filteredRecentTags.length === 0 && !recentState.loading
-"
-              >
-                <div
-                  class="flex flex-col items-center justify-center h-full gap-2"
-                >
-                  <Icon name="pukaad:tag-empty" class="h-[123px] w-[180px]" />
-                  <div class="text-gray font-body-medium">
-                    {{
-                      recentState.error || (!isOffice && !searchQuery && recentState.data.length === 0 ? "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E41\u0E17\u0E47\u0E01\u0E17\u0E35\u0E48\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14" : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25")
-                    }}
-                  </div>
-                </div>
-              </ShadCommandEmpty>
-
-              <!-- Loading Indicator -->
-              <div v-if="recentState.loading" class="flex justify-center p-2">
-                <Icon
-                  name="lucide:loader-2"
-                  class="animate-spin h-5 w-5 text-primary"
-                />
-              </div>
-
-              <!-- Sentinel for Infinite Scroll -->
-              <div ref="recentSentinel" class="h-1" />
-            </ShadCommandList>
-          </ShadTabsContent>
-        </ShadTabs>
-      </ShadCommand>
-    </ShadPopoverContent>
-  </ShadPopover>
+"
+              >
+                <div
+                  class="flex flex-col items-center justify-center h-full gap-2"
+                >
+                  <Icon name="pukaad:tag-empty" class="h-[123px] w-[180px]" />
+                  <div class="text-gray font-body-medium">
+                    {{
+                      recentState.error || (!isOffice && !searchQuery && recentState.data.length === 0 ? "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E41\u0E17\u0E47\u0E01\u0E17\u0E35\u0E48\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14" : "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25")
+                    }}
+                  </div>
+                </div>
+              </ShadCommandEmpty>
+
+              <!-- Loading Indicator -->
+              <div v-if="recentState.loading" class="flex justify-center p-2">
+                <Icon
+                  name="lucide:loader-2"
+                  class="animate-spin h-5 w-5 text-primary"
+                />
+              </div>
+
+              <!-- Sentinel for Infinite Scroll -->
+              <div ref="recentSentinel" class="h-1" />
+            </ShadCommandList>
+          </ShadTabsContent>
+        </ShadTabs>
+      </ShadCommand>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     name: string;
     required: boolean;
     options: import("../../../types/components/input/input-select.js").InputSelectItem[];
-    limit: number;
     removable: boolean;
+    limit: number;
     showCounter: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;