@onereach/ui-components 20.1.0 → 20.1.2

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

@@ -1,24 +1,32 @@
-import { defineComponent, ref, computed } from 'vue';
-import { i as isVue3 } from '../../constants-57e8b5da.js';
-import '../../OrIcon-cd8db2b5.js';
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, createVNode, normalizeProps, guardReactiveProps, createSlots, withCtx, renderSlot } from 'vue';
+import { i as isVue3 } from '../OrAutocompleteV3-8c6de221.js';
 import { OrIconV3 as script$1, IconSize, IconVariant } from '../or-icon-v3/index.js';
-import '../../OrTooltip-62181b78.js';
 import { OrTooltipV3 as script$2 } from '../or-tooltip-v3/index.js';
-import '../../useValidationAttributes-DxhcSj_h-3380c3cf.js';
-import '../../dom-CwV-xS38-5babad01.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 './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-label-v3/index.js';
+import '../or-loader-v3/index.js';
+import '../or-menu-item-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 '../or-tag-v3/index.js';
 
 var IconButtonColor;
 (function (IconButtonColor) {
@@ -160,4 +168,36 @@ var script = defineComponent({
   }
 });
 
+const _hoisted_1 = ["selected", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  const _component_OrTooltip = resolveComponent("OrTooltip");
+  return openBlock(), createElementBlock("button", mergeProps({
+    ref: 'root',
+    class: _ctx.rootStyles,
+    type: 'button',
+    selected: _ctx.selected,
+    disabled: _ctx.disabled,
+    onMouseover: _cache[0] || (_cache[0] = $event => _ctx.tooltipRef && _ctx.tooltipRef.open()),
+    onMouseout: _cache[1] || (_cache[1] = $event => _ctx.tooltipRef && _ctx.tooltipRef.close())
+  }, toHandlers({
+    ...(_ctx.isVue3 ? {} : _ctx.$listeners),
+    click: e => _ctx.$emit('click', e),
+    focus: e => _ctx.$emit('focus', e),
+    blur: e => _ctx.$emit('blur', e)
+  }, true)), [createVNode(_component_OrIcon, normalizeProps(guardReactiveProps(_ctx.iconProps)), null, 16 /* FULL_PROPS */), createVNode(_component_OrTooltip, mergeProps({
+    ref: "tooltipRef",
+    trigger: _ctx.root
+  }, _ctx.tooltipProps), createSlots({
+    _: 2 /* DYNAMIC */
+  }, [_ctx.$slots.tooltipContent ? {
+    name: "content",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "tooltipContent")]),
+    key: "0"
+  } : undefined]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["trigger"])], 16 /* FULL_PROPS */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-icon-button-v3/OrIconButton.vue";
+
 export { IconButtonColor, script as OrIconButtonV3 };

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, toDisplayString } from 'vue';
 
 var IconVariant;
 (function (IconVariant) {
@@ -87,4 +87,15 @@ var script = defineComponent({
   }
 });
 
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('click', $event))
+  }, toDisplayString(_ctx.icon), 3 /* TEXT, CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-icon-v3/OrIcon.vue";
+
 export { IconSize, IconVariant, script as OrIconV3 };

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

@@ -1,5 +1,4 @@
-import { defineComponent, ref, computed } from 'vue';
-import '../../OrIcon-cd8db2b5.js';
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, mergeProps, createCommentVNode } from 'vue';
 import { OrIconV3 as script$1, IconVariant, IconSize } from '../or-icon-v3/index.js';
 
 var IndicatorColor;
@@ -112,4 +111,18 @@ var script = defineComponent({
   }
 });
 
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.icon ? (openBlock(), createBlock(_component_OrIcon, mergeProps({
+    key: 0,
+    class: _ctx.iconContainerStyles
+  }, _ctx.iconProps), null, 16 /* FULL_PROPS */, ["class"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-indicator-v3/OrIndicator.vue";
+
 export { IndicatorColor, IndicatorSize, script as OrIndicatorV3 };

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
 
 var InlineInputBoxSize;
 (function (InlineInputBoxSize) {
@@ -73,4 +73,17 @@ var script = defineComponent({
   }
 });
 
+const _hoisted_1 = ["invalid", "activated"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles),
+    invalid: _ctx.invalid,
+    activated: _ctx.activated
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-inline-input-box-v3/OrInlineInputBox.vue";
+
 export { InlineInputBoxSize, script as OrInlineInputBoxV3 };

package/dist/esm/components/or-inline-input-v3/index.js

@@ -0,0 +1,29 @@
+export { I as InlineInputType, a as OrInlineInputV3 } from '../OrInlineInputV3-061441a3.js';
+import 'vue';
+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 '../or-error-v3/index.js';
+import '../or-hint-v3/index.js';
+import '../or-icon-button-v3/index.js';
+import '../or-icon-v3/index.js';
+import '../or-tooltip-v3/index.js';
+import '../or-popover-v3/index.js';
+import '@floating-ui/dom';
+import '../or-bottom-sheet-v3/index.js';
+import '../or-overlay-v3/index.js';
+import '../or-teleport-v3/index.js';
+import '../or-input-box-v3/index.js';
+import '../or-input-v3/index.js';
+import '../or-label-v3/index.js';
+import '../or-loader-v3/index.js';
+import '../or-inline-input-box-v3/index.js';
+import '../or-text-v3/index.js';
+import '../or-menu-item-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';

package/dist/esm/components/or-inline-textarea-v3/index.js

@@ -0,0 +1,248 @@
+import { defineComponent, reactive, ref, computed, toRef, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelText, withModifiers, createCommentVNode, createBlock, createSlots, renderSlot, createTextVNode, toDisplayString, vShow } from 'vue';
+import { s as styleInject } from '../OrInlineInputV3-061441a3.js';
+import { K, _, c as ie, r as re } from '../OrAutocompleteV3-8c6de221.js';
+import { useTextareaAutosize } from '@vueuse/core';
+import { OrErrorV3 as script$1 } from '../or-error-v3/index.js';
+import { OrHintV3 as script$2 } from '../or-hint-v3/index.js';
+import { OrIconButtonV3 as script$3 } from '../or-icon-button-v3/index.js';
+import { OrInlineInputBoxV3 as script$4 } from '../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 '../or-input-box-v3/index.js';
+import '../or-input-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 '@floating-ui/dom';
+import '../or-bottom-sheet-v3/index.js';
+import '../or-overlay-v3/index.js';
+import '../or-teleport-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';
+
+const InlineTextarea = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const InlineTextareaControl = [
+// Box
+'w-full',
+// Typography
+'typography-inherit',
+// Theme (placeholder)
+'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark',
+// Behavior
+'resize-none'];
+const InlineTextareaAction = [
+// Layout
+'layout-inline-row self-start',
+// Spacing
+'px-0', 'py-sm*', 'gap-sm',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script = defineComponent({
+  name: 'OrInlineTextarea',
+  components: {
+    OrError: script$1,
+    OrHint: script$2,
+    OrIconButton: script$3,
+    OrInlineInputBox: script$4
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    saveOnBlur: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur', 'apply', 'reset'],
+  expose: ['root', 'apply', 'reset', 'focus', 'blur'],
+  setup(props, context) {
+    const attributes = reactive({
+      id: K(),
+      ..._(),
+      ...ie()
+    });
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-inline-textarea-v3', ...InlineTextarea]);
+    const control = ref();
+    const controlStyles = computed(() => [...InlineTextareaControl]);
+    const actionStyles = computed(() => [...InlineTextareaAction]);
+    // State
+    const model = re(toRef(props, 'modelValue'), context.emit, {
+      defaultValue: ref('')
+    });
+    const draft = ref(model.value);
+    watch(model, value => {
+      draft.value = value;
+    });
+    const activated = ref(false);
+    const length = computed(() => {
+      var _a, _b;
+      return (_b = (_a = draft.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
+    });
+    const maxLength = computed(() => {
+      return attributes.maxlength;
+    });
+    // Handlers
+    function onFocus() {
+      activated.value = true;
+    }
+    function onBlur() {
+      if (props.saveOnBlur) {
+        apply();
+      }
+    }
+    // Methods
+    function apply() {
+      if (draft.value !== model.value) {
+        model.value = draft.value;
+      }
+      activated.value = false;
+      nextTick(() => context.emit('apply', model.value));
+    }
+    function reset() {
+      if (draft.value !== model.value) {
+        draft.value = model.value;
+      }
+      activated.value = false;
+      nextTick(() => context.emit('reset', model.value));
+    }
+    function focus() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function blur() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    useTextareaAutosize({
+      element: control,
+      input: draft
+    });
+    return {
+      attributes,
+      root,
+      rootStyles,
+      control,
+      controlStyles,
+      actionStyles,
+      model,
+      draft,
+      activated,
+      length,
+      maxLength,
+      onFocus,
+      onBlur,
+      apply,
+      reset,
+      focus,
+      blur
+    };
+  }
+});
+
+const _hoisted_1 = {
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'gap-sm'])
+};
+const _hoisted_2 = ["placeholder", "activated"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrInlineInputBox = resolveComponent("OrInlineInputBox");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrHint = resolveComponent("OrHint");
+  const _component_OrError = resolveComponent("OrError");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createElementVNode("div", _hoisted_1, [createVNode(_component_OrInlineInputBox, {
+    invalid: !!_ctx.error,
+    activated: _ctx.activated
+  }, {
+    default: withCtx(() => [withDirectives(createElementVNode("textarea", mergeProps({
+      ref: 'control'
+    }, _ctx.attributes, {
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draft = $event),
+      class: _ctx.controlStyles,
+      placeholder: _ctx.placeholder,
+      activated: _ctx.activated,
+      onInput: _cache[1] || (_cache[1] = $event => _ctx.$emit('input', $event)),
+      onKeydown: _cache[2] || (_cache[2] = $event => _ctx.$emit('keydown', $event)),
+      onKeyup: _cache[3] || (_cache[3] = $event => _ctx.$emit('keyup', $event)),
+      onFocus: _cache[4] || (_cache[4] = $event => {
+        _ctx.$emit('focus', $event);
+        _ctx.onFocus();
+      }),
+      onBlur: _cache[5] || (_cache[5] = $event => {
+        _ctx.$emit('blur', $event);
+        _ctx.onBlur();
+      })
+    }), null, 16 /* FULL_PROPS */, _hoisted_2), [[vModelText, _ctx.draft]])]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["invalid", "activated"]), _ctx.activated && !_ctx.saveOnBlur ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.actionStyles)
+  }, [createVNode(_component_OrIconButton, {
+    icon: 'done',
+    color: 'inherit',
+    onClick: withModifiers(_ctx.apply, ["stop"])
+  }, null, 8 /* PROPS */, ["onClick"]), createVNode(_component_OrIconButton, {
+    icon: 'close',
+    color: 'inherit',
+    onClick: withModifiers(_ctx.reset, ["stop"])
+  }, null, 8 /* PROPS */, ["onClick"])], 2 /* CLASS */)) : createCommentVNode("v-if", true)]), _ctx.$slots.hint || _ctx.hint || _ctx.maxLength ? withDirectives((openBlock(), createBlock(_component_OrHint, {
+    key: 0
+  }, createSlots({
+    default: withCtx(() => [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)])]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.maxLength ? {
+    name: "addon",
+    fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.length) + " / " + toDisplayString(_ctx.maxLength), 1 /* TEXT */)]),
+    key: "0"
+  } : undefined]), 1536 /* NEED_PATCH, DYNAMIC_SLOTS */)), [[vShow, !_ctx.error]]) : createCommentVNode("v-if", true), withDirectives(createVNode(_component_OrError, null, createSlots({
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error) + " ", 1 /* TEXT */)]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.maxLength ? {
+    name: "addon",
+    fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.length) + " / " + toDisplayString(_ctx.maxLength), 1 /* TEXT */)]),
+    key: "0"
+  } : undefined]), 1536 /* NEED_PATCH, DYNAMIC_SLOTS */), [[vShow, typeof _ctx.error === 'string' && _ctx.error.length > 0]])], 2 /* CLASS */);
+}
+
+var css_248z = "\ntextarea[data-v-3f016b22] {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\n";
+styleInject(css_248z);
+
+script.render = render;
+script.__scopeId = "data-v-3f016b22";
+script.__file = "src/components/or-inline-textarea-v3/OrInlineTextarea.vue";
+
+export { script as OrInlineTextareaV3 };

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

