@onereach/ui-components 20.1.0 → 20.1.2

package/dist/{esm-deps → esm}/components/or-tabs-v3/index.js

@@ -1,48 +1,34 @@
+import { defineComponent, ref, computed, reactive, toRef, watch, nextTick, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, withModifiers, withCtx, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, withDirectives, vShow } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
-import { openBlock, createElementBlock, normalizeClass, renderSlot, defineComponent, ref, computed, reactive, toRef, watch, nextTick, onMounted } from 'vue';
-import { r as re } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import '../../OrIcon-cd8db2b5.js';
-import { OrIconV3 as script$2 } from '../or-icon-v3/index.js';
-import '../../OrMenu-13beee12.js';
-import { OrMenuV3 as script$3 } from '../or-menu-v3/index.js';
-import '../../OrMenuItem-c40a275b.js';
-import { OrMenuItemV3 as script$4 } from '../or-menu-item-v3/index.js';
-import { OrTabV3 as script$1 } from '../or-tab-v3/index.js';
-import '../../dom-CwV-xS38-5babad01.js';
+import { r as re } from '../OrAutocompleteV3-8c6de221.js';
+import { OrIconV3 as script$1 } from '../or-icon-v3/index.js';
+import { OrMenuV3 as script$2 } from '../or-menu-v3/index.js';
+import { OrMenuItemV3 as script$3 } from '../or-menu-item-v3/index.js';
+import { OrTabV3 as script$4 } from '../or-tab-v3/index.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 import 'lodash/get';
 import 'lodash/isElement';
-import '../../OrPopover-bd078650.js';
+import '../or-error-v3/index.js';
+import '../or-hint-v3/index.js';
+import '../or-icon-button-v3/index.js';
+import '../or-tooltip-v3/index.js';
 import '../or-popover-v3/index.js';
-import '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
+import '@floating-ui/dom';
 import '../or-bottom-sheet-v3/index.js';
-import '../../OrOverlay-d67e7093.js';
 import '../or-overlay-v3/index.js';
 import '../or-teleport-v3/index.js';
-import '../../OrIconButton-b7d4175c.js';
-import '../or-icon-button-v3/index.js';
-import '../../constants-57e8b5da.js';
-import '../../OrTooltip-62181b78.js';
-import '../or-tooltip-v3/index.js';
-
-const _hoisted_1 = ["selected", "invalid", "disabled"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: 'root',
-    class: normalizeClass(_ctx.rootStyles),
-    selected: _ctx.selected,
-    invalid: _ctx.invalid,
-    disabled: _ctx.disabled,
-    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('click', $event)),
-    onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
-    onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event))
-  }, [renderSlot(_ctx.$slots, "default")], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1);
-}
-
-script$1.render = render;
-script$1.__file = "src/components/or-tab-v3/OrTab.vue";
+import '../or-input-box-v3/index.js';
+import '../or-input-v3/index.js';
+import '../OrInlineInputV3-061441a3.js';
+import '../or-inline-input-box-v3/index.js';
+import '../or-text-v3/index.js';
+import '../or-label-v3/index.js';
+import '../or-loader-v3/index.js';
+import '../or-tag-input-v3/index.js';
+import '../or-tags-v3/index.js';
+import '../or-button-v3/index.js';
+import '../or-tag-v3/index.js';
 
 var TabsVariant;
 (function (TabsVariant) {
@@ -85,10 +71,10 @@ const TabsContent = [
 var script = defineComponent({
   name: 'OrTabs',
   components: {
-    OrIcon: script$2,
-    OrMenu: script$3,
-    OrMenuItem: script$4,
-    OrTab: script$1
+    OrIcon: script$1,
+    OrMenu: script$2,
+    OrMenuItem: script$3,
+    OrTab: script$4
   },
   model: {
     prop: 'modelValue',
@@ -210,4 +196,70 @@ var script = defineComponent({
   }
 });
 
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrTab = resolveComponent("OrTab");
+  const _component_OrIcon = resolveComponent("OrIcon");
+  const _component_OrMenuItem = resolveComponent("OrMenuItem");
+  const _component_OrMenu = resolveComponent("OrMenu");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.containerStyles)
+  }, [createElementVNode("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs.normal, tab => {
+    return openBlock(), createBlock(_component_OrTab, {
+      key: tab.value,
+      selected: tab.value === _ctx.proxyModelValue,
+      invalid: tab.invalid,
+      disabled: tab.disabled,
+      onClick: withModifiers($event => _ctx.selectTab(tab), ["stop"])
+    }, {
+      default: withCtx(() => [renderSlot(_ctx.$slots, "tab", {
+        tab: tab,
+        activeTab: _ctx.activeTab
+      }, () => [createTextVNode(toDisplayString(tab.label), 1 /* TEXT */)])]),
+      _: 2 /* DYNAMIC */
+    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["selected", "invalid", "disabled", "onClick"]);
+  }), 128 /* KEYED_FRAGMENT */)), _ctx.tabs.hidden.length > 0 ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createVNode(_component_OrTab, {
+    ref: 'overflowTab',
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.overflowMenu && _ctx.overflowMenu.toggle(), ["stop"]))
+  }, {
+    default: withCtx(() => [createVNode(_component_OrIcon, {
+      icon: 'more_horiz',
+      variant: 'filled-bold'
+    })]),
+    _: 1 /* STABLE */
+  }), createVNode(_component_OrMenu, {
+    ref: 'overflowMenu',
+    trigger: _ctx.overflowTabRoot
+  }, {
+    default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs.hidden, tab => {
+      return openBlock(), createBlock(_component_OrMenuItem, {
+        key: tab.value,
+        disabled: tab.disabled,
+        onClick: withModifiers($event => {
+          _ctx.selectTab(tab);
+          _ctx.overflowMenu && _ctx.overflowMenu.close();
+        }, ["stop"])
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString(tab.label), 1 /* TEXT */)]),
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["trigger"])], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true)], 2 /* CLASS */), createElementVNode("div", {
+    class: normalizeClass(_ctx.contentStyles)
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, tab => {
+    return openBlock(), createElementBlock(Fragment, null, [_ctx.isTabRendered(tab.value) ? withDirectives((openBlock(), createElementBlock("div", {
+      key: tab.value,
+      class: "contents"
+    }, [renderSlot(_ctx.$slots, String(tab.value))])), [[vShow, String(_ctx.proxyModelValue) === String(tab.value)]]) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */);
+  }), 256 /* UNKEYED_FRAGMENT */))], 2 /* CLASS */)], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-tabs-v3/OrTabs.vue";
+
 export { script as OrTabsV3, TabsVariant };

