hc-basic 1.5.4 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hc-basic",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "author": "yangxiong",
   "description": "基于VUE + elementUI 公共内容库",
   "main": "lib/hc-basic.umd.min.js",
@@ -39,6 +39,7 @@
     "style-resources-loader": "^1.3.2",
     "v-hotkey": "^0.8.0",
     "vue": "^2.6.10",
+    "vue-json-excel": "^0.3.0",
     "vue-router": "3.0.7",
     "vuex": "^3.1.2"
   },

package/scss/default/_basicConfig.scss

@@ -0,0 +1,200 @@
+// 边框样式
+$borderBase: 1px solid $--border-color-base-hc;
+$borderLight: 1px solid $--border-color-light-hc;
+$borderLighter: 1px solid $--border-color-lighter-hc;
+$borderExtraLight: 1px solid $--border-color-extra-light-hc;
+
+$--color-default-hc-50: rgba(255, 255, 255, 0.5);
+$--color-primary-hc-50: mix($--color-primary-hc, $--color-default-hc, 50%);
+$--color-success-hc-50: mix($--color-success-hc, $--color-default-hc, 50%);
+$--color-info-hc-50: mix($--color-info-hc, $--color-default-hc, 50%);
+$--color-warning-hc-50: mix($--color-warning-hc, $--color-default-hc, 50%);
+$--color-danger-hc-50: mix($--color-danger-hc, $--color-default-hc, 50%);
+
+$--color-default-hc-20: rgba(255, 255, 255, 0.2);
+$--color-primary-hc-20: mix($--color-default-hc, $--color-primary-hc, 80%);
+$--color-success-hc-20: mix($--color-default-hc, $--color-success-hc, 80%);
+$--color-info-hc-20: mix($--color-default-hc, $--color-info-hc, 80%);
+$--color-warning-hc-20: mix($--color-default-hc, $--color-warning-hc, 80%);
+$--color-danger-hc-20: mix($--color-default-hc, $--color-danger-hc, 80%);
+
+$--color-default-hc-10: rgba(255, 255, 255, 0.1);
+$--color-primary-hc-10: mix($--color-default-hc, $--color-primary-hc, 90%);
+$--color-success-hc-10: mix($--color-default-hc, $--color-success-hc, 90%);
+$--color-info-hc-10: mix($--color-default-hc, $--color-info-hc, 90%);
+$--color-warning-hc-10: mix($--color-default-hc, $--color-warning-hc, 90%);
+$--color-danger-hc-10: mix($--color-default-hc, $--color-danger-hc, 90%);
+
+$--color-default-hc-5: rgba(255, 255, 255, 0.05);
+$--color-primary-hc-5: mix($--color-default-hc, $--color-primary-hc, 95%);
+$--color-success-hc-5: mix($--color-default-hc, $--color-success-hc, 95%);
+$--color-info-hc-5: mix($--color-default-hc, $--color-info-hc, 95%);
+$--color-warning-hc-5: mix($--color-default-hc, $--color-warning-hc, 95%);
+$--color-danger-hc-5: mix($--color-default-hc, $--color-danger-hc, 95%);
+
+$bgList: (
+  (
+    name: default,
+    value: $--color-default-hc
+  ),
+  (
+    name: default-50,
+    value: $--color-default-hc-50
+  ),
+  (
+    name: default-10,
+    value: $--color-default-hc-10
+  ),
+  (
+    name: default-5,
+    value: $--color-default-hc-5
+  ),
+  (
+    name: primary,
+    value: $--color-primary-hc
+  ),
+  (
+    name: primary-50,
+    value: $--color-primary-hc-50
+  ),
+  (
+    name: primary-10,
+    value: $--color-primary-hc-10
+  ),
+  (
+    name: primary-5,
+    value: $--color-primary-hc-5
+  ),
+  (
+    name: success,
+    value: $--color-success-hc
+  ),
+  (
+    name: success-50,
+    value: $--color-success-hc-50
+  ),
+  (
+    name: success-10,
+    value: $--color-success-hc-10
+  ),
+  (
+    name: success-5,
+    value: $--color-success-hc-5
+  ),
+  (
+    name: info,
+    value: $--color-info-hc
+  ),
+  (
+    name: info-50,
+    value: $--color-info-hc-50
+  ),
+  (
+    name: info-10,
+    value: $--color-info-hc-10
+  ),
+  (
+    name: info-5,
+    value: $--color-info-hc-5
+  ),
+  (
+    name: warning,
+    value: $--color-warning-hc
+  ),
+  (
+    name: warning-50,
+    value: $--color-warning-hc-50
+  ),
+  (
+    name: warning-10,
+    value: $--color-warning-hc-10
+  ),
+  (
+    name: warning-5,
+    value: $--color-warning-hc-5
+  ),
+  (
+    name: danger,
+    value: $--color-danger-hc
+  ),
+  (
+    name: danger-50,
+    value: $--color-danger-hc-50
+  ),
+  (
+    name: danger-10,
+    value: $--color-danger-hc-10
+  ),
+  (
+    name: danger-5,
+    value: $--color-danger-hc-5
+  )
+);
+
+$borderList: (
+  (
+    name: '',
+    value: $borderBase
+  ),
+  (
+    name: -light,
+    value: $borderLight
+  ),
+  (
+    name: -lighter,
+    value: $borderLighter
+  ),
+  (
+    name: -extra-light,
+    value: $borderExtraLight
+  )
+);
+$borderDirections: (left, right, bottom, top);
+
+$cursorList: (pointer, move, wait, not-allowed);
+$displayList: (none, table, table-cell, block, inline, inline-block, inherit, flex);
+$floatList: (none, left, right);
+
+$textColor: (
+  (
+    name: 'white',
+    value: $--color-default-hc
+  ),
+  (
+    name: primary,
+    value: $--color-primary-hc
+  ),
+  (
+    name: success,
+    value: $--color-success-hc
+  ),
+  (
+    name: info,
+    value: $--color-info-hc
+  ),
+  (
+    name: warning,
+    value: $--color-warning-hc
+  ),
+  (
+    name: danger,
+    value: $--color-danger-hc
+  ),
+  (
+    name: text-primary,
+    value: $--color-text-primary-hc
+  ),
+  (
+    name: text-regular,
+    value: $--color-text-regular-hc
+  ),
+  (
+    name: text-secondary,
+    value: $--color-text-secondary-hc
+  ),
+  (
+    name: text-placeholder,
+    value: $--color-text-placeholder-hc
+  )
+);
+$positionList: (relative, fixed, absolute);

