hongluan-business-ui/es/components/table-searchbar/src/index.mjs.map

Hongluan Business Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/table-searchbar/src/index.vue"],"sourcesContent":["<template>\n  <hl-group\n    full=\"full-x\"\n    align=\"top between\"\n    :gap=\"gap\"\n    class=\"hb-table-searchbar\"\n    :style=\"padding ? `--search-bar-padding: ${padding}`: '' \"\n  >\n    <hl-collapse-transition>\n      <hl-row\n        ref=\"hlRow\"\n        layout=\"grid\"\n        :gap=\"gap\"\n        direction=\"vertical\"\n        :count=\"colCount\"\n        :class=\"[\n          'searchbar-collapse',\n          {'opened': showMore }\n        ]\"\n      >\n        <hl-col\n          v-for=\"item in searchItems\"\n          :key=\"item.name\"\n          class=\"col\"\n          :span=\"item.span\"\n        >\n          <hl-time-picker\n            v-if=\"item.type === 'timepicker'\"\n            v-model=\"item.value\"\n            block\n            clearable\n            v-bind=\"getDateTimeProps(item)\"\n            @change=\"changeValue\"\n          />\n          <hl-date-picker\n            v-else-if=\"isDatePicker(item.type)\"\n            v-model=\"item.value\"\n            type=\"item.type\"\n            block\n            clearable\n            v-bind=\"getDateTimeProps(item)\"\n            @change=\"changeValue\"\n          />\n          <hl-input\n            v-else-if=\"item.type === 'input'\"\n            v-model=\"item.value\"\n            block\n            clearable\n            v-bind=\"getInputProps(item)\"\n            @change=\"changeValue\"\n          />\n          <template v-else-if=\"item.type === 'slot'\">\n            <slot\n              :name=\"item.slotName\"\n              :value=\"item.value\"\n              :item=\"item\"\n            >\n            </slot>\n          </template>\n          <hl-select\n            v-else-if=\"item.type === 'select' || !item.type\"\n            v-model=\"item.value\"\n            block\n            clearable\n            v-bind=\"getSelectProps(item)\"\n            @change=\"changeValue\"\n          >\n            <hl-option\n              v-for=\"opt in item.options\"\n              :key=\"getKey(item, opt)\"\n              :label=\"getLabel(item, opt)\"\n              :value=\"getKey(item, opt)\"\n            />\n          </hl-select>\n        </hl-col>\n      </hl-row>\n    </hl-collapse-transition>\n    <hl-group v-show=\"hasMoreButton\" class=\"static\">\n      <hl-button equal @click=\"toggle\">\n        <hl-icon :class=\"{ more: showMore }\"><system-arrow-down /></hl-icon>\n      </hl-button>\n    </hl-group>\n    <hl-group style=\"flex-basis: 10%;\" />\n    <slot name=\"prefix\"></slot>\n    <hl-group class=\"static\" merge indent>\n      <hl-input\n        v-if=\"'show' in searcher ? searcher.show : true\"\n        v-model=\"searchValue\"\n        v-bind=\"searcher\"\n        class=\"input-search\"\n        block\n        @change=\"changeValue\"\n      >\n        <template #suffix>\n          <hl-icon><system-search /></hl-icon>\n        </template>\n      </hl-input>\n    </hl-group>\n    <slot name=\"suffix\"></slot>\n  </hl-group>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'\nimport { cloneDeep, throttle } from 'lodash-unified'\nimport { HlGroup, HlInput, HlCollapseTransition, HlRow, HlCol, HlSelect, HlOption, HlDatePicker, HlTimePicker, HlButton, HlIcon, SystemSearch, SystemArrowDown } from 'hongluan-ui'\n\nimport type { PropType } from 'vue'\nimport type { Indexable } from '@hongluan-business-ui/utils/types'\nimport type { SearchbarSelectors, SelectorItem, SelectorItemOption } from './searchbar'\n\nexport default defineComponent({\n  name: 'TableSearchbar',\n  components: { HlGroup, HlInput, HlCollapseTransition, HlRow, HlCol, HlSelect, HlOption, HlDatePicker, HlTimePicker, HlButton, HlIcon, SystemSearch, SystemArrowDown },\n  props: {\n    fill: {\n      type: Boolean,\n      default: false,\n    },\n    searcher: {\n      type: Object,\n      default: () => ({}),\n    },\n    selector: {\n      type: Object as PropType<SearchbarSelectors>,\n      default: () => ({\n        items: [],\n      }),\n    },\n    padding: {\n      type: String,\n      default: '',\n    },\n    gap: {\n      type: String,\n      default: '',\n    },\n  },\n  emits: ['change'],\n  setup(props, { emit }) {\n    const searchItems = ref(cloneDeep(props.selector.items))\n    const searchValue = ref('')\n    const showMore = ref(false)\n    const hasMoreButton = ref(false)\n    const hlRow = ref<{ $el: HTMLElement; }>(null)\n\n    const colCount = computed(() => {\n      return props.selector.colCount || 'xl:count-3 lg:count-2 md:count-1'\n    })\n\n    const getKey = (item: SelectorItem, opt: SelectorItemOption) => {\n      return item.prop ? opt[item.prop.value] : opt.value\n    }\n    const getLabel = (item: SelectorItem, opt: SelectorItemOption) => {\n      return item.prop ? opt[item.prop.label] : opt.label\n    }\n    const isDatePicker = (type: string) => {\n      return 'year/month/date/dates/week/datetime/datetimerange/daterange/monthrange'.indexOf(type) !== -1\n    }\n    const toggle = () => {\n      showMore.value = !showMore.value\n    }\n    const setMoreButton = () => {\n      if (searchItems.value.length) {\n        if (showMore.value) {\n          hasMoreButton.value = hlRow.value.$el.getBoundingClientRect().height > hlRow.value.$el.querySelector('.col').getBoundingClientRect().height\n        } else {\n          hasMoreButton.value = hlRow.value.$el.scrollHeight > hlRow.value.$el.getBoundingClientRect().height\n        }\n      } else {\n        hasMoreButton.value = false\n      }\n    }\n    const getDateTimeProps = (item: SelectorItem) => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { span: _, value: __, ...others } = item\n      return others\n    }\n    const getInputProps = (item: SelectorItem) => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { span: _, value: __, ...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: ___, ...others } = item\n      return others\n    }\n    const changeValue = () => {\n      const mapParams: Indexable<unknown> = {}\n      const originalParams: Indexable<unknown> = {}\n\n      mapParams[props.searcher.name || 'search'] = searchValue.value\n      originalParams[props.searcher.name || 'search'] = searchValue.value\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('change', urlParams, mapParams, originalParams)\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.selector.items[idx].value\n          }\n        }\n        else {\n          searchItems.value[idx].value = props.selector.items[idx].value\n        }\n      })\n      if (names.length) {\n        names.includes('searcher') && (searchValue.value = '')\n      } else {\n        searchValue.value = ''\n      }\n      changeValue()\n    }\n\n    watch(() => props.selector.items?.length, () => {\n      searchItems.value = cloneDeep(props.selector.items)\n      nextTick(() => {\n        resizeFunc()\n      })\n    })\n\n    let resizeFunc = throttle(setMoreButton, 300)\n    onMounted(() => {\n      setMoreButton()\n      window.addEventListener('resize', resizeFunc)\n    })\n    onUnmounted(() => {\n      window.removeEventListener('resize', resizeFunc)\n      resizeFunc = null\n    })\n\n    return {\n      colCount,\n      hasMoreButton,\n      hlRow,\n      showMore,\n      toggle,\n      searchValue,\n      searchItems,\n      getKey,\n      getLabel,\n      isDatePicker,\n      changeValue,\n      getDateTimeProps,\n      getInputProps,\n      getSelectProps,\n      resetFields,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock"],"mappings":"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"}