@onereach/ui-components 20.1.0 → 20.1.2

package/dist/esm/components/or-data-grid-v3/index.js

@@ -0,0 +1,1376 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, watch, createElementVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createVNode, renderList, createTextVNode, toDisplayString, mergeProps } from 'vue';
+import { OrCheckboxV3 as script$f } from '../or-checkbox-v3/index.js';
+import { OrDatePickerV3 as script$g } from '../or-date-picker-v3/index.js';
+import { OrDateTimePickerV3 as script$h } from '../or-date-time-picker-v3/index.js';
+import { OrInputV3 as script$i } from '../or-input-v3/index.js';
+import { OrRatingV3 as script$j } from '../or-rating-v3/index.js';
+import { OrSelectV3 as script$k } from '../or-select-v3/index.js';
+import { OrSwitchV3 as script$l } from '../or-switch-v3/index.js';
+import { OrTagInputV3 as script$m } from '../or-tag-input-v3/index.js';
+import { OrTimePickerV3 as script$n } from '../or-time-picker-v3/index.js';
+import { useElementSize } from '@vueuse/core';
+import { OrIconV3 as script$o } from '../or-icon-v3/index.js';
+import { OrPaginationV3 as script$p } from '../or-pagination-v3/index.js';
+import { OrSearchV3 as script$q } from '../or-search-v3/index.js';
+import { OrSkeletonTextV3 as script$r } from '../or-skeleton-v3/index.js';
+import { OrNotificationV3 as script$s } from '../or-notification-v3/index.js';
+import '../OrAutocompleteV3-8c6de221.js';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import 'lodash/get';
+import 'lodash/isElement';
+import '../or-error-v3/index.js';
+import '../or-hint-v3/index.js';
+import '../or-icon-button-v3/index.js';
+import '../or-tooltip-v3/index.js';
+import '../or-popover-v3/index.js';
+import '@floating-ui/dom';
+import '../or-bottom-sheet-v3/index.js';
+import '../or-overlay-v3/index.js';
+import '../or-teleport-v3/index.js';
+import '../or-input-box-v3/index.js';
+import '../OrInlineInputV3-061441a3.js';
+import '../or-inline-input-box-v3/index.js';
+import '../or-text-v3/index.js';
+import '../or-label-v3/index.js';
+import '../or-loader-v3/index.js';
+import '../or-menu-item-v3/index.js';
+import '../or-tags-v3/index.js';
+import '../or-button-v3/index.js';
+import '../or-tag-v3/index.js';
+import '../or-menu-v3/index.js';
+import '../OrEditorTabsV3-7f1eb4be.js';
+import '../or-expansion-panel-v3/index.js';
+import 'lodash/range';
+import '../or-indicator-v3/index.js';
+
+const DataGridFooter = [
+// Layout
+'layout-row',
+// Interactivity
+'interactivity-default',
+// Box
+'h-[calc(theme(spacing.2xl)+theme(spacing.xs))]',
+// Spacing
+'px-sm+', 'py-0', 'gap-xl',
+// Theme
+'theme-border-disabled border-t-1', 'dark:theme-border-disabled-dark'];
+const DataGridFooterStatus = [
+// Typography
+'typography-body-2-semibold'];
+
+var script$e = defineComponent({
+  name: 'OrDataGridFooter',
+  expose: ['root'],
+  setup() {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-footer-v3', ...DataGridFooter]);
+    const statusStyles = computed(() => [...DataGridFooterStatus]);
+    return {
+      root,
+      rootStyles,
+      statusStyles
+    };
+  }
+});
+
+const _hoisted_1$5 = {
+  key: 1,
+  class: /*#__PURE__*/normalizeClass(['grow'])
+};
+function render$e(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.$slots['status'] ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.statusStyles)
+  }, [renderSlot(_ctx.$slots, 'status')], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'actions'), _ctx.$slots['paging'] ? (openBlock(), createElementBlock("div", _hoisted_1$5)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
+}
+
+script$e.render = render$e;
+script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
+
+const DataGridHeader = [
+// Layout
+'layout-row items-start',
+// Interactivity
+'interactivity-default',
+// Box
+'h-3xl'];
+const DataGridHeaderTitle = [
+// Typography
+'typography-headline-2'];
+
+var script$d = defineComponent({
+  name: 'OrDataGridHeader',
+  expose: ['root'],
+  setup() {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-header-v3', ...DataGridHeader]);
+    const titleStyles = computed(() => [...DataGridHeaderTitle]);
+    return {
+      root,
+      rootStyles,
+      titleStyles
+    };
+  }
+});
+
+const _hoisted_1$4 = {
+  key: 1,
+  class: /*#__PURE__*/normalizeClass(['grow'])
+};
+function render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.$slots['title'] ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(_ctx.titleStyles)
+  }, [renderSlot(_ctx.$slots, 'title')], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.$slots['searching'] ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
+}
+
+script$d.render = render$d;
+script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
+
+const DataGridTableContentCell = [
+// Layout
+'layout-row',
+// Spacing
+'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark', 'theme-outline-transparent outline-2', 'dark:theme-outline-transparent-dark',
+// Theme (focus)
+'focus-within:theme-border-primary', 'dark:focus-within:theme-border-primary-dark', 'focus-within:theme-outline-primary', 'dark:focus-within:theme-outline-primary-dark',
+// Theme (.sticky-start)
+'[&.sticky-start]:border-e-disabled', 'dark:[&.sticky-start]:border-e-disabled-dark',
+// Theme (.sticky-end)
+'[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
+
+var script$c = defineComponent({
+  name: 'OrDataGridTableContentCell',
+  components: {
+    OrCheckbox: script$f,
+    OrDatePicker: script$g,
+    OrDateTimePicker: script$h,
+    OrInput: script$i,
+    OrRating: script$j,
+    OrSelect: script$k,
+    OrSwitch: script$l,
+    OrTagInput: script$m,
+    OrTimePicker: script$n
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
+    column: {
+      type: Object,
+      default: undefined
+    },
+    features: {
+      type: Object,
+      default: undefined
+    },
+    override: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['input'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => {
+      var _a;
+      return ['or-data-grid-table-content-cell-v3', ...DataGridTableContentCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : [])];
+    });
+    const rootInlineStyles = computed(() => {
+      if (props.column) {
+        switch (props.column.stickiness) {
+          case 'start':
+            return {
+              position: 'sticky',
+              insetInlineStart: '0',
+              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
+              justifyContent: props.column.alignment
+            };
+          case 'end':
+            return {
+              position: 'sticky',
+              insetInlineEnd: '0',
+              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
+              justifyContent: props.column.alignment
+            };
+          default:
+            return {
+              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
+              justifyContent: props.column.alignment
+            };
+        }
+      }
+      return {
+        justifyContent: 'center'
+      };
+    });
+    // State
+    const model = computed({
+      get: () => props.modelValue,
+      set: value => {
+        context.emit('input', value);
+      }
+    });
+    const control = computed(() => {
+      var _a;
+      return (_a = props.column) === null || _a === void 0 ? void 0 : _a.control;
+    });
+    return {
+      root,
+      rootStyles,
+      rootInlineStyles,
+      model,
+      control
+    };
+  }
+});
+
+const _hoisted_1$3 = {
+  key: 2,
+  class: /*#__PURE__*/normalizeClass(['truncate'])
+};
+function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrInput = resolveComponent("OrInput");
+  const _component_OrRating = resolveComponent("OrRating");
+  const _component_OrSelect = resolveComponent("OrSelect");
+  const _component_OrCheckbox = resolveComponent("OrCheckbox");
+  const _component_OrSwitch = resolveComponent("OrSwitch");
+  const _component_OrDatePicker = resolveComponent("OrDatePicker");
+  const _component_OrTimePicker = resolveComponent("OrTimePicker");
+  const _component_OrDateTimePicker = resolveComponent("OrDateTimePicker");
+  const _component_OrTagInput = resolveComponent("OrTagInput");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles),
+    style: normalizeStyle(_ctx.rootInlineStyles)
+  }, [_ctx.override ? renderSlot(_ctx.$slots, "default", {
+    key: 0
+  }) : _ctx.control ? (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [_ctx.control.type === 'text' ? (openBlock(), createBlock(_component_OrInput, {
+    key: 0,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.model = $event),
+    type: 'text',
+    variant: 'embedded'
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'number' ? (openBlock(), createBlock(_component_OrInput, {
+    key: 1,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.model = $event),
+    type: 'number',
+    variant: 'embedded'
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'rating' ? (openBlock(), createBlock(_component_OrRating, {
+    key: 2,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.model = $event)
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'select' ? (openBlock(), createBlock(_component_OrSelect, {
+    key: 3,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.model = $event),
+    options: _ctx.control.options,
+    variant: 'embedded',
+    anchor: _ctx.root
+  }, null, 8 /* PROPS */, ["modelValue", "options", "anchor"])) : createCommentVNode("v-if", true), _ctx.control.type === 'checkbox' ? (openBlock(), createBlock(_component_OrCheckbox, {
+    key: 4,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.model = $event)
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'switch' ? (openBlock(), createBlock(_component_OrSwitch, {
+    key: 5,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => _ctx.model = $event)
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true), _ctx.control.type === 'date' ? (openBlock(), createBlock(_component_OrDatePicker, {
+    key: 6,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.model = $event),
+    variant: 'embedded',
+    anchor: _ctx.root
+  }, null, 8 /* PROPS */, ["modelValue", "anchor"])) : createCommentVNode("v-if", true), _ctx.control.type === 'time' ? (openBlock(), createBlock(_component_OrTimePicker, {
+    key: 7,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.model = $event),
+    variant: 'embedded',
+    anchor: _ctx.root
+  }, null, 8 /* PROPS */, ["modelValue", "anchor"])) : createCommentVNode("v-if", true), _ctx.control.type === 'datetime' ? (openBlock(), createBlock(_component_OrDateTimePicker, {
+    key: 8,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => _ctx.model = $event),
+    variant: 'embedded',
+    anchor: _ctx.root
+  }, null, 8 /* PROPS */, ["modelValue", "anchor"])) : createCommentVNode("v-if", true), _ctx.control.type === 'tags' ? (openBlock(), createBlock(_component_OrTagInput, {
+    key: 9,
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.model = $event),
+    variant: 'embedded'
+  }, null, 8 /* PROPS */, ["modelValue"])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")]))], 6 /* CLASS, STYLE */);
+}
+
+script$c.render = render$c;
+script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
+
+var DataGridVariant;
+(function (DataGridVariant) {
+  DataGridVariant["Standard"] = "standard";
+  DataGridVariant["Comfortable"] = "comfortable";
+  DataGridVariant["Compact"] = "compact";
+})(DataGridVariant || (DataGridVariant = {}));
+
+const DataGridTableContentRow = [
+// Layout
+'grid grid-cols-[subgrid] col-span-full',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-border-disabled [&:not(:last-child)]:border-b-1', 'dark:theme-border-disabled-dark',
+// Theme (children)
+'children:theme-foreground-default', 'dark:children:theme-foreground-default-dark', 'children:theme-background-default', 'dark:children:theme-background-default-dark',
+// Theme (hover / children)
+'children:hover:theme-background-surface-1', 'dark:children:hover:theme-background-surface-1-dark',
+// Theme (selected / children)
+'children:selected:theme-background-surface-2', 'dark:children:selected:theme-background-surface-2-dark',
+// Theme (selected + hover / children)
+'children:hover:selected:theme-background-surface-3', 'dark:children:hover:selected:theme-background-surface-3-dark'];
+const DataGridTableContentRowVariants = {
+  [DataGridVariant.Standard]: [
+  // Box
+  'h-[calc(theme(spacing.2xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Comfortable]: [
+  // Box
+  'h-[calc(theme(spacing.3xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Compact]: [
+  // Box
+  'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
+};
+
+var script$b = defineComponent({
+  name: 'OrDataGridTableContentRow',
+  props: {
+    variant: {
+      type: String,
+      required: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-content-row-v3', ...DataGridTableContentRow, ...DataGridTableContentRowVariants[props.variant]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+const _hoisted_1$2 = ["selected"];
+function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles),
+    selected: _ctx.selected
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$2);
+}
+
+script$b.render = render$b;
+script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
+
+const DataGridTableContent = [
+// Layout
+'contents'];
+
+var script$a = defineComponent({
+  name: 'OrDataGridTableContent',
+  expose: ['root'],
+  setup() {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-content-v3', ...DataGridTableContent]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+script$a.render = render$a;
+script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
+
+const DataGridTableFooterCell = [
+// Layout
+'layout-row',
+// Spacing
+'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark'];
+
+var script$9 = defineComponent({
+  name: 'OrDataGridTableFooterCell',
+  expose: ['root'],
+  setup() {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-footer-cell-v3', ...DataGridTableFooterCell]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+script$9.render = render$9;
+script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
+
+const DataGridTableFooterRow = [
+// Layout
+'grid grid-cols-1',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-border-disabled border-t-1', 'dark:theme-border-disabled-dark',
+// Theme (children)
+'children:theme-foreground-default', 'dark:children:theme-foreground-default-dark', 'children:theme-background-default', 'dark:children:theme-background-default-dark'];
+const DataGridTableFooterRowVariants = {
+  [DataGridVariant.Standard]: [
+  // Box
+  'h-[calc(theme(spacing.2xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Comfortable]: [
+  // Box
+  'h-[calc(theme(spacing.3xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Compact]: [
+  // Box
+  'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
+};
+
+var script$8 = defineComponent({
+  name: 'OrDataGridTableFooterRow',
+  props: {
+    variant: {
+      type: String,
+      required: true
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-footer-row-v3', ...DataGridTableFooterRow, ...DataGridTableFooterRowVariants[props.variant]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+script$8.render = render$8;
+script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
+
+const DataGridTableFooter = [
+// Layout
+'contents'];
+
+var script$7 = defineComponent({
+  name: 'OrDataGridTableFooter',
+  expose: ['root'],
+  setup() {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-footer-v3', ...DataGridTableFooter]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+script$7.render = render$7;
+script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
+
+const DataGridTableHeaderCell = [
+// Layout
+'layout-row',
+// Spacing
+'px-sm+', 'py-0', 'gap-xs',
+// Theme
+'theme-border-transparent border-1', 'dark:theme-border-transparent-dark',
+// Theme (.sticky-start)
+'[&.sticky-start]:border-e-disabled', 'dark:[&.sticky-start]:border-e-disabled-dark',
+// Theme (.sticky-end)
+'[&.sticky-end]:border-s-disabled', 'dark:[&.sticky-end]:border-s-disabled-dark'];
+
+var script$6 = defineComponent({
+  name: 'OrDataGridTableHeaderCell',
+  components: {
+    OrIcon: script$o
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
+    column: {
+      type: Object,
+      default: undefined
+    },
+    features: {
+      type: Object,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue', 'update:scrollOffset', 'remove:scrollOffset'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => {
+      var _a, _b, _c;
+      return ['or-data-grid-table-header-cell-v3', ...DataGridTableHeaderCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : []), ...(((_b = props.features) === null || _b === void 0 ? void 0 : _b.sorting) && ((_c = props.column) === null || _c === void 0 ? void 0 : _c.name) ? ['interactivity-click'] : [])];
+    });
+    const rootInlineStyles = computed(() => {
+      if (props.column) {
+        switch (props.column.stickiness) {
+          case 'start':
+            return {
+              position: 'sticky',
+              insetInlineStart: '0',
+              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
+              justifyContent: props.column.alignment
+            };
+          case 'end':
+            return {
+              position: 'sticky',
+              insetInlineEnd: '0',
+              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
+              justifyContent: props.column.alignment
+            };
+          default:
+            return {
+              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
+              justifyContent: props.column.alignment
+            };
+        }
+      }
+      return {
+        justifyContent: 'center'
+      };
+    });
+    // State
+    const model = computed({
+      get: () => {
+        var _a, _b, _c;
+        if (!((_a = props.features) === null || _a === void 0 ? void 0 : _a.sorting)) {
+          return;
+        }
+        return ((_b = props.modelValue) === null || _b === void 0 ? void 0 : _b.column) === ((_c = props.column) === null || _c === void 0 ? void 0 : _c.name) ? props.modelValue : undefined;
+      },
+      set: value => {
+        context.emit('update:modelValue', value);
+      }
+    });
+    // Methods
+    function toggleSorting() {
+      var _a, _b;
+      if (!((_a = props.features) === null || _a === void 0 ? void 0 : _a.sorting)) {
+        return;
+      }
+      if (model.value) {
+        model.value = {
+          ...model.value,
+          direction: model.value.direction === 'asc' ? 'desc' : 'asc'
+        };
+      } else {
+        if (!props.column) {
+          throw new Error('[OrDataGridTableHeaderCell]: `column` must be specified.');
+        }
+        model.value = {
+          column: ((_b = props.column) === null || _b === void 0 ? void 0 : _b.name) || '_check',
+          direction: 'asc'
+        };
+      }
+    }
+    // Effects
+    const {
+      width
+    } = useElementSize(root, undefined, {
+      box: 'border-box'
+    });
+    watch([root, width, () => {
+      var _a;
+      return (_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness;
+    }], ([nextRoot, width], [prevRoot]) => {
+      if (prevRoot && prevRoot !== nextRoot) {
+        context.emit('remove:scrollOffset', prevRoot);
+      }
+      context.emit('update:scrollOffset', nextRoot, width, props.column);
+    });
+    return {
+      root,
+      rootStyles,
+      rootInlineStyles,
+      model,
+      toggleSorting
+    };
+  }
+});
+
+const _hoisted_1$1 = {
+  class: /*#__PURE__*/normalizeClass(['truncate'])
+};
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIcon = resolveComponent("OrIcon");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles),
+    style: normalizeStyle(_ctx.rootInlineStyles),
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.toggleSorting())
+  }, [createElementVNode("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")]), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
+    key: 0,
+    icon: _ctx.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
+  }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
+}
+
+script$6.render = render$6;
+script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
+
+const DataGridTableHeaderRow = [
+// Position
+'sticky top-0 z-10',
+// Layout
+'grid grid-cols-[subgrid] col-span-full',
+// Typography
+'typography-body-2-semibold',
+// Theme (children)
+'children:theme-foreground-default', 'dark:children:theme-foreground-default-dark', 'children:theme-background-surface-variant-1', 'dark:children:theme-background-surface-variant-1-dark'];
+const DataGridTableHeaderRowVariants = {
+  [DataGridVariant.Standard]: [
+  // Box
+  'h-[calc(theme(spacing.2xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Comfortable]: [
+  // Box
+  'h-[calc(theme(spacing.3xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Compact]: [
+  // Box
+  'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
+};
+
+var script$5 = defineComponent({
+  name: 'OrDataGridTableHeaderRow',
+  props: {
+    variant: {
+      type: String,
+      required: true
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-header-row-v3', ...DataGridTableHeaderRow, ...DataGridTableHeaderRowVariants[props.variant]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+script$5.render = render$5;
+script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
+
+const DataGridTableHeader = [
+// Layout
+'contents'];
+
+var script$4 = defineComponent({
+  name: 'OrDataGridTableHeader',
+  expose: ['root'],
+  setup() {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-header-v3', ...DataGridTableHeader]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+script$4.render = render$4;
+script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
+
+const DataGridTablePlaceholder = [
+// Layout
+'layout-row justify-center',
+// Spacing
+'px-sm+', 'py-0', 'gap-xs',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark', 'theme-background-default', 'dark:theme-background-default-dark'];
+const DataGridTablePlaceholderVariants = {
+  [DataGridVariant.Standard]: [
+  // Box
+  'min-h-[calc(theme(spacing.2xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Comfortable]: [
+  // Box
+  'min-h-[calc(theme(spacing.3xl)+theme(spacing.xs))]'],
+  [DataGridVariant.Compact]: [
+  // Box
+  'min-h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
+};
+
+var script$3 = defineComponent({
+  name: 'OrDataGridTablePlaceholder',
+  props: {
+    variant: {
+      type: String,
+      required: true
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-placeholder-v3', ...DataGridTablePlaceholder, ...DataGridTablePlaceholderVariants[props.variant]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+script$3.render = render$3;
+script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
+
+const DataGridTable = [
+// Layout
+'grid content-start',
+// Overflow
+'overflow-auto',
+// Interactivity
+'interactivity-default'];
+
+var script$2 = defineComponent({
+  name: 'OrDataGridTable',
+  props: {
+    columns: {
+      type: Array,
+      required: true
+    },
+    features: {
+      type: Object,
+      required: true
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-table-v3', ...DataGridTable]);
+    const rootInlineStyles = computed(() => {
+      const gridTemplateColumns = props.columns.map(column => {
+        var _a;
+        return (_a = column.width) !== null && _a !== void 0 ? _a : 'auto';
+      });
+      if (props.features.selecting) {
+        return {
+          gridTemplateColumns: `0fr ${gridTemplateColumns.join(' ')}`
+        };
+      }
+      return {
+        gridTemplateColumns: gridTemplateColumns.join(' ')
+      };
+    });
+    return {
+      root,
+      rootStyles,
+      rootInlineStyles
+    };
+  }
+});
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles),
+    style: normalizeStyle(_ctx.rootInlineStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 6 /* CLASS, STYLE */);
+}
+
+script$2.render = render$2;
+script$2.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue";
+
+const DataGridToolbar = [
+// Layout
+'layout-row',
+// Box
+'h-2xl',
+// Spacing
+'gap-xl'];
+
+var script$1 = defineComponent({
+  name: 'OrDataGridToolbar',
+  expose: ['root'],
+  setup() {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-toolbar-v3', ...DataGridToolbar]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
+}
+
+script$1.render = render$1;
+script$1.__file = "src/components/or-data-grid-v3/partials/or-data-grid-toolbar/OrDataGridToolbar.vue";
+
+const DataGrid = [
+// Layout
+'layout-column'];
+
+var script = defineComponent({
+  name: 'OrDataGrid',
+  components: {
+    OrCheckbox: script$f,
+    OrDataGridFooter: script$e,
+    OrDataGridHeader: script$d,
+    OrDataGridTable: script$2,
+    OrDataGridTableContent: script$a,
+    OrDataGridTableContentCell: script$c,
+    OrDataGridTableContentRow: script$b,
+    OrDataGridTableFooter: script$7,
+    OrDataGridTableFooterCell: script$9,
+    OrDataGridTableFooterRow: script$8,
+    OrDataGridTableHeader: script$4,
+    OrDataGridTableHeaderCell: script$6,
+    OrDataGridTableHeaderRow: script$5,
+    OrDataGridTablePlaceholder: script$3,
+    OrDataGridToolbar: script$1,
+    OrPagination: script$p,
+    OrSearch: script$q,
+    OrSkeletonText: script$r,
+    OrNotification: script$s
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      required: true
+    },
+    variant: {
+      type: String,
+      default: () => DataGridVariant.Standard
+    },
+    features: {
+      type: Object,
+      default: () => ({})
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    notification: {
+      type: Object,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue', 'update:item', 'close-notification'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-v3', ...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: () => {
+        return !!props.items.length && props.items.every(item => selectingModel.value.includes(item.id));
+      },
+      set: value => {
+        if (value) {
+          selectingModel.value = [...new Set([...selectingModel.value, ...props.items.map(item => item.id)])];
+        } else {
+          selectingModel.value = [];
+        }
+      }
+    });
+    const selectingModel = computed({
+      get: () => {
+        var _a, _b;
+        return (_b = (_a = props.modelValue) === null || _a === void 0 ? void 0 : _a.selecting) !== null && _b !== void 0 ? _b : [];
+      },
+      set: value => {
+        context.emit('update:modelValue', {
+          selecting: value,
+          filtering: filteringModel.value,
+          searching: searchingModel.value,
+          sorting: sortingModel.value,
+          paging: pagingModel.value
+        });
+      }
+    });
+    const filteringModel = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) === null || _a === void 0 ? void 0 : _a.filtering;
+      },
+      set: value => {
+        context.emit('update:modelValue', {
+          selecting: selectingModel.value,
+          filtering: value,
+          searching: searchingModel.value,
+          sorting: sortingModel.value,
+          paging: {
+            ...pagingModel.value,
+            offset: 0
+          }
+        });
+      }
+    });
+    const searchingModel = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) === null || _a === void 0 ? void 0 : _a.searching;
+      },
+      set: value => {
+        context.emit('update:modelValue', {
+          selecting: selectingModel.value,
+          filtering: filteringModel.value,
+          searching: value,
+          sorting: sortingModel.value,
+          paging: {
+            ...pagingModel.value,
+            offset: 0
+          }
+        });
+      }
+    });
+    const sortingModel = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) === null || _a === void 0 ? void 0 : _a.sorting;
+      },
+      set: value => {
+        context.emit('update:modelValue', {
+          selecting: selectingModel.value,
+          filtering: filteringModel.value,
+          searching: searchingModel.value,
+          sorting: value,
+          paging: {
+            ...pagingModel.value,
+            offset: 0
+          }
+        });
+      }
+    });
+    const pagingModel = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) === null || _a === void 0 ? void 0 : _a.paging;
+      },
+      set: value => {
+        context.emit('update:modelValue', {
+          selecting: selectingModel.value,
+          filtering: filteringModel.value,
+          searching: searchingModel.value,
+          sorting: sortingModel.value,
+          paging: value
+        });
+      }
+    });
+    const scrollOffsetStart = ref(new Map());
+    const scrollOffsetEnd = ref(new Map());
+    const showSelectingCouter = computed(() => {
+      return props.features.selecting && (typeof props.features.selecting === 'object' ? props.features.selecting.showCounter !== false : true);
+    });
+    const selectingDisabled = computed(() => {
+      return props.items.length === 0 || props.loading || typeof props.features.selecting === 'object' && props.features.selecting.disabled;
+    });
+    // Methods
+    function updateSearchingModel(value) {
+      searchingModel.value = value;
+    }
+    function updateScrollOffset(header, offset, column) {
+      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) {
+      scrollOffsetStart.value.delete(header);
+      scrollOffsetStart.value = new Map(scrollOffsetStart.value);
+      scrollOffsetEnd.value.delete(header);
+      scrollOffsetEnd.value = new Map(scrollOffsetEnd.value);
+    }
+    // Helpers
+    function scrollTo(event) {
+      event.currentTarget.scrollIntoView();
+    }
+    return {
+      root,
+      rootStyles,
+      tableInlineStyles,
+      selectingIndicator,
+      showSelectingCouter,
+      selectingDisabled,
+      selectingModel,
+      filteringModel,
+      searchingModel,
+      sortingModel,
+      pagingModel,
+      updateScrollOffset,
+      removeScrollOffset,
+      updateSearchingModel,
+      scrollTo
+    };
+  }
+});
+
+const _hoisted_1 = {
+  key: 0,
+  class: "grid col-span-full"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrSearch = resolveComponent("OrSearch");
+  const _component_OrDataGridHeader = resolveComponent("OrDataGridHeader");
+  const _component_OrDataGridToolbar = resolveComponent("OrDataGridToolbar");
+  const _component_OrCheckbox = resolveComponent("OrCheckbox");
+  const _component_OrDataGridTableHeaderCell = resolveComponent("OrDataGridTableHeaderCell");
+  const _component_OrDataGridTableHeaderRow = resolveComponent("OrDataGridTableHeaderRow");
+  const _component_OrDataGridTableHeader = resolveComponent("OrDataGridTableHeader");
+  const _component_OrNotification = resolveComponent("OrNotification");
+  const _component_OrSkeletonText = resolveComponent("OrSkeletonText");
+  const _component_OrDataGridTableContentCell = resolveComponent("OrDataGridTableContentCell");
+  const _component_OrDataGridTableContentRow = resolveComponent("OrDataGridTableContentRow");
+  const _component_OrDataGridTablePlaceholder = resolveComponent("OrDataGridTablePlaceholder");
+  const _component_OrDataGridTableContent = resolveComponent("OrDataGridTableContent");
+  const _component_OrDataGridTable = resolveComponent("OrDataGridTable");
+  const _component_OrDataGridTableFooterCell = resolveComponent("OrDataGridTableFooterCell");
+  const _component_OrDataGridTableFooterRow = resolveComponent("OrDataGridTableFooterRow");
+  const _component_OrDataGridTableFooter = resolveComponent("OrDataGridTableFooter");
+  const _component_OrPagination = resolveComponent("OrPagination");
+  const _component_OrDataGridFooter = resolveComponent("OrDataGridFooter");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.$slots['title'] || _ctx.features.searching || _ctx.$slots['search'] ? (openBlock(), createBlock(_component_OrDataGridHeader, {
+    key: 0,
+    class: normalizeClass(['shrink-0'])
+  }, createSlots({
+    _: 2 /* DYNAMIC */
+  }, [_ctx.$slots['title'] ? {
+    name: "title",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, 'title')]),
+    key: "0"
+  } : undefined, _ctx.features.searching ? {
+    name: "searching",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, "search", normalizeProps(guardReactiveProps({
+      updateSearchingModel: _ctx.updateSearchingModel,
+      searchingModel: _ctx.searchingModel
+    })), () => [createVNode(_component_OrSearch, {
+      modelValue: _ctx.searchingModel,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.searchingModel = $event)
+    }, null, 8 /* PROPS */, ["modelValue"])])]),
+    key: "1"
+  } : undefined]), 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), _ctx.$slots['toolbar'] ? (openBlock(), createBlock(_component_OrDataGridToolbar, {
+    key: 1,
+    class: normalizeClass(['shrink-0'])
+  }, {
+    default: withCtx(() => [renderSlot(_ctx.$slots, 'toolbar')]),
+    _: 3 /* FORWARDED */
+  })) : createCommentVNode("v-if", true), createVNode(_component_OrDataGridTable, {
+    class: normalizeClass(['grow', {
+      'grid-rows-[auto_1fr]': _ctx.items.length === 0
+    }]),
+    style: normalizeStyle(_ctx.tableInlineStyles),
+    columns: _ctx.columns,
+    features: _ctx.features
+  }, {
+    default: withCtx(() => [createVNode(_component_OrDataGridTableHeader, null, {
+      default: withCtx(() => [createVNode(_component_OrDataGridTableHeaderRow, {
+        variant: _ctx.variant
+      }, {
+        default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableHeaderCell, {
+          key: 0,
+          column: {
+            stickiness: 'start'
+          },
+          "onUpdate:scrollOffset": _ctx.updateScrollOffset,
+          "onRemove:scrollOffset": _ctx.removeScrollOffset
+        }, {
+          default: withCtx(() => [createVNode(_component_OrCheckbox, {
+            modelValue: _ctx.selectingIndicator,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.selectingIndicator = $event),
+            indeterminate: !_ctx.selectingIndicator && _ctx.selectingModel.length > 0,
+            disabled: _ctx.selectingDisabled
+          }, null, 8 /* PROPS */, ["modelValue", "indeterminate", "disabled"])]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["onUpdate:scrollOffset", "onRemove:scrollOffset"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
+          return openBlock(), createBlock(_component_OrDataGridTableHeaderCell, {
+            key: column.name,
+            modelValue: _ctx.sortingModel,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.sortingModel = $event),
+            column: column,
+            features: _ctx.features,
+            "onUpdate:scrollOffset": _ctx.updateScrollOffset,
+            "onRemove:scrollOffset": _ctx.removeScrollOffset
+          }, {
+            default: withCtx(() => [createTextVNode(toDisplayString(column.label), 1 /* TEXT */)]),
+            _: 2 /* DYNAMIC */
+          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "column", "features", "onUpdate:scrollOffset", "onRemove:scrollOffset"]);
+        }), 128 /* KEYED_FRAGMENT */))]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["variant"])]),
+      _: 1 /* STABLE */
+    }), _ctx.notification ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_OrNotification, mergeProps(_ctx.notification, {
+      class: "rounded-0",
+      onClose: _cache[3] || (_cache[3] = $event => _ctx.$emit('close-notification'))
+    }), {
+      default: withCtx(() => [_ctx.$slots['notification'] ? renderSlot(_ctx.$slots, 'notification', {
+        key: 0
+      }) : createCommentVNode("v-if", true)]),
+      _: 3 /* FORWARDED */
+    }, 16 /* FULL_PROPS */)])) : createCommentVNode("v-if", true), createVNode(_component_OrDataGridTableContent, null, {
+      default: withCtx(() => [_ctx.loading ? (openBlock(), createElementBlock(Fragment, {
+        key: 0
+      }, renderList(10, n => {
+        return createVNode(_component_OrDataGridTableContentRow, {
+          key: n,
+          variant: _ctx.variant
+        }, {
+          default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
+            key: 0,
+            column: {
+              stickiness: 'start'
+            },
+            override: true
+          }, {
+            default: withCtx(() => [createVNode(_component_OrSkeletonText)]),
+            _: 1 /* STABLE */
+          })) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
+            return openBlock(), createBlock(_component_OrDataGridTableContentCell, {
+              key: column.name,
+              column: column,
+              features: _ctx.features,
+              override: true
+            }, {
+              default: withCtx(() => [createVNode(_component_OrSkeletonText)]),
+              _: 2 /* DYNAMIC */
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["column", "features"]);
+          }), 128 /* KEYED_FRAGMENT */))]),
+          _: 2 /* DYNAMIC */
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant"]);
+      }), 64 /* STABLE_FRAGMENT */)) : _ctx.items.length > 0 ? (openBlock(true), createElementBlock(Fragment, {
+        key: 1
+      }, renderList(_ctx.items, item => {
+        return openBlock(), createBlock(_component_OrDataGridTableContentRow, {
+          key: item.id,
+          variant: _ctx.variant,
+          selected: _ctx.selectingModel.includes(item.id)
+        }, {
+          default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
+            key: 0,
+            column: {
+              stickiness: 'start'
+            },
+            "force-state": 'none'
+          }, {
+            default: withCtx(() => [createVNode(_component_OrCheckbox, {
+              modelValue: _ctx.selectingModel,
+              "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.selectingModel = $event),
+              value: item.id,
+              disabled: _ctx.selectingDisabled
+            }, null, 8 /* PROPS */, ["modelValue", "value", "disabled"])]),
+            _: 2 /* DYNAMIC */
+          }, 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
+            return openBlock(), createBlock(_component_OrDataGridTableContentCell, {
+              key: column.name,
+              "model-value": item[column.name],
+              column: column,
+              features: _ctx.features,
+              onInput: value => {
+                item[column.name] = value;
+                _ctx.$emit('update:item', item);
+              },
+              onFocusin: _cache[5] || (_cache[5] = $event => _ctx.scrollTo($event))
+            }, {
+              default: withCtx(() => [renderSlot(_ctx.$slots, column.name, {
+                column: column,
+                item: item
+              }, () => [createTextVNode(toDisplayString(item[column.name]), 1 /* TEXT */)])]),
+              _: 2 /* DYNAMIC */
+            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["model-value", "column", "features", "onInput"]);
+          }), 128 /* KEYED_FRAGMENT */))]),
+          _: 2 /* DYNAMIC */
+        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "selected"]);
+      }), 128 /* KEYED_FRAGMENT */)) : _ctx.$slots['noSearchResults'] && (_ctx.features.filtering && _ctx.filteringModel || _ctx.features.searching && _ctx.searchingModel) ? (openBlock(), createBlock(_component_OrDataGridTablePlaceholder, {
+        key: 2,
+        class: normalizeClass(['col-span-full']),
+        variant: _ctx.variant
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, 'noSearchResults', {
+          filter: _ctx.filteringModel,
+          search: _ctx.searchingModel
+        })]),
+        _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["variant"])) : _ctx.$slots['empty'] ? (openBlock(), createBlock(_component_OrDataGridTablePlaceholder, {
+        key: 3,
+        class: normalizeClass(['col-span-full']),
+        variant: _ctx.variant
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, 'empty')]),
+        _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["variant"])) : createCommentVNode("v-if", true)]),
+      _: 3 /* FORWARDED */
+    })]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class", "style", "columns", "features"]), _ctx.$slots['extra-row'] ? (openBlock(), createBlock(_component_OrDataGridTableFooter, {
+    key: 2
+  }, {
+    default: withCtx(() => [createVNode(_component_OrDataGridTableFooterRow, {
+      class: normalizeClass(['shrink-0']),
+      variant: _ctx.variant
+    }, {
+      default: withCtx(() => [createVNode(_component_OrDataGridTableFooterCell, null, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, 'extra-row')]),
+        _: 3 /* FORWARDED */
+      })]),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["variant"])]),
+    _: 3 /* FORWARDED */
+  })) : createCommentVNode("v-if", true), _ctx.$slots['actions'] || _ctx.showSelectingCouter || _ctx.features.paging ? (openBlock(), createBlock(_component_OrDataGridFooter, {
+    key: 3,
+    class: normalizeClass(['shrink-0'])
+  }, createSlots({
+    _: 2 /* DYNAMIC */
+  }, [_ctx.features.selecting && _ctx.selectingModel.length > 0 ? {
+    name: "status",
+    fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.selectingModel.length) + " row(s) selected ", 1 /* TEXT */)]),
+    key: "0"
+  } : undefined, _ctx.$slots['actions'] ? {
+    name: "actions",
+    fn: withCtx(() => [renderSlot(_ctx.$slots, 'actions')]),
+    key: "1"
+  } : undefined, _ctx.features.paging ? {
+    name: "paging",
+    fn: withCtx(() => [createVNode(_component_OrPagination, {
+      modelValue: _ctx.pagingModel,
+      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => _ctx.pagingModel = $event),
+      length: _ctx.features.paging.length,
+      options: _ctx.features.paging.options
+    }, null, 8 /* PROPS */, ["modelValue", "length", "options"])]),
+    key: "2"
+  } : undefined]), 1024 /* DYNAMIC_SLOTS */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-data-grid-v3/OrDataGrid.vue";
+
+export { DataGridVariant, script as OrDataGridV3 };