From 7b192439f823c796415b833ff50e5c9158d7384d Mon Sep 17 00:00:00 2001
From: FairyEver <1711467488@qq.com>
Date: Fri, 10 Dec 2021 14:08:17 +0800
Subject: [PATCH] feat: useSwitch params

---
 d2/use/boolean.js                             | 17 --------
 d2/use/switch.js                              | 42 +++++++++++++++++++
 .../demo/layout/dashboard/custom.vue          | 12 +++---
 3 files changed, 48 insertions(+), 23 deletions(-)
 delete mode 100644 d2/use/boolean.js
 create mode 100644 d2/use/switch.js

diff --git a/d2/use/boolean.js b/d2/use/boolean.js
deleted file mode 100644
index 16a753d3..00000000
--- a/d2/use/boolean.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ref } from 'vue'
-
-/**
- * Returns the Boolean value of the response and the switching method
- */
-export function useBoolean (defaultValue = false) {
-  const value = ref(!!defaultValue)
-
-  function toggle () {
-    value.value = !value.value
-  }
-
-  return {
-    value,
-    toggle
-  }
-}
diff --git a/d2/use/switch.js b/d2/use/switch.js
new file mode 100644
index 00000000..458a8bc4
--- /dev/null
+++ b/d2/use/switch.js
@@ -0,0 +1,42 @@
+import { computed, ref, unref } from 'vue'
+
+/**
+ * Returns the Boolean value of the response and the switching method
+ */
+export function useSwitch (
+  defaultValue = false,
+  {
+    trueValue = true,
+    falseValue = false
+  } = {}
+) {
+  const value = ref(defaultValue ? trueValue : falseValue)
+
+  function toggle () {
+    if (unref(isTrue)) {
+      switchFalse()
+    } else {
+      switchTrue()
+    }
+  }
+
+  function switchTrue () {
+    value.value = trueValue
+  }
+
+  function switchFalse () {
+    value.value = falseValue
+  }
+
+  const isTrue = computed(() => unref(value) === trueValue)
+  const isFalse = computed(() => unref(value) === falseValue)
+
+  return {
+    value,
+    toggle,
+    switchTrue,
+    switchFalse,
+    isTrue,
+    isFalse
+  }
+}
diff --git a/d2/views/dashboard/demo/layout/dashboard/custom.vue b/d2/views/dashboard/demo/layout/dashboard/custom.vue
index 42476629..b60aa807 100644
--- a/d2/views/dashboard/demo/layout/dashboard/custom.vue
+++ b/d2/views/dashboard/demo/layout/dashboard/custom.vue
@@ -16,8 +16,8 @@
     </template>
     <section class="bg-gray-100 border border-gray-200 rounded p-4 mb-4">
       <a-space>
-        <a-button @click="headerToggle">切换 Header</a-button>
-        <a-button @click="footerToggle">切换 Footer</a-button>
+        <a-button @click="headerToggle">切换顶栏显示</a-button>
+        <a-button @click="footerToggle">切换底栏显示</a-button>
       </a-space>
     </section>
     <demo-markdown-article/>
@@ -25,24 +25,24 @@
 </template>
 
 <script>
-import { useBoolean } from 'd2/use/boolean.js'
+import { useSwitch } from 'd2/use/switch.js'
 
 export default {
   setup () {
     const {
       value: headerActive,
       toggle: headerToggle
-    } = useBoolean(true)
+    } = useSwitch(true)
 
     const {
       value: footerActive,
       toggle: footerToggle
-    } = useBoolean(true)
+    } = useSwitch(true)
 
     return {
       headerActive,
-      footerActive,
       headerToggle,
+      footerActive,
       footerToggle
     }
   }