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

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

@@ -22,7 +22,7 @@
       ref="inputBox"
       v-dropdown-open="toggle"
       v-dropdown-close="close"
-      :class="[popoverState === 'open' && (popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]"
+      :class="[popoverState === 'open' && (popover && popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
       :invalid="!!error"
@@ -38,84 +38,51 @@
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
-        <template v-if="multiple">
-          <template v-if="!isEmptyModelValue">
-            <slot
-              name="valueTemplate"
+        <slot
+          name="valueTemplate"
+          :model="proxyModelValue"
+        >
+          <template v-if="multiple">
+            <OrSelectMultipleControl
+              ref="multipleControl"
+              v-model="searchText"
+              :options="options"
               :model="proxyModelValue"
-            >
-              <OrTag
-                v-for="option in selection"
-                :key="option.value"
-                :variant="readonly || disabled ? 'tag' : 'reset'"
-                :disabled="disabled"
-                @reset="deselect(option)"
-              >
-                {{ option.label }}
-              </OrTag>
-            </slot>
-          </template>
-
-          <template v-else-if="popoverState === 'closed' || !enableSearch">
-            <OrSelectPlaceholder :disabled="disabled">
-              {{ placeholder }}
-            </OrSelectPlaceholder>
+              :placeholder="placeholder"
+              :disabled="disabled"
+              :readonly="readonly"
+              :enable-search="enableSearch"
+              :overflow="overflow"
+              @reset="deselect"
+            />
           </template>
-        </template>
-
-        <template v-else>
-          <template v-if="!isEmptyModelValue">
-            <slot
-              name="valueTemplate"
+          <template v-else>
+            <OrSelectSingleControl
+              ref="singleControl"
+              v-model="searchText"
               :model="proxyModelValue"
-            >
-              <span class="truncate">
-                {{ selection && selection.label }}
-              </span>
-            </slot>
+              :options="options"
+              :placeholder="placeholder"
+              :enable-search="enableSearch"
+            />
           </template>
-
-          <template v-else-if="popoverState === 'closed' || !enableSearch">
-            <OrSelectPlaceholder :disabled="disabled">
-              {{ placeholder }}
-            </OrSelectPlaceholder>
-          </template>
-        </template>
+        </slot>
       </div>
 
-      <template v-if="multiple && outerItems.length > 0">
-        +{{ outerItems.length }}
-      </template>
-
-      <template v-if="popoverState === 'open' && enableSearch && isDesktop">
-        <OrInput
-          ref="searchControl"
-          v-model="searchText"
-          :class="[...searchControlStyles, isEmptyModelValue && 'md:!ml-none']"
-          :type="'search'"
-          :placeholder="searchPlaceholder"
-          :size="size"
-          :disable-default-styles="true"
-          @click.stop
-        />
-      </template>
-
-      <template v-else>
-        <div :class="['grow']" />
-      </template>
-
       <div :class="['layout-inline-row', 'gap-sm']">
         <template v-if="showClear">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
+            :additional-styles="['!text-outline', '!dark:text-outline-dark']"
             :disabled="readonly || disabled"
             @click.stop="$emit('update:modelValue', multiple ? [] : undefined)"
           />
         </template>
 
         <OrIcon
-          :icon="popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'"
+          :icon="popoverState === 'open' ? enableSearch ? 'search' : 'arrow_drop_up' : 'arrow_drop_down'"
+          :class=" popoverState === 'open' && enableSearch ? '!text-outline !dark:text-outline-dark' : ''"
           :variant="'outlined'"
         />
       </div>
@@ -128,7 +95,6 @@
         :full-width="true"
         :custom-styles="dropdownStyles"
         :disable-default-styles="true"
-        @close="clearSearchControl()"
       >
         <template v-if="popoverState === 'open' && enableSearch && isMobile">
           <OrInput
@@ -136,7 +102,7 @@
             v-model="searchText"
             :class="searchControlStyles"
             :type="'search'"
-            :placeholder="searchPlaceholder"
+            :placeholder="placeholder"
           />
         </template>
 
@@ -174,7 +140,7 @@
                   :key="i"
                   :class="dropdownItemStyles"
                   :selected="proxyModelValue === option.value"
-                  @click.stop="proxyModelValue = option.value; close()"
+                  @click.stop="toggleOption(option.value)"
                 >
                   <slot
                     name="optionTemplate"
@@ -194,18 +160,22 @@
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
                 :selected="proxyModelValue && proxyModelValue.includes(option.value)"
+                @click.stop="toggleOption(option.value)"
               >
                 <OrCheckbox
