@onereach/ui-components 7.0.0 → 7.0.1-beta.3529.0

package/src/components/or-select-v3/partials/or-select-multiple-control/utils/castToMultipleModel.ts

@@ -0,0 +1,10 @@
+import { SelectValue } from '../../../types';
+import { isEmptyValue } from '../../../../../utils';
+
+export function castToMultipleValue(value: SelectValue): SelectValue[] {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  return isEmptyValue(value) ? [] : [value];
+}

package/src/components/or-select-v3/partials/or-select-placeholder/index.ts

@@ -0,0 +1 @@
+export { default as OrSelectPlaceholder } from './OrSelectPlaceholder.vue';

package/src/components/or-select-v3/partials/or-select-single-control/OrSelectSingleControl.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <template v-if="!isEmpty">
+      <span class="truncate">
+        {{ selectionLabel }}
+      </span>
+    </template>
+    <template v-else>
+      <OrSelectControlInput
+        v-if="enableSearch"
+        ref="searchControl"
+        v-model="searchModelValue"
+        :placeholder="placeholder"
+      />
+      <OrSelectPlaceholder
+        v-else
+        :disabled="disabled"
+      >
+        {{ placeholder }}
+      </OrSelectPlaceholder>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType, toRefs, ref } from 'vue-demi';
+import { SelectOption, SelectValue } from '../../types';
+import OrSelectPlaceholder from '../or-select-placeholder/OrSelectPlaceholder.vue';
+import OrSelectControlInput from '../or-select-control-input/OrSelectControlInput.vue';
+import { isEmptyValue } from '../../../../utils';
+import { useProxyModelValue } from '../../../../hooks';
+import { SelectSingleControlInput } from './styles';
+
+export default defineComponent({
+  components: {
+    OrSelectPlaceholder,
+    OrSelectControlInput,
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    model: {
+      type: [Object, String, Number, Array] as PropType<SelectValue>,
+      default: undefined,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array as PropType<SelectOption[]>,
+      default: () => [],
+    },
+    enableSearch: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  expose: [
+    'root',
+    'focus',
+    'focused',
+  ],
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLDivElement>();
+    const searchControl = ref<InstanceType<typeof OrSelectControlInput>>();
+
+
+    // Props
+    const { modelValue, model, options } = toRefs(props);
+
+
+    // State
+    const searchModelValue = useProxyModelValue(modelValue, context.emit);
+    const isEmpty = computed(() => {
+      return isEmptyValue(model.value);
+    });
+
+    const selection = computed(() => {
+      return options.value.find((option) => option.value === model.value);
+    });
+
+    const selectionLabel = computed(() => {
+      return selection.value?.label;
+    });
+
+    const focused = computed(() => {
+      return searchControl.value?.focused;
+    });
+
+    // Styles
+    const rootStyles = computed(() => ([
+      'or-select-single-control-v3',
+      ...SelectSingleControlInput,
+    ]));
+
+    // Methods
+    function focus() {
+      if (searchControl.value) {
+        (searchControl.value.focus as () => void)();
+      }
+    }
+
+    return {
+      root,
+      rootStyles,
+      searchControl,
+      searchModelValue,
+      isEmpty,
+      selection,
+      selectionLabel,
+      focus,
+      focused,
+    };
+  },
+});
+</script>

package/src/components/or-select-v3/partials/or-select-single-control/index.ts

@@ -0,0 +1 @@
+export { default as OrSelectSingleControl } from './OrSelectSingleControl.vue';

package/src/components/or-select-v3/partials/or-select-single-control/styles.ts

@@ -0,0 +1,4 @@
+export const SelectSingleControlInput: string[] = [
+  // Layout
+  'w-full',
+];

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

