@jetlinks-web/components 3.0.1-rc → 3.1.0

package/es/Skeleton/components/Detail.js

@@ -2,23 +2,21 @@
   "active": "props",
   "loading": "props",
   "Item": "setup-const",
-  "defineOptions": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
-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"
-};
+import { renderSlot as _renderSlot, unref as _unref, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "j-skeleton-flex" };
 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" };
+const _hoisted_3 = { class: "j-skeleton-tabs" };
+const _hoisted_4 = { class: "j-skeleton-desc-content" };
 import Item from "./Item.js";
+import { computed } from "vue";
+import useSkeletonStyle from '../style';
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonDetail'
 }, {
@@ -34,17 +32,22 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
         return (_ctx, _cache) => {
             return (!__props.loading)
                 ? _renderSlot(_ctx.$slots, "default", { key: 0 })
-                : (_openBlock(), _createElementBlock("div", _hoisted_1, [
-                    _createElementVNode("div", _hoisted_2, [
+                : (_openBlock(), _createElementBlock("div", {
+                    key: 1,
+                    class: _normalizeClass(['j-skeleton', _unref(hashId)])
+                }, [
+                    _createElementVNode("div", _hoisted_1, [
                         _createVNode(Item, {
                             active: __props.active,
                             width: "40%"
                         }, null, 8 /* PROPS */, ["active"])
                     ]),
-                    _createElementVNode("div", _hoisted_3, [
+                    _createElementVNode("div", _hoisted_2, [
                         _createVNode(Item, {
                             active: __props.active,
                             size: "small",
@@ -56,7 +59,7 @@ const __sfc_main__ = Object.assign({
                             width: "15%"
                         }, null, 8 /* PROPS */, ["active"])
                     ]),
-                    _createElementVNode("div", _hoisted_4, [
+                    _createElementVNode("div", _hoisted_3, [
                         (_openBlock(), _createElementBlock(_Fragment, null, _renderList(5, (item) => {
                             return _createElementVNode("div", {
                                 key: item,
@@ -75,8 +78,11 @@ const __sfc_main__ = Object.assign({
                             class: "j-skeleton-desc",
                             key: item
                         }, [
-                            _hoisted_5,
-                            _createElementVNode("div", _hoisted_6, [
+                            _cache[0] || (_cache[0] = _createElementVNode("div", {
+                                class: "j-skeleton-item j-skeleton-item-large",
+                                style: { "width": "300px" }
+                            }, null, -1 /* CACHED */)),
+                            _createElementVNode("div", _hoisted_4, [
                                 (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (i) => {
                                     return _createElementVNode("div", {
                                         class: "j-skeleton-desc-item",
@@ -97,7 +103,7 @@ const __sfc_main__ = Object.assign({
                             ])
                         ]);
                     }), 64 /* STABLE_FRAGMENT */))
-                ]));
+                ], 2 /* CLASS */));
         };
     }
 });

package/es/Skeleton/components/Drawer.js

@@ -2,19 +2,24 @@
   "active": "props",
   "loading": "props",
   "Item": "setup-const",
-  "defineOptions": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
-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 = {
+import { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, unref as _unref, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "j-skeleton-box" };
+const _hoisted_2 = { class: "j-skeleton-desc" };
+const _hoisted_3 = { style: { "margin-top": "16px" } };
+const _hoisted_4 = {
     class: "j-skeleton-desc-content",
     style: { "grid-template-columns": "repeat(2, 1fr)" }
 };
 import Item from "./Item.js";
+import { computed } from "vue";
+import useSkeletonStyle from '../style';
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonDrawer'
 }, {
@@ -30,31 +35,35 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock(_Fragment, null, [
                 (!__props.loading)
                     ? _renderSlot(_ctx.$slots, "default", { key: 0 })
                     : _createCommentVNode("v-if", true),
-                _createElementVNode("div", _hoisted_1, [
+                _createElementVNode("div", {
+                    class: _normalizeClass(['j-skeleton', _unref(hashId)])
+                }, [
                     _createVNode(Item, {
                         active: __props.active,
                         width: "70%"
                     }, null, 8 /* PROPS */, ["active"]),
-                    _createElementVNode("div", _hoisted_2, [
+                    _createElementVNode("div", _hoisted_1, [
                         _createVNode(Item, {
                             active: __props.active,
                             size: "small",
                             width: "35%"
                         }, null, 8 /* PROPS */, ["active"])
                     ]),
-                    _createElementVNode("div", _hoisted_3, [
-                        _createElementVNode("div", _hoisted_4, [
+                    _createElementVNode("div", _hoisted_2, [
+                        _createElementVNode("div", _hoisted_3, [
                             _createVNode(Item, {
                                 active: __props.active,
                                 width: "300px"
                             }, null, 8 /* PROPS */, ["active"])
                         ]),
-                        _createElementVNode("div", _hoisted_5, [
+                        _createElementVNode("div", _hoisted_4, [
                             (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (i) => {
                                 return _createElementVNode("div", {
                                     class: "j-skeleton-desc-item",
@@ -74,7 +83,7 @@ const __sfc_main__ = Object.assign({
                             }), 64 /* STABLE_FRAGMENT */))
                         ])
                     ])
-                ])
+                ], 2 /* CLASS */)
             ], 64 /* STABLE_FRAGMENT */));
         };
     }

package/es/Skeleton/components/Item.js

@@ -3,12 +3,17 @@
   "size": "props",
   "width": "props",
   "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "_className": "setup-ref",
-  "sizeStyle": "setup-ref"
+  "sizeStyle": "setup-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 import { computed } from 'vue';
+import useSkeletonStyle from '../style';
 const __sfc_main__ = {
     props: {
         active: {
@@ -33,6 +38,7 @@ const __sfc_main__ = {
                 'j-skeleton-item-active': active,
                 'j-skeleton-item-lg': size === 'large',
                 'j-skeleton-item-sm': size === 'small',
+                [hashId.value]: true
             };
         });
         const sizeStyle = computed(() => {
@@ -49,6 +55,8 @@ const __sfc_main__ = {
                 };
             }
         });
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock("div", {
                 class: _normalizeClass(_className.value),

package/es/Skeleton/components/List.js

@@ -5,7 +5,6 @@
   "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";

package/es/Skeleton/components/ListCard.js

@@ -3,18 +3,20 @@
   "loading": "props",
   "Item": "setup-const",
   "ListCardItem": "setup-const",
-  "defineOptions": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
-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 { renderSlot as _renderSlot, unref as _unref, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "j-skeleton-flex" };
+const _hoisted_2 = { class: "j-skeleton-cards" };
 import Item from "./Item.js";
 import ListCardItem from "./ListCardItem.js";
+import { computed } from "vue";
+import useSkeletonStyle from '../style';
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonListCard'
 }, {
@@ -30,11 +32,16 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
         return (_ctx, _cache) => {
             return (!__props.loading)
                 ? _renderSlot(_ctx.$slots, "default", { key: 0 })
-                : (_openBlock(), _createElementBlock("div", _hoisted_1, [
-                    _createElementVNode("div", _hoisted_2, [
+                : (_openBlock(), _createElementBlock("div", {
+                    key: 1,
+                    class: _normalizeClass(['j-skeleton', _unref(hashId)])
+                }, [
+                    _createElementVNode("div", _hoisted_1, [
                         _createVNode(Item, {
                             active: __props.active,
                             width: "100px"
@@ -44,12 +51,12 @@ const __sfc_main__ = Object.assign({
                             width: "100px"
                         }, null, 8 /* PROPS */, ["active"])
                     ]),
-                    _createElementVNode("div", _hoisted_3, [
+                    _createElementVNode("div", _hoisted_2, [
                         (_openBlock(), _createElementBlock(_Fragment, null, _renderList(9, (item) => {
                             return _createVNode(ListCardItem, { key: item });
                         }), 64 /* STABLE_FRAGMENT */))
                     ])
-                ]));
+                ], 2 /* CLASS */));
         };
     }
 });

package/es/Skeleton/components/ListCardItem.js

@@ -7,13 +7,12 @@
 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_3 = { class: "j-skeleton-right" };
+const _hoisted_4 = { style: { "margin-bottom": "16px" } };
+const _hoisted_5 = { class: "j-skeleton-right-content" };
+const _hoisted_6 = { class: "j-skeleton-right-content-item" };
 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" };
+const _hoisted_8 = { class: "j-skeleton-action" };
 import Item from "./Item.js";
 const __sfc_main__ = {
     props: {
@@ -31,9 +30,9 @@ const __sfc_main__ = {
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock("div", _hoisted_1, [
                 _createElementVNode("div", _hoisted_2, [
-                    _hoisted_3,
-                    _createElementVNode("div", _hoisted_4, [
-                        _createElementVNode("div", _hoisted_5, [
+                    _cache[0] || (_cache[0] = _createElementVNode("div", { class: "j-skeleton-item j-skeleton-image" }, null, -1 /* CACHED */)),
+                    _createElementVNode("div", _hoisted_3, [
+                        _createElementVNode("div", _hoisted_4, [
                             _createVNode(Item, {
                                 active: __props.active,
                                 size: "small",
@@ -44,8 +43,8 @@ const __sfc_main__ = {
                             active: __props.active,
                             width: "50%"
                         }, null, 8 /* PROPS */, ["active"]),
-                        _createElementVNode("div", _hoisted_6, [
-                            _createElementVNode("div", _hoisted_7, [
+                        _createElementVNode("div", _hoisted_5, [
+                            _createElementVNode("div", _hoisted_6, [
                                 _createVNode(Item, {
                                     active: __props.active,
                                     size: "small",
@@ -57,7 +56,7 @@ const __sfc_main__ = {
                                     width: "90%"
                                 }, null, 8 /* PROPS */, ["active"])
                             ]),
-                            _createElementVNode("div", _hoisted_8, [
+                            _createElementVNode("div", _hoisted_7, [
                                 _createVNode(Item, {
                                     active: __props.active,
                                     size: "small",
@@ -72,7 +71,7 @@ const __sfc_main__ = {
                         ])
                     ])
                 ]),
-                _createElementVNode("div", _hoisted_9, [
+                _createElementVNode("div", _hoisted_8, [
                     _createVNode(Item, { active: __props.active }, null, 8 /* PROPS */, ["active"]),
                     _createVNode(Item, { active: __props.active }, null, 8 /* PROPS */, ["active"]),
                     _createVNode(Item, {

package/es/Skeleton/components/ListTable.js

@@ -2,14 +2,19 @@
   "active": "props",
   "loading": "props",
   "Item": "setup-const",
-  "defineOptions": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
-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 { unref as _unref, 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-flex" };
+const _hoisted_2 = { class: "j-skeleton-table" };
 import Item from "./Item.js";
+import { computed } from "vue";
+import useSkeletonStyle from '../style';
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonListTable'
 }, {
@@ -25,9 +30,13 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
-                _createElementVNode("div", _hoisted_2, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['j-skeleton', _unref(hashId)])
+            }, [
+                _createElementVNode("div", _hoisted_1, [
                     _createVNode(Item, {
                         active: __props.active,
                         width: "100px"
@@ -37,7 +46,7 @@ const __sfc_main__ = Object.assign({
                         width: "100px"
                     }, null, 8 /* PROPS */, ["active"])
                 ]),
-                _createElementVNode("div", _hoisted_3, [
+                _createElementVNode("div", _hoisted_2, [
                     (_openBlock(), _createElementBlock(_Fragment, null, _renderList(10, (item) => {
                         return _createElementVNode("div", {
                             key: item,
@@ -60,7 +69,7 @@ const __sfc_main__ = Object.assign({
                         ], 2 /* CLASS */);
                     }), 64 /* STABLE_FRAGMENT */))
                 ])
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });

package/es/Skeleton/components/Page.js

@@ -4,7 +4,6 @@
   "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";

package/es/Skeleton/components/Tree.js

@@ -2,19 +2,21 @@
   "active": "props",
   "loading": "props",
   "Item": "setup-const",
-  "defineOptions": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
-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"
-};
+import { renderSlot as _renderSlot, unref as _unref, createVNode as _createVNode, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "j-skeleton-flex" };
 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";
+import { computed } from "vue";
+import useSkeletonStyle from '../style';
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonTree'
 }, {
@@ -30,35 +32,40 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
         return (_ctx, _cache) => {
             return (!__props.loading)
                 ? _renderSlot(_ctx.$slots, "default", { key: 0 })
-                : (_openBlock(), _createElementBlock("div", _hoisted_1, [
-                    _createElementVNode("div", _hoisted_2, [
+                : (_openBlock(), _createElementBlock("div", {
+                    key: 1,
+                    class: _normalizeClass(['j-skeleton', _unref(hashId)])
+                }, [
+                    _createElementVNode("div", _hoisted_1, [
                         _createVNode(Item, { active: __props.active }, null, 8 /* PROPS */, ["active"])
                     ]),
-                    _createElementVNode("div", _hoisted_3, [
+                    _createElementVNode("div", _hoisted_2, [
                         _createVNode(Item, {
                             active: __props.active,
                             width: "100px"
                         }, null, 8 /* PROPS */, ["active"])
                     ]),
                     (_openBlock(), _createElementBlock(_Fragment, null, _renderList(6, (item) => {
-                        return _createElementVNode("div", _hoisted_4, [
+                        return _createElementVNode("div", _hoisted_3, [
                             _createVNode(Item, {
                                 active: __props.active,
                                 size: "small"
                             }, null, 8 /* PROPS */, ["active"])
                         ]);
                     }), 64 /* STABLE_FRAGMENT */)),
-                    _createElementVNode("div", _hoisted_5, [
+                    _createElementVNode("div", _hoisted_4, [
                         _createVNode(Item, {
                             active: __props.active,
                             size: "small",
                             width: "140px"
                         }, null, 8 /* PROPS */, ["active"])
                     ])
-                ]));
+                ], 2 /* CLASS */));
         };
     }
 });

package/es/Skeleton/skeleton.js

@@ -2,13 +2,18 @@
   "active": "props",
   "loading": "props",
   "Item": "setup-const",
-  "defineOptions": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
-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 { unref as _unref, renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "j-skeleton-flex-column" };
 import Item from "./components/Item.js";
+import { computed } from "vue";
+import useSkeletonStyle from './style';
 const __sfc_main__ = Object.assign({
     name: 'JSkeleton'
 }, {
@@ -24,12 +29,16 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['j-skeleton', _unref(hashId)])
+            }, [
                 (!__props.loading)
                     ? _renderSlot(_ctx.$slots, "default", { key: 0 })
                     : _createCommentVNode("v-if", true),
-                _createElementVNode("div", _hoisted_2, [
+                _createElementVNode("div", _hoisted_1, [
                     _createVNode(Item, {
                         active: __props.active,
                         width: "40%"
@@ -42,7 +51,7 @@ const __sfc_main__ = Object.assign({
                         width: "80%"
                     }, null, 8 /* PROPS */, ["active"])
                 ])
-            ]));
+            ], 2 /* CLASS */));
         };
     }
 });