@onereach/ui-components 19.3.0-beta.5046.0 → 19.3.0-beta.5083.0

package/dist/bundled/components/OrSidebar/OrSidebar.js

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

package/dist/bundled/components/OrSidebar/OrSidebar.vue.d.ts

@@ -1,63 +0,0 @@
-import { PropType } from 'vue';
-import { OrSidebarSide } from './constants';
-declare const _default: import("vue").DefineComponent<{
-    width: {
-        type: NumberConstructor;
-        required: false;
-        default: number;
-    };
-    minimumWidth: {
-        type: NumberConstructor;
-        required: false;
-        default: number;
-    };
-    /**
-     * User may put the component on the right or the left side of a container.
-     * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
-     *
-     * Note: the property doesn't reposition the component in the parent container.
-     * @values left, right
-     */
-    side: {
-        type: PropType<OrSidebarSide>;
-        default: () => OrSidebarSide;
-    };
-}, {
-    resizeBarRef: import("vue").Ref<HTMLElement | undefined>;
-    isResizing: import("vue").Ref<boolean>;
-    localWidth: import("vue").Ref<number>;
-    OrSidebarSide: typeof OrSidebarSide;
-}, unknown, {
-    sidebarStyle(): {
-        [key: string]: any;
-    };
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change:width"[], "change:width", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    width: {
-        type: NumberConstructor;
-        required: false;
-        default: number;
-    };
-    minimumWidth: {
-        type: NumberConstructor;
-        required: false;
-        default: number;
-    };
-    /**
-     * User may put the component on the right or the left side of a container.
-     * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
-     *
-     * Note: the property doesn't reposition the component in the parent container.
-     * @values left, right
-     */
-    side: {
-        type: PropType<OrSidebarSide>;
-        default: () => OrSidebarSide;
-    };
-}>> & {
-    "onChange:width"?: ((...args: any[]) => any) | undefined;
-}, {
-    width: number;
-    minimumWidth: number;
-    side: OrSidebarSide;
-}, {}>;
-export default _default;

package/dist/bundled/components/OrSidebar/constants.d.ts

@@ -1,4 +0,0 @@
-export declare enum OrSidebarSide {
-    left = "left",
-    right = "right"
-}

package/dist/bundled/components/OrSidebar/constants.js

@@ -1 +0,0 @@
-export { OrSidebarSide } from './index.js';

package/dist/bundled/components/OrSidebar/index.d.ts

@@ -1,2 +0,0 @@
-export { default as OrSidebar } from './OrSidebar.vue';
-export * from './constants';

package/dist/bundled/components/OrSidebar/index.js

