@cmstops/pro-compo 0.1.8 → 0.1.9

package/es/selectGategory/components/ColumnSelection/index.js

@@ -0,0 +1,273 @@
+import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, Fragment, renderList, createVNode, unref, withCtx, createElementVNode, normalizeClass, toDisplayString, withModifiers, createCommentVNode, normalizeStyle, createTextVNode, createBlock } from "vue";
+import { Tooltip, Popover, Scrollbar, Tree } from "@arco-design/web-vue";
+import { IconCloseCircle, IconCheck, IconPlus } from "@arco-design/web-vue/es/icon";
+import { getCategoryPath, getCategoryCategoriesTree } from "../../script/api.js";
+const _hoisted_1 = { class: "column-selection-container" };
+const _hoisted_2 = { class: "label" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "column-select add" };
+const _hoisted_5 = { class: "column-select add" };
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = { class: "label" };
+const _hoisted_8 = { class: "column-v" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = {
+  key: 0,
+  class: "add-icon"
+};
+const _sfc_main = defineComponent({
+  ...{ name: "selectGategory" },
+  __name: "index",
+  props: {
+    base_api: {},
+    repository_id: {},
+    selectColumnData: {},
+    selectColumnWithData: {},
+    multiple: { type: Boolean },
+    limit: {},
+    addText: {}
+  },
+  emits: [
+    "update:selectColumnData",
+    "update:selectColumnWithData"
+  ],
+  setup(__props, { emit }) {
+    const props = __props;
+    const popoverShow = ref(false);
+    const treeData = ref([]);
+    const listMinHeight = ref(0);
+    const columnSelectedArray = ref([]);
+    const multipleShowSelectedArray = ref([]);
+    const columnSelectedArrayIds = computed(
+      () => columnSelectedArray.value.map((item) => item.id)
+    );
+    watch(
+      () => props.selectColumnData,
+      () => {
+        if (!(props.selectColumnData && props.selectColumnData.length)) {
+          columnSelectedArray.value = [];
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.selectColumnWithData,
+      () => {
+        if (!(props.selectColumnWithData && props.selectColumnWithData.length)) {
+          columnSelectedArray.value = [];
+        }
+      },
+      { deep: true }
+    );
+    const columnSelectedArraySplice = (index) => {
+      columnSelectedArray.value.splice(index, 1);
+    };
+    const onCheck = (newSelectedKeys, data) => {
+      data && data.node && AddColumnSelected(data.node);
+    };
+    const leavePopover = () => {
+      multipleShowSelectedArray.value = JSON.parse(
+        JSON.stringify(columnSelectedArray.value)
+      );
+      props.multiple ? emit(
+        "update:selectColumnWithData",
+        JSON.parse(JSON.stringify(columnSelectedArray.value))
+      ) : emit(
+        "update:selectColumnData",
+        JSON.parse(JSON.stringify(columnSelectedArray.value))
+      );
+      popoverShow.value = false;
+    };
+    const multipleArraySplice = (item, index) => {
+      multipleShowSelectedArray.value.splice(index, 1);
+      const _index = columnSelectedArray.value.findIndex(
+        (column) => column.id === item.id
+      );
+      if (_index >= 0) {
+        columnSelectedArray.value.splice(_index, 1);
+        emit(
+          "update:selectColumnWithData",
+          JSON.parse(JSON.stringify(columnSelectedArray.value))
+        );
+      }
+    };
+    const AddColumnSelected = (data, node) => {
+      for (let index = 0; index < columnSelectedArray.value.length; index++) {
+        const element = columnSelectedArray.value[index];
+        if (element.id === (data == null ? void 0 : data.id)) {
+          columnSelectedArraySplice(index);
+          if (!props.multiple) {
+            emit(
+              "update:selectColumnData",
+              JSON.parse(JSON.stringify(columnSelectedArray.value))
+            );
+          }
+          return;
+        }
+      }
+      getCategoryPath(props.base_api, {
+        repo: props.repository_id,
+        category: data == null ? void 0 : data.id
+      }).then((res) => {
+        const pathArr = [];
+        for (const i of res.message) {
+          pathArr.push(i.category_alias);
+        }
+        data.path = pathArr.join("/");
+        if (props.multiple) {
+          columnSelectedArray.value.push(data);
+          if (props.limit && columnSelectedArray.value.length > props.limit) {
+            columnSelectedArray.value.splice(
+              0,
+              columnSelectedArray.value.length - props.limit
+            );
+          }
+        } else {
+          columnSelectedArray.value = [data];
+          emit(
+            "update:selectColumnData",
+            JSON.parse(JSON.stringify(columnSelectedArray.value))
+          );
+        }
+      });
+    };
+    const loadColumnTreeNode = async () => {
+      const nodes = await getCategoryCategoriesData();
+      const styleLength = nodes.length > 10 ? 10 : nodes.length;
+      listMinHeight.value = (styleLength + 1) * 32;
+      treeData.value = nodes;
+      if (props.selectColumnData && props.selectColumnData.length) {
+        columnSelectedArray.value = JSON.parse(
+          JSON.stringify(props.selectColumnData)
+        );
+      }
+      if (props.selectColumnWithData && props.selectColumnWithData.length) {
+        columnSelectedArray.value = JSON.parse(
+          JSON.stringify(props.selectColumnWithData)
+        );
+      }
+    };
+    const getCategoryCategoriesData = async () => {
+      const { code, message } = await getCategoryCategoriesTree(props.base_api, {
+        repo_id: props.repository_id
+      });
+      if (code === 0) {
+        return message;
+      }
+      return [];
+    };
+    onMounted(() => {
+      loadColumnTreeNode();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(multipleShowSelectedArray.value, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            class: "column-select"
+          }, [
+            createVNode(unref(Tooltip), {
+              content: item.path,
+              placement: "left"
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  class: normalizeClass(["space", { disabled: popoverShow.value }])
+                }, [
+                  createElementVNode("span", _hoisted_2, toDisplayString(item.path), 1),
+                  createElementVNode("i", {
+                    onClick: withModifiers(($event) => multipleArraySplice(item, index), ["stop"])
+                  }, [
+                    createVNode(unref(IconCloseCircle))
+                  ], 8, _hoisted_3)
+                ], 2)
+              ]),
+              _: 2
+            }, 1032, ["content"])
+          ]);
+        }), 128)) : createCommentVNode("v-if", true),
+        createVNode(unref(Popover), {
+          "content-class": `column-selection-popover`,
+          position: "bottom",
+          trigger: "click",
+          onShow: _cache[0] || (_cache[0] = ($event) => popoverShow.value = true),
+          onHide: leavePopover,
+          onPopupVisibleChange: leavePopover
+        }, {
+          content: withCtx(() => [
+            createElementVNode("div", {
+              class: "column-selection-main",
+              style: normalizeStyle({ minHeight: listMinHeight.value + 1 + "px" })
+            }, [
+              createElementVNode("div", _hoisted_8, [
+                createVNode(unref(Scrollbar), {
+                  class: "column-selection-scroll",
+                  style: normalizeStyle({ height: listMinHeight.value + "px" })
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(Tree), {
+                      checkable: _ctx.multiple,
+                      "check-strictly": true,
+                      data: treeData.value,
+                      "default-expand-all": false,
+                      "field-names": {
+                        children: "children",
+                        title: "title",
+                        key: "id"
+                      },
+                      "checked-keys": columnSelectedArrayIds.value,
+                      onCheck
+                    }, {
+                      extra: withCtx((data) => [
+                        createElementVNode("span", {
+                          class: "custom-tree-node",
+                          onClick: withModifiers(($event) => AddColumnSelected(data), ["stop"])
+                        }, [
+                          createElementVNode("span", null, toDisplayString(data.alias), 1),
+                          !_ctx.multiple && columnSelectedArrayIds.value.includes(data.id) ? (openBlock(), createElementBlock("span", _hoisted_10, [
+                            createElementVNode("i", null, [
+                              createVNode(unref(IconCheck))
+                            ])
+                          ])) : createCommentVNode("v-if", true)
+                        ], 8, _hoisted_9)
+                      ]),
+                      _: 1
+                    }, 8, ["checkable", "data", "checked-keys"])
+                  ]),
+                  _: 1
+                }, 8, ["style"])
+              ])
+            ], 4)
+          ]),
+          default: withCtx(() => [
+            _ctx.multiple ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createCommentVNode(" \u591A\u9009 "),
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("i", null, [
+                  createVNode(unref(IconPlus))
+                ]),
+                createTextVNode(" " + toDisplayString(_ctx.addText ? _ctx.addText : "\u6DFB\u52A0\u680F\u76EE"), 1)
+              ])
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createCommentVNode(" \u5355\u9009 "),
+              createElementVNode("div", _hoisted_5, [
+                !columnSelectedArray.value.length ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.addText ? _ctx.addText : "\u8BF7\u9009\u62E9"), 1)) : (openBlock(), createBlock(unref(Tooltip), {
+                  key: 1,
+                  content: columnSelectedArray.value[0].path,
+                  placement: "left"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("span", _hoisted_7, "\u5DF2\u9009\uFF1A" + toDisplayString(columnSelectedArray.value[0].path), 1)
+                  ]),
+                  _: 1
+                }, 8, ["content"]))
+              ])
+            ], 64))
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/selectGategory/index.d.ts

