bkui-vue 0.0.1-beta.45 → 0.0.1-beta.48

package/lib/table/plugins/head-sort.variable.css

@@ -0,0 +1,116 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --disable-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 38px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 10px;
+  --input-block-color: #f4f6fa;
+  --input-icon-size: var(--font-size-large);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+}
+.bk-head-cell-sort {
+  display: flex;
+  flex-direction: column;
+  margin-left: 4px;
+  font-size: 10px;
+}
+.bk-head-cell-sort .sort-action {
+  display: flex;
+  width: 18px;
+  height: calc(var(--row-height)/2);
+  color: #c0c4cc;
+  cursor: pointer;
+}
+.bk-head-cell-sort .sort-action.active {
+  color: #3a84ff;
+}
+.bk-head-cell-sort .sort-action.sort-asc {
+  align-items: flex-end;
+}
+.bk-head-cell-sort .sort-action.sort-desc {
+  align-items: flex-start;
+}

package/lib/table/props.d.ts

@@ -3,6 +3,10 @@ export declare enum SortScope {
     CURRENT = "current",
     ALL = "all"
 }
+export declare type ColumnFilterListItem = {
+    text?: string;
+    value?: string;
+};
 export declare const tableProps: {
     /**
      * 渲染列表
@@ -112,10 +116,13 @@ export declare type Column = {
     width?: number | string;
     type?: string;
     sort?: {
-        sortby?: string;
         sortFn?: Function;
         sortScope?: string;
     } | boolean;
+    filter?: {
+        list?: any;
+        filterFn?: Function;
+    } | boolean;
 };
 export declare type Thead = {
     height?: Number;

package/lib/table/render.d.ts

@@ -2,12 +2,8 @@ import { TablePlugins } from './plugins/index';
 import { GroupColumn, IColumnActive, IReactiveProp, TablePropTypes } from './props';
 export declare const enum EVENTS {
     /** 点击排序事件 */
-    ON_SORT_BY_CLICK = "onSortByClick"
-}
-/** 排序方式 */
-export declare const enum SortType {
-    ASC = "asc",
-    DESC = "desc"
+    ON_SORT_BY_CLICK = "onSortByClick",
+    ON_FILTER_CLICK = "onFilterClick"
 }
 export default class TableRender {
     props: TablePropTypes;
@@ -58,6 +54,14 @@ export default class TableRender {
      * @param index 当前选中列Index
      */
     private handleColumnHeadClick;
+    /**
+     * 获取排序设置表头
+     * @param column 当前渲染排序列
+     * @param index 排序列所在index
+     * @returns
+     */
+    private getSortCell;
+    private getFilterCell;
     /**
      * 渲染Table Header
      * @returns
@@ -85,15 +89,6 @@ export default class TableRender {
      * @param rows
      */
     private handleRowDblClick;
-    /**
-     * 获取当前行指定列的内容
-     * @param row 当前行
-     * @param key 指定列名
-     * @param column 列配置
-     * @param index 当前行Index
-     * @returns
-     */
-    private getRowText;
     /**
      * 渲染表格Cell内容
      * @param row 当前行

package/lib/table/table.css

@@ -1,3 +1,93 @@
+.bk-table-head-action {
+  display: flex;
+  width: 32px;
+  height: var(--row-height);
+  margin-left: 4px;
+  font-size: 12px;
+  color: #c4c6cc;
+  cursor: pointer;
+  align-items: center;
+}
+.bk-table-head-action.active {
+  color: #3a84ff;
+}
+.bk-table-head-action.opened {
+  color: inherit;
+}
+.bk-table-head-filter {
+  padding: 5px 0 0 0;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
+}
+.bk-table-head-filter .content-list {
+  max-width: 200px;
+  min-width: 140px;
+  overflow: auto;
+}
+.bk-table-head-filter .content-list .list-item {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  text-align: left;
+}
+.bk-table-head-filter .content-list .list-item:hover {
+  background: #f0f1f5;
+}
+.bk-table-head-filter .content-footer {
+  display: flex;
+  height: 42px;
+  padding: 0 10px;
+  border-top: solid 1px #dcdee5;
+  justify-content: center;
+  align-items: center;
+}
+.bk-table-head-filter .content-footer span {
+  display: inline-flex;
+  height: 100%;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #3a84ff;
+  cursor: pointer;
+  align-items: center;
+}
+.bk-table-head-filter .content-footer span.btn-filter-split {
+  width: 1px;
+  height: calc(100% - 12px);
+  padding: 6px 0;
+  cursor: default;
+  background: #f0f1f5;
+}
+.bk-table-head-filter .content-footer span.btn-filter-reset.disable {
+  color: #979ba5;
+  cursor: not-allowed;
+}
+.bk-head-cell-sort {
+  display: flex;
+  flex-direction: column;
+  margin-left: 4px;
+  font-size: 10px;
+}
+.bk-head-cell-sort .sort-action {
+  display: flex;
+  width: 18px;
+  height: calc(var(--row-height)/2);
+  color: #c0c4cc;
+  cursor: pointer;
+}
+.bk-head-cell-sort .sort-action.active {
+  color: #3a84ff;
+}
+.bk-head-cell-sort .sort-action.sort-asc {
+  align-items: flex-end;
+}
+.bk-head-cell-sort .sort-action.sort-desc {
+  align-items: flex-start;
+}
 .bk-table {
   height: 100%;
   overflow: hidden;
@@ -48,32 +138,10 @@
 .bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
 }
-.bk-table .bk-table-head table thead th .head-cell-sort,
-.bk-table .bk-table-body table thead th .head-cell-sort {
-  display: flex;
-  flex-direction: column;
-  margin-left: 4px;
-  font-size: 10px;
-}
-.bk-table .bk-table-head table thead th .head-cell-sort .sort-action,
-.bk-table .bk-table-body table thead th .head-cell-sort .sort-action {
-  display: flex;
-  width: 18px;
-  height: calc(var(--row-height)/2);
-  color: #c0c4cc;
-  cursor: pointer;
-}
-.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.active,
-.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.active {
-  color: #3a84ff;
-}
-.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.sort-asc,
-.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.sort-asc {
-  align-items: flex-end;
-}
-.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.sort-desc,
-.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.sort-desc {
-  align-items: flex-start;
+.bk-table .bk-table-head table tbody tr td .cell,
+.bk-table .bk-table-body table tbody tr td .cell {
+  display: inline-block;
+  width: 100%;
 }
 .bk-table .bk-table-head table tbody tr:hover td,
 .bk-table .bk-table-body table tbody tr:hover td {

package/lib/table/table.less

@@ -1,5 +1,6 @@
 @import '../styles/themes/themes.less';
-
+@import './plugins/head-filter.less';
+@import './plugins/head-sort.less';
 .@{bk-prefix}-table {
   height: 100%;
   overflow: hidden;
@@ -44,38 +45,18 @@
           &:hover {
             background: @table-row-active-bg-color;
           }
-
-          .head-cell-sort {
-            display: flex;
-            flex-direction: column;
-            margin-left: 4px;
-            font-size: 10px;
-
-            .sort-action {
-              display: flex;
-              width: 18px;
-              height: calc(var(--row-height)/2);
-              color: #c0c4cc;
-              cursor: pointer;
-
-              &.active {
-                color: #3a84ff;
-              }
-
-              &.sort-asc {
-                align-items: flex-end;
-              }
-
-              &.sort-desc {
-                align-items: flex-start;
-              }
-            }
-          }
         }
       }
 
       tbody {
         tr {
+          td {
+            .cell {
+              display: inline-block;
+              width: 100%;
+            }
+          }
+
           &:hover {
             td {
               background: @table-row-hover-bg-color;

package/lib/table/table.variable.css

@@ -92,18 +92,108 @@
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
 }
+.bk-table-head-action {
+  display: flex;
+  width: 32px;
+  height: var(--row-height);
+  margin-left: 4px;
+  font-size: 12px;
+  color: #c4c6cc;
+  cursor: pointer;
+  align-items: center;
+}
+.bk-table-head-action.active {
+  color: #3a84ff;
+}
+.bk-table-head-action.opened {
+  color: inherit;
+}
+.bk-table-head-filter {
+  padding: 5px 0 0 0;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
+}
+.bk-table-head-filter .content-list {
+  max-width: 200px;
+  min-width: 140px;
+  overflow: auto;
+}
+.bk-table-head-filter .content-list .list-item {
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  text-align: left;
+}
+.bk-table-head-filter .content-list .list-item:hover {
+  background: #f0f1f5;
+}
+.bk-table-head-filter .content-footer {
+  display: flex;
+  height: 42px;
+  padding: 0 10px;
+  border-top: solid 1px #dcdee5;
+  justify-content: center;
+  align-items: center;
+}
+.bk-table-head-filter .content-footer span {
+  display: inline-flex;
+  height: 100%;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #3a84ff;
+  cursor: pointer;
+  align-items: center;
+}
+.bk-table-head-filter .content-footer span.btn-filter-split {
+  width: 1px;
+  height: calc(100% - 12px);
+  padding: 6px 0;
+  cursor: default;
+  background: #f0f1f5;
+}
+.bk-table-head-filter .content-footer span.btn-filter-reset.disable {
+  color: #979ba5;
+  cursor: not-allowed;
+}
+.bk-head-cell-sort {
+  display: flex;
+  flex-direction: column;
+  margin-left: 4px;
+  font-size: 10px;
+}
+.bk-head-cell-sort .sort-action {
+  display: flex;
+  width: 18px;
+  height: calc(var(--row-height)/2);
+  color: #c0c4cc;
+  cursor: pointer;
+}
+.bk-head-cell-sort .sort-action.active {
+  color: #3a84ff;
+}
+.bk-head-cell-sort .sort-action.sort-asc {
+  align-items: flex-end;
+}
+.bk-head-cell-sort .sort-action.sort-desc {
+  align-items: flex-start;
+}
 .bk-table {
   height: 100%;
   overflow: hidden;
-  border-top: 1px solid var(--table-border-color);
-  border-bottom: 1px solid var(--table-border-color);
+  border-top: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
 }
 .bk-table .bk-table-body {
   overflow: auto;
 }
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
-  background: var(--table-bg-color);
+  background: white;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
@@ -126,67 +216,45 @@
   padding: 0 15px;
   overflow: hidden;
   line-height: var(--row-height);
-  color: var(--table-body-font-color);
+  color: #575961;
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
-  color: var(--table-head-font-color);
-  background-color: var(--table-head-bg-color);
+  color: #313238;
+  background-color: #fafbfd;
 }
 .bk-table .bk-table-head table thead th.active,
 .bk-table .bk-table-body table thead th.active,
 .bk-table .bk-table-head table thead th:hover,
 .bk-table .bk-table-body table thead th:hover {
-  background: var(--table-row-active-bg-color);
+  background: #f0f1f5;
 }
-.bk-table .bk-table-head table thead th .head-cell-sort,
-.bk-table .bk-table-body table thead th .head-cell-sort {
-  display: flex;
-  flex-direction: column;
-  margin-left: 4px;
-  font-size: 10px;
-}
-.bk-table .bk-table-head table thead th .head-cell-sort .sort-action,
-.bk-table .bk-table-body table thead th .head-cell-sort .sort-action {
-  display: flex;
-  width: 18px;
-  height: calc(var(--row-height)/2);
-  color: #c0c4cc;
-  cursor: pointer;
-}
-.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.active,
-.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.active {
-  color: #3a84ff;
-}
-.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.sort-asc,
-.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.sort-asc {
-  align-items: flex-end;
-}
-.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.sort-desc,
-.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.sort-desc {
-  align-items: flex-start;
+.bk-table .bk-table-head table tbody tr td .cell,
+.bk-table .bk-table-body table tbody tr td .cell {
+  display: inline-block;
+  width: 100%;
 }
 .bk-table .bk-table-head table tbody tr:hover td,
 .bk-table .bk-table-body table tbody tr:hover td {
-  background: var(--table-row-hover-bg-color);
+  background: #f5f7fa;
 }
 .bk-table .bk-table-footer {
   line-height: 40px;
 }
 .bk-table.bordered-row td,
 .bk-table.bordered-row th {
-  border-bottom: 1px solid var(--table-border-color);
+  border-bottom: 1px solid #dcdee5;
 }
 .bk-table.bordered-outer {
-  border-right: 1px solid var(--table-border-color);
-  border-left: 1px solid var(--table-border-color);
+  border-right: 1px solid #dcdee5;
+  border-left: 1px solid #dcdee5;
 }
 .bk-table.bordered-col th,
 .bk-table.bordered-col td {
-  border-right: 1px solid var(--table-border-color);
+  border-right: 1px solid #dcdee5;
 }
 .bk-table.bordered-col th:last-child,
 .bk-table.bordered-col td:last-child {
@@ -203,9 +271,9 @@
   width: 100%;
 }
 .bk-table colgroup col {
-  background: var(--table-bg-color);
+  background: white;
 }
 .bk-table colgroup col.active {
   position: relative;
-  background: var(--table-row-active-bg-color);
+  background: #f0f1f5;
 }

package/lib/table/utils.d.ts

@@ -1,4 +1,4 @@
-import { GroupColumn, TablePropTypes } from './props';
+import { Column, GroupColumn, TablePropTypes } from './props';
 /**
  * 解析Prop值 | 可能为多种类型 & 函数返回的场景
  * @param prop 当前Prop
@@ -80,3 +80,12 @@ export declare const resolveHeadConfig: (props: TablePropTypes) => {
     isShow?: boolean;
     cellFn?: Function;
 };
+/**
+   * 获取当前行指定列的内容
+   * @param row 当前行
+   * @param key 指定列名
+   * @param column 列配置
+   * @param index 当前行Index
+   * @returns
+   */
+export declare const getRowText: (row: any, key: string, column: Column) => any;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.1-beta.45",
+  "version": "0.0.1-beta.48",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",
-      "scripts/cli"
+      "scripts/*"
     ]
   },
   "files": [
@@ -14,19 +14,27 @@
   "scripts": {
     "prepare": "husky install",
     "dev": "vite serve site",
-    "build": "yarn build:dist && yarn build:lib",
+    "build": "run-p build:dist build:lib",
     "build:site": "vite build site --mode development",
     "build:dist": "rimraf dist && lerna run --stream --scope cli dist",
     "build:lib": "rimraf lib && lerna run --stream --scope cli lib",
+    "lib:dev": "rimraf lib && node --inspect-brk ./node_modules/.bin/ts-node --project=./scripts/cli/tsconfig.json ./scripts/cli/index.ts lib",
     "help:release": "lerna run --stream --scope cli release",
-    "release": "yarn build && yarn help:release",
+    "release": "run-s build help:release",
     "analyze:lib": "rimraf lib && lerna run --stream --scope cli lib -- -a",
     "generate:icon": "lerna run --scope @bkui-vue/icon build",
     "changelog": "conventional-changelog -c .changelog.config.js -p angular -i CHANGELOG.md -s -l",
-    "lint": "eslint --ext .js,.ts,.tsx,.vue ./packages ./site ",
-    "lint:style": "stylelint --fix ./packages/**/*.{css,less} --custom-syntax",
-    "lint:fix": "eslint --fix ./packages ./site --ext .js,.ts,.tsx,.vue",
-    "test:unit": "jest --passWithNoTests",
+    "lint:packages": "eslint ./packages --ext .js,.ts,.tsx --cache",
+    "lint:site": "eslint ./site --ext .js,.ts,.tsx,.vue --cache",
+    "lint:scripts": "eslint ./scripts --ext .js,.ts,.tsx --cache",
+    "lint": "run-p lint:site lint:packages lint:scripts",
+    "fix:packages": "eslint ./packages --ext .js,.ts,.tsx --fix --cache",
+    "fix:site": "eslint ./site --ext .js,.ts,.tsx,.vue --fix --cache",
+    "fix:scripts": "eslint ./scripts --ext .js,.ts,.tsx --fix --cache",
+    "lint:fix": "run-p lint:site lint:packages lint:scripts",
+    "stylelint": "eslint --ext .js,.ts,.tsx,.vue ./packages ./site --cache",
+    "stylelint:fix": "yarn stylelint -- --fix",
+    "test:unit": "jest --passWithNoTests --config=./jest.config.js",
     "cz": "git-cz"
   },
   "devDependencies": {
@@ -34,14 +42,12 @@
     "@commitlint/config-conventional": "~16.2.1",
     "@types/jest": "~27.4.1",
     "@types/node": "~17.0.23",
+    "@types/postcss-less": "~4.0.2",
     "@typescript-eslint/eslint-plugin": "~5.19.0",
     "@typescript-eslint/parser": "~5.19.0",
     "@vitejs/plugin-vue": "~2.3.1",
     "@vitejs/plugin-vue-jsx": "~1.3.9",
     "@vue/babel-plugin-jsx": "~1.1.1",
-    "@vue/babel-preset-jsx": "~1.2.4",
-    "@vue/compiler-sfc": "~3.2.31",
-    "@vue/component-compiler-utils": "~3.3.0",
     "@vue/eslint-config-standard": "~6.1.0",
     "@vue/eslint-config-typescript": "~10.0.0",
     "@vue/test-utils": "~2.0.0-rc.12",
@@ -69,11 +75,16 @@
     "lint-staged": "~12.3.7",
     "markdown-it-container": "~3.0.0",
     "normalize-wheel": "~1.0.1",
+    "npm-run-all": "~4.1.5",
     "plop": "~3.0.5",
+    "postcss": "~8.4.12",
+    "postcss-html": "~1.4.1",
+    "postcss-less": "~6.0.0",
     "prettier": "~2.6.2",
     "prismjs": "~1.27.0",
     "rimraf": "~3.0.2",
     "stylelint": "~14.6.1",
+    "stylelint-config-recommended-vue": "~1.4.0",
     "stylelint-order": "~5.0.0",
     "stylelint-scss": "~4.2.0",
     "ts-jest": "~27.1.4",
@@ -82,6 +93,7 @@
     "vite": "~2.9.1",
     "vite-plugin-md": "~0.12.4",
     "vue": "^3.2.0",
+    "vue-eslint-parser": "~8.3.0",
     "vue-router": "~4.0.14",
     "vue-types": "~4.1.1"
   },
@@ -93,11 +105,13 @@
   "module": "dist/bkui-vue.esm.js",
   "typings": "./lib/index.d.ts",
   "lint-staged": {
-    "*.css": "stylelint",
-    "*.less": "stylelint --fix --customSyntax=postcss-less",
-    "*.{js,ts,tsx,vue}": [
-      "eslint --fix",
-      "git add ."
+    "*.(vue|ts|tsx|js)": [
+      "eslint --ext .js,.tsx,.ts,.vue --cache --fix",
+      "git add"
+    ],
+    "*.(vue|scss|css|sass)": [
+      "stylelint --cache --fix",
+      "git add"
     ]
   },
   "config": {