@onereach/ui-components 6.5.1-beta.3485.0 → 6.5.1-beta.3491.0

package/dist/bundled/v2/components/OrButtonV3/OrButton.js

@@ -41,20 +41,15 @@ var script = defineComponent({
   },
   emits: ['click', 'focus', 'blur'],
   expose: ['root'],
-  setup(props, context) {
+  setup(props) {
     // Refs
     const root = ref();
     // Styles
     const rootStyles = computed(() => ['or-button-v3', ...Button, ...ButtonVariants[props.variant], ...ButtonColors[`${props.color}-${props.variant}`], props.loading && 'interactivity-none']);
-    // Methods
-    function handleClick(e) {
-      context.emit('click', e);
-    }
     return {
       root,
       rootStyles,
-      isVue3,
-      handleClick
+      isVue3
     };
   }
 });
@@ -76,7 +71,9 @@ var __vue_render__ = function () {
       "disabled": _vm.disabled
     }
   }, Object.assign({}, _vm.isVue3 ? {} : _vm.$listeners, {
-    click: _vm.handleClick,
+    click: function (e) {
+      return _vm.$emit('click', e);
+    },
     focus: function (e) {
       return _vm.$emit('focus', e);
     },

package/dist/bundled/v2/components/OrButtonV3/OrButton.vue.d.ts

@@ -4,7 +4,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLButtonElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | false)[]>;
     isVue3: boolean;
-    handleClick: (e: MouseEvent) => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     type: {
         type: PropType<"button" | "submit" | "reset">;
@@ -77,7 +76,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     root: import("@vue/composition-api").Ref<HTMLButtonElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | false)[]>;
     isVue3: boolean;
-    handleClick: (e: MouseEvent) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     activated: boolean;
     type: "button" | "submit" | "reset";

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2bd81295.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-26ec0633.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-e2a587bb.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-e90e27c0.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrIconV3/OrIcon.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2bd81295.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-26ec0633.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3555e247.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-e2a587bb.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-e90e27c0.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3d88a1aa.js';
 import { DateTimePickerTimeFormat } from './props.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -1,7 +1,7 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2bd81295.js';
-export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-26ec0633.js';
-export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3555e247.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-e2a587bb.js';
+export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-e90e27c0.js';
+export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3d88a1aa.js';
 export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 export { formatDate } from './utils/formatDate.js';

package/dist/bundled/v2/components/OrInputBoxV3/OrInputBox.js

@@ -104,7 +104,6 @@ var script = defineComponent({
     }
   },
   expose: ['root'],
-  emits: ['focus'],
   setup(props) {
     // Refs
     const root = ref();
@@ -132,11 +131,6 @@ var __vue_render__ = function () {
       "invalid": _vm.invalid ? '' : null,
       "readonly": _vm.readonly ? '' : null,
       "disabled": _vm.disabled ? '' : null
-    },
-    on: {
-      "focus": function ($event) {
-        return _vm.$emit('focus');
-      }
     }
   }, [_vm._t("default"), _vm._v(" "), _vm.$slots.addon ? [_c('OrInputBoxAddon', {
     attrs: {

package/dist/bundled/v2/components/OrInputBoxV3/OrInputBox.vue.d.ts

@@ -51,20 +51,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     invalid: boolean;
     readonly: boolean;
     disabled: boolean;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, import("@vue/composition-api").ShallowUnwrapRef<{
+} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     variant: "styled" | "unstyled";
     size: "m" | "s";
     invalid: boolean;
     readonly: boolean;
     disabled: boolean;
-} & {} & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, {
+} & {}, {
     variant: "styled" | "unstyled";
     size: "m" | "s";
     invalid: boolean;

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -1,4 +1,5 @@
 import { defineComponent, ref, computed, getCurrentInstance, toRefs, onMounted, watch } from 'vue-demi';
+import { isEmptyValue } from '../../utils/isEmptyValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import { Select, SelectControl, SelectSearchControl, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
 import __vue_component__$2 from '../OrCheckboxV3/OrCheckbox.js';
@@ -12,9 +13,8 @@ import __vue_component__$9 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$a from '../OrLabelV3/OrLabel.js';
 import __vue_component__$b from '../OrMenuItemV3/OrMenuItem.js';
 import __vue_component__$c from '../OrPopoverV3/OrPopover.js';
-import __vue_component__$d from '../OrTagsV3/OrTags.js';
-import { TagsOverflow } from '../OrTagsV3/props.js';
-import { isEmptyValue } from '../../utils/isEmptyValue.js';
+import __vue_component__$d from '../OrTagV3/OrTag.js';
+import { useOverflow } from '../../hooks/useOverflow.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
@@ -101,7 +101,7 @@ var script = defineComponent({
     OrMenuItem: __vue_component__$b,
     OrPopover: __vue_component__$c,
     OrSelectPlaceholder,
-    OrTags: __vue_component__$d
+    OrTag: __vue_component__$d
   },
   directives: {
     DropdownClose,
@@ -190,10 +190,6 @@ var script = defineComponent({
     externalControl: {
       type: Boolean,
       default: false
-    },
-    overflow: {
-      type: String,
-      default: TagsOverflow.Hidden
     }
   },
   emits: ['update:modelValue', 'focus', 'blur', 'search'],
@@ -309,12 +305,16 @@ var script = defineComponent({
     function deselect(option) {
       const modelValue = proxyModelValue.value;
       if (Array.isArray(modelValue)) {
-        proxyModelValue.value = modelValue.filter(value => value !== option);
+        proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
     function clearSearchControl() {
       searchText.value = '';
     }
+    const {
+      innerItems,
+      outerItems
+    } = useOverflow(control);
     // Utils
     const {
       isDesktop,
@@ -355,6 +355,8 @@ var script = defineComponent({
       close,
       deselect,
       clearSearchControl,
+      innerItems,
+      outerItems,
       isDesktop,
       isMobile
     };
@@ -424,22 +426,20 @@ var __vue_render__ = function () {
       }
     }
   }, [_vm.multiple ? [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
-    return [_c('OrTags', {
-      ref: "tags",
-      staticClass: "grow",
-      attrs: {
-        "items": _vm.selection,
-        "disabled": _vm.disabled,
-        "tag-props": {
-          variant: _vm.readonly || _vm.disabled ? 'tag' : 'reset',
-          disabled: _vm.disabled
+    return _vm._l(_vm.selection, function (option) {
+      return _c('OrTag', {
+        key: option.value,
+        attrs: {
+          "variant": _vm.readonly || _vm.disabled ? 'tag' : 'reset',
+          "disabled": _vm.disabled
         },
-        "overflow": _vm.overflow
-      },
-      on: {
-        "reset": _vm.deselect
-      }
-    })];
+        on: {
+          "reset": function ($event) {
+            return _vm.deselect(option);
+          }
+        }
+      }, [_vm._v("\n              " + _vm._s(option.label) + "\n            ")]);
+    });
   }, {
     "model": _vm.proxyModelValue
   })] : _vm.popoverState === 'closed' || !_vm.enableSearch ? [_c('OrSelectPlaceholder', {
@@ -456,7 +456,7 @@ var __vue_render__ = function () {
     attrs: {
       "disabled": _vm.disabled
     }
-  }, [_vm._v("\n            " + _vm._s(_vm.placeholder) + "\n          ")])] : _vm._e()]], 2), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop && !_vm.multiple ? [_c('OrInput', {
+  }, [_vm._v("\n            " + _vm._s(_vm.placeholder) + "\n          ")])] : _vm._e()]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
     ref: "searchControl",
     class: _vm.searchControlStyles.concat([_vm.isEmptyModelValue && 'md:!ml-none']),
     attrs: {

package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -1,7 +1,6 @@
 import { PropType } from 'vue-demi';
 import { SelectSize } from './props';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
-import { TagsOverflow } from '../or-tags-v3';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -40,8 +39,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
     toggle: () => void;
     close: () => void;
-    deselect: (option: string) => void;
+    deselect: (option: SelectOption) => void;
     clearSearchControl: () => void;
+    innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
@@ -117,10 +118,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    overflow: {
-        type: PropType<"default" | "wrap" | "hidden" | "scroll">;
-        default: TagsOverflow;
-    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     options: {
         type: PropType<SelectOption[]>;
@@ -194,10 +191,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    overflow: {
-        type: PropType<"default" | "wrap" | "hidden" | "scroll">;
-        default: TagsOverflow;
-    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: string | number | object | string[] | object[] | number[];
     label: string;
@@ -217,7 +210,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
-    overflow: "default" | "wrap" | "hidden" | "scroll";
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -258,8 +250,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
     toggle: () => void;
     close: () => void;
-    deselect: (option: string) => void;
+    deselect: (option: SelectOption) => void;
     clearSearchControl: () => void;
+    innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
@@ -281,7 +275,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
-    overflow: "default" | "wrap" | "hidden" | "scroll";
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -303,6 +296,5 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
-    overflow: "default" | "wrap" | "hidden" | "scroll";
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrTagInputV3/OrTagInput.js

@@ -1,5 +1,4 @@
-import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
-import { o as onClickOutside } from '../../index-a488b35e.js';
+import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
 import { TagInput, TagInputControl, TagInputItem } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -7,7 +6,7 @@ import __vue_component__$3 from '../OrIconButtonV3/OrIconButton.js';
 import __vue_component__$4 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$5 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$6 from '../OrTagsV3/OrTags.js';
-import { TagsOverflow } from '../OrTagsV3/props.js';
+import { InputBoxSize } from '../OrInputBoxV3/props.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
@@ -16,6 +15,7 @@ import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
 var script = defineComponent({
+  name: 'OrTagInput',
   components: {
     OrError: __vue_component__$1,
     OrHint: __vue_component__$2,
@@ -33,6 +33,10 @@ var script = defineComponent({
       type: Array,
       default: () => []
     },
+    size: {
+      type: String,
+      default: InputBoxSize.M
+    },
     label: {
       type: String,
       default: undefined
@@ -64,33 +68,14 @@ var script = defineComponent({
     disableDefaultStyles: {
       type: Boolean,
       default: false
-    },
-    overflow: {
-      type: String,
-      default: TagsOverflow.Hidden
-    },
-    // todo: review default state, disabling will breaking
-    enableClear: {
-      type: Boolean,
-      default: true
     }
   },
-  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur', 'reset'],
+  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     // Refs
     const root = ref();
     const control = ref();
-    const inputBox = ref();
-    const tags = ref();
-    // Props
-    const {
-      modelValue,
-      overflow,
-      placeholder,
-      disabled,
-      readonly
-    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-tag-input-v3', ...TagInput]);
     const controlStyles = computed(() => [...TagInputControl]);
@@ -101,24 +86,13 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const activated = ref(false);
-    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
-    const draftModelValue = ref('');
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const draftModelValue = ref();
     const currentLength = computed(() => {
       var _a, _b;
       return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     });
     const maxLength = computed(() => controlAttributes.maxlength);
-    const controlInlineStyles = computed(() => {
-      var _a, _b;
-      const chars = draftModelValue.value.length > 0 ? draftModelValue.value.length : currentLength.value === 0 ? (_b = (_a = placeholder.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
-      return {
-        width: `${Math.max(chars + 1 || 0, 3)}ch`
-      };
-    });
-    const showControl = computed(() => {
-      return draftModelValue.value.length > 0 || currentLength.value === 0 || activated.value;
-    });
     // Methods
     function focus() {
       var _a;
@@ -128,17 +102,6 @@ var script = defineComponent({
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
-    function deactivate() {
-      activated.value = false;
-      nextTick(() => blur());
-      context.emit('blur');
-    }
-    function activate() {
-      if (disabled.value || readonly.value) return;
-      activated.value = true;
-      nextTick(() => focus());
-      context.emit('focus');
-    }
     function add() {
       var _a;
       const newItem = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.trim();
@@ -146,60 +109,36 @@ var script = defineComponent({
       if (proxyModelValue.value.includes(newItem)) return;
       if (maxLength.value && currentLength.value >= maxLength.value) return;
       proxyModelValue.value = [...proxyModelValue.value, newItem];
-      draftModelValue.value = '';
+      draftModelValue.value = undefined;
     }
     function remove(value) {
       proxyModelValue.value = proxyModelValue.value.filter(item => item !== value);
     }
     function reset() {
       proxyModelValue.value = [];
-      draftModelValue.value = '';
-      context.emit('reset');
+      draftModelValue.value = undefined;
     }
-    // Effects
-    onClickOutside(inputBox, () => {
-      var _a, _b;
-      if (activated.value === false || ((_b = (_a = tags.value) === null || _a === void 0 ? void 0 : _a.overflowPopover) === null || _b === void 0 ? void 0 : _b.state) === 'open') return;
-      deactivate();
-    });
-    watch(proxyModelValue, (items, prevItems) => {
-      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll) {
-        nextTick(() => {
-          var _a, _b, _c;
-          (_c = (_b = (_a = tags.value) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.lastElementChild) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
-            behavior: 'smooth'
-          });
-        });
-      }
-    });
     return {
       root,
       control,
-      inputBox,
-      tags,
       rootStyles,
       controlStyles,
       itemStyles,
-      controlInlineStyles,
       controlAttributes,
       proxyModelValue,
       draftModelValue,
       currentLength,
       maxLength,
-      activated,
-      showControl,
       focus,
       blur,
       add,
-      activate,
-      deactivate,
       remove,
       reset
     };
   }
 });
 
-var css_248z = "input[data-v-6c012808]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-51a52348]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -227,20 +166,14 @@ var __vue_render__ = function () {
       proxy: true
     }], null, true)
   }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
-    ref: "inputBox",
-    staticClass: "cursor-text",
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
-      "force-state": _vm.activated ? 'focus-within' : undefined,
+      "size": _vm.size,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
-      "disabled": _vm.disabled,
-      "tabindex": "0"
-    },
-    on: {
-      "focus": _vm.activate
+      "disabled": _vm.disabled
     },
-    scopedSlots: _vm._u([_vm.enableClear && !_vm.readonly && !_vm.disabled ? {
+    scopedSlots: _vm._u([{
       key: "addon",
       fn: function () {
         return [_vm.proxyModelValue.length > 0 || _vm.draftModelValue ? [_c('OrIconButton', {
@@ -251,82 +184,74 @@ var __vue_render__ = function () {
           },
           on: {
             "click": function ($event) {
+              $event.stopPropagation();
               return _vm.reset();
             }
           }
         })] : _vm._e()];
       },
       proxy: true
-    } : null], null, true)
-  }, [_c('OrTags', {
-    ref: "tags",
-    staticClass: "grow",
+    }])
+  }, [_vm.proxyModelValue.length > 0 ? [_c('OrTags', {
     attrs: {
       "items": _vm.proxyModelValue,
-      "disabled": _vm.disabled,
       "tag-props": {
         variant: _vm.readonly || _vm.disabled ? 'tag' : 'reset',
         disabled: _vm.disabled
-      },
-      "overflow": _vm.overflow
+      }
     },
     on: {
       "reset": function ($event) {
         return _vm.remove($event);
       }
+    }
+  })] : _vm._e(), _vm._v(" "), _c('input', _vm._b({
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.draftModelValue,
+      expression: "draftModelValue"
+    }],
+    ref: "control",
+    class: _vm.controlStyles,
+    attrs: {
+      "placeholder": _vm.proxyModelValue.length === 0 ? _vm.placeholder : undefined,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled,
+      "autocomplete": 'off',
+      "minlength": undefined,
+      "maxlength": undefined,
+      "type": 'text'
     },
-    scopedSlots: _vm._u([_vm.showControl ? {
-      key: "tail",
-      fn: function () {
-        return [_c('div', {
-          staticClass: "inline-flex w-fit max-w-full"
-        }, [_c('input', _vm._b({
-          directives: [{
-            name: "model",
-            rawName: "v-model",
-            value: _vm.draftModelValue,
-            expression: "draftModelValue"
-          }],
-          ref: "control",
-          class: _vm.controlStyles,
-          style: _vm.controlInlineStyles,
-          attrs: {
-            "placeholder": _vm.proxyModelValue.length === 0 ? _vm.placeholder : undefined,
-            "readonly": _vm.readonly,
-            "disabled": _vm.disabled,
-            "autocomplete": 'off',
-            "minlength": undefined,
-            "maxlength": undefined,
-            "type": 'text'
-          },
-          domProps: {
-            "value": _vm.draftModelValue
-          },
-          on: {
-            "keydown": [function ($event) {
-              if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
-                return null;
-              }
-              return _vm.add();
-            }, function ($event) {
-              return _vm.$emit('keydown', $event);
-            }],
-            "keyup": function ($event) {
-              return _vm.$emit('keyup', $event);
-            },
-            "focus": _vm.activate,
-            "input": function ($event) {
-              if ($event.target.composing) {
-                return;
-              }
-              _vm.draftModelValue = $event.target.value;
-            }
-          }
-        }, 'input', _vm.controlAttributes, false))])];
+    domProps: {
+      "value": _vm.draftModelValue
+    },
+    on: {
+      "keydown": [function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
+          return null;
+        }
+        return _vm.add();
+      }, function ($event) {
+        return _vm.$emit('keydown', $event);
+      }],
+      "keyup": function ($event) {
+        return _vm.$emit('keyup', $event);
       },
-      proxy: true
-    } : null], null, true)
-  })], 1), _vm._v(" "), _c('div', {
+      "focus": function ($event) {
+        return _vm.$emit('focus', $event);
+      },
+      "blur": function ($event) {
+        return _vm.$emit('blur', $event);
+      },
+      "input": function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+        _vm.draftModelValue = $event.target.value;
+      }
+    }
+  }, 'input', _vm.controlAttributes, false))], 2), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -371,7 +296,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-6c012808";
+const __vue_scope_id__ = "data-v-51a52348";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */