chore(Toggle): improve component

- allow `iconOn` / `iconOff` default values from preset
- `bg-gray-900` on dark mode inside of `bg-white`
- added `name` prop for form control

src/runtime/app.config.ts

@@ -426,7 +426,7 @@ const toggle = {
   active: 'bg-primary-500 dark:bg-primary-400',
   inactive: 'bg-gray-200 dark:bg-gray-700',
   container: {
-    base: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
+    base: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
     active: 'translate-x-4',
     inactive: 'translate-x-0'
   },
@@ -436,6 +436,10 @@ const toggle = {
     inactive: 'opacity-0 ease-out duration-100',
     on: 'h-3 w-3 text-primary-500 dark:text-primary-400',
     off: 'h-3 w-3 text-gray-400 dark:text-gray-500'
+  },
+  default: {
+    iconOn: null,
+    iconOff: null
   }
 }
 

src/runtime/components/forms/Toggle.vue

@@ -1,6 +1,7 @@
 <template>
   <Switch
     v-model="active"
+    :name="name"
     :class="[active ? ui.active : ui.inactive, ui.base]"
   >
     <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
@@ -34,17 +35,21 @@ export default defineComponent({
     UIcon
   },
   props: {
+    name: {
+      type: String,
+      default: null
+    },
     modelValue: {
       type: Boolean,
       default: false
     },
     iconOn: {
       type: String,
-      default: null
+      default: () => appConfig.ui.toggle.default.iconOn
     },
     iconOff: {
       type: String,
-      default: null
+      default: () => appConfig.ui.toggle.default.iconOff
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.toggle>>,