@onereach/ui-components 14.1.2-beta.4685.0 → 14.1.2-beta.4693.0

package/dist/esm/v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrAutocompleteV3 } from './OrAutocomplete-eaceeabe.js';
+export { s as OrAutocompleteV3 } from './OrAutocomplete-74872096.js';
 export { O as OR_AVATAR_SIZE, s as OrAvatar } from './OrAvatar-dbec7020.js';
 export { a as AvatarColor, A as AvatarSize, s as OrAvatarV3 } from './OrAvatar-cab88a78.js';
 export { B as BottomSheetVariant, s as OrBottomSheetV3 } from './OrBottomSheet-a7a06f7f.js';
@@ -32,8 +32,8 @@ export { s as OrCombinedInputV3 } from './OrCombinedInput-75b556fa.js';
 export { s as OrConfirm } from './OrConfirm-05a78778.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-beae75d5.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-d8c71891.js';
-export { s as OrDataGridV3 } from './OrDataGrid-fb5d3e5a.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-4e3a8b34.js';
+export { s as OrDataGridV3 } from './OrDataGrid-43761fbf.js';
+export { D as DataGridVariant } from './OrDataGridToolbar-9c8e1f57.js';
 export { s as OrDateFormatV3 } from './OrDateFormat-616cd68b.js';
 export { s as OrDatePickerV3 } from './OrDatePicker-cbd5183d.js';
 export { s as OrDateRangePickerV3 } from './OrDateRangePicker-7546b7be.js';
@@ -54,9 +54,6 @@ export { s as OrErrorTagV3 } from './OrErrorTag-94f074a2.js';
 export { s as OrErrorV3 } from './OrError-331220bc.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-84445327.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-f949bf4f.js';
-export { s as OrFilterPopoverV3 } from './OrFilterPopover-2832fbc3.js';
-export { s as OrFilterTriggerV3 } from './OrFilterTrigger-f0c8aabf.js';
-export { s as OrFilterV3 } from './OrFilter-f35ada6b.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-00617713.js';
 export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-893719a1.js';
 export { s as OrHint } from './OrHint-8822005b.js';
@@ -109,7 +106,7 @@ export { s as OrSearch } from './OrSearch-4192737e.js';
 export { s as OrSearchV3 } from './OrSearch-b7a558ef.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-5dd163fb.js';
 export { s as OrSelect } from './OrSelect-2c033afb.js';
-export { s as OrSelectV3 } from './OrSelect-a4059000.js';
+export { s as OrSelectV3 } from './OrSelect-ceddd24e.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from './props-339b3fd2.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -132,9 +129,9 @@ export { s as OrTabV3 } from './OrTab-5f903429.js';
 export { s as OrTabs } from './OrTabs-bc8c8be5.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-66729e19.js';
 export { s as OrTag } from './OrTag-68b92040.js';
-export { s as OrTagInputV3 } from './OrTagInput-64951a91.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-f048f982.js';
-export { s as OrTagsV3, T as TagsOverflow } from './OrTags-7ddae1b5.js';
+export { s as OrTagInputV3 } from './OrTagInput-8e53511e.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-81a88a91.js';
+export { s as OrTagsV3, T as TagsOverflow } from './OrTags-89785e44.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-ea114c19.js';
@@ -230,7 +227,7 @@ import '@tiptap/extension-horizontal-rule';
 import '@tiptap/extension-bold';
 import '@tiptap/extension-code-block';
 import 'lodash/keyBy';
-import './OrSelectMultipleControl-f035f0a6.js';
+import './OrSelectMultipleControl-7d4170c2.js';
 import './OrSelectControlInput-e0116b29.js';
 import './OrSelectPlaceholder-81502228.js';
 import './OrSelectSingleControl-70644f38.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "14.1.2-beta.4685.0",
+  "version": "14.1.2-beta.4693.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

package/src/components/index.ts

@@ -39,9 +39,6 @@ export * from './or-error-tag-v3';
 export * from './or-error-v3';
 export * from './or-expansion-panel-v3';
 export * from './or-fab-v3';
-export * from './or-filter-popover-v3';
-export * from './or-filter-trigger-v3';
-export * from './or-filter-v3';
 export * from './or-floating';
 export * from './or-form-group-v3';
 export * from './or-hint';

package/src/components/or-data-grid-v3/OrDataGrid.vue

@@ -33,6 +33,7 @@
 
     <OrDataGridTable
       :class="['grow', { 'grid-rows-[auto_1fr]': items.length === 0 }]"
+      :style="tableInlineStyles"
       :columns="columns"
       :features="features"
     >
@@ -43,11 +44,13 @@
           <template v-if="features.selecting">
             <OrDataGridTableHeaderCell
               :column="{ stickiness: 'start' }"
