@onereach/ui-components 12.0.1 → 13.0.0

package/dist/esm/v3/components/or-time-picker-v3/OrTimePicker.vue.d.ts

@@ -1,7 +1,7 @@
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType } from 'vue-demi';
 import { FilterFunction, FormatFunction } from '../../types';
 import { DateTimePickerModelValue } from '../or-date-time-picker-v3';
-import { InputBoxSize } from '../or-input-box-v3';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<DateTimePickerModelValue>;
@@ -23,9 +23,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<FilterFunction<Date>>;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
+    };
+    anchor: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -51,10 +59,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -219,9 +223,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<FilterFunction<Date>>;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
+    };
+    anchor: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -247,10 +259,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
@@ -259,11 +267,13 @@ declare const _default: import("vue-demi").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
+    anchor: ReferenceElement;
     modelValue: DateTimePickerModelValue;
     format: "auto" | "h12" | "h23" | FormatFunction<DateTimePickerModelValue>;
     locale: string;
     hoursFilter: FilterFunction<Date>;
     minutesFilter: FilterFunction<Date>;
+    variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
     label: string;
     hint: string;
@@ -271,6 +281,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     required: boolean;
     readonly: boolean;
     disabled: boolean;
-    disableDefaultStyles: boolean;
 }>;
 export default _default;

package/dist/esm/v3/components/or-time-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-fee7441e.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-d17e6f65.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '../../TimeFormat-a7f5565b.js';
@@ -11,7 +11,7 @@ import '@vueuse/core';
 import '../../useProxyModelValue-e18f251e.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrDateTimePicker-d6d82348.js';
+import '../../OrDateTimePicker-4e715d5f.js';
 import '../../OrError-331220bc.js';
 import 'vue';
 import '../../OrHint-262c8217.js';
@@ -30,7 +30,7 @@ import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-dc76b423.js';
 import '../../isPrevented-b1764210.js';
 import '../../isAncestor-2973d4f4.js';
-import '../../OrInputBox-de16d7ec.js';
+import '../../OrInputBox-2f33498c.js';
 import '../../OrLabel-4abbce6e.js';
 import '../../OrDateTimePickerTimeSelect-c69e90b4.js';
 import '../../useTimeMask-a1c090c1.js';

package/dist/esm/v3/components/or-time-range-picker-v3/OrTimeRangePicker.vue.d.ts

@@ -1,7 +1,7 @@
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType } from 'vue-demi';
 import { FormatFunction } from '../../types';
 import { DateTimePickerModelValue } from '../or-date-time-picker-v3';
-import { InputBoxSize } from '../or-input-box-v3';
 import { TimeRangePickerModelValue } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
@@ -16,9 +16,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
+    };
+    anchor: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -44,10 +52,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -458,9 +462,17 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    variant: {
+        type: PropType<"styled" | "unstyled" | "embedded">;
+        default: undefined;
+    };
     size: {
         type: PropType<"m" | "s">;
-        default: () => InputBoxSize;
+        default: undefined;
+    };
+    anchor: {
+        type: PropType<ReferenceElement>;
+        default: undefined;
     };
     label: {
         type: StringConstructor;
@@ -486,10 +498,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableDefaultStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
@@ -498,9 +506,11 @@ declare const _default: import("vue-demi").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
+    anchor: ReferenceElement;
     modelValue: TimeRangePickerModelValue;
     format: "auto" | "h12" | "h23" | FormatFunction<DateTimePickerModelValue>;
     locale: string;
+    variant: "styled" | "unstyled" | "embedded";
     size: "m" | "s";
     label: string;
     hint: string;
@@ -508,6 +518,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     required: boolean;
     readonly: boolean;
     disabled: boolean;
-    disableDefaultStyles: boolean;
 }>;
 export default _default;

package/dist/esm/v3/components/or-time-range-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-7a30396e.js';
+export { s as OrTimeRangePickerV3 } from '../../OrTimeRangePicker-306cd018.js';
 import 'vue-demi';
 import '../../dropdown-open-06d651cf.js';
 import '../../TimeFormat-a7f5565b.js';
@@ -12,7 +12,7 @@ import '../../useProxyModelValue-e18f251e.js';
 import '../../useResponsive-491da8c6.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import '../../OrDateTimePicker-d6d82348.js';
+import '../../OrDateTimePicker-4e715d5f.js';
 import '../../OrError-331220bc.js';
 import 'vue';
 import '../../OrHint-262c8217.js';
@@ -30,7 +30,7 @@ import '../../OrTeleport.vue3-8099178c.js';
 import '../../useTheme-dc76b423.js';
 import '../../isPrevented-b1764210.js';
 import '../../isAncestor-2973d4f4.js';
