winbox-ui-next/es/transfer/transfer-view.js

We Design Vue 2.0: A Vue.js 3 UI Library

import { defineComponent, ref, inject, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, createTextVNode, toDisplayString, createBlock, withCtx, createVNode, createCommentVNode, renderList } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import Checkbox from "../checkbox/index.js";
import IconHover from "../_components/icon-hover.js";
import IconDelete from "../icon/icon-delete/index.js";
import Input from "../input/index.js";
import List from "../list/index.js";
import TransferListItem from "./transfer-list-item.js";
import { transferInjectionKey } from "./context.js";
import _export_sfc from "../_virtual/plugin-vue_export-helper";
const _sfc_main = defineComponent({
  name: "TransferView",
  components: {
    Checkbox,
    IconHover,
    IconDelete,
    InputSearch: Input.Search,
    List,
    TransferListItem
  },
  props: {
    type: {
      type: String
    },
    dataInfo: {
      type: Object,
      required: true
    },
    title: String,
    data: {
      type: Array,
      required: true
    },
    clearable: Boolean,
    selected: {
      type: Array,
      required: true
    },
    showSearch: Boolean,
    simple: Boolean
  },
  emits: ["search"],
  setup(props, { emit }) {
    const prefixCls = getPrefixCls("transfer-view");
    const filter = ref("");
    const transferCtx = inject(transferInjectionKey, void 0);
    const checked = computed(() => props.dataInfo.data.length > 0 && props.dataInfo.selected.length === props.dataInfo.data.length);
    const indeterminate = computed(() => props.dataInfo.selected.length > 0 && props.dataInfo.selected.length < props.dataInfo.data.length);
    const handleSelectAllChange = (checked2) => {
      if (checked2) {
        transferCtx == null ? void 0 : transferCtx.onSelect([
          ...props.selected,
          ...props.dataInfo.allValidValues
        ]);
      } else {
        transferCtx == null ? void 0 : transferCtx.onSelect(props.selected.filter((value) => !props.dataInfo.allValidValues.includes(value)));
      }
    };
    const filteredData = computed(() => props.dataInfo.data.filter((item) => {
      if (filter.value) {
        return item.label.includes(filter.value);
      }
      return true;
    }));
    const handleSearch = (value) => {
      emit("search", value, props.type);
    };
    const handleClear = () => {
      transferCtx == null ? void 0 : transferCtx.moveTo(props.dataInfo.allValidValues, "source");
    };
    return {
      prefixCls,
      filteredData,
      filter,
      checked,
      indeterminate,
      handleSelectAllChange,
      handleSearch,
      handleClear
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_checkbox = resolveComponent("checkbox");
  const _component_icon_delete = resolveComponent("icon-delete");
  const _component_icon_hover = resolveComponent("icon-hover");
  const _component_input_search = resolveComponent("input-search");
  const _component_transfer_list_item = resolveComponent("transfer-list-item");
  const _component_list = resolveComponent("list");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.prefixCls)
  }, [
    createElementVNode("div", {
      class: normalizeClass(`${_ctx.prefixCls}-header`)
    }, [
      createElementVNode("span", {
        class: normalizeClass(`${_ctx.prefixCls}-header-title`)
      }, [
        _ctx.clearable || _ctx.simple ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          createTextVNode(toDisplayString(_ctx.title), 1)
        ], 2112)) : (openBlock(), createBlock(_component_checkbox, {
          key: 1,
          "model-value": _ctx.checked,
          indeterminate: _ctx.indeterminate,
          "uninject-group-context": "",
          onChange: _ctx.handleSelectAllChange
        }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(_ctx.title), 1)
          ]),
          _: 1
        }, 8, ["model-value", "indeterminate", "onChange"]))
      ], 2),
      _ctx.clearable ? (openBlock(), createBlock(_component_icon_hover, {
        key: 0,
        class: normalizeClass(`${_ctx.prefixCls}-header-clear-btn`),
        onClick: _ctx.handleClear
      }, {
        default: withCtx(() => [
          createVNode(_component_icon_delete)
        ]),
        _: 1
      }, 8, ["class", "onClick"])) : !_ctx.simple ? (openBlock(), createElementBlock("span", {
        key: 1,
        class: normalizeClass(`${_ctx.prefixCls}-header-count`)
      }, toDisplayString(_ctx.dataInfo.selected.length) + " / " + toDisplayString(_ctx.dataInfo.data.length), 3)) : createCommentVNode("v-if", true)
    ], 2),
    _ctx.showSearch ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: normalizeClass(`${_ctx.prefixCls}-search`)
    }, [
      createVNode(_component_input_search, {
        modelValue: _ctx.filter,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filter = $event),
        onChange: _ctx.handleSearch
      }, null, 8, ["modelValue", "onChange"])
    ], 2)) : createCommentVNode("v-if", true),
    createVNode(_component_list, {
      class: normalizeClass(`${_ctx.prefixCls}-list`),
      bordered: false
    }, {
      default: withCtx(() => [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filteredData, (item) => {
          return openBlock(), createBlock(_component_transfer_list_item, {
            key: item.value,
            type: _ctx.type,
            data: item,
            simple: _ctx.simple,
            clearable: _ctx.clearable
          }, null, 8, ["type", "data", "simple", "clearable"]);
        }), 128))
      ]),
      _: 1
    }, 8, ["class"])
  ], 2);
}
var TransferView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { TransferView as default };