mt-ui-components-vue3/es/CardSelect/CardSelect.js

玛果添实UI组件库(Vue3)

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { createVNode as _createVNode } from "vue";
import { computed, ref, toRefs, watch } from 'vue';
import { Avatar, Row, Col } from '../components';
import { defineComponent } from "vue";
import useConfigInject from 'ant-design-vue/es/config-provider/hooks/useConfigInject';
import classNames from 'ant-design-vue/es/_util/classNames';
import useStyle from './style/index.style';
// const RestfulMethod = {
//     get: 'GET',
//     post: 'POST',
//     put: 'PUT',
//     delete: 'DELETE'
// } as const
// type IRestfulMethod = typeof RestfulMethod
// type TypeRestfulMethod = IRestfulMethod[keyof IRestfulMethod]
var CardSelectType = {
  VERTICAL: 'vertical',
  HORIZONTAL: 'horizontal'
};
var cardSelectProps = function cardSelectProps() {
  return {
    type: {
      type: String,
      default: 'horizontal'
    },
    float: {
      type: String,
      default: 'left'
    },
    options: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    column: {
      type: Number,
      default: 3
    },
    noColumn: {
      type: Boolean,
      default: false
    },
    showImage: {
      type: Boolean,
      default: true
    },
    showSubLabel: {
      type: Boolean,
      default: true
    },
    value: {
      type: [String, Array],
      default: undefined
    }
  };
};
var CardSelect = defineComponent({
  name: 'CardSelect',
  slots: ['subLabel', 'title', 'image'],
  props: cardSelectProps(),
  emits: ['update:value', 'change'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
      expose = _ref.expose,
      emit = _ref.emit;
    var _toRefs = toRefs(props),
      multiple = _toRefs.multiple,
      type = _toRefs.type,
      disabled = _toRefs.disabled,
      float = _toRefs.float;
    // const emits = defineEmits(['update:value', 'change']);
    var activeKeys = ref([]);
    var itemOptions = computed(function () {
      return props.options;
    });
    var getOptions = function getOptions(keys) {
      return itemOptions.value.filter(function (item) {
        return keys.includes(item.value);
      });
    };
    var handleSelect = function handleSelect(key, item) {
      if (disabled.value || item.disabled) return;
      var cloneActiveKeys = new Set(activeKeys.value);
      var isActive = cloneActiveKeys.has(key);
      if (isActive) {
        cloneActiveKeys.delete(key);
      } else {
        // 添加
        multiple.value ? cloneActiveKeys.add(key) : cloneActiveKeys = new Set([key]);
      }
      activeKeys.value = _toConsumableArray(cloneActiveKeys.keys());
      var options = multiple.value ? getOptions(activeKeys.value) : item;
      emit('update:value', activeKeys.value);
      emit('change', activeKeys.value, options);
    };
    watch(function () {
      return props.value;
    }, function () {
      activeKeys.value = Array.isArray(props.value) ? props.value : [props.value];
    }, {
      immediate: true
    });
    var _useConfigInject = useConfigInject('card-select', props),
      prefixCls = _useConfigInject.prefixCls;
    var _useStyle = useStyle(prefixCls),
      _useStyle2 = _slicedToArray(_useStyle, 2),
      wrapSSR = _useStyle2[0],
      hashId = _useStyle2[1];
    var prefixClsValue = prefixCls.value;
    var renderCols = itemOptions.value.map(function (itemOption) {
      return _createVNode(Col, {
        "key": itemOption.value,
        "span": 24 / props.column
      }, {
        default: function _default() {
          return [_createVNode("div", {
            "class": "\n                            j-card-item \n                            ".concat(activeKeys.value.includes(itemOption.value) ? 'active' : '', " \n                            ").concat(disabled.value || itemOption.disabled ? 'disabled' : '', " \n                            ").concat(props.type === 'horizontal' ? 'horizontal' : '', " \n                            ").concat(props.type === 'vertical' ? 'vertical' : '', " \n                            ").concat(props.float === 'right' ? 'right' : '', " \n                            ").concat(props.float === 'left' ? 'left' : '', "\n                        "),
            "onClick": function onClick() {
              return handleSelect(itemOption.value, itemOption);
            }
          }, [_createVNode("div", {
            "class": "j-card-title-warp"
          }, [_createVNode("div", {
            "class": "title"
          }, [slots.title ? slots.title({
            option: itemOption,
            title: itemOption.label
          }) : itemOption.label]), itemOption.subLabel && props.showSubLabel && _createVNode("div", {
            "class": "sub-title"
          }, [slots.subLabel ? slots.subLabel({
            subLabel: itemOption.subLabel,
            option: itemOption
          }) : itemOption.subLabel])]), props.showImage && _createVNode("div", {
            "class": "j-card-image"
          }, [slots.image ? slots.image({
            image: itemOption.iconUrl,
            option: itemOption
          }) : _createVNode(Avatar, {
            "class": "icon box-shadow",
            "src": itemOption.iconUrl
          }, null)])])];
        }
      });
    });
    var renderNoCols = itemOptions.value.map(function (itemOption) {
      return _createVNode("div", {
        "key": itemOption.value,
        "class": "\n                                j-card-item \n                                ".concat(activeKeys.value.includes(itemOption.value) ? 'active' : '', " \n                                ").concat(disabled.value || itemOption.disabled ? 'disabled' : '', " \n                                ").concat(props.type === 'horizontal' ? 'horizontal' : '', " \n                                ").concat(props.type === 'vertical' ? 'vertical' : '', " \n                                ").concat(props.float === 'right' ? 'right' : '', " \n                                ").concat(props.float === 'left' ? 'left' : '', "\n                            "),
        "onClick": function onClick() {
          return handleSelect(itemOption.value, itemOption);
        }
      }, [_createVNode("div", {
        "class": "j-card-title-warp"
      }, [_createVNode("div", {
        "class": "title"
      }, [_createVNode("slot", {
        "name": "title",
        "title": itemOption.label,
        "option": itemOption
      }, [itemOption.label])]), itemOption.subLabel && props.showSubLabel && _createVNode("div", {
        "class": "sub-title"
      }, [_createVNode("slot", {
        "name": "subLabel",
        "sub-label": itemOption.subLabel,
        "option": itemOption
      }, [itemOption.subLabel])])]), props.showImage && _createVNode("div", {
        "class": "j-card-image"
      }, [_createVNode("slot", {
        "name": "image",
        "image": itemOption.iconUrl,
        "option": itemOption
      }, [_createVNode(Avatar, {
        "class": "icon box-shadow",
        "src": itemOption.iconUrl
      }, null)])])]);
    });
    var rootCls = classNames(prefixClsValue, _defineProperty({}, hashId.value, true));
    return function () {
      return wrapSSR(_createVNode("div", {
        "class": "".concat(rootCls, " ").concat(props.noColumn ? 'no-column' : '')
      }, [!props.noColumn ? _createVNode(Row, {
        "gutter": [16, 16]
      }, {
        default: function _default() {
          return [renderCols];
        }
      }) : {
        renderNoCols: renderNoCols
      }]));
    };
  }
});
export default CardSelect;