feat(empty): add empty component,and update styles. #298

ecomfe · Nov 25, 2022 · 9f4c6a5 · 9f4c6a5
1 parent 0209661
commit 9f4c6a5
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 5 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -24,8 +24,8 @@ jobs:
       # Runs a set of commands using the runners shell
       - name: Install and Build
         run: |
-          npm install
-          npm run build
+          pnpm install
+          pnpm run build
           echo test, and install your project.
 
       - name: Deploy to GitHub Pages

diff --git a/demo/cases/Empty.vue b/demo/cases/Empty.vue
@@ -0,0 +1,95 @@
+<template>
+    <article>
+        <h1>
+            <code>&lt;veui-empty&gt;</code>
+        </h1>
+        <h2>尺寸</h2>
+        <div class="options-desc">可选的尺寸 <span class="bg-gray-show">ui</span> 属性值： <span class="bg-gray-show">s（默认） / m</span></div>
+        <section>
+            <veui-form>
+                <veui-field label="小号[ui=s]" ui="multi" class="tow-line-field">
+                    <veui-empty>
+                        <template #default>
+                            <veui-icon name="data-file-box-lg"/>
+                        </template>
+                    </veui-empty>
+                </veui-field>
+                <veui-field label="中号[ui=m]" ui="multi" class="tow-line-field">
+                    <veui-empty ui="m">
+                        <template #default>
+                            <veui-icon name="data-file-box-lg"/>
+                        </template>
+                    </veui-empty>
+                </veui-field>
+            </veui-form>
+        </section>
+        <h2 style="margin-top: 50px;">更多功能demo示例（UI不需还原）</h2>
+        <section>
+            <veui-check-button-group v-model="partValue" :items="parts"/>
+            <veui-radio-button-group v-model="ui" :items="uis" class="ml-4"/>
+            <veui-empty class="mt-4" :ui="ui" :desc="false" :image="false">
+                <template
+                    v-if="partValue.includes('title')"
+                    #title
+                >找不到该页面</template>
+                <template
+                    v-if="partValue.includes('desc')"
+                    #desc
+                >当前页面无法访问，请检查地址栏中的网址，确保您访问的是正确的网址。</template>
+                <template v-if="partValue.includes('image')" #default>
+                    <veui-icon name="data-folder-search-lg"></veui-icon>
+                </template>
+                <template v-if="partValue.includes('actions')" #actions>
+                    <veui-button ui="primary">确定</veui-button>
+                    <veui-button>取消</veui-button>
+                </template>
+            </veui-empty>
+        </section>
+    </article>
+</template>
+
+<script>
+import {Button, Empty, CheckButtonGroup, RadioButtonGroup, Icon, Form, Field} from 'veui';
+import 'veui-theme-blue-icons/data-file-box-lg';
+import 'veui-theme-blue-icons/data-folder-search-lg';
+
+function genLabel(value) {
+    return {label: value, value};
+}
+
+export default {
+    name: 'empty-demo',
+    components: {
+        'veui-button': Button,
+        'veui-empty': Empty,
+        'veui-check-button-group': CheckButtonGroup,
+        'veui-radio-button-group': RadioButtonGroup,
+        'veui-icon': Icon,
+        'veui-form': Form,
+        'veui-field': Field
+    },
+    data() {
+        return {
+            parts: ['image', 'title', 'desc', 'actions'].map(genLabel),
+            uis: ['s', 'm'].map(genLabel),
+            ui: 'm',
+            partValue: ['image', 'title', 'desc', 'actions']
+        };
+    }
+};
+</script>
+
+<style scoped>
+section {
+    margin-bottom: 40px;
+}
+
+.ml-4 {
+    margin-left: 16px;
+}
+
+.mt-4 {
+    margin-top: 16px;
+}
+</style>
+
diff --git a/demo/cases/index.js b/demo/cases/index.js
@@ -62,6 +62,7 @@ import VDragSort from './VDragSort';
 import Plugins from './Plugins';
 import Message from './Message';
 import Cascader from './Cascader';
