From 8ee2ac10e7eda4c54418f613a5ef87dd89e1f7eb Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 29 May 2023 21:38:51 +0200
Subject: [PATCH] chore(Toggle)!: rename icons to `onIcon` / `offIcon` for
 consistency

---
 docs/content/3.forms/7.toggle.md        | 10 +++++-----
 src/runtime/app.config.ts               |  4 ++--
 src/runtime/components/forms/Toggle.vue | 16 ++++++++--------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/content/3.forms/7.toggle.md b/docs/content/3.forms/7.toggle.md
index b8222611..7b761356 100644
--- a/docs/content/3.forms/7.toggle.md
+++ b/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'
-  iconOff: 'i-heroicons-x-mark-20-solid'
+  onIcon: 'i-heroicons-check-20-solid'
+  offIcon: 'i-heroicons-x-mark-20-solid'
 excludedProps:
-  - iconOn
-  - iconOff
+  - onIcon
+  - offIcon
 ---
 ::
 
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index eb84288c..fe8ebdf1 100644
--- a/src/runtime/app.config.ts
+++ b/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,
-    iconOff: null
+    onIcon: null,
+    offIcon: null
   }
 }
 
diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
index a13821af..b59eabed 100644
--- a/src/runtime/components/forms/Toggle.vue
+++ b/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">
-        <UIcon :name="iconOn" :class="ui.icon.on" />
+      <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+        <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">
-        <UIcon :name="iconOff" :class="ui.icon.off" />
+      <span v-if="offIcon" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
+        <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>>,