@jetlinks-web/components 3.0.0-rc → 3.0.0

package/lib/Skeleton/components/ListTable.js

@@ -0,0 +1,76 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "Item": "setup-const",
+  "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
+} */
+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'
+}, {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
+        return (_ctx, _cache) => {
+            return (_openBlock(), _createElementBlock("div", {
+                class: _normalizeClass(['j-skeleton', _unref(hashId)])
+            }, [
+                _createElementVNode("div", _hoisted_1, [
+                    _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_2, [
+                    (_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 */))
+                ])
+            ], 2 /* CLASS */));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/Skeleton/components/Page.js

@@ -0,0 +1,62 @@
+/* Analyzed bindings: {
+  "type": "props",
+  "active": "props",
+  "loading": "props",
+  "List": "setup-const",
+  "Detail": "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__;

package/lib/Skeleton/components/Tree.js

@@ -0,0 +1,72 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "Item": "setup-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, 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" };
+import Item from "./Item.js";
+import { computed } from "vue";
+import useSkeletonStyle from '../style';
+const __sfc_main__ = Object.assign({
+    name: 'JSkeletonTree'
+}, {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    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", {
+                    key: 1,
+                    class: _normalizeClass(['j-skeleton', _unref(hashId)])
+                }, [
+                    _createElementVNode("div", _hoisted_1, [
+                        _createVNode(Item, { active: __props.active }, null, 8 /* PROPS */, ["active"])
+                    ]),
+                    _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_3, [
+                            _createVNode(Item, {
+                                active: __props.active,
+                                size: "small"
+                            }, null, 8 /* PROPS */, ["active"])
+                        ]);
+                    }), 64 /* STABLE_FRAGMENT */)),
+                    _createElementVNode("div", _hoisted_4, [
+                        _createVNode(Item, {
+                            active: __props.active,
+                            size: "small",
+                            width: "140px"
+                        }, null, 8 /* PROPS */, ["active"])
+                    ])
+                ], 2 /* CLASS */));
+        };
+    }
+});
+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,58 @@
+/* Analyzed bindings: {
+  "active": "props",
+  "loading": "props",
+  "Item": "setup-const",
+  "computed": "setup-const",
+  "useSkeletonStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
+} */
+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'
+}, {
+    props: {
+        active: {
+            type: Boolean,
+            default: true,
+        },
+        loading: {
+            type: Boolean,
+            default: true,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        const prefixCls = computed(() => 'j-skeleton');
+        const [wrapSSR, hashId] = useSkeletonStyle(prefixCls);
+        return (_ctx, _cache) => {
+            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_1, [
+                    _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"])
+                ])
+            ], 2 /* CLASS */));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/Skeleton/style/index.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _antDesignVue = require("ant-design-vue");
+var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var JSkeletonSizeLg = '36px';
+var JSkeletonSizeSm = '16px';
+var JSkeletonSize = '24px';
+var JSkeletonBorderRadius = '8px';
+var JSkeletonBg = '#f0f2f5';
+var JSkeletonBg1 = '#e6e8eb';
+var JSkeletonBorder = "4px solid ".concat(JSkeletonBg);
+var JSkeletonFlex = {
+  display: 'flex',
+  gap: '24px',
+  marginBottom: '16px'
+};
+//动画
+var waveKeyframes = new _antDesignVue.Keyframes('wave', {
+  '0%': {
+    backgroundPosition: '200% 0'
+  },
+  '100%': {
+    backgroundPosition: '-200% 0'
+  }
+});
+var genSkeletonStyle = function genSkeletonStyle(config) {
+  var _$concat6;
+  var componentCls = config.componentCls,
+    token = config.token;
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-flex"), JSkeletonFlex), "".concat(componentCls, "-flex-between"), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, JSkeletonFlex), {}, {
+    background: JSkeletonBg,
+    height: JSkeletonSize,
+    borderRadius: JSkeletonBorderRadius
+  })), "".concat(componentCls, "-flex-column"), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, JSkeletonFlex), {}, {
+    justifyContent: 'space-between'
+  })), "".concat(componentCls), (_$concat6 = {
+    height: '100%'
+  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat6, "".concat(componentCls, "-item"), {
+    background: 'linear-gradient(90deg, ${JSkeletonBg} 25%, ${JSkeletonBg1} 50%, ${JSkeletonBg} 75%)',
+    backgroundSize: '400% 100%',
+    borderRadius: JSkeletonBorderRadius,
+    height: JSkeletonSize
+  }), "".concat(componentCls, "-item-active"), {
+    animationName: waveKeyframes,
+    animationDuration: '1.8s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'ease-in-out'
+  }), "".concat(componentCls, "-item-lg"), {
+    height: JSkeletonSizeLg
+  }), "".concat(componentCls, "-item-sm"), {
+    height: JSkeletonSizeSm
+  }), "".concat(componentCls, "-dashboard-card"), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, JSkeletonFlex), {}, {
+    border: JSkeletonBorder,
+    borderRadius: JSkeletonBorderRadius,
+    height: '100%',
+    padding: '24px',
+    flexDirection: 'column'
+  })), "".concat(componentCls, "-tabs"), {
+    display: 'flex',
+    gap: '16px',
+    margin: '60px 0 20px 0',
+    borderBottom: JSkeletonBorder,
+    padding: '16px 0'
+  }), "".concat(componentCls, "-desc"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: '24px'
+  }, "".concat(componentCls, "-desc-content"), {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gap: '36px',
+    margin: '24px 0 0 0'
+  }), "".concat(componentCls, "-desc-item"), {
+    display: 'flex',
+    gap: '16px'
+  })), "".concat(componentCls, "-box"), {
+    borderBottom: JSkeletonBorder,
+    padding: '16px 0'
+  }), "".concat(componentCls, "-table-cell"), {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr)) 200px',
+    gap: '24px',
+    padding: '12px 6px',
+    borderRadius: '8px'
+  }), "".concat(componentCls, "-table-header"), {
+    backgroundColor: 'lightgrey'
+  }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat6, "".concat(componentCls, "-table-action"), {
+    width: '200px',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(0, 1fr))',
+    gap: '24px'
+  }), "".concat(componentCls, "-cards"), {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gap: '16px'
+  }), "".concat(componentCls, "-card"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-card-content"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    display: 'flex',
+    gap: '16px',
+    border: '2px solid #f0f2f5',
+    borderRadius: '8px',
+    padding: '24px',
+    marginBottom: '16px'
+  }, "".concat(componentCls, "-image"), {
+    width: '100px',
+    height: '100px'
+  }), "".concat(componentCls, "-right"), (0, _defineProperty2.default)({
+    flex: 1,
+    minWidth: '200px'
+  }, "".concat(componentCls, "-right-content"), (0, _defineProperty2.default)({
+    display: 'flex',
+    gap: '16px',
+    marginTop: '16px'
+  }, "".concat(componentCls, "-right-item"), {
+    flex: 1,
+    minWidth: '100px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  })))), "".concat(componentCls, "-action"), {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: '16px',
+    '.btn': {
+      flex: 1,
+      minWidth: '100px'
+    },
+    '.delete': {
+      flex: '0 0 100px'
+    }
+  }))));
+};
+var _default = exports.default = (0, _styleRegister.default)([genSkeletonStyle]);

