@opensig/opendesign/es/data-table/TableColumnFilter.vue.mjs

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