@fmdevui/fm-dev 1.0.76 → 1.0.77

package/lib/packages/core/ui/components/selecttable/renderCol.vue.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var renderCol_vue_vue_type_script_setup_true_lang = require('./renderCol.vue2.js');
+
+
+
+exports.default = renderCol_vue_vue_type_script_setup_true_lang.default;

package/lib/packages/core/ui/components/selecttable/renderCol.vue2.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "RenderCol"
+  },
+  __name: "renderCol",
+  props: {
+    row: Object,
+    render: Function,
+    index: Number,
+    column: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const renderComponent = () => {
+      return props.render(props?.row[props?.column?.prop], props.row, props.index);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent));
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/packages/core/ui/components/selecttable/style/css.js

@@ -0,0 +1,4 @@
+'use strict';
+
+require('fm-dev/theme-chalk/t-select-table.css');
+

package/lib/packages/core/ui/components/selecttable/style/index.js

@@ -0,0 +1,4 @@
+'use strict';
+
+require('fm-dev/theme-chalk/src/select-table.scss');
+

package/lib/packages/core/ui/components/selecttable/type.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/packages/core/ui/components/selecttable/useVirtualized.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var vue = require('vue');
+
+function useVirtualized() {
+  const actualHeightContainerEl = vue.ref(null);
+  const translateContainerEl = vue.ref(null);
+  const scrollContainerEl = vue.ref(null);
+  const isMultiple = vue.ref(false);
+  const saveDATA = vue.ref([]);
+  const RenderedItemsCache = {};
+  const getDom = (props) => {
+    const getElements = (className) => {
+      actualHeightContainerEl.value = document.querySelector(`${className} .el-scrollbar__view`);
+      translateContainerEl.value = document.querySelector(`${className} .el-table__body`);
+      scrollContainerEl.value = document.querySelector(`${className} .el-scrollbar__wrap`);
+    };
+    isMultiple.value = props.multiple;
+    if (props.multiple) {
+      getElements(".fm_select_table_multiple");
+    } else {
+      getElements(".fm_select_table_radio");
+    }
+  };
+  const getItemHeightFromCache = (index) => {
+    const val = RenderedItemsCache[index];
+    return val === void 0 ? 50 : val;
+  };
+  const updateActualHeight = () => {
+    let actualHeight = 0;
+    saveDATA.value.forEach((_, i) => {
+      actualHeight += getItemHeightFromCache(i);
+    });
+    actualHeightContainerEl.value.style.height = actualHeight + "px";
+  };
+  const updateOffset = (offset) => {
+    if (translateContainerEl.value && translateContainerEl.value.style) {
+      translateContainerEl.value.style.transform = `translateY(${offset}px)`;
+    }
+  };
+  const updateRenderedItemCache = (index) => {
+    const shouldUpdate = Object.keys(RenderedItemsCache).length < saveDATA.value.length;
+    if (!shouldUpdate) return;
+    vue.nextTick(() => {
+      const Items = Array.from(
+        document.querySelectorAll(
+          `${isMultiple.value ? `.fm_select_table_multiple` : `.fm_select_table_radio`} .el-table__row`
+        )
+      );
+      Items.forEach((el) => {
+        if (!RenderedItemsCache[index]) {
+          RenderedItemsCache[index] = el.offsetHeight;
+        }
+        index++;
+      });
+      updateActualHeight();
+    });
+  };
+  return {
+    scrollContainerEl,
+    updateRenderedItemCache,
+    updateOffset,
+    getDom,
+    getItemHeightFromCache,
+    saveDATA
+  };
+}
+
+exports.useVirtualized = useVirtualized;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fmdevui/fm-dev",
-  "version": "1.0.76",
+  "version": "1.0.77",
   "description": "Page level components developed based on Element Plus.",
   "author": "fmdevui",
   "keywords": [

package/theme-chalk/src/query-condition.scss

@@ -0,0 +1,118 @@
+.fm-query-condition.el-form {
+  position: relative;
+  display: grid;
+  gap: 2px 8px;
+  margin-bottom: -7px;
+  text-align: left;
+
+  .el-select,
+  .el-date-editor,
+  .ant-calendar-picker {
+    width: 100%;
+  }
+
+  .flex_end {
+    grid-area: submit_btn;
+    margin-top: 2px;
+
+    .el-form-item__content {
+      display: flex;
+      // justify-content: flex-end;
+      align-items: center;
+      overflow: visible !important;
+    }
+  }
+
+  .btn {
+    .el-form-item__content {
+      display: flex;
+      // justify-content: flex-end;
+    }
+
+    .more_dropdown_icon {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+
+  .btn_flex_end {
+    .el-form-item__content {
+      justify-content: flex-end;
+    }
+  }
+
+  .el-form-item {
+    display: flex;
+    margin-bottom: 6px;
+
+    .el-form-item__label {
+      flex-shrink: 0;
+      min-width: 60px;
+      padding-left: 8px;
+    }
+
+    .el-form-item__content {
+      flex-grow: 1;
+      // overflow: hidden;
+      margin-left: 0 !important;
+    }
+  }
+
+  .render_label {
+    .el-form-item__label {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      &::before {
+        margin-top: 1px;
+      }
+    }
+  }
+
+  .btn_check {
+    position: relative;
+    top: -1px;
+  }
+
+  .btn_reset {
+    position: relative;
+    top: -1px;
+    margin-left: 8px;
+  }
+}
+
+.fm_query_condition_more.el-popover {
+  padding: 15px;
+
+  .inside_box {
+    display: flex;
+    flex-direction: column;
+
+    .inside_box_title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .inside_box_main {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(100px, 50%));
+
+      .el-checkbox {
+        display: flex;
+        align-items: center;
+
+        .el-checkbox__label {
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          min-width: 90px;
+        }
+      }
+    }
+  }
+}

package/theme-chalk/src/select-table.scss

@@ -0,0 +1,71 @@
+.fm-select-table {
+  // 单选样式
+  .radioStyle {
+    .el-radio {
+      .el-radio__label {
+        display: none;
+      }
+      &:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
+        box-shadow: none;
+      }
+    }
+    .el-table__row {
+      cursor: pointer;
+    }
+  }
+  // 键盘事件开启选择高亮
+  .keyUpStyle {
+    .el-table__body {
+      tbody {
+        .current-row {
+          color: var(--el-color-primary) !important;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  // 键盘事件开启选中行样式
+  .selected_row_style {
+    color: var(--el-color-primary);
+    cursor: pointer;
+  }
+  // 选中行样式
+  .highlightCurrentRow {
+    .current-row {
+      color: var(--el-color-primary);
+      cursor: pointer;
+    }
+  }
+  .fm-table-select__table {
+    padding: 10px;
+
+    .el-table__body,
+    .el-table__header {
+      margin: 0;
+    }
+    // 条件查询组件样式
+    .table_query_condition {
+      width: 100%;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding: 10px;
+    }
+    .header_wrap {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .fm-table-select__page {
+    padding-top: 5px;
+    padding-right: 10px;
+    .el-pagination {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-right: calc(2% - 20px);
+      background-color: var(--el-table-tr-bg-color);
+    }
+  }
+}

package/theme-chalk/t-query-condition.css

@@ -0,0 +1 @@
+.fm-query-condition.el-form{display:grid;gap:2px 8px;margin-bottom:-7px;position:relative;text-align:left}.fm-query-condition.el-form .ant-calendar-picker,.fm-query-condition.el-form .el-date-editor,.fm-query-condition.el-form .el-select{width:100%}.fm-query-condition.el-form .flex_end{grid-area:submit_btn;margin-top:2px}.fm-query-condition.el-form .flex_end .el-form-item__content{align-items:center;display:flex;overflow:visible!important}.fm-query-condition.el-form .btn .el-form-item__content{display:flex}.fm-query-condition.el-form .btn .more_dropdown_icon{cursor:pointer;margin-left:10px}.fm-query-condition.el-form .btn_flex_end .el-form-item__content{justify-content:flex-end}.fm-query-condition.el-form .el-form-item{display:flex;margin-bottom:6px}.fm-query-condition.el-form .el-form-item .el-form-item__label{flex-shrink:0;min-width:60px;padding-left:8px}.fm-query-condition.el-form .el-form-item .el-form-item__content{flex-grow:1;margin-left:0!important}.fm-query-condition.el-form .render_label .el-form-item__label{align-items:center;cursor:pointer;display:flex;justify-content:flex-end}.fm-query-condition.el-form .render_label .el-form-item__label:before{margin-top:1px}.fm-query-condition.el-form .btn_check{position:relative;top:-1px}.fm-query-condition.el-form .btn_reset{margin-left:8px;position:relative;top:-1px}.fm_query_condition_more.el-popover{padding:15px}.fm_query_condition_more.el-popover .inside_box{display:flex;flex-direction:column}.fm_query_condition_more.el-popover .inside_box .inside_box_title{align-items:center;display:flex;justify-content:space-between}.fm_query_condition_more.el-popover .inside_box .inside_box_main{display:grid;grid-template-columns:repeat(2,minmax(100px,50%))}.fm_query_condition_more.el-popover .inside_box .inside_box_main .el-checkbox{align-items:center;display:flex}.fm_query_condition_more.el-popover .inside_box .inside_box_main .el-checkbox .el-checkbox__label{box-sizing:border-box;min-width:90px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}

package/theme-chalk/t-select-table.css

@@ -0,0 +1 @@
+.fm-select-table .radioStyle .el-radio .el-radio__label{display:none}.fm-select-table .radioStyle .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner{box-shadow:none}.fm-select-table .radioStyle .el-table__row{cursor:pointer}.fm-select-table .keyUpStyle .el-table__body tbody .current-row{color:var(--el-color-primary)!important;cursor:pointer}.fm-select-table .highlightCurrentRow .current-row,.fm-select-table .selected_row_style{color:var(--el-color-primary);cursor:pointer}.fm-select-table .fm-table-select__table{padding:10px}.fm-select-table .fm-table-select__table .el-table__body,.fm-select-table .fm-table-select__table .el-table__header{margin:0}.fm-select-table .fm-table-select__table .table_query_condition{overflow-x:auto;overflow-y:hidden;padding:10px;width:100%}.fm-select-table .fm-table-select__table .header_wrap{align-items:center;display:flex;justify-content:flex-end}.fm-select-table .fm-table-select__page{padding-right:10px;padding-top:5px}.fm-select-table .fm-table-select__page .el-pagination{align-items:center;background-color:var(--el-table-tr-bg-color);display:flex;justify-content:flex-end;margin-right:calc(2% - 20px)}