@@ -9,6 +9,7 @@ export const Select: string[] = [
 export const SelectControl: string[] = [
   // Layout
   'layout-row',
+  'w-full',
 
   // Layout (empty)
   'empty:hidden',

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

@@ -1,8 +1,10 @@
 export interface SelectOption {
-  value: object | string | number;
+  value: RawValue;
   label: string;
 }
 
+export type RawValue = string | number | object;
+
 export interface SelectSearchFunction {
   (searchText: string, options: SelectOption[]): Promise<SelectOption[]>;
 }
@@ -10,3 +12,5 @@ export interface SelectSearchFunction {
 export interface SelectGroupByFunction {
   (option: SelectOption): string;
 }
+
+export type SelectValue = RawValue | RawValue[] | undefined;

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -19,49 +19,65 @@
     </template>
 
     <OrInputBox
+      ref="inputBox"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
-      :size="size"
+      :force-state="activated ? 'focus-within': undefined"
+      class="cursor-text"
       :invalid="!!error"
       :readonly="readonly"
       :disabled="disabled"
+      tabindex="0"
+      @focus="activate"
     >
-      <template v-if="proxyModelValue.length > 0">
-        <OrTags
-          :items="proxyModelValue"
-          :tag-props="{
-            variant: readonly || disabled ? 'tag' : 'reset',
-            disabled: disabled
-          }"
-          @reset="remove($event)"
-        />
-      </template>
-
-      <input
-        ref="control"
-        v-model="draftModelValue"
-        v-bind="controlAttributes"
-        :class="controlStyles"
-        :type="'text'"
-        :placeholder="proxyModelValue.length === 0 ? placeholder : undefined"
-        :readonly="readonly"
+      <OrTags
+        ref="tags"
+        :items="proxyModelValue"
+        class="grow"
         :disabled="disabled"
-        :autocomplete="'off'"
-        :minlength="undefined"
-        :maxlength="undefined"
-        @keydown.enter="add()"
-        @keydown="$emit('keydown', $event)"
-        @keyup="$emit('keyup', $event)"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
+        :tag-props="{
+          variant: readonly || disabled ? 'tag' : 'reset',
+          disabled: disabled
+        }"
+        :overflow="overflow"
+        @reset="remove($event)"
       >
+        <template
+          v-if="showControl"
+          v-slot:tail
+        >
+          <div class="inline-flex w-fit max-w-full">
+            <input
+              ref="control"
+              v-model="draftModelValue"
+              v-bind="controlAttributes"
+              :class="controlStyles"
+              :style="controlInlineStyles"
+              :type="'text'"
+              :placeholder="proxyModelValue.length === 0 ? placeholder : undefined"
+              :readonly="readonly"
+              :disabled="disabled"
+              :autocomplete="'off'"
+              :minlength="undefined"
+              :maxlength="undefined"
+              @keydown.enter="add()"
+              @keydown="$emit('keydown', $event)"
+              @keyup="$emit('keyup', $event)"
+              @focus="activate"
+            >
+          </div>
+        </template>
+      </OrTags>
 
-      <template v-slot:addon>
+      <template
+        v-if="enableClear && !readonly && !disabled"
+        v-slot:addon
+      >
         <template v-if="proxyModelValue.length > 0 || draftModelValue">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click.stop="reset()"
+            @click="reset()"
           />
         </template>
       </template>
@@ -104,20 +120,18 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, reactive, ref, toRefs, nextTick, watch } from 'vue-demi';
+import { MaybeElementRef, onClickOutside } from '@vueuse/core';
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
-import { OrTagsV3 as OrTags } from '../or-tags-v3';
-import { TagInputSize } from './props';
+import { OrTagsV3 as OrTags, TagsOverflow } from '../or-tags-v3';
 import { TagInput, TagInputControl, TagInputItem } from './styles';
 
 export default defineComponent({
-  name: 'OrTagInput',
-
   components: {
     OrError,
     OrHint,
@@ -138,11 +152,6 @@ export default defineComponent({
       default: () => [],
     },
 
-    size: {
-      type: String as PropType<`${TagInputSize}`>,
-      default: TagInputSize.M,
-    },
-
     label: {
       type: String,
       default: undefined,
@@ -182,6 +191,17 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    overflow: {
+      type: String as PropType<`${TagsOverflow}`>,
+      default: TagsOverflow.Hidden,
+    },
+
+    // todo: review default state, disabling will breaking
+    enableClear: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: [
@@ -191,6 +211,7 @@ export default defineComponent({
     'keyup',
     'focus',
     'blur',
+    'reset',
   ],
 
   expose: [
@@ -204,6 +225,11 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
     const control = ref<HTMLInputElement>();
+    const inputBox = ref<InstanceType<typeof OrInputBox>>();
+    const tags = ref<InstanceType<typeof OrTags>>();
+
+    // Props
+    const { modelValue, overflow, placeholder, disabled, readonly } = toRefs(props);
 
     // Styles
     const rootStyles = computed(() => [
@@ -226,12 +252,30 @@ export default defineComponent({
       ...useValidationAttributes(),
     });
 
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref<string>();
+    const activated = ref(false);
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
+    const draftModelValue = ref<string>('');
 
     const currentLength = computed(() => proxyModelValue.value?.length ?? 0);
     const maxLength = computed(() => controlAttributes.maxlength);
 
+    const controlInlineStyles = computed(() => {
+      const chars = draftModelValue.value.length > 0
+        ? draftModelValue.value.length
+        : currentLength.value === 0
+          ? placeholder.value?.length ?? 0
+          : 0;
+      return {
+        width: `${Math.max(chars + 1 || 0, 3)}ch`,
+      };
+    });
+
+    const showControl = computed(() => {
+      return draftModelValue.value.length > 0
+        || currentLength.value === 0
+        || activated.value;
+    });
+
     // Methods
     function focus(): void {
       control.value?.focus();
@@ -241,6 +285,19 @@ export default defineComponent({
       control.value?.blur();
     }
 
+    function deactivate() {
+      activated.value = false;
+      nextTick(() => blur());
+      context.emit('blur');
+    }
+
+    function activate() {
+      if (disabled.value || readonly.value) return;
+      activated.value = true;
+      nextTick(() => focus());
+      context.emit('focus');
+    }
+
     function add(): void {
       const newItem = draftModelValue.value?.trim();
 
@@ -249,7 +306,7 @@ export default defineComponent({
       if (maxLength.value && currentLength.value >= maxLength.value) return;
 
       proxyModelValue.value = [...proxyModelValue.value, newItem];
-      draftModelValue.value = undefined;
+      draftModelValue.value = '';
     }
 
     function remove(value: string): void {
@@ -258,23 +315,43 @@ export default defineComponent({
 
     function reset(): void {
       proxyModelValue.value = [];
-      draftModelValue.value = undefined;
+      draftModelValue.value = '';
+      context.emit('reset');
     }
 
+    // Effects
+    onClickOutside((inputBox as MaybeElementRef), () => {
+      if (activated.value === false || (tags.value?.overflowPopover as any)?.state === 'open') return;
+      deactivate();
+    });
+
+    watch(proxyModelValue, (items, prevItems) => {
+      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll) {
+        (tags.value?.scrollToEnd as any)();
+      }
+    });
+
     return {
       root,
       control,
+      inputBox,
+      tags,
       rootStyles,
       controlStyles,
       itemStyles,
+      controlInlineStyles,
       controlAttributes,
       proxyModelValue,
       draftModelValue,
       currentLength,
       maxLength,
+      activated,
+      showControl,
       focus,
       blur,
       add,
+      activate,
+      deactivate,
       remove,
       reset,
     };

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

@@ -8,7 +8,7 @@ export const TagInput: string[] = [
 
 export const TagInputControl: string[] = [
   // Layout
-  'flex-auto',
+  // 'flex-auto',
 
   // Typography
   'typography-inherit',

package/src/components/or-tags-v3/OrTags.vue

@@ -4,27 +4,34 @@
     :class="rootStyles"
   >
     <div
+      v-if="localItems.length > 0"
       ref="container"
       :class="containerStyles"
     >
       <OrTag
-        v-for="item in items"
+        v-for="item in localItems"
         v-bind="tagProps"
-        :key="item"
-        @reset="$emit('reset', item)"
+        :key="item.value"
+        class="max-w-full"
+        @reset="$emit('reset', item.value)"
       >
-        {{ item }}
+        {{ item.label }}
       </OrTag>
+      <slot
+        v-if="localOverflow === 'wrap'"
+        name="tail"
+      />
     </div>
 
-    <template v-if="overflowItems.length > 0">
+    <template v-if="localOverflow === 'hidden' && overflowItems.length > 0">
       <OrButton
         ref="overflowButton"
         :class="overflowButtonStyles"
         :type="'button'"
         :variant="'link'"
         :color="'inherit'"
-        @click.stop="overflowPopover.open()"
+        :disabled="disabled"
+        @click.stop="togglePopover"
       >
         +{{ overflowItems.length }}
       </OrButton>
@@ -37,25 +44,31 @@
           <OrTag
             v-for="item in overflowItems"
             v-bind="tagProps"
-            :key="item"
-            @reset="$emit('reset', item)"
+            :key="item.value"
+            @reset="$emit('reset', item.value)"
           >
-            {{ item }}
+            {{ item.label }}
           </OrTag>
         </div>
       </OrPopover>
     </template>
+    <slot
+      v-if="localOverflow != 'wrap' || items.length === 0"
+      name="tail"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRefs, nextTick } from 'vue-demi';
 import { useOverflow } from '../../hooks';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrTagV3 as OrTag } from '../or-tag-v3';
 import { TagsOverflow } from './props';
 import { Tags, TagsContainer, TagsContainerOverflows, TagsOverflowButton, TagsOverflowPopover } from './styles';
+import { Tag } from './types';
+import { castToTagObject } from './utils/castToTag';
 
 export default defineComponent({
   name: 'OrTags',
@@ -68,19 +81,24 @@ export default defineComponent({
 
   props: {
     items: {
-      type: Array as PropType<string[]>,
+      type: Array as PropType<Tag[]>,
       default: () => [],
     },
 
     overflow: {
       type: String as PropType<`${TagsOverflow}`>,
-      default: TagsOverflow.Default,
+      default: TagsOverflow.Hidden,
     },
 
     tagProps: {
       type: Object as PropType<InstanceType<typeof OrTag>['$props']>,
       default: undefined,
     },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -93,6 +111,9 @@ export default defineComponent({
 
   expose: [
     'root',
+    'container',
+    'overflowPopover',
+    'scrollToEnd',
   ],
 
   setup(props) {
@@ -100,6 +121,15 @@ export default defineComponent({
     const root = ref<HTMLElement>();
     const container = ref<HTMLElement>();
 
+    // Props
+    const { items, overflow } = toRefs(props);
+
+    const localOverflow = computed(() => {
+      return overflow.value === TagsOverflow.Default
+        ? TagsOverflow.Hidden
+        : overflow.value;
+    });
+
     const overflowButton = ref<InstanceType<typeof OrButton>>();
     const overflowButtonRoot = computed(() => overflowButton.value?.root);
 
@@ -114,7 +144,7 @@ export default defineComponent({
 
     const containerStyles = computed(() => [
       ...TagsContainer,
-      ...TagsContainerOverflows[props.overflow],
+      ...TagsContainerOverflows[localOverflow.value],
     ]);
 
     const overflowButtonStyles = computed(() => [
@@ -126,15 +156,35 @@ export default defineComponent({
     ]);
 
     // State
-    const { innerItems } = useOverflow(container);
+    const { innerItems } = useOverflow(container, { hide: false });
+
+    const localItems = computed(() => {
+      return items.value.map(castToTagObject);
+    });
 
     const overflowItems = computed(() => {
-      return props.items.slice(innerItems.value.length);
+      return localItems.value.slice(innerItems.value.length);
     });
 
+    // Methods
+    function togglePopover() {
+      (overflowPopover.value!.toggle as () => void)();
+    }
+
+    function scrollToEnd() {
+      nextTick(() => {
+        container.value?.scrollTo({
+          left: container.value?.scrollWidth,
+          behavior: 'smooth',
+        });
+      });
+    }
+
     return {
       root,
       container,
+      localOverflow,
+      localItems,
       overflowButton,
       overflowButtonRoot,
       overflowPopover,
@@ -144,6 +194,8 @@ export default defineComponent({
       overflowButtonStyles,
       overflowPopoverStyles,
       overflowItems,
+      togglePopover,
+      scrollToEnd,
     };
   },
 });

package/src/components/or-tags-v3/props.ts

@@ -1,4 +1,8 @@
 export enum TagsOverflow {
+  // todo: remove in next braking release
+  // @deprecated use Hidden instead
   Default = 'default',
   Wrap = 'wrap',
+  Hidden = 'hidden',
+  Scroll = 'scroll',
 }