@easy-editor/materials-dashboard-text 0.0.9 → 0.0.11

package/dist/index.js

@@ -1,64 +1,165 @@
-/* @easy-editor/materials-dashboard-text v0.0.8 */
+/* @easy-editor/materials-dashboard-text v0.0.10 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EasyEditorMaterialsText = {}, global.jsxRuntime));
 })(this, (function (exports, jsxRuntime) { 'use strict';
 
+  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+  function cn(...inputs) {
+    return clsx(inputs);
+  }
+
   const MaterialGroup = {
     BASIC: 'basic'};
 
-  const COMPONENT_NAME = 'EasyEditorMaterialsText';
-  const PACKAGE_NAME = '@easy-editor/materials-dashboard-text';
+  function styleInject(css, ref) {
+    if (ref === void 0) ref = {};
+    var insertAt = ref.insertAt;
+    if (typeof document === 'undefined') {
+      return;
+    }
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
 
-  const Text = props => {
-    const {
-      ref,
-      text = 'Text',
-      fontSize = 14,
-      color = '#ffffff',
-      fontWeight = 'normal',
-      textAlign = 'left',
-      lineHeight = 1.5,
-      className = '',
-      style: externalStyle
-    } = props;
-    const internalStyle = {
-      width: '100%',
-      height: '100%',
-      fontSize: typeof fontSize === 'number' ? `${fontSize}px` : fontSize,
-      color,
+  var css_248z = ".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}";
+  var styles = {"container":"component-module__container___VbZSk","text":"component-module__text___nFUOn","link":"component-module__link___20asF","underline":"component-module__underline___0oAJz","alignLeft":"component-module__alignLeft___IOvpO","alignCenter":"component-module__alignCenter___EIwIC","alignRight":"component-module__alignRight___p3ReL","valignTop":"component-module__valignTop___-5DmK","valignMiddle":"component-module__valignMiddle___i0are","valignBottom":"component-module__valignBottom___97zzw"};
+  styleInject(css_248z);
+
+  /**
+   * Text Component
+   * 文本组件 - 支持普通文本、链接、标题、发光效果
+   */
+
+  const getAlignClass = align => {
+    switch (align) {
+      case 'left':
+        return styles.alignLeft;
+      case 'center':
+        return styles.alignCenter;
+      case 'right':
+        return styles.alignRight;
+      default:
+        return styles.alignLeft;
+    }
+  };
+  const getValignClass = align => {
+    switch (align) {
+      case 'top':
+        return styles.valignTop;
+      case 'middle':
+        return styles.valignMiddle;
+      case 'bottom':
+        return styles.valignBottom;
+      default:
+        return styles.valignMiddle;
+    }
+  };
+  const Text = ({
+    ref,
+    content = '文本内容',
+    fontSize = 16,
+    fontWeight = 'normal',
+    fontFamily = 'inherit',
+    color = '#ffffff',
+    textAlign = 'left',
+    verticalAlign = 'middle',
+    lineHeight = 1.5,
+    letterSpacing = 0,
+    isLink = false,
+    href = '',
+    target = '_blank',
+    underline = false,
+    glowEnable = false,
+    glowColor = '#00d4ff',
+    glowIntensity = 1,
+    style: externalStyle
+  }) => {
+    // 计算发光效果
+    const textShadow = glowEnable ? `0 0 ${10 * glowIntensity}px ${glowColor}, 0 0 ${20 * glowIntensity}px ${glowColor}, 0 0 ${30 * glowIntensity}px ${glowColor}` : undefined;
+    const textStyle = {
+      fontSize,
       fontWeight,
-      textAlign,
+      fontFamily,
+      color,
       lineHeight,
-      wordBreak: 'break-word',
-      whiteSpace: 'pre-wrap'
-    };
-    const mergedStyle = {
-      ...internalStyle,
-      ...externalStyle
+      letterSpacing,
+      textShadow
     };
+    const containerClass = cn(styles.container, getAlignClass(textAlign), getValignClass(verticalAlign));
+    const textClass = cn(styles.text, isLink && styles.link, underline && styles.underline);
+
+    // 链接模式
+    if (isLink && href) {
+      const relValue = target === '_blank' ? 'noopener noreferrer' : '';
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: containerClass,
+        ref: ref,
+        style: externalStyle,
+        children: /*#__PURE__*/jsxRuntime.jsx("a", {
+          className: textClass,
+          href: href,
+          rel: relValue,
+          style: textStyle,
+          target: target,
+          children: content
+        })
+      });
+    }
+
+    // 普通文本
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: className,
+      className: containerClass,
       ref: ref,
