@holyer-lib/ui 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/ui.cjs.js CHANGED
@@ -26,19 +26,90 @@ function __$styleInject(css) {
26
26
  return css;
27
27
  }
28
28
 
29
- __$styleInject(".hi-title {\n font-size: 24px;\n font-weight: bold;\n margin: 16px 0;\n border-left: 4px solid var(--td-brand-color);\n padding-left: 12px;\n}\n");
29
+ __$styleInject(".hi-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.hi-title--small {\n gap: 2px;\n}\n.hi-title--large {\n gap: 6px;\n}\n.hi-title__header {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hi-title__prefix {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n.hi-title__bar {\n width: 4px;\n background-color: var(--td-brand-color);\n flex-shrink: 0;\n}\n.hi-title__icon {\n flex-shrink: 0;\n line-height: 1;\n}\n.hi-title__text {\n margin: 0;\n font-weight: 600;\n color: var(--td-text-color-primary);\n}\n.hi-title__description {\n margin: 0;\n font-size: 12px;\n color: var(--td-text-color-secondary);\n}\n");
30
30
 
31
31
  //
32
+ const TITILE_SIZE_MAP = {
33
+ small: '14px',
34
+ medium: '16px',
35
+ large: '18px'
36
+ };
32
37
  var script = {
33
38
  name: 'HiTitle',
39
+ inheritAttrs: false,
34
40
  props: {
41
+ // 自定义图标类名
42
+ iconClass: {
43
+ type: String,
44
+ default: ''
45
+ },
46
+ // 主标题文本(优先级低于 default slot)
35
47
  content: {
36
48
  type: String,
37
- default: '标题'
49
+ default: ''
50
+ },
51
+ // 描述文本(优先级低于 description slot)
52
+ description: {
53
+ type: String,
54
+ default: ''
55
+ },
56
+ // 尺寸:控制整体大小(影响文字、图标、bar 高度)
57
+ size: {
58
+ type: String,
59
+ default: 'medium',
60
+ validator: val => ['small', 'medium', 'large'].includes(val)
61
+ },
62
+ // 主标题颜色(支持自定义)
63
+ color: {
64
+ type: String,
65
+ default: ''
66
+ },
67
+ // 自定义前缀图标组件
68
+ prefixIcon: {
69
+ type: [Object, Function],
70
+ default: null
71
+ },
72
+ // 自定义 bar 类名(用于覆盖样式)
73
+ barClass: {
74
+ type: String,
75
+ default: ''
76
+ },
77
+ // 自定义标题文字类名
78
+ textClass: {
79
+ type: String,
80
+ default: ''
81
+ },
82
+ // 自定义描述文字类名
83
+ descClass: {
84
+ type: String,
85
+ default: ''
38
86
  }
39
87
  },
40
- data() {
41
- return {};
88
+ computed: {
89
+ titleClass() {
90
+ return ['hi-title', `hi-title--${this.size}`, { 'hi-title--has-desc': this.hasDescription }];
91
+ },
92
+ // 根据 size 计算文字大小
93
+ textSize() {
94
+ return TITILE_SIZE_MAP[this.size] || TITILE_SIZE_MAP.medium;
95
+ },
96
+ // 图标大小 = 文字大小(保持视觉一致)
97
+ iconSize() {
98
+ return this.textSize;
99
+ },
100
+ // 装饰条高度 = 文字行高 ≈ 文字大小 * 1.2~1.5
101
+ barHeight() {
102
+ const base = parseFloat(TITILE_SIZE_MAP[this.size] || '16');
103
+ return `${base * 1.2}px`;
104
+ },
105
+ // 主标题颜色(props 优先,否则继承)
106
+ textColor() {
107
+ return this.color || 'inherit';
108
+ },
109
+ // 是否存在描述内容(用于控制布局)
110
+ hasDescription() {
111
+ return this.description || this.$slots.description;
112
+ }
42
113
  }
43
114
  };
44
115
 
@@ -127,13 +198,64 @@ var __vue_render__ = function () {
127
198
  var _c = _vm._self._c || _h;
128
199
  return _c(
129
200
  "div",
130
- { staticClass: "hi-title" },
201
+ _vm._b({ class: _vm.titleClass }, "div", _vm.$attrs, false),
131
202
  [
132
- _vm._t("default", function () {
133
- return [_vm._v(_vm._s(_vm.content))]
134
- }),
135
- ],
136
- 2
203
+ _c("div", { staticClass: "hi-title__header" }, [
204
+ _c(
205
+ "div",
206
+ { staticClass: "hi-title__prefix" },
207
+ [
208
+ _vm._t("prefix", function () {
209
+ return [
210
+ _vm.prefixIcon
211
+ ? _c(_vm.prefixIcon, {
212
+ tag: "component",
213
+ class: ["hi-title__icon", _vm.iconClass],
214
+ style: { fontSize: _vm.iconSize },
215
+ })
216
+ : _c("div", {
217
+ class: ["hi-title__bar", _vm.barClass],
218
+ style: { height: _vm.barHeight },
219
+ }),
220
+ ]
221
+ }),
222
+ ],
223
+ 2
224
+ ),
225
+ _vm._v(" "),
226
+ _vm.content || _vm.$slots.default
227
+ ? _c(
228
+ "div",
229
+ {
230
+ class: ["hi-title__text", _vm.textClass],
231
+ style: {
232
+ color: _vm.textColor,
233
+ fontSize: _vm.textSize,
234
+ },
235
+ },
236
+ [
237
+ _vm._t("default", function () {
238
+ return [_vm._v(_vm._s(_vm.content))]
239
+ }),
240
+ ],
241
+ 2
242
+ )
243
+ : _vm._e(),
244
+ ]),
245
+ _vm._v(" "),
246
+ _vm.hasDescription
247
+ ? _c(
248
+ "p",
249
+ { class: ["hi-title__description", _vm.descClass] },
250
+ [
251
+ _vm._t("description", function () {
252
+ return [_vm._v(_vm._s(_vm.description))]
253
+ }),
254
+ ],
255
+ 2
256
+ )
257
+ : _vm._e(),
258
+ ]
137
259
  )
138
260
  };
