@onereach/ui-components 2.74.13-beta.2365.0 → 2.74.13

package/src/components/or-select-v3/OrSelect.vue

@@ -25,7 +25,7 @@
       :class="[popoverState === 'open' && 'rounded-b-0']"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
-      :invalid="!!error"
+      :invalid="invalid"
       :readonly="readonly"
       :disabled="disabled"
     >
@@ -202,7 +202,7 @@
       </OrPopover>
     </OrInputBox>
 
-    <template v-if="!error">
+    <template v-if="!invalid">
       <template v-if="hint">
         <OrHint :disabled="disabled">
           {{ hint }}
@@ -210,7 +210,7 @@
       </template>
     </template>
 
-    <template v-if="typeof error === 'string'">
+    <template v-else>
       <OrError :disabled="disabled">
         {{ error }}
       </OrError>
@@ -306,7 +306,7 @@ export default defineComponent({
     },
 
     error: {
-      type: [String, Boolean],
+      type: String,
       default: undefined,
     },
 
@@ -416,6 +416,7 @@ export default defineComponent({
       }
     });
 
+    const invalid = computed(() => !!props.error);
     const readonly = computed(() => context.attrs.readonly as boolean);
 
     const selection = computed(() => {
@@ -518,6 +519,7 @@ export default defineComponent({
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
+      invalid,
       readonly,
       selection,
       searchText,

package/src/components/or-select-v3/styles.ts

@@ -8,10 +8,7 @@ export const SelectRoot: string[] = [
 
 export const SelectControl: string[] = [
   // Layout
-  'layout-row',
-
-  // Box
-  'w-full',
+  'layout-row grow',
 
   // Overflow
   'overflow-hidden',

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -20,7 +20,7 @@
 
     <OrInputBox
       :size="size"
-      :invalid="!!error"
+      :invalid="invalid"
       :readonly="readonly"
       :disabled="disabled"
     >
@@ -40,7 +40,7 @@
       />
     </OrInputBox>
 
-    <template v-if="!error">
+    <template v-if="!invalid">
       <template v-if="hint || maxLength">
         <OrHint :disabled="disabled">
           {{ hint }}
@@ -55,7 +55,7 @@
       </template>
     </template>
 
-    <template v-if="typeof error === 'string'">
+    <template v-else>
       <OrError :disabled="disabled">
         {{ error }}
 
@@ -122,7 +122,7 @@ export default defineComponent({
     },
 
     error: {
-      type: [String, Boolean],
+      type: String,
       default: undefined,
     },
 
@@ -191,6 +191,8 @@ export default defineComponent({
     const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
+    const invalid = computed(() => !!props.error);
+
     // Methods
     function focus(): void {
       control.value?.focus();
@@ -209,6 +211,7 @@ export default defineComponent({
       proxyModelValue,
       currentLength,
       maxLength,
+      invalid,
       focus,
       blur,
     };

package/src/components/or-textarea-v3/styles.ts

@@ -7,8 +7,8 @@ export const TextareaRoot: string[] = [
 ];
 
 export const TextareaControl: string[] = [
-  // Box
-  'w-full',
+  // Layout
+  'grow',
 
   // Typography
   'typography-inherit',

package/dist/bundled/v2/components/or-combined-input-v3/OrCombinedInput.vue.d.ts

@@ -1,105 +0,0 @@
-import { PropType } from 'vue-demi';
-import { CombinedInputSize } from './props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    controlGroup: import("@vue/composition-api").ComputedRef<string[]>;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    size: {
-        type: PropType<CombinedInputSize>;
-        default: CombinedInputSize;
-    };
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    hint: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    size: {
-        type: PropType<CombinedInputSize>;
-        default: CombinedInputSize;
-    };
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    hint: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    size: CombinedInputSize;
-    label: string;
-    hint: string;
-    error: string | boolean;
-    required: boolean;
-    readonly: boolean;
-    disabled: boolean;
-    disableDefaultStyles: boolean;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    controlGroup: import("@vue/composition-api").ComputedRef<string[]>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    size: CombinedInputSize;
-    label: string;
-    hint: string;
-    error: string | boolean;
-    required: boolean;
-    readonly: boolean;
-    disabled: boolean;
-    disableDefaultStyles: boolean;
-} & {}, {
-    size: CombinedInputSize;
-    label: string;
-    hint: string;
-    error: string | boolean;
-    required: boolean;
-    readonly: boolean;
-    disabled: boolean;
-    disableDefaultStyles: boolean;
-}, true>);
-export default _default;

package/dist/bundled/v2/components/or-combined-input-v3/index.d.ts

@@ -1,2 +0,0 @@
-export { default as OrCombinedInputV3 } from './OrCombinedInput.vue';
-export * from './props';

package/dist/bundled/v2/components/or-combined-input-v3/index.js

@@ -1,146 +0,0 @@
-import '../../index-fa6eb4ca.js';
-import { O as OrError } from '../../OrError-52f668a4.js';
-import { O as OrHint } from '../../OrHint-fde53334.js';
-import { O as OrLabel } from '../../OrLabel-aff09c39.js';
-import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
-import { a as InputBoxSize } from '../../props-78496a2d.js';
-export { a as CombinedInputSize } from '../../props-78496a2d.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-import 'vue';
-
-const CombinedInputRoot = [
-// Layout
-'layout-column',
-// Spacing
-'gap-xs'];
-const CombinedInputControlGroup = [
-// Layout
-'layout-row',
-// Box
-'w-full',
-// Shape (.or-input-box)
-'[&_.or-input-box]:first-child:rounded-r-0', '[&_.or-input-box]:intermediate-child:rounded-0', '[&_.or-input-box]:last-child:rounded-l-0',
-// Spacing (.or-input-box)
-'[&_.or-input-box]:first-child:mr-[-1px]', '[&_.or-input-box]:intermediate-child:border-x-0', '[&_.or-input-box]:last-child:ml-[-1px]'];
-
-var script = defineComponent({
-  name: 'OrCombinedInput',
-  components: {
-    OrError,
-    OrHint,
-    OrLabel
-  },
-  props: {
-    size: {
-      type: String,
-      default: InputBoxSize.M
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    hint: {
-      type: String,
-      default: undefined
-    },
-    error: {
-      type: [String, Boolean],
-      default: undefined
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-combined-input', ...CombinedInputRoot]);
-    const controlGroup = computed(() => [...CombinedInputControlGroup]);
-    return {
-      root,
-      rootStyles,
-      controlGroup
-    };
-  }
-});
-
-/* 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: {
-      "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('div', {
-    class: _vm.controlGroup
-  }, [_vm._t("default", null, {
-    "size": _vm.size,
-    "error": !!_vm.error,
-    "required": _vm.required,
-    "readonly": _vm.readonly,
-    "disabled": _vm.disabled,
-    "disableDefaultStyles": _vm.disableDefaultStyles
-  })], 2), _vm._v(" "), !_vm.error ? [_vm.hint ? [_c('OrHint', {
-    attrs: {
-      "disabled": _vm.disabled
-    }
-  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")])] : _vm._e()] : _vm._e(), _vm._v(" "), typeof _vm.error === 'string' ? [_c('OrError', {
-    attrs: {
-      "disabled": _vm.disabled
-    }
-  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])] : _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 __vue_component__$1 = __vue_component__;
-
-export { __vue_component__$1 as OrCombinedInputV3 };

package/dist/bundled/v2/components/or-combined-input-v3/props.d.ts

@@ -1 +0,0 @@
-export { InputBoxSize as CombinedInputSize } from '../or-input-box-v3';

package/dist/bundled/v2/components/or-combined-input-v3/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const CombinedInputRoot: string[];
-export declare const CombinedInputControlGroup: string[];

package/dist/bundled/v2/props-78496a2d.js

@@ -1,12 +0,0 @@
-var InputBoxVariant;
-(function (InputBoxVariant) {
-  InputBoxVariant["Styled"] = "styled";
-  InputBoxVariant["Unstyled"] = "unstyled";
-})(InputBoxVariant || (InputBoxVariant = {}));
-var InputBoxSize;
-(function (InputBoxSize) {
-  InputBoxSize["M"] = "m";
-  InputBoxSize["S"] = "s";
-})(InputBoxSize || (InputBoxSize = {}));
-
-export { InputBoxVariant as I, InputBoxSize as a };

package/dist/bundled/v3/components/or-combined-input-v3/OrCombinedInput.vue.d.ts

@@ -1,105 +0,0 @@
-import { PropType } from 'vue-demi';
-import { CombinedInputSize } from './props';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    controlGroup: import("@vue/composition-api").ComputedRef<string[]>;
-}> & import("@vue/composition-api").Data, {}, {}, {
-    size: {
-        type: PropType<CombinedInputSize>;
-        default: CombinedInputSize;
-    };
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    hint: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, import("@vue/composition-api").ExtractPropTypes<{
-    size: {
-        type: PropType<CombinedInputSize>;
-        default: CombinedInputSize;
-    };
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    hint: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    size: CombinedInputSize;
-    label: string;
-    hint: string;
-    error: string | boolean;
-    required: boolean;
-    readonly: boolean;
-    disabled: boolean;
-    disableDefaultStyles: boolean;
-} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
-    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    controlGroup: import("@vue/composition-api").ComputedRef<string[]>;
-}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    size: CombinedInputSize;
-    label: string;
-    hint: string;
-    error: string | boolean;
-    required: boolean;
-    readonly: boolean;
-    disabled: boolean;
-    disableDefaultStyles: boolean;
-} & {}, {
-    size: CombinedInputSize;
-    label: string;
-    hint: string;
-    error: string | boolean;
-    required: boolean;
-    readonly: boolean;
-    disabled: boolean;
-    disableDefaultStyles: boolean;
-}, true>);
-export default _default;

package/dist/bundled/v3/components/or-combined-input-v3/index.d.ts

@@ -1,2 +0,0 @@
-export { default as OrCombinedInputV3 } from './OrCombinedInput.vue';
-export * from './props';

package/dist/bundled/v3/components/or-combined-input-v3/index.js

@@ -1,128 +0,0 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, Fragment } from 'vue';
-import '../../OrHint-5d5e4d99.js';
-import '../../OrLabel-c556887e.js';
-import { s as script$1 } from '../../OrError.vue_vue_type_script_lang-53648a65.js';
-import { s as script$2 } from '../../OrHint.vue_vue_type_script_lang-e322f61e.js';
-import { s as script$3 } from '../../OrLabel.vue_vue_type_script_lang-191d2304.js';
-import { a as InputBoxSize } from '../../props-78496a2d.js';
-export { a as CombinedInputSize } from '../../props-78496a2d.js';
-
-const CombinedInputRoot = [
-// Layout
-'layout-column',
-// Spacing
-'gap-xs'];
-const CombinedInputControlGroup = [
-// Layout
-'layout-row',
-// Box
-'w-full',
-// Shape (.or-input-box)
-'[&_.or-input-box]:first-child:rounded-r-0', '[&_.or-input-box]:intermediate-child:rounded-0', '[&_.or-input-box]:last-child:rounded-l-0',
-// Spacing (.or-input-box)
-'[&_.or-input-box]:first-child:mr-[-1px]', '[&_.or-input-box]:intermediate-child:border-x-0', '[&_.or-input-box]:last-child:ml-[-1px]'];
-
-var script = defineComponent({
-  name: 'OrCombinedInput',
-  components: {
-    OrError: script$1,
-    OrHint: script$2,
-    OrLabel: script$3
-  },
-  props: {
-    size: {
-      type: String,
-      default: InputBoxSize.M
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    hint: {
-      type: String,
-      default: undefined
-    },
-    error: {
-      type: [String, Boolean],
-      default: undefined
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-combined-input', ...CombinedInputRoot]);
-    const controlGroup = computed(() => [...CombinedInputControlGroup]);
-    return {
-      root,
-      rootStyles,
-      controlGroup
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrLabel = resolveComponent("OrLabel");
-  const _component_OrHint = resolveComponent("OrHint");
-  const _component_OrError = resolveComponent("OrError");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [_ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
-    key: 0,
-    variant: 'input',
-    required: _ctx.required,
-    disabled: _ctx.disabled
-  }, {
-    addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.label) + " ", 1 /* TEXT */)]),
-
-    _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["required", "disabled"])) : createCommentVNode("v-if", true), createElementVNode("div", {
-    class: normalizeClass(_ctx.controlGroup)
-  }, [renderSlot(_ctx.$slots, "default", {
-    size: _ctx.size,
-    error: !!_ctx.error,
-    required: _ctx.required,
-    readonly: _ctx.readonly,
-    disabled: _ctx.disabled,
-    disableDefaultStyles: _ctx.disableDefaultStyles
-  })], 2 /* CLASS */), !_ctx.error ? (openBlock(), createElementBlock(Fragment, {
-    key: 1
-  }, [_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)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), typeof _ctx.error === 'string' ? (openBlock(), createBlock(_component_OrError, {
-    key: 2,
-    disabled: _ctx.disabled
-  }, {
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
-
-    _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-combined-input-v3/OrCombinedInput.vue";
-
-export { script as OrCombinedInputV3 };

package/dist/bundled/v3/components/or-combined-input-v3/props.d.ts

@@ -1 +0,0 @@
-export { InputBoxSize as CombinedInputSize } from '../or-input-box-v3';

package/dist/bundled/v3/components/or-combined-input-v3/styles.d.ts

@@ -1,2 +0,0 @@
-export declare const CombinedInputRoot: string[];
-export declare const CombinedInputControlGroup: string[];

package/dist/bundled/v3/props-78496a2d.js

@@ -1,12 +0,0 @@
-var InputBoxVariant;
-(function (InputBoxVariant) {
-  InputBoxVariant["Styled"] = "styled";
-  InputBoxVariant["Unstyled"] = "unstyled";
-})(InputBoxVariant || (InputBoxVariant = {}));
-var InputBoxSize;
-(function (InputBoxSize) {
-  InputBoxSize["M"] = "m";
-  InputBoxSize["S"] = "s";
-})(InputBoxSize || (InputBoxSize = {}));
-
-export { InputBoxVariant as I, InputBoxSize as a };