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

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

@@ -1 +1 @@
-export { s as default } from '../OrSelectV3-f212f5c6.js';
+export { s as default } from '../OrSelectV3-e0de09af.js';

package/dist/bundled/v3/components/OrSelectV3/index.js

@@ -1,2 +1,2 @@
-export { s as OrSelectV3 } from '../OrSelectV3-f212f5c6.js';
+export { s as OrSelectV3 } from '../OrSelectV3-e0de09af.js';
 export { I as SelectSize } from '../OrInputBoxV3-ddd117f0.js';

package/dist/bundled/v3/components/OrSelectV3/styles.js

@@ -1 +1 @@
-export { S as Select, a as SelectControl, c as SelectDropdown, d as SelectDropdownDefault, e as SelectDropdownFlipped, f as SelectDropdownItem, g as SelectNoSearchResults, b as SelectSearchControl } from '../OrSelectV3-f212f5c6.js';
+export { S as Select, a as SelectControl, c as SelectDropdown, d as SelectDropdownDefault, e as SelectDropdownFlipped, f as SelectDropdownItem, g as SelectNoSearchResults, b as SelectSearchControl } from '../OrSelectV3-e0de09af.js';

package/dist/bundled/v3/components/{OrSelectV3-f212f5c6.js → OrSelectV3-e0de09af.js}

@@ -4,7 +4,7 @@ import { defineComponent, ref, computed, toRefs, watch, getCurrentInstance, onMo
 import { isEmptyValue } from '../utils/isEmptyValue.js';
 import { n as useFocus } from './OrBottomSheetV3-66815f6f.js';
 import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
-import { s as script$5, T as TagsOverflow } from './OrTagsV3-bbda3acd.js';
+import { s as script$5, T as TagsOverflow } from './OrTagsV3-6c4fb22c.js';
 import { isEqualValue } from '../utils/isEqualValue.js';
 import { s as script$6 } from './OrCheckboxV3-7d36a9a8.js';
 import { s as script$7 } from './OrErrorV3-f61387d6.js';

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

@@ -1 +1 @@
-export { s as default } from '../OrTagInputV3-7b240c91.js';
+export { s as default } from '../OrTagInputV3-e1596983.js';

package/dist/bundled/v3/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-demi").DefineComponent<{
     modelValue: {
         type: PropType<string[]>;
@@ -71,6 +72,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string[]>;
     draftModelValue: import("vue-demi").Ref<string>;
+    tagsItems: import("vue-demi").ComputedRef<TagObject[]>;
     currentLength: import("vue-demi").ComputedRef<number>;
     maxLength: import("vue-demi").ComputedRef<number | undefined>;
     activated: import("vue-demi").Ref<boolean>;

package/dist/bundled/v3/components/OrTagInputV3/index.js

@@ -1,2 +1,2 @@
-export { s as OrTagInputV3 } from '../OrTagInputV3-7b240c91.js';
+export { s as OrTagInputV3 } from '../OrTagInputV3-e1596983.js';
 export { I as TagInputSize } from '../OrInputBoxV3-ddd117f0.js';

package/dist/bundled/v3/components/OrTagInputV3/styles.js

@@ -1 +1 @@
-export { T as TagInput, a as TagInputControl, b as TagInputItem } from '../OrTagInputV3-7b240c91.js';
+export { T as TagInput, a as TagInputControl, b as TagInputItem } from '../OrTagInputV3-e1596983.js';

package/dist/bundled/v3/components/{OrTagInputV3-7b240c91.js → OrTagInputV3-e1596983.js}

@@ -1,13 +1,14 @@
 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 './OrAvatar-28d247a6.js';
 import { s as script$4 } from './OrInputBoxV3-ddd117f0.js';
-import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
 import { o as onClickOutside } from './OrBottomSheetV3-66815f6f.js';
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
 import { s as script$1 } from './OrErrorV3-f61387d6.js';
 import { s as script$2 } from './OrHintV3-1fcfaa19.js';
 import { s as script$3 } from './OrIconButtonV3-aa18f25c.js';
 import { s as script$5 } from './OrLabelV3-28f7ac2c.js';
-import { s as script$6, T as TagsOverflow } from './OrTagsV3-bbda3acd.js';
+import { s as script$6, T as TagsOverflow } from './OrTagsV3-6c4fb22c.js';
+import { T as TagColor } from './OrTagV3-045cac0b.js';
 import { useIdAttribute } from '../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../hooks/useControlAttributes.js';
 import { useValidationAttributes } from '../hooks/useValidationAttributes.js';
@@ -118,6 +119,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;
@@ -154,8 +164,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;
@@ -194,6 +203,7 @@ var script = defineComponent({
       controlAttributes,
       proxyModelValue,
       draftModelValue,
+      tagsItems,
       currentLength,
       maxLength,
       activated,
@@ -242,19 +252,19 @@ 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",
+    class: normalizeClass(['interactivity-select']),
     variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
-    "force-state": _ctx.activated ? 'focus-within' : undefined,
-    class: "cursor-text",
     invalid: !!_ctx.error,
     readonly: _ctx.readonly,
     disabled: _ctx.disabled,
-    tabindex: "0",
+    tabindex: 0,
+    "force-state": _ctx.activated ? 'focus-within' : undefined,
     onFocus: _ctx.activate
   }, createSlots({
     default: withCtx(() => [createVNode(_component_OrTags, {
       ref: "tags",
-      items: _ctx.proxyModelValue,
-      class: "grow",
+      class: normalizeClass(['grow']),
+      items: _ctx.tagsItems,
       disabled: _ctx.disabled,
       "tag-props": {
         variant: _ctx.readonly || _ctx.disabled ? 'tag' : 'reset',
@@ -284,7 +294,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         onFocus: _cache[4] || (_cache[4] = function () {
           return _ctx.activate && _ctx.activate(...arguments);
         })
-      }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelDynamic, _ctx.draftModelValue]])])]),
+      }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelDynamic, _ctx.draftModelValue, void 0, {
+        trim: true
+      }]])])]),
       key: "0"
     } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["items", "disabled", "tag-props", "overflow"])]),
     _: 2 /* DYNAMIC */
