feat(BaseCheckboxAnimated): update app.config.ts and BaseCheckboxAnim…

…ated.vue
shuriken-ui · Dec 18, 2023 · 23158c8 · 23158c8
1 parent 45e06dd
commit 23158c8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -46,6 +46,9 @@ export default defineAppConfig({
       rounded: 'sm',
       color: 'default',
     },
+    BaseCheckboxAnimated: {
+      color: 'primary',
+    },
     BaseDropdown: {
       variant: 'button',
       buttonColor: 'default',

diff --git a/components/form/BaseCheckboxAnimated.vue b/components/form/BaseCheckboxAnimated.vue
@@ -30,7 +30,10 @@ const props = withDefaults(
      */
     falseValue?: T
 
-    /** The color of the checkbox. Can be 'default', 'primary', 'info', 'success', 'warning', or 'danger' */
+    /** The color of the checkbox.
+     *
+     * @default 'primary'
+     */
     color?:
       | 'primary'
       | 'info'
@@ -99,15 +102,17 @@ const checked = computed(() => {
       : value.value === props.value
 })
 
-const colorStyle = {
+const color = useNuiDefaultProperty(props, 'BaseCheckboxAnimated', 'color')
+
+const colors = {
   primary: 'text-primary-500',
   info: 'text-info-500',
   success: 'text-success-500',
   warning: 'text-warning-500',
   danger: 'text-danger-500',
   light: 'text-light-100',
   muted: 'text-muted-400',
-}
+} as Record<string, string>
 
 const updateCheckbox = () => {
   if (element.value && innerElement.value) {
@@ -174,7 +179,7 @@ const id = useNinjaId(() => props.id)
     <label
       class="peer-disabled:opacity-75"
       :for="id"
-      :class="[props.color && colorStyle[props.color], props.classes?.label]"
+      :class="[color && colors[color], props.classes?.label]"
     >
       <div ref="innerElement"></div>
       <IconCheckCircle />

diff --git a/nuxt.schema.ts b/nuxt.schema.ts
@@ -179,6 +179,14 @@ export default defineNuxtSchema({
          */
         color: 'default',
       },
+      BaseCheckboxAnimated: {
+        /**
+         * Default color for the BaseCheckbox component
+         *
+         * @type {'light' | 'muted' | 'primary' | 'info' | 'success' | 'warning' | 'danger'}
+         */
+        color: 'primary',
+      },
       BaseDropdown: {
         /**
          * The variant of the dropdown.