@onereach/ui-components 8.16.4 → 8.16.5-beta.3872.0

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

@@ -1,5 +1,5 @@
-import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
 import { o as onClickOutside } from '../../index-cc89d6b7.js';
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } 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,6 +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 { TagColor } from '../OrTagV3/props.js';
 import { TagsOverflow } from '../OrTagsV3/props.js';
 import { useIdAttribute } from '../../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../../hooks/useControlAttributes.js';
@@ -104,6 +105,15 @@ var script = defineComponent({
     const activated = ref(false);
     const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const draftModelValue = ref('');
+    const tagsItems = computed(() => {
+      return proxyModelValue.value.map(item => ({
+        label: item,
+        value: item,
+        tagProps: {
+          color: item === draftModelValue.value ? TagColor.Danger : TagColor.Default
+        }
+      }));
+    });
     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;
@@ -140,8 +150,7 @@ var script = defineComponent({
       context.emit('focus');
     }
     function add() {
-      var _a;
-      const newItem = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.trim();
+      const newItem = draftModelValue.value;
       if (!newItem) return;
       if (proxyModelValue.value.includes(newItem)) return;
       if (maxLength.value && currentLength.value >= maxLength.value) return;
@@ -180,6 +189,7 @@ var script = defineComponent({
       controlAttributes,
       proxyModelValue,
       draftModelValue,
+      tagsItems,
       currentLength,
       maxLength,
       activated,
@@ -195,7 +205,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-d3bbd9d8]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-cfe6b850]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -224,14 +234,14 @@ var __vue_render__ = function () {
     }], null, true)
   }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
     ref: "inputBox",
-    staticClass: "cursor-text",
+    class: ['interactivity-select'],
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
-      "force-state": _vm.activated ? 'focus-within' : undefined,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled,
-      "tabindex": "0"
+      "tabindex": 0,
+      "force-state": _vm.activated ? 'focus-within' : undefined
     },
     on: {
       "focus": _vm.activate
@@ -256,9 +266,9 @@ var __vue_render__ = function () {
     } : null], null, true)
   }, [_c('OrTags', {
     ref: "tags",
-    staticClass: "grow",
+    class: ['grow'],
     attrs: {
-      "items": _vm.proxyModelValue,
+      "items": _vm.tagsItems,
       "disabled": _vm.disabled,
       "tag-props": {
         variant: _vm.readonly || _vm.disabled ? 'tag' : 'reset',
@@ -279,21 +289,24 @@ var __vue_render__ = function () {
         }, [_c('input', _vm._b({
           directives: [{
             name: "model",
-            rawName: "v-model",
+            rawName: "v-model.trim",
             value: _vm.draftModelValue,
-            expression: "draftModelValue"
+            expression: "draftModelValue",
+            modifiers: {
+              "trim": true
+            }
           }],
           ref: "control",
           class: _vm.controlStyles,
           style: _vm.controlInlineStyles,
           attrs: {
+            "type": 'text',
             "placeholder": _vm.proxyModelValue.length === 0 ? _vm.placeholder : undefined,
             "readonly": _vm.readonly,
             "disabled": _vm.disabled,
             "autocomplete": 'off',
             "minlength": undefined,
-            "maxlength": undefined,
-            "type": 'text'
+            "maxlength": undefined
           },
           domProps: {
             "value": _vm.draftModelValue
@@ -315,7 +328,10 @@ var __vue_render__ = function () {
               if ($event.target.composing) {
                 return;
               }
-              _vm.draftModelValue = $event.target.value;
+              _vm.draftModelValue = $event.target.value.trim();
+            },
+            "blur": function ($event) {
+              return _vm.$forceUpdate();
             }
           }
         }, 'input', _vm.controlAttributes, false))])];
@@ -367,7 +383,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-d3bbd9d8";
+const __vue_scope_id__ = "data-v-cfe6b850";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrTagInputV3/OrTagInput.vue.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue-demi';
 import { TagsOverflow } from '../or-tags-v3';
+import { TagObject } from '../or-tags-v3/types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     control: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
@@ -34,6 +35,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
     draftModelValue: import("@vue/composition-api").Ref<string>;
+    tagsItems: import("@vue/composition-api").ComputedRef<TagObject[]>;
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     activated: import("@vue/composition-api").Ref<boolean>;
@@ -183,6 +185,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
     draftModelValue: import("@vue/composition-api").Ref<string>;
+    tagsItems: import("@vue/composition-api").ComputedRef<TagObject[]>;
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
     activated: import("@vue/composition-api").Ref<boolean>;

package/dist/bundled/v2/components/OrTagsV3/OrTags.js

@@ -127,13 +127,13 @@ var __vue_render__ = function () {
   }, [_vm._l(_vm.localItems, function (item) {
     return _c('OrTag', _vm._b({
       key: item.value,
-      staticClass: "max-w-full",
+      class: ['max-w-full'],
       on: {
         "reset": function ($event) {
           return _vm.$emit('reset', item.value);
         }
       }
-    }, 'OrTag', _vm.tagProps, false), [_vm._v("\n      " + _vm._s(item.label) + "\n    ")]);
+    }, 'OrTag', Object.assign({}, _vm.tagProps, item.tagProps), false), [_vm._v("\n      " + _vm._s(item.label) + "\n    ")]);
   }), _vm._v(" "), _vm.localOverflow === 'wrap' ? _vm._t("tail") : _vm._e()], 2) : _vm._e(), _vm._v(" "), _vm.localOverflow === 'hidden' && _vm.overflowItems.length > 0 ? [_c('OrButton', {
     ref: "overflowButton",
     class: _vm.overflowButtonStyles,
@@ -166,7 +166,7 @@ var __vue_render__ = function () {
           return _vm.$emit('reset', item.value);
         }
       }
-    }, 'OrTag', _vm.tagProps, false), [_vm._v("\n          " + _vm._s(item.label) + "\n        ")]);
+    }, 'OrTag', Object.assign({}, _vm.tagProps, item.tagProps), false), [_vm._v("\n          " + _vm._s(item.label) + "\n        ")]);
   }), 1)])] : _vm._e(), _vm._v(" "), _vm.localOverflow != 'wrap' || _vm.items.length === 0 ? _vm._t("tail") : _vm._e()], 2);
 };
 var __vue_staticRenderFns__ = [];

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

@@ -1,6 +1,7 @@
-export type SimpleTag = string;
-export type Tag = SimpleTag | TagObject;
-export interface TagObject {
+import { OrTag } from '../or-tag';
+export type Tag = string | TagObject;
+export type TagObject = {
     label: string;
     value: string | number | object;
-}
+    tagProps?: InstanceType<typeof OrTag>['$props'];
+};