@opensig/opendesign/lib/data-table/TableColumnFilter.vue.js

"use strict";
const vue = require("vue");
const core = require("@vueuse/core");
const index$1 = require("../button/index.js");
const index$5 = require("../popup/index.js");
const index$4 = require("../dialog/index.js");
require("../icon-components/OIconZoomOut/OIconZoomOut.vue2.js");
require("../icon-components/OIconZoomIn/OIconZoomIn.vue2.js");
require("../icon-components/OIconVideoPlay/OIconVideoPlay.vue2.js");
require("../icon-components/OIconTime/OIconTime.vue2.js");
require("../icon-components/OIconStar/OIconStar.vue2.js");
const OIconSearch = require("../icon-components/OIconSearch/OIconSearch.vue.js");
require("../icon-components/OIconRefresh/OIconRefresh.vue2.js");
require("../icon-components/OIconOneToOne/OIconOneToOne.vue2.js");
require("../icon-components/OIconMinus/OIconMinus.vue2.js");
require("../icon-components/OIconLoading/OIconLoading.vue2.js");
require("../icon-components/OIconLoadingSmall/OIconLoadingSmall.vue2.js");
require("../icon-components/OIconLink/OIconLink.vue2.js");
require("../icon-components/OIconInfoTip/OIconInfoTip.vue2.js");
require("../icon-components/OIconImgError/OIconImgError.vue2.js");
require("../icon-components/OIconImageError/OIconImageError.vue2.js");
const OIconFilter = require("../icon-components/OIconFilter/OIconFilter.vue.js");
require("../icon-components/OIconFile/OIconFile.vue2.js");
require("../icon-components/OIconEye/OIconEye.vue2.js");
require("../icon-components/OIconEyeOff/OIconEyeOff.vue2.js");
require("../icon-components/OIconEllipsis/OIconEllipsis.vue2.js");
require("../icon-components/OIconEdit/OIconEdit.vue2.js");
require("../icon-components/OIconDownload/OIconDownload.vue2.js");
require("../icon-components/OIconDoubleArrowUp/OIconDoubleArrowUp.vue2.js");
require("../icon-components/OIconDoubleArrowRight/OIconDoubleArrowRight.vue2.js");
require("../icon-components/OIconDoubleArrowLeft/OIconDoubleArrowLeft.vue2.js");
require("../icon-components/OIconDoubleArrowDown/OIconDoubleArrowDown.vue2.js");
require("../icon-components/OIconDone/OIconDone.vue2.js");
require("../icon-components/OIconDelete/OIconDelete.vue2.js");
require("../icon-components/OIconClose/OIconClose.vue2.js");
require("../icon-components/OIconChevronUp/OIconChevronUp.vue2.js");
require("../icon-components/OIconChevronRight/OIconChevronRight.vue2.js");
require("../icon-components/OIconChevronRightSmall/OIconChevronRightSmall.vue2.js");
require("../icon-components/OIconChevronLeft/OIconChevronLeft.vue2.js");
require("../icon-components/OIconChevronDown/OIconChevronDown.vue2.js");
require("../icon-components/OIconChevronDownBold/OIconChevronDownBold.vue2.js");
require("../icon-components/OIconChecked/OIconChecked.vue2.js");
require("../icon-components/OIconCaretUp/OIconCaretUp.vue2.js");
require("../icon-components/OIconCaretRight/OIconCaretRight.vue2.js");
require("../icon-components/OIconCaretLeft/OIconCaretLeft.vue2.js");
require("../icon-components/OIconCaretDown/OIconCaretDown.vue2.js");
require("../icon-components/OIconCalendar/OIconCalendar.vue2.js");
require("../icon-components/OIconAvatar/OIconAvatar.vue2.js");
require("../icon-components/OIconArrowUp/OIconArrowUp.vue2.js");
require("../icon-components/OIconArrowRight/OIconArrowRight.vue2.js");
require("../icon-components/OIconArrowLeft/OIconArrowLeft.vue2.js");
require("../icon-components/OIconArrowDown/OIconArrowDown.vue2.js");
require("../icon-components/OIconAdd/OIconAdd.vue2.js");
require("../icon-components/OIconWarning/OIconWarning.vue2.js");
require("../icon-components/OIconSun/OIconSun.vue2.js");
require("../icon-components/OIconSuccess/OIconSuccess.vue2.js");
require("../icon-components/OIconSort/OIconSort.vue2.js");
require("../icon-components/OIconSkill/OIconSkill.vue2.js");
require("../icon-components/OIconNoData/OIconNoData.vue2.js");
require("../icon-components/OIconMoon/OIconMoon.vue2.js");
require("../icon-components/OIconKunpeng/OIconKunpeng.vue2.js");
require("../icon-components/OIconInfo/OIconInfo.vue2.js");
require("../icon-components/OIconExclamationMark/OIconExclamationMark.vue2.js");
require("../icon-components/OIconDanger/OIconDanger.vue2.js");
require("../icon-components/OIconCheckMark/OIconCheckMark.vue2.js");
require("../icon-components/OIconAscend/OIconAscend.vue2.js");
const index$6 = require("../divider/index.js");
const index$7 = require("../link/index.js");
const index$3 = require("../option/index.js");
const index$2 = require("../input/index.js");
const index = require("../locale/index.js");
const is = require("../_utils/is.js");
const provide = require("../select/provide.js");
require("../hooks/use-theme.js");
const useScreen = require("../hooks/use-screen.js");
const types = require("./types.js");
const OOptionList_vue_vue_type_script_setup_true_lang = require("../option/OOptionList.vue.js");
const _hoisted_1 = {
  key: 0,
  class: "o-data-table-column-filter__input-container"
};
const _hoisted_2 = { class: "o-data-table-column-filter__options-container" };
const _hoisted_3 = {
  key: 1,
  class: "o-data-table-column-filter__empty"
};
const _hoisted_4 = { class: "o-data-table-column-filter-options-head" };
const _hoisted_5 = { class: "o-data-table-column-filter__footer" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "TableColumnFilter",
  props: /* @__PURE__ */ vue.mergeModels({
    column: {},
    disabled: { type: Boolean }
  }, {
    "modelValue": { default: () => vue.reactive([]) },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ vue.mergeModels(["confirm"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const modelValue = vue.useModel(__props, "modelValue");
    const [DefineBodyTemplate, ReuseBodyTemplate] = core.createReusableTemplate();
    const targetIconRef = vue.ref();
    const { t } = index.useI18n();
    const { isPhonePadSize } = useScreen.useScreen();
    const tempValue = vue.ref([]);
    const options = vue.ref([]);
    vue.onMounted(async () => {
      var _a, _b;
      options.value = await ((_b = (_a = props.column.filter) == null ? void 0 : _a.optionsFn) == null ? void 0 : _b.call(_a, {
        column: props.column,
        emptyOption: { label: t("table.filterEmptyOption"), value: types.TABLE_EMPTY_OPTION_VALUE }
      })) || [];
    });
    const filterKeywords = vue.ref("");
    const showOptions = vue.computed(() => {
      return filterKeywords.value ? options.value.filter((v) => v.label.toLocaleLowerCase().includes(filterKeywords.value.toLocaleLowerCase())) : [...options.value];
    });
    const visible = vue.ref(false);
    vue.watch(visible, () => {
      var _a;
      tempValue.value = [...modelValue.value];
      if (tempValue.value.length === options.value.length || ((_a = props.column.filter) == null ? void 0 : _a.multiple) === false && !tempValue.value.length) {
        tempValue.value.push(types.TABLE_ALL_OPTION_VALUE);
      }
    });
    const toExcludeAllOption = (arr) => vue.toValue(arr).filter((v) => v !== types.TABLE_ALL_OPTION_VALUE);
    const indeterminate = vue.computed(() => {
      return !!tempValue.value.length && toExcludeAllOption(tempValue).length < options.value.length;
    });
    const handleConfirm = () => {
      modelValue.value = tempValue.value.filter((v) => v !== types.TABLE_ALL_OPTION_VALUE);
      visible.value = false;
      emits("confirm");
    };
    const handleReset = () => {
      tempValue.value = [];
      modelValue.value = [];
      visible.value = false;
      emits("confirm");
    };
    const multiple = vue.computed(() => {
      var _a;
      return ((_a = props.column.filter) == null ? void 0 : _a.multiple) ?? true;
    });
    const showInput = vue.computed(() => {
      var _a, _b, _c;
      if (is.isFunction((_a = props.column.filter) == null ? void 0 : _a.showInput)) {
        return props.column.filter.showInput(options.value.length);
      }
      if (!is.isNil((_b = props.column.filter) == null ? void 0 : _b.showInput)) {
        return !!((_c = props.column.filter) == null ? void 0 : _c.showInput);
      }
      return options.value.length > 8;
    });
    vue.provide(provide.selectOptionInjectKey, {
      multiple,
      selectValue: tempValue,
      async select({ value }) {
        const isAdd = !tempValue.value.includes(value);
        if (!multiple.value) {
          modelValue.value = isAdd ? [value].filter((v) => v !== types.TABLE_ALL_OPTION_VALUE) : [];
          visible.value = false;
          emits("confirm");
          return;
        }
        if (value === types.TABLE_ALL_OPTION_VALUE) {
          tempValue.value = isAdd ? [...showOptions.value.map((v) => v.value), types.TABLE_ALL_OPTION_VALUE] : [];
          return;
        }
        if (isAdd) {
          tempValue.value.push(value);
        } else {
          tempValue.value = tempValue.value.filter((v) => v !== value);
        }
        if (!!tempValue.value.length && toExcludeAllOption(tempValue).length === options.value.length) {
          tempValue.value = Array.from(/* @__PURE__ */ new Set([...tempValue.value, types.TABLE_ALL_OPTION_VALUE]));
        } else {
          tempValue.value = tempValue.value.filter((v) => v !== types.TABLE_ALL_OPTION_VALUE);
        }
      },
      registerOption() {
      }
    });
    const handleTriggerClick = () => {
      if (isPhonePadSize.value) {
        visible.value = true;
      }
    };
    return (_ctx, _cache) => {
      var _a;
      return vue.openBlock(), vue.createElementBlock(
        vue.Fragment,
        null,
        [
          vue.withDirectives(vue.createVNode(vue.unref(index$1.OButton), {
            ref_key: "targetIconRef",
            ref: targetIconRef,
            disabled: props.disabled,
            icon: vue.unref(OIconFilter),
            size: "small",
            class: vue.normalizeClass({ "o-data-table-column-filter__trigger": true, active: !!modelValue.value.length || visible.value, disabled: props.disabled }),
            style: vue.normalizeStyle(_ctx.$attrs.style),
            onClick: handleTriggerClick
          }, null, 8, ["disabled", "icon", "class", "style"]), [
            [vue.vShow, options.value.length]
          ]),
          vue.createVNode(vue.unref(DefineBodyTemplate), null, {
            default: vue.withCtx(() => [
              showInput.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
                vue.createVNode(vue.unref(index$2.OInput), {
                  modelValue: filterKeywords.value,
                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterKeywords.value = $event),
                  placeholder: vue.unref(t)("table.filterPlaceholder"),
                  clearable: "",
                  size: "medium"
                }, {
                  prefix: vue.withCtx(() => [
                    vue.createVNode(vue.unref(OIconSearch), { class: "o-data-table-column-filter__input-icon" })
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["modelValue", "placeholder"])
              ])) : vue.createCommentVNode("v-if", true),
              vue.createElementVNode("div", _hoisted_2, [
                showOptions.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(OOptionList_vue_vue_type_script_setup_true_lang), {
                  key: 0,
                  scrollbar: { size: "small", showType: "hover" }
                }, {
                  default: vue.withCtx(() => [
                    !filterKeywords.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.OOption), {
                      key: 0,
                      value: vue.unref(types.TABLE_ALL_OPTION_VALUE),
                      label: vue.unref(t)("common.checkAll"),
                      indeterminate: indeterminate.value
                    }, null, 8, ["value", "label", "indeterminate"])) : vue.createCommentVNode("v-if", true),
                    (vue.openBlock(true), vue.createElementBlock(
                      vue.Fragment,
                      null,
                      vue.renderList(showOptions.value, (option) => {
                        return vue.openBlock(), vue.createBlock(vue.unref(index$3.OOption), {
                          key: option.value,
                          value: option.value,
                          label: option.label
                        }, null, 8, ["value", "label"]);
                      }),
                      128
                      /* KEYED_FRAGMENT */
                    ))
                  ]),
                  _: 1
                  /* STABLE */
                })) : (vue.openBlock(), vue.createElementBlock(
                  "div",
                  _hoisted_3,
                  vue.toDisplayString(vue.unref(t)("common.empty")),
                  1
                  /* TEXT */
                ))
              ])
            ]),
            _: 1
            /* STABLE */
          }),
          vue.unref(isPhonePadSize) ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ODialog), {
            key: 0,
            visible: visible.value,
            "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
            "mask-close": !multiple.value,
            size: "small",
            scrollbar: false,
            class: "o-data-table-column-filter-dialog",
            "main-class": "o-data-table-column-filter-wrapper",
            style: vue.normalizeStyle(_ctx.$attrs.style)
          }, vue.createSlots({
            default: vue.withCtx(() => [
              vue.createVNode(vue.unref(ReuseBodyTemplate))
            ]),
            _: 2
            /* DYNAMIC */
          }, [
            ((_a = props.column.filter) == null ? void 0 : _a.optionTitle) ? {
              name: "header",
              fn: vue.withCtx(() => [
                vue.createElementVNode(
                  "div",
                  _hoisted_4,
                  vue.toDisplayString(props.column.filter.optionTitle),
                  1
                  /* TEXT */
                )
              ]),
              key: "0"
            } : void 0,
            multiple.value ? {
              name: "actions",
              fn: vue.withCtx(() => [
                vue.createVNode(vue.unref(index$1.OButton), {
                  class: "o-dlg-btn",
                  variant: "text",
                  size: "large",
                  onClick: handleReset
                }, {
                  default: vue.withCtx(() => [
                    vue.createTextVNode(
                      vue.toDisplayString(vue.unref(t)("common.reset")),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 1
                  /* STABLE */
                }),
                vue.createVNode(vue.unref(index$1.OButton), {
                  class: "o-dlg-btn",
                  variant: "text",
                  size: "large",
                  disabled: !tempValue.value.length,
                  onClick: handleConfirm
                }, {
                  default: vue.withCtx(() => [
                    vue.createTextVNode(
                      vue.toDisplayString(vue.unref(t)("common.filter")),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 1
                  /* STABLE */
                }, 8, ["disabled"])
              ]),
              key: "1"
            } : void 0
          ]), 1032, ["visible", "mask-close", "style"])) : !props.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.OPopup), {
            key: 1,
            visible: visible.value,
            "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
            offset: 4,
            target: targetIconRef.value,
            trigger: "click",
            position: "bl",
            class: "o-data-table-column-filter-popup",
            "wrap-class": "o-data-table-column-filter-wrapper",
            style: vue.normalizeStyle(_ctx.$attrs.style)
          }, {
            default: vue.withCtx(() => [
              vue.createVNode(vue.unref(ReuseBodyTemplate)),
              multiple.value ? (vue.openBlock(), vue.createElementBlock(
                vue.Fragment,
                { key: 0 },
                [
                  vue.createVNode(vue.unref(index$6.ODivider), { class: "o-data-table-column-filter__divider" }),
                  vue.createElementVNode("div", _hoisted_5, [
                    vue.createVNode(vue.unref(index$7.OLink), {
                      color: "primary",
                      "hover-underline": false,
                      disabled: !tempValue.value.length,
                      onClick: handleConfirm
                    }, {
                      default: vue.withCtx(() => [
                        vue.createTextVNode(
                          vue.toDisplayString(vue.unref(t)("common.filter")),
                          1
                          /* TEXT */
                        )
                      ]),
                      _: 1
                      /* STABLE */
                    }, 8, ["disabled"]),
                    vue.createVNode(vue.unref(index$7.OLink), {
                      color: "primary",
                      "hover-underline": false,
                      onClick: handleReset
                    }, {
                      default: vue.withCtx(() => [
                        vue.createTextVNode(
                          vue.toDisplayString(vue.unref(t)("common.reset")),
                          1
                          /* TEXT */
                        )
                      ]),
                      _: 1
                      /* STABLE */
                    })
                  ])
                ],
                64
                /* STABLE_FRAGMENT */
              )) : vue.createCommentVNode("v-if", true)
            ]),
            _: 1
            /* STABLE */
          }, 8, ["visible", "target", "style"])) : vue.createCommentVNode("v-if", true)
        ],
        64
        /* STABLE_FRAGMENT */
      );
    };
  }
});
module.exports = _sfc_main;