@jetlinks-web/components 2.6.12 → 3.0.1-rc

package/lib/Skeleton/components/Detail.js

@@ -0,0 +1,104 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "Item": "setup-const",
+  "defineOptions": "setup-const",
+  "props": "setup-reactive-const"
+} */
+import { renderSlot as _renderSlot, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+    key: 1,
+    class: "j-skeleton"
+};
+const _hoisted_2 = { class: "j-skeleton-flex" };
+const _hoisted_3 = { class: "j-skeleton-flex" };
+const _hoisted_4 = { class: "j-skeleton-tabs" };
+const _hoisted_5 = /*#__PURE__*/ _createElementVNode("div", {
+    class: "j-skeleton-item j-skeleton-item-large",
+    style: { "width": "300px" }
+}, null, -1 /* HOISTED */);
+const _hoisted_6 = { class: "j-skeleton-desc-content" };
+import Item from "./Item.js";
+const __sfc_main__ = Object.assign({
+    name: 'JSkeletonDetail'
+}, {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        return (_ctx, _cache) => {
+            return (!__props.loading)
+                ? _renderSlot(_ctx.$slots, "default", { key: 0 })
+                : (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                    _createElementVNode("div", _hoisted_2, [
+                        _createVNode(Item, {
+                            active: __props.active,
+                            width: "40%"
+                        }, null, 8 /* PROPS */, ["active"])
+                    ]),
+                    _createElementVNode("div", _hoisted_3, [
+                        _createVNode(Item, {
+                            active: __props.active,
+                            size: "small",
+                            width: "15%"
+                        }, null, 8 /* PROPS */, ["active"]),
+                        _createVNode(Item, {
+                            active: __props.active,
+                            size: "small",
+                            width: "15%"
+                        }, null, 8 /* PROPS */, ["active"])
+                    ]),
+                    _createElementVNode("div", _hoisted_4, [
+                        (_openBlock(), _createElementBlock(_Fragment, null, _renderList(5, (item) => {
+                            return _createElementVNode("div", {
+                                key: item,
+                                class: "j-skeleton-flex"
+                            }, [
+                                _createVNode(Item, {
+                                    active: __props.active,
+                                    size: "small",
+                                    width: "80px"
+                                }, null, 8 /* PROPS */, ["active"])
+                            ]);
+                        }), 64 /* STABLE_FRAGMENT */))
+                    ]),
+                    (_openBlock(), _createElementBlock(_Fragment, null, _renderList(2, (item) => {
+                        return _createElementVNode("div", {
+                            class: "j-skeleton-desc",
+                            key: item
+                        }, [
+                            _hoisted_5,
+                            _createElementVNode("div", _hoisted_6, [
+                                (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (i) => {
+                                    return _createElementVNode("div", {
+                                        class: "j-skeleton-desc-item",
+                                        key: i
+                                    }, [
+                                        _createVNode(Item, {
+                                            active: __props.active,
+                                            size: "small",
+                                            width: "40%"
+                                        }, null, 8 /* PROPS */, ["active"]),
+                                        _createVNode(Item, {
+                                            active: __props.active,
+                                            size: "small",
+                                            width: "60%"
+                                        }, null, 8 /* PROPS */, ["active"])
+                                    ]);
+                                }), 64 /* STABLE_FRAGMENT */))
+                            ])
+                        ]);
+                    }), 64 /* STABLE_FRAGMENT */))
+                ]));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/Skeleton/components/Drawer.js

