yc-pro-components 0.0.19 → 0.0.21

package/es/components/yc-plus-page/src/header-filter-cell.vue2.mjs

@@ -0,0 +1,354 @@
+import { defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode, createElementVNode, withModifiers, createBlock, resolveDynamicComponent, Fragment, createTextVNode, toDisplayString, createVNode, unref, withCtx, renderList, normalizeStyle, h } from 'vue';
+import { ElIcon, ElPopover, ElButton, ElTimePicker, ElTimeSelect, ElDatePicker, ElInput } from 'element-plus';
+import { CaretTop, CaretBottom, Filter } from '@element-plus/icons-vue';
+import { NO_VALUE_OPERATORS } from './constants.mjs';
+
+const _hoisted_1 = {
+  class: "yc-header-filter-cell__sort",
+  style: {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    lineHeight: 1
+  }
+};
+const _hoisted_2 = {
+  class: "yc-header-filter-cell__content",
+  style: {
+    display: "flex",
+    flexDirection: "column",
+    padding: "8px",
+    minWidth: "180px",
+    gap: "6px"
+  }
+};
+const _hoisted_3 = { class: "yc-header-filter-cell__operators" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { key: 0 };
+const _hoisted_6 = {
+  class: "yc-header-filter-cell__actions",
+  style: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "6px"
+  }
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "YcTableHeaderFilterCell"
+  },
+  __name: "header-filter-cell",
+  props: {
+    label: {},
+    column: {},
+    operators: { default: () => [] },
+    filters: { default: () => [] },
+    orderBy: { default: () => [] },
+    disableFilter: { type: Boolean, default: false },
+    referenceRenderer: { type: Function, default: void 0 }
+  },
+  emits: ["confirm", "reset", "sortChange"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const state = reactive({
+      selectedOp: "=",
+      inputVal: ""
+    });
+    const popVisible = ref(false);
+    const wrapperElRef = ref(null);
+    const operatorsList = computed(() => props.operators);
+    watch(
+      operatorsList,
+      (list) => {
+        var _a;
+        const firstCode = (_a = list == null ? void 0 : list[0]) == null ? void 0 : _a.code;
+        if (!Array.isArray(list)) return;
+        if (!list.some((op) => op.code === state.selectedOp)) {
+          state.selectedOp = firstCode != null ? firstCode : "=";
+        }
+      },
+      { immediate: true }
+    );
+    const fieldRef = computed(() => {
+      var _a;
+      return String(((_a = props.column) == null ? void 0 : _a.prop) || "");
+    });
+    const isActive = computed(() => {
+      var _a, _b;
+      const field = fieldRef.value;
+      return (_b = (_a = props.filters) == null ? void 0 : _a.some((i) => String(i.field) === field)) != null ? _b : false;
+    });
+    const isAscActive = computed(
+      () => {
+        var _a;
+        return (_a = props.orderBy) == null ? void 0 : _a.some((i) => i.field === fieldRef.value && i.direction === "asc");
+      }
+    );
+    const isDescActive = computed(
+      () => {
+        var _a;
+        return (_a = props.orderBy) == null ? void 0 : _a.some((i) => i.field === fieldRef.value && i.direction === "desc");
+      }
+    );
+    const onDocPointerOrClick = (e) => {
+      if (!popVisible.value) return;
+      const target = e.target;
+      const wrapper = wrapperElRef.value;
+      if (target && ((wrapper == null ? void 0 : wrapper.contains(target)) || target.closest(".yc-header-filter-pop"))) return;
+      popVisible.value = false;
+    };
+    onMounted(() => {
+      window.addEventListener("pointerdown", onDocPointerOrClick, true);
+      window.addEventListener("click", onDocPointerOrClick, true);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("pointerdown", onDocPointerOrClick, true);
+      window.removeEventListener("click", onDocPointerOrClick, true);
+    });
+    const handleSelect = (op) => {
+      state.selectedOp = op.code;
+    };
+    const handleReset = () => {
+      state.inputVal = "";
+      emit("reset", { column: props.column, op: state.selectedOp });
+      popVisible.value = false;
+    };
+    const handleConfirm = () => {
+      emit("confirm", {
+        column: props.column,
+        op: state.selectedOp,
+        value: state.inputVal
+      });
+      popVisible.value = false;
+    };
+    const toggleAsc = () => {
+      const field = fieldRef.value;
+      emit("sortChange", { field, direction: isAscActive.value ? void 0 : "asc" });
+    };
+    const toggleDesc = () => {
+      const field = fieldRef.value;
+      emit("sortChange", { field, direction: isDescActive.value ? void 0 : "desc" });
+    };
+    const cycleSort = () => {
+      const field = fieldRef.value;
+      if (!field) return;
+      if (isDescActive.value) {
+        emit("sortChange", { field, direction: "asc" });
+      } else if (isAscActive.value) {
+        emit("sortChange", { field, direction: void 0 });
+      } else {
+        emit("sortChange", { field, direction: "desc" });
+      }
+    };
+    const needValueInput = computed(() => {
+      return !NO_VALUE_OPERATORS.includes(state.selectedOp);
+    });
+    const renderValueField = () => {
+      var _a, _b, _c, _d, _e;
+      if (!needValueInput.value) return null;
+      const vt = String(((_a = props.column) == null ? void 0 : _a.valueType) || "").toLowerCase();
+      const fp = ((_b = props.column) == null ? void 0 : _b.fieldProps) || {};
+      if (vt === "time-picker") {
+        return h(ElTimePicker, {
+          ...fp,
+          format: (_c = fp == null ? void 0 : fp.format) != null ? _c : "HH:mm:ss",
+          valueFormat: (_d = fp == null ? void 0 : fp.valueFormat) != null ? _d : "HH:mm:ss",
+          modelValue: state.inputVal,
+          "onUpdate:modelValue": (v) => state.inputVal = String(v != null ? v : ""),
+          style: "margin-top: 4px; width: 100%"
+        });
+      }
+      if (vt === "time-select") {
+        return h(ElTimeSelect, {
+          ...fp,
+          modelValue: state.inputVal,
+          "onUpdate:modelValue": (v) => {
+            const raw = String(v != null ? v : "");
+            const nv = raw && /^\d{2}:\d{2}$/.test(raw) ? `${raw}:00` : raw;
+            state.inputVal = nv;
+          },
+          style: "margin-top: 4px; width: 100%"
+        });
+      }
+      if (vt === "date-picker") {
+        return h(ElDatePicker, {
+          ...fp,
+          valueFormat: (_e = fp == null ? void 0 : fp.valueFormat) != null ? _e : "YYYY-MM-DD HH:mm:ss",
+          modelValue: state.inputVal,
+          "onUpdate:modelValue": (v) => {
+            const nv = Array.isArray(v) ? v.join(",") : String(v != null ? v : "");
+            state.inputVal = nv;
+          },
+          style: "margin-top: 4px; width: 100%"
+        });
+      }
+      return h(ElInput, {
+        modelValue: state.inputVal,
+        "onUpdate:modelValue": (v) => state.inputVal = v,
+        placeholder: "",
+        style: "margin-top: 4px; width: 100%"
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          ref_key: "wrapperElRef",
+          ref: wrapperElRef,
+          class: "yc-header-filter-cell",
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "6px",
+            cursor: "default"
+          }
+        },
+        [
+          createCommentVNode(" \u6807\u7B7E\u5185\u5BB9 "),
+          createElementVNode("span", {
+            class: "yc-header-filter-cell__label",
+            style: {
+              userSelect: "none",
+              cursor: "pointer"
+            },
+            onClick: withModifiers(cycleSort, ["stop"])
+          }, [
+            _ctx.referenceRenderer ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.referenceRenderer), { key: 0 })) : (openBlock(), createElementBlock(
+              Fragment,
+              { key: 1 },
+              [
+                createTextVNode(
+                  toDisplayString(_ctx.label),
+                  1
+                  /* TEXT */
+                )
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ]),
+          createCommentVNode(" \u6392\u5E8F\u56FE\u6807 "),
+          createElementVNode("span", _hoisted_1, [
+            createVNode(unref(ElIcon), {
+              size: 12,
+              color: isAscActive.value ? "var(--el-color-primary)" : "var(--el-text-color-secondary)",
+              style: { cursor: "pointer" },
+              onClick: withModifiers(toggleAsc, ["stop"])
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(CaretTop))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["color"]),
+            createVNode(unref(ElIcon), {
+              size: 12,
+              color: isDescActive.value ? "var(--el-color-primary)" : "var(--el-text-color-secondary)",
+              style: { cursor: "pointer", marginTop: "-5px" },
+              onClick: withModifiers(toggleDesc, ["stop"])
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(CaretBottom))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["color"])
+          ]),
+          createCommentVNode(" \u7B5B\u9009\u56FE\u6807\u548C\u5F39\u7A97 "),
+          !_ctx.disableFilter ? (openBlock(), createBlock(unref(ElPopover), {
+            key: 0,
+            trigger: "click",
+            placement: "bottom-start",
+            width: 220,
+            visible: popVisible.value,
+            "popper-class": "yc-header-filter-pop",
+            "popper-style": { zIndex: 4e3 }
+          }, {
+            reference: withCtx(() => [
+              createVNode(unref(ElIcon), {
+                size: 16,
+                color: isActive.value ? "var(--el-color-primary)" : "var(--el-text-color-secondary)",
+                style: { cursor: "pointer" },
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => popVisible.value = !popVisible.value, ["stop"]))
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Filter))
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["color"])
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_2, [
+                createCommentVNode(" \u64CD\u4F5C\u7B26\u5217\u8868 "),
+                createElementVNode("div", _hoisted_3, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(operatorsList.value, (op) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: op.code,
+                        class: "yc-header-filter-cell__operator-item",
+                        style: normalizeStyle({
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          padding: "6px 8px",
+                          borderRadius: "4px",
+                          background: state.selectedOp === op.code ? "var(--el-color-primary-light-9)" : "transparent",
+                          color: state.selectedOp === op.code ? "var(--el-color-primary)" : "inherit",
+                          cursor: "pointer"
+                        }),
+                        onClick: ($event) => handleSelect(op)
+                      }, [
+                        createElementVNode(
+                          "span",
+                          null,
+                          toDisplayString(op.label),
+                          1
+                          /* TEXT */
+                        ),
+                        state.selectedOp === op.code ? (openBlock(), createElementBlock("span", _hoisted_5, "\u2713")) : createCommentVNode("v-if", true)
+                      ], 12, _hoisted_4);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                createCommentVNode(" \u503C\u8F93\u5165 "),
+                needValueInput.value ? (openBlock(), createBlock(resolveDynamicComponent(renderValueField), { key: 0 })) : createCommentVNode("v-if", true),
+                createCommentVNode(" \u64CD\u4F5C\u6309\u94AE "),
+                createElementVNode("div", _hoisted_6, [
+                  createVNode(unref(ElButton), { onClick: handleReset }, {
+                    default: withCtx(() => [
+                      createTextVNode("\u91CD\u7F6E")
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }),
+                  createVNode(unref(ElButton), {
+                    type: "primary",
+                    onClick: handleConfirm
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("\u786E\u5B9A")
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["visible"])) : createCommentVNode("v-if", true)
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };