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

package/dist/index.js

@@ -0,0 +1,674 @@
+/* @easy-editor/materials-dashboard-ranking-list v0.0.1 */
+(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.EasyEditorMaterialsRankingList = {}, 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 = {
+    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__*/jsxRuntime.jsx("div", {
+      className: styles.container,
+      ref: ref,
+      style: containerStyle,
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: styles.list,
+        children: displayData.map(item => {
+          const isTopThree = item.rank <= 3;
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: styles.item,
+            style: itemStyle,
+            children: [showRank ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+              className: styles.name,
+              style: {
+                color: nameColor
+              },
+              children: item.name
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: styles.valueContainer,
+              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                className: styles.value,
+                style: {
+                  color: valueColor
+                },
+                children: formatDisplayValue(item.value, valueFormat, valuePrefix, valueSuffix)
+              }), progressBarEnable ? /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: styles.progressBar,
+                children: /*#__PURE__*/jsxRuntime.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
+  };
+
+  exports.component = ScrollList;
+  exports.meta = meta;
+
+}));
+//# sourceMappingURL=index.js.map