feat(BaseSnack): update BaseSnack component configuration

app.config.ts

@@ -83,6 +83,10 @@ export default defineAppConfig({
     BaseProse: {
       rounded: 'md',
     },
+    BaseSnack: {
+      size: 'md',
+      color: 'muted',
+    },
     defaultShapes: {
       accordion: 'rounded',
       autocompleteItem: 'rounded',

components/base/BaseSnack.vue

@@ -2,58 +2,85 @@
 const props = withDefaults(
   defineProps<{
     /**
-     * The text to display in the snackbar.
+     * The size of the snack.
+     *
+     * @default 'md'
      */
-    label?: string
+    size?: 'xs' | 'sm' | 'md'
 
     /**
-     * An optional icon to display in the snackbar.
+     * The color of snack.
+     *
+     * @default 'muted'
      */
-    icon?: string
+    color?: 'default' | 'muted'
 
     /**
-     * An optional image to display in the snackbar.
+     * The text to display in the snackbar.
      */
-    image?: string
+    label?: string
 
     /**
-     * The size of the snack.
+     * An optional icon to display in the snackbar.
      */
-    size?: 'sm' | 'md'
+    icon?: string
 
     /**
-     * The color of snack, might be 'default' or 'muted'.
+     * An optional image to display in the snackbar.
      */
-    color?: 'default' | 'muted'
+    image?: string
   }>(),
   {
+    size: undefined,
+    color: undefined,
     label: '',
     icon: undefined,
     image: undefined,
-    size: 'md',
-    color: 'default',
   },
 )
 
 const emit = defineEmits<{
   delete: []
 }>()
-const sizeStyle = {
+
+const size = useNuiDefaultProperty(props, 'BaseSncak', 'size')
+const color = useNuiDefaultProperty(props, 'BaseSncak', 'color')
+
+const sizes = {
+  xs: 'nui-snack-sm',
   sm: 'nui-snack-sm',
   md: 'nui-snack-md',
-}
-const colorStyle = {
+} as Record<string, string>
+
+const colors = {
   default: 'nui-snack-default',
   muted: 'nui-snack-muted',
-}
+} as Record<string, string>
+
+const closeSize = computed(() => {
+  switch (size.value) {
+    case 'xs': {
+      return 'xs'
+    }
+    case 'sm': {
+      return 'sm'
+    }
+    case 'md': {
+      return 'md'
+    }
+    default: {
+      return 'md'
+    }
+  }
+})
 </script>
 
 <template>
   <div
     class="nui-snack"
     :class="[
-      sizeStyle[props.size],
-      colorStyle[props.color],
+      size && sizes[size],
+      color && colors[color],
       props.icon || props.image ? 'nui-has-media' : '',
     ]"
   >
@@ -70,7 +97,8 @@ const colorStyle = {
     </span>
     <BaseButtonClose
       class="nui-snack-button"
-      shape="full"
+      rounded="full"
+      :size="closeSize"
       @click="emit('delete')"
     />
   </div>

nuxt.schema.ts

@@ -355,6 +355,20 @@ export default defineNuxtSchema({
          */
         rounded: 'none',
       },
+      BaseSnack: {
+        /**
+         * The size of the snack.
+         *
+         * @type {'xs' | 'sm' | 'md'}
+         */
+        size: 'md',
+        /**
+         * The color of the snack.
+         *
+         * @type {'default' | 'muted'}
+         */
+        color: 'muted',
+      },
       defaultShapes: {
         /**
          * Default shape for the BaseAccordion component