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

package/dist/esm/v2/{OrTagInput-51521313.js → OrTagInput-7f917d41.js}

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, reactive, toRef } from 'vue-demi';
+import { defineComponent, ref, toRefs, computed, reactive, watch, nextTick } from 'vue-demi';
+import { onClickOutside } from '@vueuse/core';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
-import '@vueuse/core';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
@@ -10,9 +10,9 @@ import { _ as __vue_component__$1 } from './OrError-916e928e.js';
 import { _ as __vue_component__$2 } from './OrHint-1220face.js';
 import { _ as __vue_component__$3 } from './OrIconButton-07c0bd56.js';
 import { _ as __vue_component__$4 } from './OrInputBox-7dc5b9e9.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { _ as __vue_component__$5 } from './OrLabel-b465bc0b.js';
-import { _ as __vue_component__$6 } from './OrTags-98807166.js';
+import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-ed4ddf4d.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -23,7 +23,7 @@ const TagInput = [
 'gap-xs'];
 const TagInputControl = [
 // Layout
-'flex-auto',
+// 'flex-auto',
 // Typography
 'typography-inherit',
 // Theme (placeholder)
@@ -33,7 +33,6 @@ const TagInputItem = [
 '!min-h-0'];
 
 var script = defineComponent({
-  name: 'OrTagInput',
   components: {
     OrError: __vue_component__$1,
     OrHint: __vue_component__$2,
@@ -51,10 +50,6 @@ var script = defineComponent({
       type: Array,
       default: () => []
     },
-    size: {
-      type: String,
-      default: InputBoxSize.M
-    },
     label: {
       type: String,
       default: undefined
@@ -86,14 +81,33 @@ var script = defineComponent({
     disableDefaultStyles: {
       type: Boolean,
       default: false
+    },
+    overflow: {
+      type: String,
+      default: TagsOverflow.Hidden
+    },
+    // todo: review default state, disabling will breaking
+    enableClear: {
+      type: Boolean,
+      default: true
     }
   },
-  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur', 'reset'],
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     // Refs
     const root = ref();
     const control = ref();
+    const inputBox = ref();
+    const tags = ref();
+    // Props
+    const {
+      modelValue,
+      overflow,
+      placeholder,
+      disabled,
+      readonly
+    } = toRefs(props);
     // Styles
     const rootStyles = computed(() => ['or-tag-input-v3', ...TagInput]);
     const controlStyles = computed(() => [...TagInputControl]);
@@ -104,13 +118,24 @@ var script = defineComponent({
       ...useControlAttributes(),
       ...useValidationAttributes()
     });
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref();
+    const activated = ref(false);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
+    const draftModelValue = ref('');
     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;
     });
     const maxLength = computed(() => controlAttributes.maxlength);
+    const controlInlineStyles = computed(() => {
+      var _a, _b;
+      const chars = draftModelValue.value.length > 0 ? draftModelValue.value.length : currentLength.value === 0 ? (_b = (_a = placeholder.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0;
+      return {
+        width: `${Math.max(chars + 1 || 0, 3)}ch`
+      };
+    });
+    const showControl = computed(() => {
+      return draftModelValue.value.length > 0 || currentLength.value === 0 || activated.value;
+    });
     // Methods
     function focus() {
       var _a;
@@ -120,6 +145,17 @@ var script = defineComponent({
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
     }
+    function deactivate() {
+      activated.value = false;
+      nextTick(() => blur());
+      context.emit('blur');
+    }
+    function activate() {
+      if (disabled.value || readonly.value) return;
+      activated.value = true;
+      nextTick(() => focus());
+      context.emit('focus');
+    }
     function add() {
       var _a;
       const newItem = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.trim();
@@ -127,36 +163,56 @@ var script = defineComponent({
       if (proxyModelValue.value.includes(newItem)) return;
       if (maxLength.value && currentLength.value >= maxLength.value) return;
       proxyModelValue.value = [...proxyModelValue.value, newItem];
-      draftModelValue.value = undefined;
+      draftModelValue.value = '';
     }
     function remove(value) {
       proxyModelValue.value = proxyModelValue.value.filter(item => item !== value);
     }
     function reset() {
       proxyModelValue.value = [];
-      draftModelValue.value = undefined;
+      draftModelValue.value = '';
+      context.emit('reset');
     }
+    // Effects
+    onClickOutside(inputBox, () => {
+      var _a, _b;
+      if (activated.value === false || ((_b = (_a = tags.value) === null || _a === void 0 ? void 0 : _a.overflowPopover) === null || _b === void 0 ? void 0 : _b.state) === 'open') return;
+      deactivate();
+    });
+    watch(proxyModelValue, (items, prevItems) => {
+      var _a;
+      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll) {
+        ((_a = tags.value) === null || _a === void 0 ? void 0 : _a.scrollToEnd)();
+      }
+    });
     return {
       root,
       control,
+      inputBox,
+      tags,
       rootStyles,
       controlStyles,
       itemStyles,
+      controlInlineStyles,
       controlAttributes,
       proxyModelValue,
       draftModelValue,
       currentLength,
       maxLength,
+      activated,
+      showControl,
       focus,
       blur,
       add,
+      activate,
+      deactivate,
       remove,
       reset
     };
   }
 });
 
-var css_248z = "input[data-v-51a52348]{min-width:0;background:0 0;outline:0}";
+var css_248z = "input[data-v-5083e0d4]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -184,14 +240,20 @@ var __vue_render__ = function () {
       proxy: true
     }], null, true)
   }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
+    ref: "inputBox",
+    staticClass: "cursor-text",
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
-      "size": _vm.size,
+      "force-state": _vm.activated ? 'focus-within' : undefined,
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
-      "disabled": _vm.disabled
+      "disabled": _vm.disabled,
+      "tabindex": "0"
     },
-    scopedSlots: _vm._u([{
+    on: {
+      "focus": _vm.activate
+    },
+    scopedSlots: _vm._u([_vm.enableClear && !_vm.readonly && !_vm.disabled ? {
       key: "addon",
       fn: function () {
         return [_vm.proxyModelValue.length > 0 || _vm.draftModelValue ? [_c('OrIconButton', {
@@ -202,74 +264,82 @@ var __vue_render__ = function () {
           },
           on: {
             "click": function ($event) {
-              $event.stopPropagation();
               return _vm.reset();
             }
           }
         })] : _vm._e()];
       },
       proxy: true
-    }])
-  }, [_vm.proxyModelValue.length > 0 ? [_c('OrTags', {
+    } : null], null, true)
+  }, [_c('OrTags', {
+    ref: "tags",
+    staticClass: "grow",
     attrs: {
       "items": _vm.proxyModelValue,
+      "disabled": _vm.disabled,
       "tag-props": {
         variant: _vm.readonly || _vm.disabled ? 'tag' : 'reset',
         disabled: _vm.disabled
-      }
+      },
+      "overflow": _vm.overflow
     },
     on: {
       "reset": function ($event) {
         return _vm.remove($event);
       }
-    }
-  })] : _vm._e(), _vm._v(" "), _c('input', _vm._b({
-    directives: [{
-      name: "model",
-      rawName: "v-model",
-      value: _vm.draftModelValue,
-      expression: "draftModelValue"
-    }],
-    ref: "control",
-    class: _vm.controlStyles,
-    attrs: {
-      "placeholder": _vm.proxyModelValue.length === 0 ? _vm.placeholder : undefined,
-      "readonly": _vm.readonly,
-      "disabled": _vm.disabled,
-      "autocomplete": 'off',
-      "minlength": undefined,
-      "maxlength": undefined,
-      "type": 'text'
-    },
-    domProps: {
-      "value": _vm.draftModelValue
     },
-    on: {
-      "keydown": [function ($event) {
-        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
-          return null;
-        }
-        return _vm.add();
-      }, function ($event) {
-        return _vm.$emit('keydown', $event);
-      }],
-      "keyup": function ($event) {
-        return _vm.$emit('keyup', $event);
-      },
-      "focus": function ($event) {
-        return _vm.$emit('focus', $event);
-      },
-      "blur": function ($event) {
-        return _vm.$emit('blur', $event);
+    scopedSlots: _vm._u([_vm.showControl ? {
+      key: "tail",
+      fn: function () {
+        return [_c('div', {
+          staticClass: "inline-flex w-fit max-w-full"
+        }, [_c('input', _vm._b({
+          directives: [{
+            name: "model",
+            rawName: "v-model",
+            value: _vm.draftModelValue,
+            expression: "draftModelValue"
+          }],
+          ref: "control",
+          class: _vm.controlStyles,
+          style: _vm.controlInlineStyles,
+          attrs: {
+            "placeholder": _vm.proxyModelValue.length === 0 ? _vm.placeholder : undefined,
+            "readonly": _vm.readonly,
+            "disabled": _vm.disabled,
+            "autocomplete": 'off',
+            "minlength": undefined,
+            "maxlength": undefined,
+            "type": 'text'
+          },
+          domProps: {
+            "value": _vm.draftModelValue
+          },
+          on: {
+            "keydown": [function ($event) {
+              if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
+                return null;
+              }
+              return _vm.add();
+            }, function ($event) {
+              return _vm.$emit('keydown', $event);
+            }],
+            "keyup": function ($event) {
+              return _vm.$emit('keyup', $event);
+            },
+            "focus": _vm.activate,
+            "input": function ($event) {
+              if ($event.target.composing) {
+                return;
+              }
+              _vm.draftModelValue = $event.target.value;
+            }
+          }
+        }, 'input', _vm.controlAttributes, false))])];
       },
-      "input": function ($event) {
-        if ($event.target.composing) {
-          return;
-        }
-        _vm.draftModelValue = $event.target.value;
-      }
-    }
-  }, 'input', _vm.controlAttributes, false))], 2), _vm._v(" "), _c('div', {
+      proxy: true
+    } : null], null, true)
+  })], 1), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -314,7 +384,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-51a52348";
+const __vue_scope_id__ = "data-v-5083e0d4";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrTags-98807166.js → OrTags-ed4ddf4d.js}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useOverflow } from './useOverflow-ff9ae748.js';
+import { defineComponent, ref, toRefs, computed, nextTick } from 'vue-demi';
+import { u as useOverflow } from './useOverflow-b482f3c9.js';
 import '@vueuse/core';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
