@jetlinks-web/components 3.0.0-rc → 3.0.1-rc

package/es/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/es/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/es/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/es/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__;

package/es/Skeleton/components/Tree.js

@@ -0,0 +1,65 @@
+/* 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-flex" };
+const _hoisted_5 = { class: "j-skeleton-flex" };
+import Item from "./Item.js";
+const __sfc_main__ = Object.assign({
+    name: 'JSkeletonTree'
+}, {
+    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 }, null, 8 /* PROPS */, ["active"])
+                    ]),
+                    _createElementVNode("div", _hoisted_3, [
+                        _createVNode(Item, {
+                            active: __props.active,
+                            width: "100px"
+                        }, null, 8 /* PROPS */, ["active"])
+                    ]),
+                    (_openBlock(), _createElementBlock(_Fragment, null, _renderList(6, (item) => {
+                        return _createElementVNode("div", _hoisted_4, [
+                            _createVNode(Item, {
+                                active: __props.active,
+                                size: "small"
+                            }, null, 8 /* PROPS */, ["active"])
+                        ]);
+                    }), 64 /* STABLE_FRAGMENT */)),
+                    _createElementVNode("div", _hoisted_5, [
+                        _createVNode(Item, {
+                            active: __props.active,
+                            size: "small",
+                            width: "140px"
+                        }, null, 8 /* PROPS */, ["active"])
+                    ])
+                ]));
+        };
+    }
+});
+export default __sfc_main__;

package/es/Skeleton/index.js

@@ -0,0 +1,15 @@
+import JSkeletonListTable from './components/ListTable.js';
+import JSkeletonListCard from './components/ListCard.js';
+import JSkeletonTree from './components/Tree.js';
+import JSkeletonDetail from './components/Detail.js';
+import JSkeletonDrawer from './components/Drawer.js';
+import JSkeletonDashboardCard from './components/DashBoardCard.js';
+import JSkeletonDashboardChart from './components/DashBoardChart.js';
+import JSkeletonList from './components/List.js';
+import JSkeletonPage from './components/Page.js';
+import Skeleton from './skeleton.js';
+export { JSkeletonDashboardCard, JSkeletonDashboardChart, JSkeletonListTable, JSkeletonListCard, JSkeletonPage, JSkeletonTree, JSkeletonDetail, JSkeletonDrawer, JSkeletonList };
+Skeleton.install = function (app) {
+  app.component(Skeleton.name, Skeleton);
+};
+export default Skeleton;

package/es/Skeleton/skeleton.js

@@ -0,0 +1,49 @@
+/* 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, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode } from "vue";
+const _hoisted_1 = { class: "j-skeleton" };
+const _hoisted_2 = { class: "j-skeleton-flex-column" };
+import Item from "./components/Item.js";
+const __sfc_main__ = Object.assign({
+    name: 'JSkeleton'
+}, {
+    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, [
+                (!__props.loading)
+                    ? _renderSlot(_ctx.$slots, "default", { key: 0 })
+                    : _createCommentVNode("v-if", true),
+                _createElementVNode("div", _hoisted_2, [
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "40%"
+                    }, null, 8 /* PROPS */, ["active"]),
+                    (_openBlock(), _createElementBlock(_Fragment, null, _renderList(3, (item) => {
+                        return _createVNode(Item, { active: __props.active }, null, 8 /* PROPS */, ["active"]);
+                    }), 64 /* STABLE_FRAGMENT */)),
+                    _createVNode(Item, {
+                        active: __props.active,
+                        width: "80%"
+                    }, null, 8 /* PROPS */, ["active"])
+                ])
+            ]));
+        };
+    }
+});
+export default __sfc_main__;

package/es/Skeleton/style/Skeleton.less

