@easy-editor/materials-dashboard-scroll-list 0.0.3 → 0.0.5

package/dist/index.js

@@ -1,680 +0,0 @@
-/* @easy-editor/materials-dashboard-scroll-list v0.0.2 */
-(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.EasyEditorMaterialsScrollList = {}, 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.2";
-  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