+import Empty from './Empty';
 
 export default [
     {
@@ -195,6 +196,11 @@ export default [
         name: 'Embedded',
         component: Embedded
     },
+    {
+        path: '/empty',
+        name: 'Empty',
+        component: Empty
+    },
     {
         path: '/form',
         name: 'Form',

diff --git a/demo/router.js b/demo/router.js
@@ -9,9 +9,9 @@ const router = new Router({
     routes: [
         {
             path: '/',
-            name: 'Empty',
+            name: 'Home',
             component: {
-                name: 'empty',
+                name: 'Home',
                 render(h) {
                     return h('article', [
                         h('h1', 'Welcome to VEUI!'),
@@ -25,7 +25,7 @@ const router = new Router({
 });
 
 router.beforeEach((to, from, next) => {
-    let name = to.name === 'Empty' ? '' : to.name;
+    let name = to.name === 'home' ? '' : to.name;
     document.title = `Veui${name} - demo`;
     next();
 });

diff --git a/src/components/Empty.js b/src/components/Empty.js
@@ -0,0 +1,14 @@
+import ui from 'veui/managers/ui';
+
+ui.defaults(
+    {
+        ui: {
+            size: {
+                values: ['s', 'm'],
+                inherit: true,
+                default: 's'
+            }
+        }
+    },
+    'empty'
+);
diff --git a/src/components/empty.less b/src/components/empty.less
@@ -0,0 +1,79 @@
+@import "../lib.less";
+@import "../variables/components/empty.less";
+
+.@{veui-prefix}-empty {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &-title {
+    line-height: @veui-empty-title-line-height;
+    color: @veui-empty-title-font-color;
+    font-weight: @veui-empty-title-font-weight;
+  }
+
+  &-image,
+  &-title,
+  &-desc {
+    &:not(:first-child) {
+      margin-top: @veui-empty-content-spacing;
+    }
+  }
+
+  &-desc {
+    line-height: @veui-empty-desc-line-height;
+    color: @veui-empty-desc-font-color;
+    font-weight: @veui-empty-desc-font-weight;
+  }
+
+  &-actions:not(:first-child) {
+    margin-top: @veui-empty-actions-spacing-before;
+  }
+
+  &-actions {
+    .@{veui-prefix}-button + .@{veui-prefix}-button {
+      margin-left: @veui-empty-actions-content-spacing;
+    }
+  }
+
+  &[ui~="m"] {
+    max-width: @veui-empty-max-width-m;
+
+    .@{veui-prefix}-empty {
+        &-image,
+        &-image > * {
+          width: @veui-empty-image-width-m;
+          height: @veui-empty-image-height-m;
+        }
+
+      &-title {
+        font-size: @veui-empty-title-font-size-m;
+      }
+
+      &-desc {
+        font-size: @veui-empty-desc-font-size-m;
+      }
+    }
+  }
+
+  &[ui~="s"] {
+    max-width: @veui-empty-max-width-s;
+
+    .@{veui-prefix}-empty {
+      &-image,
+      &-image > * {
+        width: @veui-empty-image-width-s;
+        height: @veui-empty-image-height-s;
+      }
+
+      &-title {
+        font-size: @veui-empty-title-font-size-s;
+      }
+
+      &-desc {
+        font-size: @veui-empty-desc-font-size-s;
+      }
+    }
+  }
+}
diff --git a/src/variables/components/empty.less b/src/variables/components/empty.less
@@ -0,0 +1,29 @@
+@import "../global.less";
+
+/* Sizes */
+@veui-empty-max-width-s: @veui-padding-unit * 60;
+@veui-empty-max-width-m: @veui-padding-unit * 80;
+@veui-empty-image-width-s: @veui-padding-unit * 19;
+@veui-empty-image-height-s: @veui-padding-unit * 18 - 2;
+@veui-empty-image-width-m: @veui-padding-unit * 23;
+@veui-empty-image-height-m: @veui-padding-unit * 22 - 2;
+
+
+/* Title */
+@veui-empty-title-font-size-s: @veui-font-size-s;
+@veui-empty-title-font-size-m: @veui-font-size-m;
+@veui-empty-title-line-height: @veui-line-height-m;
+@veui-empty-title-font-color: @veui-font-color-normal;
+@veui-empty-title-font-weight: @veui-font-weight-2;
+
+/* Desc */
+@veui-empty-desc-font-size-s: @veui-font-size-s;
+@veui-empty-desc-font-size-m: @veui-font-size-m;
+@veui-empty-desc-line-height: @veui-line-height-m;
+@veui-empty-desc-font-color: @veui-font-color-weak;
+@veui-empty-desc-font-weight: @veui-font-weight-1;
+
+/* Spacing */
+@veui-empty-content-spacing: @veui-padding-unit * 2 - 2;
+@veui-empty-actions-spacing-before: @veui-padding-unit * 4;
+@veui-empty-actions-content-spacing: @veui-padding-unit * 2;