🔥🔥[doc] add new demo

vbenjs · Aug 17, 2023 · b49f48f · b49f48f
1 parent aa74ba2
commit b49f48f
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 68 deletions.
diff --git a/apps/admin/src/assets/images/cover.png b/apps/admin/src/assets/images/cover.png
diff --git a/packages/demo/src/Card/index.vue b/packages/demo/src/Card/index.vue
@@ -1,18 +1,66 @@
 <script lang="ts" setup>
 
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 
-const aSummary    = ref("基础卡片")
-const aTitle      = ref('琵琶行')
-const aContent    = ref('别有幽愁暗恨生，此时无声胜有声.')
+const aTitle = ref<string>('基础卡片')
+const aContent = ref('别有幽愁暗恨生，此时无声胜有声.')
+let tabsType = ref<string>('line')
+const radioArr = reactive([{ value: 'line', label: 'line' }, { value: 'bar', label: 'bar' }, { value: 'card', label: 'card' }, { value: 'segment', label: 'segment' }])
 
+function radioChange(e: Event) {
+  tabsType.value = (e.target as HTMLInputElement).value
+  return console.log('val ->', (e.target as HTMLInputElement).value);
+}
 
+function handleClose() {
+  return 
+}
 </script>
 
 <template>
-  <div class="p-2">
-    <h3>{{ aSummary }}</h3>
-    <VbenCard class="w-1/3" :title="aTitle"> {{ aContent }} </VbenCard>
+  <div class="p-2 h-full grid grid-cols-12  gap-4">
+
+    <div class="col-start-1 col-span-6 ">
+      <VbenCard :title="aTitle"> {{ aContent }} </VbenCard>
+    </div>
+
+    <div class="col-start-7 col-span-6 ">
+      <VbenCard contentStyle="padding: 0">
+        <VbenTabs :type="tabsType" size="large" :tabsPadding="20" paneStyle="padding: 20px;">
+          <VbenTabPane name="tabs1">
+            这是一个Tabs卡片(👁️🐽👁️)
+            <p> 你可以选择Tabs的类型: </p>
+            <!-- TODO: VbenRadioGroup似乎有bug,点击后的样式无法正常显示 -->
+            <!-- TODO: VbenRadioGroup tabsType设置默认值后不起作用 -->
+            <VbenRadioGroup name="radio-group" :value="tabsType" :options="radioArr"
+              @change="radioChange" />
+          </VbenTabPane>
+          <VbenTabPane name="tabs2">我本将心向明月,奈何明月照沟渠.</VbenTabPane>
+        </VbenTabs>
+      </VbenCard>
+    </div>
+
+    <div class="col-start-1 col-span-3">
+      <VbenCard title="带封面的卡片" hoverable>
+        <template #cover>
+          <img src="@/assets/images/cover.png" alt="cover.png">
+        </template>
+        样式丰富了许多,不是吗🥳
+      </VbenCard>
+    </div>
+
+    <div class="col-start-7 col-span-6">
+      <VbenCard title="提示" closable @close="handleClose">
+        有时候我们需要在插槽里定制一些丰富的交互🤔
+        <template #action>
+          <VbenSpace>
+            <VbenButton strong secondary type="tertiary">不用了</VbenButton>
+            <VbenButton strong secondary type="primary">确定</VbenButton>
+          </VbenSpace>
+        </template>
+      </VbenCard>
+    </div>
+
   </div>
 </template>
 
diff --git a/packages/demo/src/Modal/index.vue b/packages/demo/src/Modal/index.vue
@@ -1,18 +1,47 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-let   isModalShow = ref(false)
-const cTitle      = ref('这个模态框里装了一个卡片📇')
+let alertInfo = ref('这个模态框本质是一个弹出的遮罩层,在遮罩层里你可以定义任意类型的 Card, Dialog, 或者不定义😶‍🌫️, Vben并没有封装默认的类型,所以你可以根据自己的实际业务定制😋')
+let defaultModalShow = ref(false)
+let isModalShow = ref(false)
+const cTitle = ref('这个模态框里装了一个卡片📇')
+const cContent = ref('🚧山重水复疑无路🚧')
+const aTitle = ref('Card类型的Modal')
+const bTitle = ref("默认的Modal")
+const dTitle = ref('Dialog类型的Modal')
+
 </script>
+
 <template>
-  <div class="m-2">
-    <VbenAlert type="info">
-      这个模态框本质是一个弹出的遮罩层,在遮罩层里你可以定义任意类型的 Card, dialog, 或者不定义😎, Vben并没有封装默认的类型,所以你可以根据自己的实际业务定制🦄
-    </VbenAlert>
-    <VbenButton @click="isModalShow = true">点 我</VbenButton>
-    <VbenModal :show="isModalShow">
-      <VbenCard class="w-1/2" :title="cTitle" role="dialog"></VbenCard>
+  <div class="m-2 grid grid-cols-12 gap-4">
+    <div class="col-start-1 col-span-8">
+      <VbenAlert type="info" :bordered="false">{{ alertInfo }}</VbenAlert>
+    </div>
+    <div class="col-start-1 col-span-3">
+      <VbenCard :title="bTitle">
+        <VbenButton @click="defaultModalShow = true">点我</VbenButton>
+      </VbenCard>
+    </div>
+    <div class="col-start-4 col-span-3">
+      <VbenCard :title="aTitle">
+        <VbenButton @click="isModalShow = true">点我</VbenButton>
+      </VbenCard>
+    </div>
+
+    <div class="col-start-7 col-span-3">
+      <VbenCard :title="dTitle">
+        <VbenButton>点我</VbenButton>
+      </VbenCard>
+    </div>
+
+    <VbenModal :show="defaultModalShow" @maskClick="() => defaultModalShow = !defaultModalShow">
+      <p>这是默认的样式,没有任何样式,会弹出一个遮罩层,你可以自己定义🥸</p>
     </VbenModal>
