@varlet/ui 3.5.0 → 3.5.1

package/es/slider/Slider.mjs

@@ -1,567 +0,0 @@
-import VarFormDetails from "../form-details/index.mjs";
-import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
-import Hover from "../hover/index.mjs";
-import { defineComponent, ref, onBeforeUnmount, computed, reactive, nextTick, watch } from "vue";
-import { useValidation, createNamespace } from "../utils/components.mjs";
-import { useForm } from "../form/provide.mjs";
-import { getLeft, toSizeUnit } from "../utils/elements.mjs";
-import { warn } from "../utils/logger.mjs";
-import { isArray, isNumber, toNumber, getRect, preventDefault, call, hasOwn, clamp } from "@varlet/shared";
-import { props, Thumbs } from "./props.mjs";
-import { onSmartMounted, onWindowResize, useEventListener } from "@varlet/use";
-const { name, n, classes } = createNamespace("slider");
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, resolveDirective as _resolveDirective, withDirectives as _withDirectives, resolveComponent as _resolveComponent, createVNode as _createVNode, toDisplayString as _toDisplayString, withModifiers as _withModifiers, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["tabindex", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-disabled", "aria-valuetext", "onTouchstart", "onFocusin", "onFocusout"];
-function __render__(_ctx, _cache) {
-  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
-  const _component_var_form_details = _resolveComponent("var-form-details");
-  const _directive_hover = _resolveDirective("hover");
-  return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction), _ctx.n("$--box")))
-    },
-    [
-      _createElementVNode(
-        "div",
-        {
-          class: _normalizeClass(_ctx.classes(_ctx.n(`${_ctx.direction}-block`), [_ctx.isDisabled, _ctx.n("--disabled")], [_ctx.errorMessage, _ctx.n(`${_ctx.direction}--error`)])),
-          ref: "sliderEl",
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-        },
-        [
-          _createElementVNode(
-            "div",
-            {
-              class: _normalizeClass(_ctx.n(`${_ctx.direction}-track`))
-            },
-            [
-              _createElementVNode(
-                "div",
-                {
-                  class: _normalizeClass(_ctx.n(`${_ctx.direction}-track-background`)),
-                  style: _normalizeStyle({
-                    background: _ctx.trackColor,
-                    height: _ctx.isVertical ? "100%" : _ctx.toSizeUnit(_ctx.trackHeight),
-                    width: _ctx.isVertical ? _ctx.toSizeUnit(_ctx.trackHeight) : "100%"
-                  })
-                },
-                null,
-                6
-                /* CLASS, STYLE */
-              ),
-              _createElementVNode(
-                "div",
-                {
-                  class: _normalizeClass(_ctx.n(`${_ctx.direction}-track-fill`)),
-                  style: _normalizeStyle(_ctx.getFillStyle)
-                },
-                null,
-                6
-                /* CLASS, STYLE */
-              )
-            ],
-            2
-            /* CLASS */
-          ),
-          (_openBlock(true), _createElementBlock(
-            _Fragment,
-            null,
-            _renderList(_ctx.thumbList, (item) => {
-              return _openBlock(), _createElementBlock("div", {
-                class: _normalizeClass(_ctx.n(`${_ctx.direction}-thumb`)),
-                key: item.enumValue,
-                style: _normalizeStyle(_ctx.thumbStyle(item)),
-                tabindex: _ctx.isDisabled ? void 0 : "0",
-                role: "slider",
-                "aria-valuemin": _ctx.min,
-                "aria-valuemax": _ctx.max,
-                "aria-valuenow": item.value,
-                "aria-disabled": _ctx.isDisabled,
-                "aria-valuetext": `${item.text}`,
-                onTouchstart: _withModifiers(($event) => _ctx.start($event, item.enumValue), ["stop"]),
-                onFocusin: ($event) => _ctx.handleFocus(item),
-                onFocusout: ($event) => _ctx.handleBlur(item)
-              }, [
-                _renderSlot(_ctx.$slots, "button", {
-                  currentValue: item.text
-                }, () => [
-                  _withDirectives(_createElementVNode(
-                    "div",
-                    {
-                      class: _normalizeClass(_ctx.n(`${_ctx.direction}-thumb-block`)),
-                      style: _normalizeStyle({
-                        background: _ctx.thumbColor
-                      })
-                    },
-                    null,
-                    6
-                    /* CLASS, STYLE */
-                  ), [
-                    [_directive_hover, (value) => _ctx.hover(value, item), "desktop"]
-                  ]),
-                  _createElementVNode(
-                    "div",
-                    {
-                      class: _normalizeClass(
-                        _ctx.classes(_ctx.n(`${_ctx.direction}-thumb-ripple`), [
-                          _ctx.thumbsProps[item.enumValue].active,
-                          _ctx.n(`${_ctx.direction}-thumb-ripple--active`)
-                        ])
-                      ),
-                      style: _normalizeStyle({
-                        background: _ctx.thumbsProps[item.enumValue].active ? _ctx.thumbColor : void 0
-                      })
-                    },
-                    [
-                      _createVNode(_component_var_hover_overlay, {
-                        hovering: !_ctx.isDisabled && item.hovering,
-                        focusing: !_ctx.isDisabled && item.focusing
-                      }, null, 8, ["hovering", "focusing"])
-                    ],
-                    6
-                    /* CLASS, STYLE */
-                  ),
-                  _createElementVNode(
-                    "div",
-                    {
-                      class: _normalizeClass(
-                        _ctx.classes(_ctx.n(`${_ctx.direction}-thumb-label`), [_ctx.showLabel(item.enumValue), _ctx.n(`${_ctx.direction}-thumb-label--active`)])
-                      ),
-                      style: _normalizeStyle({
-                        background: _ctx.labelColor,
-                        color: _ctx.labelTextColor,
-                        height: _ctx.toSizeUnit(_ctx.thumbSize),
-                        width: _ctx.toSizeUnit(_ctx.thumbSize)
-                      })
-                    },
-                    [
-                      _createElementVNode(
-                        "span",
-                        null,
-                        _toDisplayString(item.text),
-                        1
-                        /* TEXT */
-                      )
-                    ],
-                    6
-                    /* CLASS, STYLE */
-                  )
-                ])
-              ], 46, _hoisted_1);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ],
-        2
-        /* CLASS */
-      ),
-      _createVNode(_component_var_form_details, {
-        "error-message": _ctx.errorMessage,
-        class: _normalizeClass(_ctx.n("form")),
-        "var-slider-cover": ""
-      }, null, 8, ["error-message", "class"])
-    ],
-    2
-    /* CLASS */
-  );
-}
-const __sfc__ = defineComponent({
-  name,
-  components: {
-    VarFormDetails,
-    VarHoverOverlay
-  },
-  directives: { Hover },
-  props,
-  setup(props2) {
-    const maxDistance = ref(0);
-    const sliderEl = ref(null);
-    const isScroll = ref(false);
-    const scope = computed(() => toNumber(props2.max) - toNumber(props2.min));
-    const unitWidth = computed(() => maxDistance.value / scope.value * toNumber(props2.step));
-    const isDisabled = computed(() => props2.disabled || (form == null ? void 0 : form.disabled.value));
-    const isReadonly = computed(() => props2.readonly || (form == null ? void 0 : form.readonly.value));
-    const isVertical = computed(() => props2.direction === "vertical");
-    const focusingFirst = ref(false);
-    const focusingSecond = ref(false);
-    const { bindForm, form } = useForm();
-    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
-    const { hovering: hoveringFirst, handleHovering: handleHoveringFirst } = useHoverOverlay();
-    const { hovering: hoveringSecond, handleHovering: handleHoveringSecond } = useHoverOverlay();
-    const thumbList = computed(() => {
-      const { modelValue, range } = props2;
-      let list = [];
-      if (range && isArray(modelValue)) {
-        list = [
-          {
-            value: getValue(modelValue[0]),
-            enumValue: Thumbs.First,
-            text: toPrecision(modelValue[0]),
-            hovering: hoveringFirst.value,
-            focusing: focusingFirst.value,
-            handleHovering: handleHoveringFirst,
-            handleFocusing(value) {
-              focusingFirst.value = value;
-            }
-          },
-          {
-            value: getValue(modelValue[1]),
-            enumValue: Thumbs.Second,
-            text: toPrecision(modelValue[1]),
-            hovering: hoveringSecond.value,
-            focusing: focusingSecond.value,
-            handleHovering: handleHoveringSecond,
-            handleFocusing(value) {
-              focusingSecond.value = value;
-            }
-          }
-        ];
-      } else if (isNumber(modelValue)) {
-        list = [
-          {
-            value: getValue(modelValue),
-            enumValue: Thumbs.First,
-            text: toPrecision(modelValue),
-            hovering: hoveringFirst.value,
-            focusing: focusingFirst.value,
-            handleHovering: handleHoveringFirst,
-            handleFocusing(value) {
-              focusingFirst.value = value;
-            }
-          }
-        ];
-      }
-      return list;
-    });
-    const getFillStyle = computed(() => {
-      const { activeColor, range, modelValue } = props2;
-      const gap = range && isArray(modelValue) ? getValue(Math.min(modelValue[0], modelValue[1])) : 0;
-      const fillLength = range && isArray(modelValue) ? getValue(Math.max(modelValue[0], modelValue[1])) - gap : getValue(modelValue);
-      return isVertical.value ? {
-        left: "0px",
-        height: `${fillLength}%`,
-        bottom: `${gap}%`,
-        background: activeColor
-      } : {
-        top: "0px",
-        width: `${fillLength}%`,
-        left: `${gap}%`,
-        background: activeColor
-      };
-    });
-    const thumbsProps = reactive({
-      [Thumbs.First]: getThumbProps(),
-      [Thumbs.Second]: getThumbProps()
-    });
-    let activeThumb;
-    const sliderProvider = {
-      reset,
-      validate,
-      resetValidation
-    };
-    call(bindForm, sliderProvider);
-    watch([() => props2.modelValue, () => props2.step], ([modelValue, step]) => {
-      if (!stepValidator() || !valueValidator() || isScroll.value) {
-        return;
-      }
-      setProps(modelValue, toNumber(step));
-    });
-    watch(maxDistance, () => setProps());
-    onSmartMounted(() => {
-      if (!stepValidator() || !valueValidator()) {
-        return;
-      }
-      resizeMaxDistance();
-    });
-    onBeforeUnmount(removeDocumentEvents);
-    useEventListener(() => window, "keydown", handleKeydown);
-    onWindowResize(resizeMaxDistance);
-    function resizeMaxDistance() {
-      maxDistance.value = sliderEl.value[isVertical.value ? "offsetHeight" : "offsetWidth"];
-    }
-    function validate() {
-      return v(props2.rules, props2.modelValue);
-    }
-    function getThumbProps() {
-      return {
-        startPosition: 0,
-        currentOffset: 0,
-        active: false,
-        percentValue: 0
-      };
-    }
-    function validateWithTrigger() {
-      return nextTick(() => vt(["onChange"], "onChange", props2.rules, props2.modelValue));
-    }
-    function getOffset(e) {
-      const currentTarget = e.currentTarget;
-      if (!currentTarget) {
-        return 0;
-      }
-      if (!isVertical.value) {
-        return e.clientX - getLeft(currentTarget);
-      }
-      return maxDistance.value - (e.clientY - getRect(currentTarget).top);
-    }
-    function thumbStyle(thumb) {
-      const key = isVertical.value ? "bottom" : "left";
-      return {
-        [key]: `${thumb.value}%`,
-        zIndex: thumbsProps[thumb.enumValue].active ? 1 : void 0
-      };
-    }
-    function showLabel(type) {
-      if (props2.labelVisible === "always") {
-        return true;
-      }
-      if (props2.labelVisible === "never") {
-        return false;
-      }
-      return thumbsProps[type].active;
-    }
-    function getValue(value) {
-      const { min, max } = props2;
-      if (value < toNumber(min)) {
-        return 0;
-      }
-      if (value > toNumber(max)) {
-        return 100;
-      }
-      return (value - toNumber(min)) / scope.value * 100;
-    }
-    function toPrecision(value) {
-      if (!isNumber(value)) {
-        return 0;
-      }
-      const num = clamp(value, toNumber(props2.min), toNumber(props2.max));
-      const isInteger = parseInt(`${num}`, 10) === num;
-      return isInteger ? num : toNumber(num.toPrecision(5));
-    }
-    function hover(value, item) {
-      if (isDisabled.value) {
-        return;
-      }
-      item.handleHovering(value);
-    }
-    function emitChange(value) {
-      call(props2.onChange, value);
-      call(props2["onUpdate:modelValue"], value);
-      validateWithTrigger();
-    }
-    function setPercent(moveDistance, type) {
-      let rangeValue = [];
-      const { step, range, modelValue, min } = props2;
-      const stepNumber = toNumber(step);
-      const roundDistance = Math.round(moveDistance / unitWidth.value);
-      const curValue = roundDistance * stepNumber + toNumber(min);
-      const prevValue = thumbsProps[type].percentValue * stepNumber + toNumber(min);
-      thumbsProps[type].percentValue = roundDistance;
-      if (range && isArray(modelValue)) {
-        rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
-      }
-      if (prevValue !== curValue) {
-        const value = range ? rangeValue.map((value2) => toPrecision(value2)) : toPrecision(curValue);
-        emitChange(value);
-      }
-    }
-    function getType(offset) {
-      if (!props2.range) {
-        return Thumbs.First;
-      }
-      const thumb1Distance = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
-      const thumb2Distance = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
-      const offsetToThumb1 = Math.abs(offset - thumb1Distance);
-      const offsetToThumb2 = Math.abs(offset - thumb2Distance);
-      return offsetToThumb1 <= offsetToThumb2 ? Thumbs.First : Thumbs.Second;
-    }
-    function addDocumentEvents() {
-      document.addEventListener("touchmove", move, { passive: false });
-      document.addEventListener("touchend", end);
-      document.addEventListener("touchcancel", end);
-    }
-    function removeDocumentEvents() {
-      document.removeEventListener("touchmove", move);
-      document.removeEventListener("touchend", end);
-      document.removeEventListener("touchcancel", end);
-    }
-    function start(event, type) {
-      resizeMaxDistance();
-      if (!isDisabled.value) {
-        thumbsProps[type].active = true;
-      }
-      activeThumb = type;
-      addDocumentEvents();
-      if (isDisabled.value || isReadonly.value) {
-        return;
-      }
-      call(props2.onStart);
-      isScroll.value = true;
-      const { clientX, clientY } = event.touches[0];
-      thumbsProps[type].startPosition = isVertical.value ? clientY : clientX;
-    }
-    function move(event) {
-      preventDefault(event);
-      if (isDisabled.value || isReadonly.value || !isScroll.value) {
-        return;
-      }
-      const { startPosition, currentOffset } = thumbsProps[activeThumb];
-      const { clientX, clientY } = event.touches[0];
-      let moveDistance = (isVertical.value ? startPosition - clientY : clientX - startPosition) + currentOffset;
-      if (moveDistance <= 0) {
-        moveDistance = 0;
-      } else if (moveDistance >= maxDistance.value) {
-        moveDistance = maxDistance.value;
-      }
-      setPercent(moveDistance, activeThumb);
-    }
-    function end() {
-      removeDocumentEvents();
-      const { range, modelValue, onEnd, step, min } = props2;
-      if (!isDisabled.value) {
-        thumbsProps[activeThumb].active = false;
-      }
-      if (isDisabled.value || isReadonly.value) {
-        return;
-      }
-      let rangeValue = [];
-      thumbsProps[activeThumb].currentOffset = thumbsProps[activeThumb].percentValue * unitWidth.value;
-      const curValue = thumbsProps[activeThumb].percentValue * toNumber(step) + toNumber(min);
-      if (range && isArray(modelValue)) {
-        rangeValue = activeThumb === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
-      }
-      call(onEnd, range ? rangeValue : curValue);
-      isScroll.value = false;
-    }
-    function handleClick(event) {
-      if (isDisabled.value || isReadonly.value) {
-        return;
-      }
-      if (event.target.closest(`.${n("thumb")}`)) {
-        return;
-      }
-      const offset = getOffset(event);
-      const type = getType(offset);
-      activeThumb = type;
-      setPercent(offset, type);
-      end();
-    }
-    function stepValidator() {
-      if (toNumber(props2.step) <= 0) {
-        warn("[Varlet] Slider", '"step" should be > 0');
-        return false;
-      }
-      return true;
-    }
-    function valueValidator() {
-      const { range, modelValue } = props2;
-      if (range && !isArray(modelValue)) {
-        console.error('[Varlet] Slider: "modelValue" should be an Array');
-        return false;
-      }
-      if (!range && isArray(modelValue)) {
-        console.error('[Varlet] Slider: "modelValue" should be a Number');
-        return false;
-      }
-      if (range && isArray(modelValue) && modelValue.length < 2) {
-        console.error('[Varlet] Slider: "modelValue" should have two value');
-        return false;
-      }
-      return true;
-    }
-    function setProps(modelValue = props2.modelValue, step = toNumber(props2.step)) {
-      const getPercent = (value) => {
-        const { min, max } = props2;
-        if (value < toNumber(min)) {
-          return 0;
-        }
-        if (value > toNumber(max)) {
-          return scope.value / step;
-        }
-        return (value - toNumber(min)) / step;
-      };
-      if (props2.range && isArray(modelValue)) {
-        thumbsProps[Thumbs.First].percentValue = getPercent(modelValue[0]);
-        thumbsProps[Thumbs.First].currentOffset = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
-        thumbsProps[Thumbs.Second].percentValue = getPercent(modelValue[1]);
-        thumbsProps[Thumbs.Second].currentOffset = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
-      } else if (isNumber(modelValue)) {
-        thumbsProps[Thumbs.First].currentOffset = getPercent(modelValue) * unitWidth.value;
-      }
-    }
-    function reset() {
-      const resetValue = props2.range ? [0, 0] : 0;
-      call(props2["onUpdate:modelValue"], resetValue);
-      resetValidation();
-    }
-    function moveFocusingThumb(offset, value) {
-      const stepValue = toNumber(props2.step);
-      if (isArray(value)) {
-        const updatedFirstValue = value[0] + (focusingFirst.value ? offset * stepValue : 0);
-        const updatedSecondValue = value[1] + (focusingSecond.value ? offset * stepValue : 0);
-        return [updatedFirstValue, updatedSecondValue].map(toPrecision);
-      }
-      return toPrecision(value + offset * stepValue);
-    }
-    function handleKeydown(event) {
-      const keyToOffset = {
-        ArrowRight: 1,
-        ArrowUp: 1,
-        ArrowLeft: -1,
-        ArrowDown: -1
-      };
-      const { key } = event;
-      if (!hasOwn(keyToOffset, key) || isReadonly.value || isDisabled.value) {
-        return;
-      }
-      if (props2.range && !focusingFirst.value && !focusingSecond.value) {
-        return;
-      }
-      if (!props2.range && !focusingFirst.value) {
-        return;
-      }
-      preventDefault(event);
-      const offset = keyToOffset[key];
-      const value = moveFocusingThumb(offset, props2.modelValue);
-      emitChange(value);
-    }
-    function handleFocus(item) {
-      if (isDisabled.value) {
-        return;
-      }
-      item.handleFocusing(true);
-    }
-    function handleBlur(item) {
-      item.handleFocusing(false);
-    }
-    return {
-      sliderEl,
-      getFillStyle,
-      isDisabled,
-      isVertical,
-      errorMessage,
-      thumbsProps,
-      thumbList,
-      handleFocus,
-      handleBlur,
-      n,
-      classes,
-      thumbStyle,
-      hover,
-      toSizeUnit,
-      toNumber,
-      showLabel,
-      start,
-      move,
-      end,
-      handleClick
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/slider/index.mjs

@@ -1,12 +0,0 @@
-import Slider from "./Slider.mjs";
-import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
-import { props as sliderProps } from "./props.mjs";
-withInstall(Slider);
-withPropsDefaultsSetter(Slider, sliderProps);
-const _SliderComponent = Slider;
-var stdin_default = Slider;
-export {
-  _SliderComponent,
-  stdin_default as default,
-  sliderProps
-};

package/es/slider/props.mjs

@@ -1,51 +0,0 @@
-import { defineListenerProp } from "../utils/components.mjs";
-var Thumbs = /* @__PURE__ */ ((Thumbs2) => {
-  Thumbs2["First"] = "1";
-  Thumbs2["Second"] = "2";
-  return Thumbs2;
-})(Thumbs || {});
-const props = {
-  modelValue: {
-    type: [Number, Array],
-    default: 0
-  },
-  step: {
-    type: [Number, String],
-    default: 1
-  },
-  range: Boolean,
-  labelVisible: {
-    type: String,
-    default: "normal"
-  },
-  activeColor: String,
-  trackColor: String,
-  thumbColor: String,
-  labelColor: String,
-  labelTextColor: String,
-  trackHeight: [String, Number],
-  max: {
-    type: [String, Number],
-    default: 100
-  },
-  min: {
-    type: [String, Number],
-    default: 0
-  },
-  thumbSize: [String, Number],
-  disabled: Boolean,
-  readonly: Boolean,
-  direction: {
-    type: String,
-    default: "horizontal"
-  },
-  rules: [Array, Function, Object],
-  onChange: defineListenerProp(),
-  onStart: defineListenerProp(),
-  onEnd: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
-};
-export {
-  Thumbs,
-  props
-};

package/es/slider/slider.css

@@ -1 +0,0 @@
-:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-height: 2px; --slider-track-border-radius: 0; --slider-track-fill-border-radius: 0; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm); --slider-thumb-label-text-color: var(--color-on-primary); --slider-thumb-size: 12px; --slider-disabled-opacity: var(--opacity-disabled);}.var-slider { -webkit-tap-highlight-color: transparent; width: 100%;}.var-slider-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider-track { width: 100%; align-items: center; position: relative;}.var-slider-track-background { width: 100%; height: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider-thumb { position: absolute; cursor: pointer;}.var-slider-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: var(--slider-thumb-label-text-color); border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider-thumb-label span { transform: rotate(-45deg);}.var-slider-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider__form[var-slider-cover] { margin: 0;}.var-slider__horizontal { -webkit-tap-highlight-color: transparent; width: 100%;}.var-slider__horizontal-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider__horizontal--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__horizontal-track { width: 100%; align-items: center; position: relative;}.var-slider__horizontal-track-background { width: 100%; height: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider__horizontal-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider__horizontal-thumb { position: absolute; cursor: pointer;}.var-slider__horizontal-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider__horizontal-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider__horizontal-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider__horizontal-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: var(--slider-thumb-label-text-color); border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__horizontal-thumb-label span { transform: rotate(-45deg);}.var-slider__horizontal-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider__horizontal__form[var-slider-cover] { margin: 0;}.var-slider__horizontal--error .var-slider__horizontal-track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__horizontal--error .var-slider__horizontal-track-fill { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__vertical { -webkit-tap-highlight-color: transparent; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;}.var-slider__vertical-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider__vertical--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__vertical-track { width: 100%; align-items: center; position: relative;}.var-slider__vertical-track-background { width: 100%; height: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider__vertical-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider__vertical-thumb { position: absolute; cursor: pointer;}.var-slider__vertical-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider__vertical-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider__vertical-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider__vertical-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: var(--slider-thumb-label-text-color); border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__vertical-thumb-label span { transform: rotate(-45deg);}.var-slider__vertical-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider__vertical__form[var-slider-cover] { margin: 0;}.var-slider__vertical-block { width: 36px; display: flex; align-items: center; justify-content: center; position: relative; user-select: none; margin: 6px 0; transition: filter 0.25s;}.var-slider__vertical-track { height: 100%; width: fit-content;}.var-slider__vertical-track-background { width: var(--slider-track-height); height: 100%; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__vertical-track-fill { width: 100%; bottom: 0;}.var-slider__vertical-thumb-label { transform: translateX(0) translateX(0) translateY(50%) rotate(-225deg) scale(0);}.var-slider__vertical-thumb-label span { transform: rotate(-135deg);}.var-slider__vertical-thumb-label--active { transform: translateX(20%) translateX(8px) translateY(50%) rotate(-225deg) scale(1);}.var-slider__vertical--error .var-slider__vertical-track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__vertical--error .var-slider__vertical-track-fill { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-label { background-color: var(--slider-error-color) !important;}

package/es/slider/style/index.mjs

@@ -1,5 +0,0 @@
-import '../../styles/common.css'
-import '../../form-details/formDetails.css'
-import '../../hover-overlay/hoverOverlay.css'
-import '../slider.css'
-import '../SliderSfc.css'