@@ -1,124 +0,0 @@
-import { defineComponent, ref, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode } from 'vue';
-import { s as styleInject } from '../OrAvatar-96c4b4c5.js';
-import { n as useDraggable } from '../OrAutocompleteV3-c25a261c.js';
-
-var OrSidebarSide;
-(function (OrSidebarSide) {
-  OrSidebarSide["left"] = "left";
-  OrSidebarSide["right"] = "right";
-})(OrSidebarSide || (OrSidebarSide = {}));
-
-var script = defineComponent({
-  name: 'OrSidebar',
-  props: {
-    width: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    minimumWidth: {
-      type: Number,
-      required: false,
-      default: 350
-    },
-    /**
-     * User may put the component on the right or the left side of a container.
-     * This property mirrors the resizing behavior (drag direction) and styling (horizontal border) of the sidebar.
-     *
-     * Note: the property doesn't reposition the component in the parent container.
-     * @values left, right
-     */
-    side: {
-      type: String,
-      default: () => OrSidebarSide.right
-    }
-  },
-  emits: ['change:width'],
-  setup(props) {
-    const resizeBarRef = ref();
-    let startPositionX = 0;
-    let isResizing = ref(false);
-    let localWidth = ref(props.width >= props.minimumWidth ? props.width : props.minimumWidth);
-    useDraggable(resizeBarRef, {
-      preventDefault: true,
-      onStart: (position, event) => {
-        document.body.style.cursor = 'ew-resize';
-        document.body.style.userSelect = 'none';
-        startPositionX = event.x;
-        isResizing.value = true;
-      },
-      onMove: position => {
-        const delta = (position.x - startPositionX) * (props.side === OrSidebarSide.left ? -1 : 1);
-        const newWidth = localWidth.value - delta;
-        localWidth.value = newWidth >= props.minimumWidth ? newWidth : props.minimumWidth;
-        startPositionX = position.x;
-      },
-      onEnd: () => {
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-        isResizing.value = false;
-      }
-    });
-    return {
-      resizeBarRef,
-      isResizing,
-      localWidth,
-      OrSidebarSide
-    };
-  },
-  computed: {
-    sidebarStyle() {
-      return {
-        width: this.localWidth + 'px'
-      };
-    }
-  },
-  watch: {
-    width(newValue) {
-      if (newValue !== this.localWidth) {
-        this.localWidth = newValue < this.minimumWidth ? this.minimumWidth : newValue;
-      }
-    },
-    minimumWidth(newMinimum) {
-      if (newMinimum < this.localWidth) this.localWidth = newMinimum;
-    },
-    localWidth(val) {
-      this.$emit('change:width', val);
-    }
-  }
-});
-
-const _hoisted_1 = {
-  class: "or-sidebar-main"
-};
-const _hoisted_2 = {
-  key: 0,
-  class: "or-sidebar-header"
-};
-const _hoisted_3 = {
-  class: "or-sidebar-content"
-};
-const _hoisted_4 = {
-  key: 0,
-  class: "or-sidebar-footer"
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("aside", {
-    class: normalizeClass(["or-sidebar", _ctx.side === _ctx.OrSidebarSide.left ? 'or-sidebar-left' : 'or-sidebar-right']),
-    style: normalizeStyle(_ctx.sidebarStyle)
-  }, [createElementVNode("div", {
-    ref: "resizeBarRef",
-    class: normalizeClass(["or-sidebar-resize", {
-      'is-resizing': _ctx.isResizing
-    }])
-  }, null, 2 /* CLASS */), createElementVNode("div", _hoisted_1, [_ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default")])]), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
-}
-
-var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-2084bce8 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2084bce8 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-sidebar[data-v-2084bce8] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  min-height: 0;\n  padding: 0;\n  background-color: var(--c-neutral-0);\n}\n.or-sidebar .or-sidebar-resize[data-v-2084bce8] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  width: 12px;\n  cursor: ew-resize;\n}\n.or-sidebar.or-sidebar-right[data-v-2084bce8] {\n  border-left: 1px solid var(--c-neutral-2);\n}\n.or-sidebar.or-sidebar-right .or-sidebar-resize[data-v-2084bce8] {\n  left: -1px;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: border-left;\n}\n.or-sidebar.or-sidebar-right .or-sidebar-resize[data-v-2084bce8]:hover, .or-sidebar.or-sidebar-right .or-sidebar-resize.is-resizing[data-v-2084bce8] {\n  border-left: var(--s-1) solid var(--c-primary);\n}\n.or-sidebar.or-sidebar-left[data-v-2084bce8] {\n  border-right: 1px solid var(--c-neutral-2);\n}\n.or-sidebar.or-sidebar-left .or-sidebar-resize[data-v-2084bce8] {\n  right: -1px;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: border-right;\n}\n.or-sidebar.or-sidebar-left .or-sidebar-resize[data-v-2084bce8]:hover, .or-sidebar.or-sidebar-left .or-sidebar-resize.is-resizing[data-v-2084bce8] {\n  border-right: var(--s-1) solid var(--c-primary);\n}\n.or-sidebar-main[data-v-2084bce8] {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  min-height: 0;\n}\n.or-sidebar-header[data-v-2084bce8] {\n  padding: var(--s-4);\n}\n.or-sidebar-content[data-v-2084bce8] {\n  flex-grow: 1;\n  padding: var(--s-4);\n  overflow: auto;\n}\n.or-sidebar-footer[data-v-2084bce8] {\n  padding: var(--s-4);\n  border-top: 1px solid var(--c-neutral-2);\n}";
-styleInject(css_248z);
-
-script.render = render;
-script.__scopeId = "data-v-2084bce8";
-script.__file = "src/components/or-sidebar/OrSidebar.vue";
-
-export { script as OrSidebar, OrSidebarSide };

package/dist/bundled/components/OrSidebarV3/OrSidebar.js

@@ -1 +0,0 @@
-export { s as default } from '../OrSidebarV3-60d05f44.js';

package/dist/bundled/components/OrSidebarV3/OrSidebar.vue.d.ts

@@ -1,94 +0,0 @@
-import { PropType } from 'vue';
-import { ResizeablePanelPadding } from '../or-resizeable-panel-v3';
-declare const _default: import("vue").DefineComponent<{
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    width: {
-        type: NumberConstructor;
-        default: number;
-    };
-    minWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    maxWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    padding: {
-        type: PropType<"l" | "m" | "s" | "none">;
-        default: () => ResizeablePanelPadding;
-    };
-    placement: {
-        type: PropType<"left" | "right">;
-        default: undefined;
-    };
-    resizeable: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    collapsible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    root: import("vue").Ref<HTMLElement | undefined>;
-    rootStyles: import("vue").ComputedRef<string[]>;
-    headerStyles: import("vue").ComputedRef<string[]>;
-    contentStyles: import("vue").ComputedRef<string[]>;
-    footerStyles: import("vue").ComputedRef<string[]>;
-    state: Readonly<import("vue").Ref<"open" | "closed">>;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:state" | "open" | "close" | "resize")[], "update:state" | "open" | "close" | "resize", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    width: {
-        type: NumberConstructor;
-        default: number;
-    };
-    minWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    maxWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    padding: {
-        type: PropType<"l" | "m" | "s" | "none">;
-        default: () => ResizeablePanelPadding;
-    };
-    placement: {
-        type: PropType<"left" | "right">;
-        default: undefined;
-    };
-    resizeable: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    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: "left" | "right";
-    resizeable: boolean;
-    collapsible: boolean;
-}, {}>;
-export default _default;

package/dist/bundled/components/OrSidebarV3/index.js

@@ -1 +0,0 @@
-export { s as OrSidebarV3, S as SidebarPlacement } from '../OrSidebarV3-60d05f44.js';

package/dist/bundled/components/OrSidebarV3/props.js

@@ -1 +0,0 @@
-export { S as SidebarPlacement } from '../OrSidebarV3-60d05f44.js';

package/dist/bundled/components/OrSidebarV3/styles.d.ts

@@ -1,8 +0,0 @@
-import { ResizeablePanelPadding } from '../or-resizeable-panel-v3';
-export declare const Sidebar: string[];
-export declare const SidebarHeader: string[];
-export declare const SidebarHeaderPaddings: Record<ResizeablePanelPadding, string[]>;
-export declare const SidebarContent: string[];
-export declare const SidebarContentPaddings: Record<ResizeablePanelPadding, string[]>;
-export declare const SidebarFooter: string[];
-export declare const SidebarFooterPaddings: Record<ResizeablePanelPadding, string[]>;

package/dist/bundled/components/OrSidebarV3/styles.js

@@ -1,2 +0,0 @@
-import '../OrResizeablePanelV3-d8a67666.js';
-export { a as Sidebar, d as SidebarContent, e as SidebarContentPaddings, f as SidebarFooter, g as SidebarFooterPaddings, b as SidebarHeader, c as SidebarHeaderPaddings } from '../OrSidebarV3-60d05f44.js';

package/dist/bundled/components/OrSidebarV3-60d05f44.js

@@ -1,179 +0,0 @@
-import { defineComponent, ref, computed, toRef, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode } from 'vue';
-import { R as ResizeablePanelPadding, s as script$1 } from './OrResizeablePanelV3-d8a67666.js';
-import { usePopoverState } from '../hooks/usePopoverState.js';
-
-const Sidebar = [
-// Layout
-'layout-column grow',
-// Overflow
-'overflow-hidden'];
-const SidebarHeader = [
-// Layout
-'shrink-0',
-// Overflow
-'overflow-hidden',
-// Typography
-'typography-headline-2 truncate'];
-const SidebarHeaderPaddings = {
-  [ResizeablePanelPadding.L]: [
-  // Box
-  'px-lg', 'py-lg'],
-  [ResizeablePanelPadding.M]: [
-  // Box
-  'px-md', 'py-md'],
-  [ResizeablePanelPadding.S]: [
-  // Box
-  'px-sm', 'py-sm'],
-  [ResizeablePanelPadding.None]: []
-};
-const SidebarContent = [
-// Layout
-'grow',
-// Overflow
-'overflow-auto'];
-const SidebarContentPaddings = {
-  [ResizeablePanelPadding.L]: [
-  // Box
-  'px-lg', 'py-lg'],
-  [ResizeablePanelPadding.M]: [
-  // Box
-  'px-md', 'py-md'],
-  [ResizeablePanelPadding.S]: [
-  // Box
-  'px-sm', 'py-sm'],
-  [ResizeablePanelPadding.None]: []
-};
-const SidebarFooter = [
-// Layout
-'shrink-0',
-// Overflow
-'overflow-hidden',
-// Theme
-'theme-border-outline-variant border-t-1', 'dark:theme-border-outline-variant-dark'];
-const SidebarFooterPaddings = {
-  [ResizeablePanelPadding.L]: [
-  // Box
-  'px-lg', 'py-lg'],
-  [ResizeablePanelPadding.M]: [
-  // Box
-  'px-md', 'py-md'],
-  [ResizeablePanelPadding.S]: [
-  // Box
-  'px-sm', 'py-sm'],
-  [ResizeablePanelPadding.None]: []
-};
-
-var script = defineComponent({
-  name: 'OrSidebar',
-  components: {
-    OrResizeablePanel: script$1
-  },
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: true
-    },
-    width: {
-      type: Number,
-      default: 320
-    },
-    minWidth: {
-      type: Number,
-      default: undefined
-    },
-    maxWidth: {
-      type: Number,
-      default: undefined
-    },
-    padding: {
-      type: String,
-      default: () => ResizeablePanelPadding.M
-    },
-    placement: {
-      type: String,
-      default: undefined
-    },
-    resizeable: {
-      type: Boolean,
-      default: undefined
-    },
-    collapsible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:state', 'open', 'close', 'resize'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-sidebar-v3', ...Sidebar]);
-    const headerStyles = computed(() => [...SidebarHeader, ...SidebarHeaderPaddings[props.padding]]);
-    const contentStyles = computed(() => [...SidebarContent, ...SidebarContentPaddings[props.padding]]);
-    const footerStyles = computed(() => [...SidebarFooter, ...SidebarFooterPaddings[props.padding]]);
-    // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
-    return {
-      root,
-      rootStyles,
-      headerStyles,
-      contentStyles,
-      footerStyles,
-      state,
-      open,
-      close,
-      toggle
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrResizeablePanel = resolveComponent("OrResizeablePanel");
-  return openBlock(), createBlock(_component_OrResizeablePanel, {
-    "is-open": _ctx.state === 'open',
-    width: _ctx.width,
-    "min-width": _ctx.minWidth,
-    "max-width": _ctx.maxWidth,
-    padding: 'none',
-    placement: _ctx.placement,
-    resizeable: _ctx.resizeable,
-    collapsible: _ctx.collapsible,
-    "onUpdate:state": _cache[0] || (_cache[0] = $event => $event === 'open' ? _ctx.open() : _ctx.close()),
-    onResize: _cache[1] || (_cache[1] = $event => _ctx.$emit('resize', $event))
-  }, createSlots({
-    default: withCtx(() => [createElementVNode("div", {
-      ref: 'root',
-      class: normalizeClass(_ctx.rootStyles)
-    }, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", {
-      key: 0,
-      class: normalizeClass(_ctx.headerStyles)
-    }, [renderSlot(_ctx.$slots, "header")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
-      class: normalizeClass(_ctx.contentStyles)
-    }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */), _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", {
-      key: 1,
-      class: normalizeClass(_ctx.footerStyles)
-    }, [renderSlot(_ctx.$slots, "footer")], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */)]),
-    _: 2 /* DYNAMIC */
-  }, [!!_ctx.$slots.toolbar ? {
-    name: "toolbar",
-    fn: withCtx(() => [renderSlot(_ctx.$slots, "toolbar")]),
-    key: "0"
-  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["is-open", "width", "min-width", "max-width", "placement", "resizeable", "collapsible"]);
-}
-
-script.render = render;
-script.__file = "src/components/or-sidebar-v3/OrSidebar.vue";
-
-var SidebarPlacement;
-(function (SidebarPlacement) {
-  SidebarPlacement["Left"] = "left";
-  SidebarPlacement["Right"] = "right";
-})(SidebarPlacement || (SidebarPlacement = {}));
-
-export { SidebarPlacement as S, Sidebar as a, SidebarHeader as b, SidebarHeaderPaddings as c, SidebarContent as d, SidebarContentPaddings as e, SidebarFooter as f, SidebarFooterPaddings as g, script as s };

package/dist/bundled/components/OrSkeleton/constants.d.ts

@@ -1,9 +0,0 @@
-export declare enum OrSkeletonTextSizes {
-    headline1 = "headline-1",
-    headline2 = "headline-2",
-    headline3 = "headline-3",
-    body1 = "body-1",
-    body2 = "body-2",
-    button = "button",
-    caption = "caption"
-}

package/dist/bundled/components/OrSkeleton/constants.js

@@ -1 +0,0 @@
-export { O as OrSkeletonTextSizes } from '../OrSkeleton-593769ef.js';

package/dist/bundled/components/OrSkeleton/index.d.ts

@@ -1,4 +0,0 @@
-export { default as OrSkeletonCircle } from './or-skeleton-circle/OrSkeletonCircle.vue';
-export { default as OrSkeletonRect } from './or-skeleton-rect/OrSkeletonRect.vue';
-export { default as OrSkeletonText } from './or-skeleton-text/OrSkeletonText.vue';
-export * from './constants';

package/dist/bundled/components/OrSkeleton/index.js

@@ -1 +0,0 @@
-export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeleton-593769ef.js';