@onereach/ui-components 2.69.1 → 2.69.2-beta.2107.0

package/src/components/or-combined-input-v3/index.ts

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

package/src/components/or-combined-input-v3/props.ts

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

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

@@ -0,0 +1,25 @@
+export const CombinedInputRoot: string[] = [
+  // Layout
+  'layout-column',
+
+  // Spacing
+  'gap-xs',
+];
+
+export const CombinedInputControlGroup: string[] = [
+  // Layout
+  'layout-row',
+
+  // Box
+  'w-full',
+
+  // Shape (.or-input-box)
+  '[&_.or-input-box]:first-child:rounded-r-none',
+  '[&_.or-input-box]:intermediate-child:rounded-none',
+  '[&_.or-input-box]:last-child:rounded-l-none',
+
+  // Spacing (children)
+  '[&_.or-input-box]:first-child:mr-[-1px]',
+  '[&_.or-input-box]:intermediate-child:border-x-0',
+  '[&_.or-input-box]:last-child:ml-[-1px]',
+];

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

@@ -94,9 +94,9 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
 
     // Spacing
     'first-child:pl-md first-child:md:pl-sm+',
+    'intermediate-child:pt-[11px] intermediate-child:md:pt-[7px]',
+    'intermediate-child:pb-[11px] intermediate-child:md:pb-[6px]',
     'last-child:pr-md last-child:md:pr-sm+',
-    'children:pt-[11px] children:md:pt-[7px]',
-    'children:pb-[11px] children:md:pb-[6px]',
 
     'gap-sm+ md:gap-sm',
 
@@ -110,8 +110,8 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
 
     // Spacing
     'first-child:pl-sm',
+    'intermediate-child:py-[6px]',
     'last-child:pr-sm',
-    'children:py-[6px]',
 
     'gap-[6px]',
 

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

@@ -1,6 +1,7 @@
 <template>
   <div
     ref="root"
+    v-bind="$attrs"
     :class="rootStyles"
   >
     <template v-if="label">
@@ -29,46 +30,51 @@
         :id="controlId"
         ref="input"
         v-model="proxyModelValue"
-        v-bind="$attrs"
         :class="controlStyles"
         :type="type === 'password' && disclosed ? 'text' : type"
         :placeholder="placeholder"
         :required="required"
         :disabled="disabled"
+
+        :read-only="readonly"
+        :max-length="maxLength"
+
         @keydown="$emit('keydown', $event)"
         @keyup="$emit('keyup', $event)"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
 
-      <div :class="['layout-row']">
-        <template v-if="type === 'password'">
-          <OrIconButton
-            :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"
-            :color="'inherit'"
-            :disabled="disabled"
-            @click.stop="disclosed = !disclosed"
-          />
-        </template>
-
-        <template v-if="type === 'search'">
-          <template v-if="modelValue">
+      <template v-if="type !== 'text'">
+        <div :class="['layout-row']">
+          <template v-if="type === 'password'">
             <OrIconButton
-              :icon="'close'"
+              :icon="{ icon: disclosed ? 'visibility_off' : 'visibility', variant: 'filled' }"
               :color="'inherit'"
               :disabled="disabled"
-              @click.stop="$emit('update:modelValue', '')"
+              @click.stop="disclosed = !disclosed"
             />
           </template>
 
-          <template v-else>
-            <OrIcon
-              :icon="'search'"
-              :variant="'outlined'"
-            />
+          <template v-if="type === 'search'">
+            <template v-if="modelValue">
+              <OrIconButton
+                :icon="'close'"
+                :color="'inherit'"
+                :disabled="disabled"
+                @click.stop="$emit('update:modelValue', '')"
+              />
+            </template>
+
+            <template v-else>
+              <OrIcon
+                :icon="'search'"
+                :variant="'outlined'"
+              />
+            </template>
           </template>
-        </template>
-      </div>
+        </div>
+      </template>
     </OrInputBox>
 
     <template v-if="!invalid">

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

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

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

@@ -24,6 +24,7 @@
       v-dropdown-open="toggle"
       v-dropdown-close="close"
       :class="[popoverState === 'open' && 'rounded-b-0']"
+      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
       :invalid="invalid"
       :readonly="readonly"
@@ -314,6 +315,11 @@ export default defineComponent({
       default: false,
     },
 
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false,
+    },
+
     enableSearch: {
       type: Boolean,
       default: false,