-      style: mergedStyle,
-      children: text
+      style: externalStyle,
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: textClass,
+        style: textStyle,
+        children: content
+      })
     });
   };
 
   const configure = {
     props: [{
       type: 'group',
-      title: '功能',
+      title: '属性',
       setter: 'TabSetter',
       items: [{
         type: 'group',
-        key: 'basic',
-        title: '基本',
-        items: [{
+        key: 'config',
+        title: '配置',
+        setter: {
+          componentName: 'CollapseSetter',
+          props: {
+            icon: false
+          }
+        },
+        items: [
+        {
           name: 'id',
           title: 'ID',
-          setter: 'NodeIdSetter'
+          setter: 'NodeIdSetter',
+          extraProps: {
+            label: false
+          }
         }, {
           name: 'title',
           title: '标题',
@@ -93,13 +194,56 @@
               }
             }
           }]
-        }, {
-          name: 'text',
-          title: '文本内容',
-          setter: 'StringSetter'
+        },
+        {
+          type: 'group',
+          title: '内容',
+          setter: {
+            componentName: 'CollapseSetter',
+            props: {
+              icon: false
+            }
+          },
+          items: [{
+            name: 'content',
+            title: '文本内容',
+            setter: 'TextAreaSetter',
+            extraProps: {
+              defaultValue: '文本内容'
+            }
+          }, {
+            name: 'isLink',
+            title: '作为链接',
+            setter: 'SwitchSetter',
+            extraProps: {
+              defaultValue: false
+            }
+          }, {
+            name: 'href',
+            title: '链接地址',
+            setter: 'StringSetter'
+          }, {
+            name: 'target',
+            title: '打开方式',
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [{
+                  label: '新窗口',
+                  value: '_blank'
+                }, {
+                  label: '当前窗口',
+                  value: '_self'
+                }]
+              }
+            },
+            extraProps: {
+              defaultValue: '_blank'
+            }
+          }]
         }, {
           type: 'group',
-          title: '字体样式',
+          title: '字体',
           setter: {
             componentName: 'CollapseSetter',
             props: {
@@ -111,14 +255,7 @@
             title: '字体大小',
             setter: 'NumberSetter',
             extraProps: {
-              defaultValue: 14
-            }
-          }, {
-            name: 'color',
-            title: '文字颜色',
-            setter: 'ColorSetter',
-            extraProps: {
-              defaultValue: '#000000'
+              defaultValue: 16
             }
           }, {
             name: 'fontWeight',
@@ -132,39 +269,19 @@
                 }, {
                   label: '粗体',
                   value: 'bold'
-                }, {
-                  label: '100',
-                  value: '100'
-                }, {
-                  label: '200',
-                  value: '200'
-                }, {
-                  label: '300',
-                  value: '300'
-                }, {
-                  label: '400',
-                  value: '400'
-                }, {
-                  label: '500',
-                  value: '500'
-                }, {
-                  label: '600',
-                  value: '600'
-                }, {
-                  label: '700',
-                  value: '700'
-                }, {
-                  label: '800',
-                  value: '800'
-                }, {
-                  label: '900',
-                  value: '900'
                 }]
               }
             },
             extraProps: {
               defaultValue: 'normal'
             }
+          }, {
+            name: 'color',
+            title: '颜色',
+            setter: 'ColorSetter',
+            extraProps: {
+              defaultValue: '#ffffff'
+            }
           }, {
             name: 'lineHeight',
             title: '行高',
@@ -172,39 +289,62 @@
             extraProps: {
               defaultValue: 1.5
             }
-          }, {
+          }]
+        }, {
+          type: 'group',
+          title: '对齐',
+          setter: {
+            componentName: 'CollapseSetter',
+            props: {
+              icon: false
+            }
+          },
+          items: [{
             name: 'textAlign',
-            title: '文本对齐',
+            title: '水平对齐',
             setter: {
-              componentName: 'RadioGroupSetter',
+              componentName: 'SegmentedSetter',
               props: {
                 options: [{
-                  label: '左对齐',
+                  label: '左',
                   value: 'left'
                 }, {
-                  label: '居中',
+                  label: '中',
                   value: 'center'
                 }, {
-                  label: '右对齐',
+                  label: '右',
                   value: 'right'
-                }, {
-                  label: '两端对齐',
-                  value: 'justify'
                 }]
               }
             },
             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: 'advanced',
-        title: '高级',
-        items: [{
+        }, {
           type: 'group',
-          title: '高级设置',
+          title: '效果',
           setter: {
             componentName: 'CollapseSetter',
             props: {
@@ -212,38 +352,69 @@
             }
           },
           items: [{
-            title: '显隐',
+            name: 'underline',
+            title: '下划线',
             setter: 'SwitchSetter',
             extraProps: {
-              supportVariable: true,
-              getValue(target) {
-                return target.getExtraPropValue('condition');
-              },
-              setValue(target, value) {
-                target.setExtraPropValue('condition', value);
-              }
+              defaultValue: false
+            }
+          }, {
+            name: 'glowEnable',
+            title: '发光效果',
+            setter: 'SwitchSetter',
+            extraProps: {
+              defaultValue: false
+            }
+          }, {
+            name: 'glowColor',
+            title: '发光颜色',
+            setter: 'ColorSetter',
+            extraProps: {
+              defaultValue: '#00d4ff'
             }
           }]
         }]
+      }, {
+        type: 'group',
+        key: 'data',
+        title: '数据',
+        items: [{
+          name: 'dataBinding',
+          title: '数据绑定',
+          setter: 'DataBindingSetter'
+        }]
+      }, {
+        type: 'group',
+        key: 'advanced',
+        title: '高级',
+        items: [{
+          name: 'condition',
+          title: '显隐控制',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: true,
+            supportVariable: true
+          }
+        }]
       }]
     }],
     component: {},
     supports: {},
