@polymarbot/nuxt-layer-shadcn-ui 0.6.3 → 0.6.4

package/app/components/ui/DatePicker/index.stories.ts

@@ -28,7 +28,7 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
-    placeholder: undefined,
+    placeholder: '',
     minDate: undefined,
     maxDate: undefined,
     valueFormat: undefined,

package/app/components/ui/DatePicker/index.vue

@@ -86,7 +86,7 @@ const timeConfig = computed(() => {
       <div @click.stop>
         <Input
           :modelValue="value"
-          :placeholder="placeholder ?? T('placeholder')"
+          :placeholder="placeholder || T('placeholder')"
           :disabled="disabled"
           :readonly="readonly"
           @update:modelValue="(v: string | undefined) => onInput(v ?? '')"

package/app/components/ui/DateRangePicker/index.stories.ts

@@ -27,8 +27,8 @@ const meta = {
     showTime: false,
     disabled: false,
     readonly: false,
-    startPlaceholder: undefined,
-    endPlaceholder: undefined,
+    startPlaceholder: '',
+    endPlaceholder: '',
     maxSpanDays: undefined,
     valueFormat: undefined,
     autoApply: true,

package/app/components/ui/DateRangePicker/index.vue

@@ -97,7 +97,7 @@ const endMaxDate = computed(() => {
       :showTime="showTime"
       :disabled="disabled"
       :readonly="readonly"
-      :placeholder="startPlaceholder ?? T('startPlaceholder')"
+      :placeholder="startPlaceholder || T('startPlaceholder')"
       :minDate="startMinDate"
       :maxDate="startMaxDate"
       :valueFormat="valueFormat"
@@ -112,7 +112,7 @@ const endMaxDate = computed(() => {
       :showTime="showTime"
       :disabled="disabled"
       :readonly="readonly"
-      :placeholder="endPlaceholder ?? T('endPlaceholder')"
+      :placeholder="endPlaceholder || T('endPlaceholder')"
       :minDate="endMinDate"
       :maxDate="endMaxDate"
       :valueFormat="valueFormat"

package/app/components/ui/InputRange/index.stories.ts

@@ -19,8 +19,8 @@ const meta = {
     end: undefined,
     min: 0,
     max: 100,
-    startPlaceholder: undefined,
-    endPlaceholder: undefined,
+    startPlaceholder: '',
+    endPlaceholder: '',
     disabled: false,
   },
   render: args => ({

package/app/components/ui/InputRange/index.vue

@@ -38,7 +38,7 @@ const end = computed({
       v-bind="$attrs"
       :min="min"
       :max="end ?? max"
-      :placeholder="startPlaceholder ?? T('startPlaceholder')"
+      :placeholder="startPlaceholder || T('startPlaceholder')"
       fluid
     />
     <span class="leading-0 text-muted-foreground">
@@ -49,7 +49,7 @@ const end = computed({
       v-bind="$attrs"
       :min="start ?? min"
       :max="max"
-      :placeholder="endPlaceholder ?? T('endPlaceholder')"
+      :placeholder="endPlaceholder || T('endPlaceholder')"
       fluid
     />
   </div>

package/app/components/ui/SearchSelect/index.vue

@@ -135,8 +135,8 @@ function handleSearch (value: string) {
 // -- Empty text --
 
 const computedEmptyText = computed(() => {
-  if (keyword.value) return props.searchEmptyText ?? T('noSearchItems')
-  return props.emptyText ?? T('noItems')
+  if (keyword.value) return props.searchEmptyText || T('noSearchItems')
+  return props.emptyText || T('noItems')
 })
 
 // -- Popover open/close --
@@ -188,9 +188,10 @@ defineExpose({ refresh: resetAndLoad })
     :options="displayedOptions"
     :filter="filterFunction"
     :placeholder="placeholder"
-    :disabled="disabled"
     :searchPlaceholder="searchPlaceholder"
     :emptyText="computedEmptyText"
+    :disabled="disabled"
+    :loading="isLoading"
     @search="handleSearch"
     @open="handleOpen"
     @close="handleClose"
@@ -220,7 +221,6 @@ defineExpose({ refresh: resetAndLoad })
       <EffectIntersectionChecker
         v-if="hasMore"
         :disabled="isLoading"
-        bao
         class="py-2 flex items-center justify-center"
         @show="loadMore"
       >

package/app/components/ui/Select/index.stories.ts

@@ -36,6 +36,7 @@ const meta = {
   argTypes: {
     placeholder: { control: 'text' },
     disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
     filter: { control: 'boolean' },
     multiple: { control: 'boolean' },
     searchPlaceholder: { control: 'text' },
@@ -44,6 +45,7 @@ const meta = {
   args: {
     placeholder: 'Select an option',
     disabled: false,
+    loading: false,
     filter: false,
     multiple: false,
     searchPlaceholder: '',
@@ -277,6 +279,14 @@ export const Disabled: Story = {
   }),
 }
 
+export const Loading: Story = {
+  parameters: noControls,
+  args: {
+    loading: true,
+    placeholder: 'Loading options',
+  },
+}
+
 export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({

package/app/components/ui/Select/index.vue

@@ -29,6 +29,7 @@ const props = withDefaults(defineProps<SelectProps<TValue, TMeta>>(), {
   modelValue: undefined,
   placeholder: undefined,
   disabled: false,
+  loading: false,
   filter: false,
   searchPlaceholder: undefined,
   emptyText: undefined,
@@ -188,7 +189,7 @@ function handleClear (event: MouseEvent) {
             v-else
             class="text-muted-foreground"
           >
-            {{ placeholder ?? T('placeholder') }}
+            {{ placeholder || T('placeholder') }}
           </span>
         </span>
         <InputGroupAddon
@@ -205,6 +206,12 @@ function handleClear (event: MouseEvent) {
         </InputGroupAddon>
         <InputGroupAddon align="inline-end">
           <Icon
+            v-if="loading"
+            name="loader-circle"
+            class="size-4 animate-spin opacity-50"
+          />
+          <Icon
+            v-else
             name="chevron-down"
             class="size-4 opacity-50"
           />
@@ -221,11 +228,11 @@ function handleClear (event: MouseEvent) {
       >
         <CommandInput
           v-if="!!filter"
-          :placeholder="searchPlaceholder ?? T('searchPlaceholder')"
+          :placeholder="searchPlaceholder || T('searchPlaceholder')"
         />
         <CommandList>
           <CommandEmpty>
-            {{ emptyText ?? T('noItems') }}
+            {{ emptyText || T('noItems') }}
           </CommandEmpty>
 
           <template

package/app/components/ui/Select/types.ts

@@ -13,6 +13,8 @@ export type SelectBaseProps<V extends string | number = string, M = unknown> = {
   options?: SelectOption<V, M>[]
   placeholder?: string
   disabled?: boolean
+  /** Show a spinner in place of the chevron */
+  loading?: boolean
   /** true: enable client-side label filter; function: custom filter (disables internal filter) */
   filter?: boolean | SelectFilterFunction
   /** Search input placeholder */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "93045d977de0e19a823787d21ba9631a3d5b7ee8"
+  "gitHead": "e42537ea3be4edff97c84d3dd26529538b280472"
 }