mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
207 lines • 9.45 kB
JavaScript
function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) {
const op = ops[i];
const fn = ops[i + 1];
i += 2;
if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
return undefined;
}
if (op === 'access' || op === 'optionalAccess') {
lastAccessLHS = value;
value = fn(value);
}
else if (op === 'call' || op === 'optionalCall') {
value = fn((...args) => value.call(lastAccessLHS, ...args));
lastAccessLHS = undefined;
}
} return value; }
/* Analyzed bindings: {
"width": "props",
"cardData": "props",
"name": "props",
"status": "props",
"actions": "props",
"moreActions": "props",
"Badge": "setup-maybe-ref",
"Popover": "setup-maybe-ref",
"JButton": "setup-maybe-ref",
"ref": "setup-const",
"ActionType": "setup-maybe-ref",
"StatusType": "setup-maybe-ref",
"AIcon": "setup-maybe-ref",
"props": "setup-reactive-const",
"getRgb": "setup-const",
"visible": "setup-ref",
"handleClick": "setup-const"
} */
import { defineComponent as _defineComponent } from 'vue';
import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, unref as _unref, createVNode as _createVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, createBlock as _createBlock, createTextVNode as _createTextVNode, withCtx as _withCtx } from "vue";
const _hoisted_1 = { class: "table-card-title" };
const _hoisted_2 = { class: "table-card-content" };
const _hoisted_3 = { class: "table-card-btns" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = {
key: 0,
class: "card-btn-more"
};
const _hoisted_6 = ["onClick"];
import { Badge, Popover } from 'ant-design-vue';
import JButton from '../Button';
import { ref } from 'vue';
import { StatusType } from './tablecardType';
import { AIcon } from '../components';
const __sfc_main__ = _defineComponent({
props: {
/**
* 卡片样式
*/
width: {
type: String,
default: '400px',
},
/**
* 卡片数据，用于按钮操作传递数据
*/
cardData: {
type: Object,
default: () => { },
},
/**
* 卡片title名称
*/
name: {
type: String,
default: '',
},
/**
* 卡片状态
*/
status: {
type: Object,
default: () => { },
},
/**
* 卡片按钮
*/
actions: {
type: Array,
default: () => [],
},
moreActions: {
type: Array,
default: () => [],
},
},
setup(__props) {
const props = __props;
const getRgb = (str, opacity) => {
if (!str) {
return;
}
var arr = str.split('');
var myred = arr[1] + arr[2];
var mygreen = arr[3] + arr[4];
var myblue = arr[5] + arr[6];
return `rgba(${parseInt(myred, 16)}, ${parseInt(mygreen, 16)}, ${parseInt(myblue, 16)}, ${opacity})`;
};
const visible = ref(false);
const handleClick = (item) => {
visible.value = false;
item.onClick(props.cardData);
};
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock("div", {
class: "costom-table-card",
style: _normalizeStyle({ width: __props.width })
}, [
_createElementVNode("div", _hoisted_1, [
_createElementVNode("span", null, _toDisplayString(__props.name), 1 /* TEXT */)
]),
(__props.status)
? (_openBlock(), _createElementBlock("div", {
key: 0,
class: "table-card-status",
style: _normalizeStyle({
backgroundColor: __props.status.color
? getRgb(__props.status.color, 0.3)
: getRgb(_unref(StatusType)[__props.status.value], 0.3),
})
}, [
_createVNode(_unref(Badge), {
color: _optionalChain([__props, 'access', _2 => _2.status, 'optionalAccess', _3 => _3.color]) ? _optionalChain([__props, 'access', _4 => _4.status, 'optionalAccess', _5 => _5.color]) : _unref(StatusType)[__props.status.value],
text: _optionalChain([__props, 'access', _6 => _6.status, 'optionalAccess', _7 => _7.text])
}, null, 8 /* PROPS */, ["color", "text"])
], 4 /* STYLE */))
: _createCommentVNode("v-if", true),
_createElementVNode("div", _hoisted_2, [
_renderSlot(_ctx.$slots, "content")
]),
_createElementVNode("div", _hoisted_3, [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(__props.actions.filter((val, index) => index < 3), (item) => {
return (_openBlock(), _createElementBlock("div", {
key: item.name,
class: "card-btn",
onClick: ($event) => (handleClick(item))
}, [
_createVNode(_unref(JButton), {
type: "link",
disabled: item.disabled
}, {
icon: _withCtx(() => [
(item.icon)
? (_openBlock(), _createBlock(_unref(AIcon), {
key: 0,
type: item.icon
}, null, 8 /* PROPS */, ["type"]))
: _createCommentVNode("v-if", true)
]),
default: _withCtx(() => [
_createTextVNode(_toDisplayString(item.name) + " ", 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled"])
], 8 /* PROPS */, _hoisted_4));
}), 128 /* KEYED_FRAGMENT */)),
(_optionalChain([__props, 'access', _8 => _8.moreActions, 'optionalAccess', _9 => _9.length]))
? (_openBlock(), _createElementBlock("div", _hoisted_5, [
_createVNode(_unref(Popover), {
visible: visible.value,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => ((visible).value = $event)),
trigger: "click",
placement: "bottomRight",
"overlay-class-name": "card-popover"
}, {
content: _withCtx(() => [
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(__props.moreActions, (item) => {
return (_openBlock(), _createElementBlock("div", {
key: item.name,
class: "card-popover-item",
onClick: ($event) => (handleClick(item))
}, [
(item.icon)
? (_openBlock(), _createBlock(_unref(AIcon), {
key: 0,
type: item.icon
}, null, 8 /* PROPS */, ["type"]))
: _createCommentVNode("v-if", true),
_createElementVNode("span", null, _toDisplayString(item.name), 1 /* TEXT */)
], 8 /* PROPS */, _hoisted_6));
}), 128 /* KEYED_FRAGMENT */))
]),
default: _withCtx(() => [
_createVNode(_unref(JButton), { type: "link" }, {
default: _withCtx(() => [
_createTextVNode("...")
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["visible"])
]))
: _createCommentVNode("v-if", true)
])
], 4 /* STYLE */));
};
}
});
export default __sfc_main__;