@varlet/ui 3.5.1 → 3.5.2

package/es/slider/Slider.mjs

@@ -0,0 +1,566 @@
+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 } from "vue";
+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

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

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

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

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