@jetlinks-web/components 2.0.37 → 2.1.0

package/lib/EditTable/hooks/useValidate.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useValidate = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncValidator = _interopRequireDefault(require("async-validator"));
+var _utils = require("../utils");
+var _vue = require("vue");
+var useValidate = exports.useValidate = function useValidate(dataSource, columns, rowKey) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var errorMap = (0, _vue.ref)({});
+  var schemaInstance;
+  var rules = (0, _vue.ref)({});
+  var _options = (0, _extends2.default)({
+    validateRowKey: false
+  }, options);
+  var validateItem = function validateItem(data) {
+    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    return new Promise(function (resolve, reject) {
+      schemaInstance.validate(data, {
+        firstFields: true,
+        index: index
+      }, function (err) {
+        if (err === null || err === void 0 ? void 0 : err.length) {
+          reject(err.map(function (item) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+              __serial: data.__serial,
+              __dataIndex: index
+            });
+          }));
+        } else {
+          resolve(data);
+        }
+      });
+    });
+  };
+  var validate = function validate() {
+    return new Promise(function (resolve, reject) {
+      var filterDataSource = dataSource.value;
+      var len = filterDataSource.length;
+      var error = [];
+      var success = [];
+      var validateLen = 0;
+      var end = function end() {
+        validateLen += 1;
+        if (validateLen === len) {
+          var isSuccess = !Object.keys(error).length;
+          if (isSuccess) {
+            var _options$onSuccess;
+            resolve(success);
+            (_options$onSuccess = _options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(_options);
+          } else {
+            var _options$onError;
+            (_options$onError = _options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(_options, error);
+            reject(error);
+          }
+        }
+      };
+      var validateRowKey = _options.validateRowKey;
+      if (filterDataSource.length) {
+        filterDataSource.forEach(function (record, index) {
+          if (validateRowKey || record[rowKey]) {
+            validateItem(record, index).then(function (res) {
+              success.push((0, _utils.handlePureRecord)(res));
+              end();
+            }).catch(function (err) {
+              error.push(err);
+              end();
+            });
+          } else {
+            end();
+          }
+        });
+      } else {
+        resolve(filterDataSource);
+      }
+    });
+  };
+  var createValidate = function createValidate() {
+    rules.value = (0, _utils.collectValidateRules)(columns);
+    schemaInstance = new _asyncValidator.default(rules.value);
+  };
+  createValidate();
+  return {
+    validate: validate,
+    validateItem: validateItem,
+    errorMap: errorMap,
+    rules: rules
+  };
+};

package/lib/EditTable/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _EditTable = _interopRequireDefault(require("./EditTable.js"));
+var _Body = _interopRequireDefault(require("./Body.js"));
+var _Header = _interopRequireDefault(require("./Header.js"));
+_EditTable.default.install = function (app) {
+  app.component(_EditTable.default.name, _EditTable.default);
+  app.component(_Body.default.name, _Body.default);
+  app.component(_Header.default.name, _Header.default);
+};
+var _default = exports.default = _EditTable.default;

package/lib/EditTable/props.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = exports.bodyProps = void 0;
+var defaultProps = exports.defaultProps = function defaultProps() {
+  return {
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    columns: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    }
+  };
+};
+var bodyProps = exports.bodyProps = function bodyProps() {
+  return {
+    dataSource: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    cellHeight: {
+      type: Number,
+      default: 50
+    },
+    height: {
+      type: Number,
+      default: 300
+    },
+    style: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    disableMenu: {
+      type: Boolean,
+      default: true
+    },
+    rowSelection: {
+      type: Object,
+      default: undefined
+    },
+    scroll: {
+      type: Object,
+      default: undefined
+    }
+  };
+};

package/lib/EditTable/style/body.less

