@jetlinks-web/components 2.6.22 → 2.6.24

package/lib/ProTable/hooks/useTableSelection.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableSelection = exports.PROTABLE_ROW_SELECTION_KEY = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _vue = require("vue");
+var _lodashEs = require("lodash");
+var PROTABLE_ROW_SELECTION_KEY = exports.PROTABLE_ROW_SELECTION_KEY = Symbol('protable-row-selection-key');
+var useTableSelection = exports.useTableSelection = function useTableSelection() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    type: 'checkbox',
+    rowKey: "id",
+    isCheck: true
+  };
+  var _options$type = options.type,
+    type = _options$type === void 0 ? 'checkbox' : _options$type,
+    _options$rowKey = options.rowKey,
+    rowKey = _options$rowKey === void 0 ? 'id' : _options$rowKey;
+  var selectedRowKeys = (0, _vue.ref)([]);
+  var selectedRows = (0, _vue.ref)([]);
+  var selectionObj = (0, _vue.ref)(null);
+  var isCheckRef = (0, _vue.computed)(function () {
+    return (0, _vue.unref)(options.isCheck);
+  });
+  var onSelect = function onSelect(record, selected) {
+    if (type === 'checkbox') {
+      if (selected) {
+        selectedRows.value.push(record);
+      } else {
+        selectedRows.value = selectedRows.value.filter(function (i) {
+          return i[rowKey] !== record[rowKey];
+        });
+      }
+      selectedRowKeys.value = selectedRows.value.map(function (i) {
+        return i[rowKey];
+      });
+    }
+  };
+  // 单选
+  var onChange = function onChange(_selectedRowKeys, _selectedRows) {
+    if (type === 'radio') {
+      selectedRowKeys.value = _selectedRowKeys;
+      selectedRows.value = _selectedRows;
+    }
+  };
+  var onSelectAll = function onSelectAll(selected, _selectedRows, changeRows) {
+    if (selected) {
+      var _selectedRows$value;
+      (_selectedRows$value = selectedRows.value).push.apply(_selectedRows$value, (0, _toConsumableArray2.default)(changeRows));
+    } else {
+      var arr = changeRows.map(function (item) {
+        return item[rowKey];
+      });
+      selectedRows.value = selectedRows.value.filter(function (i) {
+        return !arr.includes(i[rowKey]);
+      });
+    }
+    selectedRowKeys.value = selectedRows.value.map(function (i) {
+      return i[rowKey];
+    });
+  };
+  var onSelectNone = function onSelectNone() {
+    selectedRowKeys.value = [];
+    selectedRows.value = [];
+  };
+  var updateSelection = function updateSelection() {
+    if (isCheckRef.value) {
+      // 提供选择上下文
+      selectionObj.value = type === 'checkbox' ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodashEs.omit)(options, ['isCheck'])), {}, {
+        selectedRowKeys: selectedRowKeys,
+        onSelect: onSelect,
+        onSelectAll: onSelectAll,
+        onSelectNone: onSelectNone
+      }) : (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodashEs.omit)(options, ['isCheck'])), {}, {
+        selectedRowKeys: selectedRowKeys,
+        onChange: onChange,
+        onSelectNone: onSelectNone
+      });
+    } else {
+      // 清空选择状态
+      onSelectNone();
+      selectionObj.value = null;
+    }
+  };
+  (0, _vue.watch)(isCheckRef, function () {
+    updateSelection();
+  }, {
+    immediate: true,
+    deep: false
+  } // 注意：deep 设为 false
+  );
+  (0, _vue.provide)(PROTABLE_ROW_SELECTION_KEY, selectionObj);
+  return {
+    selectedRowKeys: selectedRowKeys,
+    selectedRows: selectedRows,
+    onSelectNone: onSelectNone
+  };
+};

package/lib/ProTable/style/ProTable.less

