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

package/src/components/or-combined-input-v3/OrCombinedInput.stories3.ts

@@ -0,0 +1,201 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import { ref, watch } from 'vue-demi';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { OrInputV3 as OrInput } from '../or-input-v3';
+import { OrSelectV3 as OrSelect, SelectOption } from '../or-select-v3';
+import OrCombinedInputDocs from './OrCombinedInput.docs.mdx';
+import OrCombinedInput from './OrCombinedInput.vue';
+import { CombinedInputSize } from './props';
+
+export default {
+  title: 'Components/Forms/Combined Input',
+  component: OrCombinedInput,
+
+  argTypes: {
+    // Slots
+    default: {
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      control: { type: 'text' },
+    },
+
+    addon: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+
+      control: { type: 'text' },
+    },
+
+    // Props
+    size: {
+      control: { type: 'select' },
+      options: Object.values(CombinedInputSize),
+    },
+
+    label: {
+      control: { type: 'text' },
+    },
+
+    hint: {
+      control: { type: 'text' },
+    },
+
+    error: {
+      control: { type: 'text' },
+    },
+
+    required: {
+      control: { type: 'boolean' },
+    },
+
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
+    disabled: {
+      control: { type: 'boolean' },
+    },
+
+    disableDefaultStyles: {
+      control: { type: 'boolean' },
+    },
+  },
+
+  parameters: {
+    docs: {
+      page: OrCombinedInputDocs,
+    },
+
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/o7DdkaznUW2PtX4wiSuhhQ/Core?node-id=4423%3A39753&t=grpHUrgJi4X2W67L-4',
+    },
+  },
+} as Meta<typeof OrCombinedInput>;
+
+const Template: StoryFn<typeof OrCombinedInput> = (args) => ({
+  components: {
+    OrCombinedInput,
+    OrIcon,
+    OrInput,
+    OrSelect,
+  },
+
+  setup() {
+    // State
+    const options = Array.from<string, SelectOption>([
+      'Alfa',
+      'Bravo',
+      'Charlie',
+      'Delta',
+      'Echo',
+      'Foxtrot',
+      'Golf',
+      'Hotel',
+      'India',
+      'Juliett',
+      'Kilo',
+      'Lima',
+      'Mike',
+      'November',
+      'Oscar',
+      'Papa',
+      'Quebec',
+      'Romeo',
+      'Sierra',
+      'Tango',
+      'Uniform',
+      'Victor',
+      'Whiskey',
+      'X-Ray',
+      'Yankee',
+      'Zulu',
+    ], (item) => ({
+      value: item.toLowerCase(),
+      label: item,
+    }));
+
+    const selectModel = ref<string>();
+    const inputModel = ref<string>();
+
+    // Effects
+    watch([selectModel, inputModel], (values) => {
+      console.debug(values);
+    });
+
+    return {
+      args,
+      options,
+      selectModel,
+      inputModel,
+    };
+  },
+
+  template: `
+    <OrCombinedInput v-bind="args">
+      ${args.default}
+      ${args.addon}
+    </OrCombinedInput>
+  `,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  // Slots
+  default: `
+    <template v-slot="props">
+      <OrSelect
+        class="basis-1/4"
+        v-model="selectModel"
+        v-bind="props"
+        :options="options"
+      />
+
+      <OrInput
+        class="basis-3/4"
+        v-model="inputModel"
+        v-bind="props"
+      />
+    </template>
+  `,
+
+  // Props
+  label: 'Combined Input',
+};
+
+export const Addon = Template.bind({});
+
+Addon.args = {
+  ...Default.args,
+
+  // Slots
+  addon: `
+    <template v-slot:addon>
+      <OrIcon icon="info" />
+    </template>
+  `,
+};
+
+export const Hint = Template.bind({});
+
+Hint.args = {
+  ...Default.args,
+
+  // Props
+  hint: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+};
+
+export const Error = Template.bind({});
+
+Error.args = {
+  ...Default.args,
+
+  // Props
+  error: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+};

package/src/components/or-combined-input-v3/OrCombinedInput.vue

@@ -0,0 +1,133 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <template v-if="label">
+      <OrLabel
+        :variant="'input'"
+        :required="required"
+        :disabled="disabled"
+      >
+        {{ label }}
+
+        <template v-slot:addon>
+          <slot name="addon" />
+        </template>
+      </OrLabel>
+    </template>
+
+    <div :class="controlGroup">
+      <slot
+        :size="size"
+        :error="!!error"
+        :required="required"
+        :readonly="readonly"
+        :disabled="disabled"
+        :disable-default-styles="disableDefaultStyles"
+      />
+    </div>
+
+    <div
+      v-show="!error"
+      :class="['contents']"
+    >
+      <template v-if="hint">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+        </OrHint>
+      </template>
+    </div>
+
+    <div
+      v-show="typeof error === 'string'"
+      :class="['contents']"
+    >
+      <OrError :disabled="disabled">
+        {{ error }}
+      </OrError>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { OrErrorV3 as OrError } from '../or-error-v3';
+import { OrHintV3 as OrHint } from '../or-hint-v3';
+import { OrLabelV3 as OrLabel } from '../or-label-v3';
+import { CombinedInputSize } from './props';
+import { CombinedInputControlGroup, CombinedInputRoot } from './styles';
+
+export default defineComponent({
+  name: 'OrCombinedInput',
+
+  components: {
+    OrError,
+    OrHint,
+    OrLabel,
+  },
+
+  props: {
+    size: {
+      type: String as PropType<CombinedInputSize>,
+      default: CombinedInputSize.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<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-combined-input',
+      ...CombinedInputRoot,
+    ]);
+
+    const controlGroup = computed(() => [
+      ...CombinedInputControlGroup,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+      controlGroup,
+    };
+  },
+});
+</script>

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-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]',
+];

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

