@onereach/ui-components 2.70.0-beta.2185.0 → 2.70.0

package/dist/bundled/v2/OrTag-e3e6fdd6.js

@@ -0,0 +1,166 @@
+import './index-fa6eb4ca.js';
+import { O as OrIconButton } from './OrIconButton-a2ba92df.js';
+import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
+import { defineComponent, ref, computed, watchPostEffect, unref } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var TagVariant;
+(function (TagVariant) {
+  TagVariant["Tag"] = "tag";
+  TagVariant["Button"] = "button";
+  TagVariant["Reset"] = "reset";
+})(TagVariant || (TagVariant = {}));
+var TagColor;
+(function (TagColor) {
+  TagColor["Default"] = "default";
+  TagColor["Danger"] = "danger";
+})(TagColor || (TagColor = {}));
+
+const TagRoot = [
+// Layout
+'layout-inline-row',
+// Box
+'max-w-fit',
+// Shape
+'rounded-full',
+// Spacing
+'px-sm+ md:px-sm', 'py-sm md:py-xs', 'gap-sm+ md:gap-sm',
+// Typography
+'typography-caption-regular whitespace-nowrap',
+// Theme
+'disabled:!bg-disabled', 'dark:disabled:!bg-disabled-dark', 'disabled:!text-on-disabled', 'dark:disabled:!text-on-disabled-dark'];
+const TagRootVariants = {
+  'tag': [
+  // Interactivity
+  'interactivity-none'],
+  'button': [
+  // Interactivity
+  'interactivity-auto'],
+  'reset': [
+  // Interactivity
+  'interactivity-none']
+};
+const TagRootColors = {
+  'default': [
+  // Theme
+  'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark'],
+  'danger': [
+  // Theme
+  'theme-preset-2-error', 'dark:theme-preset-2-error-dark']
+};
+
+var script = defineComponent({
+  name: 'OrTag',
+  components: {
+    OrIconButton
+  },
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: TagVariant.Tag
+    },
+    color: {
+      type: String,
+      default: TagColor.Default
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['click', 'focus', 'blur', 'reset'],
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-tag', ...TagRoot, ...TagRootVariants[props.variant], ...(!custom.value ? TagRootColors[props.color] : []), classAttribute.value]);
+    // State
+    const custom = computed(() => {
+      return !['default', 'danger'].includes(props.color);
+    });
+    // Effects
+    watchPostEffect(() => {
+      const rootElement = unref(root);
+      if (rootElement) {
+        Object.assign(rootElement.style, {
+          backgroundColor: custom.value ? `${props.color}1f` : '',
+          color: custom.value ? props.color : ''
+        });
+      }
+    });
+    return {
+      root,
+      rootStyles,
+      custom
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "tabindex": !_vm.disabled && _vm.variant === 'button' ? 0 : null,
+      "disabled": _vm.disabled ? '' : null
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('click', $event);
+      },
+      "focus": function ($event) {
+        return _vm.$emit('focus', $event);
+      },
+      "blur": function ($event) {
+        return _vm.$emit('blur', $event);
+      }
+    }
+  }, 'div', _vm.$attrs, false), [_vm._t("default"), _vm._v(" "), _vm.variant === 'reset' ? [_c('div', {
+    class: ['layout-row', 'm-[-4px] md:m-[-2px]']
+  }, [_c('OrIconButton', {
+    attrs: {
+      "icon": 'close',
+      "color": _vm.custom ? 'inherit' : _vm.color,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.$emit('reset');
+      }
+    }
+  })], 1)] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+var OrTag = __vue_component__;
+
+export { OrTag as O, TagVariant as T, TagColor as a };

package/dist/bundled/v2/OrTeleport.vue2-e9ba3054.js

