@onereach/ui-components 8.16.5-beta.3876.0 → 8.17.0

package/dist/esm/v3/{OrSelect-a65c0b08.js → OrSelect-5a22c1da.js}

@@ -17,8 +17,8 @@ import { s as script$9 } from './OrInput-2810a760.js';
 import { s as script$b } from './OrLabel-40af976e.js';
 import { s as script$c } from './OrMenuItem-2928ba60.js';
 import { s as script$d } from './OrPopover-88b8aa2a.js';
-import { T as TagsOverflow } from './OrTags-384a48e3.js';
-import { s as script$1 } from './OrSelectMultipleControl-96320988.js';
+import { T as TagsOverflow } from './OrTags-801c20ad.js';
+import { s as script$1 } from './OrSelectMultipleControl-6b5a831d.js';
 import { s as script$2 } from './OrSelectSingleControl-5e78d499.js';
 import './OrSelectPlaceholder-10e3bf5e.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, withModifiers, createVNode, Fragment, renderList, vShow } from 'vue';

package/dist/esm/v3/{OrSelectMultipleControl-96320988.js → OrSelectMultipleControl-6b5a831d.js}

@@ -5,7 +5,7 @@ import { i as isEqualValue } from './isEqualValue-f8bf73d9.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-384a48e3.js';
+import { s as script$3, T as TagsOverflow } from './OrTags-801c20ad.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';

package/dist/esm/v3/{OrTagInput-4cec4018.js → OrTagInput-6e9c7a94.js}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
 import { onClickOutside } from '@vueuse/core';
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
@@ -11,7 +11,8 @@ import { s as script$2 } from './OrHint-55d3de35.js';
 import { s as script$3 } from './OrIconButton-13fd3f96.js';
 import { s as script$4 } from './OrInputBox-8c1a29dd.js';
 import { s as script$5 } from './OrLabel-40af976e.js';
-import { s as script$6, T as TagsOverflow } from './OrTags-384a48e3.js';
+import { a as TagColor } from './OrTag-ccb7734c.js';
+import { s as script$6, T as TagsOverflow } from './OrTags-801c20ad.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';
 
@@ -120,6 +121,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;
@@ -156,8 +166,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;
@@ -196,6 +205,7 @@ var script = defineComponent({
       controlAttributes,
       proxyModelValue,
       draftModelValue,
+      tagsItems,
       currentLength,
       maxLength,
       activated,
@@ -244,19 +254,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',
@@ -286,7 +296,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 */
@@ -300,7 +312,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/esm/v3/{OrTags-384a48e3.js → OrTags-801c20ad.js}

@@ -186,9 +186,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 */)]),
@@ -220,7 +223,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/esm/v3/components/index.js

@@ -22,7 +22,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-37d50c74.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../OrCode-6f8164d5.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from '../OrCollapse-d7c0afae.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';
@@ -199,7 +199,7 @@ import '../codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import '../OrSelectMultipleControl-96320988.js';
+import '../OrSelectMultipleControl-6b5a831d.js';
 import '../isEqualValue-f8bf73d9.js';
 import '../OrSelectPlaceholder-10e3bf5e.js';
 import '../OrSelectControlInput-3297e30d.js';

package/dist/esm/v3/components/or-code-v3/OrCode.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
-import { Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
 import { CodeLanguage } from './props';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
@@ -44,8 +44,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
 }, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
     editorView: EditorView;
+    root: import("vue-demi").Ref<HTMLElement | undefined>;
     control: import("vue-demi").Ref<any>;
     fullscreenControl: import("vue-demi").Ref<any>;
     modal: import("vue-demi").Ref<any>;
@@ -69,7 +69,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     focus: () => void;
     blur: () => void;
     openFullscreen: () => void;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "input" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: undefined;
@@ -112,7 +112,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onInput?: ((...args: any[]) => any) | undefined;
     onKeydown?: ((...args: any[]) => any) | undefined;
     onKeyup?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;

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