@@ -0,0 +1,76 @@
+.jetlinks-edit-table-body-viewport {
+  max-height: 100%;
+  width: 100%;
+  overflow: hidden auto;
+  position: relative;
+
+  .jetlinks-edit-scrollbar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: -1;
+  }
+
+  .jetlinks-edit-table-body-container {
+    display: flex;
+  }
+
+  .jetlinks-edit-table-center, & .jetlinks-edit-table-left,& .jetlinks-edit-table-right {
+    position: relative;
+    min-width: 0;
+    height: 100%;
+    z-index: 5;
+    flex-shrink: 0;
+    flex-grow: 0;
+
+    .jetlinks-edit-table-row {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      transition: top .2s, height .2s, background-color .1s;
+      border-bottom: 1px solid #ebebeb;
+      background-color: #fff;
+
+      &.jetlinks-edit-table-row-hover {
+        background-color: rgb(248, 248, 248);
+      }
+
+      &.jetlinks-edit-table-row-selected {
+        background-color: var(--ant-primary-1);
+      }
+
+      .jetlinks-edit-table-cell {
+        min-width: 0;
+      }
+
+      .body-cell-box {
+        padding: 0 12px;
+        position: relative;
+      }
+    }
+  }
+
+  .jetlinks-edit-table-left {
+    position: sticky;
+    left: 0;
+  }
+
+  .jetlinks-edit-table-right {
+    position: sticky;
+    right: 0;
+  }
+
+  .jetlinks-edit-table-center {
+    z-index: 1;
+    > div {
+      position: relative;
+    }
+  }
+}
+.jetlinks-edit-table-body-empty {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding-top: 24px;
+}

package/lib/EditTable/style/header.less

