@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/chunk-SLYUQ67P.js

@@ -1,372 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Slider.ts
-var _vue = require('vue');
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var Slider = _vue.defineComponent.call(void 0, {
-  name: "TigerSlider",
-  props: {
-    /**
-     * Slider value (for v-model:value) - controlled mode
-     */
-    value: {
-      type: [Number, Array]
-    },
-    /**
-     * Default slider value - uncontrolled mode
-     */
-    defaultValue: {
-      type: [Number, Array]
-    },
-    /**
-     * Minimum value
-     * @default 0
-     */
-    min: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * Maximum value
-     * @default 100
-     */
-    max: {
-      type: Number,
-      default: 100
-    },
-    /**
-     * Step size for value changes
-     * @default 1
-     */
-    step: {
-      type: Number,
-      default: 1
-    },
-    /**
-     * Whether the slider is disabled
-     * @default false
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Marks to display (true for default marks or object with custom marks)
-     * @default false
-     */
-    marks: {
-      type: [Boolean, Object],
-      default: false
-    },
-    /**
-     * Show value tooltip on thumb
-     * @default true
-     */
-    tooltip: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Slider size
-     * @default 'md'
-     */
-    size: {
-      type: String,
-      default: "md"
-    },
-    /**
-     * Enable range selection mode
-     * @default false
-     */
-    range: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Additional CSS classes
-     */
-    className: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Custom styles
-     */
-    style: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: {
-    /**
-     * Emitted when value changes (for v-model:value)
-     */
-    "update:value": (value) => typeof value === "number" || Array.isArray(value),
-    /**
-     * Emitted when value changes
-     */
-    change: (value) => typeof value === "number" || Array.isArray(value)
-  },
-  setup(props, { emit, attrs }) {
-    const getInitialValue = () => {
-      if (props.value !== void 0) return props.value;
-      if (props.defaultValue !== void 0) return props.defaultValue;
-      return props.range ? [props.min, props.max] : props.min;
-    };
-    const internalValue = _vue.ref.call(void 0, getInitialValue());
-    const isDragging = _vue.ref.call(void 0, false);
-    const activeThumb = _vue.ref.call(void 0, null);
-    const showTooltip = _vue.ref.call(void 0, false);
-    const trackElement = _vue.ref.call(void 0, null);
-    _vue.watch.call(void 0, 
-      () => props.value,
-      (newValue) => {
-        if (newValue !== void 0) {
-          internalValue.value = newValue;
-        }
-      }
-    );
-    const getPercentage = (val) => _tigercatcore.sliderGetPercentage.call(void 0, val, props.min, props.max);
-    const getValueFromPosition = (clientX, el) => {
-      const rect = el.getBoundingClientRect();
-      return _tigercatcore.sliderGetValueFromPosition.call(void 0, 
-        clientX - rect.left,
-        rect.width,
-        props.min,
-        props.max,
-        props.step
-      );
-    };
-    const updateValue = (newValue) => {
-      internalValue.value = newValue;
-      emit("update:value", newValue);
-      emit("change", newValue);
-    };
-    const handleMove = (event, el) => {
-      if (props.disabled || !isDragging.value) return;
-      const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
-      const newValue = getValueFromPosition(clientX, el);
-      if (props.range && Array.isArray(internalValue.value)) {
-        const [minVal, maxVal] = internalValue.value;
-        if (activeThumb.value === "min") {
-          updateValue([Math.min(newValue, maxVal), maxVal]);
-        } else if (activeThumb.value === "max") {
-          updateValue([minVal, Math.max(newValue, minVal)]);
-        }
-      } else {
-        updateValue(newValue);
-      }
-    };
-    const handleStart = (event, thumb) => {
-      if (props.disabled) return;
-      event.preventDefault();
-      isDragging.value = true;
-      activeThumb.value = thumb;
-      showTooltip.value = props.tooltip;
-    };
-    const handleEnd = () => {
-      isDragging.value = false;
-      activeThumb.value = null;
-      showTooltip.value = false;
-    };
-    const trackClasses = _vue.computed.call(void 0, () => _tigercatcore.getSliderTrackClasses.call(void 0, props.size, props.disabled));
-    const rangeStyles = _vue.computed.call(void 0, () => {
-      if (props.range && Array.isArray(internalValue.value)) {
-        const [minVal, maxVal] = internalValue.value;
-        const left = getPercentage(minVal);
-        const width = getPercentage(maxVal) - left;
-        return {
-          left: `${left}%`,
-          width: `${width}%`
-        };
-      } else {
-        const val = typeof internalValue.value === "number" ? internalValue.value : internalValue.value[0];
-        return {
-          left: "0%",
-          width: `${getPercentage(val)}%`
-        };
-      }
-    });
-    const thumbClasses = _vue.computed.call(void 0, () => _tigercatcore.getSliderThumbClasses.call(void 0, props.size, props.disabled));
-    const tooltipClasses = _vue.computed.call(void 0, () => _tigercatcore.getSliderTooltipClasses.call(void 0, props.size));
-    const handleTrackMouseMove = (e) => {
-      if (trackElement.value) handleMove(e, trackElement.value);
-    };
-    const handleTrackTouchMove = (e) => {
-      if (trackElement.value) handleMove(e, trackElement.value);
-    };
-    _vue.watchEffect.call(void 0, (onCleanup) => {
-      if (isDragging.value) {
-        document.addEventListener("mousemove", handleTrackMouseMove);
-        document.addEventListener("mouseup", handleEnd);
-        document.addEventListener("touchmove", handleTrackTouchMove);
-        document.addEventListener("touchend", handleEnd);
-        onCleanup(() => {
-          document.removeEventListener("mousemove", handleTrackMouseMove);
-          document.removeEventListener("mouseup", handleEnd);
-          document.removeEventListener("touchmove", handleTrackTouchMove);
-          document.removeEventListener("touchend", handleEnd);
-        });
-      }
-    });
-    return () => {
-      const ariaLabel = attrs["aria-label"];
-      const ariaLabelledby = attrs["aria-labelledby"];
-      const ariaDescribedby = attrs["aria-describedby"];
-      const attrsWithoutClassStyle = { ...attrs };
-      const attrsClass = attrsWithoutClassStyle.class;
-      const attrsStyle = attrsWithoutClassStyle.style;
-      delete attrsWithoutClassStyle.class;
-      delete attrsWithoutClassStyle.style;
-      const createThumb = (value, thumbType = null) => {
-        const left = getPercentage(value);
-        const showThumbTooltip = showTooltip.value && (thumbType === activeThumb.value || thumbType === null);
-        let resolvedAriaLabel = ariaLabel;
-        if (props.range) {
-          if (typeof ariaLabel === "string") {
-            if (thumbType === "min") resolvedAriaLabel = `${ariaLabel} (min)`;
-            if (thumbType === "max") resolvedAriaLabel = `${ariaLabel} (max)`;
-          } else if (!ariaLabel && !ariaLabelledby) {
-            if (thumbType === "min") resolvedAriaLabel = "Minimum value";
-            if (thumbType === "max") resolvedAriaLabel = "Maximum value";
-          }
-        }
-        return _vue.h.call(void 0, 
-          "div",
-          {
-            class: thumbClasses.value,
-            style: { left: `${left}%` },
-            tabindex: props.disabled ? -1 : 0,
-            role: "slider",
-            "aria-valuenow": value,
-            "aria-valuemin": props.min,
-            "aria-valuemax": props.max,
-            "aria-orientation": "horizontal",
-            "aria-disabled": props.disabled,
-            "aria-label": resolvedAriaLabel,
-            "aria-labelledby": ariaLabelledby,
-            "aria-describedby": ariaDescribedby,
-            onMousedown: (e) => handleStart(e, thumbType),
-            onTouchstart: (e) => handleStart(e, thumbType),
-            onMouseenter: () => {
-              if (props.tooltip) showTooltip.value = true;
-            },
-            onMouseleave: () => {
-              if (!isDragging.value) showTooltip.value = false;
-            },
-            onKeydown: (e) => {
-              if (props.disabled) return;
-              const newValue = _tigercatcore.sliderGetKeyboardValue.call(void 0, 
-                e.key,
-                value,
-                props.min,
-                props.max,
-                props.step
-              );
-              if (newValue === null) return;
-              e.preventDefault();
-              if (props.range && Array.isArray(internalValue.value)) {
-                const [minVal, maxVal] = internalValue.value;
-                if (thumbType === "min") {
-                  updateValue([Math.min(newValue, maxVal), maxVal]);
-                } else if (thumbType === "max") {
-                  updateValue([minVal, Math.max(newValue, minVal)]);
-                }
-              } else {
-                updateValue(newValue);
-              }
-            }
-          },
-          showThumbTooltip && props.tooltip ? _vue.h.call(void 0, "div", { class: tooltipClasses.value }, value.toString()) : void 0
-        );
-      };
-      const createMarks = () => {
-        if (!props.marks) return null;
-        const marks = typeof props.marks === "boolean" ? {} : props.marks;
-        return _vue.h.call(void 0, 
-          "div",
-          { class: "absolute w-full top-full mt-2" },
-          Object.entries(marks).map(([key, label]) => {
-            const value = Number(key);
-            const left = getPercentage(value);
-            return _vue.h.call(void 0, 
-              "div",
-              {
-                class: "absolute text-xs text-[var(--tiger-text-muted,#6b7280)]",
-                style: { left: `${left}%`, transform: "translateX(-50%)" }
-              },
-              label
-            );
-          })
-        );
-      };
-      return _vue.h.call(void 0, 
-        "div",
-        {
-          ...attrsWithoutClassStyle,
-          class: [
-            _tigercatcore.classNames.call(void 0, _tigercatcore.sliderBaseClasses, props.disabled && "cursor-not-allowed", props.className),
-            attrsClass
-          ],
-          style: [props.style, attrsStyle]
-        },
-        [
-          // Track
-          _vue.h.call(void 0, 
-            "div",
-            {
-              ref: trackElement,
-              class: trackClasses.value,
-              onClick: (e) => {
-                if (props.disabled || !trackElement.value) return;
-                const newValue = getValueFromPosition(e.clientX, trackElement.value);
-                if (props.range && Array.isArray(internalValue.value)) {
-                  const [minVal, maxVal] = internalValue.value;
-                  const distToMin = Math.abs(newValue - minVal);
-                  const distToMax = Math.abs(newValue - maxVal);
-                  if (distToMin < distToMax) {
-                    updateValue([newValue, maxVal]);
-                  } else {
-                    updateValue([minVal, newValue]);
-                  }
-                } else {
-                  updateValue(newValue);
-                }
-              }
-            },
-            [
-              // Range
-              _vue.h.call(void 0, "div", {
-                class: _tigercatcore.sliderRangeClasses,
-                style: rangeStyles.value
-              }),
-              // Thumbs
-              props.range && Array.isArray(internalValue.value) ? [
-                createThumb(internalValue.value[0], "min"),
-                createThumb(internalValue.value[1], "max")
-              ] : createThumb(
-                typeof internalValue.value === "number" ? internalValue.value : internalValue.value[0]
-              )
-            ]
-          ),
-          // Marks
-          createMarks()
-        ]
-      );
-    };
-  }
-});
-var Slider_default = Slider;
-
-
-
-
-exports.Slider = Slider; exports.Slider_default = Slider_default;