@onereach/ui-components 2.75.2-beta.2390.0 → 2.75.2-beta.2391.0

package/src/components/or-input-v3/OrInput.vue

@@ -21,7 +21,7 @@
     <OrInputBox
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
-      :invalid="!!error"
+      :invalid="invalid"
       :readonly="readonly || loading"
       :disabled="disabled"
     >
@@ -82,10 +82,7 @@
       </div>
     </OrInputBox>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
+    <template v-if="!invalid">
       <template v-if="hint || maxLength">
         <OrHint :disabled="disabled">
           {{ hint }}
@@ -98,12 +95,9 @@
           </template>
         </OrHint>
       </template>
-    </div>
+    </template>
 
-    <div
-      v-show="typeof error === 'string'"
-      :class="['contents']"
-    >
+    <template v-else>
       <OrError :disabled="disabled">
         {{ error }}
 
@@ -114,7 +108,7 @@
           {{ currentLength }} / {{ maxLength }}
         </template>
       </OrError>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -181,7 +175,7 @@ export default defineComponent({
     },
 
     error: {
-      type: [String, Boolean],
+      type: String,
       default: undefined,
     },
 
@@ -265,6 +259,8 @@ export default defineComponent({
     const currentLength = computed(() => proxyModelValue.value?.toString().length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
+    const invalid = computed(() => !!props.error);
+
     const disclosed = ref(false);
 
     const { isMobile } = useResponsive();
@@ -287,6 +283,7 @@ export default defineComponent({
       proxyModelValue,
       currentLength,
       maxLength,
+      invalid,
       disclosed,
       isMobile,
       focus,

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

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

package/src/components/or-modal-v3/OrModal.stories3.ts

@@ -1,6 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
 import { ref } from 'vue-demi';
+import Faker from 'faker';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import OrModalDocs from './OrModal.docs.mdx';
 import OrModal from './OrModal.vue';
@@ -257,3 +258,21 @@ zIndex.args = {
     </div>
   `,
 };
+
+export const WithVerticalScroll = Template.bind({});
+
+WithVerticalScroll.args = {
+  header: 'Upload Files',
+  default: `
+    <div class="flex items-center justify-center">
+      ${Faker.lorem.lines(50)}
+    </div>
+  `,
+
+  footer: `
+    <div class="flex items-center justify-end gap-[16px]">
+      <OrButton variant="outlined">Save</OrButton>
+      <OrButton>Upload</OrButton>
+    </div>
+  `,
+};

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

@@ -6,7 +6,7 @@ export const ModalRoot: string[] = [
 
   // Box
   'w-full',
-  'h-full',
+  'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
 
   // Shape
   'md:rounded-md',
@@ -36,19 +36,16 @@ export const ModalRootSizes: Record<ModalSize, string[]> = {
   'l': [
     // Box
     'md:w-[1050px]',
-    'md:h-auto',
   ],
 
   'm': [
     // Box
     'md:w-[700px]',
-    'md:h-auto',
   ],
 
   's': [
     // Box
     'md:w-[480px]',
-    'md:h-auto',
   ],
 };
 

package/src/components/or-select-v3/OrSelect.stories3.ts

@@ -104,10 +104,6 @@ export default {
       control: { type: 'boolean' },
     },
 
-    disableDefaultStyles: {
-      control: { type: 'boolean' },
-    },
-
     enableSearch: {
       control: { type: 'boolean' },
     },

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,25 +202,19 @@
       </OrPopover>
     </OrInputBox>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
+    <template v-if="!invalid">
       <template v-if="hint">
         <OrHint :disabled="disabled">
           {{ hint }}
         </OrHint>
       </template>
-    </div>
+    </template>
 
-    <div
-      v-show="typeof error === 'string'"
-      :class="['contents']"
-    >
+    <template v-else>
       <OrError :disabled="disabled">
         {{ error }}
       </OrError>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -312,7 +306,7 @@ export default defineComponent({
     },
 
     error: {
-      type: [String, Boolean],
+      type: String,
       default: undefined,
     },
 
@@ -422,6 +416,7 @@ export default defineComponent({
       }
     });
 
+    const invalid = computed(() => !!props.error);
     const readonly = computed(() => context.attrs.readonly as boolean);
 
     const selection = computed(() => {
@@ -524,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,10 +40,7 @@
       />
     </OrInputBox>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
+    <template v-if="!invalid">
       <template v-if="hint || maxLength">
         <OrHint :disabled="disabled">
           {{ hint }}
@@ -56,12 +53,9 @@
           </template>
         </OrHint>
       </template>
-    </div>
+    </template>
 
-    <div
-      v-show="typeof error === 'string'"
-      :class="['contents']"
-    >
+    <template v-else>
       <OrError :disabled="disabled">
         {{ error }}
 
@@ -72,7 +66,7 @@
           {{ currentLength }} / {{ maxLength }}
         </template>
       </OrError>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -128,7 +122,7 @@ export default defineComponent({
     },
 
     error: {
-      type: [String, Boolean],
+      type: String,
       default: undefined,
     },
 
@@ -197,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();
@@ -215,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,162 +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(" "), _c('div', {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.error,
-      expression: "!error"
-    }],
-    class: ['contents']
-  }, [_vm.hint ? [_c('OrHint', {
-    attrs: {
-      "disabled": _vm.disabled
-    }
-  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")])] : _vm._e()], 2), _vm._v(" "), _c('div', {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: typeof _vm.error === 'string',
-      expression: "typeof error === 'string'"
-    }],
-    class: ['contents']
-  }, [_c('OrError', {
-    attrs: {
-      "disabled": _vm.disabled
-    }
-  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])], 1)], 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 };