@@ -0,0 +1,138 @@
+@import '../../style/variable.less';
+@import 'ant-design-vue/lib/pagination/style/index.less';
+@import 'ant-design-vue/lib/table/style/index.less';
+@import 'ant-design-vue/lib/button/style/index.less';
+@import 'ant-design-vue/lib/alert/style/index.less';
+@import 'ant-design-vue/lib/radio/style/index.less';
+@import 'ant-design-vue/lib/spin/style/index.less';
+
+.jtable-body-spin {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+
+  .ant-spin-nested-loading {
+    height: 100%;
+
+    .ant-spin-container {
+      height: 100%;
+    }
+  }
+
+  .jtable-body {
+    width: 100%;
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.jtable-body-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  width: 100%;
+  gap: 8px;
+
+  .jtable-body-header-left {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .jtable-body-header-right {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .jtable-body-header-right-button {
+      width: 62px;
+
+      .right-button-icon {
+        font-size: 16px;
+        color: #d9d9d9;
+      }
+
+      .ant-radio-button-wrapper {
+        padding: 0 8px;
+      }
+
+      :deep(.ant-radio-button-wrapper-checked) {
+        color: @primary-color;
+      }
+    }
+  }
+}
+
+.jtable-box {
+  flex: 1;
+  min-height: 0;
+
+  .jtable-card {
+    height: 100%;
+    overflow-y: auto;
+
+    .jtable-card-items {
+      display: grid;
+      grid-gap: 26px;
+
+      .jtable-card-item {
+        display: flex;
+        min-width: 0;
+      }
+    }
+
+    .j-table-empty {
+      margin-top: 100px;
+    }
+  }
+
+  .ant-table-wrapper {
+    height: 100%;
+    .ant-table {
+      height: 100%;
+
+      .ant-table-container {
+        height: 100%;
+
+        .ant-table-content {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .j-table-scroll {
+
+    .ant-table-container {
+      display: flex;
+      flex-direction: column;
+
+      .ant-table-body {
+        flex: 1;
+        min-height: 0;
+      }
+    }
+  }
+}
+
+.jtable-alert {
+  margin-bottom: 16px;
+}
+
+.jtable-pagination {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+
+  .hide-content {
+    .@{ant-prefix}-pagination-item,
+    & .@{ant-prefix}-pagination-jump-prev,
+    & .@{ant-prefix}-pagination-jump-next {
+      display: none;
+    }
+  }
+}
+

package/lib/RadioButton/style/index.css

@@ -0,0 +1,20 @@
+/* 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 */
+.j-radio-button {
+  display: grid;
+  gap: 16px;
+}
+.j-radio-button .j-radio-button-item {
+  padding: 6px 12px;
+  text-align: center;
+  height: 100%;
+  border-radius: 2px;
+  background-color: #f5f5f5;
+  cursor: pointer;
+}
+.j-radio-button .j-radio-button-item.active {
+  color: #fff;
+  background-color: #1890ff;
+}

package/lib/RadioButton/style/index.less

@@ -0,0 +1,19 @@
+@import '../../style/variable.less';
+.j-radio-button {
+  display: grid;
+  gap: 16px;
+
+  .j-radio-button-item {
+    padding: 6px 12px;
+    text-align: center;
+    height: 100%;
+    border-radius: 2px;
+    background-color: #f5f5f5;
+    cursor: pointer;
+
+    &.active {
+      color: #fff;
+      background-color: @primary-color;
+    }
+  }
+}

package/lib/Scrollbar/style/index.css

@@ -0,0 +1,65 @@
+/* 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 */
+.j-scrollbar {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+.j-scrollbar__wrap {
+  overflow: auto;
+  height: 100%;
+}
+.j-scrollbar__wrap--hidden-default {
+  scrollbar-width: none;
+}
+.j-scrollbar__wrap--hidden-default::-webkit-scrollbar {
+  display: none;
+}
+.j-scrollbar__thumb {
+  position: relative;
+  display: block;
+  width: 0;
+  height: 0;
+  cursor: pointer;
+  border-radius: inherit;
+  background-color: #909399;
+  transition: 0.3s background-color;
+  opacity: 0.3;
+}
+.j-scrollbar__thumb:hover {
+  background-color: #909399;
+  opacity: 0.5;
+}
+.j-scrollbar__bar {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
+  border-radius: 4px;
+}
+.j-scrollbar__bar--vertical {
+  width: 6px;
+  top: 2px;
+}
+.j-scrollbar__bar--vertical > div {
+  width: 100%;
+}
+.j-scrollbar__bar--horizontal {
+  height: 6px;
+  left: 2px;
+}
+.j-scrollbar__bar--horizontal > div {
+  height: 100%;
+}
+.j-scrollbar-fade-enter-active {
+  transition: opacity 340ms ease-out;
+}
+.j-scrollbar-fade-leave-active {
+  transition: opacity 120ms ease-out;
+}
+.j-scrollbar-fade-enter-from,
+.j-scrollbar-fade-leave-active {
+  opacity: 0;
+}

package/lib/Scrollbar/style/index.less

@@ -0,0 +1,83 @@
+@import '../../style/variable.less';
+@scrollbar-bg-color: #909399;
+@scrollbar-hover-bg-color: #909399;
+@scrollbar-hover-opacity: 0.5;
+@scrollbar-opacity: 0.3;
+@transition-duration: 0.3s;
+
+.j-scrollbar {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+
+  &__wrap {
+    overflow: auto;
+    height: 100%;
+
+    &--hidden-default {
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &__thumb {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-radius: inherit;
+    background-color: @scrollbar-bg-color;
+    transition: @transition-duration background-color;
+    opacity: @scrollbar-opacity;
+
+    &:hover {
+      background-color: @scrollbar-hover-bg-color;
+      opacity: @scrollbar-hover-opacity;
+    }
+  }
+
+  &__bar {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1;
+    border-radius: 4px;
+
+    &--vertical {
+      width: 6px;
+      top: 2px;
+
+      > div {
+        width: 100%;
+      }
+    }
+
+    &--horizontal {
+      height: 6px;
+      left: 2px;
+
+      > div {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.j-scrollbar-fade {
+  &-enter-active {
+    transition: opacity 340ms ease-out;
+  }
+
+  &-leave-active {
+    transition: opacity 120ms ease-out;
+  }
+
+  &-enter-from,
+  &-leave-active {
+    opacity: 0;
+  }
+}

package/lib/Search/style/Item.less

@@ -0,0 +1,33 @@
+.JSearch-item {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+
+    .JSearch-item--type {
+        width: 90px;
+        min-width: 0;
+        > span {
+            line-height: 34px;
+            font-weight: bold;
+        }
+    }
+
+    .JSearch-item--column {
+        width: 130px;
+        min-width: 0;
+    }
+
+    .JSearch-item--termType {
+        width: 110px;
+        min-width: 0;
+    }
+    .JSearch-item--label {
+        min-width: 40px;
+    }
+
+    .JSearch-item--value {
+        display: flex;
+        width: 0;
+        flex-grow: 1;
+    }
+}

package/lib/Search/style/Search.less

@@ -0,0 +1,179 @@
+@import '../../style/variable.less';
+.JSearch-warp {
+    padding: 24px;
+    background-color: #fff;
+    margin-bottom: 24px;
+
+    .pack-up {
+        .JSearch-items {
+            flex: 1 1 auto;
+
+            .left {
+                min-width: 380px;
+                max-width: 580px;
+            }
+        }
+    }
+
+    &.senior {
+        > .JSearch-content {
+            display: flex;
+            .JSearch-footer {
+                display: flex;
+                gap: 64px;
+                position: relative;
+
+                .more-btn {
+                    .more-text {
+                        padding-right: 24px;
+                    }
+                    .more-icon {
+                        transition: transform 0.3s;
+                        transform: rotateZ(90deg);
+                        font-size: 14px;
+
+                        &.more-up {
+                            transform: rotateZ(-90deg);
+                        }
+                    }
+                }
+
+                &.expand {
+                    margin-top: 16px;
+                    width: 100%;
+                    justify-content: space-between;
+                }
+
+                .JSearch-footer--btns {
+                    display: flex;
+                    gap: 12px;
+                }
+            }
+
+            .items-expand {
+                display: flex;
+                gap: 16px;
+
+                .left,
+                & .right {
+                    min-width: 0;
+                    flex: 1 1 0;
+                }
+
+                .left-items,
+                & .right-items {
+                    display: flex;
+                    gap: 16px;
+                    flex-direction: column;
+                }
+
+                .center {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                }
+
+                &.vertical {
+                    flex-direction: column;
+                    .center {
+                        flex-direction: row;
+                        justify-content: center;
+                    }
+                }
+            }
+
+            &.senior-expand {
+                flex-direction: column;
+            }
+
+            &.small {
+                gap: 12px;
+                .JSearch-footer {
+                    gap: 4px;
+                }
+            }
+        }
+    }
+
+    .JSearch-content {
+        &.simple {
+            .JSearch-footer--btns {
+                display: flex;
+                gap: 12px;
+            }
+
+            .JSearch-item {
+                gap: 8px;
+
+                .JSearch-item--label {
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    .no-radius {
+        border-radius: 0;
+        border-color: #f1f1f1;
+    }
+
+    .search-history-warp {
+        position: relative;
+
+        .search-history-button {
+            padding-right: 32px;
+        }
+
+        .search-history-button-icon {
+            position: absolute;
+            width: 24px;
+            height: 18px;
+            right: 6px;
+            top: 8px;
+            color: #fff;
+            line-height: 18px;
+            text-align: center;
+            font-weight: bold;
+            > span {
+                font-size: 14px;
+            }
+        }
+    }
+}
+
+.search-history-empty {
+    padding: 12px 12px 6px 12px;
+    background-color: #fff;
+}
+
+.search-history-items {
+    width: 120px;
+    max-height: 300px;
+    overflow-y: auto;
+    .search-history-item {
+        display: flex;
+        padding: 4px 0px 4px 4px;
+        align-items: center;
+        gap: 4px;
+
+        &:hover {
+            background-color: #f1f1f1;
+        }
+
+        .history-item--title {
+            width: calc(100% - 30px);
+            cursor: pointer;
+        }
+
+        .delete {
+            padding: 0 6px;
+            flex: 0 0 28px;
+        }
+    }
+}
+
+.search-history-list-pop {
+    .ant-popover-inner-content {
+        padding: 0;
+    }
+}

package/lib/Title/style/index.css

@@ -0,0 +1,23 @@
+.j-title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 16px;
+}
+.j-title .j-title-content {
+  position: relative;
+  padding-left: 10px;
+  color: rgba(0, 0, 0, 0.8);
+  font-weight: 600;
+  line-height: 1;
+}
+.j-title .j-title-content::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: #1890ff;
+  border-radius: 0 3px 3px 0;
+  content: ' ';
+}

package/lib/Title/style/index.less

@@ -0,0 +1,25 @@
+.j-title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 16px;
+
+  .j-title-content {
+    position: relative;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.8);
+    font-weight: 600;
+    line-height: 1;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 4px;
+      height: 100%;
+      background-color: #1890ff;
+      border-radius: 0 3px 3px 0;
+      content: ' ';
+    }
+  }
+}

package/lib/components.js

@@ -185,5 +185,4 @@ var _Markdown = _interopRequireDefault(require("./Markdown"));
 var _AutoComplete = _interopRequireDefault(require("./AutoComplete"));
 var _Title = _interopRequireDefault(require("./Title"));
 var _FlameGraph = _interopRequireDefault(require("./FlameGraph"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }