vdesign-ui 0.2.12 → 0.2.13

package/README.md

@@ -1,78 +1,78 @@
-# vdesign-ui
-
-## 项目说明
-
-### 项目运行
-
-```
-cd hs-ui
-yarn install
-yarn run serve
-```
-
-### 目录结构
-
-#### packages
->
-> 主要包含 token2css 后的产物，及组件
-
-- index.js 为入口文件
-- token：token2css 转换后的 css 文件
-- components：基于 token 变量的 vue 组件
-
-#### sites
->
-> 主要包含该组件库的站点，用于文档描述
-
-- docs：md 文档集合
-- router/nav.config.json：菜单配置文件
-
-#### Git 提交规范
-
-- feat: 增加订单详情  closes xxxx (closes非必需)
-- fix: 修复xx情况下xx问题  closes xxxx (closes非必需)
-- docs: 修改md文件
-- style: 修改订单列表样式
-- refactor: 重构utils.js下部分方法
-- chore: 增加xxx插件/xxxxloader
-- revert: 回退当前版本667ec到 sssee2
-- perf: 优化了xxx，提高了渲染速度
-- test：增加测试
-- improvement: 改进
-- build: 打包
-- ci: 持续集成w
-
-#### 修改 Git Commit
-
-##### 1. 修改最后一次提交
-
-git commit --amend
-
-该命令会创建一个提交并覆盖上次提交，如果是因为写错或者不满意上次的提交信息，使用该命令就非常适合。
-
-##### 2. 合并多条提交
-
-git reset --soft [commitID]
-
-如果你想合并最近几条提交信息的话，那么就需要使用上面的命令来操作，指定要撤销的ccommitId,该命令会保留当前改动并撤销指定提交后的所有commit记录，如果不指定ID的话可以使用HEAD~{num} 来选择最近{num}条提交
-
-git reset --soft HEAD~2 #合并最近两条提交
-git commit -m 'feat: add new feat'
-
-> 带 --soft 参数的区别在于把改动内容添加到暂存区 相当于执行了git add .
-
-git rebase -i
-git rebase的功能会更加强大，如果我想修改最近3条提交记录，执行
-
-`git rebase -i  HEAD~3`
-
-下面是常用的命令说明：
-
-```bash
-p,pick = 使用提交
-r,reword = 使用提交，但修改提交说明
-e,edit = 使用提交，退出后使用git commit --amend 修改
-s,squash = 使用提交，合并前一个提交
-f,fixup = 和squash相同，但丢弃提交说明日志
-d,drop = 删除提交，丢弃提交记录
-```
+# vdesign-ui
+
+## 项目说明
+
+### 项目运行
+
+```
+cd hs-ui
+yarn install
+yarn run serve
+```
+
+### 目录结构
+
+#### packages
+>
+> 主要包含 token2css 后的产物，及组件
+
+- index.js 为入口文件
+- token：token2css 转换后的 css 文件
+- components：基于 token 变量的 vue 组件
+
+#### sites
+>
+> 主要包含该组件库的站点，用于文档描述
+
+- docs：md 文档集合
+- router/nav.config.json：菜单配置文件
+
+#### Git 提交规范
+
+- feat: 增加订单详情  closes xxxx (closes非必需)
+- fix: 修复xx情况下xx问题  closes xxxx (closes非必需)
+- docs: 修改md文件
+- style: 修改订单列表样式
+- refactor: 重构utils.js下部分方法
+- chore: 增加xxx插件/xxxxloader
+- revert: 回退当前版本667ec到 sssee2
+- perf: 优化了xxx，提高了渲染速度
+- test：增加测试
+- improvement: 改进
+- build: 打包
+- ci: 持续集成w
+
+#### 修改 Git Commit
+
+##### 1. 修改最后一次提交
+
+git commit --amend
+
+该命令会创建一个提交并覆盖上次提交，如果是因为写错或者不满意上次的提交信息，使用该命令就非常适合。
+
+##### 2. 合并多条提交
+
+git reset --soft [commitID]
+
+如果你想合并最近几条提交信息的话，那么就需要使用上面的命令来操作，指定要撤销的ccommitId,该命令会保留当前改动并撤销指定提交后的所有commit记录，如果不指定ID的话可以使用HEAD~{num} 来选择最近{num}条提交
+
+git reset --soft HEAD~2 #合并最近两条提交
+git commit -m 'feat: add new feat'
+
+> 带 --soft 参数的区别在于把改动内容添加到暂存区 相当于执行了git add .
+
+git rebase -i
+git rebase的功能会更加强大，如果我想修改最近3条提交记录，执行
+
+`git rebase -i  HEAD~3`
+
+下面是常用的命令说明：
+
+```bash
+p,pick = 使用提交
+r,reword = 使用提交，但修改提交说明
+e,edit = 使用提交，退出后使用git commit --amend 修改
+s,squash = 使用提交，合并前一个提交
+f,fixup = 和squash相同，但丢弃提交说明日志
+d,drop = 删除提交，丢弃提交记录
+```

package/dist/components/actionbar/index.js