+              @update:scroll-offset="updateScrollOffset"
+              @remove:scroll-offset="removeScrollOffset"
             >
               <OrCheckbox
                 v-model="selectingIndicator"
-                :class="{ 'invisible': items.length === 0 || loading }"
                 :indeterminate="!selectingIndicator && selectingModel.length > 0"
+                :disabled="items.length === 0 || loading"
               />
             </OrDataGridTableHeaderCell>
           </template>
@@ -58,6 +61,8 @@
             v-model="sortingModel"
             :column="column"
             :features="features"
+            @update:scroll-offset="updateScrollOffset"
+            @remove:scroll-offset="removeScrollOffset"
           >
             {{ column.label }}
           </OrDataGridTableHeaderCell>
@@ -118,6 +123,7 @@
               :column="column"
               :features="features"
               @update:model-value="$emit('update:item', item)"
+              @focusin="scrollTo($event)"
             >
               <slot
                 :name="column.name"
@@ -293,6 +299,11 @@ export default defineComponent({
       ...Styles.DataGrid,
     ]);
 
+    const tableInlineStyles = computed(() => ({
+      scrollPaddingInlineStart: `${[...scrollOffsetStart.value.values()].reduce((accumulator, value) => accumulator + value, 0)}px`,
+      scrollPaddingInlineEnd: `${[...scrollOffsetEnd.value.values()].reduce((accumulator, value) => accumulator + value, 0)}px`,
+    }));
+
     // State
     const selectingIndicator = computed({
       get: () => {
@@ -395,10 +406,55 @@ export default defineComponent({
       },
     });
 
+    const scrollOffsetStart = ref(new Map<HTMLElement, number>());
+    const scrollOffsetEnd = ref(new Map<HTMLElement, number>());
+
+    // Methods
+    function updateScrollOffset(header: HTMLElement, offset: number, column: DataGridColumn): void {
+      switch (column.stickiness) {
+        case 'start':
+          scrollOffsetStart.value.set(header, offset);
+          scrollOffsetStart.value = new Map(scrollOffsetStart.value);
+
+          scrollOffsetEnd.value.delete(header);
+          scrollOffsetEnd.value = new Map(scrollOffsetEnd.value);
+
+          break;
+
+        case 'end':
+          scrollOffsetStart.value.delete(header);
+          scrollOffsetStart.value = new Map(scrollOffsetStart.value);
+
+          scrollOffsetEnd.value.set(header, offset);
+          scrollOffsetEnd.value = new Map(scrollOffsetEnd.value);
+
+          break;
+
+        default:
+          removeScrollOffset(header);
+          break;
+      }
+    }
+
+    function removeScrollOffset(header: HTMLElement): void {
+      scrollOffsetStart.value.delete(header);
+      scrollOffsetStart.value = new Map(scrollOffsetStart.value);
+
+      scrollOffsetEnd.value.delete(header);
+      scrollOffsetEnd.value = new Map(scrollOffsetEnd.value);
+    }
+
+    // Helpers
+    function scrollTo(event: FocusEvent): void {
+      (event.currentTarget as HTMLElement).scrollIntoView();
+    }
+
     return {
       root,
       rootStyles,
 
+      tableInlineStyles,
+
       selectingIndicator,
 
       selectingModel,
@@ -406,6 +462,11 @@ export default defineComponent({
       searchingModel,
       sortingModel,
       pagingModel,
+
+      updateScrollOffset,
+      removeScrollOffset,
+
+      scrollTo,
     };
   },
 });

package/src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue

@@ -16,7 +16,8 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
+import { useElementSize } from '@vueuse/core';
+import { PropType, computed, defineComponent, ref, watch } from 'vue-demi';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
 import { DataGridColumn, DataGridFeatures, DataGridModelValue } from '../../types';
 import * as Styles from './styles';
@@ -52,6 +53,9 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
+
+    'update:scrollOffset',
+    'remove:scrollOffset',
   ],
 
   expose: [
@@ -139,6 +143,26 @@ export default defineComponent({
       }
     }
 
+    // Effects
+    const { width } = useElementSize(root, undefined, { box: 'border-box' });
+
+    watch([
+      root,
+      width,
+      () => props.column?.stickiness,
+    ], ([
+      nextRoot,
+      width,
+    ], [
+      prevRoot,
+    ]) => {
+      if (prevRoot && prevRoot !== nextRoot) {
+        context.emit('remove:scrollOffset', prevRoot);
+      }
+
+      context.emit('update:scrollOffset', nextRoot, width, props.column);
+    });
+
     return {
       root,
       rootStyles,

package/src/components/or-tag-v3/OrTag.vue

@@ -13,7 +13,7 @@
     </div>
 
     <template v-if="variant === 'reset'">
-      <div :class="['layout-inline-row', '-m-[4px] md:-m-[2px]']">
+      <div :class="['layout-inline-row', 'm-[-4px] md:m-[-2px]']">
         <OrIconButton
           :icon="'close'"
           :color="custom ? 'inherit' : color"

package/dist/bundled/v2/components/OrFilterPopoverV3/OrFilterPopover.js

@@ -1,219 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { FilterPopover, FilterPopoverHeader, FilterPopoverFooter } from './styles.js';
-import __vue_component__$1 from '../OrButtonV3/OrButton.js';
-import __vue_component__$2 from '../OrModalV3/OrModal.js';
-import __vue_component__$3 from '../OrPopoverV3/OrPopover.js';
-import { PopoverPlacement } from '../OrPopoverV3/props.js';
-import { usePopoverState } from '../../hooks/usePopoverState.js';
-import useResponsive from '../../hooks/useResponsive/useResponsive.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-
-var script = defineComponent({
-  name: 'OrFilterPopover',
-  components: {
-    OrButton: __vue_component__$1,
-    OrModal: __vue_component__$2,
-    OrPopover: __vue_component__$3
-  },
-  inheritAttrs: false,
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: 'Filters'
-    },
-    applyLabel: {
-      type: String,
-      default: 'View Results'
-    },
-    resetLabel: {
-      type: String,
-      default: 'Reset All'
-    },
-    trigger: {
-      type: Object,
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: () => PopoverPlacement.BottomStart
-    },
-    fallbackPlacement: {
-      type: String,
-      default: undefined
-    },
-    offset: {
-      type: [Number, Object, Function],
-      default: 8
-    }
-  },
-  emits: ['update:state', 'open', 'close', 'apply', 'reset'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
-  setup(props, context) {
-    // Refs & Styles
-    const root = ref();
-    const rootStyles = computed(() => ['or-filter-popover-v3', ...FilterPopover]);
-    const headerStyles = computed(() => [...FilterPopoverHeader]);
-    const footerStyles = computed(() => [...FilterPopoverFooter]);
-    // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context.emit);
-    // Methods
-    function apply() {
-      context.emit('apply');
-    }
-    function reset() {
-      context.emit('reset');
-    }
-    // Helpers
-    const {
-      isDesktop,
-      isMobile
-    } = useResponsive();
-    return {
-      root,
-      rootStyles,
-      headerStyles,
-      footerStyles,
-      state,
-      open,
-      close,
-      toggle,
-      apply,
-      reset,
-      isDesktop,
-      isMobile
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    class: ['contents']
-  }, [_vm.isDesktop ? [_c('OrPopover', {
-    attrs: {
-      "is-open": _vm.state === 'open',
-      "variant": 'popover',
-      "trigger": _vm.trigger,
-      "placement": _vm.placement,
-      "fallback-placement": _vm.fallbackPlacement,
-      "offset": _vm.offset
-    },
-    on: {
-      "update:state": function ($event) {
-        $event === 'open' ? _vm.open() : _vm.close();
-      }
-    }
-  }, [_c('div', _vm._b({
-    ref: 'root',
-    class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_c('div', {
-    class: _vm.headerStyles
-  }, [_c('div', {
-    class: ['grow', 'truncate']
-  }, [_vm._v("\n            " + _vm._s(_vm.title) + "\n          ")]), _vm._v(" "), _c('OrButton', {
-    attrs: {
-      "variant": 'link'
-    },
-    on: {
-      "click": function ($event) {
-        return _vm.reset();
-      }
-    }
-  }, [_vm._v("\n            " + _vm._s(_vm.resetLabel) + "\n          ")])], 1), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t('actions', null, null, {
-    apply: _vm.apply,
-    reset: _vm.reset,
-    isDesktop: _vm.isDesktop,
-    isMobile: _vm.isMobile
-  })], 2)])] : _vm._e(), _vm._v(" "), _vm.isMobile ? [_c('OrModal', {
-    attrs: {
-      "is-open": _vm.state === 'open'
-    },
-    on: {
-      "update:state": function ($event) {
-        $event === 'open' ? _vm.open() : _vm.close();
-      }
-    },
-    scopedSlots: _vm._u([{
-      key: "header",
-      fn: function () {
-        return [_vm._v("\n        " + _vm._s(_vm.title) + "\n      ")];
-      },
-      proxy: true
-    }, {
-      key: "footer",
-      fn: function () {
-        return [_vm._t('actions', function () {
-          return [_c('div', {
-            class: _vm.footerStyles
-          }, [_c('OrButton', {
-            class: ['grow'],
-            attrs: {
-              "variant": 'contained'
-            },
-            on: {
-              "click": function ($event) {
-                return _vm.apply();
-              }
-            }
-          }, [_vm._v("\n              " + _vm._s(_vm.applyLabel) + "\n            ")]), _vm._v(" "), _c('OrButton', {
-            class: ['grow'],
-            attrs: {
-              "variant": 'outlined'
-            },
-            on: {
-              "click": function ($event) {
-                return _vm.reset();
-              }
-            }
-          }, [_vm._v("\n              " + _vm._s(_vm.resetLabel) + "\n            ")])], 1)];
-        }, null, {
-          apply: _vm.apply,
-          reset: _vm.reset,
-          isDesktop: _vm.isDesktop,
-          isMobile: _vm.isMobile
-        })];
-      },
-      proxy: true
-    }], null, true)
-  }, [_vm._v(" "), _c('div', _vm._b({
-    ref: 'root',
-    class: _vm.rootStyles
-  }, 'div', _vm.$attrs, false), [_vm._t("default")], 2)])] : _vm._e()], 2);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { __vue_component__ as default };

package/dist/bundled/v2/components/OrFilterPopoverV3/OrFilterPopover.vue.d.ts

@@ -1,99 +0,0 @@
-import { ReferenceElement } from '@floating-ui/dom';
-import { PropType } from 'vue-demi';
-import { PopoverOffset, PopoverPlacement } from '../or-popover-v3';
-declare const _default: import("vue-demi").DefineComponent<{
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    applyLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    resetLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    trigger: {
-        type: PropType<ReferenceElement>;
-        default: undefined;
-    };
-    placement: {
-        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
-        default: () => PopoverPlacement;
-    };
-    fallbackPlacement: {
-        type: PropType<"none" | "start" | "end" | undefined>;
-        default: undefined;
-    };
-    offset: {
-        type: PropType<PopoverOffset>;
-        default: number;
-    };
-}, {
-    root: import("vue-demi").Ref<HTMLElement | undefined>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-    headerStyles: import("vue-demi").ComputedRef<string[]>;
-    footerStyles: import("vue-demi").ComputedRef<string[]>;
-    state: Readonly<import("vue-demi").Ref<"open" | "closed">>;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    apply: () => void;
-    reset: () => void;
-    isDesktop: import("vue-demi").ComputedRef<boolean>;
-    isMobile: import("vue-demi").ComputedRef<boolean>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:state" | "open" | "close" | "apply" | "reset")[], "update:state" | "open" | "close" | "apply" | "reset", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    applyLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    resetLabel: {
-        type: StringConstructor;
-        default: string;
-    };
-    trigger: {
-        type: PropType<ReferenceElement>;
-        default: undefined;
-    };
-    placement: {
-        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end">;
-        default: () => PopoverPlacement;
-    };
-    fallbackPlacement: {
-        type: PropType<"none" | "start" | "end" | undefined>;
-        default: undefined;
-    };
-    offset: {
-        type: PropType<PopoverOffset>;
-        default: number;
-    };
-}>> & {
-    "onUpdate:state"?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
-    onApply?: ((...args: any[]) => any) | undefined;
-    onReset?: ((...args: any[]) => any) | undefined;
-}, {
-    isOpen: boolean;
-    title: string;
-    applyLabel: string;
-    resetLabel: string;
-    trigger: ReferenceElement;
-    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-    fallbackPlacement: "none" | "start" | "end" | undefined;
-    offset: PopoverOffset;
-}>;
-export default _default;

package/dist/bundled/v2/components/OrFilterPopoverV3/index.d.ts

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

package/dist/bundled/v2/components/OrFilterPopoverV3/index.js

@@ -1 +0,0 @@
-export { default as OrFilterPopoverV3 } from './OrFilterPopover.js';

package/dist/bundled/v2/components/OrFilterPopoverV3/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const FilterPopover: string[];
-export declare const FilterPopoverHeader: string[];
-export declare const FilterPopoverFooter: string[];

package/dist/bundled/v2/components/OrFilterPopoverV3/styles.js

@@ -1,21 +0,0 @@
-const FilterPopover = [
-// Layout
-'layout-column',
-// Box
-'w-auto md:w-[352px]',
-// Spacing
-'px-0 md:px-md', 'py-0 md:py-md', 'gap-md'];
-const FilterPopoverHeader = [
-// Layout
-'layout-row',
-// Spacing
-'gap-md',
-// Typography
-'typography-headline-3'];
-const FilterPopoverFooter = [
-// Layout
-'layout-row-reverse',
-// Spacing
-'gap-md'];
-
-export { FilterPopover, FilterPopoverFooter, FilterPopoverHeader };