139
261
  var __vue_staticRenderFns__ = [];
@@ -172,7 +294,7 @@ __vue_render__._withStripped = true;
172
294
  __vue_component__.name = 'HiTitle';
173
295
 
174
296
  // 添加 install
175
- __vue_component__.install = (Vue) => {
297
+ __vue_component__.install = Vue => {
176
298
  Vue.component(__vue_component__.name, __vue_component__);
177
299
  };
178
300
 
package/dist/ui.esm.js CHANGED
@@ -22,19 +22,90 @@ function __$styleInject(css) {
22
22
  return css;
23
23
  }
24
24
 
25
- __$styleInject(".hi-title {\n font-size: 24px;\n font-weight: bold;\n margin: 16px 0;\n border-left: 4px solid var(--td-brand-color);\n padding-left: 12px;\n}\n");
25
+ __$styleInject(".hi-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.hi-title--small {\n gap: 2px;\n}\n.hi-title--large {\n gap: 6px;\n}\n.hi-title__header {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hi-title__prefix {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n.hi-title__bar {\n width: 4px;\n background-color: var(--td-brand-color);\n flex-shrink: 0;\n}\n.hi-title__icon {\n flex-shrink: 0;\n line-height: 1;\n}\n.hi-title__text {\n margin: 0;\n font-weight: 600;\n color: var(--td-text-color-primary);\n}\n.hi-title__description {\n margin: 0;\n font-size: 12px;\n color: var(--td-text-color-secondary);\n}\n");
26
26
 
27
27
  //
28
+ const TITILE_SIZE_MAP = {
29
+ small: '14px',
30
+ medium: '16px',
31
+ large: '18px'
32
+ };
28
33
  var script = {
29
34
  name: 'HiTitle',
35
+ inheritAttrs: false,
30
36
  props: {
37
+ // 自定义图标类名
38
+ iconClass: {
39
+ type: String,
40
+ default: ''
41
+ },
42
+ // 主标题文本(优先级低于 default slot)
31
43
  content: {
32
44
  type: String,
33
- default: '标题'
45
+ default: ''
46
+ },
47
+ // 描述文本(优先级低于 description slot)
48
+ description: {
49
+ type: String,
50
+ default: ''
51
+ },
52
+ // 尺寸:控制整体大小(影响文字、图标、bar 高度)
53
+ size: {
54
+ type: String,
55
+ default: 'medium',
56
+ validator: val => ['small', 'medium', 'large'].includes(val)
57
+ },
58
+ // 主标题颜色(支持自定义)
59
+ color: {
60
+ type: String,
61
+ default: ''
62
+ },
63
+ // 自定义前缀图标组件
64
+ prefixIcon: {
65
+ type: [Object, Function],
66
+ default: null
67
+ },
68
+ // 自定义 bar 类名(用于覆盖样式)
69
+ barClass: {
70
+ type: String,
71
+ default: ''
72
+ },
73
+ // 自定义标题文字类名
74
+ textClass: {
75
+ type: String,
76
+ default: ''
77
+ },
78
+ // 自定义描述文字类名
79
+ descClass: {
80
+ type: String,
81
+ default: ''
34
82
  }
35
83
  },
36
- data() {
37
- return {};
84
+ computed: {
85
+ titleClass() {
86
+ return ['hi-title', `hi-title--${this.size}`, { 'hi-title--has-desc': this.hasDescription }];
87
+ },
88
+ // 根据 size 计算文字大小
89
+ textSize() {
90
+ return TITILE_SIZE_MAP[this.size] || TITILE_SIZE_MAP.medium;
91
+ },
92
+ // 图标大小 = 文字大小(保持视觉一致)
93
+ iconSize() {
94
+ return this.textSize;
95
+ },
96
+ // 装饰条高度 = 文字行高 ≈ 文字大小 * 1.2~1.5
97
+ barHeight() {
98
+ const base = parseFloat(TITILE_SIZE_MAP[this.size] || '16');
99
+ return `${base * 1.2}px`;
100
+ },
101
+ // 主标题颜色(props 优先,否则继承)
102
+ textColor() {
103
+ return this.color || 'inherit';
104
+ },
105
+ // 是否存在描述内容(用于控制布局)
106
+ hasDescription() {
107
+ return this.description || this.$slots.description;
108
+ }
38
109
  }
39
110
  };
40
111
 
@@ -123,13 +194,64 @@ var __vue_render__ = function () {
123
194
  var _c = _vm._self._c || _h;
124
195
  return _c(
125
196
  "div",
126
- { staticClass: "hi-title" },
197
+ _vm._b({ class: _vm.titleClass }, "div", _vm.$attrs, false),
127
198
  [
128
- _vm._t("default", function () {
129
- return [_vm._v(_vm._s(_vm.content))]
130
- }),
131
- ],
132
- 2
199
+ _c("div", { staticClass: "hi-title__header" }, [
200
+ _c(
201
+ "div",
202
+ { staticClass: "hi-title__prefix" },
203
+ [
204
+ _vm._t("prefix", function () {
205
+ return [
206
+ _vm.prefixIcon
207
+ ? _c(_vm.prefixIcon, {
208
+ tag: "component",
209
+ class: ["hi-title__icon", _vm.iconClass],
210
+ style: { fontSize: _vm.iconSize },
211
+ })
212
+ : _c("div", {
213
+ class: ["hi-title__bar", _vm.barClass],
214
+ style: { height: _vm.barHeight },
215
+ }),
216
+ ]
217
+ }),
218
+ ],
219
+ 2
220
+ ),
221
+ _vm._v(" "),
222
+ _vm.content || _vm.$slots.default
223
+ ? _c(
224
+ "div",
225
+ {
226
+ class: ["hi-title__text", _vm.textClass],
227
+ style: {
228
+ color: _vm.textColor,
229
+ fontSize: _vm.textSize,
230
+ },
231
+ },
232
+ [
233
+ _vm._t("default", function () {
234
+ return [_vm._v(_vm._s(_vm.content))]
235
+ }),
236
+ ],
237
+ 2
238
+ )
239
+ : _vm._e(),
240
+ ]),
241
+ _vm._v(" "),
242
+ _vm.hasDescription
243
+ ? _c(
244
+ "p",
245
+ { class: ["hi-title__description", _vm.descClass] },
246
+ [
247
+ _vm._t("description", function () {
248
+ return [_vm._v(_vm._s(_vm.description))]
249
+ }),
250
+ ],
251
+ 2
252
+ )
253
+ : _vm._e(),
254
+ ]
133
255
  )
134
256
  };
135
257
  var __vue_staticRenderFns__ = [];
@@ -168,7 +290,7 @@ __vue_render__._withStripped = true;
168
290
  __vue_component__.name = 'HiTitle';
169
291
 
170
292
  // 添加 install
171
- __vue_component__.install = (Vue) => {
293
+ __vue_component__.install = Vue => {
172
294
  Vue.component(__vue_component__.name, __vue_component__);
173
295
  };
174
296
 
package/dist/ui.umd.js CHANGED
@@ -28,19 +28,90 @@
28
28
  return css;
29
29
  }
30
30
 
31
- __$styleInject(".hi-title {\n font-size: 24px;\n font-weight: bold;\n margin: 16px 0;\n border-left: 4px solid var(--td-brand-color);\n padding-left: 12px;\n}\n");
31
+ __$styleInject(".hi-title {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.hi-title--small {\n gap: 2px;\n}\n.hi-title--large {\n gap: 6px;\n}\n.hi-title__header {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hi-title__prefix {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n.hi-title__bar {\n width: 4px;\n background-color: var(--td-brand-color);\n flex-shrink: 0;\n}\n.hi-title__icon {\n flex-shrink: 0;\n line-height: 1;\n}\n.hi-title__text {\n margin: 0;\n font-weight: 600;\n color: var(--td-text-color-primary);\n}\n.hi-title__description {\n margin: 0;\n font-size: 12px;\n color: var(--td-text-color-secondary);\n}\n");
32
32
 
33
33
  //
34
+ const TITILE_SIZE_MAP = {
35
+ small: '14px',
36
+ medium: '16px',
37
+ large: '18px'
38
+ };
34
39
  var script = {
35
40
  name: 'HiTitle',
41
+ inheritAttrs: false,
36
42
  props: {
43
+ // 自定义图标类名
44
+ iconClass: {
45
+ type: String,
46
+ default: ''
47
+ },
48
+ // 主标题文本(优先级低于 default slot)
37
49
  content: {
38
50
  type: String,
39
- default: '标题'
51
+ default: ''
52
+ },
53
+ // 描述文本(优先级低于 description slot)
54
+ description: {
55
+ type: String,
56
+ default: ''
57
+ },
58
+ // 尺寸:控制整体大小(影响文字、图标、bar 高度)
59
+ size: {
60
+ type: String,
61
+ default: 'medium',
62
+ validator: val => ['small', 'medium', 'large'].includes(val)
63
+ },
64
+ // 主标题颜色(支持自定义)
65
+ color: {
66
+ type: String,
67
+ default: ''
68
+ },
69
+ // 自定义前缀图标组件
70
+ prefixIcon: {
71
+ type: [Object, Function],
72
+ default: null
73
+ },
74
+ // 自定义 bar 类名(用于覆盖样式)
75
+ barClass: {
76
+ type: String,
77
+ default: ''
78
+ },
79
+ // 自定义标题文字类名
80
+ textClass: {
81
+ type: String,
82
+ default: ''
83
+ },
84
+ // 自定义描述文字类名
85
+ descClass: {
86
+ type: String,
87
+ default: ''
40
88
  }
41
89
  },
42
- data() {
43
- return {};
90
+ computed: {
91
+ titleClass() {
92
+ return ['hi-title', `hi-title--${this.size}`, { 'hi-title--has-desc': this.hasDescription }];
93
+ },
94
+ // 根据 size 计算文字大小
95
+ textSize() {
96
+ return TITILE_SIZE_MAP[this.size] || TITILE_SIZE_MAP.medium;
97
+ },
98
+ // 图标大小 = 文字大小(保持视觉一致)
99
+ iconSize() {
100
+ return this.textSize;
101
+ },
102
+ // 装饰条高度 = 文字行高 ≈ 文字大小 * 1.2~1.5
103
+ barHeight() {
104
+ const base = parseFloat(TITILE_SIZE_MAP[this.size] || '16');
105
+ return `${base * 1.2}px`;
106
+ },
107
+ // 主标题颜色(props 优先,否则继承)
108
+ textColor() {
109
+ return this.color || 'inherit';
110
+ },
111
+ // 是否存在描述内容(用于控制布局)
112
+ hasDescription() {
113
+ return this.description || this.$slots.description;
114
+ }
44
115
  }
45
116
  };
46
117
 
@@ -129,13 +200,64 @@
129
200
  var _c = _vm._self._c || _h;
130
201
  return _c(
131
202
  "div",
132
- { staticClass: "hi-title" },
203
+ _vm._b({ class: _vm.titleClass }, "div", _vm.$attrs, false),
133
204
  [
134
- _vm._t("default", function () {
135
- return [_vm._v(_vm._s(_vm.content))]
136
- }),
137
- ],
138
- 2
205
+ _c("div", { staticClass: "hi-title__header" }, [
206
+ _c(
207
+ "div",
208
+ { staticClass: "hi-title__prefix" },
209
+ [
210
+ _vm._t("prefix", function () {
211
+ return [
212
+ _vm.prefixIcon
213
+ ? _c(_vm.prefixIcon, {
214
+ tag: "component",
215
+ class: ["hi-title__icon", _vm.iconClass],
216
+ style: { fontSize: _vm.iconSize },
217
+ })
218
+ : _c("div", {
219
+ class: ["hi-title__bar", _vm.barClass],
220
+ style: { height: _vm.barHeight },
221
+ }),
222
+ ]
223
+ }),
224
+ ],
225
+ 2
226
+ ),
227
+ _vm._v(" "),
228
+ _vm.content || _vm.$slots.default
229
+ ? _c(
230
+ "div",
231
+ {
232
+ class: ["hi-title__text", _vm.textClass],
233
+ style: {
234
+ color: _vm.textColor,
235
+ fontSize: _vm.textSize,
236
+ },
237
+ },
238
+ [
239
+ _vm._t("default", function () {
240
+ return [_vm._v(_vm._s(_vm.content))]
241
+ }),
242
+ ],
243
+ 2
244
+ )
245
+ : _vm._e(),
246
+ ]),
247
+ _vm._v(" "),
248
+ _vm.hasDescription
249
+ ? _c(
250
+ "p",
251
+ { class: ["hi-title__description", _vm.descClass] },
252
+ [
253
+ _vm._t("description", function () {
254
+ return [_vm._v(_vm._s(_vm.description))]
255
+ }),
256
+ ],
257
+ 2
258
+ )
259
+ : _vm._e(),
260
+ ]
139
261
  )
140
262
  };
141
263
  var __vue_staticRenderFns__ = [];
@@ -174,7 +296,7 @@
174
296
  __vue_component__.name = 'HiTitle';
175
297
 
176
298
  // 添加 install
177
- __vue_component__.install = (Vue) => {
299
+ __vue_component__.install = Vue => {
178
300
  Vue.component(__vue_component__.name, __vue_component__);
179
301
  };
180
302
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@holyer-lib/ui",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "main": "dist/ui.cjs.js",
5
5
  "module": "dist/ui.esm.js",
6
6
  "unpkg": "dist/ui.umd.js",
@@ -11,7 +11,7 @@
11
11
  "access": "public"
12
12
  },
13
13
  "dependencies": {
14
- "@holyer-lib/title": "1.0.1"
14
+ "@holyer-lib/title": "1.0.2"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "vue": "2.6.14"