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