@onereach/ui-components 8.5.0 → 8.5.1-beta.3662.0

package/dist/bundled/v3/components/OrRangeSliderV3-f81b142c.js

@@ -0,0 +1,309 @@
+import { a as SliderOrientation, S as SliderColor } from './OrSliderV3-f42f08d5.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, withCtx, toDisplayString } from 'vue';
+import { u as useProxyModelValue, $ as useElementBounding, d as useElementHover, a1 as useDraggable, a2 as clamp } from './OrBottomSheetV3-199292db.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { s as script$1 } from './OrTooltipV3-7d835c0c.js';
+
+const RangeSlider = [
+// Interactivity
+'interactivity-default'];
+const RangeSliderOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Layout
+  'layout-column',
+  // Box
+  'w-full'],
+  [SliderOrientation.Vertical]: [
+  // Layout
+  'layout-row',
+  // Box
+  'h-full']
+};
+const RangeSliderRail = [
+// Interactivity
+'interactivity-click',
+// Shape
+'rounded-full',
+// Theme
+'theme-background-disabled', 'dark:theme-background-disabled-dark'];
+const RangeSliderRailOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Layout
+  'layout-row',
+  // Box
+  'w-full', 'h-xs', 'mx-none', 'my-md+'],
+  [SliderOrientation.Vertical]: [
+  // Layout
+  'layout-column-reverse items-center', 'w-xs', 'h-full', 'mx-md+', 'my-none']
+};
+const RangeSliderOffset = [];
+const RangeSliderOffsetOrientations = {
+  [SliderOrientation.Horizontal]: [],
+  [SliderOrientation.Vertical]: []
+};
+const RangeSliderTrack = [
+// Box
+'w-full', 'h-full',
+// Shape
+'rounded-full'];
+const RangeSliderTrackColors = {
+  [SliderColor.Primary]: [
+  // Theme
+  'theme-background-primary', 'dark:theme-background-primary-dark'],
+  [SliderColor.Secondary]: [
+  // Theme
+  'theme-background-secondary', 'dark:theme-background-secondary-dark']
+};
+const RangeSliderThumb = [
+// Layout
+'shrink-0',
+// Box
+'w-[20px]', 'h-[20px]', '-mx-[10px]', '-my-[10px]',
+// Shape
+'rounded-full',
+// Theme
+'bg-white dark:bg-black'];
+const RangeSliderThumbColors = {
+  [SliderColor.Primary]: [
+  // Theme
+  'theme-border-4-primary', 'dark:theme-border-4-primary-dark',
+  // Theme (enabled, hover)
+  'hover:enabled:theme-background-primary', 'dark:hover:enabled:theme-background-primary-dark',
+  // Theme (enabled, active)
+  'active:enabled:theme-background-primary', 'dark:active:enabled:theme-background-primary-dark', 'active:enabled:theme-outline-10-primary', 'dark:active:enabled:theme-outline-10-primary-dark'],
+  [SliderColor.Secondary]: [
+  // Theme
+  'theme-border-4-secondary', 'dark:theme-border-4-secondary-dark',
+  // Theme (enabled, hover)
+  'hover:enabled:theme-background-secondary', 'dark:hover:enabled:theme-background-secondary-dark',
+  // Theme (enabled, active)
+  'active:enabled:theme-background-secondary', 'dark:active:enabled:theme-background-secondary-dark', 'active:enabled:theme-outline-10-secondary', 'dark:active:enabled:theme-outline-10-secondary-dark']
+};
+const RangeSliderLabel = [];
+const RangeSliderLabelOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Layout
+  'layout-row',
+  // Box
+  'w-full'],
+  [SliderOrientation.Vertical]: [
+  // Layout
+  'layout-column-reverse items-center',
+  // Box
+  'h-full']
+};
+const RangeSliderLabelMark = [
+// Typography
+'typography-caption-regular',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+
+var script = defineComponent({
+  components: {
+    OrTooltip: script$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
+    minValue: {
+      type: Number,
+      default: 0
+    },
+    maxValue: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    color: {
+      type: String,
+      default: SliderColor.Primary
+    },
+    orientation: {
+      type: String,
+      default: SliderOrientation.Horizontal
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const rail = ref();
+    const thumbFrom = ref();
+    const thumbTo = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-range-slider-v3', ...RangeSlider, ...RangeSliderOrientations[props.orientation]]);
+    const railStyles = computed(() => [...RangeSliderRail, ...RangeSliderRailOrientations[props.orientation]]);
+    const offsetStyles = computed(() => [...RangeSliderOffset, ...RangeSliderOffsetOrientations[props.orientation]]);
+    const offsetComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValueFrom.value * 100}%`
+    }));
+    const trackStyles = computed(() => [...RangeSliderTrack, ...RangeSliderTrackColors[props.color]]);
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${(internalModelValueTo.value - internalModelValueFrom.value) * 100}%`
+    }));
+    const thumbStyles = computed(() => [...RangeSliderThumb, ...RangeSliderThumbColors[props.color]]);
+    const labelStyles = computed(() => [...RangeSliderLabel, ...RangeSliderLabelOrientations[props.orientation]]);
+    const labelMarkStyles = computed(() => [...RangeSliderLabelMark]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: computed(() => [props.minValue, props.maxValue])
+    });
+    const internalModelValueFrom = computed({
+      get: () => {
+        return (proxyModelValue.value[0] - props.minValue) / (props.maxValue - props.minValue);
+      },
+      set: value => {
+        proxyModelValue.value = [Math.round(value * (props.maxValue - props.minValue) + props.minValue), Math.round(internalModelValueTo.value * (props.maxValue - props.minValue) + props.minValue)];
+      }
+    });
+    const internalModelValueTo = computed({
+      get: () => {
+        return (proxyModelValue.value[1] - props.minValue) / (props.maxValue - props.minValue);
+      },
+      set: value => {
+        proxyModelValue.value = [Math.round(internalModelValueFrom.value * (props.maxValue - props.minValue) + props.minValue), Math.round(value * (props.maxValue - props.minValue) + props.minValue)];
+      }
+    });
+    const railBoundingBox = useElementBounding(rail);
+    const selectedControl = ref();
+    // Handlers
+    function onDrag(position, event) {
+      if (props.disabled) {
+        return;
+      }
+      const totalWidth = railBoundingBox.width.value;
+      const totalHeight = railBoundingBox.height.value;
+      if (selectedControl.value === 'from') {
+        internalModelValueFrom.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, internalModelValueTo.value * totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, internalModelValueTo.value * totalHeight) / totalHeight;
+      } else {
+        internalModelValueTo.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, internalModelValueFrom.value * totalWidth, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), internalModelValueFrom.value * totalHeight, totalHeight) / totalHeight;
+      }
+    }
+    // Effects
+    const isHovering = useElementHover(rail);
+    const {
+      isDragging
+    } = useDraggable(rail, {
+      onStart: (position, event) => {
+        switch (event.target) {
+          case thumbFrom.value:
+            selectedControl.value = 'from';
+            break;
+          case thumbTo.value:
+            selectedControl.value = 'to';
+            break;
+          default:
+            selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+        }
+        onDrag(position, event);
+      },
+      onMove: onDrag,
+      onEnd: onDrag
+    });
+    return {
+      root,
+      rail,
+      thumbFrom,
+      thumbTo,
+      rootStyles,
+      railStyles,
+      offsetStyles,
+      offsetComputedStyles,
+      trackStyles,
+      trackComputedStyles,
+      thumbStyles,
+      labelStyles,
+      labelMarkStyles,
+      proxyModelValue,
+      internalModelValueFrom,
+      internalModelValueTo,
+      selectedControl,
+      isHovering,
+      isDragging
+    };
+  }
+});
+
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = ["disabled"];
+const _hoisted_6 = ["disabled"];
+const _hoisted_7 = /*#__PURE__*/createElementVNode("div", {
+  class: /*#__PURE__*/normalizeClass(['grow'])
+}, null, -1 /* HOISTED */);
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrTooltip = resolveComponent("OrTooltip");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    disabled: _ctx.disabled
+  }, [createElementVNode("div", {
+    ref: "rail",
+    class: normalizeClass(_ctx.railStyles),
+    disabled: _ctx.disabled
+  }, [createElementVNode("div", {
+    class: normalizeClass(_ctx.offsetStyles),
+    style: normalizeStyle(_ctx.offsetComputedStyles),
+    disabled: _ctx.disabled
+  }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_3), createVNode(_component_OrTooltip, {
+    class: normalizeClass(['relative', 'z-10']),
+    "is-open": _ctx.isHovering || _ctx.isDragging,
+    content: String(_ctx.proxyModelValue[0]),
+    placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
+    offset: 8,
+    "external-control": true
+  }, {
+    default: withCtx(() => [createElementVNode("div", {
+      ref: "thumbFrom",
+      class: normalizeClass(_ctx.thumbStyles),
+      disabled: _ctx.disabled
+    }, null, 10 /* CLASS, PROPS */, _hoisted_4)]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["is-open", "content", "placement"]), createElementVNode("div", {
+    class: normalizeClass(_ctx.trackStyles),
+    style: normalizeStyle(_ctx.trackComputedStyles),
+    disabled: _ctx.disabled
+  }, null, 14 /* CLASS, STYLE, PROPS */, _hoisted_5), createVNode(_component_OrTooltip, {
+    class: normalizeClass(['relative', 'z-10']),
+    "is-open": _ctx.isHovering || _ctx.isDragging,
+    content: String(_ctx.proxyModelValue[1]),
+    placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
+    offset: 8,
+    "external-control": true
+  }, {
+    default: withCtx(() => [createElementVNode("div", {
+      ref: "thumbTo",
+      class: normalizeClass(_ctx.thumbStyles),
+      disabled: _ctx.disabled
+    }, null, 10 /* CLASS, PROPS */, _hoisted_6)]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["is-open", "content", "placement"])], 10 /* CLASS, PROPS */, _hoisted_2), createElementVNode("div", {
+    class: normalizeClass(_ctx.labelStyles)
+  }, [createElementVNode("div", {
+    class: normalizeClass(_ctx.labelMarkStyles)
+  }, toDisplayString(_ctx.minValue), 3 /* TEXT, CLASS */), _hoisted_7, createElementVNode("div", {
+    class: normalizeClass(_ctx.labelMarkStyles)
+  }, toDisplayString(_ctx.maxValue), 3 /* TEXT, CLASS */)], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-range-slider-v3/OrRangeSlider.vue";
+
+export { RangeSlider as R, RangeSliderOrientations as a, RangeSliderRail as b, RangeSliderRailOrientations as c, RangeSliderOffset as d, RangeSliderOffsetOrientations as e, RangeSliderTrack as f, RangeSliderTrackColors as g, RangeSliderThumb as h, RangeSliderThumbColors as i, RangeSliderLabel as j, RangeSliderLabelOrientations as k, RangeSliderLabelMark as l, script as s };

package/dist/bundled/v3/components/OrResizeablePanelV3/OrResizeablePanel.js

@@ -0,0 +1 @@
+export { s as default } from '../OrResizeablePanelV3-50f76d0f.js';

package/dist/bundled/v3/components/OrResizeablePanelV3/OrResizeablePanel.vue.d.ts

@@ -0,0 +1,101 @@
+import { PropType } from 'vue-demi';
+import { ResizeablePanelPadding, ResizeablePanelPlacement } from './props';
+declare const _default: import("vue-demi").DefineComponent<{
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    padding: {
+        type: PropType<"l" | "m" | "s" | "none">;
+        default: ResizeablePanelPadding;
+    };
+    placement: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+        default: ResizeablePanelPlacement;
+    };
+    resizeable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    resizeBar: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    contentStyles: import("vue-demi").ComputedRef<string[]>;
+    contentPlaceholderStyles: import("vue-demi").ComputedRef<string[]>;
+    resizeBarStyles: import("vue-demi").ComputedRef<string[]>;
+    collapseButtonContainerStyles: import("vue-demi").ComputedRef<string[]>;
+    toolbarStyles: import("vue-demi").ComputedRef<string[]>;
+    state: import("vue-demi").Ref<"open" | "closed">;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    collapseButtonIcon: import("vue-demi").ComputedRef<"keyboard_arrow_up" | "keyboard_arrow_down" | "keyboard_arrow_left" | "keyboard_arrow_right" | "menu">;
+    currentDirection: import("vue-demi").ComputedRef<"height" | "width">;
+    currentSize: import("vue-demi").Ref<number>;
+    isDragging: import("vue-demi").ComputedRef<boolean>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:state" | "open" | "close" | "resize")[], "update:state" | "open" | "close" | "resize", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    padding: {
+        type: PropType<"l" | "m" | "s" | "none">;
+        default: ResizeablePanelPadding;
+    };
+    placement: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+        default: ResizeablePanelPlacement;
+    };
+    resizeable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:state"?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onResize?: ((...args: any[]) => any) | undefined;
+}, {
+    isOpen: boolean;
+    width: number;
+    minWidth: number;
+    maxWidth: number;
+    padding: "l" | "m" | "s" | "none";
+    placement: "top" | "bottom" | "left" | "right";
+    resizeable: boolean;
+    collapsible: boolean;
+}>;
+export default _default;

package/dist/bundled/v3/components/OrResizeablePanelV3/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrResizeablePanelV3 } from './OrResizeablePanel.vue';
+export * from './props';

package/dist/bundled/v3/components/OrResizeablePanelV3/index.js

@@ -0,0 +1 @@
+export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from '../OrResizeablePanelV3-50f76d0f.js';

package/dist/bundled/v3/components/OrResizeablePanelV3/props.d.ts

@@ -0,0 +1,12 @@
+export declare enum ResizeablePanelPadding {
+    L = "l",
+    M = "m",
+    S = "s",
+    None = "none"
+}
+export declare enum ResizeablePanelPlacement {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}

package/dist/bundled/v3/components/OrResizeablePanelV3/props.js

@@ -0,0 +1 @@
+export { R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from '../OrResizeablePanelV3-50f76d0f.js';

package/dist/bundled/v3/components/OrResizeablePanelV3/styles.d.ts

@@ -0,0 +1,13 @@
+import { ResizeablePanelPadding, ResizeablePanelPlacement } from './props';
+export declare const ResizeablePanel: string[];
+export declare const ResizeablePanelPlacements: Record<ResizeablePanelPlacement, string[]>;
+export declare const ResizeablePanelContent: string[];
+export declare const ResizeablePanelContentPaddings: Record<ResizeablePanelPadding, string[]>;
+export declare const ResizeablePanelContentPlaceholder: string[];
+export declare const ResizeablePanelContentPlaceholderPlacements: Record<ResizeablePanelPlacement, string[]>;
+export declare const ResizeablePanelResizeBar: string[];
+export declare const ResizeablePanelResizeBarPlacements: Record<ResizeablePanelPlacement, string[]>;
+export declare const ResizeablePanelCollapseButtonContainer: string[];
+export declare const ResizeablePanelCollapseButtonContainerPlacements: Record<ResizeablePanelPlacement, string[]>;
+export declare const ResizeablePanelToolbar: string[];
+export declare const ResizeablePanelToolbarPlacements: Record<ResizeablePanelPlacement, string[]>;

package/dist/bundled/v3/components/OrResizeablePanelV3/styles.js

@@ -0,0 +1 @@
+export { b as ResizeablePanel, j as ResizeablePanelCollapseButtonContainer, k as ResizeablePanelCollapseButtonContainerPlacements, d as ResizeablePanelContent, e as ResizeablePanelContentPaddings, f as ResizeablePanelContentPlaceholder, g as ResizeablePanelContentPlaceholderPlacements, c as ResizeablePanelPlacements, h as ResizeablePanelResizeBar, i as ResizeablePanelResizeBarPlacements, l as ResizeablePanelToolbar, m as ResizeablePanelToolbarPlacements } from '../OrResizeablePanelV3-50f76d0f.js';