@onereach/ui-components 18.3.0-beta.4946.0 → 18.3.0-beta.4948.0

package/dist/bundled/utils/functions/dom.js

@@ -1,6 +1,6 @@
-import { g as get_1 } from '../../components/OrRadio-a9ee7b6a.js';
-import { _ as _baseGetTag, b as isObjectLike_1 } from '../../components/OrDateTimePicker-fcfb881b.js';
-import { j as _getPrototype } from '../../components/OrList-051f95d2.js';
+import { g as get_1 } from '../../components/OrRadio-84756e58.js';
+import { _ as _baseGetTag, b as isObjectLike_1 } from '../../components/OrDateTimePicker-a4cf2456.js';
+import { j as _getPrototype } from '../../components/OrList-e0bd7cdf.js';
 
 var baseGetTag = _baseGetTag,
   getPrototype = _getPrototype,

package/dist/esm/components/or-autocomplete-v3/index.js

@@ -61,8 +61,7 @@ const AutocompleteDropdown = [
 // Overflow
 'overflow-y-auto',
 // Box
-'max-h-[172px]',
-// equals 5 items
+'max-h-[340px]',
 // Theme
 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark'];
 const AutocompleteDropdownDefault = [
@@ -77,13 +76,7 @@ const AutocompleteDropdownFlipped = [
 '!border-b-0'];
 const AutocompleteDropdownItem = [
 // Typography
-'!typography-body-2-regular',
-// Padding Override todo: check design
-'!pt-[6px] pb-[7px]',
-// Typography (selected)
-'selected:!typography-body-2-semibold',
-// Theme
-'!theme-foreground-default dark:!theme-foreground-default-dark'];
+'!typography-body-2-regular'];
 const AutocompleteLoader = [
 // Layout
 'w-fit',

package/dist/esm/components/or-bottom-sheet-v3/index.js

@@ -148,7 +148,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'fullscreen', 'open', 'close', 'toggle'],
+  expose: ['root', 'state', 'open', 'close', 'toggle'],
   setup(props, context) {
     // Refs
     const root = ref();

package/dist/esm/components/or-popover-v3/index.js

@@ -278,7 +278,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle', 'bottomSheet'],
+  expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle'],
   setup(props, context) {
     // Refs
     const root = ref();

package/dist/esm/components/or-select-v3/OrSelect.vue.d.ts

@@ -103,7 +103,6 @@ declare const _default: import("vue").DefineComponent<{
     controlStyles: import("vue").ComputedRef<string[]>;
     searchControlStyles: import("vue").ComputedRef<string[]>;
     dropdownStyles: import("vue").ComputedRef<string[]>;
-    dropdownContainerStyles: import("vue").ComputedRef<string[]>;
     dropdownItemStyles: import("vue").ComputedRef<string[]>;
     noSearchResultsStyles: import("vue").ComputedRef<string[]>;
     loaderStyles: import("vue").ComputedRef<string[]>;

package/dist/esm/components/or-select-v3/index.js

@@ -71,14 +71,15 @@ const SelectControl = [
 // Typography
 'typography-inherit'];
 const SelectSearchControl = [
+// Layout
+'grow',
 // Spacing
 '!mx-lg md:!-mx-sm+', '!my-sm md:!my-0'];
 const SelectDropdown = [
 // Overflow
 'overflow-y-auto',
 // Box
-'max-h-[172px]',
-// equals 5 items
+'max-h-[340px]',
 // Theme
 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark'];
 const SelectDropdownDefault = [
@@ -94,12 +95,8 @@ const SelectDropdownFlipped = [
 const SelectDropdownItem = [
 // Typography
 '!typography-body-2-regular',
-// Padding Override todo: check design
-'!pt-[6px] pb-[7px]',
 // Typography (selected)
-'selected:!typography-body-2-semibold',
-// Theme
-'!theme-foreground-default dark:!theme-foreground-default-dark'];
+'selected:!typography-body-2-semibold'];
 const SelectNoSearchResults = [
 // Layout
 'layout-row justify-center',
@@ -261,13 +258,20 @@ var script = defineComponent({
       modelValue,
       multiple
     } = toRefs(props);
+    // Styles
+    const rootStyles = computed(() => ['or-select-v3', ...Select, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
+    const controlStyles = computed(() => [...SelectControl]);
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
+    const dropdownStyles = computed(() => {
+      var _a;
+      return ['or-select-popover-v3', ...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
+    });
+    const dropdownItemStyles = computed(() => [...SelectDropdownItem]);
+    const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
+    const loaderStyles = computed(() => [...SelectLoader]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
     const proxyModelValue = useProxyModelValue(modelValue, context.emit);
-    const bottomSheetFullscreen = computed(() => {
-      var _a, _b;
-      return (_b = (_a = popover.value) === null || _a === void 0 ? void 0 : _a.bottomSheet) === null || _b === void 0 ? void 0 : _b.fullscreen;
-    });
     const isEmptyModelValue = computed(() => {
       return isEmpty(proxyModelValue.value);
     });
@@ -313,18 +317,6 @@ var script = defineComponent({
         '': props.options
       };
     });
-    // Styles
-    const rootStyles = computed(() => ['or-select-v3', ...Select, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
-    const controlStyles = computed(() => [...SelectControl]);
-    const searchControlStyles = computed(() => [...SelectSearchControl]);
-    const dropdownStyles = computed(() => {
-      var _a;
-      return ['or-select-popover-v3', ...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
-    });
-    const dropdownContainerStyles = computed(() => [isMobile.value ? 'layout-column' : 'contains', bottomSheetFullscreen.value ? 'overflow-y-auto' : 'overflow-hidden']);
-    const dropdownItemStyles = computed(() => [...SelectDropdownItem]);
-    const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
-    const loaderStyles = computed(() => [...SelectLoader]);
     // Methods
     function toggle() {
       if (!readonly.value && !props.disabled) {
@@ -409,7 +401,6 @@ var script = defineComponent({
       controlStyles,
       searchControlStyles,
       dropdownStyles,
-      dropdownContainerStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
       loaderStyles,
@@ -439,7 +430,7 @@ const _hoisted_2 = {
   class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
 };
 const _hoisted_3 = {
-  key: 0,
+  key: 1,
   class: /*#__PURE__*/normalizeClass(['px-sm+', 'py-xs'])
 };
 const _hoisted_4 = ["onClick"];
@@ -556,14 +547,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(_ctx.searchControlStyles),
         type: 'search',
         placeholder: _ctx.placeholder
-      }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder"])) : createCommentVNode("v-if", true), createElementVNode("div", {
-        class: normalizeClass(_ctx.dropdownContainerStyles)
-      }, [_ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(_component_OrLoader, {
+      }, null, 8 /* PROPS */, ["modelValue", "class", "placeholder"])) : createCommentVNode("v-if", true), _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(_component_OrLoader, {
         class: normalizeClass(_ctx.loaderStyles),
         variant: "text",
         text: _ctx.loadingText
       }, null, 8 /* PROPS */, ["class", "text"])])])) : _ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
-        key: 1
+        key: 2
       }, [_ctx.groupByFunction ? (openBlock(true), createElementBlock(Fragment, {
         key: 0
       }, renderList(_ctx.groupedOptions, (group, groupName) => {
@@ -621,7 +610,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         return openBlock(), createBlock(_component_OrMenuItem, {
           key: i,
           "tooltip-text": option.label,
-          class: normalizeClass(_ctx.dropdownItemStyles),
           selected: _ctx.proxyModelValue && _ctx.proxyModelValue.includes(option.value),
           disabled: option.disabled,
           onClick: withModifiers($event => !option.disabled && _ctx.toggleOption(option.value), ["stop"])
@@ -641,7 +629,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             _: 2 /* DYNAMIC */
           }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["model-value", "value", "disabled"])]),
           _: 2 /* DYNAMIC */
-        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["tooltip-text", "class", "selected", "disabled", "onClick"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["tooltip-text", "selected", "disabled", "onClick"]);
       }), 128 /* KEYED_FRAGMENT */)) : (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(_ctx.resolvedSearchOptions, (option, i) => {
@@ -663,11 +651,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           _: 2 /* DYNAMIC */
         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "selected", "tooltip-text", "disabled", "onClick"]);
       }), 128 /* KEYED_FRAGMENT */))], 64 /* STABLE_FRAGMENT */))], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", {
-        key: 2,
+        key: 3,
         class: normalizeClass(_ctx.noSearchResultsStyles)
       }, [renderSlot(_ctx.$slots, "noSearchResultsTemplate", {
         searchText: _ctx.searchText
-      }, () => [createTextVNode(" No results ")])], 2 /* CLASS */))], 2 /* CLASS */)]),
+      }, () => [createTextVNode(" No results ")])], 2 /* CLASS */))]),
       _: 3 /* FORWARDED */
     }, 8 /* PROPS */, ["class", "custom-styles", "trigger"])]),
     _: 3 /* FORWARDED */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "18.3.0-beta.4946.0",
