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

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

@@ -0,0 +1 @@
+export { default as OrSlider } from './OrSlider.js';

package/dist/bundled/v3/components/OrSliderV3/OrSlider.js

@@ -0,0 +1 @@
+export { s as default } from '../OrSliderV3-f42f08d5.js';

package/dist/bundled/v3/components/OrSliderV3/OrSlider.vue.d.ts

@@ -0,0 +1,89 @@
+import { PropType } from 'vue-demi';
+import { SliderColor, SliderOrientation } from './props';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: PropType<"primary" | "secondary">;
+        default: SliderColor;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: SliderOrientation;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rail: import("vue-demi").Ref<HTMLElement | undefined>;
+    thumb: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    railStyles: import("vue-demi").ComputedRef<string[]>;
+    trackStyles: import("vue-demi").ComputedRef<string[]>;
+    trackComputedStyles: import("vue-demi").ComputedRef<{
+        [x: string]: string;
+    }>;
+    thumbStyles: import("vue-demi").ComputedRef<string[]>;
+    labelStyles: import("vue-demi").ComputedRef<string[]>;
+    labelMarkStyles: import("vue-demi").ComputedRef<string[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<number>;
+    internalModelValue: import("vue-demi").WritableComputedRef<number>;
+    isHovering: import("vue-demi").Ref<boolean>;
+    isDragging: import("vue-demi").ComputedRef<boolean>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: PropType<"primary" | "secondary">;
+        default: SliderColor;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: SliderOrientation;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: number;
+    minValue: number;
+    maxValue: number;
+    step: number;
+    color: "primary" | "secondary";
+    orientation: "horizontal" | "vertical";
+    disabled: boolean;
+}>;
+export default _default;

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

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

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

@@ -0,0 +1 @@
+export { s as OrSliderV3, S as SliderColor, a as SliderOrientation } from '../OrSliderV3-f42f08d5.js';

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

@@ -0,0 +1,8 @@
+export declare enum SliderColor {
+    Primary = "primary",
+    Secondary = "secondary"
+}
+export declare enum SliderOrientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}

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

@@ -0,0 +1 @@
+export { S as SliderColor, a as SliderOrientation } from '../OrSliderV3-f42f08d5.js';

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

@@ -0,0 +1,12 @@
+import { SliderColor, SliderOrientation } from './props';
+export declare const Slider: string[];
+export declare const SliderOrientations: Record<SliderOrientation, string[]>;
+export declare const SliderRail: string[];
+export declare const SliderRailOrientations: Record<SliderOrientation, string[]>;
+export declare const SliderTrack: string[];
+export declare const SliderTrackColors: Record<SliderColor, string[]>;
+export declare const SliderThumb: string[];
+export declare const SliderThumbColors: Record<SliderColor, string[]>;
+export declare const SliderLabel: string[];
+export declare const SliderLabelOrientations: Record<SliderOrientation, string[]>;
+export declare const SliderLabelMark: string[];

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

@@ -0,0 +1 @@
+export { b as Slider, j as SliderLabel, l as SliderLabelMark, k as SliderLabelOrientations, c as SliderOrientations, d as SliderRail, e as SliderRailOrientations, h as SliderThumb, i as SliderThumbColors, f as SliderTrack, g as SliderTrackColors } from '../OrSliderV3-f42f08d5.js';

package/dist/bundled/v3/components/OrSliderV3-f42f08d5.js

