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

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

@@ -1,31 +1,25 @@
-import { s as script } from '../../OrSelect.vue_vue_type_script_lang-d1d57fd5.js';
-export { s as default } from '../../OrSelect.vue_vue_type_script_lang-d1d57fd5.js';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, withModifiers, createVNode, vShow } from 'vue';
+import { s as script } from '../../OrSelect.vue_vue_type_script_lang-3c895f3a.js';
+export { s as default } from '../../OrSelect.vue_vue_type_script_lang-3c895f3a.js';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, withModifiers, createVNode, Fragment, renderList, vShow } from 'vue';
 
 const _hoisted_1 = ["id", "tabindex", "disabled"];
 const _hoisted_2 = {
-  class: "truncate"
-};
-const _hoisted_3 = {
-  key: 2,
-  class: /*#__PURE__*/normalizeClass(['grow'])
-};
-const _hoisted_4 = {
   class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
 };
-const _hoisted_5 = {
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
   class: /*#__PURE__*/normalizeClass(['contents'])
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
-  const _component_OrTag = resolveComponent("OrTag");
-  const _component_OrSelectPlaceholder = resolveComponent("OrSelectPlaceholder");
-  const _component_OrInput = resolveComponent("OrInput");
+  const _component_OrSelectMultipleControl = resolveComponent("OrSelectMultipleControl");
+  const _component_OrSelectSingleControl = resolveComponent("OrSelectSingleControl");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrIcon = resolveComponent("OrIcon");
+  const _component_OrInput = resolveComponent("OrInput");
   const _component_OrCheckbox = resolveComponent("OrCheckbox");
   const _component_OrMenuItem = resolveComponent("OrMenuItem");
   const _component_OrExpansionPanel = resolveComponent("OrExpansionPanel");
@@ -51,7 +45,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), withDirectives((openBlock(), createBlock(_component_OrInputBox, {
     ref: "inputBox",
-    class: normalizeClass([_ctx.popoverState === 'open' && (_ctx.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]),
+    class: normalizeClass([_ctx.popoverState === 'open' && (_ctx.popover && _ctx.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]),
     variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
     size: _ctx.size,
     invalid: !!_ctx.error,
@@ -64,74 +58,51 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.controlStyles),
       tabindex: !_ctx.disabled ? 0 : null,
       disabled: _ctx.disabled,
-      onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus', $event)),
-      onBlur: _cache[1] || (_cache[1] = $event => _ctx.$emit('blur', $event))
-    }, [_ctx.multiple ? (openBlock(), createElementBlock(Fragment, {
-      key: 0
-    }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
-      key: 0,
+      onFocus: _cache[2] || (_cache[2] = $event => _ctx.$emit('focus', $event)),
+      onBlur: _cache[3] || (_cache[3] = $event => _ctx.$emit('blur', $event))
+    }, [renderSlot(_ctx.$slots, "valueTemplate", {
       model: _ctx.proxyModelValue
-    }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selection, option => {
-      return openBlock(), createBlock(_component_OrTag, {
-        key: option.value,
-        variant: _ctx.readonly || _ctx.disabled ? 'tag' : 'reset',
-        disabled: _ctx.disabled,
-        onReset: $event => _ctx.deselect(option)
-      }, {
-        default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
-
-        _: 2 /* DYNAMIC */
-      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "disabled", "onReset"]);
-    }), 128 /* KEYED_FRAGMENT */))]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
-      key: 1,
-      disabled: _ctx.disabled
-    }, {
-      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
-
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
-      key: 1
-    }, [!_ctx.isEmptyModelValue ? renderSlot(_ctx.$slots, "valueTemplate", {
+    }, () => [_ctx.multiple ? (openBlock(), createBlock(_component_OrSelectMultipleControl, {
       key: 0,
-      model: _ctx.proxyModelValue
-    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(_ctx.selection && _ctx.selection.label), 1 /* TEXT */)]) : _ctx.popoverState === 'closed' || !_ctx.enableSearch ? (openBlock(), createBlock(_component_OrSelectPlaceholder, {
-      key: 1,
-      disabled: _ctx.disabled
-    }, {
-      default: withCtx(() => [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)]),
-
-      _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
-      key: 0
-    }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), _ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isDesktop ? (openBlock(), createBlock(_component_OrInput, {
+      ref: "multipleControl",
+      modelValue: _ctx.searchText,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.searchText = $event),
+      options: _ctx.options,
+      model: _ctx.proxyModelValue,
+      placeholder: _ctx.placeholder,
+      disabled: _ctx.disabled,
+      readonly: _ctx.readonly,
+      "enable-search": _ctx.enableSearch,
+      overflow: _ctx.overflow,
+      onReset: _ctx.deselect
+    }, null, 8 /* PROPS */, ["modelValue", "options", "model", "placeholder", "disabled", "readonly", "enable-search", "overflow", "onReset"])) : (openBlock(), createBlock(_component_OrSelectSingleControl, {
       key: 1,
-      ref: "searchControl",
+      ref: "singleControl",
       modelValue: _ctx.searchText,
-      "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.searchText = $event),
-      class: normalizeClass([..._ctx.searchControlStyles, _ctx.isEmptyModelValue && 'md:!ml-none']),
-      type: 'search',
-      placeholder: _ctx.searchPlaceholder,
-      size: _ctx.size,
-      "disable-default-styles": true,
-      onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
-    }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder", "size"])) : (openBlock(), createElementBlock("div", _hoisted_3)), createElementVNode("div", _hoisted_4, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.searchText = $event),
+      model: _ctx.proxyModelValue,
+      options: _ctx.options,
+      placeholder: _ctx.placeholder,
+      "enable-search": _ctx.enableSearch
+    }, null, 8 /* PROPS */, ["modelValue", "model", "options", "placeholder", "enable-search"]))])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), createElementVNode("div", _hoisted_2, [_ctx.showClear ? (openBlock(), createBlock(_component_OrIconButton, {
       key: 0,
       icon: 'close',
       color: 'inherit',
+      "additional-styles": ['!text-outline', '!dark:text-outline-dark'],
       disabled: _ctx.readonly || _ctx.disabled,
       onClick: _cache[4] || (_cache[4] = withModifiers($event => _ctx.$emit('update:modelValue', _ctx.multiple ? [] : undefined), ["stop"]))
     }, null, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrIcon, {
-      icon: _ctx.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
+      icon: _ctx.popoverState === 'open' ? _ctx.enableSearch ? 'search' : 'arrow_drop_up' : 'arrow_drop_down',
+      class: normalizeClass(_ctx.popoverState === 'open' && _ctx.enableSearch ? '!text-outline !dark:text-outline-dark' : ''),
       variant: 'outlined'
-    }, null, 8 /* PROPS */, ["icon"])]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["icon", "class"])]), createVNode(_component_OrPopover, {
       ref: "popover",
       variant: 'auto',
       trigger: _ctx.inputBoxRoot,
       placement: 'bottom',
       "full-width": true,
       "custom-styles": _ctx.dropdownStyles,
-      "disable-default-styles": true,
-      onClose: _cache[8] || (_cache[8] = $event => _ctx.clearSearchControl())
+      "disable-default-styles": true
     }, {
       default: withCtx(() => [_ctx.popoverState === 'open' && _ctx.enableSearch && _ctx.isMobile ? (openBlock(), createBlock(_component_OrInput, {
         key: 0,
@@ -140,7 +111,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.searchText = $event),
         class: normalizeClass(_ctx.searchControlStyles),
         type: 'search',
-        placeholder: _ctx.searchPlaceholder
+        placeholder: _ctx.placeholder
       }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder"])) : createCommentVNode("v-if", true), _ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
         key: 1
       }, [_ctx.groupByFunction ? (openBlock(true), createElementBlock(Fragment, {
@@ -176,10 +147,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               key: i,
               class: normalizeClass(_ctx.dropdownItemStyles),
               selected: _ctx.proxyModelValue === option.value,
-              onClick: withModifiers($event => {
-                _ctx.proxyModelValue = option.value;
-                _ctx.close();
-              }, ["stop"])
+              onClick: withModifiers($event => _ctx.toggleOption(option.value), ["stop"])
             }, {
               default: withCtx(() => [renderSlot(_ctx.$slots, "optionTemplate", {
                 model: _ctx.proxyModelValue,
@@ -199,23 +167,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, renderList(_ctx.resolvedSearchOptions, (option, i) => {
         return openBlock(), createBlock(_component_OrMenuItem, {
           key: i,
-          selected: _ctx.proxyModelValue && _ctx.proxyModelValue.includes(option.value)
+          selected: _ctx.proxyModelValue && _ctx.proxyModelValue.includes(option.value),
+          onClick: withModifiers($event => _ctx.toggleOption(option.value), ["stop"])
         }, {
           default: withCtx(() => [createVNode(_component_OrCheckbox, {
-            modelValue: _ctx.proxyModelValue,
-            "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.proxyModelValue = $event),
+            "model-value": _ctx.proxyModelValue,
             value: option.value,
-            label: option.label,
             "label-variant": 'menu-item'
           }, {
-            default: withCtx(() => [renderSlot(_ctx.$slots, "optionTemplate", {
+            default: withCtx(() => [createElementVNode("div", {
+              onClick: $event => _ctx.toggleOption(option.value)
+            }, [renderSlot(_ctx.$slots, "optionTemplate", {
               model: _ctx.proxyModelValue,
               option: option
-            })]),
+            }, () => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)])], 8 /* PROPS */, _hoisted_3)]),
             _: 2 /* DYNAMIC */
-          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "value", "label"])]),
+          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["model-value", "value"])]),
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "onClick"]);
       }), 128 /* KEYED_FRAGMENT */)) : (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(_ctx.resolvedSearchOptions, (option, i) => {
@@ -224,8 +193,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           class: normalizeClass(_ctx.dropdownItemStyles),
           selected: _ctx.proxyModelValue === option.value,
           onClick: withModifiers($event => {
-            _ctx.proxyModelValue = option.value;
-            _ctx.close();
+            _ctx.toggleOption(option.value);
           }, ["stop"])
         }, {
           default: withCtx(() => [renderSlot(_ctx.$slots, "optionTemplate", {
@@ -243,14 +211,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["trigger", "custom-styles"])]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_5, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
+  }, 8 /* PROPS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), withDirectives(createElementVNode("div", _hoisted_4, [_ctx.hint ? (openBlock(), createBlock(_component_OrHint, {
     key: 0,
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_6, [createVNode(_component_OrError, {
+  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, !_ctx.error]]), withDirectives(createElementVNode("div", _hoisted_5, [createVNode(_component_OrError, {
     disabled: _ctx.disabled
   }, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),

package/dist/bundled/v3/components/OrSelectV3/OrSelect.vue.d.ts

@@ -1,6 +1,7 @@
 import { PropType } from 'vue-demi';
 import { SelectSize } from './props';
-import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
+import { SelectGroupByFunction, SelectOption, SelectSearchFunction, SelectValue } from './types';
+import { TagsOverflow } from '../or-tags-v3';
 declare const _default: import("vue-demi").DefineComponent<{
     options: {
         type: PropType<SelectOption[]>;
@@ -11,7 +12,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => never[];
     };
     modelValue: {
-        type: PropType<string | number | object | string[] | object[] | number[]>;
+        type: PropType<SelectValue>;
         default: undefined;
     };
     multiple: {
@@ -30,10 +31,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    searchPlaceholder: {
-        type: StringConstructor;
-        default: undefined;
-    };
     hint: {
         type: StringConstructor;
         default: undefined;
@@ -74,11 +71,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    overflow: {
+        type: PropType<"default" | "wrap" | "hidden" | "scroll">;
+        default: TagsOverflow;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     inputBox: import("vue-demi").Ref<any>;
     inputBoxRoot: import("vue-demi").ComputedRef<any>;
     control: import("vue-demi").Ref<HTMLElement | undefined>;
+    multipleControl: import("vue-demi").Ref<any>;
+    singleControl: import("vue-demi").Ref<any>;
     searchControl: import("vue-demi").Ref<HTMLElement | undefined>;
     popover: import("vue-demi").Ref<any>;
     popoverRoot: import("vue-demi").ComputedRef<any>;
@@ -90,24 +93,23 @@ declare const _default: import("vue-demi").DefineComponent<{
     dropdownItemStyles: import("vue-demi").ComputedRef<string[]>;
     noSearchResultsStyles: import("vue-demi").ComputedRef<string[]>;
     controlId: import("vue-demi").Ref<string>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[] | undefined>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<SelectValue>;
     readonly: import("vue-demi").ComputedRef<boolean>;
     isEmptyModelValue: import("vue-demi").ComputedRef<boolean>;
     showClear: import("vue-demi").ComputedRef<boolean>;
-    selection: import("vue-demi").ComputedRef<SelectOption | (SelectOption | undefined)[] | undefined>;
     searchText: import("vue-demi").Ref<string>;
     internalSearchOptions: import("vue-demi").Ref<{
-        value: string | number | object;
+        value: import("./types").RawValue;
         label: string;
     }[]>;
     resolvedSearchOptions: import("vue-demi").ComputedRef<SelectOption[]>;
     groupedOptions: import("vue-demi").ComputedRef<Record<string, SelectOption[]>>;
     toggle: () => void;
     close: () => void;
-    deselect: (option: SelectOption) => void;
+    open: () => void;
+    deselect: (option: string) => void;
+    toggleOption: (option: string) => void;
     clearSearchControl: () => void;
-    innerItems: import("vue-demi").Ref<HTMLElement[]>;
-    outerItems: import("vue-demi").Ref<HTMLElement[]>;
     isDesktop: import("vue-demi").ComputedRef<boolean>;
     isMobile: import("vue-demi").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("search" | "update:modelValue" | "focus" | "blur")[], "search" | "update:modelValue" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
@@ -120,7 +122,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => never[];
     };
     modelValue: {
-        type: PropType<string | number | object | string[] | object[] | number[]>;
+        type: PropType<SelectValue>;
         default: undefined;
     };
     multiple: {
@@ -139,10 +141,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    searchPlaceholder: {
-        type: StringConstructor;
-        default: undefined;
-    };
     hint: {
         type: StringConstructor;
         default: undefined;
@@ -183,20 +181,23 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    overflow: {
+        type: PropType<"default" | "wrap" | "hidden" | "scroll">;
+        default: TagsOverflow;
+    };
 }>> & {
     onSearch?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: string | number | object | string[] | object[] | number[];
+    modelValue: SelectValue;
     label: string;
     options: SelectOption[];
     searchOptions: SelectOption[];
     multiple: boolean;
     size: "m" | "s";
     placeholder: string;
-    searchPlaceholder: string;
     hint: string;
     error: string | boolean;
     required: boolean;
@@ -207,5 +208,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     searchFunction: SelectSearchFunction;
     groupByFunction: SelectGroupByFunction;
     externalControl: boolean;
+    overflow: "default" | "wrap" | "hidden" | "scroll";
 }>;
 export default _default;

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

@@ -1,2 +1,2 @@
-export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-d1d57fd5.js';
+export { s as OrSelectV3 } from '../../OrSelect.vue_vue_type_script_lang-3c895f3a.js';
 export { InputBoxSize as SelectSize } from '../OrInputBoxV3/props.js';

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

@@ -5,7 +5,7 @@ const Select = [
 'gap-xs'];
 const SelectControl = [
 // Layout
-'layout-row',
+'layout-row', 'w-full',
 // Layout (empty)
 'empty:hidden',
 // Overflow

package/dist/bundled/v3/components/OrSelectV3/types.d.ts

@@ -1,10 +1,12 @@
 export interface SelectOption {
-    value: object | string | number;
+    value: RawValue;
     label: string;
 }
+export type RawValue = string | number | object;
 export interface SelectSearchFunction {
     (searchText: string, options: SelectOption[]): Promise<SelectOption[]>;
 }
 export interface SelectGroupByFunction {
     (option: SelectOption): string;
 }
+export type SelectValue = RawValue | RawValue[] | undefined;

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

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSidebar.vue_vue_type_script_lang-696f6851.js';
-export { s as default } from '../../OrSidebar.vue_vue_type_script_lang-696f6851.js';
+import { s as script } from '../../OrSidebar.vue_vue_type_script_lang-f69f92ca.js';
+export { s as default } from '../../OrSidebar.vue_vue_type_script_lang-f69f92ca.js';
 import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createCommentVNode } from 'vue';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 

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

@@ -1,2 +1,2 @@
 export { OrSidebarSide } from './constants.js';
-export { s as OrSidebar } from '../../OrSidebar.vue_vue_type_script_lang-696f6851.js';
+export { s as OrSidebar } from '../../OrSidebar.vue_vue_type_script_lang-f69f92ca.js';

package/dist/bundled/v3/components/OrSidebarV3/OrSidebar.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSidebar.vue_vue_type_script_lang-509fb105.js';
-export { s as default } from '../../OrSidebar.vue_vue_type_script_lang-509fb105.js';
+import { s as script } from '../../OrSidebar.vue_vue_type_script_lang-314721d5.js';
+export { s as default } from '../../OrSidebar.vue_vue_type_script_lang-314721d5.js';
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, createCommentVNode } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {

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

@@ -1,3 +1,3 @@
 export { SidebarPlacement as OrSidebarPlacement, SidebarPlacement } from './props.js';
-export { s as OrSidebarV3 } from '../../OrSidebar.vue_vue_type_script_lang-509fb105.js';
+export { s as OrSidebarV3 } from '../../OrSidebar.vue_vue_type_script_lang-314721d5.js';
 export { ResizeablePanelPadding as SidebarPadding } from '../OrResizeablePanelV3/props.js';

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

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSlider.vue_vue_type_script_lang-e0c33892.js';
-export { s as default } from '../../OrSlider.vue_vue_type_script_lang-e0c33892.js';
+import { s as script } from '../../OrSlider.vue_vue_type_script_lang-207c0596.js';
+export { s as default } from '../../OrSlider.vue_vue_type_script_lang-207c0596.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createCommentVNode, renderSlot, createVNode, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, pushScopeId, popScopeId } from 'vue';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 

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

@@ -1 +1 @@
-export { s as OrSlider } from '../../OrSlider.vue_vue_type_script_lang-e0c33892.js';
+export { s as OrSlider } from '../../OrSlider.vue_vue_type_script_lang-207c0596.js';

package/dist/bundled/v3/components/OrSortingV3/OrSorting.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSorting.vue_vue_type_script_lang-9c054059.js';
-export { s as default } from '../../OrSorting.vue_vue_type_script_lang-9c054059.js';
+import { s as script } from '../../OrSorting.vue_vue_type_script_lang-257e1c8b.js';
+export { s as default } from '../../OrSorting.vue_vue_type_script_lang-257e1c8b.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, toDisplayString, createBlock, createCommentVNode, Fragment, renderList, createTextVNode } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {

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

@@ -1 +1 @@
-export { s as OrSortingV3 } from '../../OrSorting.vue_vue_type_script_lang-9c054059.js';
+export { s as OrSortingV3 } from '../../OrSorting.vue_vue_type_script_lang-257e1c8b.js';

package/dist/bundled/v3/components/OrSwitchV3/OrSwitch.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrSwitch.vue_vue_type_script_lang-188b038b.js';
-export { s as default } from '../../OrSwitch.vue_vue_type_script_lang-188b038b.js';
+import { s as script } from '../../OrSwitch.vue_vue_type_script_lang-032fd11a.js';
+export { s as default } from '../../OrSwitch.vue_vue_type_script_lang-032fd11a.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, mergeProps, vModelCheckbox, createVNode, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
 

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

@@ -1 +1 @@
-export { s as OrSwitchV3 } from '../../OrSwitch.vue_vue_type_script_lang-188b038b.js';
+export { s as OrSwitchV3 } from '../../OrSwitch.vue_vue_type_script_lang-032fd11a.js';

package/dist/bundled/v3/components/OrTabsV3/OrTabs.js

@@ -1,5 +1,5 @@
-import { s as script } from '../../OrTabs.vue_vue_type_script_lang-c06d9565.js';
-export { s as default } from '../../OrTabs.vue_vue_type_script_lang-c06d9565.js';
+import { s as script } from '../../OrTabs.vue_vue_type_script_lang-ddac6c54.js';
+export { s as default } from '../../OrTabs.vue_vue_type_script_lang-ddac6c54.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {

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

@@ -1,2 +1,2 @@
 export { TabsVariant } from './props.js';
-export { s as OrTabsV3 } from '../../OrTabs.vue_vue_type_script_lang-c06d9565.js';
+export { s as OrTabsV3 } from '../../OrTabs.vue_vue_type_script_lang-ddac6c54.js';

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

@@ -1,15 +1,18 @@
-import { s as script } from '../../OrTagInput.vue_vue_type_script_lang-c074503e.js';
-export { s as default } from '../../OrTagInput.vue_vue_type_script_lang-c074503e.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 } from '../../OrTagInput.vue_vue_type_script_lang-cef895f1.js';
+export { s as default } from '../../OrTagInput.vue_vue_type_script_lang-cef895f1.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 _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");
@@ -32,46 +35,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({
@@ -83,7 +104,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 */)]),