feat: use/boolean

d2/components/demo/markdown-article.md

@@ -2,8 +2,6 @@
 
 [D2Admin](https://github.com/d2-projects/d2-admin) is a fully open source and free enterprise back-end product front-end integration solution, using the latest front-end technology stack, javascript files loading of local first screen less than 60kb, has prepared most of the project preparations, and with a lot of sample code to help the management system agile development.
 
-[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/d2-projects/d2-admin)
-
 [中文](https://github.com/d2-projects/d2-admin/blob/master/README.zh.md) | **English**
 
 ## Preview

d2/use/boolean.js

@@ -0,0 +1,17 @@
+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/break-point.js

@@ -5,11 +5,11 @@ import { useConfig } from 'd2/components/d2/config/use.js'
 
 /**
  * Get breakpoint status
- * @param {Object} breakPointsParam break point setting, if do not set this parameter, use global config
+ * @param {object} breakPointsParam break point setting, if do not set this parameter, use global config
  *                             eg: { sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536 }
- * @returns {Object} status {String} breakPoint now active break point name
- * @returns {Object} status {String} ...breakPointsParam.keys active state of each breakpoint
- * @returns {Object} status {String} min less than the minimum breakpoint
+ * @returns {object} status {string} breakPoint now active break point name
+ * @returns {object} status {string} ...breakPointsParam.keys active state of each breakpoint
+ * @returns {object} status {string} min less than the minimum breakpoint
  */
 export function useBreakPoint (breakPointsParam) {
   const { width } = useWindowSize()

d2/use/window-size.js

@@ -5,8 +5,8 @@ import { onMounted, onUnmounted, onBeforeMount } from 'vue'
 /**
  * Get window size status
  * @param {Number} wait throttle wait
- * @returns {Object} status {String} height window height
- * @returns {Object} status {String} width window width
+ * @returns {object} status {string} height window height
+ * @returns {object} status {string} width window width
  */
 export function useWindowSize(wait = 30) {
 

d2/views/dashboard/demo/layout/dashboard/custom.vue

@@ -8,10 +8,10 @@
 
 <template>
   <d2-admin-layout-dashboard-container>
-    <template v-if="headeractive" #header>
+    <template v-if="headerActive" #header>
       <a-button>Button</a-button>
     </template>
-    <template v-if="footeractive" #footer>
+    <template v-if="footerActive" #footer>
       <a-button>Button</a-button>
     </template>
     <section class="bg-gray-100 border border-gray-200 rounded p-4 mb-4">
@@ -25,24 +25,23 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { useBoolean } from 'd2/use/boolean.js'
 
 export default {
   setup () {
-    const headeractive = ref(true)
-    const footeractive = ref(true)
+    const {
+      value: headerActive,
+      toggle: headerToggle
+    } = useBoolean(true)
 
-    function headerToggle () {
-      headeractive.value = !headeractive.value
-    }
-
-    function footerToggle () {
-      footeractive.value = !footeractive.value
-    }
+    const {
+      value: footerActive,
+      toggle: footerToggle
+    } = useBoolean(true)
 
     return {
-      headeractive,
-      footeractive,
+      headerActive,
+      footerActive,
       headerToggle,
       footerToggle
     }