Skip to content

Commit 7dec998

Browse files
rhlinrhlin
authored
Merge pull request #252 from opentiny/lhs/angular-tiicon-material
feat(materials): add TiIcon material for angular-opentiny-ng
2 parents baceefd + f75f79c commit 7dec998

6 files changed

Lines changed: 173 additions & 11 deletions

File tree

‎packages/materials/angular-opentiny-ng/src/materials/components/ng-components.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { Type } from '@angular/core';
22
import {
33
TiButtonComponent,
44
TiButtonModule,
5+
TiIconComponent,
6+
TiIconModule,
57
TiSelectComponent,
68
TiSelectModule,
79
TiTextComponent,
@@ -50,6 +52,7 @@ import {
5052

5153
export const components: Record<string, Type<any>> = {
5254
TiButton: TiButtonComponent,
55+
TiIcon: TiIconComponent,
5356
TiSelect: TiSelectComponent,
5457
TiText: TiTextComponent,
5558
TiTable: TiTableComponent,
@@ -76,6 +79,7 @@ export const components: Record<string, Type<any>> = {
7679

7780
export const modules: Record<string, Type<any>> = {
7881
TiButton: TiButtonModule,
82+
TiIcon: TiIconModule,
7983
TiSelect: TiSelectModule,
8084
TiText: TiTextModule,
8185
TiTable: TiTableModule,

‎packages/materials/angular-opentiny-ng/src/meta/materials/bundle.json‎

Lines changed: 163 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"component": "TiButton",
1313
"icon": "button",
14-
"description": "按钮组件，支持多种样式和尺寸",
14+
"description": "按钮组件，支持多种样式和尺寸。带图标时把 TiIcon 放在 children；icon 与 onlyIcon 二选一：文字+图标用 icon=true（例：{\"componentName\":\"TiButton\",\"props\":{\"icon\":true,\"color\":\"default\"},\"children\":[{\"componentName\":\"span\",\"children\":\"搜索\"},{\"componentName\":\"TiIcon\",\"props\":{\"name\":\"search\"}}]}）；纯图标用 onlyIcon=true（children 仅 TiIcon）。",
1515
"doc_url": "https://www.opentiny.design/tiny-ng/components/button",
1616
"screenshot": "",
1717
"tags": "button,按钮,基础组件",
@@ -44,7 +44,9 @@
4444
"properties": [
4545
"color",
4646
"size",
47-
"disabled"
47+
"disabled",
48+
"icon",
49+
"onlyIcon"
4850
]
4951
},
5052
"contextMenu": {
@@ -191,6 +193,50 @@
191193
"props": {
192194
}
193195
}
196+
},
197+
{
198+
"property": "icon",
199+
"label": {
200+
"text": {
201+
"zh_CN": "图标按钮样式"
202+
}
203+
},
204+
"description": {
205+
"zh_CN": "文字+图标按钮样式；与 onlyIcon 二选一。children 为 [span 包裹文案, TiIcon]"
206+
},
207+
"required": false,
208+
"readOnly": false,
209+
"disabled": false,
210+
"cols": 12,
211+
"labelPosition": "left",
212+
"type": "boolean",
213+
"widget": {
214+
"component": "CheckBoxConfigurator",
215+
"props": {
216+
}
217+
}
218+
},
219+
{
220+
"property": "onlyIcon",
221+
"label": {
222+
"text": {
223+
"zh_CN": "纯图标按钮"
224+
}
225+
},
226+
"description": {
227+
"zh_CN": "纯图标按钮样式；与 icon 二选一。children 放 TiIcon 即可"
228+
},
229+
"required": false,
230+
"readOnly": false,
231+
"disabled": false,
232+
"cols": 12,
233+
"labelPosition": "left",
234+
"type": "boolean",
235+
"widget": {
236+
"component": "CheckBoxConfigurator",
237+
"props": {
238+
}
239+
}
194240
}
195241
],
196242
"description": {
@@ -226,6 +272,107 @@
226272
}
227273
}
228274
},
275+
{
276+
"id": 26,
277+
"version": "3.8.0",
278+
"name": {
279+
"zh_CN": "图标"
280+
},
281+
"component": "TiIcon",
282+
"icon": "icon",
283+
"description": "TinyNG 官方字体图标组件（ti-icon）。独立节点：{\"componentName\":\"TiIcon\",\"props\":{\"name\":\"search\"}}。name 为 TinyNG 字体图标名（小写，如 search），挂 class ti3-icon-${name}。作为 TiButton 子节点时，按钮侧用 icon 或 onlyIcon 二选一。",
284+
"doc_url": "https://www.opentiny.design/tiny-ng/components/icon",
285+
"screenshot": "",
286+
"tags": "icon,图标,基础组件",
287+
"keywords": "icon,图标,ti-icon",
288+
"dev_mode": "proCode",
289+
"npm": {
290+
"package": "@opentiny/ng",
291+
"exportName": "TiIconComponent",
292+
"destructuring": false
293+
},
294+
"group": "基础组件",
295+
"category": "opentiny-ng",
296+
"configure": {
297+
"loop": true,
298+
"condition": true,
299+
"styles": true,
300+
"isContainer": false,
301+
"isModal": false,
302+
"isPopper": false,
303+
"nestingRule": {
304+
"childWhitelist": "",
305+
"parentWhitelist": "",
306+
"descendantBlacklist": "",
307+
"ancestorWhitelist": ""
308+
},
309+
"isNullNode": false,
310+
"isLayout": false,
311+
"rootSelector": "",
312+
"shortcuts": {
313+
"properties": [
314+
"name"
315+
]
316+
},
317+
"contextMenu": {
318+
"actions": [
319+
"copy",
320+
"remove",
321+
"insert",
322+
"updateAttr",
323+
"bindEvent",
324+
"createBlock"
325+
],
326+
"disable": [
327+
]
328+
},
329+
"invalidity": [
330+
],
331+
"clickCapture": true,
332+
"framework": "Angular"
333+
},
334+
"schema": {
335+
"properties": [
336+
{
337+
"name": "0",
338+
"label": {
339+
"zh_CN": "基础属性"
340+
},
341+
"content": [
342+
{
343+
"property": "name",
344+
"label": {
345+
"text": {
346+
"zh_CN": "图标名称"
347+
}
348+
},
349+
"description": {
350+
"zh_CN": "TinyNG 字体图标名（小写）。优先使用以下精选：search（搜索）、edit（编辑）、delete（删除）、delete-1（删除）、add（添加）、add1（添加）、close（关闭）、clear（清除）、x-thin（细关闭）、cancel（取消）、checkmark（勾选）、checkmark-small（小勾选）、check-circle（圆圈勾选）、warn（警告）、alert-warn（警告提示）、alert-error（错误）、alert-success（成功）、alert-prompt（提示）、info-circle（信息）、exclamation-circle（感叹）、calendar（日历）、time（时间）、config（配置）、filter（筛选）、sort（排序）、sort-ascent（升序）、sort-descent（降序）、arrow-down（向下箭头）、arrow-right（向右箭头）、angle-left（左角）、angle-right（右角）、left-1（向左）、right-1（向右）、refresh（刷新）、refresh-1（刷新）、document（文档）、file（文件）、star（星标）、alarm（告警）、location（定位）、reduce（减少）、plus-square（加号方块）、minus-square（减号方块）、accordion-fold（折叠）、accordion-unfold（展开）。勿使用 Vue/EP 风格名称（如 Search、IconSearch）。"
351+
},
352+
"required": true,
353+
"readOnly": false,
354+
"disabled": false,
355+
"cols": 12,
356+
"labelPosition": "left",
357+
"type": "string",
358+
"widget": {
359+
"component": "InputConfigurator",
360+
"props": {
361+
}
362+
}
363+
}
364+
],
365+
"description": {
366+
"zh_CN": ""
367+
}
368+
}
369+
],
370+
"events": {
371+
},
372+
"slots": {
373+
}
374+
}
375+
},
229376
{
230377
"id": 2,
231378
"version": "3.8.0",
@@ -5208,6 +5355,20 @@
52085355
}
52095356
}
52105357
},
5358+
{
5359+
"name": {
5360+
"zh_CN": "图标"
5361+
},
5362+
"icon": "icon",
5363+
"screenshot": "",
5364+
"snippetName": "TiIcon",
5365+
"schema": {
5366+
"componentName": "TiIcon",
5367+
"props": {
5368+
"name": "search"
5369+
}
5370+
}
5371+
},
52115372
{
52125373
"name": {
52135374
"zh_CN": "输入框"

‎packages/materials/angular-opentiny-ng/src/meta/white-list.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export const whiteList = [
22
// OpenTiny NG 组件
33
'TiButton',
4+
'TiIcon',
45
'TiText',
56
'TiSelect',
67
'TiDate',
@@ -57,7 +58,6 @@ export const whiteList = [
5758
'textarea',
5859
// 内置组件
5960
'Text',
60-
'Icon',
6161
'Img',
6262
'Slot',
6363
// 图表组件（如果支持）

‎projects/tiny-schema-renderer-ng/projects/renderer/src/parser/material-getter.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ export const directiveMap: Record<string, Type<any>> = {
2727
(DefaultValueAccessor['ɵdir'] as any).standalone = true;
2828
(CheckboxControlValueAccessor['ɵdir'] as any).standalone = true;
2929

30-
export const iconMap: Record<string, any> = {};
31-
3230
export const customElements: Record<string, Type<any>> = {};
3331

3432
export const getMaterials = (context: Record<PropertyKey, any> = {}): IRendererMaterials =>

‎projects/tiny-schema-renderer-ng/projects/renderer/src/parser/schema-parser.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getComponent, iconMap } from './material-getter';
1+
import { getComponent } from './material-getter';
22
import { newFn } from './parser-utils';
33
// import { renderDefault } from '../renderer';
44
import { Notify } from './notify';
@@ -174,7 +174,6 @@ export const parseLoopArgs = (_loop: any) => {
174174
}
175175
return undefined;
176176
};
177-
export const getIcon = (name: string) => iconMap[name]?.() || '';
178177
const parseObjectData = (data: any, scope: any, ctx: any) => {
179178
if (!data) {
180179
return data;
@@ -185,10 +184,6 @@ const parseObjectData = (data: any, scope: any, ctx: any) => {
185184
return parseData(data.defaultValue, scope, ctx);
186185
}
187186

188-
// 解析通过属性传递icon图标组件
189-
if (data.componentName === 'Icon') {
190-
return getIcon(data.props.name);
191-
}
192187
const res: Record<string, any> = {};
193188
Object.entries(data).forEach(([key, value]) => {
194189
// 如果是插槽则需要进行特殊处理

‎projects/tiny-schema-renderer-ng/src/app/materials/materials.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import {
1414
TiDateRangeModule,
1515
TiFormfieldComponent,
1616
TiFormfieldModule,
17+
TiIconComponent,
18+
TiIconModule,
1719
TiItemComponent,
1820
TiModalComponent,
1921
TiModalModule,
@@ -52,6 +54,7 @@ import type { IRendererMaterials } from '../../../projects/renderer/src/renderer
5254

5355
const components: Record<string, Type<any>> = {
5456
TiButton: TiButtonComponent,
57+
TiIcon: TiIconComponent,
5558
TiSelect: TiSelectComponent,
5659
TiText: TiTextComponent,
5760
TiTable: TiTableComponent,
@@ -78,6 +81,7 @@ const components: Record<string, Type<any>> = {
7881

7982
const modules: Record<string, Type<any>> = {
8083
TiButton: TiButtonModule,
84+
TiIcon: TiIconModule,
8185
TiSelect: TiSelectModule,
8286
TiText: TiTextModule,
8387
TiTable: TiTableModule,

0 commit comments

Comments
 (0)