@@ -40,7 +40,9 @@ export const ConfirmRoot: string[] = [
 
 export const ConfirmHeader: string[] = [
   // Layout
-  'layout-row justify-between',
+  'flex',
+  'items-center',
+  'justify-between',
 
   // Typography
   'typography-headline-3',
@@ -55,6 +57,11 @@ export const ConfirmInput: string[] = [
 ];
 
 export const ConfirmFooter: string[] = [
+  // Layout
+  'flex',
+  'items-center',
+  'justify-between',
+
   // Spacing
   'gap-md',
 ];
@@ -62,18 +69,17 @@ export const ConfirmFooter: string[] = [
 export const ConfirmFooterTypes: Record<ConfirmType, string[]> = {
   [ConfirmType.C]: [
     // Layout
-    'layout-row',
+    'flex-row',
   ],
-
   [ConfirmType.D]: [
     // Layout
-    'layout-row-reverse',
+    'flex-row-reverse',
   ],
 };
 
 export const ConfirmFooterButtons: string[] = [
   // Layout
-  '!grow',
+  'grow',
 
   // Box
   'w-auto md:w-[128px]',

package/src/components/or-empty-state-v3/styles.ts

@@ -11,12 +11,12 @@ export const EmptyStateRoot: string[] = [
   // Box
   'w-full',
 
-  // Spacing
+  // Sizing
   'gap-sm',
 ];
 
 export const EmptyStateImage = [
-  // Spacing
+  // Sizing
   'mb-sm',
 ];
 

package/src/components/or-error-tag-v3/OrErrorTag.vue

@@ -3,7 +3,7 @@
     ref="root"
     :class="rootStyles"
   >
-    <div :class="['layout-inline-row', 'm-[-4px] md:m-[-2px]']">
+    <div :class="['layout-row', 'm-[-4px] md:m-[-2px]']">
       <OrIcon
         :icon="'error'"
         :variant="'filled-bold'"

package/src/components/or-error-tag-v3/styles.ts

@@ -2,6 +2,9 @@ export const ErrorTagRoot: string[] = [
   // Layout
   'layout-inline-row',
 
+  // Box
+  'max-w-fit',
+
   // Shape
   'rounded-full',
 

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

@@ -14,13 +14,16 @@ export const ErrorRoot: string[] = [
 ];
 
 export const ErrorText: string[] = [
+  // Layout
+  'grow',
+
   // Interactivity
   'interactivity-none',
 ];
 
 export const ErrorAddon: string[] = [
   // Layout
-  'layout-inline-row empty:hidden',
+  'layout-row empty:hidden',
 
   // Typography
   'whitespace-nowrap',

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

@@ -4,13 +4,13 @@ export const FabRoot: string[] = [
   // Layout
   'layout-inline-row justify-center',
 
+  // Shape
+  'rounded-full',
+
   // Box
   'w-[56px]',
   'h-[56px]',
 
-  // Shape
-  'rounded-full',
-
   // Elevation
   'enabled:shadow-button',
   'dark:enabled:shadow-button-dark',

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

@@ -14,13 +14,16 @@ export const HintRoot: string[] = [
 ];
 
 export const HintText: string[] = [
+  // Layout
+  'grow',
+
   // Interactivity
   'interactivity-none',
 ];
 
 export const HintAddon: string[] = [
   // Layout
-  'layout-inline-row empty:hidden',
+  'layout-row empty:hidden',
 
   // Typography
   'whitespace-nowrap',

package/src/components/or-icon-button-v3/styles.ts

@@ -85,7 +85,7 @@ export const IconButtonRootColors: Record<IconButtonColor, string[]> = {
     'dark:theme-preset-3-primary-dark',
 
     'theme-foreground-inherit',
-    'dark:theme-foreground-inherit-dark',
+    'dark:theme-foreground-inherit',
 
     // Theme (hover)
     'hover:outline-primary-opacity-0-08',

package/src/components/or-inline-input-v3/OrInlineInput.vue

@@ -6,7 +6,7 @@
     <div :class="['layout-row', 'gap-sm+']">
       <OrInlineInputBox
         :size="size"
-        :invalid="invalid"
+        :invalid="!!error"
       >
         <input
           ref="control"
@@ -40,7 +40,10 @@
       </template>
     </div>
 
-    <template v-if="!invalid">
+    <div
+      v-show="!error"
+      :class="['contents']"
+    >
       <template v-if="hint || maxLength">
         <OrHint>
           {{ hint }}
@@ -53,9 +56,12 @@
           </template>
         </OrHint>
       </template>
-    </template>
+    </div>
 
-    <template v-else>
+    <div
+      v-show="typeof error === 'string'"
+      :class="['contents']"
+    >
       <OrError>
         {{ error }}
 
@@ -66,7 +72,7 @@
           {{ currentLength }} / {{ maxLength }}
         </template>
       </OrError>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -127,7 +133,7 @@ export default defineComponent({
     },
 
     error: {
-      type: String,
+      type: [String, Boolean],
       default: undefined,
     },
   },
@@ -188,8 +194,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
@@ -248,7 +252,6 @@ export default defineComponent({
       draftModelValue,
       currentLength,
       maxLength,
-      invalid,
       activated,
       onFocus,
       onBlur,

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

@@ -9,8 +9,8 @@ export const InlineInputRoot: string[] = [
 ];
 
 export const InlineInputControl: string[] = [
-  // Layout
-  'grow',
+  // Box
+  'w-full',
 
   // Typography
   'typography-inherit',
@@ -22,7 +22,7 @@ export const InlineInputControl: string[] = [
 
 export const InlineInputAction: string[] = [
   // Layout
-  'layout-inline-row self-start',
+  'layout-row self-start',
 
   // Spacing
   'gap-sm+',

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',
@@ -20,7 +20,7 @@ export const InlineTextareaControl: string[] = [
 
 export const InlineTextareaAction: string[] = [
   // Layout
-  'layout-inline-row self-start',
+  'layout-row self-start',
 
   // Spacing
   'px-none',