@easy-editor/materials-dashboard-text 0.0.15 → 0.0.17
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 +12 -0
- package/dist/component.min.js +1 -2
- package/dist/index.min.js +1 -2
- package/dist/meta.min.js +1 -2
- package/easypack.config.ts +10 -0
- package/package.json +6 -10
- package/src/assets/plain.png +0 -0
- package/src/component.module.css +58 -0
- package/src/component.tsx +286 -0
- package/src/configure.ts +388 -0
- package/{dist/src/constants.d.ts → src/constants.ts} +17 -16
- package/src/index.tsx +7 -0
- package/src/meta.ts +26 -0
- package/src/snippets.ts +151 -0
- package/src/type.d.ts +8 -0
- package/tsconfig.json +20 -9
- package/.vite/plugins/vite-plugin-external-deps.ts +0 -224
- package/.vite/plugins/vite-plugin-material-dev.ts +0 -218
- package/dist/component.esm.js +0 -134
- package/dist/component.esm.js.map +0 -1
- package/dist/component.js +0 -143
- package/dist/component.js.map +0 -1
- package/dist/component.min.js.map +0 -1
- package/dist/index.cjs +0 -513
- package/dist/index.cjs.map +0 -1
- package/dist/index.esm.js +0 -510
- package/dist/index.esm.js.map +0 -1
- package/dist/index.js +0 -518
- package/dist/index.js.map +0 -1
- package/dist/index.min.js.map +0 -1
- package/dist/meta.esm.js +0 -380
- package/dist/meta.esm.js.map +0 -1
- package/dist/meta.js +0 -388
- package/dist/meta.js.map +0 -1
- package/dist/meta.min.js.map +0 -1
- package/dist/src/component.d.ts +0 -48
- package/dist/src/configure.d.ts +0 -6
- package/dist/src/index.d.ts +0 -6
- package/dist/src/meta.d.ts +0 -6
- package/dist/src/snippets.d.ts +0 -6
- package/vite.config.ts +0 -54
package/CHANGELOG.md
CHANGED
package/dist/component.min.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsTextComponent={},e.jsxRuntime)}(this,function(e,t){"use strict";function
|
|
2
|
-
//# sourceMappingURL=component.min.js.map
|
|
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,n){"use strict";function o(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(n=o(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function r(...e){return function(){for(var e,t,n=0,r="",i=arguments.length;n<i;n++)(e=arguments[n])&&(t=o(e))&&(r&&(r+=" "),r+=t);return r}(e)}var i="component-module__container___VbZSk",l="component-module__text___nFUOn",a="component-module__link___20asF",c="component-module__underline___0oAJz",s="component-module__alignLeft___IOvpO",_="component-module__alignCenter___EIwIC",d="component-module__alignRight___p3ReL",u="component-module__valignTop___-5DmK",f="component-module__valignMiddle___i0are",m="component-module__valignBottom___97zzw";function p(e,t){if(!t)return e;const n=t.split(".");let o=e;for(const e of n){if(null==o)return;if("object"!=typeof o)return;o=o[e]}return o}function g(e){return void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[]}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.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 y=({ref:e,$data:o,__dataSource:y,fontSize:h=16,fontWeight:x="normal",fontFamily:v="inherit",color:b="#ffffff",textAlign:k="left",verticalAlign:C="middle",lineHeight:j=1.5,letterSpacing:w=0,isLink:M=!1,href:T="",target:A="_blank",underline:I=!1,glowEnable:S=!1,glowColor:E="#00d4ff",glowIntensity:F=1,rotation:z=0,opacity:L=100,background:$="transparent",style:D,onClick:O,onDoubleClick:N,onMouseEnter:R,onMouseLeave:B})=>{const q=t.useMemo(()=>{if(!o)return"";let e=[];if("static"===o.sourceType)e=Array.isArray(o.staticData)?o.staticData:[];else if("global"===o.sourceType&&o.datasourceId){const t=y?.page?.[o.datasourceId];e=g(t)}else if("datasource"===o.sourceType&&o.datasourceId){const t=y?.component?.[o.datasourceId];e=g(t)}const t=function(e,t){return t&&0!==t.length?e.map(e=>{const n={};for(const{componentField:o,sourceField:r}of t)o&&r&&(n[o]=p(e,r));return n}):e}(e,o.fieldMappings);return t.length>0&&void 0!==t[0].text?String(t[0].text):""},[o,y]),H={fontSize:h,fontWeight:x,fontFamily:v,color:b,lineHeight:j,letterSpacing:w,textShadow:S?`0 0 ${10*F}px ${E}, 0 0 ${20*F}px ${E}, 0 0 ${30*F}px ${E}`:void 0},J={...D,transform:0!==z?`rotate(${z}deg)`:void 0,opacity:L/100,backgroundColor:$},K=r(i,(e=>{switch(e){case"left":default:return s;case"center":return _;case"right":return d}})(k),(e=>{switch(e){case"top":return u;case"middle":default:return f;case"bottom":return m}})(C)),U=r(l,M&&a,I&&c);if(M&&T){const t="_blank"===A?"noopener noreferrer":"";return n.jsx("div",{className:K,ref:e,style:J,onClick:O,onDoubleClick:N,onMouseEnter:R,onMouseLeave:B,children:n.jsx("a",{className:U,href:T,rel:t,style:H,target:A,children:q})})}return n.jsx("div",{className:K,ref:e,style:J,onClick:O,onDoubleClick:N,onMouseEnter:R,onMouseLeave:B,children:n.jsx("span",{className:U,style:H,children:q})})};e.Text=y,e.default=y,Object.defineProperty(e,"__esModule",{value:!0})});
|
package/dist/index.min.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsText={},e.jsxRuntime)}(this,function(e,t){"use strict";function
|
|
2
|
-
//# sourceMappingURL=index.min.js.map
|
|
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){var t,o,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(o=n(e[t]))&&(r&&(r+=" "),r+=o)}else for(o in e)e[o]&&(r&&(r+=" "),r+=o);return r}function r(...e){return function(){for(var e,t,o=0,r="",a=arguments.length;o<a;o++)(e=arguments[o])&&(t=n(e))&&(r&&(r+=" "),r+=t);return r}(e)}var a="component-module__container___VbZSk",l="component-module__text___nFUOn",i="component-module__link___20asF",s="component-module__underline___0oAJz",c="component-module__alignLeft___IOvpO",p="component-module__alignCenter___EIwIC",d="component-module__alignRight___p3ReL",u="component-module__valignTop___-5DmK",m="component-module__valignMiddle___i0are",f="component-module__valignBottom___97zzw";function g(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}function _(e){return void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[]}!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=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t}),x={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},b="EasyEditorMaterialsText",y=e=>({sourceType:"static",staticData:[{text:e}],fieldMappings:[{componentField:"text",sourceField:"text"}]});const S={componentName:b,title:"文本",group:"basic",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-text",version:"0.0.16",globalName:b,componentName:b},configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[x,h("基础配置",[{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"}}]),h("组件配置",[{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"})]},{type:"group",key:"data",title:"数据",items:[x,{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"text",label:"text",type:"string",required:!0,description:"文本内容"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}}]},{type:"group",key:"advanced",title:"高级",items:[x,h("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}]}},extraProps:{label:!1}}]),h("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}])]}]}],component:{},supports:{},advanced:{}},snippets:[{title:"普通文本",screenshot:"",schema:{componentName:b,title:"普通文本",props:{fontSize:16,color:"#ffffff",rotation:0,opacity:100,background:"transparent",$data:y("普通文本")},$dashboard:{rect:{width:120,height:40}}}},{title:"标题文本",screenshot:"",schema:{componentName:b,title:"标题文本",props:{fontSize:32,fontWeight:"bold",color:"#ffffff",textAlign:"center",rotation:0,opacity:100,background:"transparent",$data:y("标题文本")},$dashboard:{rect:{width:200,height:60}}}},{title:"发光标题",screenshot:"",schema:{componentName:b,title:"发光标题",props:{fontSize:36,fontWeight:"bold",color:"#00d4ff",textAlign:"center",glowEnable:!0,glowColor:"#00d4ff",glowIntensity:1.5,rotation:0,opacity:100,background:"transparent",$data:y("发光标题")},$dashboard:{rect:{width:240,height:80}}}},{title:"链接文本",screenshot:"",schema:{componentName:b,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:y("点击跳转")},$dashboard:{rect:{width:120,height:40}}}},{title:"标签文本",screenshot:"",schema:{componentName:b,title:"标签文本",props:{fontSize:14,color:"#ffffff",textAlign:"center",verticalAlign:"middle",rotation:0,opacity:100,background:"rgba(0, 212, 255, 0.2)",$data:y("标签")},$dashboard:{rect:{width:80,height:32}}}}]};e.component=({ref:e,$data:n,__dataSource:h,fontSize:x=16,fontWeight:b="normal",fontFamily:y="inherit",color:S="#ffffff",textAlign:v="left",verticalAlign:k="middle",lineHeight:w=1.5,letterSpacing:N=0,isLink:V=!1,href:P="",target:C="_blank",underline:E=!1,glowEnable:$=!1,glowColor:A="#00d4ff",glowIntensity:M=1,rotation:T=0,opacity:j=100,background:z="transparent",style:I,onClick:F,onDoubleClick:L,onMouseEnter:D,onMouseLeave:R})=>{const O=t.useMemo(()=>{if(!n)return"";let e=[];if("static"===n.sourceType)e=Array.isArray(n.staticData)?n.staticData:[];else if("global"===n.sourceType&&n.datasourceId){const t=h?.page?.[n.datasourceId];e=_(t)}else if("datasource"===n.sourceType&&n.datasourceId){const t=h?.component?.[n.datasourceId];e=_(t)}const t=function(e,t){return t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:r}of t)n&&r&&(o[n]=g(e,r));return o}):e}(e,n.fieldMappings);return t.length>0&&void 0!==t[0].text?String(t[0].text):""},[n,h]),W={fontSize:x,fontWeight:b,fontFamily:y,color:S,lineHeight:w,letterSpacing:N,textShadow:$?`0 0 ${10*M}px ${A}, 0 0 ${20*M}px ${A}, 0 0 ${30*M}px ${A}`:void 0},B={...I,transform:0!==T?`rotate(${T}deg)`:void 0,opacity:j/100,backgroundColor:z},q=r(a,(e=>{switch(e){case"left":default:return c;case"center":return p;case"right":return d}})(v),(e=>{switch(e){case"top":return u;case"middle":default:return m;case"bottom":return f}})(k)),H=r(l,V&&i,E&&s);if(V&&P){const t="_blank"===C?"noopener noreferrer":"";return o.jsx("div",{className:q,ref:e,style:B,onClick:F,onDoubleClick:L,onMouseEnter:D,onMouseLeave:R,children:o.jsx("a",{className:H,href:P,rel:t,style:W,target:C,children:O})})}return o.jsx("div",{className:q,ref:e,style:B,onClick:F,onDoubleClick:L,onMouseEnter:D,onMouseLeave:R,children:o.jsx("span",{className:H,style:W,children:O})})},e.meta=S});
|
package/dist/meta.min.js
CHANGED
|
@@ -1,2 +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="EasyEditorMaterialsText";const
|
|
2
|
-
//# sourceMappingURL=meta.min.js.map
|
|
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}),a={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o="EasyEditorMaterialsText",r=e=>({sourceType:"static",staticData:[{text:e}],fieldMappings:[{componentField:"text",sourceField:"text"}]});const l={componentName:o,title:"文本",group:"basic",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-text",version:"0.0.16",globalName:o,componentName:o},configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[a,t("基础配置",[{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"}}]),t("组件配置",[{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"})]},{type:"group",key:"data",title:"数据",items:[a,{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"text",label:"text",type:"string",required:!0,description:"文本内容"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}}]},{type:"group",key:"advanced",title:"高级",items:[a,t("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}]}},extraProps:{label:!1}}]),t("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}])]}]}],component:{},supports:{},advanced:{}},snippets:[{title:"普通文本",screenshot:"",schema:{componentName:o,title:"普通文本",props:{fontSize:16,color:"#ffffff",rotation:0,opacity:100,background:"transparent",$data:r("普通文本")},$dashboard:{rect:{width:120,height:40}}}},{title:"标题文本",screenshot:"",schema:{componentName:o,title:"标题文本",props:{fontSize:32,fontWeight:"bold",color:"#ffffff",textAlign:"center",rotation:0,opacity:100,background:"transparent",$data:r("标题文本")},$dashboard:{rect:{width:200,height:60}}}},{title:"发光标题",screenshot:"",schema:{componentName:o,title:"发光标题",props:{fontSize:36,fontWeight:"bold",color:"#00d4ff",textAlign:"center",glowEnable:!0,glowColor:"#00d4ff",glowIntensity:1.5,rotation:0,opacity:100,background:"transparent",$data:r("发光标题")},$dashboard:{rect:{width:240,height:80}}}},{title:"链接文本",screenshot:"",schema:{componentName:o,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:r("点击跳转")},$dashboard:{rect:{width:120,height:40}}}},{title:"标签文本",screenshot:"",schema:{componentName:o,title:"标签文本",props:{fontSize:14,color:"#ffffff",textAlign:"center",verticalAlign:"middle",rotation:0,opacity:100,background:"rgba(0, 212, 255, 0.2)",$data:r("标签")},$dashboard:{rect:{width:80,height:32}}}}]};e.meta=l});
|
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.17",
|
|
4
4
|
"description": "Text component for EasyEditor dashboard",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -39,25 +39,21 @@
|
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@easy-editor/core": "*",
|
|
42
|
-
"react": "^18 || ^19",
|
|
43
|
-
"react-dom": "^18 || ^19",
|
|
44
42
|
"@types/react": "^18 || ^19",
|
|
45
|
-
"@types/react-dom": "^18 || ^19"
|
|
43
|
+
"@types/react-dom": "^18 || ^19",
|
|
44
|
+
"react": "^18 || ^19",
|
|
45
|
+
"react-dom": "^18 || ^19"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@easy-editor/materials-shared": "0.0.0"
|
|
49
49
|
},
|
|
50
50
|
"scripts": {
|
|
51
|
-
"dev": "
|
|
51
|
+
"dev": "easypack dev",
|
|
52
52
|
"format": "biome format --write .",
|
|
53
53
|
"lint": "biome check .",
|
|
54
54
|
"build": "npm-run-all -nl build:*",
|
|
55
55
|
"build:clean": "rimraf dist/",
|
|
56
|
-
"build:js": "
|
|
57
|
-
"build:types": "pnpm types",
|
|
58
|
-
"types": "npm-run-all -nl types:*",
|
|
59
|
-
"types:src": "tsc --project tsconfig.build.json",
|
|
60
|
-
"test-types": "tsc --project tsconfig.test.json"
|
|
56
|
+
"build:js": "easypack build"
|
|
61
57
|
},
|
|
62
58
|
"module": "dist/index.esm.js",
|
|
63
59
|
"unpkg": "dist/index.min.js"
|
|
Binary file
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Text Component Styles
|
|
3
|
+
* 文本组件样式
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.container {
|
|
7
|
+
display: flex;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.text {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
word-break: break-word;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.link {
|
|
18
|
+
text-decoration: none;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
transition: opacity 0.2s ease;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.link:hover {
|
|
24
|
+
opacity: 0.8;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.underline {
|
|
28
|
+
text-decoration: underline;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* 对齐方式 */
|
|
32
|
+
.alignLeft {
|
|
33
|
+
text-align: left;
|
|
34
|
+
justify-content: flex-start;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.alignCenter {
|
|
38
|
+
text-align: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.alignRight {
|
|
43
|
+
text-align: right;
|
|
44
|
+
justify-content: flex-end;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* 垂直对齐 */
|
|
48
|
+
.valignTop {
|
|
49
|
+
align-items: flex-start;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.valignMiddle {
|
|
53
|
+
align-items: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.valignBottom {
|
|
57
|
+
align-items: flex-end;
|
|
58
|
+
}
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Text Component
|
|
3
|
+
* 文本组件 - 支持普通文本、链接、标题、发光效果
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import type { CSSProperties, Ref } from 'react'
|
|
7
|
+
import { useMemo } from 'react'
|
|
8
|
+
import { cn } from '@easy-editor/materials-shared'
|
|
9
|
+
import styles from './component.module.css'
|
|
10
|
+
|
|
11
|
+
export type TextAlign = 'left' | 'center' | 'right'
|
|
12
|
+
export type VerticalAlign = 'top' | 'middle' | 'bottom'
|
|
13
|
+
|
|
14
|
+
/** 数据配置类型(来自 DataSetter) */
|
|
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
|
+
}
|
|
86
|
+
/** 字体大小 */
|
|
87
|
+
fontSize?: number
|
|
88
|
+
/** 字体粗细 */
|
|
89
|
+
fontWeight?: number | 'normal' | 'bold'
|
|
90
|
+
/** 字体家族 */
|
|
91
|
+
fontFamily?: string
|
|
92
|
+
/** 颜色 */
|
|
93
|
+
color?: string
|
|
94
|
+
/** 水平对齐 */
|
|
95
|
+
textAlign?: TextAlign
|
|
96
|
+
/** 垂直对齐 */
|
|
97
|
+
verticalAlign?: VerticalAlign
|
|
98
|
+
/** 行高 */
|
|
99
|
+
lineHeight?: number
|
|
100
|
+
/** 字间距 */
|
|
101
|
+
letterSpacing?: number
|
|
102
|
+
/** 是否为链接 */
|
|
103
|
+
isLink?: boolean
|
|
104
|
+
/** 链接地址 */
|
|
105
|
+
href?: string
|
|
106
|
+
/** 链接打开方式 */
|
|
107
|
+
target?: '_self' | '_blank'
|
|
108
|
+
/** 下划线 */
|
|
109
|
+
underline?: boolean
|
|
110
|
+
/** 发光效果 */
|
|
111
|
+
glowEnable?: boolean
|
|
112
|
+
/** 发光颜色 */
|
|
113
|
+
glowColor?: string
|
|
114
|
+
/** 发光强度 */
|
|
115
|
+
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
|
+
/** 事件处理 */
|
|
127
|
+
onClick?: (e: React.MouseEvent) => void
|
|
128
|
+
onDoubleClick?: (e: React.MouseEvent) => void
|
|
129
|
+
onMouseEnter?: (e: React.MouseEvent) => void
|
|
130
|
+
onMouseLeave?: (e: React.MouseEvent) => void
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
const getAlignClass = (align: TextAlign): string => {
|
|
134
|
+
switch (align) {
|
|
135
|
+
case 'left':
|
|
136
|
+
return styles.alignLeft
|
|
137
|
+
case 'center':
|
|
138
|
+
return styles.alignCenter
|
|
139
|
+
case 'right':
|
|
140
|
+
return styles.alignRight
|
|
141
|
+
default:
|
|
142
|
+
return styles.alignLeft
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
const getValignClass = (align: VerticalAlign): string => {
|
|
147
|
+
switch (align) {
|
|
148
|
+
case 'top':
|
|
149
|
+
return styles.valignTop
|
|
150
|
+
case 'middle':
|
|
151
|
+
return styles.valignMiddle
|
|
152
|
+
case 'bottom':
|
|
153
|
+
return styles.valignBottom
|
|
154
|
+
default:
|
|
155
|
+
return styles.valignMiddle
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
export const Text: React.FC<TextProps> = ({
|
|
160
|
+
ref,
|
|
161
|
+
$data,
|
|
162
|
+
__dataSource,
|
|
163
|
+
fontSize = 16,
|
|
164
|
+
fontWeight = 'normal',
|
|
165
|
+
fontFamily = 'inherit',
|
|
166
|
+
color = '#ffffff',
|
|
167
|
+
textAlign = 'left',
|
|
168
|
+
verticalAlign = 'middle',
|
|
169
|
+
lineHeight = 1.5,
|
|
170
|
+
letterSpacing = 0,
|
|
171
|
+
isLink = false,
|
|
172
|
+
href = '',
|
|
173
|
+
target = '_blank',
|
|
174
|
+
underline = false,
|
|
175
|
+
glowEnable = false,
|
|
176
|
+
glowColor = '#00d4ff',
|
|
177
|
+
glowIntensity = 1,
|
|
178
|
+
rotation = 0,
|
|
179
|
+
opacity = 100,
|
|
180
|
+
background = 'transparent',
|
|
181
|
+
style: externalStyle,
|
|
182
|
+
onClick,
|
|
183
|
+
onDoubleClick,
|
|
184
|
+
onMouseEnter,
|
|
185
|
+
onMouseLeave,
|
|
186
|
+
}) => {
|
|
187
|
+
// 解析数据配置,获取实际显示内容
|
|
188
|
+
const resolvedContent = useMemo(() => {
|
|
189
|
+
if (!$data) return ''
|
|
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)
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
return ''
|
|
215
|
+
}, [$data, __dataSource])
|
|
216
|
+
|
|
217
|
+
// 计算发光效果
|
|
218
|
+
const textShadow = glowEnable
|
|
219
|
+
? `0 0 ${10 * glowIntensity}px ${glowColor}, 0 0 ${20 * glowIntensity}px ${glowColor}, 0 0 ${30 * glowIntensity}px ${glowColor}`
|
|
220
|
+
: undefined
|
|
221
|
+
|
|
222
|
+
const textStyle: CSSProperties = {
|
|
223
|
+
fontSize,
|
|
224
|
+
fontWeight,
|
|
225
|
+
fontFamily,
|
|
226
|
+
color,
|
|
227
|
+
lineHeight,
|
|
228
|
+
letterSpacing,
|
|
229
|
+
textShadow,
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// 容器样式:旋转、透明度、背景
|
|
233
|
+
const containerStyle: CSSProperties = {
|
|
234
|
+
...externalStyle,
|
|
235
|
+
transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
|
|
236
|
+
opacity: opacity / 100,
|
|
237
|
+
backgroundColor: background,
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
const containerClass = cn(
|
|
241
|
+
styles.container,
|
|
242
|
+
getAlignClass(textAlign),
|
|
243
|
+
getValignClass(verticalAlign),
|
|
244
|
+
)
|
|
245
|
+
|
|
246
|
+
const textClass = cn(styles.text, isLink && styles.link, underline && styles.underline)
|
|
247
|
+
|
|
248
|
+
// 链接模式
|
|
249
|
+
if (isLink && href) {
|
|
250
|
+
const relValue = target === '_blank' ? 'noopener noreferrer' : ''
|
|
251
|
+
return (
|
|
252
|
+
<div
|
|
253
|
+
className={containerClass}
|
|
254
|
+
ref={ref}
|
|
255
|
+
style={containerStyle}
|
|
256
|
+
onClick={onClick}
|
|
257
|
+
onDoubleClick={onDoubleClick}
|
|
258
|
+
onMouseEnter={onMouseEnter}
|
|
259
|
+
onMouseLeave={onMouseLeave}
|
|
260
|
+
>
|
|
261
|
+
<a className={textClass} href={href} rel={relValue} style={textStyle} target={target}>
|
|
262
|
+
{resolvedContent}
|
|
263
|
+
</a>
|
|
264
|
+
</div>
|
|
265
|
+
)
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// 普通文本
|
|
269
|
+
return (
|
|
270
|
+
<div
|
|
271
|
+
className={containerClass}
|
|
272
|
+
ref={ref}
|
|
273
|
+
style={containerStyle}
|
|
274
|
+
onClick={onClick}
|
|
275
|
+
onDoubleClick={onDoubleClick}
|
|
276
|
+
onMouseEnter={onMouseEnter}
|
|
277
|
+
onMouseLeave={onMouseLeave}
|
|
278
|
+
>
|
|
279
|
+
<span className={textClass} style={textStyle}>
|
|
280
|
+
{resolvedContent}
|
|
281
|
+
</span>
|
|
282
|
+
</div>
|
|
283
|
+
)
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
export default Text
|