@onereach/ui-components 20.1.0 → 20.1.2

package/dist/esm-deps/components/or-autocomplete-v3/index.js

@@ -1,383 +0,0 @@
-import { computedAsync, watchTriggerable } from '@vueuse/core';
-import { defineComponent, reactive, ref, computed, toRef, nextTick } from 'vue';
-import { K, _, i as ie, n as ne, r as re } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import { s, c } from '../../dropdown-open-k6cFnrqA-b1726667.js';
-import { aa as $s, ag as T, an as Fs, a1 as ds } from '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '../../dom-CwV-xS38-5babad01.js';
-import '../../OrHint-fcdf591c.js';
-import { OrErrorV3 as script$1 } from '../or-error-v3/index.js';
-import { OrHintV3 as script$2 } from '../or-hint-v3/index.js';
-import '../../OrIconButton-b7d4175c.js';
-import { OrIconButtonV3 as script$3 } from '../or-icon-button-v3/index.js';
-import '../../OrInputBox-e79531c2.js';
-import { OrInputBoxV3 as script$4 } from '../or-input-box-v3/index.js';
-import '../../OrInput-4fcaf87c.js';
-import { OrInputV3 as script$5 } from '../or-input-v3/index.js';
-import '../../OrLabel-d50a3ebb.js';
-import { OrLabelV3 as script$6 } from '../or-label-v3/index.js';
-import '../../OrLoader-4e331586.js';
-import { OrLoaderV3 as script$7 } from '../or-loader-v3/index.js';
-import '../../OrMenuItem-c40a275b.js';
-import { OrMenuItemV3 as script$8 } from '../or-menu-item-v3/index.js';
-import '../../OrPopover-bd078650.js';
-import { OrPopoverV3 as script$9 } from '../or-popover-v3/index.js';
-import '../../OrTagInput-4439b294.js';
-import { OrTagInputV3 as script$a } from '../or-tag-input-v3/index.js';
-import { TagsOverflow } from '../or-tags-v3/index.js';
-import { a as InputBoxVariant } from '../../types-98e9a758.js';
-import 'lodash/get';
-import 'lodash/isElement';
-import '../../constants-57e8b5da.js';
-import '../../OrIcon-cd8db2b5.js';
-import '../or-icon-v3/index.js';
-import '../../OrTooltip-62181b78.js';
-import '../or-tooltip-v3/index.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
-import '../or-bottom-sheet-v3/index.js';
-import '../../OrOverlay-d67e7093.js';
-import '../or-overlay-v3/index.js';
-import '../or-teleport-v3/index.js';
-import '../../style-inject.es-87955792.js';
-import '../../OrTags-995e4846.js';
-import '../or-tag-v3/index.js';
-import '../../OrButton-91f48227.js';
-import '../or-button-v3/index.js';
-import '../../props-bba3dca8.js';
-
-const Autocomplete = [
-// Layout
-'layout-column',
-// Spacing
-'gap-xs'];
-const AutocompleteControl = [
-// Box
-'w-full',
-// Typography
-'typography-inherit',
-// Theme
-'theme-background-transparent', 'dark:theme-background-transparent-dark', 'outline-none',
-// Theme (placeholder)
-'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
-const AutocompleteDropdown = [
-// Overflow
-'overflow-y-auto',
-// Box
-'max-h-[172px]',
-// equals 5 items
-// Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark'];
-const AutocompleteDropdownDefault = [
-// Shape
-'rounded-b-md',
-// Theme
-'!border-t-0'];
-const AutocompleteDropdownFlipped = [
-// Shape
-'rounded-t-md',
-// Theme
-'!border-b-0'];
-const AutocompleteDropdownItem = [
-// Typography
-'!typography-body-2-regular',
-// Padding Override todo: check design
-'py-md px-lg md:!pt-[6px] md:pb-[7px]',
-// Typography (selected)
-'selected:!typography-body-2-semibold',
-// Theme
-'!theme-foreground-default dark:!theme-foreground-default-dark'];
-const AutocompleteLoader = [
-// Layout
-'w-fit',
-// Typography
-'typography-body-2-regular',
-// Theme
-'text-outline dark:text-outline-dark'];
-const AutocompleteLoaderContainer = [
-// Spacing
-'py-md px-lg  md:px-sm+ md:py-xs'];
-const AutocompleteInputBoxOpen = ['rounded-b-0'];
-const AutocompleteInputBoxOpenFlipped = ['rounded-t-0'];
-
-var script = defineComponent({
-  name: 'OrAutocomplete',
-  components: {
-    OrError: script$1,
-    OrHint: script$2,
-    OrIconButton: script$3,
-    OrInputBox: script$4,
-    OrInput: script$5,
-    OrLabel: script$6,
-    OrLoader: script$7,
-    OrMenuItem: script$8,
-    OrPopover: script$9,
-    OrTagInput: script$a
-  },
-  directives: {
-    DropdownClose: s,
-    DropdownOpen: c
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: undefined,
-      default: undefined
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    overflow: {
-      type: String,
-      default: () => TagsOverflow.Hidden
-    },
-    variant: {
-      type: String,
-      default: undefined
-    },
-    size: {
-      type: String,
-      default: undefined
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    },
-    hint: {
-      type: String,
-      default: undefined
-    },
-    error: {
-      type: [String, Boolean],
-      default: undefined
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    loadingText: {
-      type: String,
-      default: 'Loading'
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    enableClear: {
-      type: Boolean,
-      default: false
-    },
-    searchFunction: {
-      type: Function,
-      default: async (value, items) => {
-        return value.length > 0 ? items.filter(item => new RegExp(value, 'i').test(item)) : [];
-      }
-    }
-  },
-  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
-  expose: ['root', 'popover', 'popoverState', 'reset', 'clear', 'focus', 'blur'],
-  setup(props, context) {
-    const attributes = reactive({
-      id: K(),
-      ..._(),
-      ...ie()
-    });
-    // Refs
-    const root = ref();
-    const tagInput = ref();
-    const tagInputRoot = computed(() => {
-      var _a;
-      return (_a = tagInput.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const inputBox = ref();
-    const inputBoxRoot = computed(() => {
-      var _a;
-      return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const control = ref();
-    const mobileSingleControl = ref();
-    const mobileMultipleControl = ref();
-    const popover = ref();
-    const popoverRoot = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const popoverState = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
-    });
-    const popoverFlipped = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped;
-    });
-    const activated = ref(false);
-    // Helpers
-    const {
-      isMobile
-    } = ne();
-    // Styles
-    const rootStyles = computed(() => ['or-autocomplete-v3', ...Autocomplete, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
-    const controlStyles = computed(() => [...AutocompleteControl]);
-    const dropdownStyles = computed(() => {
-      var _a;
-      return ['or-autocomplete-popover-v3', ...AutocompleteDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? AutocompleteDropdownFlipped : AutocompleteDropdownDefault)];
-    });
-    const dropdownItemStyles = computed(() => [...AutocompleteDropdownItem]);
-    const loaderStyles = computed(() => [...AutocompleteLoader]);
-    const loaderContainerStyles = computed(() => [...AutocompleteLoaderContainer]);
-    const boxOpenStyles = computed(() => [...(popoverState.value === 'open' && !isMobile.value ? popoverFlipped.value ? AutocompleteInputBoxOpenFlipped : AutocompleteInputBoxOpen : [])]);
-    // State
-    const model = re(toRef(props, 'modelValue'), context.emit);
-    const searchText = ref();
-    const filteredItems = computedAsync(async () => {
-      return searchText.value ? (await props.searchFunction(searchText.value, props.items)).filter(item => {
-        var _a;
-        return !((_a = model.value) === null || _a === void 0 ? void 0 : _a.includes(item));
-      }) : [];
-    }, []);
-    // Handlers
-    function onInput(event) {
-      searchText.value = event.target.value;
-    }
-    // Methods
-    function add(value) {
-      if (props.multiple) {
-        model.value = $s(value, T(model.value) ? [] : Fs(model.value));
-      } else {
-        model.value = value;
-        if (isMobile.value) {
-          closeMobilePopover();
-        }
-      }
-      clear();
-    }
-    function remove(value) {
-      model.value = ds(value, T(model.value) ? [] : Fs(model.value));
-    }
-    function reset() {
-      model.value = undefined;
-      clear();
-    }
-    function clear() {
-      var _a, _b, _c, _d;
-      searchText.value = undefined;
-      if (isMobile.value) {
-        (_b = (_a = mobileMultipleControl.value) === null || _a === void 0 ? void 0 : _a.clear) === null || _b === void 0 ? void 0 : _b.call(_a);
-      } else {
-        (_d = (_c = tagInput.value) === null || _c === void 0 ? void 0 : _c.clear) === null || _d === void 0 ? void 0 : _d.call(_c);
-      }
-    }
-    function focus() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function blur() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    function focusMobileControl() {
-      var _a, _b;
-      if (props.multiple) {
-        (_a = mobileMultipleControl.value) === null || _a === void 0 ? void 0 : _a.activate();
-      } else {
-        (_b = mobileSingleControl.value) === null || _b === void 0 ? void 0 : _b.focus();
-      }
-    }
-    function onFocus(event) {
-      activated.value = true;
-      context.emit('focus', event);
-      if (isMobile.value) return;
-      triggerPopover();
-    }
-    function onBlur(event) {
-      activated.value = false;
-      context.emit('blur', event);
-    }
-    function openMobilePopover() {
-      var _a;
-      if (!isMobile.value) return;
-      if (!props.readonly && !props.disabled) {
-        (_a = popover.value) === null || _a === void 0 ? void 0 : _a.open();
-        nextTick(() => {
-          setTimeout(() => focusMobileControl());
-        });
-      }
-    }
-    function closeMobilePopover() {
-      var _a;
-      if (!isMobile.value) return;
-      (_a = popover.value) === null || _a === void 0 ? void 0 : _a.close();
-    }
-    const {
-      trigger: triggerPopover
-    } = watchTriggerable([filteredItems, toRef(props, 'loading')], ([items, loading]) => {
-      var _a, _b;
-      if (isMobile.value) return;
-      if ((items.length > 0 || loading) && activated.value) {
-        (_a = popover.value) === null || _a === void 0 ? void 0 : _a.open();
-      } else {
-        (_b = popover.value) === null || _b === void 0 ? void 0 : _b.close();
-      }
-    });
-    return {
-      attributes,
-      root,
-      rootStyles,
-      tagInput,
-      tagInputRoot,
-      inputBox,
-      inputBoxRoot,
-      boxOpenStyles,
-      control,
-      mobileSingleControl,
-      mobileMultipleControl,
-      controlStyles,
-      popover,
-      popoverRoot,
-      popoverState,
-      loaderStyles,
-      loaderContainerStyles,
-      dropdownStyles,
-      dropdownItemStyles,
-      model,
-      searchText,
-      filteredItems,
-      activated,
-      onFocus,
-      onBlur,
-      onInput,
-      add,
-      remove,
-      reset,
-      clear,
-      triggerPopover,
-      openMobilePopover,
-      closeMobilePopover,
-      focus,
-      blur,
-      isMobile
-    };
-  }
-});
-
-export { script as OrAutocompleteV3 };

package/dist/esm-deps/components/or-button-group-v3/index.js

@@ -1,55 +0,0 @@
-import { defineComponent, ref, computed } from 'vue';
-import { B as ButtonVariant, a as ButtonColor } from '../../props-bba3dca8.js';
-
-const ButtonGroup = [
-// Layout
-'layout-row',
-// Shape (children)
-'[&:not(:first-child)]:children:rounded-l-0', '[&:not(:last-child)]:children:rounded-r-0'];
-const ButtonGroupVariants = {
-  [ButtonVariant.Contained]: [
-  // Spacing
-  'gap-[1px]'],
-  [ButtonVariant.Outlined]: [
-  // Position (children)
-  'children:relative',
-  // Position (children:active)
-  'active:children:z-10',
-  // Spacing (children)
-  '[&:not(:first-child)]:children:-ml-[1px]'],
-  [ButtonVariant.Text]: [
-  // Theme
-  'theme-divider-outline-variant', 'dark:theme-divider-outline-variant-dark'],
-  [ButtonVariant.Link]: []
-};
-
-var script = defineComponent({
-  name: 'OrButtonGroup',
-  props: {
-    variant: {
-      type: String,
-      default: () => ButtonVariant.Contained
-    },
-    color: {
-      type: String,
-      default: () => ButtonColor.Primary
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  expose: ['root'],
-  setup(props) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-button-group-v3', ...ButtonGroup, ...ButtonGroupVariants[props.variant]]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-export { script as OrButtonGroupV3 };

package/dist/esm-deps/components/or-checkbox-group-v3/index.js

@@ -1,155 +0,0 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createElementVNode, createBlock, withCtx, createVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, renderList, defineComponent, toRef } from 'vue';
-import { r as re } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import { OrCheckboxTreeV3 as script$1 } from '../or-checkbox-tree-v3/index.js';
-import '../../OrFormGroup-081248a1.js';
-import { OrFormGroupV3 as script$2, FormGroupDirection } from '../or-form-group-v3/index.js';
-import '../../dom-CwV-xS38-5babad01.js';
-import 'lodash/get';
-import 'lodash/isElement';
-import '@vueuse/core';
-import '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '../../OrIcon-cd8db2b5.js';
-import '../or-icon-v3/index.js';
-import '../../OrCheckbox-cfd587f1.js';
-import '../or-checkbox-v3/index.js';
-import '../../OrLabel-d50a3ebb.js';
-import '../or-label-v3/index.js';
-import '../../OrButton-91f48227.js';
-import '../or-button-v3/index.js';
-import '../../props-bba3dca8.js';
-import '../../constants-57e8b5da.js';
-import '../../OrLoader-4e331586.js';
-import '../or-loader-v3/index.js';
-import '../../OrHint-fcdf591c.js';
-import '../or-error-v3/index.js';
-import '../or-hint-v3/index.js';
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrIcon = resolveComponent("OrIcon");
-  const _component_OrButton = resolveComponent("OrButton");
-  const _component_OrCheckbox = resolveComponent("OrCheckbox");
-  const _component_OrCheckboxTree = resolveComponent("OrCheckboxTree", true);
-  return openBlock(), createElementBlock("div", {
-    ref: 'root',
-    class: normalizeClass(_ctx.rootStyles)
-  }, [_ctx.hasChildren ? (openBlock(), createElementBlock(Fragment, {
-    key: 0
-  }, [createElementVNode("div", {
-    class: normalizeClass(_ctx.parentStyles)
-  }, [_ctx.collapsible ? (openBlock(), createBlock(_component_OrButton, {
-    key: 0,
-    variant: 'link',
-    disabled: _ctx.disabled,
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.setIsOpen(!_ctx.isOpen))
-  }, {
-    default: withCtx(() => [createVNode(_component_OrIcon, {
-      class: normalizeClass([_ctx.isOpen ? 'rotate-[180deg]' : 'rotate-0']),
-      icon: 'arrow_drop_down',
-      size: 'l'
-    }, null, 8 /* PROPS */, ["class"])]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrCheckbox, {
-    "model-value": _ctx.isAllChildrenSelected,
-    value: true,
-    indeterminate: _ctx.isIntermediate,
-    disabled: _ctx.disabled,
-    readonly: _ctx.readonly,
-    onClick: _ctx.handleParentClick
-  }, {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "checkboxLabel", {
-      item: _ctx.item
-    }, () => [createTextVNode(toDisplayString(_ctx.item.label), 1 /* TEXT */)])]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["model-value", "indeterminate", "disabled", "readonly", "onClick"])], 2 /* CLASS */), _ctx.hasChildren && _ctx.isOpen ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    class: normalizeClass([_ctx.collapsible ? 'ml-2xl' : 'ml-lg'])
-  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.item.children, child => {
-    return openBlock(), createBlock(_component_OrCheckboxTree, {
-      key: child.value || child.label,
-      modelValue: _ctx.proxyModelValue,
-      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.proxyModelValue = $event),
-      class: normalizeClass(['mt-xs']),
-      item: child,
-      collapsible: child.collapsible,
-      expanded: child.expanded,
-      disabled: _ctx.disabled || child.disabled,
-      readonly: _ctx.readonly || child.readonly
-    }, {
-      checkboxLabel: withCtx(({
-        item
-      }) => [renderSlot(_ctx.$slots, "checkboxLabel", {
-        item: item
-      }, () => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)])]),
-      _: 2 /* DYNAMIC */
-    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "item", "collapsible", "expanded", "disabled", "readonly"]);
-  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createBlock(_component_OrCheckbox, {
-    key: 1,
-    modelValue: _ctx.proxyModelValue,
-    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.proxyModelValue = $event),
-    value: _ctx.item.value,
-    disabled: _ctx.disabled || _ctx.item.disabled,
-    readonly: _ctx.readonly || _ctx.item.readonly
-  }, {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "checkboxLabel", {
-      item: _ctx.item
-    }, () => [createTextVNode(toDisplayString(_ctx.item.label), 1 /* TEXT */)])]),
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["modelValue", "value", "disabled", "readonly"]))], 2 /* CLASS */);
-}
-
-script$1.render = render;
-script$1.__file = "src/components/or-checkbox-tree-v3/OrCheckboxTree.vue";
-
-var script = defineComponent({
-  name: 'OrCheckboxGroup',
-  components: {
-    OrCheckboxTree: script$1,
-    OrFormGroup: script$2
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => []
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    error: {
-      type: String,
-      default: ''
-    },
-    hint: {
-      type: String,
-      default: ''
-    },
-    direction: {
-      type: String,
-      default: () => FormGroupDirection.Vertical
-    },
-    options: {
-      type: Array,
-      default: () => []
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props, context) {
-    const proxyModelValue = re(toRef(props, 'modelValue'), context.emit);
-    return {
-      proxyModelValue
-    };
-  }
-});
-
-export { script as OrCheckboxGroupV3 };