+
+    <VbenModal :show="isModalShow" @maskClick="() => isModalShow = !isModalShow">
+      <VbenCard class="w-1/2" :title="cTitle" role="dialog">{{ cContent }}</VbenCard>
+    </VbenModal>
+
   </div>
 </template>
 

diff --git a/packages/demo/src/Table/TreeTable.vue b/packages/demo/src/Table/TreeTable.vue
@@ -11,12 +11,10 @@ const treeData = reactive<Data>({
 })
 const treeTable = ref(null)
 
-getTreeTableData()
-  .then((res: any) => {
+getTreeTableData().then((res: any) => {
     console.log('treeData:', res)
     treeData.table.items = res
-  })
-  .catch((err) => {
+  }).catch((err) => {
     console.log('err:', err)
   })
 
@@ -29,7 +27,6 @@ function toggleExpandChangeEvent(e: any) {
   )
   return
 }
-console.log("refs:", treeTable.value);
 
 function handleSelected() {
   return null
@@ -49,45 +46,17 @@ function handleCloseAll() {
 </script>
 <template>
   <div class="p-2 h-full">
-    <VbenTable
-      ref="treeTable"
-      :options="{
-        title: '基础树形表格',
-        border: 'inner',
-        pagination: true,
-      }"
-      :column-config="{ resizable: true }"
-      :columns="treeColumns"
-      :data="treeData.table.items"
-      :tree-config="{
-        transform: true,
-        rowField: 'id',
-        parentField: 'parentId',
-        iconOpen: 'vxe-icon-square-minus',
-        iconClose: 'vxe-icon-square-plus',
-      }"
-      :checkbox-config="{ labelField: 'id', highlight: true }"
-      @toggle-tree-expand="toggleExpandChangeEvent"
-    >
+    <VbenTable ref="treeTableRef" :options="{ title: '基础树形表格', border: 'inner', pagination: true, }"
+      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', iconOpen: 'vxe-icon-square-minus', iconClose: 'vxe-icon-square-plus', }"
+      :column-config="{ resizable: true }" :columns="treeColumns" :data="treeData.table.items"
+      :checkbox-config="{ labelField: 'id', highlight: true }" @toggle-tree-expand="toggleExpandChangeEvent">
       >
       <template #toolbar>
         <div class="pb-2">
-          <VbenButton class="ml-2" type="info" ghost @click="handleSelected"
-            >获取选中</VbenButton
-          >
-          <VbenButton class="ml-2" type="info" ghost @click="handleExpanded"
-            >获取已展开</VbenButton
-          >
-          <VbenButton
-            class="ml-2"
-            type="info"
-            ghost
-            @click="$refs.treeTable.setAllTreeExpand(true)"
-            >展开所有</VbenButton
-          >
-          <VbenButton class="ml-2" type="info" ghost @click="handleCloseAll"
-            >关闭所有</VbenButton
-          >
+          <VbenButton class="ml-2" type="info"  @click="handleSelected">获取选中</VbenButton>
+          <VbenButton class="ml-2" type="info"  @click="handleExpanded">获取已展开</VbenButton>
+          <VbenButton class="ml-2" type="info"  @click="handleExpandAll">展开所有</VbenButton>
+          <VbenButton class="ml-2" type="info"  @click="handleCloseAll">关闭所有</VbenButton>
         </div>
       </template>
     </VbenTable>

diff --git a/packages/demo/src/Table/basic.vue b/packages/demo/src/Table/basic.vue
@@ -19,7 +19,6 @@ const data = reactive<Data>({
 getTableData()
   .then((res) => {
     loading.value = true
-    // console.log('res->', res)
     data.table.items = res
   })
   .catch((err) => {
@@ -55,15 +54,9 @@ function toggleRound() {
 </script>
 <template>
   <div class="p-2 h-full">
-    <VbenTable 
-      :options="{
-      title: '基础演示',
-      pagination: true,
-      border: borderValue,
-      loading: loading,
-      stripe: striped,
-      round: round,
-    }" :columns="baseColumns" :data="data.table.items" :column-config="{ resizable: true }"
+    <VbenTable
+      :options="{ title: '基础演示', pagination: true, border: borderValue, loading: loading, stripe: striped, round: round, }"
+      :columns="baseColumns" :data="data.table.items" :column-config="{ resizable: true }"
       :row-config="{ isHover: true }">
       <template #toolbar>
         <div class="pb-2">
@@ -84,10 +77,10 @@ function toggleRound() {
         <VbenButton size="tiny" strong secondary type="primary">
           EDIT
         </VbenButton>
+        <VbenDivider vertical />
         <VbenButton size="tiny" strong secondary type="error">
           DELETE
         </VbenButton>
-
       </template>
       <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
         <slot :name="item" v-bind="data || {}"></slot>