feat(BaseTag): refactor BaseTag component configuration

shuriken-ui · Dec 17, 2023 · 1111105 · 1111105
1 parent 772a800
commit 1111105
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 31 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -96,6 +96,12 @@ export default defineAppConfig({
       size: 'md',
       rounded: 'lg',
     },
+    BaseTag: {
+      variant: 'solid',
+      color: 'default',
+      size: 'md',
+      rounded: 'lg',
+    },
     defaultShapes: {
       accordion: 'rounded',
       autocompleteItem: 'rounded',

diff --git a/components/base/BaseTag.vue b/components/base/BaseTag.vue
@@ -2,12 +2,17 @@
 const props = withDefaults(
   defineProps<{
     /**
-     * The flavor of the tag.
+     * The variant of the tag.
+     *
+     * @since 2.0.0
+     * @default 'solid'
      */
-    flavor?: 'solid' | 'outline' | 'pastel'
+    variant?: 'solid' | 'outline' | 'pastel'
 
     /**
      * The color of the tag.
+     *
+     * @default 'default'
      */
     color?:
       | 'default'
@@ -19,12 +24,17 @@ const props = withDefaults(
       | 'danger'
 
     /**
-     * The shape of the tag.
+     * The radius of the tag.
+     *
+     * @since 2.0.0
+     * @default 'lg'
      */
-    shape?: 'straight' | 'rounded' | 'curved' | 'full'
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
 
     /**
      * The size of the tag.
+     *
+     * @default 'md'
      */
     size?: 'sm' | 'md'
 
@@ -34,53 +44,60 @@ const props = withDefaults(
     shadow?: 'flat' | 'hover'
   }>(),
   {
-    flavor: 'solid',
-    color: 'default',
-    shape: undefined,
+    variant: undefined,
+    color: undefined,
+    rounded: undefined,
+    size: undefined,
     shadow: undefined,
-    size: 'md',
   },
 )
-const appConfig = useAppConfig()
-const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.tag)
 
-const flavorStyle = {
+const variant = useNuiDefaultProperty(props, 'BaseTag', 'variant')
+const rounded = useNuiDefaultProperty(props, 'BaseTag', 'rounded')
+const color = useNuiDefaultProperty(props, 'BaseTag', 'color')
+const size = useNuiDefaultProperty(props, 'BaseTag', 'size')
+
+const variants = {
   solid: 'nui-tag-solid',
   pastel: 'nui-tag-pastel',
   outline: 'nui-tag-outline',
-}
-const shapeStyle = {
-  straight: '',
-  rounded: 'nui-tag-rounded',
-  smooth: 'nui-tag-smooth',
-  curved: 'nui-tag-curved',
+} as Record<string, string>
+
+const radiuses = {
+  none: '',
+  sm: 'nui-tag-rounded',
+  md: 'nui-tag-smooth',
+  lg: 'nui-tag-curved',
   full: 'nui-tag-full',
-}
-const colorStyle = {
+} as Record<string, string>
+
+const colors = {
   default: 'nui-tag-default',
   muted: 'nui-tag-muted',
   primary: 'nui-tag-primary',
   info: 'nui-tag-info',
   success: 'nui-tag-success',
   warning: 'nui-tag-warning',
   danger: 'nui-tag-danger',
-}
-const shadowStyle = {
-  flat: 'nui-tag-shadow',
-  hover: 'nui-tag-shadow-hover',
-}
-const sizeStyle = {
+} as Record<string, string>
+
+const sizes = {
   sm: 'nui-tag-sm',
   md: 'nui-tag-md',
-}
+} as Record<string, string>
+
+const shadows = {
+  flat: 'nui-tag-shadow',
+  hover: 'nui-tag-shadow-hover',
+} as Record<string, string>
 
 const classes = computed(() => [
   'nui-tag',
-  sizeStyle[props.size],
-  flavorStyle[props.flavor],
-  colorStyle[props.color],
-  shape.value && shapeStyle[shape.value],
-  props.shadow && props.flavor === 'solid' && shadowStyle[props.shadow],
+  size.value && sizes[size.value],
+  rounded.value && radiuses[rounded.value],
+  variant.value && variants[variant.value],
+  color.value && colors[color.value],
+  props.shadow && shadows[props.shadow],
 ])
 </script>
 

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -403,6 +403,32 @@ export default defineNuxtSchema({
          */
         rounded: 'lg',
       },
+      BaseTag: {
+        /**
+         * The variant of the tag.
+         *
+         * @type {'solid' | 'pastel' | 'outline'}
+         */
+        variant: 'solid',
+        /**
+         * The color of the tag.
+         *
+         * @type {'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'muted'}
+         */
+        color: 'default',
+        /**
+         * The radius of the tag.
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg' | 'full'}
+         */
+        rounded: 'lg',
+        /**
+         * The size of the tag.
+         *
+         * @type {'sm' | 'md'}
+         */
+        size: 'md',
+      },
       defaultShapes: {
         /**
          * Default shape for the BaseAccordion component