feat(BaseAccordion): add color, dotColor and classes props, update ap…

…p config
shuriken-ui · Feb 21, 2024 · 6cf13f7 · 6cf13f7
1 parent 50d9935
commit 6cf13f7
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 7 deletions.
diff --git a/.playground/pages/tests/base/accordion.vue b/.playground/pages/tests/base/accordion.vue
@@ -49,6 +49,15 @@ const accordion = ref([
         </div>
       </NuiPreview>
 
+      <NuiPreview title="Dot color" description="Accordion dot color options">
+        <div class="grid gap-4 md:grid-cols-2 max-w-4xl">
+          <BaseAccordion :items="accordion" exclusive dot-color="primary" />
+          <BaseAccordion :items="accordion" exclusive dot-color="success" />
+          <BaseAccordion :items="accordion" exclusive dot-color="info" />
+          <BaseAccordion :items="accordion" exclusive dot-color="dark" />
+        </div>
+      </NuiPreview>
+
       <NuiPreview title="Chevron" description="Chevron accordion style">
         <div class="md:max-w-lg">
           <BaseAccordion :items="accordion" exclusive action="chevron" />

diff --git a/app.config.ts b/app.config.ts
@@ -1,8 +1,10 @@
 export default defineAppConfig({
   nui: {
     BaseAccordion: {
+      color: 'default',
       rounded: 'sm',
       action: 'dot',
+      dotColor: 'primary',
     },
     BaseAutocomplete: {
       rounded: 'sm',

diff --git a/components/base/BaseAccordion.vue b/components/base/BaseAccordion.vue
@@ -2,20 +2,44 @@
 const props = withDefaults(
   defineProps<{
     /**
-     * Define the radius of the accordion
+     * Defines the radius of the accordion
      *
      * @since 2.0.0
      * @default 'sm'
      */
     rounded?: 'none' | 'sm' | 'md' | 'lg'
 
+    /**
+     * Defines the color of the accordion
+     *
+     * @since 3.0.0
+     * @default 'default'
+     */
+    color?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
+
     /**
      * Define the icon used for accordion item toggle action
      *
      * @default 'dot'
      */
     action?: 'dot' | 'chevron' | 'plus'
 
+    /**
+     * Defines the color of the accordion dot
+     *
+     * @since 3.0.0
+     * @default 'primary'
+     */
+    dotColor?:
+      | 'default'
+      | 'primary'
+      | 'info'
+      | 'success'
+      | 'warning'
+      | 'danger'
+      | 'dark'
+      | 'black'
+
     /**
      * The items to display in the accordion.
      */
@@ -39,11 +63,44 @@ const props = withDefaults(
      * Whether if multiple elements in the accordion can be opened at same time or not.
      */
     exclusive?: boolean
+
+    /**
+     * Optional CSS classes to apply to the wrapper, label, input, addon, error, and icon elements.
+     */
+    classes?: {
+      /**
+       * CSS classes to apply to the wrapper element.
+       */
+      wrapper?: string | string[]
+
+      /**
+       * CSS classes to apply to the details element.
+       */
+      details?: string | string[]
+
+      /**
+       * CSS classes to apply to the summary element.
+       */
+      summary?: string | string[]
+
+      /**
+       * CSS classes to apply to the header element.
+       */
+      header?: string | string[]
+
+      /**
+       * CSS classes to apply to the content element.
+       */
+      content?: string | string[]
+    }
   }>(),
   {
     openItems: () => [],
     rounded: undefined,
+    color: undefined,
+    dotColor: undefined,
     action: 'dot',
+    classes: () => ({}),
   },
 )
 const emits = defineEmits<{
@@ -61,14 +118,34 @@ const emits = defineEmits<{
     },
   ): void
 }>()
+const color = useNuiDefaultProperty(props, 'BaseAccordion', 'color')
+const dotColor = useNuiDefaultProperty(props, 'BaseAccordion', 'dotColor')
 const rounded = useNuiDefaultProperty(props, 'BaseAccordion', 'rounded')
 const action = useNuiDefaultProperty(props, 'BaseAccordion', 'action')
 
+const colors = {
+  default: 'nui-accordion-default',
+  'default-contrast': 'nui-accordion-default-contrast',
+  muted: 'nui-accordion-muted',
+  'muted-contrast': 'nui-accordion-muted-contrast',
+}
+
+const dotColors = {
+  default: 'nui-dot-default',
+  primary: 'nui-dot-primary',
+  info: 'nui-dot-info',
+  success: 'nui-dot-success',
+  warning: 'nui-dot-warning',
+  danger: 'nui-dot-danger',
+  dark: 'nui-dot-dark',
+  black: 'nui-dot-black',
+}
+
 const radiuses = {
   none: '',
-  sm: 'nui-accordion-rounded',
-  md: 'nui-accordion-smooth',
-  lg: 'nui-accordion-curved',
+  sm: 'nui-accordion-rounded-sm',
+  md: 'nui-accordion-rounded-md',
+  lg: 'nui-accordion-rounded-lg',
 } as Record<string, string>
 
 const actions = {
@@ -107,15 +184,23 @@ const toggle = (key: number) => {
       v-for="(item, key) in items"
       :key="key"
       class="nui-accordion"
-      :class="[rounded && radiuses[rounded], action && actions[action]]"
+      :class="[
+        rounded && radiuses[rounded],
+        color && colors[color],
+        dotColor && dotColors[dotColor],
+        action && actions[action],
+        props.classes?.wrapper,
+      ]"
     >
       <details
         :open="internalOpenItems?.includes(key) ?? undefined"
         class="nui-accordion-detail"
+        :class="props.classes?.details"
       >
         <slot name="accordion-item" :item="item" :index="key" :toggle="toggle">
           <summary
             class="nui-accordion-summary"
+            :class="props.classes?.summary"
             tabindex="0"
             @click.prevent="() => toggle(key)"
           >
@@ -125,7 +210,7 @@ const toggle = (key: number) => {
               :index="key"
               :toggle="toggle"
             >
-              <div class="nui-accordion-header">
+              <div class="nui-accordion-header" :class="props.classes?.header">
                 <BaseHeading
                   as="h4"
                   size="sm"
@@ -155,7 +240,7 @@ const toggle = (key: number) => {
               </div>
             </slot>
           </summary>
-          <div class="nui-accordion-content">
+          <div class="nui-accordion-content" :class="props.classes?.content">
             <slot
               name="accordion-item-content"
               :item="item"