vdesign-ui 0.2.20 → 0.3.0

package/README.md

@@ -1,59 +1,59 @@
-
-# 📦 vdesign-ui 项目结构说明
-
-本项目为 `vdesign-ui` 前端组件库，包含组件源码、构建脚本、设计 Tokens、多语言配置等。以下是项目目录结构与主要文件说明。
-
-## 📁 目录结构
-
-```text
-vdesign-ui/
-├── bin/                         # 构建与工具脚本目录
-│   ├── backup-token-css.js      # 备份 token.css 文件（保存至 dist-token-history，文件名带时间戳）
-│   ├── build-components.js      # 构建 packages/components 下的组件并输出到 dist/components，按需加载，暂未用到
-│   ├── concat-css.js            # 合并 tokens 中多个 CSS 文件为 token.css
-│   ├── copy-locales.js          # 拷贝 packages/locale 的内容到 dist/locale
-│   └── node.js                  # 输出官网导航目录
-├── dist/                        # 构建输出目录
-│   ├── components/              # 拷贝组件
-│   ├── locale/                  # 拷贝语言资源
-│   ├── demo.html                # 构建预览页面（可能用于调试或预览组件）
-│   ├── token.css                # 当前 Design Token 输出样式
-│   ├── vdesign-ui.common.js     # CommonJS 格式构建文件
-│   ├── vdesign-ui.css           # 所有样式文件合并后的主 CSS
-│   ├── vdesign-ui.umd.js        # UMD 构建文件（未压缩）
-│   ├── vdesign-ui.umd.min.js    # UMD 构建文件（压缩版）
-│   └── dist-token-history/      # 历史 Token 样式备份（时间戳命名）
-│       ├── token_20250314_155751.css
-│       ├── token_20250314_160005.css
-│       ├── token_20250314_160803.css
-│       ├── token_20250321_171830.css
-│       ├── token_20250324_152753.css
-│       ├── token_20250324_153128.css
-│       ├── token_20250325_114906.css
-│       └── token_20250326_170122.css
-├── node_modules/                # 项目依赖模块
-├── packages/                    # 源码主目录
-│   ├── components/              # Vue 组件源码（Button、Uploader 等）
-│   ├── locale/                  # 多语言支持
-│   │   ├── lang/                # 多语言翻译文件（如 zh-CN.js / en-US.js）
-│   │   └── i18nPlugin.js        # 国际化插件封装（用于 Vue 插件注册）
-│   └── tokens/                  # Design Token 配置（设计样式原子值）
-│       ├── css/                 # 生成后的 CSS Token 文件
-│       ├── fonts/               # 字体资源
-│       ├── js/                  # 获取以及生成Token数据
-│       ├── index.css            # 主样式文件
-│       ├── reset.css            # 样式重置文件
-│       └── style.css            # 组件通用样式
-│   └──index.js                     # 项目主入口（可能用于组件库导出）
-├── sites/                       # 主要包含该组件库的站点，用于文档描述
-│   ├── assets/                  # 静态资源（如图片、图标）
-│   ├── components/              # 站点使用的公共组件
-│   ├── demos/                   # 组件演示页面（提供交互效果展示）
-│   ├── docs/                    # 文档页面（介绍使用说明、API 参考等）
-│   ├── i18n/                    # 站点的国际化支持
-│   ├── json/                    # json格式的Token数据
-│   ├── pages/                   # 站点页面路由（测试页面）
-│   ├── router/                  # Vue 路由配置
-│   ├── App.vue                  # 站点 Vue 入口文件
-│   ├── insetTables.js           # Token数据插入到demo页面
+
+# 📦 vdesign-ui 项目结构说明
+
+本项目为 `vdesign-ui` 前端组件库，包含组件源码、构建脚本、设计 Tokens、多语言配置等。以下是项目目录结构与主要文件说明。
+
+## 📁 目录结构
+
+```text
+vdesign-ui/
+├── bin/                         # 构建与工具脚本目录
+│   ├── backup-token-css.js      # 备份 token.css 文件（保存至 dist-token-history，文件名带时间戳）
+│   ├── build-components.js      # 构建 packages/components 下的组件并输出到 dist/components，按需加载，暂未用到
+│   ├── concat-css.js            # 合并 tokens 中多个 CSS 文件为 token.css
+│   ├── copy-locales.js          # 拷贝 packages/locale 的内容到 dist/locale
+│   └── node.js                  # 输出官网导航目录
+├── dist/                        # 构建输出目录
+│   ├── components/              # 拷贝组件
+│   ├── locale/                  # 拷贝语言资源
+│   ├── demo.html                # 构建预览页面（可能用于调试或预览组件）
+│   ├── token.css                # 当前 Design Token 输出样式
+│   ├── vdesign-ui.common.js     # CommonJS 格式构建文件
+│   ├── vdesign-ui.css           # 所有样式文件合并后的主 CSS
+│   ├── vdesign-ui.umd.js        # UMD 构建文件（未压缩）
+│   ├── vdesign-ui.umd.min.js    # UMD 构建文件（压缩版）
+│   └── dist-token-history/      # 历史 Token 样式备份（时间戳命名）
+│       ├── token_20250314_155751.css
+│       ├── token_20250314_160005.css
+│       ├── token_20250314_160803.css
+│       ├── token_20250321_171830.css
+│       ├── token_20250324_152753.css
+│       ├── token_20250324_153128.css
+│       ├── token_20250325_114906.css
+│       └── token_20250326_170122.css
+├── node_modules/                # 项目依赖模块
+├── packages/                    # 源码主目录
+│   ├── components/              # Vue 组件源码（Button、Uploader 等）
+│   ├── locale/                  # 多语言支持
+│   │   ├── lang/                # 多语言翻译文件（如 zh-CN.js / en-US.js）
+│   │   └── i18nPlugin.js        # 国际化插件封装（用于 Vue 插件注册）
+│   └── tokens/                  # Design Token 配置（设计样式原子值）
+│       ├── css/                 # 生成后的 CSS Token 文件
+│       ├── fonts/               # 字体资源
+│       ├── js/                  # 获取以及生成Token数据
+│       ├── index.css            # 主样式文件
+│       ├── reset.css            # 样式重置文件
+│       └── style.css            # 组件通用样式
+│   └──index.js                     # 项目主入口（可能用于组件库导出）
+├── sites/                       # 主要包含该组件库的站点，用于文档描述
+│   ├── assets/                  # 静态资源（如图片、图标）
+│   ├── components/              # 站点使用的公共组件
+│   ├── demos/                   # 组件演示页面（提供交互效果展示）
+│   ├── docs/                    # 文档页面（介绍使用说明、API 参考等）
+│   ├── i18n/                    # 站点的国际化支持
+│   ├── json/                    # json格式的Token数据
+│   ├── pages/                   # 站点页面路由（测试页面）
+│   ├── router/                  # Vue 路由配置
+│   ├── App.vue                  # 站点 Vue 入口文件
+│   ├── insetTables.js           # Token数据插入到demo页面
 │   └── main.js                  # 站点主入口文件

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';
-import './style.less';
-ActionbarCell.install = function (Vue) {
-  Vue.component(ActionbarCell.name, ActionbarCell);
-};
-
-export default ActionbarCell;
+import ActionbarCell from './index.vue';
+import './style.less';
+ActionbarCell.install = function (Vue) {
+  Vue.component(ActionbarCell.name, ActionbarCell);
+};
+
+export default ActionbarCell;

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

@@ -1,42 +1,42 @@
-<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>
-
-<style lang="less">
-@import './style.less';
-</style>
+<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>
+
+<style lang="less">
+@import './style.less';
+</style>

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,77 +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,
-      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>
+<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>