@@ -0,0 +1,82 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "Item": "setup-const",
+  "defineOptions": "setup-const",
+  "props": "setup-reactive-const"
+} */
+import { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "j-skeleton" };
+const _hoisted_2 = { class: "j-skeleton-box" };
+const _hoisted_3 = { class: "j-skeleton-desc" };
+const _hoisted_4 = { style: { "margin-top": "16px" } };
+const _hoisted_5 = {
+    class: "j-skeleton-desc-content",
+    style: { "grid-template-columns": "repeat(2, 1fr)" }
+};
+import Item from "./Item.js";
+const __sfc_main__ = Object.assign({
+    name: 'JSkeletonDrawer'
+}, {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock(_Fragment, null, [
+                (!__props.loading)
+                    ? _renderSlot(_ctx.$slots, "default", { key: 0 })
+                    : _createCommentVNode("v-if", true),
+                _createElementVNode("div", _hoisted_1, [
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "70%"
+                    }, null, 8 /* PROPS */, ["active"]),
+                    _createElementVNode("div", _hoisted_2, [
+                        _createVNode(Item, {
+                            active: __props.active,
+                            size: "small",
+                            width: "35%"
+                        }, null, 8 /* PROPS */, ["active"])
+                    ]),
+                    _createElementVNode("div", _hoisted_3, [
+                        _createElementVNode("div", _hoisted_4, [
+                            _createVNode(Item, {
+                                active: __props.active,
+                                width: "300px"
+                            }, null, 8 /* PROPS */, ["active"])
+                        ]),
+                        _createElementVNode("div", _hoisted_5, [
+                            (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (i) => {
+                                return _createElementVNode("div", {
+                                    class: "j-skeleton-desc-item",
+                                    key: i
+                                }, [
+                                    _createVNode(Item, {
+                                        active: __props.active,
+                                        size: "small",
+                                        width: "40%"
+                                    }, null, 8 /* PROPS */, ["active"]),
+                                    _createVNode(Item, {
+                                        active: __props.active,
+                                        size: "small",
+                                        width: "60%"
+                                    }, null, 8 /* PROPS */, ["active"])
+                                ]);
+                            }), 64 /* STABLE_FRAGMENT */))
+                        ])
+                    ])
+                ])
+            ], 64 /* STABLE_FRAGMENT */));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/Skeleton/components/Item.js

@@ -0,0 +1,60 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "size": "props",
+  "width": "props",
+  "computed": "setup-const",
+  "props": "setup-reactive-const",
+  "_className": "setup-ref",
+  "sizeStyle": "setup-ref"
+} */
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { computed } from 'vue';
+const __sfc_main__ = {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        size: {
+            type: [String, Number],
+            default: 'default',
+        },
+        width: {
+            type: [String, Number],
+            default: '100%',
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        const _className = computed(() => {
+            const { active, size } = props;
+            return {
+                'j-skeleton-item': true,
+                'j-skeleton-item-active': active,
+                'j-skeleton-item-lg': size === 'large',
+                'j-skeleton-item-sm': size === 'small',
+            };
+        });
+        const sizeStyle = computed(() => {
+            const { size, width } = props;
+            if (typeof size === 'number') {
+                return {
+                    height: `${size}px`,
+                    width: `${width}px`,
+                };
+            }
+            else {
+                return {
+                    width: typeof size === 'number' ? `${width}px` : width,
+                };
+            }
+        });
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(_className.value),
+                style: _normalizeStyle(sizeStyle.value)
+            }, null, 6 /* CLASS, STYLE */));
+        };
+    }
+};
+export default __sfc_main__;

package/lib/Skeleton/components/List.js

@@ -0,0 +1,46 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "mode": "props",
+  "ListCard": "setup-const",
+  "ListTable": "setup-const",
+  "Search": "setup-const",
+  "defineOptions": "setup-const",
+  "props": "setup-reactive-const"
+} */
+import { renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, Fragment as _Fragment, createElementBlock as _createElementBlock } from "vue";
+import ListCard from "./ListCard.js";
+import ListTable from "./ListTable.js";
+import Search from "./Search.js";
+const __sfc_main__ = Object.assign({
+    name: 'JSkeletonList'
+}, {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        },
+        mode: {
+            type: [String, undefined],
+            default: 'TABLE',
+        },
+    },
+    setup(__props) {
+        const props = __props;
+        return (_ctx, _cache) => {
+            return (!__props.loading)
+                ? _renderSlot(_ctx.$slots, "default", { key: 0 })
+                : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
+                    _createVNode(Search, { active: "" }),
+                    (__props.mode !== 'TABLE')
+                        ? (_openBlock(), _createBlock(ListCard, { key: 0 }))
+                        : (_openBlock(), _createBlock(ListTable, { key: 1 }))
+                ], 64 /* STABLE_FRAGMENT */));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/Skeleton/components/ListCard.js