-import '../../OrInputBox-de16d7ec.js';
+import '../../OrInputBox-2f33498c.js';
 import '../../OrLabel-4abbce6e.js';
 import '../../OrDateTimePickerTimeSelect-c69e90b4.js';
 import '../../useTimeMask-a1c090c1.js';

package/dist/esm/v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrAutocompleteV3 } from './OrAutocomplete-58099d19.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';
@@ -9,7 +9,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-31bcb511.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-6559e6fa.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-9b6f0d65.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-cd534916.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-c2ef331b.js';
 export { s as OrCheckbox } from './OrCheckbox-9d30d1d2.js';
 export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-3864819c.js';
@@ -23,23 +23,23 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-fd47c296.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-73a17bd1.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-fdd7efab.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-28027e9a.js';
-export { s as OrCombinedInputV3 } from './OrCombinedInput-76eb75ad.js';
+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-c6485f6a.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-0a733752.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-993e4fb0.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-283c01ec.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-25b23c5d.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-aa9d7204.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-914bfe51.js';
+export { s as OrDataGridV3 } from './OrDataGrid-3bcf9c6f.js';
+export { D as DataGridVariant } from './OrDataGridToolbar-7435af23.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';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-490d5e32.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-5bae57ec.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-d6d82348.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-4e715d5f.js';
 export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-c69e90b4.js';
 export { f as formatDate, a as formatTime } from './formatTime-3f37a00f.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from './getCurrentDate-e5a478c3.js';
@@ -66,8 +66,8 @@ export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-adda
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-5c305893.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-59aaf274.js';
 export { s as OrInput } from './OrInput-fb39bee1.js';
-export { I as InputBoxDirection, b as InputBoxSize, a as InputBoxVariant, s as OrInputBoxV3 } from './OrInputBox-de16d7ec.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-74cd099c.js';
+export { I as InputBoxDirection, b as InputBoxSize, a as InputBoxVariant, s as OrInputBoxV3 } from './OrInputBox-2f33498c.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-6b60bf4a.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
 export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-4abbce6e.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-c83a51b2.js';
@@ -100,13 +100,13 @@ export { s as OrRadioV3 } from './OrRadio-8677bac3.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-2bcd90ef.js';
 export { s as OrRatingV3, R as RatingVariant } from './OrRating-7c2f8e4d.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-1d0c171b.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-4bf14722.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-f1d7597b.js';
 export { s as OrRichTooltipV3, R as RichTooltipBehavior } from './OrRichTooltip-160af591.js';
 export { s as OrSearch } from './OrSearch-4192737e.js';
-export { s as OrSearchV3 } from './OrSearch-bb53ad38.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-4aeb0bf0.js';
+export { s as OrSelectV3 } from './OrSelect-d97029ba.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';
@@ -129,18 +129,18 @@ 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-c2cb0107.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';
 export { s as OrTextarea } from './OrTextarea-b16e1a72.js';
-export { s as OrTextareaV3 } from './OrTextarea-0c5133fe.js';
+export { s as OrTextareaV3 } from './OrTextarea-76c037a9.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-20cc3bac.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-724dc243.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-fee7441e.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-7a30396e.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-bdce02db.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-d17e6f65.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-306cd018.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-cea387eb.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-a1f907bc.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-0f27194b.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "12.0.1",
+  "version": "13.0.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -180,5 +180,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "55d46ba000d9d2e3697dc1b02ac842a3159bf089"
+  "gitHead": "9750c9a361aa23fc7f0fbf072aecd7526736eb7a"
 }

package/src/components/or-autocomplete-v3/OrAutocomplete.vue

@@ -25,13 +25,13 @@
         :ref="'tagInput'"
         v-model="model"
         :overflow="overflow"
+        :variant="variant"
         :placeholder="placeholder"
         :error="!!error"
         :loading="loading"
         :required="required"
         :readonly="readonly"
         :disabled="disabled"
-        :disable-default-styles="disableDefaultStyles"
         :enable-clear="enableClear"
         @input="onInput($event)"
       >
@@ -50,7 +50,7 @@
       <OrInputBox
         :ref="'inputBox'"
         :class="[popoverState === 'open' && (popover && popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]"
-        :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
+        :variant="variant"
         :size="size"
         :invalid="!!error"
         :readonly="readonly"
