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

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

Hide file tree

Showing 3 changed files with 57 additions and 29 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -1,5 +1,9 @@
 export default defineAppConfig({
   nui: {
+    BaseAccordion: {
+      rounded: 'sm',
+      action: 'dot',
+    },
     BaseButton: {
       variant: 'solid',
       rounded: 'sm',

diff --git a/components/base/BaseAccordion.vue b/components/base/BaseAccordion.vue
@@ -2,7 +2,22 @@
 const props = withDefaults(
   defineProps<{
     /**
-     * The items to display in accordion.
+     * Define the radius of the accordion
+     *
+     * @since 2.0.0
+     * @default 'sm'
+     */
+    rounded?: 'none' | 'sm' | 'md' | 'lg'
+
+    /**
+     * Define the icon used for accordion item toggle action
+     *
+     * @default 'dot'
+     */
+    action?: 'dot' | 'chevron' | 'plus'
+
+    /**
+     * The items to display in the accordion.
      */
     items: {
       /**
@@ -14,28 +29,21 @@ const props = withDefaults(
        */
       content: string
     }[]
+
     /**
      * Indexes of the items that should be opened by default.
      */
     openItems?: number[]
+
     /**
      * Whether if multiple elements in the accordion can be opened at same time or not.
      */
     exclusive?: boolean
-    /**
-     * Define the shape of the accordion
-     */
-    shape?: 'straight' | 'rounded' | 'smooth' | 'curved'
-    /**
-     * Define the icon used for accordion item toggle action
-     */
-    action?: 'dot' | 'chevron' | 'plus'
   }>(),
   {
     openItems: () => [],
-    shape: undefined,
+    rounded: undefined,
     action: 'dot',
-    exclusive: false,
   },
 )
 const emits = defineEmits<{
@@ -53,22 +61,21 @@ const emits = defineEmits<{
     },
   ): void
 }>()
-const appConfig = useAppConfig()
-const shape = computed(
-  () => props.shape ?? appConfig.nui.defaultShapes?.accordion,
-)
+const rounded = useNuiDefaultProperty(props, 'BaseAccordion', 'rounded')
+const action = useNuiDefaultProperty(props, 'BaseAccordion', 'action')
 
-const shapeStyle = {
-  straight: '',
-  rounded: 'nui-accordion-rounded',
-  smooth: 'nui-accordion-smooth',
-  curved: 'nui-accordion-curved',
-}
-const actionStyle = {
+const radiuses = {
+  none: '',
+  sm: 'nui-accordion-rounded',
+  md: 'nui-accordion-smooth',
+  lg: 'nui-accordion-curved',
+} as Record<string, string>
+
+const actions = {
   dot: 'nui-accordion-dot',
   chevron: 'nui-accordion-chevron',
   plus: 'nui-accordion-plus',
-}
+} as Record<string, string>
 
 const internalOpenItems = ref(props.openItems)
 const toggle = (key: number) => {
@@ -100,7 +107,7 @@ const toggle = (key: number) => {
       v-for="(item, key) in items"
       :key="key"
       class="nui-accordion"
-      :class="[actionStyle[props.action], shape && shapeStyle[shape]]"
+      :class="[rounded && radiuses[rounded], action && actions[action]]"
     >
       <details
         :open="internalOpenItems?.includes(key) ?? undefined"
@@ -122,24 +129,27 @@ const toggle = (key: number) => {
                 <BaseHeading
                   as="h4"
                   size="sm"
-                  weight="semibold"
+                  weight="medium"
                   lead="none"
                   class="nui-accordion-header-inner"
                 >
                   {{ item.title }}
                 </BaseHeading>
 
                 <div
-                  v-if="props.action === 'dot'"
+                  v-if="props.action === 'dot' || action === 'dot'"
                   class="nui-accordion-dot"
                 ></div>
                 <div
-                  v-else-if="props.action === 'chevron'"
+                  v-else-if="props.action === 'chevron' || action === 'chevron'"
                   class="nui-icon-outer"
                 >
                   <IconChevronDown class="nui-chevron-icon" />
                 </div>
-                <div v-else-if="props.action === 'plus'" class="nui-icon-outer">
+                <div
+                  v-else-if="props.action === 'plus' || action === 'plus'"
+                  class="nui-icon-outer"
+                >
                   <IconPlus class="nui-plus-icon" />
                 </div>
               </div>
@@ -152,7 +162,7 @@ const toggle = (key: number) => {
               :index="key"
               :toggle="toggle"
             >
-              <BaseParagraph size="md" lead="tight">
+              <BaseParagraph size="sm" lead="tight">
                 {{ item.content }}
               </BaseParagraph>
             </slot>

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -1,6 +1,20 @@
 export default defineNuxtSchema({
   appConfig: {
     nui: {
+      BaseAccordion: {
+        /**
+         * The radius of the accordion.
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg'}
+         */
+        rounded: 'sm',
+        /**
+         * The action icon of the accordion.
+         *
+         * @type {'dot' | 'chevron' | 'plus'}
+         */
+        action: 'dot',
+      },
       BaseButton: {
         /**
          * Default variant for the BaseButton component