@@ -10,8 +10,12 @@ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var TagsOverflow;
 (function (TagsOverflow) {
+  // todo: remove in next braking release
+  // @deprecated use Hidden instead
   TagsOverflow["Default"] = "default";
   TagsOverflow["Wrap"] = "wrap";
+  TagsOverflow["Hidden"] = "hidden";
+  TagsOverflow["Scroll"] = "scroll";
 })(TagsOverflow || (TagsOverflow = {}));
 
 const Tags = [
@@ -25,28 +29,49 @@ const Tags = [
 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
 const TagsContainer = [
 // Layout
-'layout-row',
+'layout-row', 'max-w-full',
 // Spacing
-'gap-sm'];
+'gap-sm', 'py-xs'];
 const TagsContainerOverflows = {
+  // todo: remove in next braking release
+  // @deprecated use Hidden instead
   [TagsOverflow.Default]: [
   // Overflow
   'overflow-hidden'],
+  [TagsOverflow.Hidden]: [
+  // Overflow
+  'overflow-hidden'],
   [TagsOverflow.Wrap]: [
   // Layout
-  '!flex-wrap']
+  '!flex-wrap'],
+  [TagsOverflow.Scroll]: [
+  // Layout
+  'overflow-y-auto',
+  // todo: extract to plugin?
+  '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:\'none\'] [scrollbar-width:\'none\']']
 };
 const TagsOverflowButton = [
 // Typography
 'typography-caption-regular'];
 const TagsOverflowPopover = [
 // Layout
-'layout-row !flex-wrap',
+'layout-row !flex-wrap !content-start overflow-y-auto',
 // Box
-'max-w-[192px]',
+'max-w-[192px] max-h-[340px]',
 // Spacing
 'px-md', 'py-md', 'gap-sm'];
 