@@ -156,7 +156,7 @@ import { exclude, include, isNil, toArray } from '../../utils';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
@@ -207,9 +207,14 @@ export default defineComponent({
       default: () => TagsOverflow.Hidden,
     },
 
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
     },
 
     label: {
@@ -252,11 +257,6 @@ export default defineComponent({
       default: false,
     },
 
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
-
     enableClear: {
       type: Boolean,
       default: false,
@@ -304,6 +304,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-autocomplete-v3',
       ...Autocomplete,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const tagInput = ref<InstanceType<typeof OrTagInput>>();

package/src/components/or-combined-input-v3/OrCombinedInput.vue

@@ -21,12 +21,12 @@
 
     <div :class="controlGroup">
       <slot
+        :variant="variant"
         :size="size"
         :error="!!error"
         :required="required"
         :readonly="readonly"
         :disabled="disabled"
-        :disable-default-styles="disableDefaultStyles"
       />
     </div>
 
@@ -54,7 +54,7 @@
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
-import { InputBoxSize } from '../or-input-box-v3';
+import { InputBoxSize, InputBoxVariant } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { CombinedInput, CombinedInputControlGroup } from './styles';
 
@@ -68,9 +68,14 @@ export default defineComponent({
   },
 
   props: {
+    variant: {
+      type: String as PropType<`${InputBoxVariant}`>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<`${InputBoxSize}`>,
-      default: () => InputBoxSize.M,
+      default: undefined,
     },
 
     label: {
@@ -102,14 +107,9 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
   },
 
-  setup() {
+  setup(props) {
     // Refs
     const root = ref<HTMLElement>();
 
@@ -117,6 +117,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-combined-input-v3',
       ...CombinedInput,
+      ...props.variant === InputBoxVariant.Embedded ? ['grow'] : [],
     ]);
 
     const controlGroup = computed(() => [

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

@@ -71,7 +71,7 @@
           >
             <template v-if="features.selecting">
               <OrDataGridTableContentCell
-                :truncate="false"
+                :override="true"
               >
                 <OrSkeletonText />
               </OrDataGridTableContentCell>
@@ -82,7 +82,7 @@
               :key="column.name"
               :column="column"
               :features="features"
-              :truncate="false"
+              :override="true"
             >
               <OrSkeletonText />
             </OrDataGridTableContentCell>
@@ -97,7 +97,9 @@
             :selected="selectingModel.includes(item.id)"
           >
             <template v-if="features.selecting">
-              <OrDataGridTableContentCell>
+              <OrDataGridTableContentCell
+                :force-state="'none'"
+              >
                 <OrCheckbox
                   v-model="selectingModel"
                   :value="item.id"
@@ -108,8 +110,10 @@
             <OrDataGridTableContentCell
               v-for="column of columns"
               :key="column.name"
+              v-model="item[column.name]"
               :column="column"
               :features="features"
+              @update:model-value="$emit('update:item', item)"
             >
               <slot
                 :name="column.name"
@@ -190,7 +194,7 @@ import * as Styles from './styles';
 import { DataGridColumn, DataGridFeatures, DataGridItem, DataGridModelValue, DataGridVariant } from './types';
 
 // Vue 2 doesn't support generically typed components
-type T = DataModel<{ id: Id; [key: string]: unknown; }>;
+type T = DataModel<{ id: Id; [key: string]: any; }>;
 
 export default defineComponent({
   name: 'OrDataGrid',
@@ -255,6 +259,7 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
+    'update:item',
   ],
 
   expose: [

package/src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue

@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { PropType, computed, defineComponent, ref } from 'vue-demi';
-import { isArray } from '../../../../utils';
 import { DataGridColumn, DataGridFeatures } from '../../types';
 import * as Styles from './styles';
 
@@ -43,16 +42,10 @@ export default defineComponent({
     ]);
 
     const rootInlineStyles = computed(() => {
-      const gridTemplateColumns = props.columns.map((column) => {
-        if (isArray(column.width)) {
-          return `minmax(${column.width[0]}, ${column.width[1]})`;
-        }
-
-        return column.width ?? 'auto';
-      });
+      const gridTemplateColumns = props.columns.map((column) => column.width ?? 'auto');
 
       if (props.features.selecting) {
-        return { gridTemplateColumns: `auto ${gridTemplateColumns.join(' ')}` };
+        return { gridTemplateColumns: `0fr ${gridTemplateColumns.join(' ')}` };
       }
 
       return { gridTemplateColumns: gridTemplateColumns.join(' ') };

package/src/components/or-data-grid-v3/partials/or-data-grid-table/styles.ts

@@ -7,4 +7,11 @@ export const DataGridTable: string[] = [
 
   // Interactivity
   'interactivity-default',
+
+  // Spacing
+  '-mx-[calc(theme(outlineWidth.2))]',
+  '-my-0',
+
+  'px-[calc(theme(outlineWidth.2))]',
+  'py-0',
 ];