package/dist/{esm-deps → esm}/components/or-tag-input-v3/index.js

@@ -1,42 +1,32 @@
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick, 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 '../OrInlineInputV3-061441a3.js';
 import { onClickOutside } from '@vueuse/core';
-import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue';
-import { n as ne, K, _, i as ie, r as re } from '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import { an as Fs, aa as $s, a1 as ds } from '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '../../dom-CwV-xS38-5babad01.js';
-import '../../OrHint-fcdf591c.js';
+import { n as ne, K, _, c as ie, r as re, F as Fs, $ as $s, d as ds } from '../OrAutocompleteV3-8c6de221.js';
 import { OrErrorV3 as script$1 } from '../or-error-v3/index.js';
 import { OrHintV3 as script$2 } from '../or-hint-v3/index.js';
-import '../../OrIconButton-b7d4175c.js';
 import { OrIconButtonV3 as script$3 } from '../or-icon-button-v3/index.js';
-import '../../OrInputBox-e79531c2.js';
-import { OrInputBoxV3 as script$4 } from '../or-input-box-v3/index.js';
-import '../../OrLabel-d50a3ebb.js';
+import { OrInputBoxV3 as script$4, InputBoxVariant } from '../or-input-box-v3/index.js';
 import { OrLabelV3 as script$5 } from '../or-label-v3/index.js';
-import '../../OrLoader-4e331586.js';
 import { OrLoaderV3 as script$6 } from '../or-loader-v3/index.js';
-import '../../OrTags-995e4846.js';
 import { OrTagsV3 as script$7, TagsOverflow } from '../or-tags-v3/index.js';
-import { a as InputBoxVariant } from '../../types-98e9a758.js';
 import { TagColor } from '../or-tag-v3/index.js';
+import '../or-inline-input-box-v3/index.js';
+import '../or-text-v3/index.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 import 'lodash/get';
 import 'lodash/isElement';
-import '../../constants-57e8b5da.js';
-import '../../OrIcon-cd8db2b5.js';
+import '../or-input-v3/index.js';
 import '../or-icon-v3/index.js';
-import '../../OrTooltip-62181b78.js';
+import '../or-menu-item-v3/index.js';
 import '../or-tooltip-v3/index.js';
 import '../or-popover-v3/index.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
+import '@floating-ui/dom';
 import '../or-bottom-sheet-v3/index.js';
-import '../../OrOverlay-d67e7093.js';
 import '../or-overlay-v3/index.js';
 import '../or-teleport-v3/index.js';
