@onereach/ui-components 8.4.1-beta.3657.0 → 8.5.0

package/dist/bundled/v3/OrList.vue_vue_type_script_lang-e1c786c5.js

@@ -1,208 +0,0 @@
-import { S as Sortable } from './sortable.esm-11705107.js';
-import { v as v4 } from './v4-cf8987a3.js';
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from 'vue';
-import { List, ListContent } from './components/OrListV3/styles.js';
-import './components/OrIconButtonV3/OrIconButton.js';
-import './components/OrLabelV3/OrLabel.js';
-import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-667eefbf.js';
-import { s as script$3 } from './OrLabel.vue_vue_type_script_lang-e2bcff17.js';
-import { useProxyModelValue } from './hooks/useProxyModelValue.js';
-
-const ListItem = [
-// Interactivity (draggable)
-'draggable:interactivity-drag',
-// Spacing
-'px-md md:px-sm', 'py-md md:py-sm',
-// Shape
-'rounded-md',
-// Theme (hover)
-'hover:theme-background-primary-translucent-1', 'dark:hover:theme-background-primary-translucent-1-dark',
-// Theme (focus)
-'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
-// Theme (selected)
-'selected:theme-background-primary-translucent-3', 'dark:selected:theme-background-primary-translucent-3-dark'];
-const ListItemContent = [
-// Layout
-'layout-row',
-// Spacing
-'px-md md:px-sm', 'py-md md:py-sm', 'gap-sm'];
-
-var script$1 = defineComponent({
-  props: {
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    draggable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-list-item-v3', ...ListItem]);
-    const contentStyles = computed(() => [...ListItemContent]);
-    return {
-      root,
-      rootStyles,
-      contentStyles
-    };
-  }
-});
-
-const _hoisted_1 = ["selected", "disabled", "draggable"];
-const _hoisted_2 = ["disabled"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles),
-    selected: _ctx.selected,
-    disabled: _ctx.disabled,
-    draggable: _ctx.draggable
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.contentStyles),
-    disabled: _ctx.disabled
-  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_2)], 10 /* CLASS, PROPS */, _hoisted_1);
-}
-
-script$1.render = render;
-script$1.__file = "src/components/or-list-v3/partials/or-list-item/OrListItem.vue";
-
-var script = defineComponent({
-  components: {
-    OrIconButton: script$2,
-    OrLabel: script$3,
-    OrListItem: script$1
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    selection: {
-      type: Array,
-      default: () => []
-    },
-    itemFactory: {
-      type: Function,
-      default: () => ({})
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    canAdd: {
-      type: Boolean,
-      default: true
-    },
-    canDelete: {
-      type: Boolean,
-      default: true
-    },
-    canReorder: {
-      type: Boolean,
-      default: true
-    }
-  },
-  emits: ['update:modelValue', 'before:add', 'before:delete', 'before:reorder', 'add', 'delete', 'reorder'],
-  expose: ['root'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    const content = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-list-v3', ...List]);
-    const contentStyles = computed(() => [...ListContent]);
-    // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    // Effects
-    // #region Sortable
-    let sortable;
-    watch([content, () => props.canReorder], _ref => {
-      let [content, canReorder] = _ref;
-      sortable === null || sortable === void 0 ? void 0 : sortable.destroy();
-      sortable = undefined;
-      if (content && canReorder) {
-        sortable = Sortable.create(content, {
-          disabled: props.disabled,
-          onUpdate: event => {
-            context.emit('before:reorder', proxyModelValue.value);
-            const nextModelValue = [...proxyModelValue.value];
-            const reorderedItem = nextModelValue.splice(event.oldIndex, 1)[0];
-            nextModelValue.splice(event.newIndex, 0, reorderedItem);
-            context.emit('reorder', reorderedItem, event.newIndex, event.oldIndex, proxyModelValue.value = nextModelValue);
-          }
-        });
-      }
-    });
-    watch(() => props.disabled, value => {
-      sortable === null || sortable === void 0 ? void 0 : sortable.option('disabled', value);
-    });
-    // #endregion
-    // Methods
-    function addItem() {
-      context.emit('before:add', proxyModelValue.value);
-      const addedItem = props.itemFactory();
-      const nextModelValue = [...proxyModelValue.value, addedItem];
-      context.emit('add', addedItem, nextModelValue.indexOf(addedItem), proxyModelValue.value = nextModelValue);
-    }
-    function deleteItem(index) {
-      context.emit('before:delete', proxyModelValue.value);
-      const deletedItem = proxyModelValue.value[index];
-      const nextModelValue = proxyModelValue.value.filter(item => item !== deletedItem);
-      context.emit('delete', deletedItem, index, proxyModelValue.value = nextModelValue);
-    }
-    // Handlers
-    // function onDragStart(event: DragEvent): void {
-    //   console.log('dragstart', event);
-    // }
-    // function onDragEnter(event: DragEvent): void {
-    //   console.log('dragenter', event);
-    // }
-    // function onDragOver(event: DragEvent): void {
-    //   console.log('dragover', event);
-    // }
-    // function onDragLeave(event: DragEvent): void {
-    //   console.log('dragleave', event);
-    // }
-    // function onDragEnd(event: DragEvent): void {
-    //   console.log('dragend', event);
-    // }
-    // function onDrop(event: DragEvent): void {
-    //   console.log('drop', event);
-    // }
-    return {
-      root,
-      content,
-      rootStyles,
-      contentStyles,
-      proxyModelValue,
-      addItem,
-      deleteItem,
-      // onDragStart,
-      // onDragEnter,
-      // onDragOver,
-      // onDragLeave,
-      // onDragEnd,
-      // onDrop,
-      uuid: v4
-    };
-  }
-});
-
-export { script$1 as a, script as s };

package/dist/bundled/v3/OrListOfInputs.vue_vue_type_script_lang-34a006d0.js

@@ -1,79 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import './components/OrList/OrList.js';
-import { s as script$1 } from './OrList.vue_vue_type_script_lang-8df85a8d.js';
-import './components/OrInput/OrInput.js';
-import './components/OrIcon/OrIcon.js';
-import './components/OrIconButtonV2/OrIconButton.js';
-import { s as script$2 } from './OrInput.vue_vue_type_script_lang-515ff78a.js';
-import { s as script$3 } from './OrIcon.vue_vue_type_script_lang-f3cbff23.js';
-import { s as script$4 } from './OrIconButton.vue_vue_type_script_lang-f6bf7dda.js';
-
-var script = defineComponent({
-  name: 'OrListOfInputs',
-  components: {
-    OrList: script$1,
-    OrInput: script$2,
-    OrIcon: script$3,
-    OrIconButton: script$4
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => [],
-      required: true
-    },
-    buttonLabel: {
-      type: String,
-      default: '',
-      required: false
-    },
-    label: {
-      type: String,
-      default: '',
-      required: false
-    },
-    inputProps: {
-      type: Object,
-      default: () => ({
-        value: ''
-      }),
-      required: false
-    },
-    canDrag: {
-      type: Boolean,
-      default: true,
-      required: false
-    },
-    canDelete: {
-      type: Boolean,
-      default: true,
-      required: false
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-      required: false
-    }
-  },
-  emits: ['update:modelValue', 'item-before-add', 'item-added', 'item-before-delete', 'item-deleted'],
-  data() {
-    console.warn('OrListOfInputs is being deprecated, consider using OrList.');
-    return {
-      listOfInputs: this.modelValue
-    };
-  },
-  watch: {
-    modelValue: {
-      handler(nv) {
-        this.listOfInputs = nv;
-      },
-      deep: true
-    }
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrLoader.vue_vue_type_script_lang-52edc8f8.js

@@ -1,80 +0,0 @@
-import { h as useElementSize } from './index-06852368.js';
-import { defineComponent, ref, computed } from 'vue-demi';
-import { LoaderVariant, LoaderColor, LoaderSize } from './components/OrLoaderV3/props.js';
-import { LoaderRoot, LoaderRootColors, LoaderTitle, LoaderDescription, LoaderContainer } from './components/OrLoaderV3/styles.js';
-
-var script = defineComponent({
-  name: 'OrLoader',
-  props: {
-    variant: {
-      type: String,
-      default: LoaderVariant.Circular
-    },
-    /**
-     * Defines a semantic color of the loading indicator.
-     * Use `'inherit'` option to set your own color from the parent (not recommended).
-     */
-    color: {
-      type: String,
-      default: LoaderColor.Primary
-    },
-    /**
-     * Defines a diameter of the circular loader. Ignored for linear one.
-     */
-    size: {
-      type: String,
-      default: LoaderSize.M
-    },
-    title: {
-      type: String,
-      default: undefined
-    },
-    description: {
-      type: String,
-      default: undefined
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    const {
-      width: loaderContainerWidth
-    } = useElementSize(root);
-    // Styles
-    const rootStyles = computed(() => ['or-loader-v3', ...LoaderRoot, ...LoaderRootColors[props.color]]);
-    const titleStyles = computed(() => [...LoaderTitle]);
-    const descriptionStyles = computed(() => [...LoaderDescription]);
-    const containerStyles = computed(() => [...LoaderContainer]);
-    // State
-    const computedSize = computed(() => {
-      switch (props.size) {
-        case LoaderSize.M:
-          return 20;
-        case LoaderSize.S:
-          return 16;
-      }
-    });
-    const strokeWidth = computed(() => {
-      return loaderContainerWidth.value ? loaderContainerWidth.value - 2 : '100%';
-    });
-    /**
-     * Preserves circular loading indicator from shrinking caused by external styles.
-     */
-    const wrapperStyle = computed(() => {
-      return `min-width: ${computedSize.value}px;`;
-    });
-    return {
-      root,
-      rootStyles,
-      containerStyles,
-      titleStyles,
-      descriptionStyles,
-      computedSize,
-      strokeWidth,
-      wrapperStyle
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrLoader.vue_vue_type_script_lang-a1fed697.js

@@ -1,48 +0,0 @@
-import { defineComponent } from 'vue-demi';
-import { isEmpty } from './utils/isEmpty.js';
-import { LoaderViews } from './components/OrLoader/constants.js';
-
-var script = defineComponent({
-  name: 'OrLoader',
-  props: {
-    type: {
-      type: String,
-      default: LoaderViews.default,
-      required: false
-    },
-    textTypeLabel: {
-      type: String,
-      default: null,
-      required: false
-    },
-    linearTitle: {
-      type: String,
-      default: '',
-      required: false
-    },
-    linearDescription: {
-      type: String,
-      default: '',
-      required: false
-    }
-  },
-  computed: {
-    rootClasses() {
-      return ['or-loader', `is-${this.type}`];
-    },
-    isTextType() {
-      return this.type === LoaderViews.text;
-    },
-    isLinearType() {
-      return this.type === LoaderViews.linear;
-    },
-    isEmptyLinearDescription() {
-      return isEmpty(this.linearDescription);
-    },
-    isEmptyLinearTitle() {
-      return isEmpty(this.linearTitle);
-    }
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrMenu.vue_vue_type_script_lang-3feb056b.js

@@ -1,76 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { Menu } from './components/OrMenuV3/styles.js';
-import './components/OrPopoverV3/OrPopover.js';
-import { s as script$1 } from './OrPopover.vue_vue_type_script_lang-877797ba.js';
-import { PopoverPlacement } from './components/OrPopoverV3/props.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
-
-var script = defineComponent({
-  components: {
-    OrPopover: script$1
-  },
-  inheritAttrs: false,
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    trigger: {
-      type: [Object, HTMLElement],
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: PopoverPlacement.Bottom
-    },
-    offset: {
-      type: [Number, Object, Function],
-      default: undefined
-    },
-    // TODO: Remove after migration to Vue 3
-    additionalStyles: {
-      type: Array,
-      default: () => []
-    }
-  },
-  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', ...Menu]);
-    const popoverStyles = computed(() => ['or-menu-popover-v3']);
-    // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
-    // 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,
-      popoverStyles,
-      state,
-      open,
-      close,
-      toggle,
-      onClick
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrMenuItem.vue_vue_type_script_lang-0ac024bf.js

@@ -1,39 +0,0 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { MenuItemRoot } from './components/OrMenuItemV3/styles.js';
-import './components/OrIconV3/OrIcon.js';
-import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-db2e3f85.js';
-
-var script = defineComponent({
-  name: 'OrMenuItem',
-  components: {
-    OrIcon: script$1
-  },
-  props: {
-    icon: {
-      type: [String, Object],
-      default: undefined
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['click', 'focus', 'blur'],
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-menu-item-v3', ...MenuItemRoot]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrModal.vue_vue_type_script_lang-4a14c3ae.js

@@ -1,163 +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-667eefbf.js';
-import { ModalSize } from './components/OrModalV3/props.js';
-import { Modal, ModalSizes } from './components/OrModalV3/styles.js';
-import './components/OrOverlayV3/OrOverlay.js';
-import { s as script$5 } from './OrOverlay.vue_vue_type_script_lang-4a0cd054.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
-
-const ModalContent = [
-// 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
-    },
-    // TODO: Remove after migration to Vue 3
-    additionalStyles: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-v3', ...Modal, ...ModalSizes[props.size], ...props.additionalStyles]);
-    // State
-    const {
-      state,
-      open,
-      close
-    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
-    return {
-      root,
-      rootStyles,
-      state,
-      open,
-      close
-    };
-  }
-});
-
-export { script as s };