@easy-editor/materials-dashboard-text 0.0.18 → 0.0.19
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/CHANGELOG.md +117 -109
- package/dist/component.min.js +1 -1
- package/dist/index.min.js +1 -1
- package/dist/meta.min.js +1 -1
- package/easypack.config.ts +10 -10
- package/package.json +2 -2
- package/src/component.tsx +15 -123
- package/src/configure.ts +7 -205
- package/src/snippets.ts +6 -23
package/CHANGELOG.md
CHANGED
|
@@ -1,109 +1,117 @@
|
|
|
1
|
-
# @easy-editor/materials-dashboard-text
|
|
2
|
-
|
|
3
|
-
## 0.0.
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
1
|
+
# @easy-editor/materials-dashboard-text
|
|
2
|
+
|
|
3
|
+
## 0.0.19
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- perf: configure & datasource
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @easy-editor/materials-shared@0.0.1
|
|
10
|
+
|
|
11
|
+
## 0.0.18
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- fix: build error
|
|
16
|
+
|
|
17
|
+
## 0.0.17
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- feat: text add event
|
|
22
|
+
|
|
23
|
+
## 0.0.16
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- feat: text add datasource
|
|
28
|
+
|
|
29
|
+
## 0.0.15
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- feat: test node upgrade
|
|
34
|
+
|
|
35
|
+
## 0.0.14
|
|
36
|
+
|
|
37
|
+
### Patch Changes
|
|
38
|
+
|
|
39
|
+
- feat: add NodeInfoSetter & title prop
|
|
40
|
+
|
|
41
|
+
## 0.0.13
|
|
42
|
+
|
|
43
|
+
### Patch Changes
|
|
44
|
+
|
|
45
|
+
- feat: multi-version component
|
|
46
|
+
|
|
47
|
+
## 0.0.12
|
|
48
|
+
|
|
49
|
+
### Patch Changes
|
|
50
|
+
|
|
51
|
+
- fix: remove category
|
|
52
|
+
|
|
53
|
+
## 0.0.11
|
|
54
|
+
|
|
55
|
+
### Patch Changes
|
|
56
|
+
|
|
57
|
+
- feat: new setters
|
|
58
|
+
|
|
59
|
+
## 0.0.10
|
|
60
|
+
|
|
61
|
+
### Patch Changes
|
|
62
|
+
|
|
63
|
+
- fix: configure error
|
|
64
|
+
|
|
65
|
+
## 0.0.9
|
|
66
|
+
|
|
67
|
+
### Patch Changes
|
|
68
|
+
|
|
69
|
+
- build: add esm build
|
|
70
|
+
|
|
71
|
+
## 0.0.8
|
|
72
|
+
|
|
73
|
+
### Patch Changes
|
|
74
|
+
|
|
75
|
+
- fix: react build error
|
|
76
|
+
|
|
77
|
+
## 0.0.7
|
|
78
|
+
|
|
79
|
+
### Patch Changes
|
|
80
|
+
|
|
81
|
+
- fix: change componentName
|
|
82
|
+
|
|
83
|
+
## 0.0.6
|
|
84
|
+
|
|
85
|
+
### Patch Changes
|
|
86
|
+
|
|
87
|
+
- feat: add metadata npm
|
|
88
|
+
|
|
89
|
+
## 0.0.5
|
|
90
|
+
|
|
91
|
+
### Patch Changes
|
|
92
|
+
|
|
93
|
+
- feat: add devMode
|
|
94
|
+
|
|
95
|
+
## 0.0.4
|
|
96
|
+
|
|
97
|
+
### Patch Changes
|
|
98
|
+
|
|
99
|
+
- perf: adjust structure
|
|
100
|
+
|
|
101
|
+
## 0.0.3
|
|
102
|
+
|
|
103
|
+
### Patch Changes
|
|
104
|
+
|
|
105
|
+
- perf: material structure
|
|
106
|
+
|
|
107
|
+
## 0.0.2
|
|
108
|
+
|
|
109
|
+
### Patch Changes
|
|
110
|
+
|
|
111
|
+
- perf: update material variable
|
|
112
|
+
|
|
113
|
+
## 0.0.1
|
|
114
|
+
|
|
115
|
+
### Patch Changes
|
|
116
|
+
|
|
117
|
+
- feat: text materials
|
package/dist/component.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsTextComponent={},e.React,e.jsxRuntime)}(this,function(e,t,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsTextComponent={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function n(...e){const t=[];for(const o of e)if(o)if("string"==typeof o||"number"==typeof o)t.push(String(o));else if(Array.isArray(o)){const e=n(...o);e&&t.push(e)}else if("object"==typeof o)for(const[e,n]of Object.entries(o))n&&t.push(e);return t.join(" ")}const r=(e,t)=>{if(!t)return e;const o=t.split(".");let n=e;for(const e of o){if(null==n)return;if("object"!=typeof n)return;n=n[e]}return n},i=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],a=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return i(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return i(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:i}of t)n&&i&&(o[n]=r(e,i));return o}):e)(o,e?.fieldMappings)};const l=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t});l("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]);const s=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}];((e=s)=>{l("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}])})(),l("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var c="component-module__container___VbZSk",u="component-module__text___nFUOn",d="component-module__link___20asF",p="component-module__underline___0oAJz",_="component-module__alignLeft___IOvpO",m="component-module__alignCenter___EIwIC",f="component-module__alignRight___p3ReL",g="component-module__valignTop___-5DmK",x="component-module__valignMiddle___i0are",y="component-module__valignBottom___97zzw";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{display:flex;height:100%;width:100%}.component-module__text___nFUOn{display:inline-block;word-break:break-word}.component-module__link___20asF{cursor:pointer;text-decoration:none;transition:opacity .2s ease}.component-module__link___20asF:hover{opacity:.8}.component-module__underline___0oAJz{text-decoration:underline}.component-module__alignLeft___IOvpO{justify-content:flex-start;text-align:left}.component-module__alignCenter___EIwIC{justify-content:center;text-align:center}.component-module__alignRight___p3ReL{justify-content:flex-end;text-align:right}.component-module__valignTop___-5DmK{align-items:flex-start}.component-module__valignMiddle___i0are{align-items:center}.component-module__valignBottom___97zzw{align-items:flex-end}");const h=({ref:e,$data:r,__dataSource:i,fontSize:l=16,fontWeight:s="normal",fontFamily:h="inherit",color:b="#ffffff",textAlign:v="left",verticalAlign:S="middle",lineHeight:k=1.5,letterSpacing:C=0,isLink:E=!1,href:j="",target:V="_blank",underline:M=!1,glowEnable:w=!1,glowColor:P="#00d4ff",glowIntensity:N=1,rotation:T=0,opacity:A=100,background:I="transparent",style:$,onClick:F,onDoubleClick:L,onMouseEnter:z,onMouseLeave:D})=>{const O=function(e,o){return t.useMemo(()=>a(e,o),[e,o])}(r,i),R=t.useMemo(()=>O.length>0&&O[0]?.text?String(O[0].text):"",[O]),B={fontSize:l,fontWeight:s,fontFamily:h,color:b,lineHeight:k,letterSpacing:C,textShadow:w?`0 0 ${10*N}px ${P}, 0 0 ${20*N}px ${P}, 0 0 ${30*N}px ${P}`:void 0},q={...$,transform:0!==T?`rotate(${T}deg)`:void 0,opacity:A/100,backgroundColor:I},H=n(c,(e=>{switch(e){case"left":default:return _;case"center":return m;case"right":return f}})(v),(e=>{switch(e){case"top":return g;case"middle":default:return x;case"bottom":return y}})(S)),J=n(u,E&&d,M&&p);if(E&&j){const t="_blank"===V?"noopener noreferrer":"";return o.jsx("div",{className:H,onClick:F,onDoubleClick:L,onMouseEnter:z,onMouseLeave:D,ref:e,style:q,children:o.jsx("a",{className:J,href:j,rel:t,style:B,target:V,children:R})})}return o.jsx("div",{className:H,onClick:F,onDoubleClick:L,onMouseEnter:z,onMouseLeave:D,ref:e,style:q,children:o.jsx("span",{className:J,style:B,children:R})})};e.Text=h,e.default=h,Object.defineProperty(e,"__esModule",{value:!0})});
|
package/dist/index.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsText={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function n(e){
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsText={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function n(...e){const t=[];for(const o of e)if(o)if("string"==typeof o||"number"==typeof o)t.push(String(o));else if(Array.isArray(o)){const e=n(...o);e&&t.push(e)}else if("object"==typeof o)for(const[e,n]of Object.entries(o))n&&t.push(e);return t.join(" ")}const r=(e,t)=>{if(!t)return e;const o=t.split(".");let n=e;for(const e of o){if(null==n)return;if("object"!=typeof n)return;n=n[e]}return n},a=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],l=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return a(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return a(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:a}of t)n&&a&&(o[n]=r(e,a));return o}):e)(o,e?.fieldMappings)};const i=(e,t)=>{const o=Array.isArray(e)?e:[e],n=o[0]||{};return{sourceType:"static",staticData:o,fieldMappings:Object.keys(n).map(e=>({componentField:e,sourceField:e}))}},s=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t}),c={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},p=s("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),d=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],u=((e=d)=>s("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),m=s("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var f="component-module__container___VbZSk",_="component-module__text___nFUOn",g="component-module__link___20asF",h="component-module__underline___0oAJz",x="component-module__alignLeft___IOvpO",b="component-module__alignCenter___EIwIC",y="component-module__alignRight___p3ReL",S="component-module__valignTop___-5DmK",v="component-module__valignMiddle___i0are",k="component-module__valignBottom___97zzw";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{display:flex;height:100%;width:100%}.component-module__text___nFUOn{display:inline-block;word-break:break-word}.component-module__link___20asF{cursor:pointer;text-decoration:none;transition:opacity .2s ease}.component-module__link___20asF:hover{opacity:.8}.component-module__underline___0oAJz{text-decoration:underline}.component-module__alignLeft___IOvpO{justify-content:flex-start;text-align:left}.component-module__alignCenter___EIwIC{justify-content:center;text-align:center}.component-module__alignRight___p3ReL{justify-content:flex-end;text-align:right}.component-module__valignTop___-5DmK{align-items:flex-start}.component-module__valignMiddle___i0are{align-items:center}.component-module__valignBottom___97zzw{align-items:flex-end}");const w=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[c,p,e]},{type:"group",key:"data",title:"数据",items:[c,t]},{type:"group",key:"advanced",title:"高级",items:[c,u,m]}]}],component:{},supports:{},advanced:{}}))(s("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"content",title:"内容",items:[{name:"isLink",title:"作为链接",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SelectSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}}]},{type:"group",key:"font",title:"字体",items:[{name:"fontSize",title:"字体大小",setter:"NumberSetter",extraProps:{defaultValue:16}},{name:"fontWeight",title:"字体粗细",setter:{componentName:"SelectSetter",props:{options:[{label:"正常",value:"normal"},{label:"粗体",value:"bold"}]}},extraProps:{defaultValue:"normal"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#ffffff"}},{name:"lineHeight",title:"行高",setter:"NumberSetter",extraProps:{defaultValue:1.5}}]},{type:"group",key:"align",title:"对齐",items:[{name:"textAlign",title:"水平对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"左",value:"left"},{label:"中",value:"center"},{label:"右",value:"right"}]}},extraProps:{defaultValue:"left"}},{name:"verticalAlign",title:"垂直对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上",value:"top"},{label:"中",value:"middle"},{label:"下",value:"bottom"}]}},extraProps:{defaultValue:"middle"}}]},{type:"group",key:"effect",title:"效果",items:[{name:"underline",title:"下划线",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowColor",title:"发光颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"text",label:"text",type:"string",required:!0,description:"文本内容"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}}),N="EasyEditorMaterialsText";const V={componentName:N,title:"文本",group:"basic",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-text",version:"0.0.19",globalName:N,componentName:N},configure:w,snippets:[{title:"普通文本",screenshot:"",schema:{componentName:N,title:"普通文本",props:{fontSize:16,color:"#ffffff",rotation:0,opacity:100,background:"transparent",$data:i({text:"普通文本"})},$dashboard:{rect:{width:120,height:40}}}},{title:"标题文本",screenshot:"",schema:{componentName:N,title:"标题文本",props:{fontSize:32,fontWeight:"bold",color:"#ffffff",textAlign:"center",rotation:0,opacity:100,background:"transparent",$data:i({text:"标题文本"})},$dashboard:{rect:{width:200,height:60}}}},{title:"发光标题",screenshot:"",schema:{componentName:N,title:"发光标题",props:{fontSize:36,fontWeight:"bold",color:"#00d4ff",textAlign:"center",glowEnable:!0,glowColor:"#00d4ff",glowIntensity:1.5,rotation:0,opacity:100,background:"transparent",$data:i({text:"发光标题"})},$dashboard:{rect:{width:240,height:80}}}},{title:"链接文本",screenshot:"",schema:{componentName:N,title:"链接文本",props:{fontSize:16,color:"#00d4ff",isLink:!0,href:"https://easy-editor-docs.vercel.app/",target:"_blank",underline:!0,rotation:0,opacity:100,background:"transparent",$data:i({text:"点击跳转"})},$dashboard:{rect:{width:120,height:40}}}},{title:"标签文本",screenshot:"",schema:{componentName:N,title:"标签文本",props:{fontSize:14,color:"#ffffff",textAlign:"center",verticalAlign:"middle",rotation:0,opacity:100,background:"rgba(0, 212, 255, 0.2)",$data:i({text:"标签"})},$dashboard:{rect:{width:80,height:32}}}}]};e.component=({ref:e,$data:r,__dataSource:a,fontSize:i=16,fontWeight:s="normal",fontFamily:c="inherit",color:p="#ffffff",textAlign:d="left",verticalAlign:u="middle",lineHeight:m=1.5,letterSpacing:w=0,isLink:N=!1,href:V="",target:P="_blank",underline:C=!1,glowEnable:E=!1,glowColor:$="#00d4ff",glowIntensity:A=1,rotation:j=0,opacity:M=100,background:T="transparent",style:z,onClick:I,onDoubleClick:F,onMouseEnter:L,onMouseLeave:D})=>{const O=function(e,o){return t.useMemo(()=>l(e,o),[e,o])}(r,a),R=t.useMemo(()=>O.length>0&&O[0]?.text?String(O[0].text):"",[O]),W={fontSize:i,fontWeight:s,fontFamily:c,color:p,lineHeight:m,letterSpacing:w,textShadow:E?`0 0 ${10*A}px ${$}, 0 0 ${20*A}px ${$}, 0 0 ${30*A}px ${$}`:void 0},B={...z,transform:0!==j?`rotate(${j}deg)`:void 0,opacity:M/100,backgroundColor:T},q=n(f,(e=>{switch(e){case"left":default:return x;case"center":return b;case"right":return y}})(d),(e=>{switch(e){case"top":return S;case"middle":default:return v;case"bottom":return k}})(u)),H=n(_,N&&g,C&&h);if(N&&V){const t="_blank"===P?"noopener noreferrer":"";return o.jsx("div",{className:q,onClick:I,onDoubleClick:F,onMouseEnter:L,onMouseLeave:D,ref:e,style:B,children:o.jsx("a",{className:H,href:V,rel:t,style:W,target:P,children:R})})}return o.jsx("div",{className:q,onClick:I,onDoubleClick:F,onMouseEnter:L,onMouseLeave:D,ref:e,style:B,children:o.jsx("span",{className:H,style:W,children:R})})},e.meta=V});
|
package/dist/meta.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsTextMeta={})}(this,function(e){"use strict";const t=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsTextMeta={})}(this,function(e){"use strict";const t=(e,t)=>{const a=Array.isArray(e)?e:[e],r=a[0]||{};return{sourceType:"static",staticData:a,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},a=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),r={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o=a("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),l=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],i=((e=l)=>a("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),n=a("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);const s=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[r,o,e]},{type:"group",key:"data",title:"数据",items:[r,t]},{type:"group",key:"advanced",title:"高级",items:[r,i,n]}]}],component:{},supports:{},advanced:{}}))(a("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"content",title:"内容",items:[{name:"isLink",title:"作为链接",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SelectSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}}]},{type:"group",key:"font",title:"字体",items:[{name:"fontSize",title:"字体大小",setter:"NumberSetter",extraProps:{defaultValue:16}},{name:"fontWeight",title:"字体粗细",setter:{componentName:"SelectSetter",props:{options:[{label:"正常",value:"normal"},{label:"粗体",value:"bold"}]}},extraProps:{defaultValue:"normal"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#ffffff"}},{name:"lineHeight",title:"行高",setter:"NumberSetter",extraProps:{defaultValue:1.5}}]},{type:"group",key:"align",title:"对齐",items:[{name:"textAlign",title:"水平对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"左",value:"left"},{label:"中",value:"center"},{label:"右",value:"right"}]}},extraProps:{defaultValue:"left"}},{name:"verticalAlign",title:"垂直对齐",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上",value:"top"},{label:"中",value:"middle"},{label:"下",value:"bottom"}]}},extraProps:{defaultValue:"middle"}}]},{type:"group",key:"effect",title:"效果",items:[{name:"underline",title:"下划线",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowColor",title:"发光颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"text",label:"text",type:"string",required:!0,description:"文本内容"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}}),p="EasyEditorMaterialsText";const d={componentName:p,title:"文本",group:"basic",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-text",version:"0.0.19",globalName:p,componentName:p},configure:s,snippets:[{title:"普通文本",screenshot:"",schema:{componentName:p,title:"普通文本",props:{fontSize:16,color:"#ffffff",rotation:0,opacity:100,background:"transparent",$data:t({text:"普通文本"})},$dashboard:{rect:{width:120,height:40}}}},{title:"标题文本",screenshot:"",schema:{componentName:p,title:"标题文本",props:{fontSize:32,fontWeight:"bold",color:"#ffffff",textAlign:"center",rotation:0,opacity:100,background:"transparent",$data:t({text:"标题文本"})},$dashboard:{rect:{width:200,height:60}}}},{title:"发光标题",screenshot:"",schema:{componentName:p,title:"发光标题",props:{fontSize:36,fontWeight:"bold",color:"#00d4ff",textAlign:"center",glowEnable:!0,glowColor:"#00d4ff",glowIntensity:1.5,rotation:0,opacity:100,background:"transparent",$data:t({text:"发光标题"})},$dashboard:{rect:{width:240,height:80}}}},{title:"链接文本",screenshot:"",schema:{componentName:p,title:"链接文本",props:{fontSize:16,color:"#00d4ff",isLink:!0,href:"https://easy-editor-docs.vercel.app/",target:"_blank",underline:!0,rotation:0,opacity:100,background:"transparent",$data:t({text:"点击跳转"})},$dashboard:{rect:{width:120,height:40}}}},{title:"标签文本",screenshot:"",schema:{componentName:p,title:"标签文本",props:{fontSize:14,color:"#ffffff",textAlign:"center",verticalAlign:"middle",rotation:0,opacity:100,background:"rgba(0, 212, 255, 0.2)",$data:t({text:"标签"})},$dashboard:{rect:{width:80,height:32}}}}]};e.meta=d});
|
package/easypack.config.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @easy-editor/easypack configuration
|
|
3
|
-
* @type {import('@easy-editor/easypack').EasypackConfig}
|
|
4
|
-
*/
|
|
5
|
-
export default {
|
|
6
|
-
preset: 'material',
|
|
7
|
-
dev: {
|
|
8
|
-
port: 5001,
|
|
9
|
-
},
|
|
10
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* @easy-editor/easypack configuration
|
|
3
|
+
* @type {import('@easy-editor/easypack').EasypackConfig}
|
|
4
|
+
*/
|
|
5
|
+
export default {
|
|
6
|
+
preset: 'material',
|
|
7
|
+
dev: {
|
|
8
|
+
port: 5001,
|
|
9
|
+
},
|
|
10
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@easy-editor/materials-dashboard-text",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19",
|
|
4
4
|
"description": "Text component for EasyEditor dashboard",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react-dom": "^18 || ^19"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@easy-editor/materials-shared": "0.0.
|
|
48
|
+
"@easy-editor/materials-shared": "0.0.1"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|
|
51
51
|
"dev": "easypack dev",
|
package/src/component.tsx
CHANGED
|
@@ -3,86 +3,14 @@
|
|
|
3
3
|
* 文本组件 - 支持普通文本、链接、标题、发光效果
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import { cn } from '@easy-editor/materials-shared'
|
|
6
|
+
import { useMemo, type CSSProperties } from 'react'
|
|
7
|
+
import { cn, type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
|
|
9
8
|
import styles from './component.module.css'
|
|
10
9
|
|
|
11
10
|
export type TextAlign = 'left' | 'center' | 'right'
|
|
12
11
|
export type VerticalAlign = 'top' | 'middle' | 'bottom'
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
interface DataConfig {
|
|
16
|
-
/** 数据源类型：具体数据 | 数据源 | 全局数据源 */
|
|
17
|
-
sourceType: 'static' | 'datasource' | 'global'
|
|
18
|
-
/** 静态数据（sourceType === 'static'） */
|
|
19
|
-
staticData?: unknown[]
|
|
20
|
-
/** 数据源 ID（sourceType === 'datasource' | 'global'） */
|
|
21
|
-
datasourceId?: string
|
|
22
|
-
/** 字段映射配置 */
|
|
23
|
-
fieldMappings?: Array<{
|
|
24
|
-
componentField: string
|
|
25
|
-
sourceField: string
|
|
26
|
-
}>
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/** 根据路径从对象中获取值 */
|
|
30
|
-
function getValueByPath(obj: unknown, path: string): unknown {
|
|
31
|
-
if (!path) return obj
|
|
32
|
-
const keys = path.split('.')
|
|
33
|
-
let current: unknown = obj
|
|
34
|
-
for (const key of keys) {
|
|
35
|
-
if (current === null || current === undefined) return undefined
|
|
36
|
-
if (typeof current !== 'object') return undefined
|
|
37
|
-
current = (current as Record<string, unknown>)[key]
|
|
38
|
-
}
|
|
39
|
-
return current
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
/** 从数据源数据中提取数组 */
|
|
43
|
-
function extractDataFromSource(dsData: unknown): unknown[] {
|
|
44
|
-
if (dsData === undefined) return []
|
|
45
|
-
|
|
46
|
-
if (Array.isArray(dsData)) {
|
|
47
|
-
return dsData
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
if (dsData && typeof dsData === 'object') {
|
|
51
|
-
return [dsData]
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return []
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/** 应用字段映射 */
|
|
58
|
-
function applyFieldMappings(
|
|
59
|
-
rawData: unknown[],
|
|
60
|
-
mappings?: Array<{ componentField: string; sourceField: string }>,
|
|
61
|
-
): Record<string, unknown>[] {
|
|
62
|
-
if (!mappings || mappings.length === 0) {
|
|
63
|
-
return rawData as Record<string, unknown>[]
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
return rawData.map(item => {
|
|
67
|
-
const result: Record<string, unknown> = {}
|
|
68
|
-
for (const { componentField, sourceField } of mappings) {
|
|
69
|
-
if (componentField && sourceField) {
|
|
70
|
-
result[componentField] = getValueByPath(item, sourceField)
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
return result
|
|
74
|
-
})
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export interface TextProps {
|
|
78
|
-
ref?: Ref<HTMLDivElement>
|
|
79
|
-
/** 数据配置（来自 $data extraProp） */
|
|
80
|
-
$data?: DataConfig
|
|
81
|
-
/** 数据源数据（由渲染器 HOC 传递） */
|
|
82
|
-
__dataSource?: {
|
|
83
|
-
component: Record<string, unknown>
|
|
84
|
-
page: Record<string, unknown>
|
|
85
|
-
}
|
|
13
|
+
export interface TextProps extends MaterialComponet {
|
|
86
14
|
/** 字体大小 */
|
|
87
15
|
fontSize?: number
|
|
88
16
|
/** 字体粗细 */
|
|
@@ -113,16 +41,6 @@ export interface TextProps {
|
|
|
113
41
|
glowColor?: string
|
|
114
42
|
/** 发光强度 */
|
|
115
43
|
glowIntensity?: number
|
|
116
|
-
/** 旋转角度 */
|
|
117
|
-
rotation?: number
|
|
118
|
-
/** 不透明度 (0-100) */
|
|
119
|
-
opacity?: number
|
|
120
|
-
/** 背景颜色 */
|
|
121
|
-
background?: string
|
|
122
|
-
/** 显隐控制 */
|
|
123
|
-
condition?: boolean
|
|
124
|
-
/** 外部样式 */
|
|
125
|
-
style?: CSSProperties
|
|
126
44
|
/** 事件处理 */
|
|
127
45
|
onClick?: (e: React.MouseEvent) => void
|
|
128
46
|
onDoubleClick?: (e: React.MouseEvent) => void
|
|
@@ -184,35 +102,13 @@ export const Text: React.FC<TextProps> = ({
|
|
|
184
102
|
onMouseEnter,
|
|
185
103
|
onMouseLeave,
|
|
186
104
|
}) => {
|
|
187
|
-
|
|
188
|
-
const
|
|
189
|
-
if (
|
|
190
|
-
|
|
191
|
-
let rawData: unknown[] = []
|
|
192
|
-
|
|
193
|
-
if ($data.sourceType === 'static') {
|
|
194
|
-
// 静态数据：直接使用
|
|
195
|
-
rawData = Array.isArray($data.staticData) ? $data.staticData : []
|
|
196
|
-
} else if ($data.sourceType === 'global' && $data.datasourceId) {
|
|
197
|
-
// 全局数据源：从页面数据源获取
|
|
198
|
-
const dsData = __dataSource?.page?.[$data.datasourceId]
|
|
199
|
-
rawData = extractDataFromSource(dsData)
|
|
200
|
-
} else if ($data.sourceType === 'datasource' && $data.datasourceId) {
|
|
201
|
-
// 组件数据源：从组件数据源获取
|
|
202
|
-
const dsData = __dataSource?.component?.[$data.datasourceId]
|
|
203
|
-
rawData = extractDataFromSource(dsData)
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
// 应用字段映射
|
|
207
|
-
const mappedData = applyFieldMappings(rawData, $data.fieldMappings)
|
|
208
|
-
|
|
209
|
-
// 取第一条数据的 text 字段作为显示内容
|
|
210
|
-
if (mappedData.length > 0 && mappedData[0].text !== undefined) {
|
|
211
|
-
return String(mappedData[0].text)
|
|
105
|
+
const dataSource = useDataSource($data, __dataSource)
|
|
106
|
+
const data = useMemo<string>(() => {
|
|
107
|
+
if (dataSource.length > 0 && dataSource[0]?.text) {
|
|
108
|
+
return String(dataSource[0].text)
|
|
212
109
|
}
|
|
213
|
-
|
|
214
110
|
return ''
|
|
215
|
-
}, [
|
|
111
|
+
}, [dataSource])
|
|
216
112
|
|
|
217
113
|
// 计算发光效果
|
|
218
114
|
const textShadow = glowEnable
|
|
@@ -237,11 +133,7 @@ export const Text: React.FC<TextProps> = ({
|
|
|
237
133
|
backgroundColor: background,
|
|
238
134
|
}
|
|
239
135
|
|
|
240
|
-
const containerClass = cn(
|
|
241
|
-
styles.container,
|
|
242
|
-
getAlignClass(textAlign),
|
|
243
|
-
getValignClass(verticalAlign),
|
|
244
|
-
)
|
|
136
|
+
const containerClass = cn(styles.container, getAlignClass(textAlign), getValignClass(verticalAlign))
|
|
245
137
|
|
|
246
138
|
const textClass = cn(styles.text, isLink && styles.link, underline && styles.underline)
|
|
247
139
|
|
|
@@ -251,15 +143,15 @@ export const Text: React.FC<TextProps> = ({
|
|
|
251
143
|
return (
|
|
252
144
|
<div
|
|
253
145
|
className={containerClass}
|
|
254
|
-
ref={ref}
|
|
255
|
-
style={containerStyle}
|
|
256
146
|
onClick={onClick}
|
|
257
147
|
onDoubleClick={onDoubleClick}
|
|
258
148
|
onMouseEnter={onMouseEnter}
|
|
259
149
|
onMouseLeave={onMouseLeave}
|
|
150
|
+
ref={ref}
|
|
151
|
+
style={containerStyle}
|
|
260
152
|
>
|
|
261
153
|
<a className={textClass} href={href} rel={relValue} style={textStyle} target={target}>
|
|
262
|
-
{
|
|
154
|
+
{data}
|
|
263
155
|
</a>
|
|
264
156
|
</div>
|
|
265
157
|
)
|
|
@@ -269,15 +161,15 @@ export const Text: React.FC<TextProps> = ({
|
|
|
269
161
|
return (
|
|
270
162
|
<div
|
|
271
163
|
className={containerClass}
|
|
272
|
-
ref={ref}
|
|
273
|
-
style={containerStyle}
|
|
274
164
|
onClick={onClick}
|
|
275
165
|
onDoubleClick={onDoubleClick}
|
|
276
166
|
onMouseEnter={onMouseEnter}
|
|
277
167
|
onMouseLeave={onMouseLeave}
|
|
168
|
+
ref={ref}
|
|
169
|
+
style={containerStyle}
|
|
278
170
|
>
|
|
279
171
|
<span className={textClass} style={textStyle}>
|
|
280
|
-
{
|
|
172
|
+
{data}
|
|
281
173
|
</span>
|
|
282
174
|
</div>
|
|
283
175
|
)
|
package/src/configure.ts
CHANGED
|
@@ -1,103 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Text Configure
|
|
3
|
-
* 文本组件配置
|
|
3
|
+
* 文本组件配置
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import type {
|
|
6
|
+
import type { FieldConfig } from '@easy-editor/core'
|
|
7
|
+
import { createCollapseGroup, createDataConfigGroup, createStandardConfigure } from '@easy-editor/materials-shared'
|
|
7
8
|
|
|
8
|
-
/**
|
|
9
|
-
const createCollapseGroup = (title: string, items: FieldConfig[], props?: Record<string, unknown>): FieldConfig => ({
|
|
10
|
-
type: 'group',
|
|
11
|
-
title,
|
|
12
|
-
setter: {
|
|
13
|
-
componentName: 'CollapseSetter',
|
|
14
|
-
props: {
|
|
15
|
-
icon: false,
|
|
16
|
-
...props,
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
items,
|
|
20
|
-
})
|
|
21
|
-
|
|
22
|
-
const globalConfigGroup: FieldConfig = {
|
|
23
|
-
name: 'nodeInfo',
|
|
24
|
-
title: '节点信息',
|
|
25
|
-
setter: 'NodeInfoSetter',
|
|
26
|
-
extraProps: {
|
|
27
|
-
// @ts-expect-error label is not a valid extra prop
|
|
28
|
-
label: false,
|
|
29
|
-
},
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/** 基础配置 - 所有组件通用 */
|
|
33
|
-
const basicConfigGroup: FieldConfig = createCollapseGroup('基础配置', [
|
|
34
|
-
{
|
|
35
|
-
name: 'title',
|
|
36
|
-
title: '标题',
|
|
37
|
-
setter: 'StringSetter',
|
|
38
|
-
extraProps: {
|
|
39
|
-
getValue(target) {
|
|
40
|
-
return target.getExtraPropValue('title')
|
|
41
|
-
},
|
|
42
|
-
setValue(target, value) {
|
|
43
|
-
target.setExtraPropValue('title', value)
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
name: 'rect',
|
|
49
|
-
title: '位置尺寸',
|
|
50
|
-
setter: 'RectSetter',
|
|
51
|
-
extraProps: {
|
|
52
|
-
getValue(target) {
|
|
53
|
-
return target.getExtraPropValue('$dashboard.rect')
|
|
54
|
-
},
|
|
55
|
-
setValue(target, value) {
|
|
56
|
-
target.setExtraPropValue('$dashboard.rect', value)
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
name: 'rotation',
|
|
62
|
-
title: '旋转角度',
|
|
63
|
-
setter: {
|
|
64
|
-
componentName: 'SliderSetter',
|
|
65
|
-
props: {
|
|
66
|
-
min: 0,
|
|
67
|
-
max: 360,
|
|
68
|
-
suffix: '°',
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
extraProps: {
|
|
72
|
-
defaultValue: 0,
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
name: 'opacity',
|
|
77
|
-
title: '不透明度',
|
|
78
|
-
setter: {
|
|
79
|
-
componentName: 'SliderSetter',
|
|
80
|
-
props: {
|
|
81
|
-
min: 0,
|
|
82
|
-
max: 100,
|
|
83
|
-
suffix: '%',
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
|
-
extraProps: {
|
|
87
|
-
defaultValue: 100,
|
|
88
|
-
},
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
name: 'background',
|
|
92
|
-
title: '背景颜色',
|
|
93
|
-
setter: 'ColorSetter',
|
|
94
|
-
extraProps: {
|
|
95
|
-
defaultValue: 'transparent',
|
|
96
|
-
},
|
|
97
|
-
},
|
|
98
|
-
])
|
|
99
|
-
|
|
100
|
-
/** 组件配置 - 文本组件独有 */
|
|
9
|
+
/** 组件配置 */
|
|
101
10
|
const componentConfigGroup: FieldConfig = createCollapseGroup(
|
|
102
11
|
'组件配置',
|
|
103
12
|
[
|
|
@@ -274,115 +183,8 @@ const componentConfigGroup: FieldConfig = createCollapseGroup(
|
|
|
274
183
|
)
|
|
275
184
|
|
|
276
185
|
/** 数据配置 */
|
|
277
|
-
const dataConfigGroup: FieldConfig =
|
|
278
|
-
name: '
|
|
279
|
-
title: '数据配置',
|
|
280
|
-
setter: {
|
|
281
|
-
componentName: 'DataSetter',
|
|
282
|
-
props: {
|
|
283
|
-
expectedFields: [
|
|
284
|
-
{ name: 'text', label: 'text', type: 'string', required: true, description: '文本内容' },
|
|
285
|
-
],
|
|
286
|
-
showPreview: true,
|
|
287
|
-
previewLimit: 10,
|
|
288
|
-
},
|
|
289
|
-
},
|
|
290
|
-
extraProps: {
|
|
291
|
-
// @ts-ignore
|
|
292
|
-
label: false,
|
|
293
|
-
},
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
/** 事件绑定配置 */
|
|
297
|
-
const eventConfigGroup: FieldConfig = createCollapseGroup('事件绑定', [
|
|
298
|
-
{
|
|
299
|
-
name: 'events',
|
|
300
|
-
title: '事件',
|
|
301
|
-
setter: {
|
|
302
|
-
componentName: 'EventSetter',
|
|
303
|
-
props: {
|
|
304
|
-
events: [
|
|
305
|
-
{
|
|
306
|
-
title: '点击事件',
|
|
307
|
-
children: [
|
|
308
|
-
{ label: '点击', value: 'onClick', description: '鼠标点击时触发' },
|
|
309
|
-
{ label: '双击', value: 'onDoubleClick', description: '鼠标双击时触发' },
|
|
310
|
-
],
|
|
311
|
-
},
|
|
312
|
-
{
|
|
313
|
-
title: '鼠标事件',
|
|
314
|
-
children: [
|
|
315
|
-
{ label: '鼠标进入', value: 'onMouseEnter', description: '鼠标进入时触发' },
|
|
316
|
-
{ label: '鼠标离开', value: 'onMouseLeave', description: '鼠标离开时触发' },
|
|
317
|
-
],
|
|
318
|
-
},
|
|
319
|
-
],
|
|
320
|
-
},
|
|
321
|
-
},
|
|
322
|
-
extraProps: {
|
|
323
|
-
// @ts-ignore
|
|
324
|
-
label: false,
|
|
325
|
-
},
|
|
326
|
-
},
|
|
186
|
+
const dataConfigGroup: FieldConfig = createDataConfigGroup([
|
|
187
|
+
{ name: 'text', label: 'text', type: 'string', required: true, description: '文本内容' },
|
|
327
188
|
])
|
|
328
189
|
|
|
329
|
-
|
|
330
|
-
const advancedConfigGroup: FieldConfig = createCollapseGroup('高级配置', [
|
|
331
|
-
{
|
|
332
|
-
title: '条件渲染',
|
|
333
|
-
setter: 'SwitchSetter',
|
|
334
|
-
extraProps: {
|
|
335
|
-
supportVariable: true,
|
|
336
|
-
getValue(target) {
|
|
337
|
-
return target.getNode().getExtraPropValue('condition')
|
|
338
|
-
},
|
|
339
|
-
setValue(target, value: boolean) {
|
|
340
|
-
target.getNode().setExtraProp('condition', value)
|
|
341
|
-
},
|
|
342
|
-
},
|
|
343
|
-
},
|
|
344
|
-
// {
|
|
345
|
-
// name: 'loop',
|
|
346
|
-
// title: '循环渲染',
|
|
347
|
-
// setter: 'SwitchSetter',
|
|
348
|
-
// extraProps: {
|
|
349
|
-
// defaultValue: false,
|
|
350
|
-
// },
|
|
351
|
-
// },
|
|
352
|
-
])
|
|
353
|
-
|
|
354
|
-
export const configure: Configure = {
|
|
355
|
-
props: [
|
|
356
|
-
{
|
|
357
|
-
type: 'group',
|
|
358
|
-
title: '属性',
|
|
359
|
-
setter: 'TabSetter',
|
|
360
|
-
items: [
|
|
361
|
-
// 配置 Tab
|
|
362
|
-
{
|
|
363
|
-
type: 'group',
|
|
364
|
-
key: 'config',
|
|
365
|
-
title: '配置',
|
|
366
|
-
items: [globalConfigGroup, basicConfigGroup, componentConfigGroup],
|
|
367
|
-
},
|
|
368
|
-
// 数据 Tab
|
|
369
|
-
{
|
|
370
|
-
type: 'group',
|
|
371
|
-
key: 'data',
|
|
372
|
-
title: '数据',
|
|
373
|
-
items: [globalConfigGroup, dataConfigGroup],
|
|
374
|
-
},
|
|
375
|
-
// 高级 Tab
|
|
376
|
-
{
|
|
377
|
-
type: 'group',
|
|
378
|
-
key: 'advanced',
|
|
379
|
-
title: '高级',
|
|
380
|
-
items: [globalConfigGroup, eventConfigGroup, advancedConfigGroup],
|
|
381
|
-
},
|
|
382
|
-
],
|
|
383
|
-
},
|
|
384
|
-
],
|
|
385
|
-
component: {},
|
|
386
|
-
supports: {},
|
|
387
|
-
advanced: {},
|
|
388
|
-
}
|
|
190
|
+
export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)
|
package/src/snippets.ts
CHANGED
|
@@ -5,24 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
import type { Snippet } from '@easy-editor/core'
|
|
7
7
|
import { COMPONENT_NAME } from './constants'
|
|
8
|
-
|
|
9
|
-
// 生成静态数据源
|
|
10
|
-
const generateStaticDataSource = (text: string) => {
|
|
11
|
-
return {
|
|
12
|
-
sourceType: "static",
|
|
13
|
-
staticData: [
|
|
14
|
-
{
|
|
15
|
-
text
|
|
16
|
-
}
|
|
17
|
-
],
|
|
18
|
-
fieldMappings: [
|
|
19
|
-
{
|
|
20
|
-
componentField: "text",
|
|
21
|
-
sourceField: "text"
|
|
22
|
-
}
|
|
23
|
-
]
|
|
24
|
-
}
|
|
25
|
-
}
|
|
8
|
+
import { generateStaticDataSource } from '@easy-editor/materials-shared'
|
|
26
9
|
|
|
27
10
|
export const snippets: Snippet[] = [
|
|
28
11
|
{
|
|
@@ -37,7 +20,7 @@ export const snippets: Snippet[] = [
|
|
|
37
20
|
rotation: 0,
|
|
38
21
|
opacity: 100,
|
|
39
22
|
background: 'transparent',
|
|
40
|
-
$data: generateStaticDataSource('普通文本'),
|
|
23
|
+
$data: generateStaticDataSource({ text: '普通文本' }),
|
|
41
24
|
},
|
|
42
25
|
$dashboard: {
|
|
43
26
|
rect: {
|
|
@@ -61,7 +44,7 @@ export const snippets: Snippet[] = [
|
|
|
61
44
|
rotation: 0,
|
|
62
45
|
opacity: 100,
|
|
63
46
|
background: 'transparent',
|
|
64
|
-
$data: generateStaticDataSource('标题文本'),
|
|
47
|
+
$data: generateStaticDataSource({ text: '标题文本' }),
|
|
65
48
|
},
|
|
66
49
|
$dashboard: {
|
|
67
50
|
rect: {
|
|
@@ -88,7 +71,7 @@ export const snippets: Snippet[] = [
|
|
|
88
71
|
rotation: 0,
|
|
89
72
|
opacity: 100,
|
|
90
73
|
background: 'transparent',
|
|
91
|
-
$data: generateStaticDataSource('发光标题')
|
|
74
|
+
$data: generateStaticDataSource({ text: '发光标题' }),
|
|
92
75
|
},
|
|
93
76
|
$dashboard: {
|
|
94
77
|
rect: {
|
|
@@ -114,7 +97,7 @@ export const snippets: Snippet[] = [
|
|
|
114
97
|
rotation: 0,
|
|
115
98
|
opacity: 100,
|
|
116
99
|
background: 'transparent',
|
|
117
|
-
$data: generateStaticDataSource('点击跳转'),
|
|
100
|
+
$data: generateStaticDataSource({ text: '点击跳转' }),
|
|
118
101
|
},
|
|
119
102
|
$dashboard: {
|
|
120
103
|
rect: {
|
|
@@ -138,7 +121,7 @@ export const snippets: Snippet[] = [
|
|
|
138
121
|
rotation: 0,
|
|
139
122
|
opacity: 100,
|
|
140
123
|
background: 'rgba(0, 212, 255, 0.2)',
|
|
141
|
-
$data: generateStaticDataSource('标签'),
|
|
124
|
+
$data: generateStaticDataSource({ text: '标签' }),
|
|
142
125
|
},
|
|
143
126
|
$dashboard: {
|
|
144
127
|
rect: {
|