@onereach/ui-components 2.75.2-beta.2393.0 → 2.75.2-beta.2399.0

package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue

@@ -6,7 +6,7 @@
     <div :class="['layout-row', 'gap-sm+']">
       <OrInlineInputBox
         :size="'s'"
-        :invalid="invalid"
+        :invalid="!!error"
       >
         <textarea
           ref="control"
@@ -39,7 +39,10 @@
       </template>
     </div>
 
-    <template v-if="!invalid">
+    <div
+      v-show="!error"
+      :class="['contents']"
+    >
       <template v-if="hint || maxLength">
         <OrHint>
           {{ hint }}
@@ -52,9 +55,12 @@
           </template>
         </OrHint>
       </template>
-    </template>
+    </div>
 
-    <template v-else>
+    <div
+      v-show="typeof error === 'string'"
+      :class="['contents']"
+    >
       <OrError>
         {{ error }}
 
@@ -65,7 +71,7 @@
           {{ currentLength }} / {{ maxLength }}
         </template>
       </OrError>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -115,7 +121,7 @@ export default defineComponent({
     },
 
     error: {
-      type: String,
+      type: [String, Boolean],
       default: undefined,
     },
   },
@@ -175,8 +181,6 @@ export default defineComponent({
     const currentLength = computed(() => draftModelValue.value?.toString().length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
-    const invalid = computed(() => !!props.error);
-
     const activated = ref(false);
 
     // Handlers
@@ -235,7 +239,6 @@ export default defineComponent({
       draftModelValue,
       currentLength,
       maxLength,
-      invalid,
       activated,
       onFocus,
       onBlur,

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

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

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

@@ -21,7 +21,7 @@
     <OrInputBox
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
-      :invalid="invalid"
+      :invalid="!!error"
       :readonly="readonly || loading"
       :disabled="disabled"
     >
@@ -82,7 +82,10 @@
       </div>
     </OrInputBox>
 
-    <template v-if="!invalid">
+    <div
+      v-show="!error"
+      :class="['contents']"
+    >
       <template v-if="hint || maxLength">
         <OrHint :disabled="disabled">
           {{ hint }}
@@ -95,9 +98,12 @@
           </template>
         </OrHint>
       </template>
-    </template>
+    </div>
 
-    <template v-else>
+    <div
+      v-show="typeof error === 'string'"
+      :class="['contents']"
+    >
       <OrError :disabled="disabled">
         {{ error }}
 
@@ -108,7 +114,7 @@
           {{ currentLength }} / {{ maxLength }}
         </template>
       </OrError>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -175,7 +181,7 @@ export default defineComponent({
     },
 
     error: {
-      type: String,
+      type: [String, Boolean],
       default: undefined,
     },
 
@@ -259,8 +265,6 @@ 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();
@@ -283,7 +287,6 @@ 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[] = [
-  // Layout
-  'grow',
+  // Box
+  'w-full',
 
   // Typography
   'typography-inherit',

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

@@ -104,6 +104,10 @@ 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="invalid"
+      :invalid="!!error"
       :readonly="readonly"
       :disabled="disabled"
     >
@@ -202,19 +202,25 @@
       </OrPopover>
     </OrInputBox>
 
-    <template v-if="!invalid">
+    <div
+      v-show="!error"
+      :class="['contents']"
+    >
       <template v-if="hint">
         <OrHint :disabled="disabled">
           {{ hint }}
         </OrHint>
       </template>
-    </template>
+    </div>
 
-    <template v-else>
+    <div
+      v-show="typeof error === 'string'"
+      :class="['contents']"
+    >
       <OrError :disabled="disabled">
         {{ error }}
       </OrError>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -306,7 +312,7 @@ export default defineComponent({
     },
 
     error: {
-      type: String,
+      type: [String, Boolean],
       default: undefined,
     },
 
@@ -416,7 +422,6 @@ export default defineComponent({
       }
     });
 
-    const invalid = computed(() => !!props.error);
     const readonly = computed(() => context.attrs.readonly as boolean);
 
     const selection = computed(() => {
@@ -519,7 +524,6 @@ export default defineComponent({
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
-      invalid,
       readonly,
       selection,
       searchText,

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

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

package/src/components/or-sidebar-v3/OrSidebar.stories3.ts

@@ -104,7 +104,7 @@ const DefaultTemplate: StoryFn<typeof OrSidebar> = (args) => ({
         class="theme-background-surface-1 dark:theme-background-surface-1-dark text-on-background dark:text-on-background-dark"
         style="flex-grow: 1; overflow: auto; padding: 16px"
       >
-        ${Faker.lorem.paragraphs(100)}
+        ${Faker.lorem.paragraphs(10)}
       </div>
       <OrSidebar
         v-bind="args"

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

@@ -20,7 +20,7 @@
 
     <OrInputBox
       :size="size"
-      :invalid="invalid"
+      :invalid="!!error"
       :readonly="readonly"
       :disabled="disabled"
     >
@@ -40,7 +40,10 @@
       />
     </OrInputBox>
 
-    <template v-if="!invalid">
+    <div
+      v-show="!error"
+      :class="['contents']"
+    >
       <template v-if="hint || maxLength">
         <OrHint :disabled="disabled">
           {{ hint }}
@@ -53,9 +56,12 @@
           </template>
         </OrHint>
       </template>
-    </template>
+    </div>
 
-    <template v-else>
+    <div
+      v-show="typeof error === 'string'"
+      :class="['contents']"
+    >
       <OrError :disabled="disabled">
         {{ error }}
 
@@ -66,7 +72,7 @@
           {{ currentLength }} / {{ maxLength }}
         </template>
       </OrError>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -122,7 +128,7 @@ export default defineComponent({
     },
 
     error: {
-      type: String,
+      type: [String, Boolean],
       default: undefined,
     },
 
@@ -191,8 +197,6 @@ 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();
@@ -211,7 +215,6 @@ 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[] = [
-  // Layout
-  'grow',
+  // Box
+  'w-full',
 
   // Typography
   'typography-inherit',