feat(BaseCheckbox): add colors, update class bindings

shuriken-ui · Feb 22, 2024 · e9dd164 · e9dd164
1 parent df70df6
commit e9dd164
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 6 deletions.
diff --git a/.playground/pages/tests/form/checkbox.vue b/.playground/pages/tests/form/checkbox.vue
@@ -15,6 +15,9 @@ const options = reactive({
   sixth: true,
   seventh: true,
   eighth: true,
+  nineth: true,
+  tenth: true,
+  eleventh: true,
 })
 
 const disabledValue = ref(true)
@@ -79,6 +82,24 @@ function reset() {
             rounded="none"
             color="danger"
           />
+          <BaseCheckbox
+            v-model="options.eighth"
+            label="Light"
+            rounded="none"
+            color="light"
+          />
+          <BaseCheckbox
+            v-model="options.nineth"
+            label="Dark"
+            rounded="none"
+            color="dark"
+          />
+          <BaseCheckbox
+            v-model="options.tenth"
+            label="Black"
+            rounded="none"
+            color="black"
+          />
         </BaseFocusLoop>
       </NuiPreview>
 
@@ -126,6 +147,24 @@ function reset() {
             rounded="sm"
             color="danger"
           />
+          <BaseCheckbox
+            v-model="options.eighth"
+            label="Light"
+            rounded="sm"
+            color="light"
+          />
+          <BaseCheckbox
+            v-model="options.nineth"
+            label="Dark"
+            rounded="sm"
+            color="dark"
+          />
+          <BaseCheckbox
+            v-model="options.tenth"
+            label="Black"
+            rounded="sm"
+            color="black"
+          />
         </BaseFocusLoop>
       </NuiPreview>
 
@@ -173,6 +212,24 @@ function reset() {
             rounded="md"
             color="danger"
           />
+          <BaseCheckbox
+            v-model="options.eighth"
+            label="Light"
+            rounded="md"
+            color="light"
+          />
+          <BaseCheckbox
+            v-model="options.nineth"
+            label="Dark"
+            rounded="md"
+            color="dark"
+          />
+          <BaseCheckbox
+            v-model="options.tenth"
+            label="Black"
+            rounded="md"
+            color="black"
+          />
         </BaseFocusLoop>
       </NuiPreview>
 
@@ -220,6 +277,24 @@ function reset() {
             rounded="lg"
             color="danger"
           />
+          <BaseCheckbox
+            v-model="options.eighth"
+            label="Light"
+            rounded="lg"
+            color="light"
+          />
+          <BaseCheckbox
+            v-model="options.nineth"
+            label="Dark"
+            rounded="lg"
+            color="dark"
+          />
+          <BaseCheckbox
+            v-model="options.tenth"
+            label="Black"
+            rounded="lg"
+            color="black"
+          />
         </BaseFocusLoop>
       </NuiPreview>
 
@@ -271,6 +346,24 @@ function reset() {
             rounded="full"
             color="danger"
           />
+          <BaseCheckbox
+            v-model="options.eighth"
+            label="Light"
+            rounded="full"
+            color="light"
+          />
+          <BaseCheckbox
+            v-model="options.nineth"
+            label="Dark"
+            rounded="full"
+            color="dark"
+          />
+          <BaseCheckbox
+            v-model="options.tenth"
+            label="Black"
+            rounded="full"
+            color="black"
+          />
         </BaseFocusLoop>
       </NuiPreview>
 

diff --git a/components/form/BaseCheckbox.vue b/components/form/BaseCheckbox.vue
@@ -59,8 +59,10 @@ const props = withDefaults(
      */
     color?:
       | 'default'
-      | 'light'
       | 'muted'
+      | 'light'
+      | 'dark'
+      | 'black'
       | 'primary'
       | 'info'
       | 'success'
@@ -110,16 +112,18 @@ const id = useNinjaId(() => props.id)
 
 const radiuses = {
   none: '',
-  sm: 'nui-checkbox-rounded',
-  md: 'nui-checkbox-smooth',
-  lg: 'nui-checkbox-curved',
-  full: 'nui-checkbox-full',
+  sm: 'nui-checkbox-rounded-sm',
+  md: 'nui-checkbox-rounded-md',
+  lg: 'nui-checkbox-rounded-lg',
+  full: 'nui-checkbox-rounded-full',
 } as Record<string, string>
 
 const colors = {
   default: 'nui-checkbox-default',
-  light: 'nui-checkbox-light',
   muted: 'nui-checkbox-muted',
+  light: 'nui-checkbox-light',
+  dark: 'nui-checkbox-dark',
+  black: 'nui-checkbox-black',
   primary: 'nui-checkbox-primary',
   info: 'nui-checkbox-info',
   success: 'nui-checkbox-success',