package/scss/default/_config.scss

@@ -0,0 +1,61 @@
+$--color-default-hc: #ffffff; // 主题默认色
+$--color-primary-hc: #1b86ee; // 主题色
+$--color-success-hc: #40c073; // 主题成功色
+$--color-info-hc: #8c8c8c; // 主题信息色
+$--color-warning-hc: #faad14; // 主题警告色
+$--color-danger-hc: #f5222d; // 主题错误色
+
+// css4里面 : root{var(--)}
+
+$--color-text-primary-hc: #161d25; // 默认主题文本颜色
+$--color-text-regular-hc: #454f5b; //
+$--color-text-secondary-hc: #8c8c8c;
+$--color-text-placeholder-hc: #bfbfbf; // 输入框内提示文本颜色
+/*
+ * 边框颜色不同亮度
+ */
+$--border-color-base-hc: #dcdfe6; //
+$--border-color-light-hc: #e4e7ed;
+$--border-color-lighter-hc: #ebeef5;
+$--border-color-extra-light-hc: #f2f6fc;
+// 边距基数
+$sideBasic: 4; // padding、margin边距的基数值
+$spaceMax: 21; // 边距基数的最大倍数
+$--border-radius-base-hc: 4px; // 边框圆角基础值
+$--background-color-base-hc: #f5f7fa; // 背景基础颜色值
+
+$colMax: 25; // 24珊格col布局
+
+// 文本字体大小和lineHeight的配合设置
+$textList: (
+  (
+    size: 12,
+    line: 20
+  ),
+  (
+    size: 14,
+    line: 20
+  ),
+  (
+    size: 16,
+    line: 22
+  ),
+  (
+    size: 18,
+    line: 24
+  ),
+  (
+    size: 20,
+    line: 26
+  ),
+  (
+    size: 28,
+    line: 40
+  ),
+  (
+    size: 36,
+    line: 50
+  )
+);
+$--font-path: '../../../node_modules/element-ui/lib/theme-chalk/fonts';
+@import '~element-ui/packages/theme-chalk/src/index';