@easy-editor/materials-dashboard-scroll-list 0.0.2

package/dist/index.esm.js

@@ -0,0 +1,666 @@
+import { jsx, jsxs } 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 = {
+  DISPLAY: 'display'};
+
+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));
+  }
+}
+
+var css_248z = ".component-module__container___VbZSk{backdrop-filter:blur(10px);background:rgba(10,10,26,.95);border:1px solid rgba(26,26,62,.8);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.3);box-sizing:border-box;height:100%;overflow:hidden;padding:16px;width:100%}.component-module__list___ZzqLO{display:flex;flex-direction:column;gap:10px;height:100%}.component-module__item___-0hiq{align-items:center;background:rgba(15,15,42,.9);border:1px solid rgba(26,26,62,.6);border-radius:8px;display:flex;gap:14px;overflow:hidden;padding:12px 16px;position:relative;transition:all .3s ease}.component-module__item___-0hiq:before{background:linear-gradient(180deg,transparent,rgba(0,212,255,.5),transparent);bottom:0;content:\"\";left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:3px}.component-module__item___-0hiq:hover{background:rgba(20,20,52,.95);border-color:rgba(0,212,255,.3);transform:translateX(4px)}.component-module__item___-0hiq:hover:before{opacity:1}.component-module__rankBadge___qWXYW{align-items:center;border-radius:6px;display:flex;font-weight:700;height:32px;justify-content:center;min-width:32px;transition:transform .3s ease}.component-module__item___-0hiq:hover .component-module__rankBadge___qWXYW{transform:scale(1.1)}.component-module__rankBadgeTopThree___kYqJt{font-size:20px;text-shadow:0 2px 8px rgba(0,0,0,.5)}.component-module__rankBadgeNormal___Fl3nh{background:rgba(26,26,62,.8);border:1px solid rgba(136,146,176,.2);color:#8892b0;font-size:14px}.component-module__rankGold___lLkRo{color:gold;filter:drop-shadow(0 0 6px rgba(255,215,0,.6))}.component-module__rankSilver___QUAyV{color:#e8e8e8;filter:drop-shadow(0 0 6px rgba(192,192,192,.6))}.component-module__rankBronze___Wc-LC{color:#f96;filter:drop-shadow(0 0 6px rgba(205,127,50,.6))}.component-module__name___6zmww{color:#e6e6e6;flex:1;font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease;white-space:nowrap}.component-module__item___-0hiq:hover .component-module__name___6zmww{color:#fff}.component-module__valueContainer___xBbFD{align-items:flex-end;display:flex;flex-direction:column;gap:6px;min-width:120px}.component-module__value___Fg70k{color:#00d4ff;font-family:Courier New,Courier,monospace;font-size:15px;font-weight:700;text-shadow:0 0 10px rgba(0,212,255,.3);transition:all .3s ease}.component-module__item___-0hiq:hover .component-module__value___Fg70k{text-shadow:0 0 15px rgba(0,212,255,.5);transform:scale(1.05)}.component-module__progressBar___wROZC{background:rgba(26,26,62,.8);border-radius:3px;box-shadow:inset 0 1px 3px rgba(0,0,0,.3);height:5px;overflow:hidden;width:100%}.component-module__progressFill___F8n5d{border-radius:3px;height:100%;position:relative;transition:width .5s cubic-bezier(.4,0,.2,1)}.component-module__progressFill___F8n5d:after{animation:component-module__shimmer___7hQ6G 2s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);bottom:0;content:\"\";left:0;position:absolute;right:0;top:0}@keyframes component-module__shimmer___7hQ6G{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}";
+var styles = {"container":"component-module__container___VbZSk","list":"component-module__list___ZzqLO","item":"component-module__item___-0hiq","rankBadge":"component-module__rankBadge___qWXYW","rankBadgeTopThree":"component-module__rankBadgeTopThree___kYqJt","rankBadgeNormal":"component-module__rankBadgeNormal___Fl3nh","rankGold":"component-module__rankGold___lLkRo","rankSilver":"component-module__rankSilver___QUAyV","rankBronze":"component-module__rankBronze___Wc-LC","name":"component-module__name___6zmww","valueContainer":"component-module__valueContainer___xBbFD","value":"component-module__value___Fg70k","progressBar":"component-module__progressBar___wROZC","progressFill":"component-module__progressFill___F8n5d"};
+styleInject(css_248z);
+
+/**
+ * Scroll List Component
+ * 滚动列表组件 - 用于展示排行榜、数据列表等
+ */
+
+const DEFAULT_DATA = [{
+  rank: 1,
+  name: '北京市',
+  value: 9800
+}, {
+  rank: 2,
+  name: '上海市',
+  value: 8500
+}, {
+  rank: 3,
+  name: '广州市',
+  value: 7200
+}, {
+  rank: 4,
+  name: '深圳市',
+  value: 6100
+}, {
+  rank: 5,
+  name: '杭州市',
+  value: 4800
+}];
+const MEDAL_EMOJI = {
+  1: '🥇',
+  2: '🥈',
+  3: '🥉'
+};
+const getRankClass = rank => {
+  if (rank === 1) return styles.rankGold;
+  if (rank === 2) return styles.rankSilver;
+  if (rank === 3) return styles.rankBronze;
+  return '';
+};
+const formatDisplayValue = (value, format, prefix, suffix) => {
+  let formatted;
+  switch (format) {
+    case 'currency':
+      formatted = value.toLocaleString('zh-CN', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+      break;
+    case 'percent':
+      formatted = `${value}%`;
+      break;
+    default:
+      formatted = value.toLocaleString();
+  }
+  return `${prefix}${formatted}${suffix}`;
+};
+const ScrollList = ({
+  ref,
+  data = DEFAULT_DATA,
+  maxItems = 5,
+  showRank = true,
+  showMedal = true,
+  progressBarEnable = true,
+  progressBarGradient = true,
+  progressBarColors = ['#00d4ff', '#9b59b6'],
+  valueFormat = 'number',
+  valuePrefix = '',
+  valueSuffix = '',
+  nameColor = '#e6e6e6',
+  valueColor = '#00d4ff',
+  backgroundColor = 'rgba(10, 10, 26, 0.95)',
+  borderColor = 'rgba(26, 26, 62, 0.8)',
+  itemBackgroundColor = 'rgba(15, 15, 42, 0.9)',
+  itemBorderColor = 'rgba(26, 26, 62, 0.6)',
+  glowEnable = false,
+  style: externalStyle
+}) => {
+  const displayData = data.slice(0, maxItems);
+  const maxValue = Math.max(...displayData.map(item => item.value), 1);
+  const getProgressBarStyle = value => {
+    const percentage = value / maxValue * 100;
+    return {
+      width: `${percentage}%`,
+      background: progressBarGradient ? `linear-gradient(90deg, ${progressBarColors[0]}, ${progressBarColors[1]})` : progressBarColors[0],
+      boxShadow: glowEnable ? `0 0 8px ${progressBarColors[0]}60` : undefined
+    };
+  };
+  const containerStyle = {
+    ...externalStyle,
+    backgroundColor,
+    borderColor
+  };
+  const itemStyle = {
+    backgroundColor: itemBackgroundColor,
+    borderColor: itemBorderColor
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: styles.container,
+    ref: ref,
+    style: containerStyle,
+    children: /*#__PURE__*/jsx("div", {
+      className: styles.list,
+      children: displayData.map(item => {
+        const isTopThree = item.rank <= 3;
+        return /*#__PURE__*/jsxs("div", {
+          className: styles.item,
+          style: itemStyle,
+          children: [showRank ? /*#__PURE__*/jsx("div", {
+            className: cn(styles.rankBadge, isTopThree ? styles.rankBadgeTopThree : styles.rankBadgeNormal, getRankClass(item.rank)),
+            children: showMedal && isTopThree ? MEDAL_EMOJI[item.rank] : item.rank
+          }) : null, /*#__PURE__*/jsx("div", {
+            className: styles.name,
+            style: {
+              color: nameColor
+            },
+            children: item.name
+          }), /*#__PURE__*/jsxs("div", {
+            className: styles.valueContainer,
+            children: [/*#__PURE__*/jsx("span", {
+              className: styles.value,
+              style: {
+                color: valueColor
+              },
+              children: formatDisplayValue(item.value, valueFormat, valuePrefix, valueSuffix)
+            }), progressBarEnable ? /*#__PURE__*/jsx("div", {
+              className: styles.progressBar,
+              children: /*#__PURE__*/jsx("div", {
+                className: styles.progressFill,
+                style: getProgressBarStyle(item.value)
+              })
+            }) : null]
+          })]
+        }, item.rank);
+      })
+    })
+  });
+};
+
+const COMPONENT_NAME = 'EasyEditorMaterialsScrollList';
+const PACKAGE_NAME = '@easy-editor/materials-dashboard-scroll-list';
+
+const configure = {
+  props: [{
+    type: 'group',
+    title: '属性',
+    setter: 'TabSetter',
+    items: [{
+      type: 'group',
+      key: 'config',
+      title: '配置',
+      setter: {
+        componentName: 'CollapseSetter',
+        props: {
+          icon: false
+        }
+      },
+      items: [
+      {
+        name: 'id',
+        title: 'ID',
+        setter: 'NodeIdSetter',
+        extraProps: {
+          label: false
+        }
+      }, {
+        name: 'title',
+        title: '标题',
+        setter: 'StringSetter',
+        extraProps: {
+          getValue(target) {
+            return target.getExtraPropValue('title');
+          },
+          setValue(target, value) {
+            target.setExtraPropValue('title', value);
+          }
+        }
+      }, {
+        type: 'group',
+        title: '基础属性',
+        setter: {
+          componentName: 'CollapseSetter',
+          props: {
+            icon: false
+          }
+        },
+        items: [{
+          name: 'rect',
+          title: '位置尺寸',
+          setter: 'RectSetter',
+          extraProps: {
+            getValue(target) {
+              return target.getExtraPropValue('$dashboard.rect');
+            },
+            setValue(target, value) {
+              target.setExtraPropValue('$dashboard.rect', value);
+            }
+          }
+        }]
+      },
+      {
+        type: 'group',
+        title: '数据',
+        setter: {
+          componentName: 'CollapseSetter',
+          props: {
+            icon: false
+          }
+        },
+        items: [{
+          name: 'data',
+          title: '列表数据',
+          setter: 'JsonSetter'
+        }, {
+          name: 'maxItems',
+          title: '最大显示数',
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              min: 1,
+              max: 20
+            }
+          },
+          extraProps: {
+            defaultValue: 5
+          }
+        }]
+      }, {
+        type: 'group',
+        title: '显示',
+        setter: {
+          componentName: 'CollapseSetter',
+          props: {
+            icon: false
+          }
+        },
+        items: [{
+          name: 'showRank',
+          title: '显示排名',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: true
+          }
+        }, {
+          name: 'showMedal',
+          title: '显示奖牌',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: true
+          }
+        }, {
+          name: 'progressBarEnable',
+          title: '显示进度条',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: true
+          }
+        }, {
+          name: 'progressBarGradient',
+          title: '渐变效果',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: true
+          }
+        }, {
+          name: 'glowEnable',
+          title: '发光效果',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: false
+          }
+        }]
+      }, {
+        type: 'group',
+        title: '数值格式',
+        setter: {
+          componentName: 'CollapseSetter',
+          props: {
+            icon: false
+          }
+        },
+        items: [{
+          name: 'valueFormat',
+          title: '格式类型',
+          setter: {
+            componentName: 'SelectSetter',
+            props: {
+              options: [{
+                label: '数字',
+                value: 'number'
+              }, {
+                label: '货币',
+                value: 'currency'
+              }, {
+                label: '百分比',
+                value: 'percent'
+              }]
+            }
+          },
+          extraProps: {
+            defaultValue: 'number'
+          }
+        }, {
+          name: 'valuePrefix',
+          title: '数值前缀',
+          setter: 'StringSetter',
+          extraProps: {
+            defaultValue: ''
+          }
+        }, {
+          name: 'valueSuffix',
+          title: '数值后缀',
+          setter: 'StringSetter',
+          extraProps: {
+            defaultValue: ''
+          }
+        }]
+      }, {
+        type: 'group',
+        title: '颜色',
+        setter: {
+          componentName: 'CollapseSetter',
+          props: {
+            icon: false
+          }
+        },
+        items: [{
+          name: 'progressBarColors',
+          title: '进度条颜色',
+          setter: 'ColorSetter',
+          extraProps: {
+            defaultValue: ['#00d4ff', '#9b59b6']
+          }
+        }, {
+          name: 'nameColor',
+          title: '名称颜色',
+          setter: 'ColorSetter',
+          extraProps: {
+            defaultValue: '#e6e6e6'
+          }
+        }, {
+          name: 'valueColor',
+          title: '数值颜色',
+          setter: 'ColorSetter',
+          extraProps: {
+            defaultValue: '#00d4ff'
+          }
+        }, {
+          name: 'backgroundColor',
+          title: '背景颜色',
+          setter: 'ColorSetter',
+          extraProps: {
+            defaultValue: 'rgba(10, 10, 26, 0.95)'
+          }
+        }, {
+          name: 'borderColor',
+          title: '边框颜色',
+          setter: 'ColorSetter',
+          extraProps: {
+            defaultValue: 'rgba(26, 26, 62, 0.8)'
+          }
+        }, {
+          name: 'itemBackgroundColor',
+          title: '行背景颜色',
+          setter: 'ColorSetter',
+          extraProps: {
+            defaultValue: 'rgba(15, 15, 42, 0.9)'
+          }
+        }, {
+          name: 'itemBorderColor',
+          title: '行边框颜色',
+          setter: 'ColorSetter',
+          extraProps: {
+            defaultValue: 'rgba(26, 26, 62, 0.6)'
+          }
+        }]
+      }]
+    }, {
+      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
+        }
+      }, {
+        type: 'group',
+        title: '滚动配置',
+        setter: {
+          componentName: 'CollapseSetter',
+          props: {
+            icon: false
+          }
+        },
+        items: [{
+          name: 'scrollEnable',
+          title: '启用滚动',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: true
+          }
+        }, {
+          name: 'scrollDirection',
+          title: '滚动方向',
+          setter: {
+            componentName: 'SegmentedSetter',
+            props: {
+              options: [{
+                label: '向上',
+                value: 'up'
+              }, {
+                label: '向下',
+                value: 'down'
+              }]
+            }
+          },
+          extraProps: {
+            defaultValue: 'up'
+          }
+        }, {
+          name: 'scrollSpeed',
+          title: '滚动速度',
+          setter: {
+            componentName: 'SliderSetter',
+            props: {
+              min: 1,
+              max: 10,
+              step: 1,
+              suffix: 'x'
+            }
+          },
+          extraProps: {
+            defaultValue: 3
+          }
+        }, {
+          name: 'hoverPause',
+          title: '悬停暂停',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: true
+          }
+        }, {
+          name: 'scrollInterval',
+          title: '滚动间隔',
+          setter: {
+            componentName: 'SliderSetter',
+            props: {
+              min: 1000,
+              max: 10_000,
+              step: 500,
+              suffix: 'ms'
+            }
+          },
+          extraProps: {
+            defaultValue: 3000
+          }
+        }]
+      }, {
+        type: 'group',
+        title: '动画',
+        setter: {
+          componentName: 'CollapseSetter',
+          props: {
+            icon: false
+          }
+        },
+        items: [{
+          name: 'animationEnable',
+          title: '启用动画',
+          setter: 'SwitchSetter',
+          extraProps: {
+            defaultValue: true
+          }
+        }, {
+          name: 'animationDuration',
+          title: '动画时长',
+          setter: {
+            componentName: 'SliderSetter',
+            props: {
+              min: 0,
+              max: 2000,
+              step: 100,
+              suffix: 'ms'
+            }
+          },
+          extraProps: {
+            defaultValue: 500
+          }
+        }, {
+          name: 'animationEasing',
+          title: '缓动函数',
+          setter: {
+            componentName: 'SelectSetter',
+            props: {
+              options: [{
+                label: '线性',
+                value: 'linear'
+              }, {
+                label: '缓入',
+                value: 'ease-in'
+              }, {
+                label: '缓出',
+                value: 'ease-out'
+              }, {
+                label: '缓入缓出',
+                value: 'ease-in-out'
+              }]
+            }
+          },
+          extraProps: {
+            defaultValue: 'ease-out'
+          }
+        }]
+      }]
+    }]
+  }],
+  component: {},
+  supports: {},
+  advanced: {}
+};
+
+const snippets = [{
+  title: '排行榜',
+  screenshot: '',
+  schema: {
+    componentName: COMPONENT_NAME,
+    props: {
+      data: [{
+        rank: 1,
+        name: '北京',
+        value: 9800
+      }, {
+        rank: 2,
+        name: '上海',
+        value: 8500
+      }, {
+        rank: 3,
+        name: '广州',
+        value: 7200
+      }, {
+        rank: 4,
+        name: '深圳',
+        value: 6100
+      }, {
+        rank: 5,
+        name: '杭州',
+        value: 4800
+      }],
+      maxItems: 5,
+      showMedal: true,
+      progressBarEnable: true,
+      progressBarGradient: true,
+      progressBarColors: ['#00d4ff', '#9b59b6']
+    },
+    $dashboard: {
+      rect: {
+        width: 320,
+        height: 280
+      }
+    }
+  }
+}, {
+  title: '简单列表',
+  screenshot: '',
+  schema: {
+    componentName: COMPONENT_NAME,
+    props: {
+      data: [{
+        rank: 1,
+        name: '产品A',
+        value: 1250
+      }, {
+        rank: 2,
+        name: '产品B',
+        value: 980
+      }, {
+        rank: 3,
+        name: '产品C',
+        value: 750
+      }],
+      maxItems: 3,
+      showMedal: false,
+      progressBarEnable: true,
+      progressBarGradient: false,
+      progressBarColors: ['#00ff88', '#00ff88']
+    },
+    $dashboard: {
+      rect: {
+        width: 280,
+        height: 180
+      }
+    }
+  }
+}];
+
+var version = "0.0.1";
+var pkg = {
+	version: version};
+
+const meta = {
+  componentName: COMPONENT_NAME,
+  title: '滚动列表',
+  group: MaterialGroup.DISPLAY,
+  devMode: 'proCode',
+  npm: {
+    package: PACKAGE_NAME,
+    version: pkg.version,
+    globalName: COMPONENT_NAME,
+    componentName: COMPONENT_NAME
+  },
+  snippets,
+  configure
+};
+
+export { ScrollList as component, meta };
+//# sourceMappingURL=index.esm.js.map