-                  v-model="proxyModelValue"
+                  :model-value="proxyModelValue"
                   :value="option.value"
-                  :label="option.label"
                   :label-variant="'menu-item'"
                 >
-                  <slot
-                    name="optionTemplate"
-                    :model="proxyModelValue"
-                    :option="option"
-                  />
+                  <div @click="toggleOption(option.value)">
+                    <slot
+                      name="optionTemplate"
+                      :model="proxyModelValue"
+                      :option="option"
+                    >
+                      {{ option.label }}
+                    </slot>
+                  </div>
                 </OrCheckbox>
               </OrMenuItem>
             </template>
@@ -216,7 +186,7 @@
                 :key="i"
                 :class="dropdownItemStyles"
                 :selected="proxyModelValue === option.value"
-                @click.stop="proxyModelValue = option.value; close()"
+                @click.stop="toggleOption(option.value);"
               >
                 <slot
                   name="optionTemplate"
@@ -265,8 +235,8 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRefs, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
-import { useOverflow, useProxyModelValue, useResponsive } from '../../hooks';
-import { isEmptyValue } from '../../utils/isEmptyValue';
+import { useProxyModelValue, useResponsive } from '../../hooks';
+import { isEmptyValue } from '../../utils';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrExpansionPanelV3 as OrExpansionPanel } from '../or-expansion-panel-v3';
@@ -278,14 +248,16 @@ import { OrInputV3 as OrInput } from '../or-input-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import { OrTagV3 as OrTag } from '../or-tag-v3';
-import OrSelectPlaceholder from './partials/or-select-placeholder/OrSelectPlaceholder.vue';
 import { SelectSize } from './props';
 import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl } from './styles';
