diff --git a/playground/pages/switch.vue b/playground/pages/switch.vue
index 162bfa66..9a1deebe 100644
--- a/playground/pages/switch.vue
+++ b/playground/pages/switch.vue
@@ -26,5 +26,16 @@ const checked = ref(false)
checked-icon="i-heroicons-check-20-solid"
/>
+
+
+
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index b2064386..9fedc5bd 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -14,6 +14,8 @@ type SwitchVariants = VariantProps
export interface SwitchProps extends Omit {
color?: SwitchVariants['color']
size?: SwitchVariants['size']
+ loading?: boolean
+ loadingIcon?: string
checkedIcon?: string
uncheckedIcon?: string
class?: any
@@ -27,23 +29,29 @@ export interface SwitchEmits extends SwitchRootEmits {}
import { computed } from 'vue'
import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#app'
const props = defineProps()
const emits = defineEmits()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'checked', 'disabled', 'required', 'name', 'id', 'value'), emits)
+const appConfig = useAppConfig()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'checked', 'required', 'name', 'id', 'value'), emits)
const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
color: props.color,
- size: props.size
+ size: props.size,
+ loading: props.loading
}))
-
+
-
-
+
+
+
+
+
diff --git a/src/theme/switch.ts b/src/theme/switch.ts
index 1bdc85dd..890c5e19 100644
--- a/src/theme/switch.ts
+++ b/src/theme/switch.ts
@@ -34,10 +34,17 @@ export default (config: { colors: string[] }) => ({
checked: {
true: {
icon: 'group-data-[state=checked]:opacity-100'
- },
- false: {
+ }
+ },
+ unchecked: {
+ true: {
icon: 'group-data-[state=unchecked]:opacity-100'
}
+ },
+ loading: {
+ true: {
+ icon: 'animate-spin'
+ }
}
},
defaultVariants: {
diff --git a/test/components/Switch.spec.ts b/test/components/Switch.spec.ts
index 7f069b5a..380f481f 100644
--- a/test/components/Switch.spec.ts
+++ b/test/components/Switch.spec.ts
@@ -15,13 +15,14 @@ describe('Switch', () => {
['with name', { props: { name: 'test' } }],
['with required', { props: { required: true } }],
['with value', { props: { value: 'switch' } }],
- ['with size 2xs', { props: { size: '2xs' as const } }],
+ ['with checkedIcon', { props: { checkedIcon: 'i-heroicons-check-20-solid' } }],
+ ['with uncheckedIcon', { props: { checkedIcon: 'i-heroicons-x-mark-20-solid' } }],
+ ['with loading', { props: { loading: true } }],
+ ['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
['with size xs', { props: { size: 'xs' as const } }],
['with size sm', { props: { size: 'sm' as const } }],
['with size md', { props: { size: 'md' as const } }],
- ['with size lg', { props: { size: 'lg' as const } }],
- ['with size xl', { props: { size: 'xl' as const } }],
- ['with size 2xl', { props: { size: '2xl' as const } }]
+ ['with size lg', { props: { size: 'lg' as const } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SwitchProps, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, Switch)
expect(html).toMatchSnapshot()
diff --git a/test/components/__snapshots__/Switch.spec.ts.snap b/test/components/__snapshots__/Switch.spec.ts.snap
index 356955cc..2e65e6c7 100644
--- a/test/components/__snapshots__/Switch.spec.ts.snap
+++ b/test/components/__snapshots__/Switch.spec.ts.snap
@@ -15,6 +15,11 @@ exports[`Switch > renders with checked correctly 1`] = `
"
`;
+exports[`Switch > renders with checkedIcon correctly 1`] = `
+"
+"
+`;
+
exports[`Switch > renders with class correctly 1`] = `
"
"
@@ -35,6 +40,16 @@ exports[`Switch > renders with id correctly 1`] = `
"
`;
+exports[`Switch > renders with loading correctly 1`] = `
+"
+"
+`;
+
+exports[`Switch > renders with loadingIcon correctly 1`] = `
+"
+"
+`;
+
exports[`Switch > renders with name correctly 1`] = `
"
"
@@ -45,16 +60,6 @@ exports[`Switch > renders with required correctly 1`] = `
"
`;
-exports[`Switch > renders with size 2xl correctly 1`] = `
-"
-"
-`;
-
-exports[`Switch > renders with size 2xs correctly 1`] = `
-"
-"
-`;
-
exports[`Switch > renders with size lg correctly 1`] = `
"
"
@@ -70,11 +75,6 @@ exports[`Switch > renders with size sm correctly 1`] = `
"
`;
-exports[`Switch > renders with size xl correctly 1`] = `
-"
-"
-`;
-
exports[`Switch > renders with size xs correctly 1`] = `
"
"
@@ -85,6 +85,11 @@ exports[`Switch > renders with ui correctly 1`] = `
"
`;
+exports[`Switch > renders with uncheckedIcon correctly 1`] = `
+"
+"
+`;
+
exports[`Switch > renders with value correctly 1`] = `
"
"