@onereach/ui-components 4.6.4 → 4.7.0-beta.2795.0

package/src/hooks/index.ts

@@ -2,7 +2,6 @@ export { useControlAttributes } from './useControlAttributes';
 export { useElevation } from './useElevation';
 export { useIdAttribute } from './useIdAttribute';
 export { useOverflow } from './useOverflow';
-export { usePopoverState } from './usePopoverState';
 export { useResponsive } from './useResponsive';
 export { default as useToggle } from './useToggle';
 export { useValidationAttributes } from './useValidationAttributes';

package/src/hooks/useControlAttributes.ts

@@ -1,6 +1,6 @@
 import { computed, ComputedRef, useAttrs } from 'vue-demi';
 
-export interface ControlAttributes {
+interface ControlAttributes {
   readonly: ComputedRef<boolean | undefined>;
   disabled: ComputedRef<boolean | undefined>;
 

package/src/hooks/useElevation.ts

@@ -25,8 +25,6 @@ export function useElevation(
 
   // Effects
   watch([elementRef, triggerRef], ([element]) => {
-    if (element) {
-      setElementElevation(element);
-    }
+    if (element) setElementElevation(element);
   }, { immediate: true });
 }

package/src/hooks/useValidationAttributes.ts

@@ -1,6 +1,6 @@
 import { computed, ComputedRef, useAttrs } from 'vue-demi';
 
-export interface ValidationAttributes {
+interface ValidationAttributes {
   required: ComputedRef<boolean | undefined>;
   minlength: ComputedRef<number | undefined>;
   maxlength: ComputedRef<number | undefined>;

package/dist/bundled/v2/hooks/usePopoverState.d.ts

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

package/dist/bundled/v2/hooks/usePopoverState.js

@@ -1,42 +0,0 @@
-import { debouncedRef } from '@vueuse/core';
-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, options) {
-  // State
-  const state = ref(isOpen.value ? 'open' : 'closed');
-  watch(isOpen, value => {
-    state.value = value ? 'open' : 'closed';
-  });
-  const debouncedState = (options === null || options === void 0 ? void 0 : options.debounce) ? debouncedRef(state, options.debounce) : state;
-  watch(debouncedState, value => {
-    context.emit('update:state', value);
-    switch (value) {
-      case 'open':
-        context.emit('open');
-        break;
-      case 'closed':
-        context.emit('close');
-        break;
-    }
-  });
-  // Methods
-  function open() {
-    state.value = 'open';
-  }
-  function close() {
-    state.value = 'closed';
-  }
-  function toggle() {
-    state.value = state.value === 'open' ? 'closed' : 'open';
-  }
-  return {
-    state: debouncedState,
-    open,
-    close,
-    toggle
-  };
-}
-
-export { usePopoverState };

package/dist/bundled/v3/OrMenu.vue_vue_type_script_lang-1f45bf44.js

@@ -1,66 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { MenuRoot } from './components/OrMenuV3/styles.js';
-import './components/OrPopoverV3/OrPopover.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
-import { s as script$1 } from './OrPopover.vue_vue_type_script_lang-c75dbd63.js';
-import { PopoverPlacement } from './components/OrPopoverV3/props.js';
-
-var script = defineComponent({
-  name: 'OrMenu',
-  components: {
-    OrPopover: script$1
-  },
-  inheritAttrs: false,
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    trigger: {
-      type: HTMLElement,
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: PopoverPlacement.Bottom
-    }
-  },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-menu-v3', ...MenuRoot]);
-    // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
-    // Handlers
-    function onClick(event) {
-      const path = event.composedPath();
-      if (path.some(_ref => {
-        let {
-          classList
-        } = _ref;
-        return classList === null || classList === void 0 ? void 0 : classList.contains('or-menu-item-v3');
-      })) {
-        close();
-      }
-    }
-    return {
-      root,
-      rootStyles,
-      state,
-      open,
-      close,
-      toggle,
-      onClick
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrModal.vue_vue_type_script_lang-31c15ba1.js

@@ -1,160 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createElementVNode, createVNode, withModifiers } from 'vue';
-import './components/OrIconButtonV3/OrIconButton.js';
-import { s as script$4 } from './OrIconButton.vue_vue_type_script_lang-fe97e57a.js';
-import { ModalSize } from './components/OrModalV3/props.js';
-import { ModalRoot, ModalRootSizes } from './components/OrModalV3/styles.js';
-import './components/OrOverlayV3/OrOverlay.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
-import { s as script$5 } from './OrOverlay.vue_vue_type_script_lang-29ff6fd8.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$2(_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$2;
-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$1(_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$1;
-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(_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;
-script$1.__file = "src/components/or-modal-v3/partials/or-modal-header/OrModalHeader.vue";
-
-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: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', '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
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrTooltip.vue_vue_type_script_lang-f3ccffce.js

@@ -1,56 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { TooltipRoot, TooltipBody, TooltipBodyPlacements } from './components/OrTooltipV3/styles.js';
-import './components/OrPopoverV3/OrPopover.js';
-import { s as script$1 } from './OrPopover.vue_vue_type_script_lang-c75dbd63.js';
-import { PopoverPlacement } from './components/OrPopoverV3/props.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
-
-var script = defineComponent({
-  name: 'OrTooltip',
-  components: {
-    OrPopover: script$1
-  },
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: String,
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: PopoverPlacement.Bottom
-    }
-  },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-tooltip-v3', ...TooltipRoot]);
-    const bodyStyles = computed(() => [...TooltipBody, ...TooltipBodyPlacements[props.placement]]);
-    // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context, {
-      debounce: 250
-    });
-    return {
-      root,
-      rootStyles,
-      bodyStyles,
-      state,
-      open,
-      close,
-      toggle
-    };
-  }
-});
-
-export { script as s };

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

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

package/dist/bundled/v3/hooks/usePopoverState.js

@@ -1,42 +0,0 @@
-import { debouncedRef } from '@vueuse/core';
-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, options) {
-  // State
-  const state = ref(isOpen.value ? 'open' : 'closed');
-  watch(isOpen, value => {
-    state.value = value ? 'open' : 'closed';
-  });
-  const debouncedState = (options === null || options === void 0 ? void 0 : options.debounce) ? debouncedRef(state, options.debounce) : state;
-  watch(debouncedState, value => {
-    context.emit('update:state', value);
-    switch (value) {
-      case 'open':
-        context.emit('open');
-        break;
-      case 'closed':
-        context.emit('close');
-        break;
-    }
-  });
-  // Methods
-  function open() {
-    state.value = 'open';
-  }
-  function close() {
-    state.value = 'closed';
-  }
-  function toggle() {
-    state.value = state.value === 'open' ? 'closed' : 'open';
-  }
-  return {
-    state: debouncedState,
-    open,
-    close,
-    toggle
-  };
-}
-
-export { usePopoverState };