origam 2.2.1 → 2.5.0

package/dist/src/composables/QrCode/qr-code.composable.js

@@ -0,0 +1,120 @@
+import qrcode from "qrcode-generator";
+import {
+  computed,
+  isRef,
+  toValue
+} from "vue";
+import {
+  QR_CODE_DEFAULT_ECC,
+  QR_CODE_DEFAULT_LOGO_PADDING,
+  QR_CODE_DEFAULT_LOGO_SIZE,
+  QR_CODE_DEFAULT_MARGIN,
+  QR_CODE_LRU_CAPACITY,
+  QR_CODE_OVERLAY_MAX_RATIO
+} from "../../consts/QrCode/qr-code.const.js";
+const matrixCache = /* @__PURE__ */ new Map();
+function buildMatrix(value, ecc) {
+  const cacheKey = `${ecc}::${value}`;
+  const hit = matrixCache.get(cacheKey);
+  if (hit !== void 0) {
+    matrixCache.delete(cacheKey);
+    matrixCache.set(cacheKey, hit);
+    return hit;
+  }
+  const qr = qrcode(0, ecc);
+  qr.addData(value);
+  qr.make();
+  const count = qr.getModuleCount();
+  const matrix = [];
+  for (let row = 0; row < count; row++) {
+    const line = [];
+    for (let col = 0; col < count; col++) {
+      line.push(qr.isDark(row, col));
+    }
+    matrix.push(line);
+  }
+  matrixCache.set(cacheKey, matrix);
+  if (matrixCache.size > QR_CODE_LRU_CAPACITY) {
+    const oldest = matrixCache.keys().next().value;
+    if (oldest !== void 0) {
+      matrixCache.delete(oldest);
+    }
+  }
+  return matrix;
+}
+function escapeXmlAttr(raw) {
+  return raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function buildSvg(matrix, options) {
+  const count = matrix.length;
+  const viewSize = count + options.margin * 2;
+  const fg = escapeXmlAttr(options.foreground);
+  const bg = options.background;
+  const radiusAttr = options.cornerRadius > 0 ? ` rx="${options.cornerRadius}" ry="${options.cornerRadius}"` : "";
+  let rects = "";
+  for (let row = 0; row < count; row++) {
+    for (let col = 0; col < count; col++) {
+      if (matrix[row][col]) {
+        const x = col + options.margin;
+        const y = row + options.margin;
+        rects += `<rect x="${x}" y="${y}" width="1" height="1" fill="${fg}"${radiusAttr}/>`;
+      }
+    }
+  }
+  const backgroundRect = bg && bg !== "transparent" ? `<rect x="0" y="0" width="${viewSize}" height="${viewSize}" fill="${escapeXmlAttr(bg)}"/>` : "";
+  let logoMarkup = "";
+  if (options.logo && options.logo.src) {
+    const ratio = options.logo.size ?? QR_CODE_DEFAULT_LOGO_SIZE;
+    const padding = options.logo.padding ?? QR_CODE_DEFAULT_LOGO_PADDING;
+    const logoBg = options.logo.background ?? (bg && bg !== "transparent" ? bg : "#ffffff");
+    const logoBoxSize = count * ratio;
+    const logoX = options.margin + (count - logoBoxSize) / 2;
+    const logoY = options.margin + (count - logoBoxSize) / 2;
+    const paddingUnits = padding / 16;
+    const bdX = logoX - paddingUnits;
+    const bdY = logoY - paddingUnits;
+    const bdSize = logoBoxSize + paddingUnits * 2;
+    logoMarkup += `<rect x="${bdX}" y="${bdY}" width="${bdSize}" height="${bdSize}" fill="${escapeXmlAttr(logoBg)}"/>`;
+    logoMarkup += `<image href="${escapeXmlAttr(options.logo.src)}" x="${logoX}" y="${logoY}" width="${logoBoxSize}" height="${logoBoxSize}" preserveAspectRatio="xMidYMid meet"/>`;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${viewSize} ${viewSize}" shape-rendering="crispEdges" preserveAspectRatio="xMidYMid meet">${backgroundRect}${rects}${logoMarkup}</svg>`;
+}
+export function __clearQrCodeCache() {
+  matrixCache.clear();
+}
+export function useQrCode(value, options = {}) {
+  const normalisedValue = computed(() => {
+    const resolved = isRef(value) || typeof value === "function" ? toValue(value) : value;
+    return typeof resolved === "string" ? resolved : String(resolved ?? "");
+  });
+  const normalisedOptions = computed(() => {
+    const raw = isRef(options) || typeof options === "function" ? toValue(options) : options;
+    const opts = raw ?? {};
+    const ratio = opts.logo?.size ?? QR_CODE_DEFAULT_LOGO_SIZE;
+    if (opts.logo?.src && ratio > QR_CODE_OVERLAY_MAX_RATIO && typeof console !== "undefined") {
+      console.warn(
+        `[origam] useQrCode: logo size ${ratio} exceeds the recommended max (${QR_CODE_OVERLAY_MAX_RATIO}). Scanners may fail to decode the matrix; consider increasing error-correction to "H" or shrinking the logo.`
+      );
+    }
+    return {
+      errorCorrectionLevel: opts.errorCorrectionLevel ?? QR_CODE_DEFAULT_ECC,
+      foreground: opts.foreground ?? "currentColor",
+      background: opts.background ?? "transparent",
+      margin: typeof opts.margin === "number" ? opts.margin : QR_CODE_DEFAULT_MARGIN,
+      cornerRadius: typeof opts.cornerRadius === "number" ? opts.cornerRadius : 0,
+      logo: opts.logo
+    };
+  });
+  const modules = computed(
+    () => buildMatrix(normalisedValue.value, normalisedOptions.value.errorCorrectionLevel)
+  );
+  const size = computed(() => modules.value.length);
+  const svg = computed(
+    () => buildSvg(modules.value, normalisedOptions.value)
+  );
+  return {
+    svg,
+    modules,
+    size
+  };
+}

package/dist/src/composables/Responsive/aspect.composable.cjs

@@ -5,12 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useAspectRatio = useAspectRatio;
 var _vue = require("vue");
+var _consts = require("../../consts/index.cjs");
 function useAspectRatio(props) {
   const aspectStyles = (0, _vue.computed)(() => {
     const aspectRatio = [];
-    let ratio = window.innerWidth / window.innerHeight;
+    let ratio;
     if (props.aspectRatio) {
       ratio = eval(props.aspectRatio);
+    } else if (_consts.IN_BROWSER) {
+      ratio = window.innerWidth / window.innerHeight;
+    } else {
+      return aspectRatio;
     }
     if (ratio) {
       aspectRatio.push(`padding-block-end: ${String(1 / ratio * 100)}%`);

package/dist/src/composables/Responsive/aspect.composable.d.ts

@@ -1,5 +1,15 @@
 /*********************************************************
  * useAspectRatio
+ *
+ * SSR safety
+ * ──────────
+ * During SSR (`!IN_BROWSER`) we cannot read `window.innerWidth/Height`.
+ * When the consumer passes an explicit `aspectRatio` prop the ratio is
+ * derived from it (no DOM needed). Otherwise we return an empty styles
+ * array — the layout collapses to its natural box on the server, then
+ * the first browser-side computed access fills in the padding-bottom
+ * value. The component's intrinsic height takes over after hydration,
+ * so the difference is invisible to the user.
  ********************************************************/
 export declare function useAspectRatio(props: {
     aspectRatio?: string | number;

package/dist/src/composables/Responsive/aspect.composable.js

@@ -1,10 +1,15 @@
 import { computed } from "vue";
+import { IN_BROWSER } from "../../consts/index.js";
 export function useAspectRatio(props) {
   const aspectStyles = computed(() => {
     const aspectRatio = [];
-    let ratio = window.innerWidth / window.innerHeight;
+    let ratio;
     if (props.aspectRatio) {
       ratio = eval(props.aspectRatio);
+    } else if (IN_BROWSER) {
+      ratio = window.innerWidth / window.innerHeight;
+    } else {
+      return aspectRatio;
     }
     if (ratio) {
       aspectRatio.push(`padding-block-end: ${String(1 / ratio * 100)}%`);

package/dist/src/composables/Sheet/sheetSwipe.composable.cjs

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "DEFAULT_SHEET_SNAP_POINTS", {
   enumerable: true,
   get: function () {
-    return _consts.DEFAULT_SHEET_SNAP_POINTS;
+    return _sheetSnapPoints.DEFAULT_SHEET_SNAP_POINTS;
   }
 });
 exports.useSheetSwipe = useSheetSwipe;
 var _vue = require("vue");
-var _consts = require("../../consts/index.cjs");
-const FAST_FLICK_THRESHOLD = 0.5;
+var _sheetSnapPoints = require("../../consts/Sheet/sheet-snap-points.const.cjs");
+var _sheetSwipe = require("../../consts/Sheet/sheet-swipe.const.cjs");
 function resolveHeightPx(height) {
   if (typeof height === "number") return height;
   if (typeof window === "undefined") return 0;
@@ -54,7 +54,7 @@ function useSheetSwipe(options) {
     persistent
   } = options;
   const sortedSnaps = (0, _vue.computed)(() => {
-    const src = snapPoints?.value ?? _consts.DEFAULT_SHEET_SNAP_POINTS;
+    const src = snapPoints?.value ?? _sheetSnapPoints.DEFAULT_SHEET_SNAP_POINTS;
     return [...src].sort((a, b) => resolveHeightPx(a.height) - resolveHeightPx(b.height));
   });
   const currentSnap = (0, _vue.ref)(defaultSnap?.value ?? "half");
@@ -78,7 +78,7 @@ function useSheetSwipe(options) {
     const goingUp = velocity > 0;
     const goingDown = velocity < 0;
     const speed = Math.abs(velocity);
-    if (speed >= FAST_FLICK_THRESHOLD) {
+    if (speed >= _sheetSwipe.SHEET_FAST_FLICK_THRESHOLD) {
       const nextIdx = goingUp ? Math.min(snaps.length - 1, currentIdx + 1) : goingDown ? Math.max(0, currentIdx - 1) : currentIdx;
       const candidate = snaps[nextIdx];
       return enforcePersistent(candidate.id, snaps);

package/dist/src/composables/Sheet/sheetSwipe.composable.d.ts

@@ -1,5 +1,5 @@
 import type { ISheetSwipeOptions, ISheetSwipeReturn } from '../../interfaces';
-export { DEFAULT_SHEET_SNAP_POINTS } from '../../consts';
+export { DEFAULT_SHEET_SNAP_POINTS } from '../../consts/Sheet/sheet-snap-points.const';
 /**
  * Bottom-sheet swipe gesture composable.
  *

package/dist/src/composables/Sheet/sheetSwipe.composable.js

@@ -6,9 +6,9 @@ import {
   shallowRef,
   watch
 } from "vue";
-import { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/index.js";
-export { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/index.js";
-const FAST_FLICK_THRESHOLD = 0.5;
+import { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/Sheet/sheet-snap-points.const.js";
+import { SHEET_FAST_FLICK_THRESHOLD as FAST_FLICK_THRESHOLD } from "../../consts/Sheet/sheet-swipe.const.js";
+export { DEFAULT_SHEET_SNAP_POINTS } from "../../consts/Sheet/sheet-snap-points.const.js";
 function resolveHeightPx(height) {
   if (typeof height === "number") return height;
   if (typeof window === "undefined") return 0;

package/dist/src/composables/SliderField/slider-field.composable.cjs

@@ -3,10 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSlider = useSlider;
 exports.useSteps = useSteps;
-var _consts = require("../../consts/index.cjs");
-var _enums = require("../../enums/index.cjs");
 var _utils = require("../../utils/index.cjs");
 var _vue = require("vue");
 function useSteps(props) {
@@ -38,214 +35,4 @@ function useSteps(props) {
     decimals,
     roundValue
   };
-}
-function useSlider({
-  origamSliderFieldTrackRef,
-  origamSliderFieldThumbRef,
-  origamSliderFieldStartThumbRef,
-  origamSliderFieldStopThumbRef,
-  props,
-  steps,
-  onSliderStart,
-  onSliderMove,
-  onSliderEnd,
-  getActiveThumb
-}) {
-  const isReversed = (0, _vue.toRef)(props, "reverse");
-  const isVertical = (0, _vue.computed)(() => {
-    return props.direction === _enums.DIRECTION.VERTICAL;
-  });
-  const indexFromEnd = (0, _vue.computed)(() => {
-    return isVertical.value !== isReversed.value;
-  });
-  const {
-    min,
-    max,
-    step,
-    decimals,
-    roundValue
-  } = steps;
-  const tickSize = (0, _vue.computed)(() => {
-    if (typeof props.tickSize === "number") {
-      return (0, _utils.int)(props.tickSize);
-    }
-    return 2;
-  });
-  const showTicks = (0, _vue.ref)(props.showTicks);
-  const ticks = (0, _vue.ref)(props.ticks);
-  const numTicks = (0, _vue.computed)(() => {
-    return (max.value - min.value) / step.value;
-  });
-  const parsedTicks = (0, _vue.computed)(() => {
-    if (!showTicks.value) return [];
-    if (!ticks.value) {
-      return numTicks.value !== Infinity ? (0, _utils.createRange)(numTicks.value + 1).map(t => {
-        const value = min.value + t * step.value;
-        return {
-          value,
-          position: onPosition(value)
-        };
-      }) : [];
-    }
-    if (Array.isArray(ticks.value)) return ticks.value.map(t => ({
-      value: t,
-      position: onPosition(t),
-      label: t.toString()
-    }));
-    if (typeof ticks.value === "object" && ticks.value !== null) {
-      return Object.keys(ticks.value).map(key => {
-        return {
-          value: parseFloat(key),
-          position: onPosition(parseFloat(key)),
-          label: ticks.value[key]
-        };
-      });
-    }
-    return [];
-  });
-  const hasTicksLabels = (0, _vue.computed)(() => {
-    return parsedTicks.value.some(({
-      label
-    }) => !!label);
-  });
-  const disabled = (0, _vue.toRef)(props, "disabled");
-  const readonly = (0, _vue.toRef)(props, "readonly");
-  const error = (0, _vue.toRef)(props, "error");
-  const color = (0, _vue.toRef)(props, "color");
-  const bgColor = (0, _vue.toRef)(props, "bgColor");
-  const hoverColor = (0, _vue.toRef)(props, "hoverColor");
-  const hoverBgColor = (0, _vue.toRef)(props, "hoverBgColor");
-  const activeColor = (0, _vue.toRef)(props, "activeColor");
-  const activeBgColor = (0, _vue.toRef)(props, "activeBgColor");
-  const elevation = (0, _vue.toRef)(props, "elevation");
-  const rounded = (0, _vue.toRef)(props, "rounded");
-  const border = (0, _vue.toRef)(props, "border");
-  const ripple = (0, _vue.toRef)(props, "ripple");
-  const activeThumbRef = (0, _vue.ref)();
-  const mousePressed = (0, _vue.shallowRef)(false);
-  const startOffset = (0, _vue.shallowRef)(0);
-  const parseMouseMove = e => {
-    const start = isVertical.value ? _enums.BLOCK.TOP : _enums.INLINE.LEFT;
-    const length = isVertical.value ? _enums.DIMENSIONS.HEIGHT : _enums.DIMENSIONS.WIDTH;
-    const position = isVertical.value ? _enums.CLIENT_POSITION.Y : _enums.CLIENT_POSITION.X;
-    if (!origamSliderFieldTrackRef.value) return 0;
-    const {
-      [start]: trackStart,
-      [length]: trackLength
-    } = origamSliderFieldTrackRef.value.$el.getBoundingClientRect();
-    const clickOffset = (0, _utils.getPosition)(e, position);
-    let clickPos = (0, _utils.clamp)((clickOffset - trackStart - startOffset.value) / trackLength, 0, 1) || 0;
-    if (indexFromEnd.value) clickPos = 1 - clickPos;
-    return roundValue(min.value + clickPos * (max.value - min.value));
-  };
-  const onStop = e => {
-    onSliderEnd({
-      value: parseMouseMove(e)
-    });
-    mousePressed.value = false;
-    startOffset.value = 0;
-  };
-  const onStart = e => {
-    activeThumbRef.value = getActiveThumb(e);
-    if (!activeThumbRef.value) return;
-    activeThumbRef.value.focus();
-    mousePressed.value = true;
-    if (activeThumbRef.value.contains(e.target)) {
-      startOffset.value = (0, _utils.getSliderFieldOffset)(e, activeThumbRef.value, props.direction ?? _enums.DIRECTION.VERTICAL);
-    } else {
-      startOffset.value = 0;
-      onSliderMove({
-        value: parseMouseMove(e)
-      });
-    }
-    onSliderStart({
-      value: parseMouseMove(e)
-    });
-  };
-  const moveListenerOptions = {
-    passive: true,
-    capture: true
-  };
-  const onMouseMove = e => {
-    onSliderMove({
-      value: parseMouseMove(e)
-    });
-  };
-  const onSliderMouseUp = e => {
-    e.stopPropagation();
-    e.preventDefault();
-    onStop(e);
-    window.removeEventListener("mousemove", onMouseMove, moveListenerOptions);
-    window.removeEventListener("mouseup", onSliderMouseUp);
-  };
-  const onSliderTouchend = e => {
-    onStop(e);
-    window.removeEventListener("touchmove", onMouseMove, moveListenerOptions);
-    e.target?.removeEventListener("touchend", onSliderTouchend);
-  };
-  const onSliderTouchstart = e => {
-    if (readonly.value) return;
-    onStart(e);
-    window.addEventListener("touchmove", onMouseMove, moveListenerOptions);
-    if (e.target) {
-      e.target.addEventListener("touchend", onSliderTouchend, {
-        passive: false
-      });
-    }
-  };
-  const onSliderMousedown = e => {
-    if (readonly.value) return;
-    e.preventDefault();
-    onStart(e);
-    window.addEventListener("mousemove", onMouseMove, moveListenerOptions);
-    window.addEventListener("mouseup", onSliderMouseUp, {
-      passive: false
-    });
-  };
-  const onPosition = val => {
-    const percentage = (val - min.value) / (max.value - min.value) * 100;
-    return (0, _utils.clamp)(isNaN(percentage) ? 0 : percentage, 0, 100);
-  };
-  const data = {
-    activeThumbRef,
-    decimals,
-    disabled,
-    readonly,
-    color,
-    hoverColor,
-    activeColor,
-    bgColor,
-    hoverBgColor,
-    activeBgColor,
-    error,
-    elevation,
-    rounded,
-    border,
-    ripple,
-    hasLabels: hasTicksLabels,
-    isReversed,
-    indexFromEnd,
-    min,
-    max,
-    mousePressed,
-    numTicks,
-    onSliderMousedown,
-    onSliderTouchstart,
-    parsedTicks,
-    parseMouseMove,
-    position: onPosition,
-    roundValue,
-    showTicks,
-    startOffset,
-    step,
-    ticks,
-    tickSize,
-    origamSliderFieldTrackRef,
-    origamSliderFieldThumbRef,
-    origamSliderFieldStartThumbRef,
-    origamSliderFieldStopThumbRef,
-    isVertical
-  };
-  (0, _vue.provide)(_consts.ORIGAM_SLIDER_FIELD_KEY, data);
-  return data;
 }

package/dist/src/composables/SliderField/slider-field.composable.d.ts

@@ -1,6 +1,16 @@
-import type { ISliderField, ISliderFieldProps, ISliderFieldProvide } from '../../interfaces';
+import type { ISliderFieldProps } from '../../interfaces';
 /*********************************************************
  * useSteps
+ *
+ * @description
+ * Pure-function stepping math used by `<OrigamSliderField>`.
+ * Returns reactive min / max / step / decimals refs and a
+ * `roundValue` helper that snaps any raw number to the
+ * nearest valid step (clamped to [min, max]).
+ *
+ * The browser owns drag now — `useSlider` (the legacy JS
+ * drag pipeline) was deleted with the native `<input
+ * type="range">` migration. This file used to be 280 LOC.
  ********************************************************/
 export declare function useSteps(props: ISliderFieldProps): {
     min: import("vue").ComputedRef<number>;
@@ -9,7 +19,3 @@ export declare function useSteps(props: ISliderFieldProps): {
     decimals: import("vue").ComputedRef<number>;
     roundValue: (value: string | number) => number;
 };
-/*********************************************************
- * useSlider
- ********************************************************/
-export declare function useSlider({ origamSliderFieldTrackRef, origamSliderFieldThumbRef, origamSliderFieldStartThumbRef, origamSliderFieldStopThumbRef, props, steps, onSliderStart, onSliderMove, onSliderEnd, getActiveThumb }: ISliderField): ISliderFieldProvide;

package/dist/src/composables/SliderField/slider-field.composable.js

@@ -1,7 +1,5 @@
-import { ORIGAM_SLIDER_FIELD_KEY } from "../../consts/index.js";
-import { BLOCK, CLIENT_POSITION, DIMENSIONS, DIRECTION, INLINE } from "../../enums/index.js";
-import { clamp, createRange, getDecimals, getPosition, getSliderFieldOffset, int } from "../../utils/index.js";
-import { computed, provide, ref, shallowRef, toRef } from "vue";
+import { clamp, getDecimals } from "../../utils/index.js";
+import { computed } from "vue";
 export function useSteps(props) {
   const min = computed(() => {
     return parseFloat(props.min ?? 0);
@@ -26,190 +24,3 @@ export function useSteps(props) {
   };
   return { min, max, step, decimals, roundValue };
 }
-export function useSlider({
-  origamSliderFieldTrackRef,
-  origamSliderFieldThumbRef,
-  origamSliderFieldStartThumbRef,
-  origamSliderFieldStopThumbRef,
-  props,
-  steps,
-  onSliderStart,
-  onSliderMove,
-  onSliderEnd,
-  getActiveThumb
-}) {
-  const isReversed = toRef(props, "reverse");
-  const isVertical = computed(() => {
-    return props.direction === DIRECTION.VERTICAL;
-  });
-  const indexFromEnd = computed(() => {
-    return isVertical.value !== isReversed.value;
-  });
-  const { min, max, step, decimals, roundValue } = steps;
-  const tickSize = computed(() => {
-    if (typeof props.tickSize === "number") {
-      return int(props.tickSize);
-    }
-    return 2;
-  });
-  const showTicks = ref(props.showTicks);
-  const ticks = ref(props.ticks);
-  const numTicks = computed(() => {
-    return (max.value - min.value) / step.value;
-  });
-  const parsedTicks = computed(() => {
-    if (!showTicks.value) return [];
-    if (!ticks.value) {
-      return numTicks.value !== Infinity ? createRange(numTicks.value + 1).map((t) => {
-        const value = min.value + t * step.value;
-        return {
-          value,
-          position: onPosition(value)
-        };
-      }) : [];
-    }
-    if (Array.isArray(ticks.value)) return ticks.value.map((t) => ({
-      value: t,
-      position: onPosition(t),
-      label: t.toString()
-    }));
-    if (typeof ticks.value === "object" && ticks.value !== null) {
-      return Object.keys(ticks.value).map((key) => {
-        return {
-          value: parseFloat(key),
-          position: onPosition(parseFloat(key)),
-          label: ticks.value[key]
-        };
-      });
-    }
-    return [];
-  });
-  const hasTicksLabels = computed(() => {
-    return parsedTicks.value.some(({ label }) => !!label);
-  });
-  const disabled = toRef(props, "disabled");
-  const readonly = toRef(props, "readonly");
-  const error = toRef(props, "error");
-  const color = toRef(props, "color");
-  const bgColor = toRef(props, "bgColor");
-  const hoverColor = toRef(props, "hoverColor");
-  const hoverBgColor = toRef(props, "hoverBgColor");
-  const activeColor = toRef(props, "activeColor");
-  const activeBgColor = toRef(props, "activeBgColor");
-  const elevation = toRef(props, "elevation");
-  const rounded = toRef(props, "rounded");
-  const border = toRef(props, "border");
-  const ripple = toRef(props, "ripple");
-  const activeThumbRef = ref();
-  const mousePressed = shallowRef(false);
-  const startOffset = shallowRef(0);
-  const parseMouseMove = (e) => {
-    const start = isVertical.value ? BLOCK.TOP : INLINE.LEFT;
-    const length = isVertical.value ? DIMENSIONS.HEIGHT : DIMENSIONS.WIDTH;
-    const position = isVertical.value ? CLIENT_POSITION.Y : CLIENT_POSITION.X;
-    if (!origamSliderFieldTrackRef.value) return 0;
-    const {
-      [start]: trackStart,
-      [length]: trackLength
-    } = origamSliderFieldTrackRef.value.$el.getBoundingClientRect();
-    const clickOffset = getPosition(e, position);
-    let clickPos = clamp((clickOffset - trackStart - startOffset.value) / trackLength, 0, 1) || 0;
-    if (indexFromEnd.value) clickPos = 1 - clickPos;
-    return roundValue(min.value + clickPos * (max.value - min.value));
-  };
-  const onStop = (e) => {
-    onSliderEnd({ value: parseMouseMove(e) });
-    mousePressed.value = false;
-    startOffset.value = 0;
-  };
-  const onStart = (e) => {
-    activeThumbRef.value = getActiveThumb(e);
-    if (!activeThumbRef.value) return;
-    activeThumbRef.value.focus();
-    mousePressed.value = true;
-    if (activeThumbRef.value.contains(e.target)) {
-      startOffset.value = getSliderFieldOffset(e, activeThumbRef.value, props.direction ?? DIRECTION.VERTICAL);
-    } else {
-      startOffset.value = 0;
-      onSliderMove({ value: parseMouseMove(e) });
-    }
-    onSliderStart({ value: parseMouseMove(e) });
-  };
-  const moveListenerOptions = { passive: true, capture: true };
-  const onMouseMove = (e) => {
-    onSliderMove({ value: parseMouseMove(e) });
-  };
-  const onSliderMouseUp = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    onStop(e);
-    window.removeEventListener("mousemove", onMouseMove, moveListenerOptions);
-    window.removeEventListener("mouseup", onSliderMouseUp);
-  };
-  const onSliderTouchend = (e) => {
-    onStop(e);
-    window.removeEventListener("touchmove", onMouseMove, moveListenerOptions);
-    e.target?.removeEventListener("touchend", onSliderTouchend);
-  };
-  const onSliderTouchstart = (e) => {
-    if (readonly.value) return;
-    onStart(e);
-    window.addEventListener("touchmove", onMouseMove, moveListenerOptions);
-    if (e.target) {
-      e.target.addEventListener("touchend", onSliderTouchend, { passive: false });
-    }
-  };
-  const onSliderMousedown = (e) => {
-    if (readonly.value) return;
-    e.preventDefault();
-    onStart(e);
-    window.addEventListener("mousemove", onMouseMove, moveListenerOptions);
-    window.addEventListener("mouseup", onSliderMouseUp, { passive: false });
-  };
-  const onPosition = (val) => {
-    const percentage = (val - min.value) / (max.value - min.value) * 100;
-    return clamp(isNaN(percentage) ? 0 : percentage, 0, 100);
-  };
-  const data = {
-    activeThumbRef,
-    decimals,
-    disabled,
-    readonly,
-    color,
-    hoverColor,
-    activeColor,
-    bgColor,
-    hoverBgColor,
-    activeBgColor,
-    error,
-    elevation,
-    rounded,
-    border,
-    ripple,
-    hasLabels: hasTicksLabels,
-    isReversed,
-    indexFromEnd,
-    min,
-    max,
-    mousePressed,
-    numTicks,
-    onSliderMousedown,
-    onSliderTouchstart,
-    parsedTicks,
-    parseMouseMove,
-    position: onPosition,
-    roundValue,
-    showTicks,
-    startOffset,
-    step,
-    ticks,
-    tickSize,
-    origamSliderFieldTrackRef,
-    origamSliderFieldThumbRef,
-    origamSliderFieldStartThumbRef,
-    origamSliderFieldStopThumbRef,
-    isVertical
-  };
-  provide(ORIGAM_SLIDER_FIELD_KEY, data);
-  return data;
-}