feat: useSwitch params

d2/use/boolean.js

@@ -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
-  }
-}

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
+  }
+}

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
     }
   }