@@ -0,0 +1,56 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "Item": "setup-const",
+  "ListCardItem": "setup-const",
+  "defineOptions": "setup-const",
+  "props": "setup-reactive-const"
+} */
+import { renderSlot as _renderSlot, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+    key: 1,
+    class: "j-skeleton"
+};
+const _hoisted_2 = { class: "j-skeleton-flex" };
+const _hoisted_3 = { class: "j-skeleton-cards" };
+import Item from "./Item.js";
+import ListCardItem from "./ListCardItem.js";
+const __sfc_main__ = Object.assign({
+    name: 'JSkeletonListCard'
+}, {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        return (_ctx, _cache) => {
+            return (!__props.loading)
+                ? _renderSlot(_ctx.$slots, "default", { key: 0 })
+                : (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                    _createElementVNode("div", _hoisted_2, [
+                        _createVNode(Item, {
+                            active: __props.active,
+                            width: "100px"
+                        }, null, 8 /* PROPS */, ["active"]),
+                        _createVNode(Item, {
+                            active: __props.active,
+                            width: "100px"
+                        }, null, 8 /* PROPS */, ["active"])
+                    ]),
+                    _createElementVNode("div", _hoisted_3, [
+                        (_openBlock(), _createElementBlock(_Fragment, null, _renderList(9, (item) => {
+                            return _createVNode(ListCardItem, { key: item });
+                        }), 64 /* STABLE_FRAGMENT */))
+                    ])
+                ]));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/Skeleton/components/ListCardItem.js

@@ -0,0 +1,87 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "Item": "setup-const",
+  "props": "setup-reactive-const"
+} */
+import { createElementVNode as _createElementVNode, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "j-skeleton-card" };
+const _hoisted_2 = { class: "j-skeleton-card-content" };
+const _hoisted_3 = /*#__PURE__*/ _createElementVNode("div", { class: "j-skeleton-item j-skeleton-image" }, null, -1 /* HOISTED */);
+const _hoisted_4 = { class: "j-skeleton-right" };
+const _hoisted_5 = { style: { "margin-bottom": "16px" } };
+const _hoisted_6 = { class: "j-skeleton-right-content" };
+const _hoisted_7 = { class: "j-skeleton-right-content-item" };
+const _hoisted_8 = { class: "j-skeleton-right-content-item" };
+const _hoisted_9 = { class: "j-skeleton-action" };
+import Item from "./Item.js";
+const __sfc_main__ = {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                _createElementVNode("div", _hoisted_2, [
+                    _hoisted_3,
+                    _createElementVNode("div", _hoisted_4, [
+                        _createElementVNode("div", _hoisted_5, [
+                            _createVNode(Item, {
+                                active: __props.active,
+                                size: "small",
+                                width: "200px"
+                            }, null, 8 /* PROPS */, ["active"])
+                        ]),
+                        _createVNode(Item, {
+                            active: __props.active,
+                            width: "50%"
+                        }, null, 8 /* PROPS */, ["active"]),
+                        _createElementVNode("div", _hoisted_6, [
+                            _createElementVNode("div", _hoisted_7, [
+                                _createVNode(Item, {
+                                    active: __props.active,
+                                    size: "small",
+                                    width: "100%"
+                                }, null, 8 /* PROPS */, ["active"]),
+                                _createVNode(Item, {
+                                    active: __props.active,
+                                    size: "small",
+                                    width: "90%"
+                                }, null, 8 /* PROPS */, ["active"])
+                            ]),
+                            _createElementVNode("div", _hoisted_8, [
+                                _createVNode(Item, {
+                                    active: __props.active,
+                                    size: "small",
+                                    width: "100%"
+                                }, null, 8 /* PROPS */, ["active"]),
+                                _createVNode(Item, {
+                                    active: __props.active,
+                                    size: "small",
+                                    width: "90%"
+                                }, null, 8 /* PROPS */, ["active"])
+                            ])
+                        ])
+                    ])
+                ]),
+                _createElementVNode("div", _hoisted_9, [
+                    _createVNode(Item, { active: __props.active }, null, 8 /* PROPS */, ["active"]),
+                    _createVNode(Item, { active: __props.active }, null, 8 /* PROPS */, ["active"]),
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "100px"
+                    }, null, 8 /* PROPS */, ["active"])
+                ])
+            ]));
+        };
+    }
+};
+export default __sfc_main__;

package/lib/Skeleton/components/ListTable.js