+function castToTagObject(tag) {
+  if (typeof tag === 'string') {
+    return {
+      label: tag,
+      value: tag
+    };
+  } else {
+    return tag;
+  }
+}
+
 var script = defineComponent({
   name: 'OrTags',
   components: {
@@ -61,19 +86,31 @@ var script = defineComponent({
     },
     overflow: {
       type: String,
-      default: TagsOverflow.Default
+      default: TagsOverflow.Hidden
     },
     tagProps: {
       type: Object,
       default: undefined
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['click', 'focus', 'blur', 'reset'],
-  expose: ['root'],
+  expose: ['root', 'container', 'overflowPopover', 'scrollToEnd'],
   setup(props) {
     // Refs
     const root = ref();
     const container = ref();
+    // Props
+    const {
+      items,
+      overflow
+    } = toRefs(props);
+    const localOverflow = computed(() => {
+      return overflow.value === TagsOverflow.Default ? TagsOverflow.Hidden : overflow.value;
+    });
     const overflowButton = ref();
     const overflowButtonRoot = computed(() => {
       var _a;
@@ -86,19 +123,39 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-tags-v3', ...Tags]);
-    const containerStyles = computed(() => [...TagsContainer, ...TagsContainerOverflows[props.overflow]]);
+    const containerStyles = computed(() => [...TagsContainer, ...TagsContainerOverflows[localOverflow.value]]);
     const overflowButtonStyles = computed(() => [...TagsOverflowButton]);
     const overflowPopoverStyles = computed(() => [...TagsOverflowPopover]);
     // State
     const {
       innerItems
-    } = useOverflow(container);
+    } = useOverflow(container, {
+      hide: false
+    });
+    const localItems = computed(() => {
+      return items.value.map(castToTagObject);
+    });
     const overflowItems = computed(() => {
-      return props.items.slice(innerItems.value.length);
+      return localItems.value.slice(innerItems.value.length);
     });
+    // Methods
+    function togglePopover() {
+      overflowPopover.value.toggle();
+    }
+    function scrollToEnd() {
+      nextTick(() => {
+        var _a, _b;
+        (_a = container.value) === null || _a === void 0 ? void 0 : _a.scrollTo({
+          left: (_b = container.value) === null || _b === void 0 ? void 0 : _b.scrollWidth,
+          behavior: 'smooth'
+        });
+      });
+    }
     return {
       root,
       container,
+      localOverflow,
+      localItems,
       overflowButton,
       overflowButtonRoot,
       overflowPopover,
@@ -107,7 +164,9 @@ var script = defineComponent({
       containerStyles,
       overflowButtonStyles,
       overflowPopoverStyles,
-      overflowItems
+      overflowItems,
+      togglePopover,
+      scrollToEnd
     };
   }
 });
@@ -123,30 +182,32 @@ var __vue_render__ = function () {
   return _c('div', {
     ref: "root",
     class: _vm.rootStyles
-  }, [_c('div', {
+  }, [_vm.localItems.length > 0 ? _c('div', {
     ref: "container",
     class: _vm.containerStyles
-  }, _vm._l(_vm.items, function (item) {
+  }, [_vm._l(_vm.localItems, function (item) {
     return _c('OrTag', _vm._b({
-      key: item,
+      key: item.value,
+      staticClass: "max-w-full",
       on: {
         "reset": function ($event) {
-          return _vm.$emit('reset', item);
+          return _vm.$emit('reset', item.value);
         }
       }
-    }, 'OrTag', _vm.tagProps, false), [_vm._v("\n      " + _vm._s(item) + "\n    ")]);
-  }), 1), _vm._v(" "), _vm.overflowItems.length > 0 ? [_c('OrButton', {
+    }, 'OrTag', _vm.tagProps, false), [_vm._v("\n      " + _vm._s(item.label) + "\n    ")]);
+  }), _vm._v(" "), _vm.localOverflow === 'wrap' ? _vm._t("tail") : _vm._e()], 2) : _vm._e(), _vm._v(" "), _vm.localOverflow === 'hidden' && _vm.overflowItems.length > 0 ? [_c('OrButton', {
     ref: "overflowButton",
     class: _vm.overflowButtonStyles,
     attrs: {
       "type": 'button',
       "variant": 'link',
-      "color": 'inherit'
+      "color": 'inherit',
+      "disabled": _vm.disabled
     },
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.overflowPopover.open();
+        return _vm.togglePopover.apply(null, arguments);
       }
     }
   }, [_vm._v("\n      +" + _vm._s(_vm.overflowItems.length) + "\n    ")]), _vm._v(" "), _c('OrPopover', {
@@ -158,14 +219,14 @@ var __vue_render__ = function () {
     class: _vm.overflowPopoverStyles
   }, _vm._l(_vm.overflowItems, function (item) {
     return _c('OrTag', _vm._b({
-      key: item,
+      key: item.value,
       on: {
         "reset": function ($event) {
-          return _vm.$emit('reset', item);
+          return _vm.$emit('reset', item.value);
         }
       }
-    }, 'OrTag', _vm.tagProps, false), [_vm._v("\n          " + _vm._s(item) + "\n        ")]);
-  }), 1)])] : _vm._e()], 2);
+    }, 'OrTag', _vm.tagProps, false), [_vm._v("\n          " + _vm._s(item.label) + "\n        ")]);
+  }), 1)])] : _vm._e(), _vm._v(" "), _vm.localOverflow != 'wrap' || _vm.items.length === 0 ? _vm._t("tail") : _vm._e()], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/esm/v2/components/index.js

