mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
211 lines (210 loc) • 8.41 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _components = require("../components");
var _useConfigInject2 = _interopRequireDefault(require("ant-design-vue/es/config-provider/hooks/useConfigInject"));
var _classNames2 = _interopRequireDefault(require("ant-design-vue/es/_util/classNames"));
var _index = _interopRequireDefault(require("./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 = (0, _vue.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 = (0, _vue.toRefs)(props),
multiple = _toRefs.multiple,
type = _toRefs.type,
disabled = _toRefs.disabled,
float = _toRefs.float;
// const emits = defineEmits(['update:value', 'change']);
var activeKeys = (0, _vue.ref)([]);
var itemOptions = (0, _vue.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 = (0, _toConsumableArray2.default)(cloneActiveKeys.keys());
var options = multiple.value ? getOptions(activeKeys.value) : item;
emit('update:value', activeKeys.value);
emit('change', activeKeys.value, options);
};
(0, _vue.watch)(function () {
return props.value;
}, function () {
activeKeys.value = Array.isArray(props.value) ? props.value : [props.value];
}, {
immediate: true
});
var _useConfigInject = (0, _useConfigInject2.default)('card-select', props),
prefixCls = _useConfigInject.prefixCls;
var _useStyle = (0, _index.default)(prefixCls),
_useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
wrapSSR = _useStyle2[0],
hashId = _useStyle2[1];
var prefixClsValue = prefixCls.value;
var renderCols = itemOptions.value.map(function (itemOption) {
return (0, _vue.createVNode)(_components.Col, {
"key": itemOption.value,
"span": 24 / props.column
}, {
default: function _default() {
return [(0, _vue.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);
}
}, [(0, _vue.createVNode)("div", {
"class": "j-card-title-warp"
}, [(0, _vue.createVNode)("div", {
"class": "title"
}, [slots.title ? slots.title({
option: itemOption,
title: itemOption.label
}) : itemOption.label]), itemOption.subLabel && props.showSubLabel && (0, _vue.createVNode)("div", {
"class": "sub-title"
}, [slots.subLabel ? slots.subLabel({
subLabel: itemOption.subLabel,
option: itemOption
}) : itemOption.subLabel])]), props.showImage && (0, _vue.createVNode)("div", {
"class": "j-card-image"
}, [slots.image ? slots.image({
image: itemOption.iconUrl,
option: itemOption
}) : (0, _vue.createVNode)(_components.Avatar, {
"class": "icon box-shadow",
"src": itemOption.iconUrl
}, null)])])];
}
});
});
var renderNoCols = itemOptions.value.map(function (itemOption) {
return (0, _vue.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);
}
}, [(0, _vue.createVNode)("div", {
"class": "j-card-title-warp"
}, [(0, _vue.createVNode)("div", {
"class": "title"
}, [(0, _vue.createVNode)("slot", {
"name": "title",
"title": itemOption.label,
"option": itemOption
}, [itemOption.label])]), itemOption.subLabel && props.showSubLabel && (0, _vue.createVNode)("div", {
"class": "sub-title"
}, [(0, _vue.createVNode)("slot", {
"name": "subLabel",
"sub-label": itemOption.subLabel,
"option": itemOption
}, [itemOption.subLabel])])]), props.showImage && (0, _vue.createVNode)("div", {
"class": "j-card-image"
}, [(0, _vue.createVNode)("slot", {
"name": "image",
"image": itemOption.iconUrl,
"option": itemOption
}, [(0, _vue.createVNode)(_components.Avatar, {
"class": "icon box-shadow",
"src": itemOption.iconUrl
}, null)])])]);
});
var rootCls = (0, _classNames2.default)(prefixClsValue, (0, _defineProperty2.default)({}, hashId.value, true));
return function () {
return wrapSSR((0, _vue.createVNode)("div", {
"class": "".concat(rootCls, " ").concat(props.noColumn ? 'no-column' : '')
}, [!props.noColumn ? (0, _vue.createVNode)(_components.Row, {
"gutter": [16, 16]
}, {
default: function _default() {
return [renderCols];
}
}) : {
renderNoCols: renderNoCols
}]));
};
}
});
var _default2 = CardSelect;
exports.default = _default2;