{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/transfer/src/index.vue"],"sourcesContent":["<template>\r\n  <div class=\"sg-transfer\">\r\n    <transfer-panel\r\n      ref=\"leftPanel\"\r\n      :data=\"sourceData\"\r\n      :option-render=\"optionRender\"\r\n      :title=\"leftPanelTitle\"\r\n      :filterable=\"filterable\"\r\n      :filter-method=\"filterMethod\"\r\n      :default-checked=\"leftDefaultChecked\"\r\n      :props=\"props\"\r\n      :noDataText=\"noDataText\"\r\n      :listHeight=\"listHeight\"\r\n      :listWidth=\"listWidth\"\r\n      @checked-change=\"onSourceCheckedChange\"\r\n      @on-input=\"handelInput\"\r\n      @on-clear=\"handelClear\"\r\n    >\r\n    </transfer-panel>\r\n    <div class=\"sg-transfer__buttons\">\r\n      <sg-button\r\n        type=\"primary\"\r\n        size=\"small\"\r\n        :class=\"['sg-transfer__button']\"\r\n        :disabled=\"rightChecked.length === 0\"\r\n        @click=\"addToLeft\"\r\n      >\r\n        <sg-icon ><ArrowLeft /></sg-icon>\r\n      </sg-button>\r\n      <sg-button\r\n        type=\"primary\"\r\n        size=\"small\"\r\n        :class=\"['sg-transfer__button']\"\r\n        :disabled=\"leftChecked.length === 0\"\r\n        @click=\"addToRight\"\r\n      >\r\n\r\n        <sg-icon ><ArrowRight /></sg-icon>\r\n      </sg-button>\r\n    </div>\r\n    <transfer-panel\r\n      ref=\"rightPanel\"\r\n      :data=\"targetData\"\r\n      :option-render=\"optionRender\"\r\n      :filterable=\"filterable\"\r\n      :filter-method=\"filterMethod\"\r\n      :title=\"rightPanelTitle\"\r\n      :default-checked=\"rightDefaultChecked\"\r\n      :props=\"props\"\r\n      :noDataText=\"noDataText\"\r\n      :listHeight=\"listHeight\"\r\n      :listWidth=\"listWidth\"\r\n      @checked-change=\"onTargetCheckedChange\"\r\n      @on-input=\"handelInput\"\r\n      @on-clear=\"handelClear\"\r\n    >\r\n    </transfer-panel>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  h,\r\n  reactive,\r\n  ref,\r\n  toRefs,\r\n  watch\r\n} from 'vue'\r\nimport SgButton from '@sgui-plus/components/button'\r\nimport SgIcon from '@sgui-plus/components/icon'\r\nimport { useLocale, useFormItem } from '@sgui-plus/hooks'\r\nimport { UPDATE_MODEL_EVENT } from '@sgui-plus/utils/constants'\r\nimport { debugWarn } from '@sgui-plus/utils/error'\r\nimport {  ArrowLeft, ArrowRight, } from '@sgui-plus/icons-vue'\r\nimport TransferPanel from './transfer-panel.vue'\r\nimport { useComputedData } from './useComputedData'\r\nimport {\r\n  useCheckedChange,\r\n  LEFT_CHECK_CHANGE_EVENT,\r\n  RIGHT_CHECK_CHANGE_EVENT,\r\n} from './useCheckedChange'\r\nimport { useMove } from './useMove'\r\nimport type { PropType, VNode } from 'vue'\r\nimport type { DataItem, Key, Props, TargetOrder } from './transfer'\r\n\r\ntype TransferType = InstanceType<typeof TransferPanel>\r\n\r\nexport default defineComponent({\r\n  name: 'SgTransfer',\r\n\r\n  components: {\r\n    TransferPanel,\r\n    SgButton,\r\n    SgIcon,\r\n    ArrowLeft,\r\n    ArrowRight,\r\n  },\r\n\r\n  props: {\r\n    data: {\r\n      type: Array as PropType<DataItem[]>,\r\n      default: () => [],\r\n    },\r\n    titles: {\r\n      type: Array as PropType<any> as PropType<[string, string]>,\r\n      default: () => [],\r\n    },\r\n    filterMethod: Function as PropType<\r\n      (query: string, item: DataItem) => boolean\r\n    >,\r\n    leftDefaultChecked: {\r\n      type: Array as PropType<Key[]>,\r\n      default: () => [],\r\n    },\r\n    rightDefaultChecked: {\r\n      type: Array as PropType<Key[]>,\r\n      default: () => [],\r\n    },\r\n    renderContent: Function as PropType<(h, option) => VNode>,\r\n    modelValue: {\r\n      type: Array as PropType<Key[]>,\r\n      default: () => [],\r\n    },\r\n    filterable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    props: {\r\n      type: Object as PropType<Props>,\r\n      default: () => ({\r\n        label: 'label',\r\n        key: 'key',\r\n        disabled: 'disabled',\r\n      }),\r\n    },\r\n    targetOrder: {\r\n      type: String as PropType<TargetOrder>,\r\n      default: 'original',\r\n      validator: (val: string) => {\r\n        return ['original', 'push', 'unshift'].includes(val)\r\n      },\r\n    },\r\n    validateEvent: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    noDataText: String,\r\n    listHeight: Number,\r\n    listWidth: Number\r\n  },\r\n\r\n  emits: [\r\n    UPDATE_MODEL_EVENT,\r\n    'on-change',\r\n    LEFT_CHECK_CHANGE_EVENT,\r\n    RIGHT_CHECK_CHANGE_EVENT,\r\n    'on-query-change',\r\n    'on-query-clear'\r\n  ],\r\n\r\n  setup(props, { emit, slots }) {\r\n    const { t } = useLocale()\r\n    const { formItem } = useFormItem()\r\n\r\n    const checkedState = reactive({\r\n      leftChecked: [],\r\n      rightChecked: [],\r\n    })\r\n\r\n    const { propsKey, sourceData, targetData } = useComputedData(props)\r\n\r\n    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\r\n      checkedState,\r\n      emit\r\n    )\r\n\r\n    const { addToLeft, addToRight } = useMove(\r\n      props,\r\n      checkedState,\r\n      propsKey,\r\n      emit\r\n    )\r\n\r\n    const leftPanel = ref<TransferType>()\r\n    const rightPanel = ref<TransferType>()\r\n\r\n    const clearFilter = (which: 'left' | 'right') => {\r\n      switch (which) {\r\n        case 'left':\r\n          leftPanel.value!.query = ''\r\n          break\r\n        case 'right':\r\n          rightPanel.value!.query = ''\r\n          break\r\n      }\r\n    }\r\n\r\n    const moveTo = (direction: 'left' | 'right') => {\r\n      direction === 'left' ? addToLeft() : addToRight()\r\n    }\r\n\r\n\r\n    const leftPanelTitle = computed(\r\n      () => props.titles[0] || t('sg.transfer.titles.0')\r\n    )\r\n\r\n    const rightPanelTitle = computed(\r\n      () => props.titles[1] || t('sg.transfer.titles.1')\r\n    )\r\n\r\n    const optionRender = computed(() => (option) => {\r\n      if (props.renderContent) return props.renderContent(h, option)\r\n\r\n      if (slots.default) return slots.default({ option })\r\n\r\n      return h('span', option[props.props.label] || option[props.props.key])\r\n    })\r\n\r\n    const handelInput = (value) => {\r\n        emit('on-query-change', value)\r\n    }\r\n\r\n    const handelClear = () => {\r\n      emit('on-query-clear')\r\n    }\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      () => {\r\n        if (props.validateEvent) {\r\n          formItem?.validate?.('change').catch((err) => debugWarn(err))\r\n        }\r\n      }\r\n    )\r\n\r\n    return {\r\n      sourceData,\r\n      targetData,\r\n      onSourceCheckedChange,\r\n      onTargetCheckedChange,\r\n      addToLeft,\r\n      addToRight,\r\n\r\n      ...toRefs(checkedState),\r\n      leftPanelTitle,\r\n      rightPanelTitle,\r\n      clearFilter,\r\n      moveTo,\r\n      leftPanel,\r\n      rightPanel,\r\n\r\n      optionRender,\r\n\r\n      handelInput,\r\n      handelClear,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_normalizeClass","_withCtx"],"mappings":"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"}