@onereach/ui-components 2.68.0-beta.2053.0 → 2.68.0-beta.2056.0

package/dist/bundled/v2/OrSelect-adfdec03.js

@@ -1,515 +0,0 @@
-import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
-import { O as OrCheckbox } from './OrCheckbox-a8826ecb.js';
-import { O as OrError } from './OrError-69657c22.js';
-import { _ as __vue_component__$2 } from './OrExpansionPanel-edc9d46a.js';
-import { O as OrHint } from './OrHint-6ef683ff.js';
-import { O as OrIcon } from './OrIcon-14cdfa12.js';
-import { O as OrInput } from './OrInput-ab9d4fc9.js';
-import { _ as __vue_component__$3, I as InputBoxSize } from './OrInputBox-9e202d87.js';
-import { O as OrLabel } from './OrLabel-1cb3fc95.js';
-import __vue_component__$4 from './components/OrMenuItem/OrMenuItem.js';
-import { _ as __vue_component__$5 } from './OrPopover-08d41a4f.js';
-import { O as OrTag } from './OrTag-4dfc9206.js';
-import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
-import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { u as useOverflow } from './useOverflow-ac506c65.js';
-import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-
-const SelectRoot = [
-// Layout
-'flex', 'flex-col',
-// Sizing
-'gap-xs'];
-const SelectControl = [
-// Layout
-'flex grow', 'items-center', 'overflow-hidden',
-// Sizing
-'gap-xs',
-// Typography
-'typography-inherit'];
-const SelectPlaceholder = [
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-const SelectDropdown = [
-// Layout
-'overflow-y-auto',
-// Box
-'max-h-[340px]', 'rounded-b-md',
-// Theme
-'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark', '!border-t-0'];
-const SelectNoSearchResults = [
-// Layout
-'flex', 'items-center', 'justify-center',
-// Sizing
-'px-md', 'py-md',
-// Typography
-'typography-caption-regular',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
-
-var script = defineComponent({
-  name: 'OrSelect',
-  components: {
-    OrCheckbox,
-    OrError,
-    OrExpansionPanel: __vue_component__$2,
-    OrHint,
-    OrIcon,
-    OrInput,
-    OrInputBox: __vue_component__$3,
-    OrLabel,
-    OrMenuItem: __vue_component__$4,
-    OrPopover: __vue_component__$5,
-    OrTag
-  },
-  directives: {
-    DropdownClose,
-    DropdownOpen
-  },
-  inheritAttrs: false,
-  props: {
-    options: {
-      type: Array,
-      default: []
-    },
-    searchOptions: {
-      type: Array,
-      default: []
-    },
-    modelValue: {
-      type: [String, Array],
-      default: undefined
-    },
-    value: {
-      type: [String, Array],
-      default: undefined
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: InputBoxSize.M
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    },
-    hint: {
-      type: String,
-      default: undefined
-    },
-    error: {
-      type: String,
-      default: undefined
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    enableSearch: {
-      type: Boolean,
-      default: false
-    },
-    searchFunction: {
-      type: Function,
-      default: async (searchText, options) => {
-        return options.filter(({
-          label
-        }) => label.toLowerCase().includes(searchText.toLowerCase()));
-      }
-    },
-    groupByFunction: {
-      type: Function,
-      default: undefined
-    },
-    externalControl: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue', 'input', 'focus', 'blur', 'search'],
-  expose: ['root'],
-  setup(props, context) {
-    var _a;
-    const currentInstance = getCurrentInstance();
-    // Refs
-    const root = ref();
-    const inputBox = ref();
-    const inputBoxRoot = computed(() => {
-      var _a;
-      return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const control = 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;
-    });
-    // Styles
-    const classAttribute = useClassAttribute();
-    const rootStyles = computed(() => ['or-select', ...SelectRoot, classAttribute.value]);
-    const controlStyles = computed(() => [...SelectControl]);
-    const placeholderStyles = computed(() => [...SelectPlaceholder]);
-    const dropdownStyles = computed(() => [...SelectDropdown]);
-    const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
-    // State
-    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
-    const proxyModelValue = computed({
-      get: () => {
-        var _a;
-        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
-      },
-
-      set: value => {
-        context.emit('input', value);
-        context.emit('update:modelValue', value);
-      }
-    });
-    onMounted(() => {
-      if (!proxyModelValue.value && props.multiple) {
-        proxyModelValue.value = [];
-      }
-    });
-    const invalid = computed(() => !!props.error);
-    const readonly = computed(() => context.attrs.readonly);
-    const selection = computed(() => {
-      const modelValue = proxyModelValue.value;
-      if (Array.isArray(modelValue)) {
-        return modelValue.map(value => props.options.find(option => option.value === value));
-      }
-      return props.options.find(option => option.value === modelValue);
-    });
-    const internalSearchOptions = ref(props.options);
-    const resolvedSearchOptions = computed(() => {
-      return props.externalControl ? props.searchOptions : internalSearchOptions.value;
-    });
-    const searchText = ref('');
-    watch([() => props.externalControl, searchText, () => props.options], async ([externalControl, searchText, options]) => {
-      if (externalControl) {
-        context.emit('search', searchText);
-      } else {
-        internalSearchOptions.value = await props.searchFunction(searchText, options);
-      }
-    });
-    const groupedOptions = computed(() => {
-      const groupBy = props.groupByFunction;
-      if (groupBy) {
-        return internalSearchOptions.value.reduce((accumulator, option) => {
-          var _a;
-          const group = groupBy(option);
-          return {
-            ...accumulator,
-            [group]: [...((_a = accumulator[group]) !== null && _a !== void 0 ? _a : []), option]
-          };
-        }, {});
-      }
-      return {
-        '': props.options
-      };
-    });
-    // Methods
-    function toggle() {
-      if (!readonly.value && !props.disabled) {
-        const popoverInstance = popover.value;
-        if (popoverInstance) {
-          if (popoverState.value === 'open') {
-            popoverInstance.close();
-          } else {
-            popoverInstance.open();
-          }
-        }
-      }
-    }
-    function close() {
-      const popoverInstance = popover.value;
-      if (popoverInstance) {
-        popoverInstance.close();
-      }
-    }
-    function deselect(option) {
-      const modelValue = proxyModelValue.value;
-      if (Array.isArray(modelValue)) {
-        proxyModelValue.value = modelValue.filter(value => value !== option.value);
-      }
-    }
-    const {
-      innerItems,
-      outerItems
-    } = useOverflow(control);
-    return {
-      root,
-      inputBox,
-      inputBoxRoot,
-      control,
-      popover,
-      popoverRoot,
-      popoverState,
-      rootStyles,
-      controlStyles,
-      placeholderStyles,
-      dropdownStyles,
-      noSearchResultsStyles,
-      controlId,
-      proxyModelValue,
-      invalid,
-      readonly,
-      selection,
-      searchText,
-      internalSearchOptions,
-      resolvedSearchOptions,
-      groupedOptions,
-      toggle,
-      close,
-      deselect,
-      innerItems,
-      outerItems
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', _vm._b({
-    ref: "root",
-    class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_vm.label ? [_c('OrLabel', {
-    attrs: {
-      "control-id": _vm.controlId,
-      "variant": 'input',
-      "required": _vm.required,
-      "disabled": _vm.disabled
-    },
-    scopedSlots: _vm._u([{
-      key: "addon",
-      fn: function () {
-        return [_vm._t("addon")];
-      },
-      proxy: true
-    }], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
-    directives: [{
-      name: "dropdown-open",
-      rawName: "v-dropdown-open",
-      value: _vm.toggle,
-      expression: "toggle"
-    }, {
-      name: "dropdown-close",
-      rawName: "v-dropdown-close",
-      value: _vm.close,
-      expression: "close"
-    }],
-    ref: "inputBox",
-    class: [_vm.popoverState === 'open' && 'rounded-b-0'],
-    attrs: {
-      "size": _vm.size,
-      "invalid": _vm.invalid,
-      "readonly": _vm.readonly,
-      "disabled": _vm.disabled
-    }
-  }, [_c('div', {
-    ref: "control",
-    class: _vm.controlStyles,
-    attrs: {
-      "id": _vm.controlId,
-      "tabindex": !_vm.disabled ? 0 : null,
-      "disabled": _vm.disabled
-    },
-    on: {
-      "focus": function ($event) {
-        return _vm.$emit('focus', $event);
-      },
-      "blur": function ($event) {
-        return _vm.$emit('blur', $event);
-      }
-    }
-  }, [_vm.proxyModelValue && _vm.proxyModelValue.length > 0 ? [_vm.multiple ? [_vm._t("valueTemplate", function () {
-    return _vm._l(_vm.selection, function (option) {
-      return _c('OrTag', {
-        key: option.value,
-        attrs: {
-          "variant": 'reset'
-        },
-        on: {
-          "reset": function ($event) {
-            return _vm.deselect(option);
-          }
-        }
-      }, [_vm._v("\n              " + _vm._s(option.label) + "\n            ")]);
-    });
-  }, {
-    "model": _vm.proxyModelValue
-  })] : [_vm._t("valueTemplate", function () {
-    return [_vm._v("\n            " + _vm._s(_vm.selection.label) + "\n          ")];
-  }, {
-    "model": _vm.proxyModelValue
-  })]] : [_c('span', {
-    class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _c('OrIcon', {
-    attrs: {
-      "icon": _vm.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
-      "variant": 'outlined'
-    }
-  }), _vm._v(" "), _c('OrPopover', {
-    ref: "popover",
-    class: _vm.dropdownStyles,
-    attrs: {
-      "variant": 'auto',
-      "trigger": _vm.inputBoxRoot,
-      "placement": 'bottom',
-      "full-width": true,
-      "disable-default-styles": true
-    }
-  }, [_vm.enableSearch ? [_c('OrInput', {
-    attrs: {
-      "type": 'search',
-      "placeholder": 'Search',
-      "size": 's',
-      "disable-default-styles": true
-    },
-    model: {
-      value: _vm.searchText,
-      callback: function ($$v) {
-        _vm.searchText = $$v;
-      },
-      expression: "searchText"
-    }
-  })] : _vm._e(), _vm._v(" "), _vm.resolvedSearchOptions.length > 0 ? [_vm.groupByFunction ? _vm._l(_vm.groupedOptions, function (group, groupName) {
-    return _c('OrExpansionPanel', {
-      key: groupName,
-      attrs: {
-        "label": groupName
-      }
-    }, [_vm.multiple ? _vm._l(group, function (option) {
-      return _c('OrMenuItem', {
-        key: option.value
-      }, [_vm._t("optionTemplate", function () {
-        return [_c('OrCheckbox', {
-          attrs: {
-            "input-value": option.value,
-            "label": option.label,
-            "label-variant": 'input'
-          },
-          model: {
-            value: _vm.proxyModelValue,
-            callback: function ($$v) {
-              _vm.proxyModelValue = $$v;
-            },
-            expression: "proxyModelValue"
-          }
-        })];
-      }, {
-        "model": _vm.proxyModelValue,
-        "option": option
-      })], 2);
-    }) : _vm._l(group, function (option) {
-      return _c('OrMenuItem', {
-        key: option.value,
-        on: {
-          "click": function ($event) {
-            $event.stopPropagation();
-            _vm.proxyModelValue = option.value;
-            _vm.close();
-          }
-        }
-      }, [_vm._t("optionTemplate", function () {
-        return [_vm._v("\n                  " + _vm._s(option.label) + "\n                ")];
-      }, {
-        "model": _vm.proxyModelValue,
-        "option": option
-      })], 2);
-    })], 2);
-  }) : [_vm.multiple ? _vm._l(_vm.resolvedSearchOptions, function (option) {
-    return _c('OrMenuItem', {
-      key: option.value
-    }, [_vm._t("optionTemplate", function () {
-      return [_c('OrCheckbox', {
-        attrs: {
-          "input-value": option.value,
-          "label": option.label,
-          "label-variant": 'input'
-        },
-        model: {
-          value: _vm.proxyModelValue,
-          callback: function ($$v) {
-            _vm.proxyModelValue = $$v;
-          },
-          expression: "proxyModelValue"
-        }
-      })];
-    }, {
-      "model": _vm.proxyModelValue,
-      "option": option
-    })], 2);
-  }) : _vm._l(_vm.resolvedSearchOptions, function (option) {
-    return _c('OrMenuItem', {
-      key: option.value,
-      on: {
-        "click": function ($event) {
-          $event.stopPropagation();
-          _vm.proxyModelValue = option.value;
-          _vm.close();
-        }
-      }
-    }, [_vm._t("optionTemplate", function () {
-      return [_vm._v("\n                " + _vm._s(option.label) + "\n              ")];
-    }, {
-      "model": _vm.proxyModelValue,
-      "option": option
-    })], 2);
-  })]] : [_c('div', {
-    class: _vm.noSearchResultsStyles
-  }, [_vm._t("noSearchResultsTemplate", function () {
-    return [_vm._v("\n            No results\n          ")];
-  })], 2)]], 2)], 2), _vm._v(" "), !_vm.invalid ? [_vm.hint ? [_c('OrHint', {
-    attrs: {
-      "disabled": _vm.disabled
-    }
-  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")])] : _vm._e()] : [_c('OrError', {
-    attrs: {
-      "disabled": _vm.disabled
-    }
-  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])]], 2);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-var __vue_component__$1 = __vue_component__;
-
-export { __vue_component__$1 as _ };