@@ -298,7 +310,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       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, {
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "invalid", "readonly", "disabled", "force-state", "onFocus"]), withDirectives(createElementVNode("div", _hoisted_3, [_ctx.hint || _ctx.maxLength ? (openBlock(), createBlock(_component_OrHint, {
     key: 0,
     disabled: _ctx.disabled
   }, createSlots({

package/dist/bundled/v3/components/OrTagV3/OrTag.js

@@ -1 +1 @@
-export { s as default } from '../OrTagV3-43ee9066.js';
+export { s as default } from '../OrTagV3-045cac0b.js';

package/dist/bundled/v3/components/OrTagV3/index.js

@@ -1 +1 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTagV3-43ee9066.js';
+export { s as OrTagV3, T as TagColor, a as TagVariant } from '../OrTagV3-045cac0b.js';

package/dist/bundled/v3/components/OrTagV3/props.js

@@ -1 +1 @@
-export { a as TagColor, T as TagVariant } from '../OrTagV3-43ee9066.js';
+export { T as TagColor, a as TagVariant } from '../OrTagV3-045cac0b.js';

package/dist/bundled/v3/components/OrTagV3/styles.js

@@ -1 +1 @@
-export { b as Tag, d as TagColors, c as TagVariants } from '../OrTagV3-43ee9066.js';
+export { b as Tag, d as TagColors, c as TagVariants } from '../OrTagV3-045cac0b.js';

package/dist/bundled/v3/components/{OrTagV3-43ee9066.js → OrTagV3-045cac0b.js}

@@ -120,4 +120,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-tag-v3/OrTag.vue";
 
-export { TagVariant as T, TagColor as a, Tag as b, TagVariants as c, TagColors as d, script as s };
+export { TagColor as T, TagVariant as a, Tag as b, TagVariants as c, TagColors as d, script as s };

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

@@ -1 +1 @@
-export { s as default } from '../OrTagsV3-bbda3acd.js';
+export { s as default } from '../OrTagsV3-6c4fb22c.js';

package/dist/bundled/v3/components/OrTagsV3/index.js

@@ -1 +1 @@
-export { s as OrTagsV3, T as TagsOverflow } from '../OrTagsV3-bbda3acd.js';
+export { s as OrTagsV3, T as TagsOverflow } from '../OrTagsV3-6c4fb22c.js';

package/dist/bundled/v3/components/OrTagsV3/props.js

@@ -1 +1 @@
-export { T as TagsOverflow } from '../OrTagsV3-bbda3acd.js';
+export { T as TagsOverflow } from '../OrTagsV3-6c4fb22c.js';

package/dist/bundled/v3/components/OrTagsV3/styles.js

@@ -1 +1 @@
-export { a as Tags, b as TagsContainer, c as TagsContainerOverflows, d as TagsOverflowButton, e as TagsOverflowPopover } from '../OrTagsV3-bbda3acd.js';
+export { a as Tags, b as TagsContainer, c as TagsContainerOverflows, d as TagsOverflowButton, e as TagsOverflowPopover } from '../OrTagsV3-6c4fb22c.js';

package/dist/bundled/v3/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'];
+};

package/dist/bundled/v3/components/OrTagsV3/utils/castToTag.js

@@ -1 +1 @@
-export { f as castToTagObject } from '../../OrTagsV3-bbda3acd.js';
+export { f as castToTagObject } from '../../OrTagsV3-6c4fb22c.js';

package/dist/bundled/v3/components/{OrTagsV3-bbda3acd.js → OrTagsV3-6c4fb22c.js}

@@ -2,7 +2,7 @@ import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragme
 import { defineComponent, ref, toRefs, computed, nextTick } from 'vue-demi';
 import { s as script$1 } from './OrButtonV3-529c4206.js';
 import { s as script$2 } from './OrPopoverV3-a7d181a4.js';
-import { s as script$3 } from './OrTagV3-43ee9066.js';
+import { s as script$3 } from './OrTagV3-045cac0b.js';
 import { useOverflow } from '../hooks/useOverflow.js';
 
 var TagsOverflow;
@@ -183,9 +183,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "container",
     class: normalizeClass(_ctx.containerStyles)
   }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.localItems, item => {
-    return openBlock(), createBlock(_component_OrTag, mergeProps(_ctx.tagProps, {
+    return openBlock(), createBlock(_component_OrTag, mergeProps({
+      ..._ctx.tagProps,
+      ...item.tagProps
+    }, {
       key: item.value,
-      class: "max-w-full",
+      class: ['max-w-full'],
       onReset: $event => _ctx.$emit('reset', item.value)
     }), {
       default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)]),
@@ -217,7 +220,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [createElementVNode("div", {
       class: normalizeClass(_ctx.overflowPopoverStyles)
     }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.overflowItems, item => {
-      return openBlock(), createBlock(_component_OrTag, mergeProps(_ctx.tagProps, {
+      return openBlock(), createBlock(_component_OrTag, mergeProps({
+        ..._ctx.tagProps,
+        ...item.tagProps
+      }, {
         key: item.value,
         onReset: $event => _ctx.$emit('reset', item.value)
       }), {

package/dist/bundled/v3/components/index.js

@@ -85,7 +85,7 @@ export { default as OrSearch } from './OrSearch/OrSearch.js';
 export { OrSearchV3 } from './OrSearchV3/index.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControlV3-56862f95.js';
 export { s as OrSelect } from './OrSelect-ab9e3084.js';
-export { s as OrSelectV3 } from './OrSelectV3-f212f5c6.js';
+export { s as OrSelectV3 } from './OrSelectV3-e0de09af.js';
 export { OrSidebar, OrSidebarSide } from './OrSidebar/index.js';
 export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from './OrSidebarV3-682b0424.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeleton-6b7c940e.js';
@@ -102,9 +102,9 @@ export { s as OrTabV3 } from './OrTabV3-9dbd8ad9.js';
 export { default as OrTabs } from './OrTabs/OrTabs.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabsV3-04c6d108.js';
 export { default as OrTag } from './OrTag/OrTag.js';
-export { s as OrTagInputV3 } from './OrTagInputV3-7b240c91.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTagV3-43ee9066.js';
-export { s as OrTagsV3, T as TagsOverflow } from './OrTagsV3-bbda3acd.js';
+export { s as OrTagInputV3 } from './OrTagInputV3-e1596983.js';
+export { s as OrTagV3, T as TagColor, a as TagVariant } from './OrTagV3-045cac0b.js';
+export { s as OrTagsV3, T as TagsOverflow } from './OrTagsV3-6c4fb22c.js';
 export { s as OrTeleport } from './OrTeleport-5a34b07f.js';
 export { default as OrTeleportV3 } from './OrTeleportV3/OrTeleport.js';
 export { s as OrTextV3 } from './OrTextV3-ff806d55.js';