feat: a lot of things about docs

.gitignore

@@ -2,6 +2,5 @@ node_modules
 *.swp
 *.swo
 coverage
-docs/static/sw.js
 
 dist

packages/code-block/CodeBlock.vue

@@ -1,13 +1,16 @@
 <template>
   <ClientOnly>
     <NConfigProvider :theme="theme">
-      <NTabs default-value="example" type="line">
-        <NTabPane name="example" tab="Example" class="expand">
+      <NTabs :default-value="importComponentInstanceFn ? 'example' : 'template'" type="line">
+        <template v-if="title" #prefix>
+          <h3>{{ title }}</h3>
+        </template>
+        <NTabPane v-if="component" name="example" tab="Example" class="expand">
           <div class="example-wrapper">
             <component :is="component"></component>
           </div>
         </NTabPane>
-        <NTabPane v-if="template" name="template" tab="Template">
+        <NTabPane v-if="template" name="template" tab="Template" :class="!component && 'align-end'">
           <Prism>{{ template }}</Prism>
         </NTabPane>
         <NTabPane v-if="script" name="script" tab="Script">
@@ -39,9 +42,13 @@ export default {
     Prism: defineAsyncComponent(() => import('./Prism.vue'))
   },
   props: {
+    title: {
+      type: String,
+      default: ''
+    },
     importComponentInstanceFn: {
-      type: Function,
-      default: () => {}
+      type: [Function, Boolean],
+      default: false
     },
     importComponentRawFn: {
       type: Function,
@@ -57,11 +64,12 @@ export default {
       return props.isDark ? darkTheme : null
     })
 
-    const component = shallowRef({ render() {} })
+    const component = shallowRef(null)
 
-    props.importComponentInstanceFn().then(res => {
-      component.value = res.default
-    })
+    props.importComponentInstanceFn &&
+      props.importComponentInstanceFn().then(res => {
+        component.value = res.default
+      })
 
     const template = ref('')
     const script = ref('')
@@ -113,14 +121,28 @@ export default {
 </script>
 
 <style scoped>
-::v-deep(.n-tabs-wrapper) {
+:deep(.n-tabs-wrapper) {
   width: 100%;
 }
 
-::v-deep(.n-tabs-wrapper) .expand {
+:deep(.n-tabs-wrapper) .expand {
   margin-right: auto;
 }
 
+:deep(.n-tabs-tab[data-name='example']) .n-tabs-tab__label {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+:deep(.n-tabs-wrapper) .align-end {
+  margin-left: auto;
+}
+
+h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
 .example-wrapper {
   padding: 1rem 0;
 }

packages/docs/.vitepress/components/use-cases/BasicOptions.vue

@@ -1,186 +1,202 @@
 <template>
   <div class="pb-8">
     <custom-modal
-      v-model="showModal"
-      :ssr="ssr"
-      :lock-scroll="lockScroll"
-      :hide-overlay="hideOverlay"
-      :click-to-close="clickToClose"
-      :esc-to-close="escToClose"
-      :prevent-click="preventClick"
-      :transition="transition ? 'vfm' : ''"
-      :overlay-transition="overlayTransition ? 'vfm' : ''"
-      :z-index-auto="zIndexAuto"
-      :z-index-base="zIndexBase"
-      :z-index="allowZIndex ? zIndex : false"
-      :attach="attach ? attachTo : false"
-      :focus-retain="focusRetain"
-      :focus-trap="focusTrap"
-      :drag="drag"
-      :fit-parent="fitParent"
-      :keep-changed-style="keepChangedStyle"
-      :resize="resize"
-      :resize-directions="resizeDirections"
-      :drag-selector="allowDragSelector ? dragSelector : ''"
-      :min-width="minWidth"
-      :max-width="maxWidth"
-      :min-height="minHeight"
-      :max-height="maxHeight"
-      @confirm="showModal = false"
-      @cancel="showModal = false"
+      v-model="props.showModal"
+      :ssr="props.ssr"
+      :lock-scroll="props.lockScroll"
+      :hide-overlay="props.hideOverlay"
+      :click-to-close="props.clickToClose"
+      :esc-to-close="props.escToClose"
+      :prevent-click="props.preventClick"
+      :transition="props.transition ? 'vfm' : ''"
+      :overlay-transition="props.overlayTransition ? 'vfm' : ''"
+      :z-index-auto="props.zIndexAuto"
+      :z-index-base="props.zIndexBase"
+      :z-index="props.allowZIndex ? props.zIndex : false"
+      :attach="props.attach ? props.attachTo : false"
+      :focus-retain="props.focusRetain"
+      :focus-trap="props.focusTrap"
+      :drag="props.drag"
+      :fit-parent="props.fitParent"
+      :keep-changed-style="props.keepChangedStyle"
+      :resize="props.resize"
+      :resize-directions="props.resizeDirections"
+      :drag-selector="props.allowDragSelector ? props.dragSelector : ''"
+      :min-width="props.minWidth"
+      :max-width="props.maxWidth"
+      :min-height="props.minHeight"
+      :max-height="props.maxHeight"
+      @confirm="props.showModal = false"
+      @cancel="props.showModal = false"
     >
       <template #title># Hello, world!</template>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
     </custom-modal>
 
-    <div class="flex space-x-2">
-      <v-button highlight @click="showModal = true">Open Modal</v-button>
-      <v-button @click="reset">reset</v-button>
+    <div class="flex my-4 space-x-2">
+      <button class="btn btn--highlight" @click="props.showModal = true">Open Modal</button>
+      <button class="btn" @click="reset">reset</button>
     </div>
 
     <h3 class="py-2">Basic:</h3>
 
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-4 p-4 border rounded select-none">
       <label class="flex items-center space-x-2">
         <span>value:</span>
-        <input v-model="showModal" type="checkbox" />
+        <input v-model="props.showModal" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>ssr:</span>
-        <input v-model="ssr" type="checkbox" />
+        <input v-model="props.ssr" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>lockScroll:</span>
-        <input v-model="lockScroll" type="checkbox" />
+        <input v-model="props.lockScroll" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>hideOverlay:</span>
-        <input v-model="hideOverlay" type="checkbox" />
+        <input v-model="props.hideOverlay" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>clickToClose:</span>
-        <input v-model="clickToClose" type="checkbox" />
+        <input v-model="props.clickToClose" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>escToClose:</span>
-        <input v-model="escToClose" type="checkbox" />
+        <input v-model="props.escToClose" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>preventClick:</span>
-        <input v-model="preventClick" type="checkbox" />
+        <input v-model="props.preventClick" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>transition:</span>
-        <input v-model="transition" type="checkbox" />
+        <input v-model="props.transition" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>overlayTransition:</span>
-        <input v-model="overlayTransition" type="checkbox" />
+        <input v-model="props.overlayTransition" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>zIndexAuto:</span>
-        <input v-model="zIndexAuto" type="checkbox" />
+        <input v-model="props.zIndexAuto" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>zIndexBase:</span>
-        <input v-model="zIndexBase" class="w-20 pl-2 dark:text-black rounded focus:outline-none" type="number" />
+        <input v-model="props.zIndexBase" class="w-20 pl-2 dark:text-black rounded focus:outline-none" type="number" />
       </label>
       <div class="flex items-center space-x-2">
         <label class="flex items-center space-x-2">
-          <input v-model="allowZIndex" type="checkbox" />
+          <input v-model="props.allowZIndex" type="checkbox" />
           <span>zIndex:</span>
         </label>
         <label>
           <input
-            v-model="zIndex"
+            v-model="props.zIndex"
             type="number"
             class="w-20 pl-2 dark:text-black rounded focus:outline-none"
-            :disabled="!allowZIndex"
+            :disabled="!props.allowZIndex"
           />
         </label>
       </div>
       <div class="flex flex-col">
         <label class="flex items-center space-x-2">
-          <input v-model="attach" type="checkbox" />
+          <input v-model="props.attach" type="checkbox" />
           <span>attach:</span>
         </label>
         <label>
           <span>id=</span>
-          <input v-model="attachTo" disabled class="pl-2 dark:text-black rounded focus:outline-none" />
+          <input v-model="props.attachTo" disabled class="pl-2 dark:text-black rounded focus:outline-none" />
         </label>
       </div>
       <label class="flex items-center space-x-2">
         <span>focusRetain:</span>
-        <input v-model="focusRetain" type="checkbox" />
+        <input v-model="props.focusRetain" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>focusTrap:</span>
-        <input v-model="focusTrap" type="checkbox" />
+        <input v-model="props.focusTrap" type="checkbox" />
       </label>
     </div>
     <h3 class="py-2">Drag & Resize:</h3>
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 border rounded select-none">
       <label class="flex items-center space-x-2">
         <span>drag:</span>
-        <input v-model="drag" type="checkbox" />
+        <input v-model="props.drag" type="checkbox" />
       </label>
       <div class="flex flex-col">
         <label class="flex items-center space-x-2">
-          <input v-model="allowDragSelector" type="checkbox" />
+          <input v-model="props.allowDragSelector" type="checkbox" />
           <span>dragSelector:</span>
         </label>
         <label>
           <input
-            v-model="dragSelector"
-            :disabled="!allowDragSelector"
+            v-model="props.dragSelector"
+            :disabled="!props.allowDragSelector"
             class="pl-2 dark:text-black rounded focus:outline-none"
           />
         </label>
       </div>
       <label class="flex items-center space-x-2">
         <span>fitParent:</span>
-        <input v-model="fitParent" type="checkbox" />
+        <input v-model="props.fitParent" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>keepChangedStyle:</span>
-        <input v-model="keepChangedStyle" type="checkbox" />
+        <input v-model="props.keepChangedStyle" type="checkbox" />
       </label>
       <label class="flex items-center space-x-2">
         <span>resize:</span>
-        <input v-model="resize" type="checkbox" />
+        <input v-model="props.resize" type="checkbox" />
       </label>
       <div class="flex flex-col">
         <span>resizeDirections:</span>
         <div class="flex space-x-1">
           <div v-for="direction in ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']" :key="direction">
             <label>
               {{ direction }}:
-              <input v-model="resizeDirections" type="checkbox" :value="direction" />
+              <input v-model="props.resizeDirections" type="checkbox" :value="direction" />
             </label>
           </div>
         </div>
       </div>
       <label class="flex items-center space-x-2">
         <span>minWidth:</span>
-        <input v-model.number="minWidth" type="number" class="w-20 pl-2 dark:text-black rounded focus:outline-none" />
+        <input
+          v-model.number="props.minWidth"
+          type="number"
+          class="w-20 pl-2 dark:text-black rounded focus:outline-none"
+        />
       </label>
       <label class="flex items-center space-x-2">
         <span>maxWidth:</span>
-        <input v-model.number="maxWidth" type="number" class="w-20 pl-2 dark:text-black rounded focus:outline-none" />
+        <input
+          v-model.number="props.maxWidth"
+          type="number"
+          class="w-20 pl-2 dark:text-black rounded focus:outline-none"
+        />
       </label>
       <label class="flex items-center space-x-2">
         <span>minHeight:</span>
-        <input v-model.number="minHeight" type="number" class="w-20 pl-2 dark:text-black rounded focus:outline-none" />
+        <input
+          v-model.number="props.minHeight"
+          type="number"
+          class="w-20 pl-2 dark:text-black rounded focus:outline-none"
+        />
       </label>
       <label class="flex items-center space-x-2">
         <span>maxHeight:</span>
-        <input v-model.number="maxHeight" type="number" class="w-20 pl-2 dark:text-black rounded focus:outline-none" />
+        <input
+          v-model.number="props.maxHeight"
+          type="number"
+          class="w-20 pl-2 dark:text-black rounded focus:outline-none"
+        />
       </label>
     </div>
     <h3 class="py-2">Attach:</h3>
     <div id="attach" class="relative w-full h-64 p-4 border rounded dark:bg-gray-900 overflow-hidden">
       <h4 class="mb-2 text-2xl">Id: #attach</h4>
-      <v-button highlight @click="openAttach">Attach to here and open modal</v-button>
+      <button class="btn btn--highlight" @click="openAttach">Attach to here and open modal</button>
       <p>click will:</p>
       <ul>
         <li>set "attach" to "true"</li>
@@ -190,7 +206,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
+
 const initData = () => ({
   showModal: false,
   ssr: true,
@@ -222,20 +240,15 @@ const initData = () => ({
   maxHeight: 2000
 })
 
-export default {
-  data: initData,
-  methods: {
-    openAttach() {
-      this.attach = true
-      this.showModal = true
-      this.lockScroll = false
-    },
-    reset() {
-      const data = initData()
-      Object.keys(data).forEach(key => {
-        this[key] = data[key]
-      })
-    }
-  }
+const props = ref(initData())
+
+function openAttach() {
+  props.value.attach = true
+  props.value.showModal = true
+  props.value.lockScroll = false
+}
+
+function reset() {
+  props.value = initData()
 }
 </script>