@onereach/ui-components 2.69.5-beta.2145.0 → 2.69.5-beta.2156.0

package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts

@@ -53,14 +53,6 @@ export default {
       control: { type: 'text' },
     },
 
-    searchPlaceholder: {
-      control: { type: 'text' },
-    },
-
-    searchDebounce: {
-      control: { type: 'number' },
-    },
-
     // Events
     viewChange: {
       table: { disable: true },
@@ -368,11 +360,3 @@ EmptySearchResults.args = {
   search: 'My favorite ..',
   items: [],
 };
-
-export const CustomizeSearch = Template.bind({});
-
-CustomizeSearch.args = {
-  ...Default.args,
-  searchPlaceholder: 'What you want to find today?',
-  searchDebounce: 0,
-};

package/src/components/or-card-collection-v3/OrCardCollection.vue

@@ -37,10 +37,8 @@
         :class="toolbarPanelStyles"
       >
         <OrSearch
-          :model-value="proxySearch"
+          v-model="proxySearch"
           class="md:w-[350px]"
-          :placeholder="searchPlaceholder"
-          :debounce="searchDebounce"
           size="s"
           @search="handleSearch"
         />
@@ -154,16 +152,6 @@ export default defineComponent({
       type: String,
       default: '',
     },
-
-    searchPlaceholder: {
-      type: String,
-      default: undefined,
-    },
-
-    searchDebounce: {
-      type: Number,
-      default: undefined,
-    },
   },
 
   emits: [

package/src/components/or-card-collection-v3/styles.ts

@@ -45,7 +45,5 @@ export const CardCollectionContentViews: Record<DefaultCardCollectionViews, stri
     'xl:grid-cols-6',
   ],
 
-  'list': [
-    'grid-cols-1',
-  ],
+  'list': [],
 };

package/src/components/or-combined-input-v3/OrCombinedInput.docs.mdx

@@ -0,0 +1,7 @@
+import { DocsPage } from '@storybook/addon-docs';
+
+```ts
+import { OrCombinedInputV3 as OrCombinedInput } from '@onereach/ui-components';
+```
+
+<DocsPage />

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

@@ -0,0 +1,202 @@
+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: {
+    // Attrs
+    readonly: {
+      control: { type: 'boolean' },
+    },
+
+    // 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' },
+    },
+
+    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,134 @@
+<template>
+  <div
+    ref="root"
+    v-bind="$attrs"
+    :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"
+        :required="required"
+        :readonly="readonly"
+        :disabled="disabled"
+        :disable-default-styles="disableDefaultStyles"
+      />
+    </div>
+
+    <template v-if="!invalid">
+      <template v-if="hint">
+        <OrHint :disabled="disabled">
+          {{ hint }}
+        </OrHint>
+      </template>
+    </template>
+
+    <template v-else>
+      <OrError :disabled="disabled">
+        {{ error }}
+      </OrError>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useClassAttribute } from '../../hooks';
+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,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    size: {
+      type: String as PropType<CombinedInputSize>,
+      default: CombinedInputSize.M,
+    },
+
+    label: {
+      type: String,
+      default: undefined,
+    },
+
+    hint: {
+      type: String,
+      default: undefined,
+    },
+
+    error: {
+      type: String,
+      default: undefined,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const classAttribute = useClassAttribute();
+
+    const rootStyles = computed(() => [
+      'or-combined-input',
+      ...CombinedInputRoot,
+      classAttribute.value,
+    ]);
+
+    const controlGroup = computed(() => [
+      ...CombinedInputControlGroup,
+    ]);
+
+    // State
+    const invalid = computed(() => !!props.error);
+    const readonly = computed(() => context.attrs.readonly as boolean);
+
+    return {
+      root,
+      rootStyles,
+      controlGroup,
+      invalid,
+      readonly,
+    };
+  },
+});
+</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-none',
+  '[&_.or-input-box]:intermediate-child:rounded-none',
+  '[&_.or-input-box]:last-child:rounded-l-none',
+
+  // 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-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"
+
+        :readonly="readonly"
+        :maxlength="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-search-v3/OrSearch.stories3.ts

@@ -5,7 +5,7 @@ import OrSearch from './OrSearch.vue';
 import { SearchSize } from './props';
 
 export default {
-  title: 'Components/Search',
+  title: 'Components/Forms/Search',
   component: OrSearch,
 
   argTypes: {

package/src/components/or-search-v3/OrSearch.vue

@@ -48,7 +48,7 @@ export default defineComponent({
 
     placeholder: {
       type: String,
-      default: 'Search',
+      default: undefined,
     },
 
     debounce: {

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,