-import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
+import { SelectGroupByFunction, SelectOption, SelectSearchFunction, SelectValue } from './types';
+import { TagsOverflow } from '../or-tags-v3';
+import { OrSelectMultipleControl, OrSelectSingleControl } from './partials';
 
 export default defineComponent({
   components: {
+    OrSelectMultipleControl,
+    OrSelectSingleControl,
     OrCheckbox,
     OrError,
     OrExpansionPanel,
@@ -297,8 +269,6 @@ export default defineComponent({
     OrLabel,
     OrMenuItem,
     OrPopover,
-    OrSelectPlaceholder,
-    OrTag,
   },
 
   directives: {
@@ -323,7 +293,7 @@ export default defineComponent({
     },
 
     modelValue: {
-      type: [Object, String, Number, Array] as PropType<object | string | number | object[] | string[] | number[]>,
+      type: [Object, String, Number, Array] as PropType<SelectValue>,
       default: undefined,
     },
 
@@ -347,11 +317,6 @@ export default defineComponent({
       default: undefined,
     },
 
-    searchPlaceholder: {
-      type: String,
-      default: undefined,
-    },
-
     hint: {
       type: String,
       default: undefined,
@@ -404,6 +369,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    overflow: {
+      type: String as PropType<`${TagsOverflow}`>,
+      default: TagsOverflow.Hidden,
+    },
   },
 
   emits: [
@@ -429,7 +399,8 @@ export default defineComponent({
     const inputBoxRoot = computed(() => inputBox.value?.root);
 
     const control = ref<HTMLElement>();
-
+    const multipleControl = ref<InstanceType<typeof OrSelectMultipleControl>>();
+    const singleControl = ref<InstanceType<typeof OrSelectSingleControl>>();
     const searchControl = ref<HTMLElement>();
 
     const popover = ref<InstanceType<typeof OrPopover>>();
@@ -437,7 +408,7 @@ export default defineComponent({
     const popoverState = computed(() => popover.value?.state);
 
     // Props
-    const { enableClear, modelValue } = toRefs(props);
+    const { enableClear, enableSearch, modelValue, multiple } = toRefs(props);
 
     // Styles
     const rootStyles = computed(() => [
@@ -487,20 +458,16 @@ export default defineComponent({
       }
     });
 
-    const readonly = computed(() => context.attrs.readonly as boolean);
-
-    const selection = computed(() => {
-      const modelValue = proxyModelValue.value;
-
-      if (Array.isArray(modelValue)) {
-        return modelValue
-          .map((value) => props.options.find((option) => option.value === value))
-          .filter((value) => !!value);
+    const focused = computed(() => {
+      if (multiple.value) {
+        return multipleControl.value?.focused;
+      } else {
+        return singleControl.value?.focused;
       }
-
-      return props.options.find((option) => option.value === modelValue);
     });
 
+    const readonly = computed(() => context.attrs.readonly as boolean);
+
     const internalSearchOptions = ref<SelectOption[]>(props.options);
 
     const resolvedSearchOptions = computed(() => {
@@ -549,15 +516,23 @@ export default defineComponent({
         const popoverInstance = popover.value;
 
         if (popoverInstance) {
-          if (popoverState.value === 'open') {
-            (popoverInstance.close as () => void)();
+          if (popoverState.value === 'open' && !focused.value) {
+            close();
           } else {
-            (popoverInstance.open as () => void)();
+            open();
+            focus();
           }
         }
       }
     }
 
+    function open(): void {
+      const popoverInstance = popover.value;
+
+      if (popoverInstance) {
+        (popoverInstance.open as () => void)();
+      }
+    }
     function close(): void {
       const popoverInstance = popover.value;
 
@@ -566,35 +541,53 @@ export default defineComponent({
       }
     }
 
-    function deselect(option: SelectOption): void {
+    function focus(): void {
+      if (enableSearch.value) {
+        const controlInstance = multiple.value ? multipleControl.value : singleControl.value;
+        if (controlInstance) {
+          (controlInstance.focus as () => void)();
+        }
+      }
+    }
+
+    function deselect(option: string): void {
       const modelValue = proxyModelValue.value;
 
       if (Array.isArray(modelValue)) {
-        proxyModelValue.value = modelValue.filter((value) => value !== option.value);
+        proxyModelValue.value = modelValue.filter((value) => value !== option);
       }
     }
 
+    function toggleOption(option: string): void {
+      const modelValue = proxyModelValue.value;
+
+      if (Array.isArray(modelValue)) {
+        if (modelValue.includes(option)) {
+          deselect(option);
+        } else {
+          proxyModelValue.value = [...modelValue, option];
+        }
+      } else {
+        proxyModelValue.value = option;
+      }
+      clearSearchControl();
+    }
+
     function clearSearchControl(): void {
       searchText.value = '';
     }
 
-    const { innerItems, outerItems } = useOverflow(control);
-
     // Utils
     const { isDesktop, isMobile } = useResponsive();
 
-    // Effects
-    watch(searchControl, (control) => {
-      setTimeout(() => {
-        control?.focus();
-      });
-    });
 
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
+      multipleControl,
+      singleControl,
       searchControl,
       popover,
       popoverRoot,
@@ -610,17 +603,16 @@ export default defineComponent({
       readonly,
       isEmptyModelValue,
       showClear,
-      selection,
       searchText,
       internalSearchOptions,
       resolvedSearchOptions,
       groupedOptions,
       toggle,
       close,
+      open,
       deselect,
+      toggleOption,
       clearSearchControl,
-      innerItems,
-      outerItems,
       isDesktop,
       isMobile,
     };

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

@@ -0,0 +1,3 @@
+export { OrSelectMultipleControl } from './or-select-multiple-control';
+export { OrSelectSingleControl } from './or-select-single-control';
+export { OrSelectPlaceholder } from './or-select-placeholder';

package/src/components/or-select-v3/partials/or-select-control-input/OrSelectControlInput.vue

@@ -0,0 +1,88 @@
+<template>
+  <input
+    ref="root"
+    v-model="proxyModelValue"
+    :style="controlInlineStyles"
+    :class="controlStyles"
+    :type="'text'"
+    :placeholder="placeholder"
+    :readonly="readonly"
+    :disabled="disabled"
+    :autocomplete="'off'"
+    :minlength="undefined"
+    :maxlength="undefined"
+  >
+</template>
+<script lang="ts">
+import { computed, defineComponent, toRefs, ref } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
+import { SelectControlInput } from './styles';
+import { useFocus } from '@vueuse/core';
+
+export default defineComponent({
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  expose: ['focused', 'root', 'focus'],
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLInputElement>();
+
+    // Props
+    const { placeholder, modelValue } = toRefs(props);
+
+    // State
+    const proxyModelValue = useProxyModelValue(modelValue, context.emit);
+    const { focused } = useFocus(root);
+
+    // Styles
+    const controlStyles = computed(() => [
+      ...SelectControlInput,
+    ]);
+
+    const controlInlineStyles = computed(() => {
+      const chars = proxyModelValue.value.length > 0
+        ? proxyModelValue.value.length
+        : placeholder.value?.length;
+
+      return {
+        width: `${Math.max(chars + 1 || 0, 2)}ch`,
+      };
+    });
+
+    // Methods
+    function focus() {
+      focused.value = true;
+    }
+
+    return {
+      root,
+      proxyModelValue,
+      controlStyles,
+      controlInlineStyles,
+      focused,
+      focus,
+    };
+  },
+});
+</script>

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

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

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

@@ -0,0 +1,13 @@
+export const SelectControlInput: string[] = [
+  // Base
+  'appearance-none',
+
+  // Typography
+  'typography-inherit',
+
+  // Theme (placeholder)
+  'placeholder:theme-foreground-outline',
+  'dark:placeholder:theme-foreground-outline-dark',
+  'theme-background-transparent',
+  'outline-none',
+];

package/src/components/or-select-v3/partials/or-select-multiple-control/OrSelectMultipleControl.vue

@@ -0,0 +1,161 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <OrTags
+      v-show="!isEmpty || enableSearch"
+      ref="tags"
+      :items="selection"
+      class="grow"
+      :disabled="disabled"
+      :tag-props="{
+        variant: readonly || disabled ? 'tag' : 'reset',
+        disabled: disabled
+      }"
+      :overflow="overflow"
+      @reset="$emit('reset', $event)"
+    >
+      <template
+        v-if="enableSearch"
+        v-slot:tail
+      >
+        <div class="inline-flex w-fit max-w-full">
+          <OrSelectControlInput
+            ref="searchControl"
+            v-model="searchModelValue"
+            :placeholder="isEmpty ? placeholder: ''"
+            :readonly="readonly"
+            :disabled="disabled"
+          />
+        </div>
+      </template>
+    </OrTags>
+    <template v-if="isEmpty && !enableSearch">
+      <OrSelectPlaceholder :disabled="disabled">
+        {{ placeholder }}
+      </OrSelectPlaceholder>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType, ref, toRefs, computed, watch } from 'vue-demi';
+import { useProxyModelValue } from '../../../../hooks';
+import { OrTagsV3 as OrTags, TagsOverflow } from '../../../or-tags-v3';
+import { SelectOption, SelectValue } from '../../types';
+import OrSelectPlaceholder from '../or-select-placeholder/OrSelectPlaceholder.vue';
+import { castToMultipleValue } from './utils/castToMultipleModel';
+import { OrSelectControlInput } from '../or-select-control-input';
+import { SelectMultipleControlRoot } from './styles';
+
+export default defineComponent({
+  components: {
+    OrSelectPlaceholder,
+    OrSelectControlInput,
+    OrTags,
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+  props: {
+    model: {
+      type: [Object, String, Number, Array] as PropType<SelectValue>,
+      default: () => [],
+    },
+    options: {
+      type: Array as PropType<SelectOption[]>,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    enableSearch: {
+      type: Boolean,
+      default: false,
+    },
+    overflow: {
+      type: String as PropType<`${TagsOverflow}`>,
+      default: TagsOverflow.Hidden,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['reset', 'update:modelValue'],
+  expose: ['focus', 'root', 'focused'],
+  setup(props, context) {
+    // Refs
+    const root = ref<HTMLDivElement>();
+
+    const searchControl = ref<InstanceType<typeof OrSelectControlInput>>();
+    const tags = ref<InstanceType<typeof OrTags>>();
+    // Props
+    const { modelValue, model, options, overflow } = toRefs(props);
+
+    // State
+    const searchModelValue = useProxyModelValue(modelValue, context.emit);
+
+    const focused = computed(() => {
+      return searchControl.value?.focused;
+    });
+
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-select-multiple-control-v3',
+      ...SelectMultipleControlRoot,
+    ]);
+
+    // Computed
+    const value = computed(() => castToMultipleValue(model.value));
+    const isEmpty = computed(() => value.value.length === 0);
+
+    const selection = computed(() => {
+      if (model.value === undefined || model.value === null) {
+        return [];
+      }
+
+      return value.value
+        .map((value) => options.value.find((option) => option.value === value))
+        .filter((value) => !!value) as SelectOption[];
+    });
+
+    watch(selection, (items, prevItems) => {
+      if (items.length != prevItems.length && overflow.value === TagsOverflow.Scroll && tags.value) {
+        (tags.value.scrollToEnd as () => void)();
+      }
+    });
+
+    // Methods
+    function focus(): void {
+      if (searchControl.value) {
+        (searchControl.value.focus as () => void)();
+      }
+    }
+
+    return {
+      root,
+      tags,
+      rootStyles,
+      searchControl,
+      searchModelValue,
+      isEmpty,
+      selection,
+      value,
+      focus,
+      focused,
+    };
+  },
+});
+</script>

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

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

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

@@ -0,0 +1,6 @@
+export const SelectMultipleControlRoot: string[] = [
+  // Layout
+  'layout-row',
+  'w-full',
+];
+