pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,89 +1,89 @@
 <template>
-  <div :class="cn('w-full', props.class)">
-    <InputTextField
-        ref="fieldRef"
-        v-model="displayValue"
-        :id="props.id"
-        :name="props.name"
-        :label="props.label"
-        :placeholder="props.placeholder"
-        :description="props.description"
-        :rules="props.rules"
-        :required="props.required"
-        :disabled="props.disabled"
-        :disabled-error-message="props.disabledErrorMessage"
-        :icon-append="appendIcon"
-        class="cursor-pointer"
-        readonly
-        @click="onOpenModal"
-        @click-icon-append="onAppendClick"
-      />
-
-    <Modal v-model="isOpenModal" :title="props.title">
-      <template #title>
-        <span class="font-title-medium-prominent text-black">
-          {{ props.title }}
-        </span>
-      </template>
-
-      <div class="flex w-full flex-col gap-[16px]">
-        <InputSearch
-          v-model="searchKeyword"
-          name="tag-modal-search"
-          :placeholder="props.searchPlaceholder"
-          icon="lucide:search"
-          icon-position="right"
-          disabled-error-message
-        />
-
-        <div
-          v-if="isInitialLoading"
-          class="flex h-[392px] items-center justify-center"
-        >
-          <Icon
-            name="lucide:loader-circle"
-            :size="24"
-            class="animate-spin text-primary"
-          />
-        </div>
-
-        <div
-          v-else-if="filteredOptions.length > 0"
-          class="flex max-h-[592px] flex-wrap content-start gap-[8px] overflow-y-auto pr-[4px]"
-          @scroll.passive="onListScroll"
-        >
-          <Chip
-            v-for="option in filteredOptions"
-            :key="optionKey(option)"
-            :color="isSelected(option) ? 'primary' : 'bright'"
-            class="cursor-pointer transition-colors"
-            @click="onSelectOption(option)"
-          >
-            {{ option.label }}
-          </Chip>
-
-          <div
-            v-if="isLoadingMore"
-            class="flex w-full items-center justify-center py-[8px]"
-          >
-            <Icon
-              name="lucide:loader-circle"
-              :size="20"
-              class="animate-spin text-primary"
-            />
-          </div>
-        </div>
-
-        <div
-          v-else
-          class="flex h-[392px] flex-col items-center justify-center gap-[8px]"
-        >
-          <Icon name="pukaad:page-not-found" class="h-[100px] w-[121px]" />
-          <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
-        </div>
-      </div>
-    </Modal>
-  </div>
+  <div :class="cn('w-full', props.class)">
+    <InputTextField
+        ref="fieldRef"
+        v-model="displayValue"
+        :id="props.id"
+        :name="props.name"
+        :label="props.label"
+        :placeholder="props.placeholder"
+        :description="props.description"
+        :rules="props.rules"
+        :required="props.required"
+        :disabled="props.disabled"
+        :disabled-error-message="props.disabledErrorMessage"
+        :icon-append="appendIcon"
+        class="cursor-pointer"
+        readonly
+        @click="onOpenModal"
+        @click-icon-append="onAppendClick"
+      />
+
+    <Modal v-model="isOpenModal" :title="props.title">
+      <template #title>
+        <span class="font-title-medium-prominent text-black">
+          {{ props.title }}
+        </span>
+      </template>
+
+      <div class="flex w-full flex-col gap-[16px]">
+        <InputSearch
+          v-model="searchKeyword"
+          name="tag-modal-search"
+          :placeholder="props.searchPlaceholder"
+          icon="lucide:search"
+          icon-position="right"
+          disabled-error-message
+        />
+
+        <div
+          v-if="isInitialLoading"
+          class="flex h-[392px] items-center justify-center"
+        >
+          <Icon
+            name="lucide:loader-circle"
+            :size="24"
+            class="animate-spin text-primary"
+          />
+        </div>
+
+        <div
+          v-else-if="filteredOptions.length > 0"
+          class="flex max-h-[592px] flex-wrap content-start gap-[8px] overflow-y-auto pr-[4px]"
+          @scroll.passive="onListScroll"
+        >
+          <Chip
+            v-for="option in filteredOptions"
+            :key="optionKey(option)"
+            :color="isSelected(option) ? 'primary' : 'bright'"
+            class="cursor-pointer transition-colors"
+            @click="onSelectOption(option)"
+          >
+            {{ option.label }}
+          </Chip>
+
+          <div
+            v-if="isLoadingMore"
+            class="flex w-full items-center justify-center py-[8px]"
+          >
+            <Icon
+              name="lucide:loader-circle"
+              :size="20"
+              class="animate-spin text-primary"
+            />
+          </div>
+        </div>
+
+        <div
+          v-else
+          class="flex h-[392px] flex-col items-center justify-center gap-[8px]"
+        >
+          <Icon name="pukaad:page-not-found" class="h-[100px] w-[121px]" />
+          <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+        </div>
+      </div>
+    </Modal>
+  </div>
 </template>
 
 <script setup>

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>