@onereach/ui-components 4.6.2-beta.2777.0 → 4.6.2-beta.2779.0

package/dist/esm/v3/OrModal-e30178be.js

@@ -1,226 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import '@vueuse/core';
-import { u as usePopoverState } from './usePopoverState-4cb59ae5.js';
-import { s as script$5 } from './OrOverlay-bf72f582.js';
-import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createElementVNode, createVNode, withModifiers, createBlock, withCtx, mergeProps, createCommentVNode } from 'vue';
-import { s as script$4 } from './OrIconButton-ce1b5542.js';
-
-const ModalContent = [
-// Layout
-'grow',
-// Overflow
-'overflow-auto',
-// Spacing
-'px-md md:px-lg'];
-
-var script$3 = defineComponent({
-  name: 'OrModalContent',
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-content', ...ModalContent]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
-}
-
-script$3.render = render$3;
-script$3.__file = "src/components/or-modal-v3/partials/or-modal-content/OrModalContent.vue";
-
-const ModalFooter = [
-// Spacing
-'px-md md:px-lg'];
-
-var script$2 = defineComponent({
-  name: 'OrModalFooter',
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-footer', ...ModalFooter]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
-}
-
-script$2.render = render$2;
-script$2.__file = "src/components/or-modal-v3/partials/or-modal-footer/OrModalFooter.vue";
-
-const ModalHeader = [
-// Layout
-'layout-row',
-// Spacing
-'px-md md:px-lg',
-// Typography
-'typography-headline-2'];
-
-var script$1 = defineComponent({
-  name: 'OrModalHeader',
-  components: {
-    OrIconButton: script$4
-  },
-  emits: ['close'],
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-header', ...ModalHeader]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-const _hoisted_1 = {
-  class: /*#__PURE__*/normalizeClass(['grow'])
-};
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrIconButton = resolveComponent("OrIconButton");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createVNode(_component_OrIconButton, {
-    icon: 'close',
-    size: 'l',
-    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('close'), ["stop"]))
-  })], 2 /* CLASS */);
-}
-
-script$1.render = render$1;
-script$1.__file = "src/components/or-modal-v3/partials/or-modal-header/OrModalHeader.vue";
-
-var ModalSize;
-(function (ModalSize) {
-  ModalSize["L"] = "l";
-  ModalSize["M"] = "m";
-  ModalSize["S"] = "s";
-})(ModalSize || (ModalSize = {}));
-
-const ModalRoot = [
-// Layout
-'layout-column',
-// Box
-'w-full', 'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
-// Shape
-'md:rounded-md',
-// Spacing
-'py-md md:py-lg', 'gap-md md:gap-lg',
-// Typography
-'typography-body-2-regular',
-// Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
-// Elevation
-'shadow-modal', 'dark:shadow-modal-dark'];
-const ModalRootSizes = {
-  'l': [
-  // Box
-  'md:w-[1050px]'],
-  'm': [
-  // Box
-  'md:w-[700px]'],
-  's': [
-  // Box
-  'md:w-[480px]']
-};
-
-var script = defineComponent({
-  name: 'OrModal',
-  components: {
-    OrModalContent: script$3,
-    OrModalFooter: script$2,
-    OrModalHeader: script$1,
-    OrOverlay: script$5
-  },
-  inheritAttrs: false,
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: ModalSize.M
-    }
-  },
-  emits: ['open', 'close'],
-  expose: ['root', 'open', 'close'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-v3', ...ModalRoot, ...ModalRootSizes[props.size]]);
-    // State
-    const {
-      state,
-      open,
-      close
-    } = usePopoverState(toRef(props, 'isOpen'), context);
-    return {
-      root,
-      rootStyles,
-      state,
-      open,
-      close
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrModalHeader = resolveComponent("OrModalHeader");
-  const _component_OrModalContent = resolveComponent("OrModalContent");
-  const _component_OrModalFooter = resolveComponent("OrModalFooter");
-  const _component_OrOverlay = resolveComponent("OrOverlay");
-  return _ctx.state === 'open' ? (openBlock(), createBlock(_component_OrOverlay, {
-    key: 0,
-    fullscreen: true
-  }, {
-    default: withCtx(() => [createElementVNode("div", mergeProps({
-      ref: "root"
-    }, _ctx.$attrs, {
-      class: _ctx.rootStyles
-    }), [createVNode(_component_OrModalHeader, {
-      onClose: _cache[0] || (_cache[0] = $event => _ctx.close())
-    }, {
-      default: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
-      _: 3 /* FORWARDED */
-    }), createVNode(_component_OrModalContent, null, {
-      default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-      _: 3 /* FORWARDED */
-    }), _ctx.$slots.footer ? (openBlock(), createBlock(_component_OrModalFooter, {
-      key: 0
-    }, {
-      default: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
-      _: 3 /* FORWARDED */
-    })) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */)]),
-
-    _: 3 /* FORWARDED */
-  })) : createCommentVNode("v-if", true);
-}
-
-script.render = render;
-script.__file = "src/components/or-modal-v3/OrModal.vue";
-
-export { ModalSize as M, script as s };

package/dist/esm/v3/components/or-modal-v3/partials/or-modal-content/OrModalContent.vue.d.ts

@@ -1,5 +0,0 @@
-declare const _default: import("vue-demi").DefineComponent<{}, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/esm/v3/components/or-modal-v3/partials/or-modal-content/styles.d.ts

@@ -1 +0,0 @@
-export declare const ModalContent: string[];

package/dist/esm/v3/components/or-modal-v3/partials/or-modal-footer/OrModalFooter.vue.d.ts

@@ -1,5 +0,0 @@
-declare const _default: import("vue-demi").DefineComponent<{}, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/dist/esm/v3/components/or-modal-v3/partials/or-modal-footer/styles.d.ts

@@ -1 +0,0 @@
-export declare const ModalFooter: string[];

package/dist/esm/v3/components/or-modal-v3/partials/or-modal-header/OrModalHeader.vue.d.ts

@@ -1,7 +0,0 @@
-declare const _default: import("vue-demi").DefineComponent<{}, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "close"[], "close", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{}>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
-}, {}>;
-export default _default;

package/dist/esm/v3/components/or-modal-v3/partials/or-modal-header/styles.d.ts

@@ -1 +0,0 @@
-export declare const ModalHeader: string[];

package/dist/esm/v3/hooks/usePopoverState.d.ts

@@ -1,8 +0,0 @@
-import { Ref, SetupContext } from 'vue-demi';
-export interface PopoverState {
-    state: Ref<'open' | 'closed'>;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}
-export declare function usePopoverState(isOpen: Ref<boolean>, context: SetupContext<('open' | 'close' | any)[]>): PopoverState;

package/dist/esm/v3/usePopoverState-4cb59ae5.js

@@ -1,37 +0,0 @@
-import { ref, watch } from 'vue-demi';
-
-// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
-// TODO: Use `defineEmits` after migration to Vue 3
-function usePopoverState(isOpen, context) {
-  // State
-  const state = ref(isOpen.value ? 'open' : 'closed');
-  watch(isOpen, value => {
-    state.value = value ? 'open' : 'closed';
-  });
-  watch(state, value => {
-    switch (value) {
-      case 'open':
-        return context.emit('open');
-      case 'closed':
-        return context.emit('close');
-    }
-  });
-  // Methods
-  function open() {
-    state.value = 'open';
-  }
-  function close() {
-    state.value = 'closed';
-  }
-  function toggle() {
-    state.value = state.value === 'open' ? 'closed' : 'open';
-  }
-  return {
-    state,
-    open,
-    close,
-    toggle
-  };
-}
-
-export { usePopoverState as u };

package/src/components/or-modal-v3/partials/or-modal-content/OrModalContent.vue

@@ -1,37 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import { ModalContent } from './styles';
-
-export default defineComponent({
-  name: 'OrModalContent',
-
-  expose: [
-    'root',
-  ],
-
-  setup() {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-modal-content',
-      ...ModalContent,
-    ]);
-
-    return {
-      root,
-      rootStyles,
-    };
-  },
-});
-</script>

