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

shuriken-ui · Dec 17, 2023 · 40ed93d · 40ed93d
1 parent fb0dad0
commit 40ed93d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 27 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -4,6 +4,10 @@ export default defineAppConfig({
       rounded: 'sm',
       action: 'dot',
     },
+    BaseAvatar: {
+      size: 'sm',
+      rounded: 'full',
+    },
     BaseButton: {
       variant: 'solid',
       rounded: 'sm',

diff --git a/components/base/BaseAvatar.vue b/components/base/BaseAvatar.vue
@@ -23,16 +23,20 @@ const props = withDefaults(
 
     /**
      * The size of the image.
+     *
+     * @default 'sm'
      */
     size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
 
     /**
-     * The shape of the image.
+     * The radius of the image.
+     *
+     * @default 'full'
      */
-    shape?: 'straight' | 'rounded' | 'curved' | 'full'
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
 
     /**
-     * Applies an svg mask from the available presets. (needs shape to be set to `straight`).
+     * Applies an svg mask from the available presets. (needs rounded to be set to `none`).
      */
     mask?: 'hex' | 'hexed' | 'deca' | 'blob' | 'diamond'
 
@@ -65,37 +69,40 @@ const props = withDefaults(
   {
     src: undefined,
     srcDark: undefined,
-    text: '?',
     badgeSrc: undefined,
-    size: 'sm',
-    shape: undefined,
+    text: '?',
+    size: undefined,
+    rounded: undefined,
     mask: undefined,
     dot: false,
     ring: false,
   },
 )
-const appConfig = useAppConfig()
-const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.avatar)
 
-const dotStyle = {
+const rounded = useNuiDefaultProperty(props, 'BaseAvatar', 'rounded')
+const size = useNuiDefaultProperty(props, 'BaseAvatar', 'size')
+
+const dots = {
   success: 'nui-dot-success',
   primary: 'nui-dot-primary',
   info: 'nui-dot-info',
   warning: 'nui-dot-warning',
   danger: 'nui-dot-danger',
   pink: 'nui-dot-pink',
   yellow: 'nui-dot-yellow',
-}
-const ringStyle = {
+} as Record<string, string>
+
+const rings = {
   success: 'nui-ring-success',
   primary: 'nui-ring-primary',
   info: 'nui-ring-info',
   warning: 'nui-ring-warning',
   danger: 'nui-ring-danger',
   pink: 'nui-ring-pink',
   yellow: 'nui-ring-yellow',
-}
-const sizeStyle = {
+} as Record<string, string>
+
+const sizes = {
   xxs: 'nui-avatar-xxs',
   xs: 'nui-avatar-xs',
   sm: 'nui-avatar-sm',
@@ -105,33 +112,38 @@ const sizeStyle = {
   '2xl': 'nui-avatar-2xl',
   '3xl': 'nui-avatar-3xl',
   '4xl': 'nui-avatar-4xl',
-}
-const shapeStyle = {
-  straight: 'nui-avatar-straight',
-  rounded: 'nui-avatar-rounded',
-  curved: 'nui-avatar-curved',
+} as Record<string, string>
+
+const radiuses = {
+  none: 'nui-avatar-straight',
+  sm: 'nui-avatar-rounded',
+  md: 'nui-avatar-smooth',
+  lg: 'nui-avatar-curved',
   full: 'nui-avatar-full',
-}
-const maskStyle = {
+} as Record<string, string>
+
+const masks = {
   hex: 'nui-mask-hex',
   hexed: 'nui-mask-hexed',
   deca: 'nui-mask-deca',
   blob: 'nui-mask-blob',
   diamond: 'nui-mask-diamond',
-}
+} as Record<string, string>
 </script>
 
 <template>
   <div
     class="nui-avatar"
     :class="[
-      sizeStyle[props.size],
-      shape && shapeStyle[shape],
-      props.mask && `nui-avatar-mask ${maskStyle[props.mask]}`,
+      size && sizes[size],
+      rounded && radiuses[rounded],
+      props.mask &&
+        (props.rounded === 'none' || rounded === 'none') &&
+        `nui-avatar-mask ${masks[props.mask]}`,
       props.ring &&
         (props.ring === true
-          ? `nui-avatar-ring ${ringStyle['primary']}`
-          : `nui-avatar-ring ${ringStyle[props.ring]}`),
+          ? `nui-avatar-ring ${rings['primary']}`
+          : `nui-avatar-ring ${rings[props.ring]}`),
     ]"
   >
     <div class="nui-avatar-inner">
@@ -169,7 +181,7 @@ const maskStyle = {
     <span
       v-if="props.dot"
       class="nui-avatar-dot"
-      :class="[props.dot === true ? dotStyle['primary'] : dotStyle[props.dot]]"
+      :class="[props.dot === true ? dots['primary'] : dots[props.dot]]"
     ></span>
   </div>
 </template>
diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -15,6 +15,20 @@ export default defineNuxtSchema({
          */
         action: 'dot',
       },
+      BaseAvatar: {
+        /**
+         * The size of the avatar.
+         *
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'}
+         */
+        size: 'sm',
+        /**
+         * The radius of the avatar.
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg' | 'full'}
+         */
+        rounded: 'full',
+      },
       BaseButton: {
         /**
          * Default variant for the BaseButton component