feat(BaseButtonClose): update BaseButtonClose component styles and de…

…fault values
shuriken-ui · Dec 17, 2023 · e4ea740 · e4ea740
1 parent 4ae77fa
commit e4ea740
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 16 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -10,6 +10,9 @@ export default defineAppConfig({
       rounded: 'sm',
       color: 'default',
     },
+    BaseButtonClose: {
+      rounded: 'full',
+    },
     BaseButtonIcon: {
       rounded: 'sm',
       color: 'default',

diff --git a/components/base/BaseButtonClose.vue b/components/base/BaseButtonClose.vue
@@ -2,10 +2,25 @@
 const props = withDefaults(
   defineProps<{
     /**
-     * The shape of the button.
+     * The size of the button.
+     *
+     * @default 'sm'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg'
+
+    /**
+     * The radius of the button.
+     *
+     * @since 2.0.0
+     * @default 'full'
+     */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+
+    /**
+     * The color of the button.
+     *
+     * @default 'default'
      */
-    shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
-    /** The color of the button. Can be 'default' or 'muted. */
     color?:
       | 'default'
       | 'muted'
@@ -17,24 +32,32 @@ const props = withDefaults(
       | 'none'
   }>(),
   {
-    shape: undefined,
-    color: 'default',
+    size: undefined,
+    rounded: undefined,
+    color: undefined,
   },
 )
 
-const appConfig = useAppConfig()
-const shape = computed(
-  () => props.shape ?? appConfig.nui.defaultShapes?.buttonClose,
-)
+const size = useNuiDefaultProperty(props, 'BaseButtonClose', 'size')
+const rounded = useNuiDefaultProperty(props, 'BaseButtonClose', 'rounded')
+const color = useNuiDefaultProperty(props, 'BaseButtonClose', 'color')
 
-const shapeStyle = {
+const sizes = {
+  xs: 'nui-button-xs',
+  sm: 'nui-button-sm',
+  md: 'nui-button-md',
+  lg: 'nui-button-lg',
+} as Record<string, string>
+
+const radiuses = {
   straight: '',
   rounded: 'nui-button-rounded',
   smooth: 'nui-button-smooth',
   curved: 'nui-button-curved',
   full: 'nui-button-full',
-}
-const colorStyle = {
+} as Record<string, string>
+
+const colors = {
   default: 'nui-button-default',
   muted: 'nui-button-muted',
   primary: 'nui-button-primary',
@@ -43,12 +66,13 @@ const colorStyle = {
   warning: 'nui-button-warning',
   danger: 'nui-button-danger',
   none: '',
-}
+} as Record<string, string>
 
 const classes = computed(() => [
   'nui-button-close',
-  shape.value && shapeStyle[shape.value],
-  colorStyle[props.color],
+  size.value && sizes[size.value],
+  rounded.value && radiuses[rounded.value],
+  color.value && colors[color.value],
 ])
 </script>
 

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -23,7 +23,7 @@ export default defineNuxtSchema({
         /**
          * Default size for the BaseButton component
          *
-         * @type {'sm' | 'md' | 'lg' | 'xl'}
+         * @type {'sm' | 'md' | 'lg'}
          */
         size: 'md',
       },
@@ -41,6 +41,26 @@ export default defineNuxtSchema({
          */
         color: 'default',
       },
+      BaseButtonClose: {
+        /**
+         * Default size for the BaseButtonClose component
+         *
+         * @type {'xs' | 'sm' | 'md' | 'lg'}
+         */
+        size: 'sm',
+        /**
+         * Default rounded for the BaseButtonClose component
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg' | 'full'}
+         */
+        rounded: 'full',
+        /**
+         * Default color for the BaseButtonClose component
+         *
+         * @type {'default'| 'primary'| 'info'| 'success'| 'warning'| 'danger'| 'light'| 'muted'| 'none'}
+         */
+        color: 'default',
+      },
       BaseButtonIcon: {
         /**
          * Default rounded for the BaseButtonIcon component