@jetlinks-web/components 2.6.12 → 3.0.1-rc

package/lib/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/lib/Skeleton/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "JSkeletonDashboardCard", {
+  enumerable: true,
+  get: function get() {
+    return _DashBoardCard.default;
+  }
+});
+Object.defineProperty(exports, "JSkeletonDashboardChart", {
+  enumerable: true,
+  get: function get() {
+    return _DashBoardChart.default;
+  }
+});
+Object.defineProperty(exports, "JSkeletonDetail", {
+  enumerable: true,
+  get: function get() {
+    return _Detail.default;
+  }
+});
+Object.defineProperty(exports, "JSkeletonDrawer", {
+  enumerable: true,
+  get: function get() {
+    return _Drawer.default;
+  }
+});
+Object.defineProperty(exports, "JSkeletonList", {
+  enumerable: true,
+  get: function get() {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "JSkeletonListCard", {
+  enumerable: true,
+  get: function get() {
+    return _ListCard.default;
+  }
+});
+Object.defineProperty(exports, "JSkeletonListTable", {
+  enumerable: true,
+  get: function get() {
+    return _ListTable.default;
+  }
+});
+Object.defineProperty(exports, "JSkeletonPage", {
+  enumerable: true,
+  get: function get() {
+    return _Page.default;
+  }
+});
+Object.defineProperty(exports, "JSkeletonTree", {
+  enumerable: true,
+  get: function get() {
+    return _Tree.default;
+  }
+});
+exports.default = void 0;
+var _ListTable = _interopRequireDefault(require("./components/ListTable.js"));
+var _ListCard = _interopRequireDefault(require("./components/ListCard.js"));
+var _Tree = _interopRequireDefault(require("./components/Tree.js"));
+var _Detail = _interopRequireDefault(require("./components/Detail.js"));
+var _Drawer = _interopRequireDefault(require("./components/Drawer.js"));
+var _DashBoardCard = _interopRequireDefault(require("./components/DashBoardCard.js"));
+var _DashBoardChart = _interopRequireDefault(require("./components/DashBoardChart.js"));
+var _List = _interopRequireDefault(require("./components/List.js"));
+var _Page = _interopRequireDefault(require("./components/Page.js"));
+var _skeleton = _interopRequireDefault(require("./skeleton.js"));
+_skeleton.default.install = function (app) {
+  app.component(_skeleton.default.name, _skeleton.default);
+};
+var _default = exports.default = _skeleton.default;

package/lib/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/lib/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/lib/Skeleton/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./Skeleton.less");

package/lib/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/lib/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/lib/ValueItem/ValueItem.js

@@ -34,7 +34,6 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "watch": "setup-const",
   "computed": "setup-const",
   "componentsType": "setup-maybe-ref",
-  "MonacoEditor": "setup-maybe-ref",
   "Select": "setup-maybe-ref",
   "DatePicker": "setup-maybe-ref",
   "TimePicker": "setup-maybe-ref",
@@ -42,27 +41,21 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "InputNumber": "setup-maybe-ref",
   "InputPassword": "setup-maybe-ref",
   "Upload": "setup-maybe-ref",
-  "Modal": "setup-maybe-ref",
   "omit": "setup-maybe-ref",
   "emit": "setup-const",
   "props": "setup-reactive-const",
   "typeMap": "setup-maybe-ref",
   "myValue": "setup-ref",
-  "modalVisible": "setup-ref",
   "objectValue": "setup-ref",
   "bindProps": "setup-ref",
-  "handleItemModalSubmit": "setup-const",
-  "onChange": "setup-const",
-  "monacoCancel": "setup-const"
+  "onChange": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createElementVNode as _createElementVNode, createElementBlock as _createElementBlock } from "vue";
+import { unref as _unref, mergeProps as _mergeProps, openBlock as _openBlock, createBlock as _createBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { class: "value-item-warp" };
-const _hoisted_2 = { style: { "width": "100%", "height": "300px" } };
 import { ref, watch, computed } from 'vue';
 import { componentsType } from './util';
-import { MonacoEditor } from '../index';
-import { Select, DatePicker, TimePicker, Input, InputNumber, InputPassword, Upload, Modal, } from 'ant-design-vue';
+import { Select, DatePicker, TimePicker, Input, InputNumber, InputPassword, Upload, } from 'ant-design-vue';
 import { omit } from "lodash-es";
 const __sfc_main__ = _defineComponent({
     ...{
@@ -106,25 +99,14 @@ const __sfc_main__ = _defineComponent({
         const props = __props;
         const typeMap = new Map(Object.entries(componentsType));
         const myValue = ref(undefined);
-        const modalVisible = ref(false);
         const objectValue = ref('');
         const bindProps = computed(() => {
             return Object.assign(omit(props, ['extraProps']), props.extraProps);
         });
-        const handleItemModalSubmit = () => {
-            myValue.value = objectValue.value.replace(/[\r\n]\s*/g, '');
-            modalVisible.value = false;
-            emit('update:modelValue', objectValue.value);
-            emit('change', objectValue.value);
-        };
         const onChange = (e) => {
             emit('update:modelValue', myValue.value);
             emit('change', e && e.target ? e.target.value : e);
         };
-        const monacoCancel = () => {
-            modalVisible.value = false;
-            objectValue.value = props.modelValue;
-        };
         const handleFileChange = async (info) => {
             if (info.file.status === 'done') {
                 let url = _optionalChain([info, 'access', _2 => _2.file, 'access', _3 => _3.response, 'optionalAccess', _4 => _4.result, 'optionalAccess', _5 => _5.accessUrl]);
@@ -204,22 +186,14 @@ const __sfc_main__ = _defineComponent({
                                             ? (_openBlock(), _createBlock(_unref(Input), _mergeProps({
                                                 key: 6,
                                                 value: myValue.value,
-                                                "onUpdate:value": _cache[8] || (_cache[8] = ($event) => ((myValue).value = $event)),
+                                                "onUpdate:value": _cache[7] || (_cache[7] = ($event) => ((myValue).value = $event)),
                                                 allowClear: ""
-                                            }, bindProps.value, { onChange: onChange }), {
-                                                addonAfter: _withCtx(() => [
-                                                    _createVNode(_component_AIcon, {
-                                                        type: "FormOutlined",
-                                                        onClick: _cache[7] || (_cache[7] = ($event) => (modalVisible.value = true))
-                                                    })
-                                                ]),
-                                                _: 1 /* STABLE */
-                                            }, 16 /* FULL_PROPS */, ["value"]))
+                                            }, bindProps.value, { onChange: onChange }), null, 16 /* FULL_PROPS */, ["value"]))
                                             : (_unref(typeMap).get(__props.itemType) === 'file')
                                                 ? (_openBlock(), _createBlock(_unref(Input), _mergeProps({
                                                     key: 7,
                                                     value: myValue.value,
-                                                    "onUpdate:value": _cache[9] || (_cache[9] = ($event) => ((myValue).value = $event)),
+                                                    "onUpdate:value": _cache[8] || (_cache[8] = ($event) => ((myValue).value = $event)),
                                                     allowClear: "",
                                                     placeholder: "请输入链接"
                                                 }, bindProps.value, { onChange: onChange }), {
@@ -243,39 +217,17 @@ const __sfc_main__ = _defineComponent({
                                                     ? (_openBlock(), _createBlock(_unref(InputPassword), _mergeProps({
                                                         key: 8,
                                                         value: myValue.value,
-                                                        "onUpdate:value": _cache[10] || (_cache[10] = ($event) => ((myValue).value = $event)),
+                                                        "onUpdate:value": _cache[9] || (_cache[9] = ($event) => ((myValue).value = $event)),
                                                         allowClear: "",
                                                         type: "password"
                                                     }, bindProps.value, { onChange: onChange }), null, 16 /* FULL_PROPS */, ["value"]))
                                                     : (_openBlock(), _createBlock(_unref(Input), _mergeProps({
                                                         key: 9,
                                                         value: myValue.value,
-                                                        "onUpdate:value": _cache[11] || (_cache[11] = ($event) => ((myValue).value = $event)),
+                                                        "onUpdate:value": _cache[10] || (_cache[10] = ($event) => ((myValue).value = $event)),
                                                         allowClear: "",
                                                         type: "text"
-                                                    }, bindProps.value, { onChange: onChange }), null, 16 /* FULL_PROPS */, ["value"])),
-                _createCommentVNode(" 代码编辑器弹窗 "),
-                _createVNode(_unref(Modal), {
-                    visible: modalVisible.value,
-                    "onUpdate:visible": _cache[13] || (_cache[13] = ($event) => ((modalVisible).value = $event)),
-                    zIndex: 1100,
-                    "cancel-text": "取消",
-                    "ok-text": "确认",
-                    title: "编辑",
-                    width: "700px",
-                    onCancel: monacoCancel,
-                    onOk: handleItemModalSubmit
-                }, {
-                    default: _withCtx(() => [
-                        _createElementVNode("div", _hoisted_2, [
-                            _createVNode(_unref(MonacoEditor), {
-                                modelValue: objectValue.value,
-                                "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => ((objectValue).value = $event))
-                            }, null, 8 /* PROPS */, ["modelValue"])
-                        ])
-                    ]),
-                    _: 1 /* STABLE */
-                }, 8 /* PROPS */, ["visible"])
+                                                    }, bindProps.value, { onChange: onChange }), null, 16 /* FULL_PROPS */, ["value"]))
             ]));
         };
     }

package/lib/components.js

@@ -101,12 +101,6 @@ Object.defineProperty(exports, "Markdown", {
     return _Markdown.default;
   }
 });
-Object.defineProperty(exports, "MonacoEditor", {
-  enumerable: true,
-  get: function get() {
-    return _MonacoEditor.default;
-  }
-});
 Object.defineProperty(exports, "PageContainer", {
   enumerable: true,
   get: function get() {
@@ -143,6 +137,12 @@ Object.defineProperty(exports, "Search", {
     return _Search.default;
   }
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _Skeleton.default;
+  }
+});
 Object.defineProperty(exports, "TimeFormat", {
   enumerable: true,
   get: function get() {
@@ -171,7 +171,6 @@ var _Ellipsis = _interopRequireDefault(require("./Ellipsis"));
 var _Empty = _interopRequireDefault(require("./Empty"));
 var _FullPage = _interopRequireDefault(require("./FullPage"));
 var _Icon = _interopRequireDefault(require("./Icon"));
-var _MonacoEditor = _interopRequireDefault(require("./MonacoEditor"));
 var _PermissionButton = _interopRequireDefault(require("./PermissionButton"));
 var _ProLayout = _interopRequireWildcard(require("./ProLayout"));
 var _ProTable = _interopRequireDefault(require("./ProTable"));
@@ -185,5 +184,6 @@ var _Markdown = _interopRequireDefault(require("./Markdown"));
 var _AutoComplete = _interopRequireDefault(require("./AutoComplete"));
 var _Title = _interopRequireDefault(require("./Title"));
 var _FlameGraph = _interopRequireDefault(require("./FlameGraph"));
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/style/components.less

@@ -4,7 +4,6 @@
 @import "../EditTable/style/index-pure.less";
 @import "../Ellipsis/style/index-pure.less";
 @import "../FlameGraph/style/index-pure.less";
-@import "../MonacoEditor/style/index-pure.less";
 @import "../RadioButton/style/index-pure.less";
 @import "../Scrollbar/style/index-pure.less";
 @import "../Title/style/index-pure.less";