feat(BaseAutocomplete): update app.config.ts and BaseAutocomplete.vue

app.config.ts

@@ -4,6 +4,14 @@ export default defineAppConfig({
       rounded: 'sm',
       action: 'dot',
     },
+    BaseAutocomplete: {
+      rounded: 'sm',
+      size: 'md',
+      contrast: 'default',
+    },
+    BaseAutocompleteItem: {
+      rounded: 'sm',
+    },
     BaseAvatar: {
       size: 'sm',
       rounded: 'full',

components/form/BaseAutocomplete.vue

@@ -36,9 +36,26 @@ const props = withDefaults(
     items?: T[]
 
     /**
-     * The shape of the component.
+     * The radius of the component.
+     *
+     * @since 2.0.0
+     * @default 'sm'
+     */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+
+    /**
+     * The size of the autocomplete component.
+     *
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg'
+
+    /**
+     * The contrast of autocomplete component.
+     *
+     * @default 'default'
      */
-    shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+    contrast?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
 
     /**
      * The label to display for the component.
@@ -73,31 +90,6 @@ const props = withDefaults(
      */
     error?: string | boolean
 
-    /**
-     * The size of the autocomplete component.
-     */
-    size?: 'sm' | 'md' | 'lg'
-
-    /**
-     * The contrast of autocomplete component.
-     */
-    contrast?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
-
-    /**
-     * Whether the component is in a loading state.
-     */
-    loading?: boolean
-
-    /**
-     * Whether the component is disabled.
-     */
-    disabled?: boolean
-
-    /**
-     * Whether the component can be cleared by the user.
-     */
-    clearable?: boolean
-
     /**
      * Value used when clearing the component value.
      */
@@ -118,16 +110,6 @@ const props = withDefaults(
      */
     dropdownIcon?: string
 
-    /**
-     * Display a chevron icon to open suggestions
-     */
-    dropdown?: boolean
-
-    /**
-     * Whether the component allows multiple selections.
-     */
-    multiple?: boolean
-
     /**
      * A function used to render the items as strings in either the input or the tag when multiple is true.
      */
@@ -174,6 +156,31 @@ const props = withDefaults(
      */
     allowCreate?: boolean
 
+    /**
+     * Whether the component is in a loading state.
+     */
+    loading?: boolean
+
+    /**
+     * Whether the component is disabled.
+     */
+    disabled?: boolean
+
+    /**
+     * Whether the component can be cleared by the user.
+     */
+    clearable?: boolean
+
+    /**
+     * Display a chevron icon to open suggestions
+     */
+    dropdown?: boolean
+
+    /**
+     * Whether the component allows multiple selections.
+     */
+    multiple?: boolean
+
     /**
      * Used a fixed strategy to float the component
      */
@@ -231,13 +238,13 @@ const props = withDefaults(
       prop: false,
     }),
     items: () => [],
-    shape: undefined,
+    rounded: undefined,
+    size: undefined,
+    contrast: undefined,
     icon: undefined,
     placeholder: '',
     label: '',
     error: '',
-    size: 'md',
-    contrast: 'default',
     i18n: () => ({
       pending: 'Loading ...',
       empty: 'Nothing found.',
@@ -321,8 +328,9 @@ const displayValueResolved = computed(() => {
   return props.displayValue
 })
 
-const appConfig = useAppConfig()
-const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.input)
+const rounded = useNuiDefaultProperty(props, 'BaseAutocomplete', 'rounded')
+const size = useNuiDefaultProperty(props, 'BaseAutocomplete', 'size')
+const contrast = useNuiDefaultProperty(props, 'BaseAutocomplete', 'contrast')
 
 const vmodel = useVModel(props, 'modelValue', emits, {
   passive: true,
@@ -356,24 +364,26 @@ const queryCreate = computed(() => {
   return query.value === '' ? null : query.value
 })
 
-const shapeStyle = {
-  straight: '',
-  rounded: 'nui-autocomplete-rounded',
-  smooth: 'nui-autocomplete-smooth',
-  curved: 'nui-autocomplete-curved',
+const radiuses = {
+  none: '',
+  sm: 'nui-autocomplete-rounded',
+  md: 'nui-autocomplete-smooth',
+  lg: 'nui-autocomplete-curved',
   full: 'nui-autocomplete-full',
-}
-const sizeStyle = {
+} as Record<string, string>
+
+const sizes = {
   sm: 'nui-autocomplete-sm',
   md: 'nui-autocomplete-md',
   lg: 'nui-autocomplete-lg',
-}
-const contrastStyle = {
+} as Record<string, string>
+
+const contrasts = {
   default: 'nui-autocomplete-default',
   'default-contrast': 'nui-autocomplete-default-contrast',
   muted: 'nui-autocomplete-muted',
   'muted-contrast': 'nui-autocomplete-muted-contrast',
-}
+} as Record<string, string>
 
 provide(
   'BaseAutocompleteContext',
@@ -495,9 +505,9 @@ function key(item: T) {
     :class="[
       'nui-autocomplete',
       props.classes?.wrapper,
-      sizeStyle[props.size],
-      contrastStyle[props.contrast],
-      shape && shapeStyle[shape],
+      size && sizes[size],
+      contrast && contrasts[contrast],
+      rounded && radiuses[rounded],
       props.icon && 'nui-has-icon',
       props.labelFloat && 'nui-autocomplete-label-float',
       props.loading && 'nui-autocomplete-loading',
@@ -739,7 +749,7 @@ function key(item: T) {
                 }"
               >
                 <BaseAutocompleteItem
-                  :shape="shape"
+                  :rounded="props.rounded ? props.rounded : rounded"
                   :item="
                     properties
                       ? item

components/form/BaseAutocompleteItem.vue

@@ -7,9 +7,12 @@ const props = withDefaults(
     item?: T
 
     /**
-     * The shape of the component.
+     * The radius of the component.
+     *
+     * @since 2.0.0
+     * @default 'sm'
      */
-    shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
 
     /**
      * The icon to show when the component is selected.
@@ -56,10 +59,10 @@ const props = withDefaults(
     }
   }>(),
   {
-    shape: undefined,
+    item: undefined,
+    rounded: undefined,
     mark: 'nui-mark',
     selectedIcon: 'lucide:check',
-    item: undefined,
     properties: () =>
       ({
         label: 'label',
@@ -70,18 +73,15 @@ const props = withDefaults(
   },
 )
 
-const appConfig = useAppConfig()
-const shape = computed(
-  () => props.shape ?? appConfig.nui.defaultShapes?.autocompleteItem,
-)
+const rounded = useNuiDefaultProperty(props, 'BaseAutocompleteItem', 'rounded')
 
-const shapeStyle = {
-  straight: '',
-  rounded: 'rounded-md',
-  smooth: 'rounded-lg',
-  curved: 'rounded-xl',
+const radiuses = {
+  none: '',
+  sm: 'rounded-md',
+  md: 'rounded-lg',
+  lg: 'rounded-xl',
   full: 'rounded-xl',
-}
+} as Record<string, string>
 
 const inputContext = inject('BaseAutocompleteContext', {
   query: '',
@@ -134,7 +134,7 @@ const markedSublabel = useNinjaMark(() => sublabel.value, query, mark)
     class="flex cursor-pointer items-center p-2 transition-colors duration-300"
     :class="[
       props.active ? 'bg-muted-100 dark:bg-muted-700' : '',
-      shape && shapeStyle[shape],
+      rounded && radiuses[rounded],
     ]"
   >
     <BaseAvatar v-if="media && !icon" :src="media" size="xs" class="me-3" />

nuxt.schema.ts

@@ -15,6 +15,34 @@ export default defineNuxtSchema({
          */
         action: 'dot',
       },
+      BaseAutocomplete: {
+        /**
+         * The radius of the autocomplete.
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg' | 'full'}
+         */
+        rounded: 'sm',
+        /**
+         * The size of the autocomplete.
+         *
+         * @type {'sm' | 'md' | 'lg'}
+         */
+        size: 'md',
+        /**
+         * The contrast of the autocomplete.
+         *
+         * @type {'default' | 'default-contrast' | 'muted' | 'muted-contrast'}
+         */
+        contrast: 'default',
+      },
+      BaseAutocompleteItem: {
+        /**
+         * The radius of the autocomplete item.
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg' | 'full'}
+         */
+        rounded: 'sm',
+      },
       BaseAvatar: {
         /**
          * The size of the avatar.