@@ -0,0 +1,61 @@
+import { MountingPortal } from 'portal-vue';
+import './index-fa6eb4ca.js';
+import { defineComponent } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  name: 'OrTeleport',
+  components: {
+    MountingPortal
+  },
+  props: {
+    to: {
+      type: String,
+      default: 'body'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('MountingPortal', {
+    attrs: {
+      "mount-to": _vm.to,
+      "disabled": _vm.disabled,
+      "append": true
+    }
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+var OrTeleport = __vue_component__;
+
+export { OrTeleport as O };

package/dist/bundled/v2/OrTeleportVue2-3544f185.js

@@ -0,0 +1,67 @@
+import './index-fa6eb4ca.js';
+import { MountingPortal } from 'portal-vue/dist/portal-vue.esm.js';
+import { defineComponent } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+const OR_TELEPORT_TO_PROP = {
+  type: String,
+  required: false,
+  default: 'body'
+};
+const OR_TELEPORT_IS_DISABLED_PROP = {
+  type: Boolean,
+  required: false,
+  default: false
+};
+const OR_TELEPORT_PROPS = {
+  to: OR_TELEPORT_TO_PROP,
+  isDisabled: OR_TELEPORT_IS_DISABLED_PROP
+};
+
+var script = defineComponent({
+  name: 'OrTeleport',
+  components: {
+    MountingPortal
+  },
+  props: OR_TELEPORT_PROPS
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('mounting-portal', {
+    attrs: {
+      "mount-to": _vm.to,
+      "disabled": _vm.isDisabled,
+      "append": ""
+    }
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+var OrTeleport = __vue_component__;
+
+export { OrTeleport as O };

package/dist/bundled/v2/OrText-eac4b9f5.js

@@ -0,0 +1,104 @@
+import './index-fa6eb4ca.js';
+import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
+import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+const TextRoot = [
+// Layout
+'inline-flex',
+// Box
+'max-w-full',
+// Typography
+'whitespace-nowrap'];
+const MainText = [
+// Layout
+'overflow-hidden',
+// Typography
+'text-ellipsis'];
+const RestText = [
+// Layout
+'shrink'];
+
+var script = defineComponent({
+  name: 'OrText',
+  inheritAttrs: false,
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    sliceIndex: {
+      type: Number,
+      default: undefined
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-text', ...TextRoot, classAttribute.value]);
+    const mainTextStyles = computed(() => [...MainText]);
+    const restTextStyles = computed(() => [...RestText]);
+    // State
+    const mainText = computed(() => {
+      if (props.sliceIndex) {
+        return props.text.slice(0, Math.abs(props.sliceIndex) * -1);
+      }
+      return props.text;
+    });
+    const restText = computed(() => {
+      return props.text.slice(mainText.value.length);
+    });
+    return {
+      root,
+      rootStyles,
+      mainTextStyles,
+      restTextStyles,
+      mainText,
+      restText
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_c('div', {
+    class: _vm.mainTextStyles
+  }, [_vm._v("\n    " + _vm._s(_vm.mainText) + "\n  ")]), _vm._v(" "), _c('div', {
+    class: _vm.restTextStyles
+  }, [_vm._v("\n    " + _vm._s(_vm.restText) + "\n  ")])]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+var __vue_component__$1 = __vue_component__;
+
+export { __vue_component__$1 as _ };

package/dist/bundled/v2/OrTextarea-5593fbe9.js

@@ -0,0 +1,236 @@
+import './index-fa6eb4ca.js';
+import { O as OrError } from './OrError-aad17598.js';
+import { O as OrHint } from './OrHint-f38a1940.js';
+import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-79ec54ad.js';
+import { O as OrLabel } from './OrLabel-172c4b89.js';
+import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
+import { defineComponent, getCurrentInstance, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { c as createInjector } from './browser-82dea9ed.js';
+
+const TextareaRoot = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const TextareaControl = [
+// Layout
+'grow',
+// Typography
+'typography-inherit',
+// Theme
+'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
+
+var script = defineComponent({
+  name: 'OrTextarea',
+  components: {
+    OrError,
+    OrHint,
+    OrInputBox,
+    OrLabel
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: undefined
+    },
+    value: {
+      type: String,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: InputBoxSize.M
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: String,
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props, context) {
+    var _a;
+    const currentInstance = getCurrentInstance();
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-textarea', ...TextareaRoot, classAttribute.value]);
+    const controlStyles = computed(() => [...TextareaControl]);
+    // State
+    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: value => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      }
+    });
+    const invalid = computed(() => !!props.error);
+    const readonly = computed(() => context.attrs.readonly);
+    const currentLength = computed(() => {
+      var _a, _b;
+      return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
+    });
+    const maxLength = computed(() => context.attrs.maxlength);
+    return {
+      root,
+      rootStyles,
+      controlStyles,
+      controlId,
+      proxyModelValue,
+      invalid,
+      readonly,
+      currentLength,
+      maxLength
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_vm.label ? [_c('OrLabel', {
+    attrs: {
+      "control-id": _vm.controlId,
+      "variant": 'input',
+      "required": _vm.required,
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm._t("addon")];
+      },
+      proxy: true
+    }], null, true)
+  }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('OrInputBox', {
+    attrs: {
+      "size": _vm.size,
+      "invalid": _vm.invalid,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    }
+  }, [_c('textarea', _vm._b({
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.proxyModelValue,
+      expression: "proxyModelValue"
+    }],
+    class: _vm.controlStyles,
+    attrs: {
+      "id": _vm.controlId,
+      "placeholder": _vm.placeholder,
+      "required": _vm.required,
+      "disabled": _vm.disabled
+    },
+    domProps: {
+      "value": _vm.proxyModelValue
+    },
+    on: {
+      "keydown": 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);
+      },
+      "input": function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+        _vm.proxyModelValue = $event.target.value;
+      }
+    }
+  }, 'textarea', _vm.$attrs, false))]), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
+    attrs: {
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([_vm.maxLength ? {
+      key: "addon",
+      fn: function () {
+        return [_vm._v("\n          " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n        ")];
+      },
+      proxy: true
+    } : null], null, true)
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n\n        ")])] : _vm._e()] : [_c('OrError', {
+    attrs: {
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([_vm.maxLength ? {
+      key: "addon",
+      fn: function () {
+        return [_vm._v("\n        " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n      ")];
+      },
+      proxy: true
+    } : null], null, true)
+  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n\n      ")])]], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-61af6ad5_0", {
+    source: "textarea[data-v-61af6ad5]{min-width:0;background:0 0;outline:0}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__ = "data-v-61af6ad5";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
+var __vue_component__$1 = __vue_component__;
+
+export { __vue_component__$1 as _ };