xdesign-vue-next
Version:
XDesign Component for vue-next
213 lines (206 loc) • 8.89 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { createElementVNode, openBlock, createElementBlock, defineComponent, ref, createVNode, onMounted, onBeforeUnmount } from 'vue';
import { _ as __unplugin_components_4 } from '../_chunks/dep-8120ed5b.mjs';
import { _ as __unplugin_components_1 } from '../_chunks/dep-07473300.mjs';
import { _ as __unplugin_components_0$1 } from '../_chunks/dep-7b4b2cfc.mjs';
import { _ as __unplugin_components_0 } from '../_chunks/dep-bd64cde8.mjs';
import { _ as _defineProperty } from '../_chunks/dep-f9e836af.mjs';
import { i as isString_1 } from '../_chunks/dep-11fa9c2c.mjs';
import { i as isArray_1 } from '../_chunks/dep-a95026f2.mjs';
import { addClass, on, off } from '../utils/dom.mjs';
import props from './props.mjs';
import { useIcon } from '../hooks/icon.mjs';
import { usePrefixClass } from '../hooks/useConfig.mjs';
import { useTNodeJSX } from '../hooks/tnode.mjs';
import { useConfig } from '../config-provider/useConfig.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../_chunks/dep-1cc1c24f.mjs';
import '../_chunks/dep-6ad18815.mjs';
import '../utils/easing.mjs';
import '../_chunks/dep-a628549d.mjs';
import '../_chunks/dep-4903a8a8.mjs';
import '../_chunks/dep-7dcfa37a.mjs';
import '../_chunks/dep-f4eba04c.mjs';
import '../_chunks/dep-735bcd0d.mjs';
import '../_chunks/dep-765678ef.mjs';
import '../_chunks/dep-8db27830.mjs';
import '../_chunks/dep-ae4bffa5.mjs';
import '../utils/render-tnode.mjs';
import '../_chunks/dep-9d7ebc32.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../config-provider/type.mjs';
const _hoisted_1 = {
class: "x-icon",
viewBox: "0 0 24 24",
width: "1.1em",
height: "1.1em"
};
const _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
fill: "currentColor",
d: "m12 10.586l4.95-4.95l1.415 1.415l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.95 4.95l-1.413-1.415l4.95-4.95l-4.95-4.95L7.05 5.638l4.95 4.95Z"
}, null, -1 /* HOISTED */);
const _hoisted_3 = [
_hoisted_2
];
function render(_ctx, _cache) {
return (openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3))
}
var __unplugin_components_5 = { name: 'ri-close-fill', render };
/* vite-plugin-components disabled */
var _Alert = defineComponent({
name: "XAlert",
props: props,
setup: function setup(props2) {
var _useConfig = useConfig("alert"),
globalConfig = _useConfig.globalConfig,
classPrefix = _useConfig.classPrefix;
var COMPONENT_NAME = usePrefixClass("alert");
var renderTNodeJSX = useTNodeJSX();
var renderIconTNode = useIcon();
var alertRef = ref(null);
var descriptionRef = ref(null);
var descHeight = ref(0);
var visible = ref(true);
var collapsed = ref(true);
var renderIcon = function renderIcon() {
var Component = {
info: createVNode(__unplugin_components_0, null, null),
success: createVNode(__unplugin_components_0$1, null, null),
warning: createVNode(__unplugin_components_1, null, null),
error: createVNode(__unplugin_components_1, null, null),
question: createVNode(__unplugin_components_4, null, null)
};
var iconContent = renderIconTNode("icon", Component);
return iconContent ? createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__icon")
}, [iconContent]) : null;
};
var renderClose = function renderClose() {
var close = props2.close;
var closeContent = null;
if (close === true || close === "") {
closeContent = createVNode(__unplugin_components_5, null, null);
} else if (isString_1(close)) {
closeContent = close;
} else {
closeContent = renderIconTNode("close");
}
return closeContent ? createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__close"),
"onClick": handleClose
}, [closeContent]) : null;
};
var renderTitle = function renderTitle() {
var titleContent = renderTNodeJSX("title");
return titleContent ? createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__title")
}, [" ", titleContent]) : null;
};
var renderMessage = function renderMessage() {
var operationContent = renderTNodeJSX("operation");
return createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__message")
}, [renderDescription(), operationContent ? createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__operation")
}, [operationContent]) : null]);
};
var renderDescription = function renderDescription() {
var _descriptionRef$value;
var messageContent;
messageContent = renderTNodeJSX("default");
if (!messageContent) {
messageContent = renderTNodeJSX("message");
}
var contentLength = isArray_1(messageContent) ? messageContent.length : 1;
var hasCollapse = props2.maxLine > 0 && props2.maxLine < contentLength;
var height = (_descriptionRef$value = descriptionRef.value) === null || _descriptionRef$value === void 0 || (_descriptionRef$value = _descriptionRef$value.children[0]) === null || _descriptionRef$value === void 0 ? void 0 : _descriptionRef$value.offsetHeight;
if (hasCollapse && collapsed.value) {
messageContent = messageContent.slice(0, props2.maxLine);
height && (descriptionRef.value.style.height = "".concat(descHeight.value, "px"));
} else if (hasCollapse) {
height && (descriptionRef.value.style.height = "".concat(height * (contentLength - props2.maxLine) + descHeight.value, "px"));
}
return createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__description"),
"ref": descriptionRef
}, [hasCollapse ? messageContent.map(function (content) {
return createVNode("div", null, [content]);
}) : messageContent, hasCollapse ? createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__collapse"),
"onClick": function onClick() {
collapsed.value = !collapsed.value;
}
}, [collapsed.value ? globalConfig.value.expandText : globalConfig.value.collapseText]) : null]);
};
var renderContent = function renderContent() {
return createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__content")
}, [renderTitle(), renderMessage()]);
};
var handleClose = function handleClose(e) {
var _props2$onClose;
(_props2$onClose = props2.onClose) === null || _props2$onClose === void 0 ? void 0 : _props2$onClose.call(props2, {
e: e
});
addClass(alertRef.value, "".concat(COMPONENT_NAME.value, "--closing"));
};
var handleCloseEnd = function handleCloseEnd(e) {
var isTransitionTarget = e.target === alertRef.value;
if (e.propertyName === "opacity" && isTransitionTarget) {
var _props2$onClosed;
visible.value = false;
(_props2$onClosed = props2.onClosed) === null || _props2$onClosed === void 0 ? void 0 : _props2$onClosed.call(props2, {
e: e
});
}
};
onMounted(function () {
on(alertRef.value, "transitionend", handleCloseEnd);
descHeight.value = descriptionRef.value.offsetHeight;
});
onBeforeUnmount(function () {
off(alertRef.value, "transitionend", handleCloseEnd);
});
return function () {
return createVNode("div", {
"ref": alertRef,
"class": ["".concat(COMPONENT_NAME.value), "".concat(COMPONENT_NAME.value, "--").concat(props2.theme), _defineProperty({}, "".concat(classPrefix.value, "-is-hidden"), !visible.value)]
}, [renderIcon(), renderContent(), renderClose()]);
};
}
});
export { _Alert as default };
//# sourceMappingURL=alert.mjs.map