@@ -0,0 +1,259 @@
+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';
+
+var SliderColor;
+(function (SliderColor) {
+  SliderColor["Primary"] = "primary";
+  SliderColor["Secondary"] = "secondary";
+})(SliderColor || (SliderColor = {}));
+var SliderOrientation;
+(function (SliderOrientation) {
+  SliderOrientation["Horizontal"] = "horizontal";
+  SliderOrientation["Vertical"] = "vertical";
+})(SliderOrientation || (SliderOrientation = {}));
+
+const Slider = [
+// Interactivity
+'interactivity-default'];
+const SliderOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Layout
+  'layout-column',
+  // Box
+  'w-full'],
+  [SliderOrientation.Vertical]: [
+  // Layout
+  'layout-row',
+  // Box
+  'h-full']
+};
+const SliderRail = [
+// Interactivity
+'interactivity-click',
+// Shape
+'rounded-full',
+// Theme
+'theme-background-disabled', 'dark:theme-background-disabled-dark'];
+const SliderRailOrientations = {
+  [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 SliderTrack = [
+// Box
+'w-full', 'h-full',
+// Shape
+'rounded-full'];
+const SliderTrackColors = {
+  [SliderColor.Primary]: [
+  // Theme
+  'theme-background-primary', 'dark:theme-background-primary-dark'],
+  [SliderColor.Secondary]: [
+  // Theme
+  'theme-background-secondary', 'dark:theme-background-secondary-dark']
+};
+const SliderThumb = [
+// Layout
+'shrink-0',
+// Box
+'w-[20px]', 'h-[20px]', '-mx-[10px]', '-my-[10px]',
+// Shape
+'rounded-full',
+// Theme
+'bg-white dark:bg-black'];
+const SliderThumbColors = {
+  [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 SliderLabel = [];
+const SliderLabelOrientations = {
+  [SliderOrientation.Horizontal]: [
+  // Layout
+  'layout-row',
+  // Box
+  'w-full'],
+  [SliderOrientation.Vertical]: [
+  // Layout
+  'layout-column-reverse items-center',
+  // Box
+  'h-full']
+};
+const SliderLabelMark = [
+// 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: Number,
+      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 thumb = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-slider-v3', ...Slider, ...SliderOrientations[props.orientation]]);
+    const railStyles = computed(() => [...SliderRail, ...SliderRailOrientations[props.orientation]]);
+    const trackStyles = computed(() => [...SliderTrack, ...SliderTrackColors[props.color]]);
+    const trackComputedStyles = computed(() => ({
+      [props.orientation === SliderOrientation.Horizontal ? 'width' : 'height']: `${internalModelValue.value * 100}%`
+    }));
+    const thumbStyles = computed(() => [...SliderThumb, ...SliderThumbColors[props.color]]);
+    const labelStyles = computed(() => [...SliderLabel, ...SliderLabelOrientations[props.orientation]]);
+    const labelMarkStyles = computed(() => [...SliderLabelMark]);
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: toRef(props, 'minValue')
+    });
+    const internalModelValue = computed({
+      get: () => {
+        return (proxyModelValue.value - props.minValue) / (props.maxValue - props.minValue);
+      },
+      set: value => {
+        proxyModelValue.value = Math.round(value * (props.maxValue - props.minValue) + props.minValue);
+      }
+    });
+    const railBoundingBox = useElementBounding(rail);
+    // Handlers
+    function onDrag(position, event) {
+      if (props.disabled) {
+        return;
+      }
+      const totalWidth = railBoundingBox.width.value;
+      const totalHeight = railBoundingBox.height.value;
+      internalModelValue.value = props.orientation === SliderOrientation.Horizontal ? clamp(event.clientX - railBoundingBox.left.value, 0, totalWidth) / totalWidth : clamp(totalHeight - (event.clientY - railBoundingBox.top.value), 0, totalHeight) / totalHeight;
+    }
+    // Effects
+    const isHovering = useElementHover(rail);
+    const {
+      isDragging
+    } = useDraggable(rail, {
+      onStart: onDrag,
+      onMove: onDrag,
+      onEnd: onDrag
+    });
+    return {
+      root,
+      rail,
+      thumb,
+      rootStyles,
+      railStyles,
+      trackStyles,
+      trackComputedStyles,
+      thumbStyles,
+      labelStyles,
+      labelMarkStyles,
+      proxyModelValue,
+      internalModelValue,
+      isHovering,
+      isDragging
+    };
+  }
+});
+
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = /*#__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.trackStyles),
+    style: normalizeStyle(_ctx.trackComputedStyles),
+    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),
+    placement: _ctx.orientation === 'horizontal' ? 'top' : 'right',
+    offset: 8,
+    "external-control": true
+  }, {
+    default: withCtx(() => [createElementVNode("div", {
+      ref: "thumb",
+      class: normalizeClass(_ctx.thumbStyles),
+      disabled: _ctx.disabled
+    }, null, 10 /* CLASS, PROPS */, _hoisted_4)]),
+    _: 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_5, 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-slider-v3/OrSlider.vue";
+
+export { SliderColor as S, SliderOrientation as a, Slider as b, SliderOrientations as c, SliderRail as d, SliderRailOrientations as e, SliderTrack as f, SliderTrackColors as g, SliderThumb as h, SliderThumbColors as i, SliderLabel as j, SliderLabelOrientations as k, SliderLabelMark as l, script as s };

package/dist/bundled/v3/components/OrSortingV3/OrSorting.js