@@ -0,0 +1,2 @@
+declare const selectGategory: any;
+export default selectGategory;

package/es/selectGategory/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./component.js";
+const selectGategory = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.component(_sfc_main.name, _sfc_main);
+  }
+});
+export { selectGategory as default };

package/es/selectGategory/script/api.d.ts

@@ -0,0 +1,6 @@
+interface Params {
+    [key: string]: any;
+}
+export declare function getCategoryPath(BASE_API: string, params: Params): import("axios").AxiosPromise<any>;
+export declare function getCategoryCategoriesTree(BASE_API: string, params?: Params): import("axios").AxiosPromise<any>;
+export {};

package/es/selectGategory/script/api.js

@@ -0,0 +1,15 @@
+import request from "../../utils/request.js";
+function getCategoryPath(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v2/repo/${params.repo}/category/${params.category}/path`,
+    method: "get"
+  });
+}
+function getCategoryCategoriesTree(BASE_API, params) {
+  return request(BASE_API, {
+    url: `/poplar/v3/categories`,
+    method: "get",
+    params
+  });
+}
+export { getCategoryCategoriesTree, getCategoryPath };

package/es/selectGategory/style/ColumnSelection.less

@@ -0,0 +1,190 @@
+.column-selection-container {
+  padding: 0;
+  cursor: pointer;
+  @mixin ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &.single {
+    .column-select {
+      position: relative;
+      max-width: 250px;
+      padding-right: 35px;
+      font-weight: 500;
+
+      .right-icon {
+        position: absolute;
+        top: 7px;
+        right: 15px;
+      }
+
+      &.add {
+        color: #86909c;
+        text-align: center;
+        background: #f3f4f5;
+        border: none;
+      }
+
+      &.value {
+        color: #4886ff;
+        background: #edf3ff;
+      }
+
+      &.long {
+        padding-right: 90px;
+
+        .longTip {
+          position: absolute;
+          right: 35px;
+        }
+      }
+    }
+  }
+
+  .column-select {
+    height: 28px;
+    padding: 0 10px;
+    font-size: 14px;
+    line-height: 28px;
+    border: 1px solid #e8e8e8;
+    border-bottom: none;
+
+    .space {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #4e5969;
+
+      &.disabled {
+        opacity: 0.3;
+        pointer-events: none;
+      }
+    }
+
+    .label {
+      @include ellipsis;
+    }
+
+    &.add {
+      @include ellipsis;
+
+      color: #86909c;
+      text-align: center;
+      background: #f3f4f5;
+      border: 1px solid #e8e8e8;
+      border-radius: 2px;
+
+      .label {
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.column-selection-popover {
+  width: 300px;
+
+  &.single {
+    width: 180px;
+  }
+
+  padding: 0;
+
+  .column-selection-main {
+    transition: all 0.3s;
+
+    .arco-scrollbar {
+      .column-selection-scroll {
+        overflow: auto;
+
+        .arco-tree {
+          .arco-tree-node {
+            position: relative;
+            height: 36px;
+            line-height: 36px;
+
+            .custom-tree-node {
+              width: 100%;
+            }
+
+            span {
+              vertical-align: middle;
+            }
+
+            .add-icon {
+              position: absolute;
+              right: 10px;
+              color: #4886ff;
+
+              i {
+                font-size: 16px;
+              }
+            }
+
+            &:hover {
+              background-color: rgba(0, 0, 0, 0.05) !important;
+
+              .add-icon {
+                i {
+                  display: inline-block;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .selected-list {
+      position: relative;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      border-top: 1px solid #f3f4f5;
+
+      .title {
+        height: 28px;
+        padding: 0 40px 0 24px;
+        color: #86909c;
+        line-height: 28px;
+        background: #f3f4f5;
+      }
+
+      .truncate {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      li {
+        height: 36px;
+        padding: 0 40px 0 24px;
+        line-height: 36px;
+
+        .item {
+          width: calc(100% - 10px);
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        i {
+          position: absolute;
+          right: 10px;
+          display: inline-block;
+          color: rgba(0, 0, 0, 0.56);
+          font-size: 14px;
+          font-family: PingFangSC-Regular;
+          cursor: pointer;
+        }
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.05);
+        }
+      }
+    }
+  }
+}

package/es/selectGategory/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/selectGategory/style/index.css

@@ -0,0 +1,180 @@
+.column-selection-container {
+  padding: 0;
+  cursor: pointer;
+}
+@mixin ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.column-selection-container.single .column-select {
+  position: relative;
+  max-width: 250px;
+  padding-right: 35px;
+  font-weight: 500;
+}
+.column-selection-container.single .column-select .right-icon {
+  position: absolute;
+  top: 7px;
+  right: 15px;
+}
+.column-selection-container.single .column-select.add {
+  color: #86909c;
+  text-align: center;
+  background: #f3f4f5;
+  border: none;
+}
+.column-selection-container.single .column-select.value {
+  color: #4886ff;
+  background: #edf3ff;
+}
+.column-selection-container.single .column-select.long {
+  padding-right: 90px;
+}
+.column-selection-container.single .column-select.long .longTip {
+  position: absolute;
+  right: 35px;
+}
+.column-selection-container .column-select {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 14px;
+  line-height: 28px;
+  border: 1px solid #e8e8e8;
+  border-bottom: none;
+}
+.column-selection-container .column-select .space {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #4e5969;
+}
+.column-selection-container .column-select .space.disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+.column-selection-container .column-select .label {
+  @include ellipsis;
+}
+.column-selection-container .column-select.add {
+  @include ellipsis;
+  color: #86909c;
+  text-align: center;
+  background: #f3f4f5;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+}
+.column-selection-container .column-select.add .label {
+  font-weight: 700;
+}
+.column-selection-popover {
+  width: 300px;
+  padding: 0;
+}
+.column-selection-popover.single {
+  width: 180px;
+}
+.column-selection-popover .column-selection-main {
+  transition: all 0.3s;
+}
+.column-selection-popover .column-selection-main .arco-scrollbar .column-selection-scroll {
+  overflow: auto;
+}
+.column-selection-popover .column-selection-main .arco-scrollbar .column-selection-scroll .arco-tree .arco-tree-node {
+  position: relative;
+  height: 36px;
+  line-height: 36px;
+}
+.column-selection-popover .column-selection-main .arco-scrollbar .column-selection-scroll .arco-tree .arco-tree-node .custom-tree-node {
+  width: 100%;
+}
+.column-selection-popover .column-selection-main .arco-scrollbar .column-selection-scroll .arco-tree .arco-tree-node span {
+  vertical-align: middle;
+}
+.column-selection-popover .column-selection-main .arco-scrollbar .column-selection-scroll .arco-tree .arco-tree-node .add-icon {
+  position: absolute;
+  right: 10px;
+  color: #4886ff;
+}
+.column-selection-popover .column-selection-main .arco-scrollbar .column-selection-scroll .arco-tree .arco-tree-node .add-icon i {
+  font-size: 16px;
+}
+.column-selection-popover .column-selection-main .arco-scrollbar .column-selection-scroll .arco-tree .arco-tree-node:hover {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+}
+.column-selection-popover .column-selection-main .arco-scrollbar .column-selection-scroll .arco-tree .arco-tree-node:hover .add-icon i {
+  display: inline-block;
+}
+.column-selection-popover .column-selection-main .selected-list {
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-top: 1px solid #f3f4f5;
+}
+.column-selection-popover .column-selection-main .selected-list .title {
+  height: 28px;
+  padding: 0 40px 0 24px;
+  color: #86909c;
+  line-height: 28px;
+  background: #f3f4f5;
+}
+.column-selection-popover .column-selection-main .selected-list .truncate {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.column-selection-popover .column-selection-main .selected-list li {
+  height: 36px;
+  padding: 0 40px 0 24px;
+  line-height: 36px;
+}
+.column-selection-popover .column-selection-main .selected-list li .item {
+  width: calc(100% - 10px);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.column-selection-popover .column-selection-main .selected-list li i {
+  position: absolute;
+  right: 10px;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.56);
+  font-size: 14px;
+  font-family: PingFangSC-Regular;
+  cursor: pointer;
+}
+.column-selection-popover .column-selection-main .selected-list li:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.add-category-modal-wrapper .arco-modal-header {
+  border-bottom: none;
+}
+.add-category-modal-wrapper .arco-modal-body {
+  min-height: 200px;
+  padding: 20px;
+  padding-bottom: 0;
+}
+.add-category-modal-wrapper .arco-modal-body .form-view {
+  padding: 0 20px;
+}
+.add-category-modal-wrapper .arco-modal-body .form-view .title {
+  padding: 20px 0;
+  font-weight: bold;
+  font-size: 14px;
+}
+.add-category-modal-wrapper .arco-modal-body .form-view .item-title {
+  display: inline-block;
+  color: #4e5969;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 40px;
+  text-align: left;
+}
+.add-category-modal-wrapper .arco-modal-body .form-view .item-title.big {
+  line-height: 60px;
+}
+.add-category-modal-wrapper .arco-modal-footer {
+  border-top: 0;
+}

package/es/selectGategory/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/selectGategory/style/index.js

@@ -0,0 +1 @@
+import "./index.less";