@onereach/ui-components 7.0.0 → 7.0.1-beta.3529.0

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

@@ -1,6 +1,7 @@
 import { PropType } from 'vue-demi';
 import { SelectSize } from './props';
-import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
+import { SelectGroupByFunction, SelectOption, SelectSearchFunction, SelectValue } 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, {
@@ -10,6 +11,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    multipleControl: 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, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    singleControl: 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, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
     searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: 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, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -25,24 +36,23 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<SelectValue>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     showClear: import("@vue/composition-api").ComputedRef<boolean>;
-    selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
-        value: string | number | object;
+        value: import("./types").RawValue;
         label: string;
     }[]>;
     resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
     groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
     toggle: () => void;
     close: () => void;
-    deselect: (option: SelectOption) => void;
+    open: () => void;
+    deselect: (option: string) => void;
+    toggleOption: (option: string) => 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, {}, {}, {
@@ -55,7 +65,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => never[];
     };
     modelValue: {
-        type: PropType<string | number | object | string[] | object[] | number[]>;
+        type: PropType<SelectValue>;
         default: undefined;
     };
     multiple: {
@@ -74,10 +84,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         default: undefined;
     };
-    searchPlaceholder: {
-        type: StringConstructor;
-        default: undefined;
-    };
     hint: {
         type: StringConstructor;
         default: undefined;
@@ -118,6 +124,10 @@ 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[]>;
@@ -128,7 +138,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: () => never[];
     };
     modelValue: {
-        type: PropType<string | number | object | string[] | object[] | number[]>;
+        type: PropType<SelectValue>;
         default: undefined;
     };
     multiple: {
@@ -147,10 +157,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         default: undefined;
     };
