@ray-js/lamp-saturation-slider 1.1.2-beta-1 → 1.1.4-beta-2

package/lib/components/slider/index.js

@@ -1,215 +0,0 @@
-import "core-js/modules/es.number.constructor.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.regexp.test.js";
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.array.fill.js";
-import "core-js/modules/es.parse-int.js";
-/* eslint-disable func-names */
-/* eslint-disable vars-on-top */
-import 'core-js/modules/es.number.constructor.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.regexp.test.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.fill.js';
-import 'core-js/modules/es.parse-int.js';
-// eslint-disable-next-line no-undef
-Component({
-  options: {
-    addGlobalClass: true
-  },
-  properties: {
-    className: {
-      type: String,
-      value: ''
-    },
-    hue: {
-      type: Number,
-      value: 0
-    },
-    disable: {
-      type: Boolean,
-      value: false
-    },
-    closed: {
-      type: Boolean,
-      value: false
-    },
-    // 左滑块初始值
-    start: {
-      type: Number,
-      value: 0
-    },
-    // 左滑块最小值限制
-    startMin: {
-      type: Number
-    },
-    // 左滑块最大值限制
-    startMax: {
-      type: Number
-    },
-    // 右滑块初始值/单向滑条初始值
-    end: {
-      type: Number,
-      value: 30
-    },
-    watchStart: {
-      type: Number
-    },
-    watchEnd: {
-      type: Number
-    },
-    // 右滑块最小值/单向滑条最小值
-    endMin: {
-      type: Number
-    },
-    // 右滑块最大值/单向滑条最大值
-    endMax: {
-      type: Number
-    },
-    // 最小值
-    min: {
-      type: Number,
-      value: 0
-    },
-    // 最大值
-    max: {
-      type: Number,
-      value: 1000
-    },
-    // 阶段值
-    step: {
-      type: Number,
-      value: 1
-    },
-    // 阶段值
-    forceStep: {
-      type: Number
-    },
-    // 滑块样式
-    thumbStartStyle: {
-      type: String
-    },
-    // 滑块样式
-    thumbEndStyle: {
-      type: String
-    },
-    // 轨道样式
-    trackStyle: {
-      type: String
-    },
-    // 滑条样式
-    barStyle: {
-      type: String
-    },
-    // step样式
-    stepStyle: {
-      type: String
-    },
-    // step样式
-    activeStepStyle: {
-      type: String
-    },
-    // 单向还是双向 range: 双向，normal: 单向
-    mode: {
-      type: String
-    },
-    // 方向 "horizontal" | "vertical"
-    direction: {
-      type: String
-    },
-    // 控制滑动bar的偏移量，用于样式微调
-    barPad: {
-      type: Number
-    },
-    // 隐藏滑块
-    hideThumb: {
-      type: Boolean,
-      value: false
-    },
-    // 显示阶段提示
-    showSteps: {
-      type: Boolean,
-      value: false
-    },
-    // 反转
-    reverse: {
-      type: Boolean,
-      value: false
-    },
-    // 使用触摸跳跃
-    enableTouch: {
-      type: Boolean,
-      value: false
-    },
-    // 使用触摸bar增加偏移
-    enableTouchBar: {
-      type: Boolean,
-      value: false
-    },
-    // 使用触摸跳跃
-    maxRangeOffset: {
-      type: Number,
-      value: 0
-    },
-    // 唯一ID
-    instanceId: {
-      type: String
-    },
-    // 在bar上显示文本
-    showText: {
-      type: Boolean
-    },
-    // bar文本样式
-    textStyle: {
-      type: String
-    },
-    // 文本格式化，例如 textTemplate="比率 {{text}} %"
-    textTemplate: {
-      type: String
-    },
-    // 动态计算thumb样式，如 { background: "rgba(0,0,0, {{text}}/100)" }
-    thumbStyleCalc: {
-      type: Object
-    }
-  },
-  data: {
-    steps: [],
-    text: ''
-  },
-  lifetimes: {
-    /**
-     * 组件的方法列表
-     */
-    ready: function () {
-      var isNumber = function (n) {
-        return /\d+/.test(n);
-      };
-      var getNumber = function (n, def) {
-        return isNumber(n) ? n : def;
-      };
-      if (!this.data.showSteps) return;
-      var stepCount = this.data.step || this.data.forceStep;
-      var max = getNumber(this.data.max, 100);
-      var min = getNumber(this.data.min, 0);
-      var steps = new Array(parseInt(String((max - min) / stepCount), 10)).fill(0).map(function (_, i) {
-        return i;
-      }).concat(-1);
-      this.setData({
-        steps: steps
-      });
-    }
-  },
-  methods: {
-    setText: function (_ref) {
-      var instanceId = _ref.instanceId;
-      var content = _ref.content;
-      if (!this.data.showText) return;
-      if (instanceId !== this.data.instanceId) return;
-      this.setData({
-        text: content
-      });
-    }
-  }
-});

package/lib/components/slider/index.json

@@ -1,3 +0,0 @@
-{
-  "component": true
-}

package/lib/components/slider/index.less

@@ -1,194 +0,0 @@
-.rayui-slider {
-  --slider-width: 300px;
-  --slider-height: 10px;
-  --slider-top-position: 2.5px;
-  --range-width: 20px;
-  --range-left-position: 20px;
-  --thumb-height: 24px;
-  --thumb-width: 24px;
-  --thumb-left-position: 30px;
-  --thumb-active-color: #FFFFFF;
-
-  border-radius: 5px;
-  background: #E0E0E0;
-  width: var(--slider-width);
-  height: var(--slider-height);
-  margin: var(--slider-top-position);
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  .rayui-slider-mask {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 16px;
-  }
-
-  &-steps {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &-dot {
-      width: 4px;
-      height: 4px;
-      border-radius: 50%;
-      background-color: #328EFF;
-
-      &:first-child {
-        opacity: 0;
-      }
-
-      &:last-child {
-        opacity: 0;
-      }
-    }
-  }
-
-  &-bar {
-    position: absolute;
-    width: var(--range-width);
-    height: var(--slider-height);
-    background: #328EFF;
-    cursor: pointer;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    flex-shrink: 0;
-    will-change: width;
-    overflow: hidden;
-
-    .rayui-slider-steps-dot {
-      background-color: rgba(51, 255, 241, 0.75);
-    }
-
-    &-text {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: inline-block;
-      font-size: 12px;
-      color: #fff;
-      white-space: nowrap;
-    }
-
-    &-steps_wrap {
-      position: absolute;
-      pointer-events: none;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-thumb {
-    position: absolute;
-    will-change: left;
-
-    &-start {
-      top: 50%;
-      transform: translateY(-50%);
-
-      &-render {
-        width: var(--thumb-width);
-        height: var(--thumb-height);
-        border-radius: 50%;
-        background: var(--thumb-active-color);
-        cursor: pointer;
-        box-shadow: rgb(0 0 0 / 12%) 0px 0.5px 4px, rgb(0 0 0 / 12%) 0px 6px 13px;
-      }
-    }
-
-    &-end {
-      top: 50%;
-      transform: translateY(-50%);
-
-      &-render {
-        width: var(--thumb-width);
-        height: var(--thumb-height);
-        border-radius: 50%;
-        background: var(--thumb-active-color);
-        cursor: pointer;
-        box-shadow: rgb(0 0 0 / 12%) 0px 0.5px 4px, rgb(0 0 0 / 12%) 0px 6px 13px;
-      }
-    }
-  }
-
-  &.reverse {
-    .rayui-slider {
-      &-bar {
-        right: 0;
-        left: auto;
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-      }
-    }
-  }
-
-  &.vertical {
-    height: var(--slider-width);
-    width: var(--slider-height);
-    align-items: flex-start;
-    justify-content: center;
-
-    .rayui-slider {
-      &-steps {
-        height: 100%;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        flex-direction: column;
-        align-items: center;
-      }
-
-      &-bar {
-        height: var(--range-width);
-        width: var(--slider-height);
-        top: calc(var(--range-left-position) + var(--thumb-width)/2);
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-        transform: translateX(-50%);
-        left: 50%;
-        will-change: height;
-      }
-
-      &-thumb {
-        will-change: top;
-
-        &-start {
-          left: 50%;
-          transform: translateX(-50%);
-        }
-
-        &-end {
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-
-  &.vertical.reverse {
-    .rayui-slider {
-      &-bar {
-        top: auto;
-        bottom: 0;
-      }
-    }
-  }
-
-  &.disabled {
-    pointer-events: none;
-  }
-}