@@ -1,5 +1,4 @@
-import { I as InputBoxDirection, a as InputBoxVariant, b as InputBoxSize } from '../../types-98e9a758.js';
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createBlock, withCtx, createCommentVNode } from 'vue';
 
 const InputBoxAddon = [
 // Layout
@@ -36,20 +35,37 @@ var script$1 = defineComponent({
   }
 });
 
-const _hoisted_1 = ["invalid", "readonly", "disabled"];
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1 = ["invalid", "readonly", "disabled"];
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles),
     invalid: _ctx.invalid,
     readonly: _ctx.readonly,
     disabled: _ctx.disabled
-  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1);
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$1);
 }
 
-script$1.render = render;
+script$1.render = render$1;
 script$1.__file = "src/components/or-input-box-v3/partials/or-input-box-addon/OrInputBoxAddon.vue";
 
+var InputBoxDirection;
+(function (InputBoxDirection) {
+  InputBoxDirection["Row"] = "row";
+  InputBoxDirection["Column"] = "column";
+})(InputBoxDirection || (InputBoxDirection = {}));
+var InputBoxVariant;
+(function (InputBoxVariant) {
+  InputBoxVariant["Styled"] = "styled";
+  InputBoxVariant["Unstyled"] = "unstyled";
+  InputBoxVariant["Embedded"] = "embedded";
+})(InputBoxVariant || (InputBoxVariant = {}));
+var InputBoxSize;
+(function (InputBoxSize) {
+  InputBoxSize["M"] = "m";
+  InputBoxSize["S"] = "s";
+})(InputBoxSize || (InputBoxSize = {}));
+
 const InputBox = [
 // Overflow
 'overflow-hidden',
@@ -160,4 +176,36 @@ var script = defineComponent({
   }
 });
 
+const _hoisted_1 = ["invalid", "readonly", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrInputBoxAddon = resolveComponent("OrInputBoxAddon");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles),
+    invalid: _ctx.invalid,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled,
+    onFocus: _cache[0] || (_cache[0] = $event => _ctx.$emit('focus'))
+  }, [_ctx.$slots.prepend ? (openBlock(), createBlock(_component_OrInputBoxAddon, {
+    key: 0,
+    invalid: _ctx.invalid,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["invalid", "readonly", "disabled"])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default"), _ctx.$slots.addon ? (openBlock(), createBlock(_component_OrInputBoxAddon, {
+    key: 1,
+    invalid: _ctx.invalid,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["invalid", "readonly", "disabled"])) : createCommentVNode("v-if", true)], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1);
+}
+
+script.render = render;
+script.__file = "src/components/or-input-box-v3/OrInputBox.vue";
+
 export { InputBoxDirection, InputBoxSize, InputBoxVariant, script as OrInputBoxV3 };