feat(BaseListbox): update BaseListbox styling in app.config.ts and Ba…

…seListbox.vue

app.config.ts

@@ -88,6 +88,11 @@ export default defineAppConfig({
       size: 'md',
       contrast: 'default',
     },
+    BaseListbox: {
+      rounded: 'sm',
+      size: 'md',
+      contrast: 'default',
+    },
     BaseMessage: {
       type: 'success',
       rounded: 'sm',

components/form/BaseListbox.vue

@@ -36,34 +36,36 @@ const props = withDefaults(
     }
 
     /**
-     * The shape of the multiselect.
-     */
-    shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
-
-    /**
-     * The label to display for the multiselect.
+     * The radius of the multiselect.
+     *
+     * @since 2.0.0
+     * @default 'sm'
      */
-    label?: string
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
 
     /**
-     * If the label should be floating.
+     * The size of the listbox.
+     *
+     * @default 'md'
      */
-    labelFloat?: boolean
+    size?: 'sm' | 'md' | 'lg'
 
     /**
-     * Whether the multiselect is in a loading state.
+     * The contrast of the listbox.
+     *
+     * @default 'default'
      */
-    loading?: boolean
+    contrast?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
 
     /**
-     * An error message or boolean value indicating whether the input is in an error state.
+     * The label to display for the multiselect.
      */
-    error?: string | boolean
+    label?: string
 
     /**
-     * Whether the multiselect is disabled.
+     * If the label should be floating.
      */
-    disabled?: boolean
+    labelFloat?: boolean
 
     /**
      * The icon to display for the multiselect.
@@ -76,29 +78,34 @@ const props = withDefaults(
     selectedIcon?: string
 
     /**
-     * Whether the multiselect allows multiple selections.
+     * The placeholder text to display when no selection has been made.
      */
-    multiple?: boolean
+    placeholder?: string
 
     /**
-     * The label to display for multiple selections, or a function that returns the label.
+     * An error message or boolean value indicating whether the input is in an error state.
      */
-    multipleLabel?: string | ((value: T[], labelProperty?: string) => string)
+    error?: string | boolean
 
     /**
-     * The placeholder text to display when no selection has been made.
+     * Whether the multiselect is in a loading state.
      */
-    placeholder?: string
+    loading?: boolean
 
     /**
-     * The size of the listbox.
+     * Whether the multiselect is disabled.
      */
-    size?: 'sm' | 'md' | 'lg'
+    disabled?: boolean
 
     /**
-     * The contrast of the listbox.
+     * Whether the multiselect allows multiple selections.
      */
-    contrast?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
+    multiple?: boolean
+
+    /**
+     * The label to display for multiple selections, or a function that returns the label.
+     */
+    multipleLabel?: string | ((value: T[], labelProperty?: string) => string)
 
     /**
      * Used a fixed strategy to float the component
@@ -153,15 +160,15 @@ const props = withDefaults(
     }
   }>(),
   {
-    icon: '',
     modelValue: undefined,
     modelModifiers: () => ({}),
-    selectedIcon: 'lucide:check',
+    rounded: undefined,
+    size: undefined,
+    contrast: undefined,
     label: '',
+    icon: '',
+    selectedIcon: 'lucide:check',
     placeholder: '',
-    size: 'md',
-    contrast: 'default',
-    shape: undefined,
     error: false,
     multipleLabel: () => {
       return (value: T[], labelProperty?: string): string => {
@@ -175,38 +182,38 @@ const props = withDefaults(
           : String(value?.[0])
       }
     },
-    multiple: false,
-    loading: false,
-    disabled: false,
     properties: () => ({}),
-    fixed: false,
     placement: 'bottom-start',
   },
 )
 const emits = defineEmits<{
   'update:modelValue': [value?: T | T[]]
 }>()
-const appConfig = useAppConfig()
-const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.input)
-
-const shapeStyle = {
-  straight: '',
-  rounded: 'nui-listbox-rounded',
-  smooth: 'nui-listbox-smooth',
-  curved: 'nui-listbox-curved',
+
+const rounded = useNuiDefaultProperty(props, 'BaseListbox', 'rounded')
+const size = useNuiDefaultProperty(props, 'BaseListbox', 'size')
+const contrast = useNuiDefaultProperty(props, 'BaseListbox', 'contrast')
+
+const radiuses = {
+  none: '',
+  sm: 'nui-listbox-rounded',
+  md: 'nui-listbox-smooth',
+  lg: 'nui-listbox-curved',
   full: 'nui-listbox-full',
-}
-const sizeStyle = {
+} as Record<string, string>
+
+const sizes = {
   sm: 'nui-listbox-sm',
   md: 'nui-listbox-md',
   lg: 'nui-listbox-lg',
-}
-const contrastStyle = {
+} as Record<string, string>
+
+const contrasts = {
   default: 'nui-listbox-default',
   'default-contrast': 'nui-listbox-default-contrast',
   muted: 'nui-listbox-muted',
   'muted-contrast': 'nui-listbox-muted-contrast',
-}
+} as Record<string, string>
 
 const vmodel = useVModel(props, 'modelValue', emits, {
   passive: true,
@@ -242,9 +249,9 @@ const value = computed(() => {
   <div
     class="nui-listbox"
     :class="[
-      contrastStyle[props.contrast],
-      sizeStyle[props.size],
-      shape && shapeStyle[shape],
+      contrast && contrasts[contrast],
+      size && sizes[size],
+      rounded && radiuses[rounded],
       props.error && !props.loading && 'nui-listbox-error',
       props.loading && 'nui-listbox-loading',
       props.labelFloat && 'nui-listbox-label-float',
@@ -371,7 +378,7 @@ const value = computed(() => {
                       </div>
                     </template>
 
-                    <span class="nui-listbox-chevron">
+                    <span class="nui-listbox-chevron nui-chevron">
                       <Icon
                         name="lucide:chevron-down"
                         class="nui-listbox-chevron-inner"

nuxt.schema.ts

@@ -375,6 +375,26 @@ export default defineNuxtSchema({
          */
         contrast: 'default',
       },
+      BaseListbox: {
+        /**
+         * The radius of the input.
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg' | 'full'}
+         */
+        rounded: 'sm',
+        /**
+         * The size of the input.
+         *
+         * @type {'sm' | 'md' | 'lg'}
+         */
+        size: 'md',
+        /**
+         * The contrast of the input.
+         *
+         * @type {'default' | 'default-contrast' | 'muted' | 'muted-contrast'}
+         */
+        contrast: 'default',
+      },
       BaseMessage: {
         /**
          * The type of the message.