hongluan-business-ui/es/components/data-filter/src/index.mjs.map

Hongluan Business Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/data-filter/src/index.vue"],"sourcesContent":["<template>\n  <hl-tooltip\n    ref=\"popoverRef\"\n    :width=\"width\"\n    trigger=\"click\"\n    :placement=\"placement\"\n    :fallback-placements=\"fallbackPlacements\"\n    :show-arrow=\"false\"\n    :popper-class=\"prefix + '-data-filter-popper'\"\n    :gpu-acceleration=\"false\"\n    :outside-ignore=\"outsideIgnoreComputed\"\n    transition=\"dropdown\"\n  >\n    <template #default>\n      <slot name=\"reference\">\n        <hl-button\n          type=\"primary\"\n          :icon-position=\"iconPosition\"\n          :equal=\"!$slots.default\"\n          effect=\"light\"\n          :class=\"prefix + '-data-filter'\"\n          v-bind=\"$attrs\"\n        >\n          <template #icon>\n            <slot name=\"icon\">\n              <hl-icon v-if=\"!$slots.default && !$slots.icon\">\n                <system-search />\n              </hl-icon>\n            </slot>\n          </template>\n          <template #default>\n            <slot></slot>\n            <hl-badge\n              type=\"primary\"\n              position=\"rt\"\n              :hidden=\"!displayItems.length\"\n              :value=\"displayItems.length\"\n              :max=\"max\"\n              round\n            />\n          </template>\n        </hl-button>\n      </slot>\n    </template>\n    <template #content>\n      <hl-panel\n        body-padding=\"var(--xl)\"\n        :style=\"{ height: maxHeight, '--data-filter-panel-width': typeof width === 'number' ? width + 'px' : width }\"\n        full-body\n      >\n        <template #header>\n          <div class=\"panel-title\">\n            <h4>{{ title }}</h4>\n          </div>\n        </template>\n        <hl-scrollbar>\n          <hl-form label-suffix=\"：\" :item-gap=\"itemGap\" :gap=\"gap\" style=\"padding: var(--panel-padding)\">\n            <hl-form-item v-if=\"displayItems.length && selectedSectionOpt.show\" :class=\"{ 'no-selected-items': !displayItems.length }\">\n              <template #label>\n                <span>已选择：</span>\n              </template>\n              <hl-group wrap gap=\"var(--sm)\" class=\"selected-items\">\n                <hl-tag\n                  v-for=\"item in displayItems\"\n                  :key=\"item.name\"\n                  type=\"primary\"\n                  class=\"selected-item-tag\"\n                  :closable=\"selectedSectionOpt.closable\"\n                  @close=\"removeDisplayItem(item)\"\n                >\n                  {{ item.display }}\n                </hl-tag>\n              </hl-group>\n            </hl-form-item>\n            <hl-form-item v-for=\"item in searchItems\" :key=\"item.name\" :label=\"item.label\">\n              <hl-time-picker\n                v-if=\"item.type === 'timepicker'\"\n                :ref=\"ref => addRef(ref)\"\n                v-model=\"item.value\"\n                block\n                clearable\n                :fill=\"fill\"\n                v-bind=\"getDateTimeProps(item)\"\n              />\n              <hl-date-picker\n                v-else-if=\"isDatePicker(item.type)\"\n                :ref=\"ref => addRef(ref)\"\n                v-model=\"item.value\"\n                :type=\"item.type\"\n                block\n                clearable\n                :fill=\"fill\"\n                v-bind=\"getDateTimeProps(item)\"\n              />\n              <hl-select\n                v-else-if=\"item.type === 'select'\"\n                :ref=\"ref => addRef(ref)\"\n                v-model=\"item.value\"\n                :fill=\"fill\"\n                block\n                clearable\n                v-bind=\"getSelectProps(item)\"\n              >\n                <hl-option v-for=\"opt in item.options\" :key=\"getKey(item, opt)\" :label=\"getLabel(item, opt)\" :value=\"getKey(item, opt)\" />\n              </hl-select>\n              <template v-else-if=\"item.type === 'slot'\">\n                <slot :name=\"item.slotName\" :value=\"item.value\" :item=\"item\"> </slot>\n              </template>\n              <hl-input\n                v-else-if=\"item.type === 'input' || !item.type\"\n                v-model=\"item.value\"\n                :fill=\"fill\"\n                block\n                clearable\n                v-bind=\"getInputProps(item)\"\n              />\n            </hl-form-item>\n          </hl-form>\n        </hl-scrollbar>\n        <template #footer>\n          <slot name=\"footer\">\n            <hl-button type=\"primary\" @click=\"search\">{{ searchLabel }}</hl-button>\n          </slot>\n        </template>\n      </hl-panel>\n    </template>\n  </hl-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, ref, watch, computed } from 'vue'\nimport { cloneDeep } from 'lodash-unified'\nimport { HlTooltip, HlTag, HlForm, HlFormItem, HlPanel, HlGroup, HlBadge, HlInput, HlSelect, HlOption, HlDatePicker, HlTimePicker, HlButton, HlIcon, SystemSearch } from 'hongluan-ui'\nimport { usePrefix } from '@hongluan-business-ui/utils/util'\nimport { Utils } from './utils'\n\nimport type { PropType } from 'vue'\nimport type { MaybeElementRef } from '@vueuse/core'\nimport type { Indexable } from '@hongluan-business-ui/utils/types'\nimport type { SelectorItem } from '@hongluan-business-ui/components/table-searchbar/src/searchbar'\nimport type { DisplayItem } from './utils'\n\nexport default defineComponent({\n  name: 'DataFilter',\n  components: { HlTooltip, HlTag, HlForm, HlFormItem, HlPanel, HlGroup, HlBadge, HlInput, HlSelect, HlOption, HlDatePicker, HlTimePicker, HlButton, HlIcon, SystemSearch },\n  inheritAttrs: false,\n  props: {\n    iconPosition: {\n      type: String as PropType<'left' | 'right'>,\n      default: 'right',\n    },\n    title: {\n      type: String,\n      default: '数据筛选',\n    },\n    width: {\n      type: [String, Number],\n      default: 380,\n    },\n    maxHeight: {\n      type: String,\n      default: '300px',\n    },\n    fill: {\n      type: Boolean,\n      default: false,\n    },\n    placement: {\n      type: String,\n      default: 'bottom',\n    },\n    fallbackPlacements: {\n      type: Array as PropType<string[]>,\n      default: () => [],\n    },\n    items: {\n      type: Array as PropType<SelectorItem[]>,\n      default: () => [],\n    },\n    selectedSection: Object as PropType<{ show: true; closable: true; }>,\n    max: {\n      type: Number,\n      default: 99,\n    },\n    gap: String,\n    itemGap: String,\n    searchLabel: {\n      type: String,\n      default: '  搜  索  ',\n    },\n    outsideIgnore: {\n      type: Array as PropType<MaybeElementRef[]>,\n      default: () => [],\n    },\n  },\n  emits: ['search', 'remove-selected-item'],\n  setup(props, { emit }) {\n    const { prefix } = usePrefix()\n    const popoverRef = ref(null)\n    const searchItems = ref(cloneDeep(props.items))\n    const displayItems = ref<DisplayItem[]>([])\n    const popperPaneRefs = ref([])\n\n    const selectedSectionOpt = computed(() => ({ show: true, closable: true, ...(props.selectedSection || {}) }))\n\n    const outsideIgnoreComputed = computed(() => popperPaneRefs.value)\n\n    const addRef = (compRef: any) => {\n      if (compRef) {\n        if (compRef.popperPaneRef) {\n          popperPaneRefs.value.push(compRef.popperPaneRef)\n        } else {\n          popperPaneRefs.value.push(compRef)\n        }\n      }\n    }\n\n    const isDatePicker = (type: string) => {\n      return 'year/month/date/dates/week/datetime/datetimerange/daterange/monthrange'.indexOf(type) !== -1\n    }\n    const getDateTimeProps = (item: SelectorItem) => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { value: __, label: ___, display: ____, ...others } = item\n      return others\n    }\n    const getSelectProps = (item: SelectorItem) => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { options: _, value: __, prop: ___, type: ____, label: _____, display: ______, ...others } = item\n      return others\n    }\n    const getInputProps = (item: SelectorItem) => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { label: _, type: __, display: ___, ...others } = item\n      return others\n    }\n    const changeValue = () => {\n      displayItems.value = Utils.getDisplayItems(searchItems.value)\n    }\n\n    const getDisplayItemsCount = () => displayItems.value.length\n    const updateDisplayItem = (item: DisplayItem) => {\n      const idx = displayItems.value.findIndex(di => item.name === di.name)\n      if (idx == -1) {\n        displayItems.value.push(item)\n      } else {\n        displayItems.value[idx] = item\n      }\n    }\n    const removeDisplayItem = (item: DisplayItem) => {\n      displayItems.value = displayItems.value.filter(di => di !== item)\n      Utils.syncDisplaySearchItems(displayItems.value, searchItems.value)\n      emit('remove-selected-item', item)\n    }\n\n    const emitChange = () => {\n      const mapParams: Indexable<unknown> = {}\n      const originalParams: Indexable<unknown> = {}\n\n      searchItems.value\n        .filter(item => item.type !== 'slot')\n        .filter(item => (Array.isArray(item.value) ? item.value.length : item.value))\n        .forEach(item => {\n          if (/range|dates/.test(item.type) || item['is-range']) {\n            mapParams[item.name + 'Start'] = item.value[0]\n            mapParams[item.name + 'End'] = item.value[1]\n          } else {\n            mapParams[item.name] = item.value\n          }\n          originalParams[item.name] = item.value\n        })\n\n      let urlParams = ''\n      Object.keys(mapParams).forEach(k => {\n        if (Array.isArray(mapParams[k])) {\n          urlParams = (mapParams[k] as Array<unknown>).reduce((prev, cur) => {\n            prev += `&${k}=${cur}`\n            return prev\n          }, urlParams) as string\n        } else {\n          urlParams += `&${k}=${mapParams[k]}`\n        }\n      })\n      if (urlParams[0] === '&') {\n        urlParams = urlParams.slice(1)\n      }\n\n      emit('search', urlParams, mapParams, originalParams)\n    }\n    const search = () => {\n      changeValue()\n      emitChange()\n      popoverRef.value.hide()\n    }\n    const resetFields = (names: string[] = []) => {\n      searchItems.value.forEach((_, idx) => {\n        if (names.length) {\n          if (names.includes(searchItems.value[idx].name)) {\n            searchItems.value[idx].value = props.items[idx].value\n          }\n        }\n        else {\n          searchItems.value[idx].value = props.items[idx].value\n        }\n      })\n      changeValue()\n      emitChange()\n    }\n\n    watch(\n      () => props.items?.length,\n      () => {\n        searchItems.value = cloneDeep(props.items)\n      },\n    )\n\n    watch(() => props.outsideIgnore, newVal => {\n      newVal?.forEach(v => {\n        addRef(v)\n      })\n    }, {\n      immediate: true,\n    })\n\n    onMounted(() => {\n      displayItems.value = Utils.getDisplayItems(searchItems.value)\n    })\n\n    return {\n      prefix,\n      popoverRef,\n      searchItems,\n      displayItems,\n      outsideIgnoreComputed,\n      addRef,\n      selectedSectionOpt,\n      getKey: Utils.getKey,\n      getLabel: Utils.getLabel,\n      isDatePicker,\n      changeValue,\n      search,\n      getDisplayItemsCount,\n      removeDisplayItem,\n      updateDisplayItem,\n      getDateTimeProps,\n      getSelectProps,\n      getInputProps,\n      resetFields,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx","_createBlock"],"mappings":"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"}