@@ -0,0 +1,166 @@
+@j-skeleton-size-lg: 36px;
+@j-skeleton-size-sm: 16px;
+@j-skeleton-size: 24px;
+@j-skeleton-border-radius: 8px;
+@j-skeleton-bg: #f0f2f5;
+@j-skeleton-bg-1: #e6e8eb;
+@j-skeleton-border: 4px solid @j-skeleton-bg;
+
+.j-skeleton-flex {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 16px;
+}
+
+.j-skeleton-flex-between {
+  .j-skeleton-flex();
+  justify-content: space-between;
+  align-items: center;
+}
+
+.j-skeleton-flex-column {
+  .j-skeleton-flex();
+  justify-content: space-between;
+}
+
+.j-skeleton {
+  height: 100%;
+  &-item {
+    background: linear-gradient(90deg, @j-skeleton-bg 25%, @j-skeleton-bg-1 50%, @j-skeleton-bg 75%);
+    background-size: 400% 100%;
+    border-radius: @j-skeleton-border-radius;
+    height: @j-skeleton-size;
+  }
+
+  &-item-active {
+    animation: wave 1.8s ease-in-out infinite;
+  }
+
+  &-item-lg {
+    height: @j-skeleton-size-lg;
+  }
+
+  &-item-sm {
+    height: @j-skeleton-size-sm;
+  }
+
+  @keyframes wave {
+    0% { background-position: 200% 0 }
+    100% { background-position: -200% 0 }
+  }
+
+  &-dashboard-card {
+    .j-skeleton-flex();
+    border: @j-skeleton-border;
+    border-radius: @j-skeleton-border-radius;
+    height: 100%;
+    padding: 24px;
+    flex-direction: column;
+  }
+
+  &-tabs {
+    display: flex;
+    gap: 16px;
+    margin: 60px 0 20px 0;
+    border-bottom: @j-skeleton-border;
+    padding: 16px 0;
+  }
+
+  &-desc {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 24px;
+
+    &-content {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 36px;
+      margin-top: 24px;
+    }
+
+    &-item {
+      display: flex;
+      gap: 16px;
+    }
+  }
+
+  &-box {
+    border-bottom: @j-skeleton-border;
+    padding: 16px 0;
+  }
+
+  &-table-cell {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) 200px;
+    gap: 24px;
+    padding: 12px 6px;
+    border-radius: 8px;
+  }
+
+  &-table-header {
+    background-color: lightgrey;
+  }
+
+  &-table-action {
+    width: 200px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    gap: 24px;
+  }
+
+  &-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+  }
+
+  &-card {
+    .j-skeleton-card-content {
+      display: flex;
+      gap: 16px;
+      border: 2px solid #f0f2f5;
+      border-radius: 8px;
+      padding: 24px;
+      margin-bottom: 16px;
+
+      .j-skeleton-image {
+        width: 100px;
+        height: 100px;
+      }
+
+      .j-skeleton-right {
+        flex: 1;
+        min-width: 200px;
+
+        .j-skeleton-right-content {
+          display: flex;
+          gap: 16px;
+          margin-top: 16px;
+
+          .j-skeleton-right-content-item {
+            flex: 1;
+            min-width: 100px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+          }
+        }
+      }
+    }
+
+    .j-skeleton-action {
+      display: flex;
+      justify-content: flex-end;
+      gap: 16px;
+
+      .btn {
+        flex: 1;
+        min-width: 100px;
+      }
+
+      .delete {
+        flex: 0 0 100px;
+      }
+    }
+  }
+}

package/es/Skeleton/style/index.js

@@ -0,0 +1 @@
+import './Skeleton.less';

package/es/Title/style/index.css

@@ -1,3 +1,7 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
 .j-title {
   display: flex;
   align-items: center;

package/es/Title/style/index.less

@@ -1,3 +1,5 @@
+@import 'ant-design-vue/es/style/themes/index.less';
+
 .j-title {
   display: flex;
   align-items: center;
@@ -17,7 +19,7 @@
       left: 0;
       width: 4px;
       height: 100%;
-      background-color: #1890ff;
+      background-color: @primary-color;
       border-radius: 0 3px 3px 0;
       content: ' ';
     }

package/es/components.js

@@ -20,4 +20,5 @@ export { default as EditTable } from './EditTable';
 export { default as Markdown } from './Markdown';
 export { default as AutoComplete } from './AutoComplete';
 export { default as Title } from './Title';
-export { default as FlameGraph } from './FlameGraph';
+export { default as FlameGraph } from './FlameGraph';
+export { default as Skeleton } from './Skeleton';