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

package/dist/esm/v3/components/or-tags-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTagsV3, T as TagsOverflow } from '../../OrTags-384a48e3.js';
+export { s as OrTagsV3, T as TagsOverflow } from '../../OrTags-801c20ad.js';
 import 'vue-demi';
 import '../../useOverflow-e91d2314.js';
 import '@vueuse/core';

package/dist/esm/v3/components/or-tags-v3/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/esm/v3/index.js

@@ -98,7 +98,7 @@ export { s as OrSearch } from './OrSearch-aa57d4e8.js';
 export { s as OrSearchV3 } from './OrSearch-fccacdba.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-adbf7f4e.js';
 export { s as OrSelect } from './OrSelect-a366e668.js';
-export { s as OrSelectV3 } from './OrSelect-a65c0b08.js';
+export { s as OrSelectV3 } from './OrSelect-5a22c1da.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { S as OrSidebarPlacement, s as OrSidebarV3, S as SidebarPlacement } from './OrSidebar-62009372.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -120,9 +120,9 @@ export { s as OrTabV3 } from './OrTab-42be32d1.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-e53980aa.js';
 export { s as OrTag } from './OrTag-bc8177a4.js';
-export { s as OrTagInputV3 } from './OrTagInput-4cec4018.js';
+export { s as OrTagInputV3 } from './OrTagInput-6e9c7a94.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-ccb7734c.js';
-export { s as OrTagsV3, T as TagsOverflow } from './OrTags-384a48e3.js';
+export { s as OrTagsV3, T as TagsOverflow } from './OrTags-801c20ad.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-bf77eed4.js';
 export { s as OrTextV3 } from './OrText-d54c951d.js';
@@ -201,7 +201,7 @@ import './codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import './OrSelectMultipleControl-96320988.js';
+import './OrSelectMultipleControl-6b5a831d.js';
 import './OrSelectPlaceholder-10e3bf5e.js';
 import './OrSelectControlInput-3297e30d.js';
 import './OrSelectSingleControl-5e78d499.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.16.4",
+  "version": "8.16.5-beta.3872.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -176,6 +176,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "7302352c135f6dcd05f25ecb3c646017ce025ad9"
+  }
 }

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -20,24 +20,21 @@
 
     <OrInputBox
       ref="inputBox"
+      :class="['interactivity-select']"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
-      :force-state="activated ? 'focus-within': undefined"
-      class="cursor-text"
       :invalid="!!error"
       :readonly="readonly"
       :disabled="disabled"
-      tabindex="0"
+      :tabindex="0"
+      :force-state="activated ? 'focus-within': undefined"
       @focus="activate"
     >
       <OrTags
         ref="tags"
-        :items="proxyModelValue"
-        class="grow"
+        :class="['grow']"
+        :items="tagsItems"
         :disabled="disabled"
-        :tag-props="{
-          variant: readonly || disabled ? 'tag' : 'reset',
-          disabled: disabled
-        }"
+        :tag-props="{ variant: readonly || disabled ? 'tag' : 'reset', disabled }"
         :overflow="overflow"
         @reset="remove($event)"
       >
@@ -48,7 +45,7 @@
           <div class="inline-flex w-fit max-w-full">
             <input
               ref="control"
-              v-model="draftModelValue"
+              v-model.trim="draftModelValue"
               v-bind="controlAttributes"
               :class="controlStyles"
               :style="controlInlineStyles"
@@ -120,15 +117,17 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, reactive, ref, toRefs, nextTick, watch } from 'vue-demi';
 import { MaybeElementRef, onClickOutside } from '@vueuse/core';
+import { PropType, computed, defineComponent, nextTick, reactive, ref, toRefs, watch } from 'vue-demi';
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
+import { TagColor } from '../or-tag-v3';
 import { OrTagsV3 as OrTags, TagsOverflow } from '../or-tags-v3';
+import { TagObject } from '../or-tags-v3/types';
 import { TagInput, TagInputControl, TagInputItem } from './styles';
 
 export default defineComponent({
@@ -256,6 +255,17 @@ export default defineComponent({
     const proxyModelValue = useProxyModelValue(modelValue, context.emit);
     const draftModelValue = ref<string>('');
 
+    const tagsItems = computed(() => {
+      return proxyModelValue.value.map((item) => ({
+        label: item,
+        value: item,
+
+        tagProps: {
+          color: item === draftModelValue.value ? TagColor.Danger : TagColor.Default,
+        },
+      } as TagObject));
+    });
+
     const currentLength = computed(() => proxyModelValue.value?.length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
@@ -299,7 +309,7 @@ export default defineComponent({
     }
 
     function add(): void {
-      const newItem = draftModelValue.value?.trim();
+      const newItem = draftModelValue.value;
 
       if (!newItem) return;
       if (proxyModelValue.value.includes(newItem)) return;
@@ -343,6 +353,7 @@ export default defineComponent({
       controlAttributes,
       proxyModelValue,
       draftModelValue,
+      tagsItems,
       currentLength,
       maxLength,
       activated,

package/src/components/or-tags-v3/OrTags.vue

@@ -10,13 +10,14 @@
     >
       <OrTag
         v-for="item in localItems"
-        v-bind="tagProps"
+        v-bind="{ ...tagProps, ...item.tagProps }"
         :key="item.value"
-        class="max-w-full"
+        :class="['max-w-full']"
         @reset="$emit('reset', item.value)"
       >
         {{ item.label }}
       </OrTag>
+
       <slot
         v-if="localOverflow === 'wrap'"
         name="tail"
@@ -45,7 +46,7 @@
         <div :class="overflowPopoverStyles">
           <OrTag
             v-for="item in overflowItems"
-            v-bind="tagProps"
+            v-bind="{ ...tagProps, ...item.tagProps }"
             :key="item.value"
             @reset="$emit('reset', item.value)"
           >
@@ -54,6 +55,7 @@
         </div>
       </OrPopover>
     </template>
+
     <slot
       v-if="localOverflow != 'wrap' || items.length === 0"
       name="tail"

package/src/components/or-tags-v3/types.ts

@@ -1,6 +1,9 @@
-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'];
+};