@@ -0,0 +1,67 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "Item": "setup-const",
+  "defineOptions": "setup-const",
+  "props": "setup-reactive-const"
+} */
+import { createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "j-skeleton" };
+const _hoisted_2 = { class: "j-skeleton-flex" };
+const _hoisted_3 = { class: "j-skeleton-table" };
+import Item from "./Item.js";
+const __sfc_main__ = Object.assign({
+    name: 'JSkeletonListTable'
+}, {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                _createElementVNode("div", _hoisted_2, [
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "100px"
+                    }, null, 8 /* PROPS */, ["active"]),
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "100px"
+                    }, null, 8 /* PROPS */, ["active"])
+                ]),
+                _createElementVNode("div", _hoisted_3, [
+                    (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
+                        return _createElementVNode("div", {
+                            key: item,
+                            class: _normalizeClass(["j-skeleton-table-cell", { 'j-skeleton-table-header': item === 1 }])
+                        }, [
+                            (_openBlock(), _createElementBlock(_Fragment, null, _renderList(4, (i) => {
+                                return _createElementVNode("div", {
+                                    class: _normalizeClass({ 'j-skeleton-table-action': i === 4 })
+                                }, [
+                                    (i !== 4 || item === 1)
+                                        ? (_openBlock(), _createBlock(Item, {
+                                            key: 0,
+                                            active: __props.active
+                                        }, null, 8 /* PROPS */, ["active"]))
+                                        : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, _renderList(3, (_i) => {
+                                            return _createVNode(Item, { active: __props.active }, null, 8 /* PROPS */, ["active"]);
+                                        }), 64 /* STABLE_FRAGMENT */))
+                                ], 2 /* CLASS */);
+                            }), 64 /* STABLE_FRAGMENT */))
+                        ], 2 /* CLASS */);
+                    }), 64 /* STABLE_FRAGMENT */))
+                ])
+            ]));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/Skeleton/components/Page.js

@@ -0,0 +1,63 @@
+/* Analyzed bindings: {
+  "type": "props",
+  "active": "props",
+  "loading": "props",
+  "List": "setup-const",
+  "Detail": "setup-const",
+  "defineOptions": "setup-const",
+  "props": "setup-reactive-const"
+} */
+import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { style: { "padding": "24px", "background-color": "#ffffff", "height": "100%" } };
+import List from "./List.js";
+import Detail from "./Detail.js";
+const __sfc_main__ = Object.assign({
+    name: 'JSkeletonPage'
+}, {
+    props: {
+        type: {
+            type: String,
+            default: 'list', // detail
+        },
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                (__props.type === 'list')
+                    ? (_openBlock(), _createBlock(List, {
+                        key: 0,
+                        loading: __props.loading,
+                        active: ""
+                    }, {
+                        default: _withCtx(() => [
+                            _renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3 /* FORWARDED */
+                    }, 8 /* PROPS */, ["loading"]))
+                    : _createCommentVNode("v-if", true),
+                (__props.type === 'detail')
+                    ? (_openBlock(), _createBlock(Detail, {
+                        key: 1,
+                        loading: __props.loading,
+                        active: ""
+                    }, {
+                        default: _withCtx(() => [
+                            _renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3 /* FORWARDED */
+                    }, 8 /* PROPS */, ["loading"]))
+                    : _renderSlot(_ctx.$slots, "default", { key: 2 })
+            ]));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/Skeleton/components/Search.js

@@ -0,0 +1,54 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "Item": "setup-const",
+  "props": "setup-reactive-const"
+} */
+import { createVNode as _createVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "j-skeleton-flex-between" };
+const _hoisted_2 = { class: "j-skeleton-flex" };
+const _hoisted_3 = { class: "j-skeleton-flex" };
+import Item from "./Item.js";
+const __sfc_main__ = {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                _createElementVNode("div", _hoisted_2, [
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "120px"
+                    }, null, 8 /* PROPS */, ["active"]),
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "120px"
+                    }, null, 8 /* PROPS */, ["active"]),
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "300px"
+                    }, null, 8 /* PROPS */, ["active"])
+                ]),
+                _createElementVNode("div", _hoisted_3, [
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "100px"
+                    }, null, 8 /* PROPS */, ["active"]),
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "100px"
+                    }, null, 8 /* PROPS */, ["active"]),
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "100px"
+                    }, null, 8 /* PROPS */, ["active"])
+                ])
+            ]));
+        };
+    }
+};
+export default __sfc_main__;