@@ -1,4 +1,4 @@
-export { C as CodeLanguage, s as OrCodeV3 } from '../../OrCode-37d50c74.js';
+export { C as CodeLanguage, s as OrCodeV3 } from '../../OrCode-6f8164d5.js';
 export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';

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

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-a65c0b08.js';
+export { s as OrSelectV3 } from '../../OrSelect-5a22c1da.js';
 export { I as SelectSize } from '../../OrInputBox-8c1a29dd.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
@@ -34,11 +34,11 @@ import '../../OrInput-2810a760.js';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrLoader-b7d415dd.js';
 import '../../OrMenuItem-2928ba60.js';
-import '../../OrTags-384a48e3.js';
+import '../../OrTags-801c20ad.js';
 import '../../useOverflow-e91d2314.js';
 import '../../OrButton-a881b13b.js';
 import '../../OrTag-ccb7734c.js';
-import '../../OrSelectMultipleControl-96320988.js';
+import '../../OrSelectMultipleControl-6b5a831d.js';
 import '../../isEqualValue-f8bf73d9.js';
 import '../../OrSelectPlaceholder-10e3bf5e.js';
 import '../../OrSelectControlInput-3297e30d.js';

package/dist/esm/v3/components/or-select-v3/partials/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-96320988.js';
+export { s as OrSelectMultipleControl } from '../../../OrSelectMultipleControl-6b5a831d.js';
 export { s as OrSelectSingleControl } from '../../../OrSelectSingleControl-5e78d499.js';
 export { s as OrSelectPlaceholder } from '../../../OrSelectPlaceholder-10e3bf5e.js';
 import 'vue-demi';
@@ -10,7 +10,7 @@ import '../../../isEqualValue-f8bf73d9.js';
 import '../../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../../OrTags-384a48e3.js';
+import '../../../OrTags-801c20ad.js';
 import '../../../useOverflow-e91d2314.js';
 import '../../../OrButton-a881b13b.js';
 import '../../../OrLoader-b7d415dd.js';

package/dist/esm/v3/components/or-select-v3/partials/or-select-multiple-control/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-96320988.js';
+export { s as OrSelectMultipleControl } from '../../../../OrSelectMultipleControl-6b5a831d.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../../../dom-aecadd9a.js';
@@ -8,7 +8,7 @@ import '../../../../isEqualValue-f8bf73d9.js';
 import '../../../../useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import '../../../../OrTags-384a48e3.js';
+import '../../../../OrTags-801c20ad.js';
 import '../../../../useOverflow-e91d2314.js';
 import '../../../../OrButton-a881b13b.js';
 import '../../../../OrLoader-b7d415dd.js';

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

@@ -1,7 +1,7 @@
-export { s as OrTagInputV3 } from '../../OrTagInput-4cec4018.js';
+export { s as OrTagInputV3 } from '../../OrTagInput-6e9c7a94.js';
 export { I as TagInputSize } from '../../OrInputBox-8c1a29dd.js';
-import 'vue-demi';
 import '@vueuse/core';
+import 'vue-demi';
 import '../../useIdAttribute-859439f0.js';
 import '../../dom-aecadd9a.js';
 import 'lodash/isElement';
@@ -26,9 +26,9 @@ import '../../OrOverlay-d00d79f1.js';
 import '../../OrTeleport.vue3-bf77eed4.js';
 import '../../useTheme-0ef25778.js';
 import '../../OrLabel-40af976e.js';
-import '../../OrTags-384a48e3.js';
+import '../../OrTag-ccb7734c.js';
+import '../../OrTags-801c20ad.js';
 import '../../useOverflow-e91d2314.js';
 import '../../OrButton-a881b13b.js';
 import '../../OrLoader-b7d415dd.js';
-import '../../OrTag-ccb7734c.js';
 import '../../style-inject.es-4c6f2515.js';

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

@@ -22,7 +22,7 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-37d50c74.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-6f8164d5.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.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.5-beta.3876.0",
+  "version": "8.17.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -176,5 +176,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "5f3a231f61caf830f2a12a9c0f4d77674cd78053"
 }

package/src/components/or-code-v3/OrCode.vue