-    advanced: {
-      view: Text
-    }
+    advanced: {}
   };
 
+  const COMPONENT_NAME = 'EasyEditorMaterialsText';
+  const PACKAGE_NAME = '@easy-editor/materials-dashboard-text';
+
   const snippets = [{
-    title: 'Text',
-    screenshot: 'https://img.alicdn.com/imgextra/i3/O1CN01n5wpxc1bi862KuXFz_!!6000000003498-55-tps-50-50.svg',
+    title: '普通文本',
+    screenshot: '',
     schema: {
       componentName: COMPONENT_NAME,
       props: {
-        text: 'Text Text Text',
-        fontSize: 14,
-        color: '#ffffff',
-        textAlign: 'left'
+        content: '这是一段普通文本',
+        fontSize: 16,
+        color: '#ffffff'
       },
       $dashboard: {
         rect: {
@@ -253,39 +424,87 @@
       }
     }
   }, {
-    title: 'Heading',
-    screenshot: 'https://img.alicdn.com/imgextra/i3/O1CN01n5wpxc1bi862KuXFz_!!6000000003498-55-tps-50-50.svg',
+    title: '标题文本',
+    screenshot: '',
     schema: {
       componentName: COMPONENT_NAME,
       props: {
-        text: 'Heading',
-        fontSize: 24,
-        color: '#ffffff',
+        content: '标题文本',
+        fontSize: 32,
         fontWeight: 'bold',
+        color: '#ffffff',
         textAlign: 'center'
       },
       $dashboard: {
         rect: {
           width: 200,
-          height: 50
+          height: 60
+        }
+      }
+    }
+  }, {
+    title: '发光标题',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        content: '发光标题',
+        fontSize: 36,
+        fontWeight: 'bold',
+        color: '#00d4ff',
+        textAlign: 'center',
+        glowEnable: true,
+        glowColor: '#00d4ff',
+        glowIntensity: 1.5
+      },
+      $dashboard: {
+        rect: {
+          width: 240,
+          height: 80
+        }
+      }
+    }
+  }, {
+    title: '链接文本',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        content: '点击跳转',
+        fontSize: 16,
+        color: '#00d4ff',
+        isLink: true,
+        href: 'https://easy-editor-docs.vercel.app/',
+        target: '_blank',
+        underline: true
+      },
+      $dashboard: {
+        rect: {
+          width: 120,
+          height: 40
         }
       }
     }
   }];
 
+  var version = "0.0.10";
+  var pkg = {
+  	version: version};
+
   const meta = {
     componentName: COMPONENT_NAME,
-    title: 'Text',
+    title: '文本',
+    category: 'dashboard',
     group: MaterialGroup.BASIC,
     devMode: 'proCode',
     npm: {
       package: PACKAGE_NAME,
-      version: 'latest',
+      version: pkg.version,
       globalName: COMPONENT_NAME,
       componentName: COMPONENT_NAME
     },
-    snippets,
-    configure
+    configure,
+    snippets
   };
 
   exports.component = Text;