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

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

@@ -1,6 +1,6 @@
-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';
+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';
 
 var baseGetTag = _baseGetTag,
   getPrototype = _getPrototype,

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

@@ -61,7 +61,8 @@ const AutocompleteDropdown = [
 // Overflow
 'overflow-y-auto',
 // Box
-'max-h-[340px]',
+'max-h-[172px]',
+// equals 5 items
 // Theme
 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark'];
 const AutocompleteDropdownDefault = [
@@ -76,7 +77,13 @@ const AutocompleteDropdownFlipped = [
 '!border-b-0'];
 const AutocompleteDropdownItem = [
 // Typography
-'!typography-body-2-regular'];
+'!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'];
 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', 'open', 'close', 'toggle'],
+  expose: ['root', 'state', 'fullscreen', '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'],
+  expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle', 'bottomSheet'],
   setup(props, context) {
     // Refs
     const root = ref();

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

@@ -103,6 +103,7 @@ 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,15 +71,14 @@ 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-[340px]',
+'max-h-[172px]',
+// equals 5 items
 // Theme
 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark'];
 const SelectDropdownDefault = [
@@ -95,8 +94,12 @@ 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'];
+'selected:!typography-body-2-semibold',
+// Theme
+'!theme-foreground-default dark:!theme-foreground-default-dark'];
 const SelectNoSearchResults = [
 // Layout
 'layout-row justify-center',
@@ -258,20 +261,13 @@ 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);
     });
@@ -317,6 +313,18 @@ 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) {
@@ -401,6 +409,7 @@ var script = defineComponent({
       controlStyles,
       searchControlStyles,
       dropdownStyles,
+      dropdownContainerStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
       loaderStyles,
@@ -430,7 +439,7 @@ const _hoisted_2 = {
   class: /*#__PURE__*/normalizeClass(['layout-inline-row', 'gap-sm'])
 };
 const _hoisted_3 = {
-  key: 1,
+  key: 0,
   class: /*#__PURE__*/normalizeClass(['px-sm+', 'py-xs'])
 };
 const _hoisted_4 = ["onClick"];
@@ -547,12 +556,14 @@ 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), _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(_component_OrLoader, {
+      }, 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, {
         class: normalizeClass(_ctx.loaderStyles),
         variant: "text",
         text: _ctx.loadingText
       }, null, 8 /* PROPS */, ["class", "text"])])])) : _ctx.resolvedSearchOptions.length > 0 ? (openBlock(), createElementBlock(Fragment, {
-        key: 2
+        key: 1
       }, [_ctx.groupByFunction ? (openBlock(true), createElementBlock(Fragment, {
         key: 0
       }, renderList(_ctx.groupedOptions, (group, groupName) => {
@@ -610,6 +621,7 @@ 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"])
@@ -629,7 +641,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", "selected", "disabled", "onClick"]);
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["tooltip-text", "class", "selected", "disabled", "onClick"]);
       }), 128 /* KEYED_FRAGMENT */)) : (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(_ctx.resolvedSearchOptions, (option, i) => {
@@ -651,11 +663,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: 3,
+        key: 2,
         class: normalizeClass(_ctx.noSearchResultsStyles)
       }, [renderSlot(_ctx.$slots, "noSearchResultsTemplate", {
         searchText: _ctx.searchText
-      }, () => [createTextVNode(" No results ")])], 2 /* CLASS */))]),
+      }, () => [createTextVNode(" No results ")])], 2 /* CLASS */))], 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.4948.0",
+  "version": "18.3.0-beta.4950.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v3",
   "sideEffects": false,
@@ -33,7 +33,7 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^18.2.0",
+    "@onereach/styles": "^18.3.0-beta.4950.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",

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

@@ -29,7 +29,8 @@ export const AutocompleteDropdown: string[] = [
   'overflow-y-auto',
 
   // Box
-  'max-h-[340px]',
+  'max-h-[172px]', // equals 5 items
+
 
   // Theme
   'theme-background-default',
@@ -58,6 +59,15 @@ 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,6 +69,8 @@ export default defineComponent({
 
     'state',
 
+    'fullscreen',
+
     'open',
     'close',
     'toggle',

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

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

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

@@ -121,59 +121,111 @@
             :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-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-else-if="resolvedSearchOptions.length > 0">
-          <template v-if="groupByFunction">
-            <OrExpansionPanel
-              v-for="(group, groupName) in groupedOptions"
-              :key="groupName"
-              :label="groupName"
-            >
+            <template v-else>
               <template v-if="multiple">
                 <OrMenuItem
-                  v-for="(option, i) in group"
+                  v-for="(option, i) in resolvedSearchOptions"
                   :key="i"
                   :tooltip-text="option.label"
+                  :class="dropdownItemStyles"
                   :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                   :disabled="option.disabled"
+                  @click.stop="!option.disabled && toggleOption(option.value)"
                 >
-                  <slot
-                    name="optionTemplate"
-                    :model="proxyModelValue"
-                    :option="option"
+                  <OrCheckbox
+                    :model-value="proxyModelValue"
+                    :value="option.value"
+                    :label-variant="'menu-item'"
+                    :disabled="option.disabled"
                   >
-                    <OrCheckbox
-                      v-model="proxyModelValue"
-                      :value="option.value"
-                      :label="option.label"
-                      :label-variant="'menu-item'"
-                      :disabled="option.disabled"
-                    />
-                  </slot>
+                    <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 group"
+                  v-for="(option, i) in resolvedSearchOptions"
                   :key="i"
                   :class="dropdownItemStyles"
-                  :tooltip-text="option.label"
                   :selected="proxyModelValue === option.value"
+                  :tooltip-text="option.label"
                   :disabled="option.disabled"
-                  @click.stop="selectOption(option.value)"
+                  @click.stop="selectOption(option.value); close()"
                 >
                   <slot
                     name="optionTemplate"
@@ -184,70 +236,20 @@
                   </slot>
                 </OrMenuItem>
               </template>
-            </OrExpansionPanel>
+            </template>
           </template>
 
           <template v-else>
-            <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)"
+            <div :class="noSearchResultsStyles">
+              <slot
+                name="noSearchResultsTemplate"
+                :search-text="searchText"
               >
-                <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>
+                No results
+              </slot>
+            </div>
           </template>
-        </template>
-
-        <template v-else>
-          <div :class="noSearchResultsStyles">
-            <slot
-              name="noSearchResultsTemplate"
-              :search-text="searchText"
-            >
-              No results
-            </slot>
-          </div>
-        </template>
+        </div>
       </OrPopover>
     </OrInputBox>
 
@@ -470,50 +472,22 @@ 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);
     });
@@ -575,6 +549,44 @@ 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) {
@@ -676,6 +688,7 @@ export default defineComponent({
       controlStyles,
       searchControlStyles,
       dropdownStyles,
+      dropdownContainerStyles,
       dropdownItemStyles,
       noSearchResultsStyles,
       loaderStyles,

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

@@ -25,9 +25,6 @@ export const SelectControl: string[] = [
 ];
 
 export const SelectSearchControl: string[] = [
-  // Layout
-  'grow',
-
   // Spacing
   '!mx-lg md:!-mx-sm+',
   '!my-sm md:!my-0',
@@ -38,7 +35,7 @@ export const SelectDropdown: string[] = [
   'overflow-y-auto',
 
   // Box
-  'max-h-[340px]',
+  'max-h-[172px]', // equals 5 items
 
   // Theme
   'theme-background-default',
@@ -68,8 +65,14 @@ 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[] = [