@@ -24,16 +24,16 @@
         </div>
       </template>
     </OrCodeControl>
-
     <OrModal
       ref="modal"
+      size="l"
       :additional-styles="modalStyles"
-      :size="'l'"
     >
-      <template v-slot:header>
+      <template
+        v-slot:header
+      >
         {{ label }}
       </template>
-
       <OrCodeControl
         ref="fullscreenControl"
         :control-id="controlAttributes.id"
@@ -46,7 +46,6 @@
           <slot name="addon" />
         </template>
       </OrCodeControl>
-
       <template
         v-if="$slots.modalFooter"
         v-slot:footer
@@ -64,17 +63,17 @@ import { useControlAttributes, useIdAttribute, useProxyModelValue, useTheme, use
 /* Codemirror core */
 import { basicSetup } from 'codemirror';
 
-import { indentWithTab } from '@codemirror/commands';
-import { Compartment, EditorState, Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
+import { indentWithTab } from '@codemirror/commands';
+import { EditorState, Extension, Compartment } from '@codemirror/state';
 
 /* Components */
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrModalV3 as OrModal } from '../or-modal-v3';
 
-import OrCodeControl from './partials/OrCodeControl.vue';
 import { CodeLanguage } from './props';
 import { Code, CodeControl, CodeModal } from './styles';
+import OrCodeControl from './partials/OrCodeControl.vue';
 
 export default defineComponent({
   components: {
@@ -144,7 +143,6 @@ export default defineComponent({
   emits: [
     'update:modelValue',
 
-    'input',
     'keydown',
     'keyup',
     'focus',
@@ -153,7 +151,6 @@ export default defineComponent({
 
   expose: [
     'root',
-
     'editorView',
     'control',
     'fullscreenControl',
@@ -245,10 +242,6 @@ export default defineComponent({
       EditorView.editable.of(!props.disabled),
 
       EditorView.domEventHandlers({
-        input: (event) => {
-          context.emit('input', event);
-        },
-
         keydown: (event) => {
           context.emit('keydown', event);
         },
@@ -268,8 +261,6 @@ export default defineComponent({
 
       EditorView.theme({
         '&': {
-          overflow: 'hidden',
-
           color: theme.textColor['on-background'],
           backgroundColor: theme.backgroundColor['background'],
         },
@@ -289,8 +280,6 @@ export default defineComponent({
           color: theme.textColor['on-background'],
           backgroundColor: theme.backgroundColor['primary-opacity-0-12'],
           borderColor: theme.borderColor['outline'],
-
-          backdropFilter: 'blur(2px)',
         },
 
         '.cm-activeLineGutter, .cm-activeLine': {
@@ -301,7 +290,6 @@ export default defineComponent({
 
     const state = EditorState.create({
       doc: proxyModelValue.value,
-
       extensions: [
         ...defaultExtensions,
         languageExtensionCompartment.of([]),
@@ -311,7 +299,6 @@ export default defineComponent({
 
     const editorView = new EditorView({
       state,
-
       dispatch: (transaction) => {
         editorView.update([
           transaction,
@@ -336,7 +323,6 @@ export default defineComponent({
           to: editorView!.state.doc.length,
           insert: modelValue,
         },
-
         selection: selection.ranges.some((range) => range.to > modelValue.length) ? { anchor: modelValue.length } : selection,
       });
     });
@@ -377,8 +363,8 @@ export default defineComponent({
     });
 
     return {
-      root,
       editorView,
+      root,
       control,
       fullscreenControl,
       modal,

package/src/components/or-code-v3/partials/OrCodeControl.vue

@@ -50,7 +50,6 @@
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import { computed, ref, defineComponent } from 'vue-demi';
 import { OrErrorV3 as OrError } from '../../or-error-v3';
@@ -102,15 +101,7 @@ export default defineComponent({
       default: undefined,
     },
   },
-
-  expose: [
-    'root',
-    'control',
-
-    'focus',
-    'blur',
-  ],
-
+  expose: ['root', 'control', 'focus', 'blur'],
   setup() {
     // Refs
     const root = ref<HTMLElement>();

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,