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

package/dist/esm/v3/OrSelectMultipleControl-3620b234.js

@@ -0,0 +1,172 @@
+import { defineComponent, ref, toRefs, computed, watch } from 'vue-demi';
+import '@vueuse/core';
+import './dom-aecadd9a.js';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
+import '@onereach/styles/tailwind/plugins/core';
+import '@onereach/styles/tailwind.config.json';
+import { s as script$3, T as TagsOverflow } from './OrTags-52da64cd.js';
+import { s as script$1 } from './OrSelectPlaceholder-10e3bf5e.js';
+import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
+import { s as script$2 } from './OrSelectControlInput-3297e30d.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createVNode, createSlots, withCtx, createElementVNode, vShow, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+
+function castToMultipleValue(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return isEmptyValue(value) ? [] : [value];
+}
+
+const SelectMultipleControlRoot = [
+// Layout
+'layout-row', 'w-full'];
+
+var script = defineComponent({
+  components: {
+    OrSelectPlaceholder: script$1,
+    OrSelectControlInput: script$2,
+    OrTags: script$3
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    model: {
+      type: [Object, String, Number, Array],
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    enableSearch: {
+      type: Boolean,
+      default: false
+    },
+    overflow: {
+      type: String,
+      default: TagsOverflow.Hidden
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['reset', 'update:modelValue'],
+  expose: ['focus', 'root', 'focused'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const searchControl = ref();
+    const tags = ref();
+    // Props
+    const {
+      modelValue,
+      model,
+      options,
+      overflow
+    } = toRefs(props);
+    // State
+    const searchModelValue = useProxyModelValue(modelValue, context.emit);
+    const focused = computed(() => {
+      var _a;
+      return (_a = searchControl.value) === null || _a === void 0 ? void 0 : _a.focused;
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-select-multiple-control-v3', ...SelectMultipleControlRoot]);
+    // Computed
+    const value = computed(() => castToMultipleValue(model.value));
+    const isEmpty = computed(() => value.value.length === 0);
+    const selection = computed(() => {
+      if (model.value === undefined || model.value === null) {
+        return [];
+      }
+      return value.value.map(value => options.value.find(option => option.value === value)).filter(value => !!value);
+    });
+    watch(selection, (items, prevItems) => {
+      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll && tags.value) {
+        tags.value.scrollToEnd();
+      }
+    });
+    // Methods
+    function focus() {
+      if (searchControl.value) {
+        searchControl.value.focus();
+      }
+    }
+    return {
+      root,
+      tags,
+      rootStyles,
+      searchControl,
+      searchModelValue,
+      isEmpty,
+      selection,
+      value,
+      focus,
+      focused
+    };
+  }
+});
+
+const _hoisted_1 = {
+  class: "inline-flex w-fit max-w-full"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrSelectControlInput = resolveComponent("OrSelectControlInput");
+  const _component_OrTags = resolveComponent("OrTags");
+  const _component_OrSelectPlaceholder = resolveComponent("OrSelectPlaceholder");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [withDirectives(createVNode(_component_OrTags, {
+    ref: "tags",
+    items: _ctx.selection,
+    class: "grow",
+    disabled: _ctx.disabled,
+    "tag-props": {
+      variant: _ctx.readonly || _ctx.disabled ? 'tag' : 'reset',
+      disabled: _ctx.disabled
+    },
+    overflow: _ctx.overflow,
+    onReset: _cache[1] || (_cache[1] = $event => _ctx.$emit('reset', $event))
+  }, createSlots({
+    _: 2 /* DYNAMIC */
+  }, [_ctx.enableSearch ? {
+    name: "tail",
+    fn: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(_component_OrSelectControlInput, {
+      ref: "searchControl",
+      modelValue: _ctx.searchModelValue,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.searchModelValue = $event),
+      placeholder: _ctx.isEmpty ? _ctx.placeholder : '',
+      readonly: _ctx.readonly,
+      disabled: _ctx.disabled
+    }, null, 8 /* PROPS */, ["modelValue", "placeholder", "readonly", "disabled"])])]),
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["items", "disabled", "tag-props", "overflow"]), [[vShow, !_ctx.isEmpty || _ctx.enableSearch]]), _ctx.isEmpty && !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
+    key: 0,
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-select-v3/partials/or-select-multiple-control/OrSelectMultipleControl.vue";
+
+export { script as s };

package/dist/esm/v3/OrSelectPlaceholder-10e3bf5e.js

@@ -0,0 +1,44 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+
+const SelectPlaceholder = [
+// Interactivity
+'interactivity-default',
+// Typography
+'typography-inherit truncate',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script = defineComponent({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-select-placeholder-v3', ...SelectPlaceholder]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+const _hoisted_1 = ["disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    disabled: _ctx.disabled ? '' : null
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-select-v3/partials/or-select-placeholder/OrSelectPlaceholder.vue";
+
+export { script as s };

package/dist/esm/v3/OrSelectSingleControl-f969c913.js

@@ -0,0 +1,132 @@
+import { defineComponent, ref, toRefs, computed } from 'vue-demi';
+import { s as script$1 } from './OrSelectPlaceholder-10e3bf5e.js';
+import { s as script$2 } from './OrSelectControlInput-3297e30d.js';
+import './dom-aecadd9a.js';
+import { i as isEmptyValue } from './isEmptyValue-fd56a6e4.js';
+import '@vueuse/core';
+import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
+import '@onereach/styles/tailwind/plugins/core';
+import '@onereach/styles/tailwind.config.json';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, Fragment, createBlock, withCtx, createTextVNode } from 'vue';
+
+const SelectSingleControlInput = [
+// Layout
+'w-full'];
+
+var script = defineComponent({
+  components: {
+    OrSelectPlaceholder: script$1,
+    OrSelectControlInput: script$2
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    model: {
+      type: [Object, String, Number, Array],
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    enableSearch: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root', 'focus', 'focused'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const searchControl = ref();
+    // Props
+    const {
+      modelValue,
+      model,
+      options
+    } = toRefs(props);
+    // State
+    const searchModelValue = useProxyModelValue(modelValue, context.emit);
+    const isEmpty = computed(() => {
+      return isEmptyValue(model.value);
+    });
+    const selection = computed(() => {
+      return options.value.find(option => option.value === model.value);
+    });
+    const selectionLabel = computed(() => {
+      var _a;
+      return (_a = selection.value) === null || _a === void 0 ? void 0 : _a.label;
+    });
+    const focused = computed(() => {
+      var _a;
+      return (_a = searchControl.value) === null || _a === void 0 ? void 0 : _a.focused;
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-select-single-control-v3', ...SelectSingleControlInput]);
+    // Methods
+    function focus() {
+      if (searchControl.value) {
+        searchControl.value.focus();
+      }
+    }
+    return {
+      root,
+      rootStyles,
+      searchControl,
+      searchModelValue,
+      isEmpty,
+      selection,
+      selectionLabel,
+      focus,
+      focused
+    };
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "truncate"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrSelectControlInput = resolveComponent("OrSelectControlInput");
+  const _component_OrSelectPlaceholder = resolveComponent("OrSelectPlaceholder");
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [!_ctx.isEmpty ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.selectionLabel), 1 /* TEXT */)) : (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectControlInput, {
+    key: 0,
+    ref: "searchControl",
+    modelValue: _ctx.searchModelValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.searchModelValue = $event),
+    placeholder: _ctx.placeholder
+  }, null, 8 /* PROPS */, ["modelValue", "placeholder"])) : (openBlock(), createBlock(_component_OrSelectPlaceholder, {
+    key: 1,
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
+
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["disabled"]))], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue";
+
+export { script as s };

package/dist/esm/v3/{OrTagInput-851b05c8.js → OrTagInput-56ee7d0b.js}

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
+import { onClickOutside } from '@vueuse/core';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
-import '@vueuse/core';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
@@ -9,10 +9,10 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { s as script$1 } from './OrError-69bd7f6a.js';
 import { s as script$2 } from './OrHint-55d3de35.js';
 import { s as script$3 } from './OrIconButton-c89f733b.js';
-import { s as script$4, I as InputBoxSize } from './OrInputBox-912a6254.js';
+import { s as script$4 } from './OrInputBox-912a6254.js';
 import { s as script$5 } from './OrLabel-b826da04.js';
-import { s as script$6 } from './OrTags-55b8c446.js';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withModifiers, withDirectives, createElementVNode, mergeProps, withKeys, vModelDynamic, createSlots, vShow } from 'vue';
+import { s as script$6, T as TagsOverflow } from './OrTags-52da64cd.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, createElementVNode, withDirectives, mergeProps, withKeys, vModelDynamic, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const TagInput = [
@@ -22,7 +22,7 @@ const TagInput = [
 'gap-xs'];
 const TagInputControl = [
 // Layout
-'flex-auto',
+// 'flex-auto',
 // Typography
 'typography-inherit',
 // Theme (placeholder)
@@ -32,7 +32,6 @@ const TagInputItem = [
 '!min-h-0'];
 
 var script = defineComponent({
-  name: 'OrTagInput',
   components: {
     OrError: script$1,
     OrHint: script$2,
@@ -50,10 +49,6 @@ var script = defineComponent({
       type: Array,
       default: () => []
     },
-    size: {
-      type: String,
-      default: InputBoxSize.M
-    },
     label: {
       type: String,
       default: undefined
@@ -85,14 +80,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]);
@@ -103,13 +117,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;
@@ -119,6 +144,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();
@@ -126,42 +162,65 @@ 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
     };
   }
 });
 
-const _hoisted_1 = ["placeholder", "readonly", "disabled"];
-const _hoisted_2 = {
-  class: /*#__PURE__*/normalizeClass(['contents'])
+const _hoisted_1 = {
+  class: "inline-flex w-fit max-w-full"
 };
+const _hoisted_2 = ["placeholder", "readonly", "disabled"];
 const _hoisted_3 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
+const _hoisted_4 = {
+  class: /*#__PURE__*/normalizeClass(['contents'])
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   const _component_OrTags = resolveComponent("OrTags");
@@ -184,46 +243,64 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrInputBox, {
+    ref: "inputBox",
     variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
-    size: _ctx.size,
+    "force-state": _ctx.activated ? 'focus-within' : undefined,
+    class: "cursor-text",
     invalid: !!_ctx.error,
     readonly: _ctx.readonly,
-    disabled: _ctx.disabled
-  }, {
-    addon: withCtx(() => [_ctx.proxyModelValue.length > 0 || _ctx.draftModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
-      key: 0,
-      icon: 'close',
-      color: 'inherit',
-      disabled: _ctx.readonly || _ctx.disabled,
-      onClick: _cache[7] || (_cache[7] = withModifiers($event => _ctx.reset(), ["stop"]))
-    }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)]),
-    default: withCtx(() => [_ctx.proxyModelValue.length > 0 ? (openBlock(), createBlock(_component_OrTags, {
-      key: 0,
+    disabled: _ctx.disabled,
+    tabindex: "0",
+    onFocus: _ctx.activate
+  }, createSlots({
+    default: withCtx(() => [createVNode(_component_OrTags, {
+      ref: "tags",
       items: _ctx.proxyModelValue,
+      class: "grow",
+      disabled: _ctx.disabled,
       "tag-props": {
         variant: _ctx.readonly || _ctx.disabled ? 'tag' : 'reset',
         disabled: _ctx.disabled
       },
-      onReset: _cache[0] || (_cache[0] = $event => _ctx.remove($event))
-    }, null, 8 /* PROPS */, ["items", "tag-props"])) : createCommentVNode("v-if", true), withDirectives(createElementVNode("input", mergeProps({
-      ref: "control",
-      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.draftModelValue = $event)
-    }, _ctx.controlAttributes, {
-      class: _ctx.controlStyles,
-      type: 'text',
-      placeholder: _ctx.proxyModelValue.length === 0 ? _ctx.placeholder : undefined,
-      readonly: _ctx.readonly,
-      disabled: _ctx.disabled,
-      autocomplete: 'off',
-      minlength: undefined,
-      maxlength: undefined,
-      onKeydown: [_cache[2] || (_cache[2] = withKeys($event => _ctx.add(), ["enter"])), _cache[3] || (_cache[3] = $event => _ctx.$emit('keydown', $event))],
-      onKeyup: _cache[4] || (_cache[4] = $event => _ctx.$emit('keyup', $event)),
-      onFocus: _cache[5] || (_cache[5] = $event => _ctx.$emit('focus', $event)),
-      onBlur: _cache[6] || (_cache[6] = $event => _ctx.$emit('blur', $event))
-    }), null, 16 /* FULL_PROPS */, _hoisted_1), [[vModelDynamic, _ctx.draftModelValue]])]),
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["variant", "size", "invalid", "readonly", "disabled"]), withDirectives(createElementVNode("div", _hoisted_2, [_ctx.hint || _ctx.maxLength ? (openBlock(), createBlock(_component_OrHint, {
+      overflow: _ctx.overflow,
+      onReset: _cache[5] || (_cache[5] = $event => _ctx.remove($event))
+    }, createSlots({
+      _: 2 /* DYNAMIC */
+    }, [_ctx.showControl ? {
+      name: "tail",
+      fn: withCtx(() => [createElementVNode("div", _hoisted_1, [withDirectives(createElementVNode("input", mergeProps({
+        ref: "control",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event)
+      }, _ctx.controlAttributes, {
+        class: _ctx.controlStyles,
+        style: _ctx.controlInlineStyles,
+        type: 'text',
+        placeholder: _ctx.proxyModelValue.length === 0 ? _ctx.placeholder : undefined,
+        readonly: _ctx.readonly,
+        disabled: _ctx.disabled,
+        autocomplete: 'off',
+        minlength: undefined,
+        maxlength: undefined,
+        onKeydown: [_cache[1] || (_cache[1] = withKeys($event => _ctx.add(), ["enter"])), _cache[2] || (_cache[2] = $event => _ctx.$emit('keydown', $event))],
+        onKeyup: _cache[3] || (_cache[3] = $event => _ctx.$emit('keyup', $event)),
+        onFocus: _cache[4] || (_cache[4] = function () {
+          return _ctx.activate && _ctx.activate(...arguments);
+        })
+      }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelDynamic, _ctx.draftModelValue]])])]),
+      key: "0"
+    } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["items", "disabled", "tag-props", "overflow"])]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.enableClear && !_ctx.readonly && !_ctx.disabled ? {
+    name: "addon",
+    fn: withCtx(() => [_ctx.proxyModelValue.length > 0 || _ctx.draftModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
+      key: 0,
+      icon: 'close',
+      color: 'inherit',
+      disabled: _ctx.readonly || _ctx.disabled,
+      onClick: _cache[6] || (_cache[6] = $event => _ctx.reset())
+    }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)]),
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "force-state", "invalid", "readonly", "disabled", "onFocus"]), withDirectives(createElementVNode("div", _hoisted_3, [_ctx.hint || _ctx.maxLength ? (openBlock(), createBlock(_component_OrHint, {
     key: 0,
     disabled: _ctx.disabled
   }, createSlots({
@@ -235,7 +312,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLength) + " / " + toDisplayString(_ctx.maxLength), 1 /* TEXT */)]),
 
     key: "0"
-  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_3, [createVNode(_component_OrError, {
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_4, [createVNode(_component_OrError, {
     disabled: _ctx.disabled
   }, createSlots({
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error) + " ", 1 /* TEXT */)]),