package/lib/Title/style/index.js

@@ -1,3 +1,36 @@
 "use strict";
 
-require("./index.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var genTitleStyle = function genTitleStyle(config) {
+  var componentCls = config.componentCls,
+    token = config.token;
+  return (0, _defineProperty2.default)({}, componentCls, (0, _defineProperty2.default)({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: '16px'
+  }, "".concat(componentCls, "-content"), {
+    position: 'relative',
+    paddingLeft: '10px',
+    color: 'rgba(0, 0, 0, 0.8)',
+    fontWeight: 600,
+    lineHeight: 1,
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: 4,
+      height: '100%',
+      background: '#1890ff',
+      borderRadius: '0 3px 3px 0',
+      content: '""'
+    }
+  }));
+};
+var _default = exports.default = (0, _styleRegister.default)([genTitleStyle]);

package/lib/Title/title.js

@@ -1,11 +1,17 @@
 /* Analyzed bindings: {
   "data": "props",
   "style": "props",
-  "defineOptions": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "useTitleStyle": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref"
 } */
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { class: "j-title-content" };
+import { computed } from 'vue';
+import useTitleStyle from './style';
 const __sfc_main__ = Object.assign({
     name: 'JTitle'
 }, {
@@ -21,14 +27,16 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const prefixCls = computed(() => 'j-title');
+        const [wrapSSR, hashId] = useTitleStyle(prefixCls);
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock("div", {
-                class: "j-title",
+                class: _normalizeClass(['j-title', _unref(hashId)]),
                 style: _normalizeStyle(__props.style)
             }, [
                 _createElementVNode("div", _hoisted_1, _toDisplayString(__props.data), 1 /* TEXT */),
                 _renderSlot(_ctx.$slots, "extra")
-            ], 4 /* STYLE */));
+            ], 6 /* CLASS, STYLE */));
         };
     }
 });