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

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

@@ -201,9 +201,9 @@ export const Disabled: Story = {
         code: `
 <template>
   <Button variant="default" disabled>default</Button>
+  <Button variant="secondary" disabled>secondary</Button>
   <Button variant="destructive" disabled>destructive</Button>
   <Button variant="outline" disabled>outline</Button>
-  <Button variant="secondary" disabled>secondary</Button>
   <Button variant="ghost" disabled>ghost</Button>
   <Button variant="link" disabled>link</Button>
 </template>
@@ -230,10 +230,10 @@ export const Rounded: Story = {
         code: `
 <template>
   <Button rounded>Rounded</Button>
-  <Button rounded variant="outline">Outline</Button>
   <Button rounded variant="secondary">Secondary</Button>
-  <Button rounded size="icon" variant="outline" icon="plus" />
+  <Button rounded variant="outline">Outline</Button>
   <Button rounded size="icon" variant="secondary" icon="sun" />
+  <Button rounded size="icon" variant="outline" icon="plus" />
 </template>
 `.trim(),
       },
@@ -244,10 +244,10 @@ export const Rounded: Story = {
     template: `
       <div class="flex flex-wrap items-center gap-3">
         <Button rounded>Rounded</Button>
-        <Button rounded variant="outline">Outline</Button>
         <Button rounded variant="secondary">Secondary</Button>
-        <Button rounded size="icon" variant="outline" icon="plus" />
+        <Button rounded variant="outline">Outline</Button>
         <Button rounded size="icon" variant="secondary" icon="sun" />
+        <Button rounded size="icon" variant="outline" icon="plus" />
       </div>
     `,
   }),

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,
@@ -38,13 +38,12 @@ const meta = {
   render: args => ({
     components: { DatePicker },
     setup () {
-      const value = ref<Date | string | null>(null)
-      return { args, value }
+      return { args }
     },
     template: `
       <div class="max-w-xs">
-        <DatePicker v-bind="args" v-model="value" />
-        <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+        <DatePicker v-bind="args" @update:modelValue="v => args.modelValue = v" />
+        <div class="mt-2 text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
       </div>
     `,
   }),

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,
@@ -37,16 +37,18 @@ const meta = {
   render: args => ({
     components: { DateRangePicker },
     setup () {
-      const start = ref<Date | string | null>(args.start ?? null)
-      const end = ref<Date | string | null>(args.end ?? null)
-      return { args, start, end }
+      return { args }
     },
     template: `
       <div class="max-w-lg">
-        <DateRangePicker v-bind="args" v-model:start="start" v-model:end="end" />
+        <DateRangePicker
+          v-bind="args"
+          @update:start="v => args.start = v"
+          @update:end="v => args.end = v"
+        />
         <div class="mt-2 text-sm text-muted-foreground">
-          <div>Start: {{ start }}</div>
-          <div>End: {{ end }}</div>
+          <div>Start: {{ args.start }}</div>
+          <div>End: {{ args.end }}</div>
         </div>
       </div>
     `,

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/InputOtp/index.stories.ts

@@ -18,13 +18,12 @@ const meta = {
   render: args => ({
     components: { InputOtp },
     setup () {
-      const otp = ref('')
-      return { args, otp }
+      return { args }
     },
     template: `
       <div class="space-y-4">
-        <InputOtp v-bind="args" v-model="otp" />
-        <div class="text-sm text-muted-foreground">Value: {{ otp }}</div>
+        <InputOtp v-bind="args" @update:modelValue="v => args.modelValue = v" />
+        <div class="text-sm text-muted-foreground">Value: {{ args.modelValue }}</div>
       </div>
     `,
   }),

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

@@ -19,21 +19,23 @@ const meta = {
     end: undefined,
     min: 0,
     max: 100,
-    startPlaceholder: undefined,
-    endPlaceholder: undefined,
+    startPlaceholder: '',
+    endPlaceholder: '',
     disabled: false,
   },
   render: args => ({
     components: { InputRange },
     setup () {
-      const start = ref<number | undefined>(args.start)
-      const end = ref<number | undefined>(args.end)
-      return { args, start, end }
+      return { args }
     },
     template: `
       <div class="max-w-md">
-        <InputRange v-bind="args" v-model:start="start" v-model:end="end" />
-        <div class="mt-2 text-sm text-muted-foreground">Start: {{ start }}, End: {{ end }}</div>
+        <InputRange
+          v-bind="args"
+          @update:start="v => args.start = v"
+          @update:end="v => args.end = v"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">Start: {{ args.start }}, End: {{ args.end }}</div>
       </div>
     `,
   }),

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/RadioCardGroup/index.stories.ts

@@ -51,13 +51,12 @@ const meta = {
   render: args => ({
     components: { RadioCardGroup },
     setup () {
-      const selected = ref(args.modelValue ?? '')
-      return { args, selected }
+      return { args }
     },
     template: `
       <div class="max-w-md space-y-4">
-        <RadioCardGroup v-bind="args" v-model="selected" />
-        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
+        <RadioCardGroup v-bind="args" @update:modelValue="v => args.modelValue = v" />
+        <div class="text-sm text-muted-foreground">Selected: {{ args.modelValue }}</div>
       </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.2",
+  "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": "fa45348c0fd5ef56ec2c3e57b835dbd9774d6c8c"
+  "gitHead": "e42537ea3be4edff97c84d3dd26529538b280472"
 }