@@ -0,0 +1 @@
+export { s as default } from '../OrSortingV3-0d2f8610.js';

package/dist/bundled/v3/components/OrSortingV3/OrSorting.vue.d.ts

@@ -0,0 +1,35 @@
+import { PropType } from 'vue-demi';
+import { SortOption } from './types';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<SortOption[]>;
+        default: () => never[];
+    };
+}, {
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
+    sortMenu: import("vue-demi").Ref<any>;
+    sortButton: import("vue-demi").Ref<any>;
+    sortLabel: import("vue-demi").ComputedRef<string | undefined>;
+    handleSort: (sort: string) => void;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
+    sortLabelStyles: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<SortOption[]>;
+        default: () => never[];
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string;
+    options: SortOption[];
+}>;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as OrSortingV3 } from './OrSorting.vue';
+export * from './types';

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

@@ -0,0 +1 @@
+export { s as OrSortingV3 } from '../OrSortingV3-0d2f8610.js';

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

@@ -0,0 +1,2 @@
+export declare const SortingRoot: never[];
+export declare const SortingLabel: string[];

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

@@ -0,0 +1 @@
+export { a as SortingLabel, S as SortingRoot } from '../OrSortingV3-0d2f8610.js';

package/dist/bundled/v3/components/OrSortingV3/types.d.ts

@@ -0,0 +1,4 @@
+export interface SortOption {
+    label: string;
+    value: string;
+}

package/dist/bundled/v3/components/OrSortingV3-0d2f8610.js

@@ -0,0 +1,116 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, toDisplayString, createBlock, createCommentVNode, Fragment, renderList, createTextVNode } from 'vue';
+import { defineComponent, ref, toRef, computed } from 'vue-demi';
+import { s as script$1 } from './OrMenuV3-c69db72f.js';
+import { s as script$2 } from './OrMenuItemV3-44a04ccd.js';
+import { s as script$3 } from './OrButtonV3-c76677b3.js';
+import { s as script$4 } from './OrIconV3-85d7d26b.js';
+import { u as useProxyModelValue } from './OrBottomSheetV3-199292db.js';
+
+const SortingRoot = [];
+const SortingLabel = [
+// Theme
+'text-on-background dark:text-on-background-dark'];
+
+var script = defineComponent({
+  name: 'OrSorting',
+  components: {
+    OrMenu: script$1,
+    OrMenuItem: script$2,
+    OrButton: script$3,
+    OrIcon: script$4
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const sortMenu = ref();
+    const sortButton = ref();
+    // State
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const sortLabel = computed(() => {
+      var _a;
+      return (_a = props.options.find(item => item.value === proxyModelValue.value)) === null || _a === void 0 ? void 0 : _a.label;
+    });
+    // Methods
+    function handleSort(sort) {
+      proxyModelValue.value = sort;
+    }
+    // Styles
+    const rootStyles = computed(() => ['or-sorting-v3', ...SortingRoot]);
+    const sortLabelStyles = computed(() => [...SortingLabel]);
+    return {
+      root,
+      sortMenu,
+      sortButton,
+      sortLabel,
+      handleSort,
+      rootStyles,
+      sortLabelStyles
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  const _component_OrButton = resolveComponent("OrButton");
+  const _component_OrMenuItem = resolveComponent("OrMenuItem");
+  const _component_OrMenu = resolveComponent("OrMenu");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createVNode(_component_OrButton, {
+    ref: "sortButton",
+    variant: "link",
+    color: "primary",
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.sortMenu.toggle())
+  }, {
+    default: withCtx(() => [createElementVNode("span", {
+      class: normalizeClass(_ctx.sortLabelStyles)
+    }, toDisplayString(_ctx.sortLabel), 3 /* TEXT, CLASS */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
+      key: 0,
+      icon: _ctx.sortMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+    }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)]),
+    _: 1 /* STABLE */
+  }, 512 /* NEED_PATCH */), createVNode(_component_OrMenu, {
+    ref: "sortMenu",
+    trigger: _ctx.sortButton && _ctx.sortButton.root,
+    placement: "bottom-start",
+    offset: {
+      mainAxis: 0,
+      crossAxis: -8
+    }
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, item => {
+      return openBlock(), createBlock(_component_OrMenuItem, {
+        key: item.value,
+        selected: item.value === _ctx.modelValue,
+        onClick: $event => _ctx.handleSort(item.value)
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)]),
+
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-sorting-v3/OrSorting.vue";
+
+export { SortingRoot as S, SortingLabel as a, script as s };