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

玛果添实UI组件库(Vue3)

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { createVNode as _createVNode } from "vue";
import { defineComponent } from 'vue';
import { Avatar } from '../components';
import useConfigInject from "ant-design-vue/es/config-provider/hooks/useConfigInject";
import useStyle from "./style/index.style";
import classNames from "ant-design-vue/es/_util/classNames";
var cardOptionProps = function cardOptionProps() {
  return {
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: function _default() {
        return {};
      }
    }
  };
};
var Option = defineComponent({
  name: 'CardOption',
  slots: ['subLabel', 'title', 'image'],
  props: cardOptionProps(),
  emits: ['click'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
      expose = _ref.expose,
      emit = _ref.emit;
    // const emit = defineEmits(['click']);
    var click = function click() {
      emit('click', props.item.value, props.item);
    };
    var _useConfigInject = useConfigInject('card-select-option', props),
      prefixCls = _useConfigInject.prefixCls;
    var _useStyle = useStyle(prefixCls),
      _useStyle2 = _slicedToArray(_useStyle, 2),
      wrapSSR = _useStyle2[0],
      hashId = _useStyle2[1];
    var prefixClsValue = prefixCls.value;
    var rootCls = classNames(prefixClsValue, _defineProperty({}, hashId.value, true));
    return function () {
      return wrapSSR(_createVNode("div", {
        "class": rootCls
      }, [_createVNode("div", {
        "class": "\n                            j-card-item\n                            ".concat(props.active ? 'active' : '', "\n                            ").concat(props.disabled ? 'disabled' : '', "\n                            ").concat(props.item.type === 'horizontal' ? 'horizontal' : '', "\n                            ").concat(props.item.type === 'vertical' ? 'vertical' : '', "\n                            ").concat(props.item.float === 'right' ? 'right' : '', "\n                            ").concat(props.item.float === 'left' ? 'left' : '', "\n                        "),
        "onClick": click
      }, [_createVNode("div", {
        "class": "j-card-title-warp"
      }, [_createVNode("slot", {
        "name": "title",
        "title": props.item.label
      }, [_createVNode("div", {
        "class": "title"
      }, [props.item.label])]), props.item.subLabel && props.item.showSubLabel && _createVNode("slot", {
        "name": "subLabel",
        "sub-label": props.item.subLabel
      }, [_createVNode("div", {
        "class": "sub-title"
      }, [props.item.subLabel])])]), props.item.showImage && _createVNode("div", {
        "class": "j-card-image"
      }, [_createVNode("slot", {
        "name": "image",
        "image": props.item.iconUrl
      }, [_createVNode(Avatar, {
        "class": "icon box-shadow",
        "src": props.item.iconUrl
      }, null)])])])]));
    };
  }
});
export default Option;