@@ -1,8 +1,8 @@
-import Actionbar from './index.vue';
-import './style.less';
-
-Actionbar.install = function (Vue) {
-  Vue.component(Actionbar.name, Actionbar);
-};
-
-export default Actionbar;
+import Actionbar from './index.vue';
+import './style.less';
+
+Actionbar.install = function (Vue) {
+  Vue.component(Actionbar.name, Actionbar);
+};
+
+export default Actionbar;

package/dist/components/actionbar/index.vue

@@ -1,39 +1,39 @@
-<template>
-    <div class="vd-actionbar" :class="wrapClasses">
-        <div class="vd-actionbar__main">
-            <slot></slot>
-        </div>
-    </div>
-</template>
-<script>
-const prefixCls = 'vd-actionbar';
-export default {
-    name: 'vd-actionbar',
-    props: {
-        // 默认左右有间距,但是实际设计稿有的没有间距,
-        //block属性预留一个填充,如果使用基础图标按钮组件填充,不太好填充。
-        block: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data() {
-        return {
-
-        }
-    },
-    computed: {
-        wrapClasses() {
-            return [
-                {
-                    [`${prefixCls}__block`]: this.block
-                }
-            ]
-        }
-    }
-};
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+    <div class="vd-actionbar" :class="wrapClasses">
+        <div class="vd-actionbar__main">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+const prefixCls = 'vd-actionbar';
+export default {
+    name: 'vd-actionbar',
+    props: {
+        // 默认左右有间距,但是实际设计稿有的没有间距,
+        //block属性预留一个填充,如果使用基础图标按钮组件填充,不太好填充。
+        block: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+        wrapClasses() {
+            return [
+                {
+                    [`${prefixCls}__block`]: this.block
+                }
+            ]
+        }
+    }
+};
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/actionbar/style.less

@@ -1,44 +1,44 @@
-@actionbar-prefix-cls: vd-actionbar;
-
-.@{actionbar-prefix-cls} {
-
-    display: flex;
-    width: 100%;
-    height: var(--height-actionbar-content);
-    background-color: var(--color-actionbar-bg);
-    padding-inline-start: var(--spacing-actionbar-padding_y);
-    padding-inline-end: var(--spacing-actionbar-padding_y);
-
-    &__block {
-        padding-inline-start: 0;
-        padding-inline-end: 0;
-    }
-    
-    &__main {
-        display: flex;
-        flex: 1;
-        justify-content: space-around;
-    }
-}
-
-.@{actionbar-prefix-cls}-cell {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    font-size: var(--en-single-f-d-r-fontSize);
-    font-weight: var(--en-single-f-d-r-fontWeight);
-
-    &--left {
-        justify-content: left;
-    }
-
-    &--center {
-        justify-content: center;
-    }
-
-    &--right {
-        justify-content: right;
-    }
-}
+@actionbar-prefix-cls: vd-actionbar;
+
+.@{actionbar-prefix-cls} {
+
+    display: flex;
+    width: 100%;
+    height: var(--height-actionbar-content);
+    background-color: var(--color-actionbar-bg);
+    padding-inline-start: var(--spacing-actionbar-padding_y);
+    padding-inline-end: var(--spacing-actionbar-padding_y);
+
+    &__block {
+        padding-inline-start: 0;
+        padding-inline-end: 0;
+    }
+    
+    &__main {
+        display: flex;
+        flex: 1;
+        justify-content: space-around;
+    }
+}
+
+.@{actionbar-prefix-cls}-cell {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    font-size: var(--en-single-f-d-r-fontSize);
+    font-weight: var(--en-single-f-d-r-fontWeight);
+
+    &--left {
+        justify-content: left;
+    }
+
+    &--center {
+        justify-content: center;
+    }
+
+    &--right {
+        justify-content: right;
+    }
+}

package/dist/components/actionbar-cell/index.js

@@ -1,7 +1,7 @@
-import ActionbarCell from './index.vue';
-
-ActionbarCell.install = function (Vue) {
-  Vue.component(ActionbarCell.name, ActionbarCell);
-};
-
-export default ActionbarCell;
+import ActionbarCell from './index.vue';
+
+ActionbarCell.install = function (Vue) {
+  Vue.component(ActionbarCell.name, ActionbarCell);
+};
+
+export default ActionbarCell;

package/dist/components/actionbar-cell/index.vue

@@ -1,38 +1,38 @@
-<template>
-  <span class="vd-actionbar-cell" :class="wrapClasses">
-    <vd-icon v-if="iconName" :name="iconName"></vd-icon>
-    <slot></slot>
-  </span>
-</template>
-<script>
-import VdIcon from '../icon';
-const prefixCls = 'vd-actionbar'
-export default {
-  name: 'vd-actionbar-cell',
-  components: {
-    VdIcon
-  },
-  props: {
-    // 实际使用场景不多,为了设计验收
-    iconName: String,
-    direction: {
-      type: String,
-      default: 'center'
-    }
-  },
-  data() {
-    return {
-
-    };
-  },
-  computed: {
-    wrapClasses() {
-      return [
-        {
-          [`${prefixCls}-cell--${this.direction}`]: this.direction
-        }
-      ]
-    }
-  },
-};
-</script>
+<template>
+  <span class="vd-actionbar-cell" :class="wrapClasses">
+    <vd-icon v-if="iconName" :name="iconName"></vd-icon>
+    <slot></slot>
+  </span>
+</template>
+<script>
+import VdIcon from '../icon';
+const prefixCls = 'vd-actionbar'
+export default {
+  name: 'vd-actionbar-cell',
+  components: {
+    VdIcon
+  },
+  props: {
+    // 实际使用场景不多,为了设计验收
+    iconName: String,
+    direction: {
+      type: String,
+      default: 'center'
+    }
+  },
+  data() {
+    return {
+
+    };
+  },
+  computed: {
+    wrapClasses() {
+      return [
+        {
+          [`${prefixCls}-cell--${this.direction}`]: this.direction
+        }
+      ]
+    }
+  },
+};
+</script>

package/dist/components/actions/index.js

@@ -1,7 +1,7 @@
-import Actions from './index.vue';
-import './style.less';
-Actions.install = function(Vue) {
-    Vue.component(Actions.name, Actions)
-}
-
+import Actions from './index.vue';
+import './style.less';
+Actions.install = function(Vue) {
+    Vue.component(Actions.name, Actions)
+}
+
 export default Actions;

package/dist/components/actions/index.vue

@@ -1,76 +1,77 @@
-<template>
-  <div :class="wrapClasses">
-    <span class="vd-actions__text" :class="textClasses" v-if="text">{{ text }}</span>
-    <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :class="iconClasses"  :name="icon"></vd-icon>
-    <span class="vd-actions__content" :class="contentBg" v-if="icon && type === 'card'">
-      <vd-icon class="vd-actions__icon" :class="iconClasses" :name="icon"></vd-icon>
-    </span>
-  </div>
-</template>
-
-<script>
-import VdIcon from '../icon';
-const prefixCls = 'vd-actions'
-export default {
-  name: 'vd-actions',
-  components: {
-    VdIcon
-  },
-  props: {
-    type: {
-      type: String,
-    },
-    colors: {
-      type: String,
-    },
-    backgrounds: {
-      type: String,
-    },
-    text: {
-      type: String,
-    },
-    icon: {
-      type: String,
-    },
-    disabled:Boolean,
-  },
-  computed: {
-    wrapClasses() {
-      return [
-        `${prefixCls}`,
-        {
-          [`${prefixCls}__${this.type}`]: this.type,
-          [`${prefixCls}__${this.colors}`]: this.colors,
-          [`${prefixCls}__${this.colors}--disabled`]: this.disabled && (this.type ==='list'),
-        }
-      ]
-    },
-    contentBg() {
-      return [
-        {
-          [`${prefixCls}__content--${this.backgrounds}`]: this.backgrounds,
-          [`${prefixCls}__content--${this.backgrounds}--disabled`]: this.disabled,
-        }
-      ]
-    },
-    textClasses(){
-      return [
-        {
-         [`${prefixCls}__text--disabled`]: this.disabled
-      }
-    ]
-  },
-  iconClasses(){
-      return [
-        {
-         [`${prefixCls}__icon--disabled`]: this.disabled
-      }
-    ]
-  },
-}
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+  <div :class="wrapClasses">
+    <span class="vd-actions__text" :class="textClasses" v-if="text">{{ text }}</span>
+    <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :class="iconClasses"  :name="icon"></vd-icon>
+    <span class="vd-actions__content" :class="contentBg" v-if="icon && type === 'card'">
+      <vd-icon class="vd-actions__icon" :class="iconClasses" :name="icon"></vd-icon>
+    </span>
+  </div>
+</template>
+
+<script>
+import VdIcon from '../icon';
+const prefixCls = 'vd-actions'
+export default {
+  name: 'vd-actions',
+  components: {
+    VdIcon
+  },
+  props: {
+    type: {
+      type: String,
+      default:'list'
+    },
+    colors: {
+      type: String,
+    },
+    backgrounds: {
+      type: String,
+    },
+    text: {
+      type: String,
+    },
+    icon: {
+      type: String,
+    },
+    disabled:Boolean,
+  },
+  computed: {
+    wrapClasses() {
+      return [
+        `${prefixCls}`,
+        {
+          [`${prefixCls}__${this.type}`]: this.type,
+          [`${prefixCls}__${this.colors}`]: this.colors,
+          [`${prefixCls}__${this.colors}--disabled`]: this.disabled && (this.type ==='list'),
+        }
+      ]
+    },
+    contentBg() {
+      return [
+        {
+          [`${prefixCls}__content--${this.backgrounds}`]: this.backgrounds,
+          [`${prefixCls}__content--${this.backgrounds}--disabled`]: this.disabled,
+        }
+      ]
+    },
+    textClasses(){
+      return [
+        {
+         [`${prefixCls}__text--disabled`]: this.disabled
+      }
+    ]
+  },
+  iconClasses(){
+      return [
+        {
+         [`${prefixCls}__icon--disabled`]: this.disabled
+      }
+    ]
+  },
+}
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>