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

package/dist/index.esm.js

@@ -1,666 +0,0 @@
-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