@onereach/ui-components 5.0.2-beta.3143.0 → 5.0.2-beta.3145.0

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

@@ -219,6 +219,7 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
+
     'input',
     'keydown',
     'keyup',
@@ -262,6 +263,8 @@ export default defineComponent({
 
     const disclosed = ref(false);
 
+    const { isMobile } = useResponsive();
+
     // Methods
     function focus(): void {
       control.value?.focus();
@@ -271,9 +274,6 @@ export default defineComponent({
       control.value?.blur();
     }
 
-    // Helpers
-    const { isMobile } = useResponsive();
-
     return {
       root,
       control,
@@ -284,9 +284,9 @@ export default defineComponent({
       currentLength,
       maxLength,
       disclosed,
+      isMobile,
       focus,
       blur,
-      isMobile,
     };
   },
 });

package/src/components/or-label-v3/OrLabel.vue

@@ -2,6 +2,7 @@
   <div
     ref="root"
     :class="rootStyles"
+    :selected="selected ? '' : null"
     :disabled="disabled ? '' : null"
   >
     <label
@@ -22,11 +23,9 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { LabelVariant } from './props';
-import { LabelAddon, LabelRoot, LabelRootVariants, LabelText } from './styles';
+import { Label, LabelAddon, LabelText, LabelVariants } from './styles';
 
 export default defineComponent({
-  name: 'OrLabel',
-
   props: {
     controlId: {
       type: String,
@@ -38,6 +37,11 @@ export default defineComponent({
       default: LabelVariant.Input,
     },
 
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
     required: {
       type: Boolean,
       default: false,
@@ -60,8 +64,8 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-label-v3',
-      ...LabelRoot,
-      ...LabelRootVariants[props.variant],
+      ...Label,
+      ...LabelVariants[props.variant],
     ]);
 
     const textStyles = computed(() => [

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

@@ -1,4 +1,5 @@
 export enum LabelVariant {
   Input = 'input',
   Toggle = 'toggle',
+  MenuItem = 'menu-item',
 }

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

@@ -1,6 +1,6 @@
 import { LabelVariant } from './props';
 
-export const LabelRoot: string[] = [
+export const Label: string[] = [
   // Layout
   'layout-row justify-between',
 
@@ -8,8 +8,8 @@ export const LabelRoot: string[] = [
   'gap-sm',
 ];
 
-export const LabelRootVariants: Record<LabelVariant, string[]> = {
-  'input': [
+export const LabelVariants: Record<LabelVariant, string[]> = {
+  [LabelVariant.Input]: [
     // Typography
     'typography-caption-regular',
 
@@ -18,7 +18,7 @@ export const LabelRootVariants: Record<LabelVariant, string[]> = {
     'dark:theme-foreground-outline-dark',
   ],
 
-  'toggle': [
+  [LabelVariant.Toggle]: [
     // Typography
     'typography-body-2-regular',
 
@@ -26,6 +26,18 @@ export const LabelRootVariants: Record<LabelVariant, string[]> = {
     'theme-foreground-default',
     'dark:theme-foreground-default-dark',
   ],
+
+  [LabelVariant.MenuItem]: [
+    // Typography
+    'typography-body-2-regular',
+
+    // Typography (selected)
+    'selected:typography-body-2-semibold',
+
+    // Theme
+    'theme-foreground-default',
+    'dark:theme-foreground-default-dark',
+  ],
 };
 
 export const LabelText: string[] = [

package/src/components/or-pagination-v3/OrPagination.vue

@@ -138,6 +138,8 @@ export default defineComponent({
   ],
 
   setup(props, context) {
+    const { isDesktop, isMobile } = useResponsive();
+
     // Refs
     const root = ref<HTMLElement>();
 
@@ -262,10 +264,10 @@ export default defineComponent({
       currentPage.value = page;
     }
 
-    // Helpers
-    const { isDesktop, isMobile } = useResponsive();
-
     return {
+      isDesktop,
+      isMobile,
+
       root,
       limitButton,
       limitButtonRoot,
@@ -285,8 +287,6 @@ export default defineComponent({
       toPreviousPage,
       toNextPage,
       toPage,
-      isDesktop,
-      isMobile,
     };
   },
 });

package/src/components/or-popover-v3/OrPopover.vue

@@ -122,6 +122,8 @@ export default defineComponent({
   ],
 
   setup(props, context) {
+    const { isDesktop, isMobile } = useResponsive();
+
     // Refs
     const root = ref<HTMLElement>();
 
@@ -146,9 +148,6 @@ export default defineComponent({
     const isFlipped = ref<boolean>(false);
     const isHidden = ref<boolean>(false);
 
-    // Helpers
-    const { isDesktop, isMobile } = useResponsive();
-
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -202,6 +201,8 @@ export default defineComponent({
     // #endregion
 
     return {
+      isDesktop,
+      isMobile,
       root,
       bottomSheet,
       bottomSheetRoot,
@@ -210,8 +211,6 @@ export default defineComponent({
       state,
       isFlipped,
       isHidden,
-      isDesktop,
-      isMobile,
       open,
       close,
       toggle,

package/src/components/or-progress-v3/OrProgress.vue

@@ -150,6 +150,8 @@ export default defineComponent({
   ],
 
   setup(props) {
+    const { isMobile } = useResponsive();
+
     // Refs
     const root = ref<HTMLElement>();
 
@@ -246,9 +248,6 @@ export default defineComponent({
       (1 - localProgress.value) * strokeDasharray.value,
     );
 
-    // Helpers
-    const { isMobile } = useResponsive();
-
     return {
       root,
       rootStyles,

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

@@ -39,14 +39,14 @@
         @blur="$emit('blur', $event)"
       >
         <template v-if="multiple">
-          <template v-if="proxyModelValue && proxyModelValue.length > 0">
+          <template v-if="!isEmptyModelValue">
             <slot
               name="valueTemplate"
               :model="proxyModelValue"
             >
               <OrTag
-                v-for="(option, i) in selection"
-                :key="i"
+                v-for="option in selection"
+                :key="option.value"
                 :variant="'reset'"
                 :disabled="disabled || readonly"
                 @reset="deselect(option)"
@@ -54,27 +54,80 @@
                 {{ option.label }}
               </OrTag>
             </slot>
+
+            <template v-if="popoverState === 'open' && enableSearch && isDesktop">
+              <OrInput
+                ref="searchControl"
+                v-model="searchText"
+                :class="searchControlStyles"
+                :type="'search'"
+                :placeholder="'Search'"
+                :size="size"
+                :disable-default-styles="true"
+                @click.stop
+              />
+            </template>
           </template>
 
           <template v-else>
-            <span :class="placeholderStyles">{{ placeholder }}</span>
+            <template v-if="popoverState === 'open' && enableSearch && isDesktop">
+              <OrInput
+                ref="searchControl"
+                v-model="searchText"
+                :class="searchControlStyles"
+                :type="'search'"
+                :placeholder="'Search'"
+                :size="size"
+                :disable-default-styles="true"
+                @click.stop
+              />
+            </template>
+
+            <template v-else>
+              <span
+                :class="placeholderStyles"
+                :disabled="disabled ? '' : null"
+              >
+                {{ placeholder }}
+              </span>
+            </template>
           </template>
         </template>
 
         <template v-else>
-          <template v-if="!isEmptyModelValue">
-            <slot
-              name="valueTemplate"
-              :model="proxyModelValue"
-            >
-              <span class="truncate">
-                {{ selection && selection.label }}
-              </span>
-            </slot>
+          <template v-if="popoverState === 'open' && enableSearch && isDesktop">
+            <OrInput
+              ref="searchControl"
+              v-model="searchText"
+              :class="searchControlStyles"
+              :type="'search'"
+              :placeholder="'Search'"
+              :size="size"
+              :disable-default-styles="true"
+              @click.stop
+            />
           </template>
 
           <template v-else>
-            <span :class="placeholderStyles">{{ placeholder }}</span>
+            <template v-if="!isEmptyModelValue">
+              <slot
+                name="valueTemplate"
+                :model="proxyModelValue"
+              >
+                <span class="truncate">
+                  {{ selection && selection.label }}
+                </span>
+              </slot>
+            </template>
+
+            <template v-else>
+              <span
+                :class="placeholderStyles"
+                :disabled="disabled ? '' : null"
+              >
+                {{ placeholder }}
+              </span>
+            </template>
           </template>
         </template>
       </div>
@@ -84,12 +137,12 @@
       </template>
 
       <div :class="['layout-inline-row', 'gap-sm']">
-        <template v-if="!multiple && proxyModelValue">
+        <template v-if="proxyModelValue && popoverState === 'closed'">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click.stop="$emit('update:modelValue', undefined)"
+            @click.stop="$emit('update:modelValue', multiple ? [] : undefined)"
           />
         </template>
 
@@ -107,14 +160,15 @@
         :full-width="true"
         :custom-styles="dropdownStyles"
         :disable-default-styles="true"
+        @close="clearSearchControl()"
       >
-        <template v-if="enableSearch">
+        <template v-if="popoverState === 'open' && enableSearch && isMobile">
           <OrInput
+            ref="searchControl"
             v-model="searchText"
+            :class="searchControlStyles"
             :type="'search'"
             :placeholder="'Search'"
-            :size="'s'"
-            :disable-default-styles="true"
           />
         </template>
 
@@ -129,6 +183,7 @@
                 <OrMenuItem
                   v-for="(option, i) in group"
                   :key="i"
+                  :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                 >
                   <slot
                     name="optionTemplate"
@@ -139,7 +194,7 @@
                       v-model="proxyModelValue"
                       :value="option.value"
                       :label="option.label"
-                      :label-variant="'input'"
+                      :label-variant="'menu-item'"
                     />
                   </slot>
                 </OrMenuItem>
@@ -149,6 +204,8 @@
                 <OrMenuItem
                   v-for="(option, i) in group"
                   :key="i"
+                  :class="dropdownItemStyles"
+                  :selected="proxyModelValue === option.value"
                   @click.stop="proxyModelValue = option.value; close()"
                 >
                   <slot
@@ -168,12 +225,13 @@
               <OrMenuItem
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
+                :selected="proxyModelValue && proxyModelValue.includes(option.value)"
               >
                 <OrCheckbox
                   v-model="proxyModelValue"
                   :value="option.value"
                   :label="option.label"
-                  :label-variant="'input'"
+                  :label-variant="'menu-item'"
                 >
                   <slot
                     name="optionTemplate"
@@ -188,6 +246,8 @@
               <OrMenuItem
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
+                :class="dropdownItemStyles"
+                :selected="proxyModelValue === option.value"
                 @click.stop="proxyModelValue = option.value; close()"
               >
                 <slot
@@ -237,7 +297,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
-import { useOverflow, useProxyModelValue } from '../../hooks';
+import { useOverflow, useProxyModelValue, useResponsive } from '../../hooks';
 import { isEmptyValue } from '../../utils/isEmptyValue';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -252,12 +312,10 @@ 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 { SelectSize } from './props';
-import { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot } from './styles';
+import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl } from './styles';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
 
 export default defineComponent({
-  name: 'OrSelect',
-
   components: {
     OrCheckbox,
     OrError,
@@ -392,6 +450,8 @@ export default defineComponent({
 
     const control = ref<HTMLElement>();
 
+    const searchControl = ref<HTMLElement>();
+
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
     const popoverState = computed(() => popover.value?.state);
@@ -399,13 +459,17 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-select-v3',
-      ...SelectRoot,
+      ...Select,
     ]);
 
     const controlStyles = computed(() => [
       ...SelectControl,
     ]);
 
+    const searchControlStyles = computed(() => [
+      ...SelectSearchControl,
+    ]);
+
     const placeholderStyles = computed(() => [
       ...SelectPlaceholder,
     ]);
@@ -415,6 +479,10 @@ export default defineComponent({
       ...popover.value?.isFlipped ? SelectDropdownFlipped : SelectDropdownDefault,
     ]);
 
+    const dropdownItemStyles = computed(() => [
+      ...SelectDropdownItem,
+    ]);
+
     const noSearchResultsStyles = computed(() => [
       ...SelectNoSearchResults,
     ]);
@@ -442,7 +510,9 @@ export default defineComponent({
       const modelValue = proxyModelValue.value;
 
       if (Array.isArray(modelValue)) {
-        return modelValue.map((value) => props.options.find((option) => option.value === value));
+        return modelValue
+          .map((value) => props.options.find((option) => option.value === value))
+          .filter((value) => !!value);
       }
 
       return props.options.find((option) => option.value === modelValue);
@@ -521,20 +591,37 @@ export default defineComponent({
       }
     }
 
+    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,
+      searchControl,
       popover,
       popoverRoot,
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
+      dropdownItemStyles,
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
@@ -548,8 +635,11 @@ export default defineComponent({
       toggle,
       close,
       deselect,
+      clearSearchControl,
       innerItems,
       outerItems,
+      isDesktop,
+      isMobile,
     };
   },
 });

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

@@ -1,4 +1,4 @@
-export const SelectRoot: string[] = [
+export const Select: string[] = [
   // Layout
   'layout-column',
 
@@ -23,6 +23,15 @@ export const SelectControl: string[] = [
   'typography-inherit',
 ];
 
+export const SelectSearchControl: string[] = [
+  // Layout
+  'grow',
+
+  // Spacing
+  '!mx-lg md:!mx-none',
+  '!my-sm md:!my-none',
+];
+
 export const SelectPlaceholder: string[] = [
   // Theme
   'theme-foreground-outline',
@@ -66,6 +75,14 @@ export const SelectDropdownFlipped: string[] = [
   '!border-b-0',
 ];
 
+export const SelectDropdownItem: string[] = [
+  // Typography
+  '!typography-body-2-regular',
+
+  // Typography (selected)
+  'selected:!typography-body-2-semibold',
+];
+
 export const SelectNoSearchResults: string[] = [
   // Layout
   'layout-row justify-center',

package/src/directives/dropdown-close.ts

@@ -2,9 +2,6 @@ import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
 
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-
     if (['Escape'].includes(event.key)) {
       binding.value(event);
     }

package/src/directives/dropdown-open.ts

@@ -2,17 +2,14 @@ import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
 
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
 
   element.addEventListener('click', (event) => {
-    event.preventDefault();
     event.stopPropagation();
+    event.preventDefault();
 
     binding.value(event);
   });

package/src/hooks/useResponsive/useResponsive.ts

@@ -1,48 +1,13 @@
-import screens from '@onereach/styles/tailwind-screens';
 import { useMediaQuery } from '@vueuse/core';
-import { computed, getCurrentInstance, isVue3, onMounted, ref } from 'vue-demi';
+import { ref } from 'vue-demi';
 
 function useResponsive() {
-  const currentInstance = getCurrentInstance();
-  const currentRootElement = ref<Element>();
-
-  onMounted(() => {
-    if (currentInstance) {
-      const element = (currentInstance.vnode as any)[isVue3 ? 'el' : 'elm'];
-
-      if (element instanceof Element) {
-        currentRootElement.value = element as Element;
-      }
-    }
-  });
-
-  const desktopQuery = useMediaQuery(`(min-width: ${screens.md})`);
-
-  const isDesktop = computed(() => {
-    return isForcedDesktop(currentRootElement.value) || desktopQuery.value;
-  });
-
-  const isMobile = computed(() => {
-    return !isDesktop.value;
-  });
-
-  function isForcedDesktop(element?: Element): boolean {
-    if (!element) {
-      return false;
-    }
-
-    const forcedScreens = element.getAttribute('force-screen')?.split(/\s+/);
-
-    if (forcedScreens?.some((forcedScreen) => ['md', 'lg', 'xl', '2xl'].includes(forcedScreen))) {
-      return true;
-    }
-
-    return isForcedDesktop(element.parentElement ?? undefined);
-  }
+  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
+  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
 
   return {
-    isDesktop,
     isMobile,
+    isDesktop,
   };
 }
 

package/src/shims.d.ts

@@ -1,8 +1,3 @@
-declare module '@onereach/styles/tailwind-screens' {
-  const content: Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', string>;
-  export default content;
-}
-
 declare module '@onereach/styles/tailwind.config' {
   import { Config } from 'tailwindcss';