package/src/components/or-modal-v3/partials/or-modal-content/styles.ts

@@ -1,10 +0,0 @@
-export const ModalContent: string[] = [
-  // Layout
-  'grow',
-
-  // Overflow
-  'overflow-auto',
-
-  // Spacing
-  'px-md md:px-lg',
-];

package/src/components/or-modal-v3/partials/or-modal-footer/OrModalFooter.vue

@@ -1,37 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import { ModalFooter } from './styles';
-
-export default defineComponent({
-  name: 'OrModalFooter',
-
-  expose: [
-    'root',
-  ],
-
-  setup() {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-modal-footer',
-      ...ModalFooter,
-    ]);
-
-    return {
-      root,
-      rootStyles,
-    };
-  },
-});
-</script>

package/src/components/or-modal-v3/partials/or-modal-footer/styles.ts

@@ -1,4 +0,0 @@
-export const ModalFooter: string[] = [
-  // Spacing
-  'px-md md:px-lg',
-];

package/src/components/or-modal-v3/partials/or-modal-header/OrModalHeader.vue

@@ -1,54 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <div :class="['grow']">
-      <slot />
-    </div>
-
-    <OrIconButton
-      :icon="'close'"
-      :size="'l'"
-      @click.stop="$emit('close')"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
-import { ModalHeader } from './styles';
-
-export default defineComponent({
-  name: 'OrModalHeader',
-
-  components: {
-    OrIconButton,
-  },
-
-  emits: [
-    'close',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup() {
-    // Refs
-    const root = ref<HTMLElement>();
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-modal-header',
-      ...ModalHeader,
-    ]);
-
-    return {
-      root,
-      rootStyles,
-    };
-  },
-});
-</script>

package/src/components/or-modal-v3/partials/or-modal-header/styles.ts

@@ -1,10 +0,0 @@
-export const ModalHeader: string[] = [
-  // Layout
-  'layout-row',
-
-  // Spacing
-  'px-md md:px-lg',
-
-  // Typography
-  'typography-headline-2',
-];

package/src/hooks/usePopoverState.ts

@@ -1,51 +0,0 @@
-import { Ref, SetupContext, UnwrapRef, ref, watch } from 'vue-demi';
-
-export interface PopoverState {
-  state: Ref<'open' | 'closed'>;
-
-  open: () => void;
-  close: () => void;
-  toggle: () => void;
-}
-
-// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
-// TODO: Use `defineEmits` after migration to Vue 3
-export function usePopoverState(isOpen: Ref<boolean>, context: SetupContext<('open' | 'close' | any)[]>): PopoverState {
-  // State
-  const state = ref<UnwrapRef<PopoverState['state']>>(isOpen.value ? 'open' : 'closed');
-
-  watch(isOpen, (value) => {
-    state.value = value ? 'open' : 'closed';
-  });
-
-  watch(state, (value) => {
-    switch (value) {
-      case 'open':
-        return context.emit('open');
-
-      case 'closed':
-        return context.emit('close');
-    }
-  });
-
-  // Methods
-  function open(): void {
-    state.value = 'open';
-  }
-
-  function close(): void {
-    state.value = 'closed';
-  }
-
-  function toggle(): void {
-    state.value = state.value === 'open' ? 'closed' : 'open';
-  }
-
-  return {
-    state,
-
-    open,
-    close,
-    toggle,
-  };
-}