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

package/dist/index.esm.js

@@ -1,59 +1,160 @@
 import { jsx } from 'react/jsx-runtime';
 
+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__*/jsx("div", {
+      className: containerClass,
+      ref: ref,
+      style: externalStyle,
+      children: /*#__PURE__*/jsx("a", {
+        className: textClass,
+        href: href,
+        rel: relValue,
+        style: textStyle,
+        target: target,
+        children: content
+      })
+    });
+  }
+
+  // 普通文本
   return /*#__PURE__*/jsx("div", {
-    className: className,
+    className: containerClass,
     ref: ref,
-    style: mergedStyle,
-    children: text
+    style: externalStyle,
+    children: /*#__PURE__*/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: '标题',
@@ -88,13 +189,56 @@ const configure = {
             }
           }
         }]
-      }, {
-        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: {
@@ -106,14 +250,7 @@ const configure = {
           title: '字体大小',
           setter: 'NumberSetter',
           extraProps: {
-            defaultValue: 14
-          }
-        }, {
-          name: 'color',
-          title: '文字颜色',
-          setter: 'ColorSetter',
-          extraProps: {
-            defaultValue: '#000000'
+            defaultValue: 16
           }
         }, {
           name: 'fontWeight',
@@ -127,39 +264,19 @@ const configure = {
               }, {
                 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: '行高',
@@ -167,39 +284,62 @@ const configure = {
           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: {
@@ -207,38 +347,69 @@ const configure = {
           }
         },
         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: {
@@ -248,39 +419,87 @@ const snippets = [{
     }
   }
 }, {
-  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
 };
 
 export { Text as component, meta };