various-ui
Version:
This is a test version of the Vue 3 component library
292 lines (289 loc) • 13 kB
JavaScript
import { defineComponent, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, Fragment, renderList, normalizeStyle, unref, renderSlot, createTextVNode, toDisplayString, createBlock, mergeProps, withCtx, createVNode, Transition, toHandlers } from 'vue';
import { UiIcon } from '../icon/index.mjs';
import { UiSimplebar } from '../simplebar/index.mjs';
import { UiTooltip, UiTooltipFollow } from '../tooltip/index.mjs';
import { UiTablePropsOption2, UiTableEmits2 } from './src/component.mjs';
import { useComposable } from './src/composable.mjs';
const _hoisted_1 = { class: "ui-table2-header" };
const _hoisted_2 = ["name"];
const _hoisted_3 = { class: "ui-table2-context" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = {
key: 0,
class: "ui-table2-body ui-table2-error"
};
const _hoisted_6 = { class: "ui-table2-row" };
const _hoisted_7 = ["onClick"];
const _hoisted_8 = { class: "ui-table2-row" };
const _hoisted_9 = ["name"];
const _hoisted_10 = { class: "ui-table2-context" };
const _hoisted_11 = {
key: 0,
class: "ui-table2-children"
};
const __default__ = defineComponent({ name: "UiTable2" });
var _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: UiTablePropsOption2,
emits: UiTableEmits2,
setup(__props, { expose: __expose, emit: __emit }) {
const define = __props;
const emits = __emit;
const { ons, refs, nodes, watchs, methods, variable, disposable } = useComposable(define, emits);
const { sorts, childrens } = refs;
const { container, bodys, head, main } = nodes;
const { sort, radio, checkbox, children } = methods;
onMounted(() => {
if (!container.value) return;
else {
variable.observer.value = new ResizeObserver(() => {
var _a;
if (((_a = container.value) == null ? void 0 : _a.clientWidth) && variable.size != container.value.clientWidth) {
variable.size = container.value.clientWidth;
methods.init();
}
});
variable.observer.value.observe(container.value);
}
});
onBeforeUnmount(() => {
var _a, _b;
(_a = variable.observer.value) == null ? void 0 : _a.disconnect();
(_b = watchs.watch_stop) == null ? void 0 : _b.call(watchs);
});
;
__expose({ sort, radio, checkbox, children });
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
"div",
{
class: normalizeClass(["ui-table2", { "ui-table2-selector": ["checkbox", "children", "radio"].includes(_ctx.selector || "") }]),
ref_key: "container",
ref: container
},
[
createCommentVNode(" * \u8868\u683C\u5934\u90E8\u533A\u57DF "),
createElementVNode("div", _hoisted_1, [
createElementVNode(
"div",
{
class: "ui-table2-row",
ref_key: "head",
ref: head
},
[
createCommentVNode(" * \u904D\u5386\u751F\u6210\u8868\u683C\u5217 "),
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.option, (row) => {
return openBlock(), createElementBlock("div", {
class: "ui-table2-column",
key: row.key,
name: row.key,
style: normalizeStyle(unref(disposable).align(row))
}, [
createCommentVNode(" * \u8868\u683C\u6587\u672C\u5185\u5BB9\u533A\u57DF "),
createElementVNode("span", _hoisted_3, [
renderSlot(_ctx.$slots, row.slot || row.key + "_head", { data: row }, () => [
createTextVNode(
toDisplayString(row.name),
1
/* TEXT */
)
])
]),
createCommentVNode(" * \u8868\u683C\u6392\u5E8F\u63A7\u4EF6 "),
row.sort ? (openBlock(), createElementBlock("div", {
key: 0,
class: "ui-table2-sort",
onClick: ($event) => unref(methods).sort(row)
}, [
createElementVNode(
"div",
{
class: normalizeClass(["ui-table2-trigger", { "ui-active": unref(sorts).key == row.key && unref(sorts).value == "asc" }])
},
null,
2
/* CLASS */
),
createElementVNode(
"div",
{
class: normalizeClass(["ui-table2-trigger", { "ui-active": unref(sorts).key == row.key && unref(sorts).value == "desc" }])
},
null,
2
/* CLASS */
)
], 8, _hoisted_4)) : createCommentVNode("v-if", true),
createCommentVNode(" * \u8868\u683C\u989D\u5916\u63A7\u4EF6 "),
row.extra ? (openBlock(), createBlock(
unref(UiTooltip),
mergeProps({
key: 1,
class: "ui-table2-extra",
ref_for: true
}, unref(disposable).extra(row)),
{
content: withCtx(() => [
renderSlot(_ctx.$slots, row.slot || row.key + "_extra", { data: row })
]),
default: withCtx(() => [
createVNode(unref(UiIcon), {
name: row["extra-icon"] || "filter"
}, null, 8, ["name"])
]),
_: 2
/* DYNAMIC */
},
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)) : createCommentVNode("v-if", true),
createCommentVNode(" * \u8868\u683C\u89E3\u91CA\u63A7\u4EF6 "),
row.explain ? (openBlock(), createBlock(unref(UiTooltipFollow), {
key: 2,
class: "ui-table2-explain",
"class-extra-name": row["explain-name"]
}, {
content: withCtx(() => [
renderSlot(_ctx.$slots, row.slot || row.key + "_explain", { data: row }, () => [
createTextVNode(
toDisplayString(row.explain),
1
/* TEXT */
)
])
]),
default: withCtx(() => [
createVNode(unref(UiIcon), {
name: row["explain-icon"] || "explain"
}, null, 8, ["name"])
]),
_: 2
/* DYNAMIC */
}, 1032, ["class-extra-name"])) : createCommentVNode("v-if", true)
], 12, _hoisted_2);
}),
128
/* KEYED_FRAGMENT */
))
],
512
/* NEED_PATCH */
)
]),
createCommentVNode(" * \u8868\u683C\u5185\u5BB9\u533A\u57DF "),
createVNode(unref(UiSimplebar), {
height: _ctx.height,
trigger: "Hover"
}, {
default: withCtx(() => {
var _a;
return [
createElementVNode(
"div",
{
class: "ui-table2-bodys",
ref_key: "main",
ref: main
},
[
createCommentVNode(" * \u65E0\u6570\u636E\u5904\u7406 "),
!((_a = _ctx.data) == null ? void 0 : _a.length) && _ctx.error ? (openBlock(), createElementBlock("div", _hoisted_5, [
createElementVNode(
"div",
_hoisted_6,
toDisplayString(_ctx.error),
1
/* TEXT */
)
])) : (openBlock(), createElementBlock(
Fragment,
{ key: 1 },
[
createCommentVNode(" * \u5185\u5BB9 "),
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.data, (value, index) => {
return openBlock(), createElementBlock("div", mergeProps({
class: "ui-table2-body",
ref_for: true,
ref_key: "bodys",
ref: bodys
}, unref(disposable).body(value, index), {
onClick: ($event) => unref(methods).select(index)
}), [
createCommentVNode(" * \u8868\u683C\u884C "),
createElementVNode("div", _hoisted_8, [
createCommentVNode(" * \u904D\u5386\u751F\u6210\u8868\u683C\u5217 "),
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.option, (row) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["ui-table2-column", row.className]),
name: row.key,
style: normalizeStyle(unref(disposable).align(row))
}, [
createCommentVNode(" * \u8868\u683C\u6587\u672C\u5185\u5BB9\u533A\u57DF "),
createElementVNode("div", _hoisted_10, [
renderSlot(_ctx.$slots, row.slot || row.key, { data: value }, () => [
createTextVNode(
toDisplayString(value[row.key]),
1
/* TEXT */
)
])
])
], 14, _hoisted_9);
}),
256
/* UNKEYED_FRAGMENT */
))
]),
createCommentVNode(" * \u5D4C\u5957\u8868\u683C "),
createVNode(
Transition,
toHandlers(unref(ons).animation),
{
default: withCtx(() => [
unref(childrens).includes(index) ? (openBlock(), createElementBlock("div", _hoisted_11, [
renderSlot(_ctx.$slots, "children", { data: value })
])) : createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
},
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)
], 16, _hoisted_7);
}),
256
/* UNKEYED_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
))
],
512
/* NEED_PATCH */
)
];
}),
_: 3
/* FORWARDED */
}, 8, ["height"])
],
2
/* CLASS */
);
};
}
});
export { _sfc_main as default };
//# sourceMappingURL=index.vue2.mjs.map