@@ -0,0 +1,77 @@
+.jetlinks-edit-table-header-container {
+  height: 100%;
+  position: relative;
+  display: flex;
+  width: 100%;
+
+  .jetlinks-header-left,& .jetlinks-header-center,& .jetlinks-header-right {
+    position: relative;
+    z-index: 5;
+    min-width: 0;
+    height: 100%;
+    width: 100%;
+    background: #fafafa;
+  }
+
+  .jetlinks-header-center {
+    z-index: 2;
+    > div {
+      position: relative;
+      height: 100%;
+    }
+  }
+
+  .jetlinks-edit-table-header-cell {
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    float: left;
+    overflow: visible;
+    background: #fafafa;
+
+    .jetlinks-edit-table-header-cell-box {
+      padding: 0 12px;
+      width: 100%;
+      position: relative;
+
+      &.header-cell-box-tool {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .table-header-cell-title {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+      }
+
+      .header-cell-required {
+        color: @error-color;
+        padding-left: 8px;
+        transform: translateY(3px);
+        font-weight: 500;
+      }
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        right: 1px;
+        width: 1px;
+        height: 1.6em;
+        pointer-events: none;
+        background-color: rgba(0,0,0,.06);
+        transform: translateY(-50%);
+        transition: background-color .3s;
+        content: "";
+      }
+
+      &:not(:last-child) {
+        &::before {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}

package/lib/EditTable/style/index.css

@@ -0,0 +1,214 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.jetlinks-edit-table-wrapper {
+  background: #fff;
+  height: 100%;
+  position: relative;
+}
+.jetlinks-edit-table-wrapper.table-full-screen {
+  padding: 24px;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-edit-table-header {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-edit-table-header .jetlinks-edit-table-header-scroll-hidden {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5;
+  background: #fafafa;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-edit-table-body {
+  background-color: #fff;
+  overflow-y: hidden;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+.jetlinks-edit-table-body-viewport {
+  max-height: 100%;
+  width: 100%;
+  overflow: hidden auto;
+  position: relative;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-scrollbar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  z-index: -1;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-body-container {
+  display: flex;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-left,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-right {
+  position: relative;
+  min-width: 0;
+  height: 100%;
+  z-index: 5;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-left .jetlinks-edit-table-row,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-right .jetlinks-edit-table-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  transition: top 0.2s, height 0.2s, background-color 0.1s;
+  border-bottom: 1px solid #ebebeb;
+  background-color: #fff;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row.jetlinks-edit-table-row-hover,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-left .jetlinks-edit-table-row.jetlinks-edit-table-row-hover,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-right .jetlinks-edit-table-row.jetlinks-edit-table-row-hover {
+  background-color: #f8f8f8;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row.jetlinks-edit-table-row-selected,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-left .jetlinks-edit-table-row.jetlinks-edit-table-row-selected,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-right .jetlinks-edit-table-row.jetlinks-edit-table-row-selected {
+  background-color: var(--ant-primary-1);
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row .jetlinks-edit-table-cell,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-left .jetlinks-edit-table-row .jetlinks-edit-table-cell,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-right .jetlinks-edit-table-row .jetlinks-edit-table-cell {
+  min-width: 0;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row .body-cell-box,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-left .jetlinks-edit-table-row .body-cell-box,
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-right .jetlinks-edit-table-row .body-cell-box {
+  padding: 0 12px;
+  position: relative;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-left {
+  position: sticky;
+  left: 0;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-right {
+  position: sticky;
+  right: 0;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center {
+  z-index: 1;
+}
+.jetlinks-edit-table-body-viewport .jetlinks-edit-table-center > div {
+  position: relative;
+}
+.jetlinks-edit-table-body-empty {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding-top: 24px;
+}
+.jetlinks-edit-table-header-container {
+  height: 100%;
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.jetlinks-edit-table-header-container .jetlinks-header-left,
+.jetlinks-edit-table-header-container .jetlinks-header-center,
+.jetlinks-edit-table-header-container .jetlinks-header-right {
+  position: relative;
+  z-index: 5;
+  min-width: 0;
+  height: 100%;
+  width: 100%;
+  background: #fafafa;
+}
+.jetlinks-edit-table-header-container .jetlinks-header-center {
+  z-index: 2;
+}
+.jetlinks-edit-table-header-container .jetlinks-header-center > div {
+  position: relative;
+  height: 100%;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell {
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  float: left;
+  overflow: visible;
+  background: #fafafa;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box {
+  padding: 0 12px;
+  width: 100%;
+  position: relative;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box.header-cell-box-tool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .table-header-cell-title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .header-cell-required {
+  color: #ff4d4f;
+  padding-left: 8px;
+  transform: translateY(3px);
+  font-weight: 500;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box::before {
+  position: absolute;
+  top: 50%;
+  right: 1px;
+  width: 1px;
+  height: 1.6em;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.06);
+  transform: translateY(-50%);
+  transition: background-color 0.3s;
+  content: "";
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box:not(:last-child)::before {
+  background-color: transparent;
+}
+.edit-table-search-header {
+  display: flex;
+  justify-content: space-between;
+}
+.edit-table-search-result-total {
+  color: #1890ff;
+}
+.jetlinks-edit-table-horizontal-scroll {
+  height: 17px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  z-index: 4;
+}
+.jetlinks-edit-table-horizontal-scroll .jetlinks-edit-table-horizontal-scroll-viewport {
+  overflow-y: hidden;
+  overflow-x: scroll;
+  position: relative;
+  flex: 1 1 0;
+  height: 17px;
+  width: 100%;
+}
+.jetlinks-edit-table-horizontal-scroll .jetlinks-edit-table-horizontal-scroll-viewport > div {
+  height: 17px;
+}
+.jetlinks-edit-table-horizontal-scroll .jetlinks-edit-table-horizontal-scroll-hidden {
+  height: 100%;
+  overflow-x: hidden;
+}

package/lib/EditTable/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

package/lib/EditTable/style/index.less

@@ -0,0 +1,38 @@
+@import "ant-design-vue/es/style/themes/index.less";
+@import "./table.less";
+@import "./body.less";
+@import "./header.less";
+
+.edit-table-search-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.edit-table-search-result-total {
+  color: @primary-color;
+}
+
+.jetlinks-edit-table-horizontal-scroll {
+  height: 17px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  z-index: 4;
+
+  .jetlinks-edit-table-horizontal-scroll-viewport {
+    overflow-y: hidden;
+    overflow-x: scroll;
+    position: relative;
+    flex: 1 1 0;
+    height: 17px;
+    width: 100%;
+
+    > div {
+      height: 17px;
+    }
+  }
+
+  .jetlinks-edit-table-horizontal-scroll-hidden {
+    height: 100%; overflow-x: hidden;
+  }
+}

package/lib/EditTable/style/table.less

@@ -0,0 +1,42 @@
+.jetlinks-edit-table-wrapper {
+  background: #fff;
+  height: 100%;
+  position: relative;
+
+  &.table-full-screen {
+    padding: 24px;
+  }
+
+  .jetlinks-edit-table {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .jetlinks-edit-table-header {
+      overflow: hidden;
+      width: 100%;
+      position: relative;
+
+      .jetlinks-edit-table-header-scroll-hidden {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 5;
+        background: #fafafa;
+      }
+    }
+
+
+    .jetlinks-edit-table-body {
+      background-color: #fff;
+      overflow-y: hidden;
+      position: relative;
+      height: 100%;
+      width: 100%;
+      flex: 1 1 auto;
+      flex-direction: row;
+    }
+  }
+}