-import '../../OrPopover-bd078650.js';
-import '../../OrButton-91f48227.js';
+import './index.js';
 import '../or-button-v3/index.js';
-import '../../props-bba3dca8.js';
 
 const TagInput = [
 // Layout
@@ -278,4 +268,134 @@ var script = defineComponent({
   }
 });
 
+const _hoisted_1 = {
+  class: "inline-flex w-fit max-w-full"
+};
+const _hoisted_2 = ["placeholder", "readonly", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrLabel = resolveComponent("OrLabel");
+  const _component_OrTags = resolveComponent("OrTags");
+  const _component_OrLoader = resolveComponent("OrLoader");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrInputBox = resolveComponent("OrInputBox");
+  const _component_OrHint = resolveComponent("OrHint");
+  const _component_OrError = resolveComponent("OrError");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.$slots.label || _ctx.$slots.addon || _ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
+    key: 0,
+    "control-id": _ctx.controlAttributes.id,
+    variant: 'input',
+    required: _ctx.required,
+    disabled: _ctx.disabled
+  }, {
+    addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
+    default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), createVNode(_component_OrInputBox, {
+    ref: 'inputBox',
+    class: normalizeClass(_ctx.inputBoxStyles),
+    variant: _ctx.variant,
+    invalid: !!_ctx.error,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled,
+    tabindex: 0,
+    "force-state": _ctx.activated ? 'focus-within' : undefined,
+    onFocus: _ctx.activate
+  }, createSlots({
+    default: withCtx(() => [createVNode(_component_OrTags, {
+      ref: 'tags',
+      class: normalizeClass(['grow']),
+      items: _ctx.tagsItems,
+      disabled: _ctx.disabled,
+      "tag-props": _ctx.tagsProps,
+      overflow: _ctx.overflow,
+      onReset: _cache[6] || (_cache[6] = $event => _ctx.remove($event))
+    }, createSlots({
+      tag: withCtx(({
+        item
+      }) => [renderSlot(_ctx.$slots, "tag", {
+        item: item
+      }, () => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)])]),
+      _: 2 /* DYNAMIC */
+    }, [_ctx.showControl ? {
+      name: "tail",
+      fn: withCtx(() => [createElementVNode("div", _hoisted_1, [withDirectives(createElementVNode("input", mergeProps({
+        ref: 'control'
+      }, _ctx.controlAttributes, {
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event),
+        class: _ctx.controlStyles,
+        style: _ctx.controlInlineStyles,
+        type: 'text',
+        placeholder: !_ctx.proxyModelValue || _ctx.proxyModelValue && _ctx.proxyModelValue.length === 0 ? _ctx.placeholder : undefined,
+        readonly: _ctx.readonly,
+        disabled: _ctx.disabled,
+        autocomplete: 'off',
+        minlength: undefined,
+        maxlength: undefined,
+        onInput: _cache[1] || (_cache[1] = $event => _ctx.$emit('input', $event)),
+        onKeydown: [_cache[2] || (_cache[2] = $event => _ctx.$emit('keydown', $event)), _cache[3] || (_cache[3] = withKeys($event => _ctx.add(), ["enter"]))],
+        onKeyup: _cache[4] || (_cache[4] = $event => _ctx.$emit('keyup', $event)),
+        onFocus: _cache[5] || (_cache[5] = (...args) => _ctx.activate && _ctx.activate(...args))
+      }), 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 */
+  }, [_ctx.$slots.prependInner ? {
+    name: "prepend",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "prependInner")]),
+    key: "0"
+  } : undefined, _ctx.$slots.appendInner ? {
+    name: "addon",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "appendInner")]),
+    key: "1"
+  } : _ctx.loading ? {
+    name: "addon",
+    fn: withCtx(() => [createVNode(_component_OrLoader, {
+      variant: 'circular',
+      color: _ctx.error ? 'danger' : 'primary',
+      size: _ctx.isMobile ? 'm' : 's'
+    }, null, 8 /* PROPS */, ["color", "size"])]),
+    key: "2"
+  } : _ctx.enableClear && !_ctx.readonly && !_ctx.disabled ? {
+    name: "addon",
+    fn: withCtx(() => [_ctx.proxyModelValue && _ctx.proxyModelValue.length > 0 || _ctx.draftModelValue ? (openBlock(), createBlock(_component_OrIconButton, {
+      key: 0,
+      icon: 'close',
+      color: 'inherit',
+      onClick: _cache[7] || (_cache[7] = $event => _ctx.reset())
+    })) : createCommentVNode("v-if", true)]),
+    key: "3"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "invalid", "readonly", "disabled", "force-state", "onFocus"]), _ctx.$slots.hint || _ctx.hint || _ctx.maxLength ? withDirectives((openBlock(), createBlock(_component_OrHint, {
+    key: 1,
+    disabled: _ctx.disabled
+  }, createSlots({
+    default: withCtx(() => [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)])]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.maxLength ? {
+    name: "addon",
+    fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLength) + " / " + toDisplayString(_ctx.maxLength), 1 /* TEXT */)]),
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled"])), [[vShow, !_ctx.error]]) : createCommentVNode("v-if", true), withDirectives(createVNode(_component_OrError, {
+    disabled: _ctx.disabled
+  }, createSlots({
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error) + " ", 1 /* TEXT */)]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.maxLength ? {
+    name: "addon",
+    fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLength) + " / " + toDisplayString(_ctx.maxLength), 1 /* TEXT */)]),
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["disabled"]), [[vShow, typeof _ctx.error === 'string' && _ctx.error.length > 0]])], 2 /* CLASS */);
+}
+
+var css_248z = "\ninput[data-v-368ea875] {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\n";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-368ea875";
+script.__file = "src/components/or-tag-input-v3/OrTagInput.vue";
+
 export { script as OrTagInputV3 };