@@ -93,7 +93,7 @@ export { _ as OrSearch } from '../OrSearch-ac542dd6.js';
 export { _ as OrSearchV3 } from '../OrSearch-c5850ddd.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-bba94cda.js';
 export { _ as OrSelect } from '../OrSelect-c0d04cf6.js';
-export { _ as OrSelectV3 } from '../OrSelect-57af5b9a.js';
+export { _ as OrSelectV3 } from '../OrSelect-578bcee2.js';
 export { _ as OrSidebar, O as OrSidebarSide } from '../OrSidebar-c56a9221.js';
 export { _ as OrSidebarV3 } from '../OrSidebar-d24100a9.js';
 export { S as OrSidebarPlacement, S as SidebarPlacement } from '../props-cc0586c8.js';
@@ -115,9 +115,9 @@ export { _ as OrTabV3 } from '../OrTab-13db2e49.js';
 export { _ as OrTabs } from '../OrTabs-62e7e478.js';
 export { _ as OrTabsV3, T as TabsVariant } from '../OrTabs-71f4fc47.js';
 export { _ as OrTag } from '../OrTag-b5803a20.js';
-export { _ as OrTagInputV3 } from '../OrTagInput-51521313.js';
+export { _ as OrTagInputV3 } from '../OrTagInput-7f917d41.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-884d1994.js';
-export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-98807166.js';
+export { _ as OrTagsV3, T as TagsOverflow } from '../OrTags-ed4ddf4d.js';
 export { _ as OrTeleport } from '../OrTeleport.vue2-f0c16c71.js';
 export { _ as OrTeleportV3 } from '../OrTeleport.vue2-424c7f33.js';
 export { _ as OrTextV3 } from '../OrText-44449e7b.js';
@@ -199,8 +199,12 @@ import '../codemirrorView-020fe885.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import '../useOverflow-ff9ae748.js';
+import '../OrSelectMultipleControl-961d8d6a.js';
+import '../OrSelectPlaceholder-f36f4e40.js';
+import '../OrSelectControlInput-28c226f8.js';
+import '../OrSelectSingleControl-76b29e0b.js';
 import 'lodash/range';
 import '../styles-ed564e39.js';
+import '../useOverflow-b482f3c9.js';
 import 'portal-vue/dist/portal-vue.esm.js';
 import 'portal-vue';