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

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/components.js

@@ -137,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() {
@@ -178,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/index.css

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

package/lib/style/index.less

@@ -11,3 +11,4 @@
 @import '../Title/style/index.less';
 @import '../RadioButton/style/index.less';
 @import '../FlameGraph/style/index.less';
+@import '../Skeleton/style/Skeleton.less';

package/lib/style.js

@@ -11,4 +11,5 @@ require("./EditTable/style");
 require("./Scrollbar/style");
 require("./Title/style");
 require("./RadioButton/style");
-require("./FlameGraph/style");
+require("./FlameGraph/style");
+require("./Skeketon/style");