chore(Toggle)!: rename icons to onIcon / offIcon for consistency

docs/content/3.forms/7.toggle.md

@@ -13,16 +13,16 @@ headlessui:
 
 ### Icon
 
-Use any icon from [Iconify](https://icones.js.org) by setting the `icon-on` and `icon-off` props by using this pattern: `i-{collection_name}-{icon_name}`.
+Use any icon from [Iconify](https://icones.js.org) by setting the `on-icon` and `off-icon` props by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.toggle.default.onIcon` and `ui.toggle.default.offIcon`.
 
 ::component-card
 ---
 props:
-  iconOn: 'i-heroicons-check-20-solid'
+  onIcon: 'i-heroicons-check-20-solid'
-  iconOff: 'i-heroicons-x-mark-20-solid'
+  offIcon: 'i-heroicons-x-mark-20-solid'
 excludedProps:
-  - iconOn
+  - onIcon
-  - iconOff
+  - offIcon
 ---
 ::
 

src/runtime/app.config.ts

@@ -439,8 +439,8 @@ const toggle = {
     off: 'h-3 w-3 text-gray-400 dark:text-gray-500'
   },
   default: {
-    iconOn: null,
+    onIcon: null,
-    iconOff: null
+    offIcon: null
   }
 }
 

src/runtime/components/forms/Toggle.vue

@@ -5,11 +5,11 @@
     :class="[active ? ui.active : ui.inactive, ui.base]"
   >
     <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
-      <span v-if="iconOn" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+      <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
-        <UIcon :name="iconOn" :class="ui.icon.on" />
+        <UIcon :name="onIcon" :class="ui.icon.on" />
       </span>
-      <span v-if="iconOff" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
+      <span v-if="offIcon" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
-        <UIcon :name="iconOff" :class="ui.icon.off" />
+        <UIcon :name="offIcon" :class="ui.icon.off" />
       </span>
     </span>
   </Switch>
@@ -43,13 +43,13 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    iconOn: {
+    onIcon: {
       type: String,
-      default: () => appConfig.ui.toggle.default.iconOn
+      default: () => appConfig.ui.toggle.default.onIcon
     },
-    iconOff: {
+    offIcon: {
       type: String,
-      default: () => appConfig.ui.toggle.default.iconOff
+      default: () => appConfig.ui.toggle.default.offIcon
     },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.toggle>>,