+  "version": "18.3.0-beta.4948.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v3",
   "sideEffects": false,

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

@@ -29,8 +29,7 @@ export const AutocompleteDropdown: string[] = [
   'overflow-y-auto',
 
   // Box
-  'max-h-[172px]', // equals 5 items
-
+  'max-h-[340px]',
 
   // Theme
   'theme-background-default',
@@ -59,15 +58,6 @@ export const AutocompleteDropdownFlipped: string[] = [
 export const AutocompleteDropdownItem: string[] = [
   // Typography
   '!typography-body-2-regular',
-
-  // Padding Override todo: check design
-  '!pt-[6px] pb-[7px]',
-
-  // Typography (selected)
-  'selected:!typography-body-2-semibold',
-
-  // Theme
-  '!theme-foreground-default dark:!theme-foreground-default-dark',
 ];
 
 export const AutocompleteLoader: string[] = [

package/src/components/or-bottom-sheet-v3/OrBottomSheet.vue

@@ -69,8 +69,6 @@ export default defineComponent({
 
     'state',
 
-    'fullscreen',
-
     'open',
     'close',
     'toggle',

package/src/components/or-icon-button-v3/OrIconButton.vue

@@ -110,7 +110,7 @@ export default defineComponent({
         : {
           variant: IconVariant.Inherit,
           size: props.size,
-          ...props.icon,
+          ...(props.icon as object),
         };
     });
 

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

@@ -137,8 +137,6 @@ export default defineComponent({
     'open',
     'close',
     'toggle',
-
-    'bottomSheet',
   ],
 
   setup(props, context) {

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

@@ -121,111 +121,59 @@
             :placeholder="placeholder"
           />
         </template>
-        <div :class="dropdownContainerStyles">
-          <template v-if="loading">
-            <div :class="['px-sm+', 'py-xs']">
-              <slot name="loading">
-                <OrLoader
-                  :class="loaderStyles"
-                  variant="text"
-                  :text="loadingText"
-                />
-              </slot>
-            </div>
-          </template>
 
-          <template v-else-if="resolvedSearchOptions.length > 0">
-            <template v-if="groupByFunction">
-              <OrExpansionPanel
-                v-for="(group, groupName) in groupedOptions"
-                :key="groupName"
-                :label="groupName"
-              >
-                <template v-if="multiple">
-                  <OrMenuItem
-                    v-for="(option, i) in group"
-                    :key="i"
-                    :tooltip-text="option.label"
-                    :selected="proxyModelValue && proxyModelValue.includes(option.value)"
-                    :disabled="option.disabled"
-                  >
-                    <slot
-                      name="optionTemplate"
-                      :model="proxyModelValue"
-                      :option="option"
-                    >
-                      <OrCheckbox
-                        v-model="proxyModelValue"
-                        :value="option.value"
-                        :label="option.label"
-                        :label-variant="'menu-item'"
-                        :disabled="option.disabled"
-                      />
-                    </slot>
-                  </OrMenuItem>
-                </template>
-
-                <template v-else>
-                  <OrMenuItem
-                    v-for="(option, i) in group"
-                    :key="i"
-                    :class="dropdownItemStyles"
-                    :tooltip-text="option.label"
-                    :selected="proxyModelValue === option.value"
-                    :disabled="option.disabled"
-                    @click.stop="selectOption(option.value)"
-                  >
-                    <slot
-                      name="optionTemplate"
-                      :model="proxyModelValue"
-                      :option="option"
-                    >
-                      {{ option.label }}
-                    </slot>
-                  </OrMenuItem>
-                </template>
-              </OrExpansionPanel>
-            </template>
+        <template v-if="loading">
+          <div :class="['px-sm+', 'py-xs']">
+            <slot name="loading">
+              <OrLoader
+                :class="loaderStyles"
+                variant="text"
+                :text="loadingText"
+              />
+            </slot>
+          </div>
+        </template>
 
-            <template v-else>
+        <template v-else-if="resolvedSearchOptions.length > 0">
+          <template v-if="groupByFunction">
+            <OrExpansionPanel
+              v-for="(group, groupName) in groupedOptions"
+              :key="groupName"
+              :label="groupName"
+            >
               <template v-if="multiple">
                 <OrMenuItem
-                  v-for="(option, i) in resolvedSearchOptions"
+                  v-for="(option, i) in group"
                   :key="i"
                   :tooltip-text="option.label"
-                  :class="dropdownItemStyles"
                   :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                   :disabled="option.disabled"
-                  @click.stop="!option.disabled && toggleOption(option.value)"
                 >
-                  <OrCheckbox
-                    :model-value="proxyModelValue"
-                    :value="option.value"
-                    :label-variant="'menu-item'"
-                    :disabled="option.disabled"
+                  <slot
+                    name="optionTemplate"
+                    :model="proxyModelValue"
+                    :option="option"
                   >
-                    <div @click="!option.disabled && toggleOption(option.value)">
-                      <slot
-                        name="optionTemplate"
-                        :model="proxyModelValue"
-                        :option="option"
-                      >
-                        {{ option.label }}
-                      </slot>
-                    </div>
-                  </OrCheckbox>
+                    <OrCheckbox
+                      v-model="proxyModelValue"
+                      :value="option.value"
+                      :label="option.label"
+                      :label-variant="'menu-item'"
+                      :disabled="option.disabled"
+                    />
+                  </slot>
                 </OrMenuItem>
               </template>
 
               <template v-else>
                 <OrMenuItem
-                  v-for="(option, i) in resolvedSearchOptions"
+                  v-for="(option, i) in group"
                   :key="i"
                   :class="dropdownItemStyles"
-                  :selected="proxyModelValue === option.value"
                   :tooltip-text="option.label"
+                  :selected="proxyModelValue === option.value"
                   :disabled="option.disabled"
-                  @click.stop="selectOption(option.value); close()"
+                  @click.stop="selectOption(option.value)"
                 >
                   <slot
                     name="optionTemplate"
@@ -236,20 +184,70 @@
                   </slot>
                 </OrMenuItem>
               </template>
-            </template>
+            </OrExpansionPanel>
           </template>
 
           <template v-else>
-            <div :class="noSearchResultsStyles">
-              <slot
-                name="noSearchResultsTemplate"
-                :search-text="searchText"
+            <template v-if="multiple">
+              <OrMenuItem
+                v-for="(option, i) in resolvedSearchOptions"
+                :key="i"
+                :tooltip-text="option.label"
+                :selected="proxyModelValue && proxyModelValue.includes(option.value)"
+                :disabled="option.disabled"
+                @click.stop="!option.disabled && toggleOption(option.value)"
               >
-                No results
-              </slot>
-            </div>
+                <OrCheckbox
+                  :model-value="proxyModelValue"
+                  :value="option.value"
+                  :label-variant="'menu-item'"
+                  :disabled="option.disabled"
+                >
+                  <div @click="!option.disabled && toggleOption(option.value)">
+                    <slot
+                      name="optionTemplate"
+                      :model="proxyModelValue"
+                      :option="option"
+                    >
+                      {{ option.label }}
+                    </slot>
+                  </div>
+                </OrCheckbox>
+              </OrMenuItem>
+            </template>
+
+            <template v-else>
+              <OrMenuItem
+                v-for="(option, i) in resolvedSearchOptions"
+                :key="i"
+                :class="dropdownItemStyles"
+                :selected="proxyModelValue === option.value"
+                :tooltip-text="option.label"
+                :disabled="option.disabled"
+                @click.stop="selectOption(option.value); close()"
+              >
+                <slot
+                  name="optionTemplate"
+                  :model="proxyModelValue"
+                  :option="option"
+                >
+                  {{ option.label }}
+                </slot>
+              </OrMenuItem>
+            </template>
           </template>
-        </div>
+        </template>
+
+        <template v-else>
+          <div :class="noSearchResultsStyles">
+            <slot
+              name="noSearchResultsTemplate"
+              :search-text="searchText"
+            >
+              No results
+            </slot>
+          </div>
+        </template>
       </OrPopover>
     </OrInputBox>
 
@@ -472,22 +470,50 @@ export default defineComponent({
     const searchControl = ref<HTMLElement>();
 
     const popover = ref<InstanceType<typeof OrPopover>>();
-
     const popoverRoot = computed(() => popover.value?.root);
     const popoverState = computed(() => popover.value?.state);
 
     // Props
     const { enableClear, enableSearch, modelValue, multiple } = toRefs(props);
 
+    // Styles
+    const rootStyles = computed(() => [
+      'or-select-v3',
+      ...Styles.Select,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
+    ]);
+
+    const controlStyles = computed(() => [
+      ...Styles.SelectControl,
+    ]);
+
+    const searchControlStyles = computed(() => [
+      ...Styles.SelectSearchControl,
+    ]);
+
+    const dropdownStyles = computed(() => [
+      'or-select-popover-v3',
+      ...Styles.SelectDropdown,
+      ...popover.value?.isFlipped ? Styles.SelectDropdownFlipped : Styles.SelectDropdownDefault,
+    ]);
+
+    const dropdownItemStyles = computed(() => [
+      ...Styles.SelectDropdownItem,
+    ]);
+
+    const noSearchResultsStyles = computed(() => [
+      ...Styles.SelectNoSearchResults,
+    ]);
+
+    const loaderStyles = computed(() => [
+      ...Styles.SelectLoader,
+    ]);
+
     // State
     const controlId = ref(context.attrs.id as string ?? currentInstance.uid.toString());
 
     const proxyModelValue = useProxyModelValue(modelValue, context.emit);
 
-    const bottomSheetFullscreen = computed(() => {
-      return popover.value?.bottomSheet?.fullscreen;
-    });
-
     const isEmptyModelValue = computed(() => {
       return isEmpty(proxyModelValue.value);
     });
@@ -549,44 +575,6 @@ export default defineComponent({
       };
     });
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-select-v3',
-      ...Styles.Select,
-      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
-    ]);
-
-    const controlStyles = computed(() => [
-      ...Styles.SelectControl,
-    ]);
-
-    const searchControlStyles = computed(() => [
-      ...Styles.SelectSearchControl,
-    ]);
-
-    const dropdownStyles = computed(() => [
-      'or-select-popover-v3',
-      ...Styles.SelectDropdown,
-      ...popover.value?.isFlipped ? Styles.SelectDropdownFlipped : Styles.SelectDropdownDefault,
-    ]);
-
-    const dropdownContainerStyles = computed(() => [
-      isMobile.value ? 'layout-column' : 'contains',
-      bottomSheetFullscreen.value ? 'overflow-y-auto' : 'overflow-hidden',
-    ]);
-
-    const dropdownItemStyles = computed(() => [
-      ...Styles.SelectDropdownItem,
-    ]);
-
-    const noSearchResultsStyles = computed(() => [
-      ...Styles.SelectNoSearchResults,
-    ]);
-
-    const loaderStyles = computed(() => [
-      ...Styles.SelectLoader,
-    ]);
-
     // Methods
     function toggle(): void {
       if (!readonly.value && !props.disabled) {
@@ -688,7 +676,6 @@ export default defineComponent({
       controlStyles,
       searchControlStyles,
       dropdownStyles,
-      dropdownContainerStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
       loaderStyles,

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

@@ -25,6 +25,9 @@ export const SelectControl: string[] = [
 ];
 
 export const SelectSearchControl: string[] = [
+  // Layout
+  'grow',
+
   // Spacing
   '!mx-lg md:!-mx-sm+',
   '!my-sm md:!my-0',
@@ -35,7 +38,7 @@ export const SelectDropdown: string[] = [
   'overflow-y-auto',
 
   // Box
-  'max-h-[172px]', // equals 5 items
+  'max-h-[340px]',
 
   // Theme
   'theme-background-default',
@@ -65,14 +68,8 @@ export const SelectDropdownItem: string[] = [
   // Typography
   '!typography-body-2-regular',
 
-  // Padding Override todo: check design
-  '!pt-[6px] pb-[7px]',
-
   // Typography (selected)
   'selected:!typography-body-2-semibold',
-
-  // Theme
-  '!theme-foreground-default dark:!theme-foreground-default-dark',
 ];
 
 export const SelectNoSearchResults: string[] = [