package/dist/{esm-deps → esm}/components/or-tag-v3/index.js

@@ -1,26 +1,32 @@
-import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue';
-import '../../OrIconButton-b7d4175c.js';
+import { defineComponent, ref, computed, watchPostEffect, unref, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
 import { OrIconButtonV3 as script$1 } from '../or-icon-button-v3/index.js';
-import '../../constants-57e8b5da.js';
-import '../../OrIcon-cd8db2b5.js';
-import '../or-icon-v3/index.js';
-import '../../OrTooltip-62181b78.js';
-import '../or-tooltip-v3/index.js';
-import '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import '../../dom-CwV-xS38-5babad01.js';
+import '../OrAutocompleteV3-8c6de221.js';
+import '@vueuse/core';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
 import 'lodash/get';
 import 'lodash/isElement';
-import '@vueuse/core';
+import '../or-error-v3/index.js';
+import '../or-hint-v3/index.js';
+import '../or-input-box-v3/index.js';
+import '../or-input-v3/index.js';
+import '../OrInlineInputV3-061441a3.js';
+import '../or-inline-input-box-v3/index.js';
+import '../or-text-v3/index.js';
+import '../or-icon-v3/index.js';
+import '../or-label-v3/index.js';
+import '../or-loader-v3/index.js';
+import '../or-menu-item-v3/index.js';
+import '../or-tooltip-v3/index.js';
 import '../or-popover-v3/index.js';
-import '../../extractCssVarName-IHa2pGlF-614fb8d2.js';
-import '@floating-ui/core';
-import '@floating-ui/utils';
-import '@floating-ui/utils/dom';
+import '@floating-ui/dom';
 import '../or-bottom-sheet-v3/index.js';
-import '../../OrOverlay-d67e7093.js';
 import '../or-overlay-v3/index.js';
 import '../or-teleport-v3/index.js';
-import '../../OrPopover-bd078650.js';
+import '../or-tag-input-v3/index.js';
+import '../or-tags-v3/index.js';
+import '../or-button-v3/index.js';
+import './index.js';
 
 var TagVariant;
 (function (TagVariant) {
@@ -111,4 +117,33 @@ var script = defineComponent({
   }
 });
 
+const _hoisted_1 = ["tabindex", "disabled"];
+const _hoisted_2 = {
+  class: "truncate"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: /*#__PURE__*/normalizeClass(['layout-inline-row', '-m-[4px] md:-m-[2px]'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles),
+    tabindex: !_ctx.disabled && _ctx.variant === 'button' ? 0 : null,
+    disabled: _ctx.disabled,
+    onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('click', $event)),
+    onFocus: _cache[2] || (_cache[2] = $event => _ctx.$emit('focus', $event)),
+    onBlur: _cache[3] || (_cache[3] = $event => _ctx.$emit('blur', $event))
+  }, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]), _ctx.variant === 'reset' ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_component_OrIconButton, {
+    icon: 'close',
+    color: _ctx.custom ? 'inherit' : _ctx.color,
+    disabled: _ctx.disabled,
+    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('reset'), ["stop"]))
+  }, null, 8 /* PROPS */, ["color", "disabled"])])) : createCommentVNode("v-if", true)], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-tag-v3/OrTag.vue";
+
 export { script as OrTagV3, TagColor, TagVariant };