-    searchPlaceholder: {
-        type: StringConstructor;
-        default: undefined;
-    };
     hint: {
         type: StringConstructor;
         default: undefined;
@@ -191,15 +197,18 @@ 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[];
+    modelValue: SelectValue;
     label: string;
     options: SelectOption[];
     searchOptions: SelectOption[];
     multiple: boolean;
     size: "m" | "s";
     placeholder: string;
-    searchPlaceholder: string;
     hint: string;
     error: string | boolean;
     required: boolean;
@@ -210,6 +219,7 @@ 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<{
@@ -221,6 +231,16 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    multipleControl: 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, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    singleControl: 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, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
     searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: 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, {
         [x: string]: ((...args: any[]) => any) | null;
@@ -236,35 +256,33 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<SelectValue>;
     readonly: import("@vue/composition-api").ComputedRef<boolean>;
     isEmptyModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     showClear: import("@vue/composition-api").ComputedRef<boolean>;
-    selection: import("@vue/composition-api").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("@vue/composition-api").Ref<string>;
     internalSearchOptions: import("@vue/composition-api").Ref<{
-        value: string | number | object;
+        value: import("./types").RawValue;
         label: string;
     }[]>;
     resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
     groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
     toggle: () => void;
     close: () => void;
-    deselect: (option: SelectOption) => void;
+    open: () => void;
+    deselect: (option: string) => void;
+    toggleOption: (option: string) => 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[], {
-    modelValue: string | number | object | string[] | object[] | number[];
+    modelValue: SelectValue;
     label: string;
     options: SelectOption[];
     searchOptions: SelectOption[];
     multiple: boolean;
     size: "m" | "s";
     placeholder: string;
-    searchPlaceholder: string;
     hint: string;
     error: string | boolean;
     required: boolean;
@@ -275,17 +293,17 @@ 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;
 }, {
-    modelValue: string | number | object | string[] | object[] | number[];
+    modelValue: SelectValue;
     label: string;
     options: SelectOption[];
     searchOptions: SelectOption[];
     multiple: boolean;
     size: "m" | "s";
     placeholder: string;
-    searchPlaceholder: string;
     hint: string;
     error: string | boolean;
     required: boolean;
@@ -296,5 +314,6 @@ 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/OrSelectV3/styles.js

@@ -5,7 +5,7 @@ const Select = [
 'gap-xs'];
 const SelectControl = [
 // Layout
-'layout-row',
+'layout-row', 'w-full',
 // Layout (empty)
 'empty:hidden',
 // Overflow

package/dist/bundled/v2/components/OrSelectV3/types.d.ts

@@ -1,10 +1,12 @@
 export interface SelectOption {
-    value: object | string | number;
+    value: RawValue;
     label: string;
 }
+export type RawValue = string | number | object;
 export interface SelectSearchFunction {
     (searchText: string, options: SelectOption[]): Promise<SelectOption[]>;
 }
 export interface SelectGroupByFunction {
     (option: SelectOption): string;
 }
+export type SelectValue = RawValue | RawValue[] | undefined;

package/dist/bundled/v2/components/OrSidebar/OrSidebar.js

@@ -1,4 +1,4 @@
-import { f as useDraggable } from '../../index-a488b35e.js';
+import { g as useDraggable } from '../../index-a77d7adf.js';
 import { defineComponent, ref } from 'vue-demi';
 import { OrSidebarSide } from './constants.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';

package/dist/bundled/v2/components/OrSlider/OrSlider.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue-demi';
-import { o as onClickOutside, f as useDraggable } from '../../index-a488b35e.js';
+import { o as onClickOutside, g as useDraggable } from '../../index-a77d7adf.js';
 import { f as addClass, h as removeClass } from '../../dom-cec392f3.js';
 import __vue_component__$1 from '../OrIcon/OrIcon.js';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';

package/dist/bundled/v2/components/OrTabsV3/OrTabs.js

@@ -1,4 +1,4 @@
-import { e as useResizeObserver } from '../../index-a488b35e.js';
+import { e as useResizeObserver } from '../../index-a77d7adf.js';
 import { defineComponent, ref, computed, reactive, toRef, watch, nextTick, onMounted } from 'vue-demi';
 import { TabsVariant } from './props.js';
 import { TabsRoot, TabsRootVariants, TabsContainer, TabsContent } from './styles.js';

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

@@ -1,4 +1,5 @@
-import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
+import { o as onClickOutside } from '../../index-a77d7adf.js';
 import { TagInput, TagInputControl, TagInputItem } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -6,7 +7,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 { InputBoxSize } from '../OrInputBoxV3/props.js';
+import { TagsOverflow } from '../OrTagsV3/props.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../../hooks/useValidationAttributes.js';
@@ -15,7 +16,6 @@ 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,10 +33,6 @@ var script = defineComponent({
       type: Array,
       default: () => []
     },
-    size: {
-      type: String,
-      default: InputBoxSize.M
-    },
     label: {
       type: String,
       default: undefined
@@ -68,14 +64,33 @@ 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'],
+  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur', 'reset'],
   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]);
@@ -86,13 +101,24 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref();
+    const activated = ref(false);
+    const proxyModelValue = useProxyModelValue(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;
@@ -102,6 +128,17 @@ 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();
@@ -109,36 +146,56 @@ var script = defineComponent({
       if (proxyModelValue.value.includes(newItem)) return;
       if (maxLength.value && currentLength.value >= maxLength.value) return;
       proxyModelValue.value = [...proxyModelValue.value, newItem];
-      draftModelValue.value = undefined;
+      draftModelValue.value = '';
     }
     function remove(value) {
       proxyModelValue.value = proxyModelValue.value.filter(item => item !== value);
     }
     function reset() {
       proxyModelValue.value = [];
-      draftModelValue.value = undefined;
+      draftModelValue.value = '';
+      context.emit('reset');
     }
+    // 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) => {
+      var _a;
+      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll) {
+        ((_a = tags.value) === null || _a === void 0 ? void 0 : _a.scrollToEnd)();
+      }
+    });
     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-51a52348]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-5083e0d4]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -166,14 +223,20 @@ 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',
-      "size": _vm.size,
+      "force-state": _vm.activated ? 'focus-within' : undefined,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
-      "disabled": _vm.disabled
+      "disabled": _vm.disabled,
+      "tabindex": "0"
     },
-    scopedSlots: _vm._u([{
+    on: {
+      "focus": _vm.activate
+    },
+    scopedSlots: _vm._u([_vm.enableClear && !_vm.readonly && !_vm.disabled ? {
       key: "addon",
       fn: function () {
         return [_vm.proxyModelValue.length > 0 || _vm.draftModelValue ? [_c('OrIconButton', {
@@ -184,74 +247,82 @@ var __vue_render__ = function () {
           },
           on: {
             "click": function ($event) {
-              $event.stopPropagation();
               return _vm.reset();
             }
           }
         })] : _vm._e()];
       },
       proxy: true
-    }])
-  }, [_vm.proxyModelValue.length > 0 ? [_c('OrTags', {
+    } : null], null, true)
+  }, [_c('OrTags', {
+    ref: "tags",
+    staticClass: "grow",
     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'
-    },
-    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": function ($event) {
-        return _vm.$emit('focus', $event);
-      },
-      "blur": function ($event) {
-        return _vm.$emit('blur', $event);
+    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))])];
       },
-      "input": function ($event) {
-        if ($event.target.composing) {
-          return;
-        }
-        _vm.draftModelValue = $event.target.value;
-      }
-    }
-  }, 'input', _vm.controlAttributes, false))], 2), _vm._v(" "), _c('div', {
+      proxy: true
+    } : null], null, true)
+  })], 1), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -296,7 +367,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-51a52348";
+const __vue_scope_id__ = "data-v-5083e0d4";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */