@onereach/ui-components-vue2 16.2.0-beta.4827.0

package/dist/bundled/components/OrDataGridV3/index.js

@@ -0,0 +1,1711 @@
+import { defineComponent, ref, computed, toRef, watch } from 'vue';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+import __vue_component__$t from '../OrCheckboxV3/OrCheckbox.js';
+import __vue_component__$u from '../OrDatePickerV3/OrDatePicker.js';
+import __vue_component__$v from '../OrDateTimePickerV3/OrDateTimePicker.js';
+import { OrInputV3 as __vue_component__$w } from '../OrInputV3/index.js';
+import __vue_component__$x from '../OrRatingV3/OrRating.js';
+import __vue_component__$y from '../OrSelectV3/OrSelect.js';
+import __vue_component__$z from '../OrSwitchV3/OrSwitch.js';
+import __vue_component__$A from '../OrTagInputV3/OrTagInput.js';
+import __vue_component__$B from '../OrTimePickerV3/OrTimePicker.js';
+import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
+import { n as useElementSize } from '../../index-af4affc5.js';
+import __vue_component__$C from '../OrIconV3/OrIcon.js';
+import { DataGrid } from './styles.js';
+import __vue_component__$D from '../OrPaginationV3/OrPagination.js';
+import __vue_component__$E from '../OrSearchV3/OrSearch.js';
+import __vue_component__$F from '../OrSkeletonTextV3/OrSkeletonText.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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$e = script$e;
+
+/* template */
+var __vue_render__$e = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm.$slots['status'] ? [_c('div', {
+    class: _vm.statusStyles
+  }, [_vm._t('status')], 2)] : _vm._e(), _vm._v(" "), _vm._t('actions'), _vm._v(" "), _vm.$slots['paging'] ? [_c('div', {
+    class: ['grow']
+  })] : _vm._e(), _vm._v(" "), _vm._t('paging')], 2);
+};
+var __vue_staticRenderFns__$e = [];
+
+/* style */
+const __vue_inject_styles__$e = undefined;
+/* scoped */
+const __vue_scope_id__$e = undefined;
+/* module identifier */
+const __vue_module_identifier__$e = undefined;
+/* functional template */
+const __vue_is_functional_template__$e = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$r = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$e,
+  staticRenderFns: __vue_staticRenderFns__$e
+}, __vue_inject_styles__$e, __vue_script__$e, __vue_scope_id__$e, __vue_is_functional_template__$e, __vue_module_identifier__$e, false, undefined, undefined, undefined);
+var __vue_component__$s = __vue_component__$r;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$d = script$d;
+
+/* template */
+var __vue_render__$d = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm.$slots['title'] ? [_c('div', {
+    class: _vm.titleStyles
+  }, [_vm._t('title')], 2)] : _vm._e(), _vm._v(" "), _vm.$slots['searching'] ? [_c('div', {
+    class: ['grow']
+  })] : _vm._e(), _vm._v(" "), _vm._t('searching')], 2);
+};
+var __vue_staticRenderFns__$d = [];
+
+/* style */
+const __vue_inject_styles__$d = undefined;
+/* scoped */
+const __vue_scope_id__$d = undefined;
+/* module identifier */
+const __vue_module_identifier__$d = undefined;
+/* functional template */
+const __vue_is_functional_template__$d = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$p = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$d,
+  staticRenderFns: __vue_staticRenderFns__$d
+}, __vue_inject_styles__$d, __vue_script__$d, __vue_scope_id__$d, __vue_is_functional_template__$d, __vue_module_identifier__$d, false, undefined, undefined, undefined);
+var __vue_component__$q = __vue_component__$p;
+
+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: __vue_component__$t,
+    OrDatePicker: __vue_component__$u,
+    OrDateTimePicker: __vue_component__$v,
+    OrInput: __vue_component__$w,
+    OrRating: __vue_component__$x,
+    OrSelect: __vue_component__$y,
+    OrSwitch: __vue_component__$z,
+    OrTagInput: __vue_component__$A,
+    OrTimePicker: __vue_component__$B
+  },
+  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: ['update:modelValue'],
+  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 = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
+    const control = computed(() => {
+      var _a;
+      return (_a = props.column) === null || _a === void 0 ? void 0 : _a.control;
+    });
+    return {
+      root,
+      rootStyles,
+      rootInlineStyles,
+      model,
+      control
+    };
+  }
+});
+
+/* script */
+const __vue_script__$c = script$c;
+
+/* template */
+var __vue_render__$c = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles,
+    style: _vm.rootInlineStyles
+  }, [_vm.override ? [_vm._t("default")] : _vm.control ? [_vm.control.type === 'text' ? [_c('OrInput', {
+    attrs: {
+      "type": 'text',
+      "variant": 'embedded'
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'number' ? [_c('OrInput', {
+    attrs: {
+      "type": 'number',
+      "variant": 'embedded'
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'rating' ? [_c('OrRating', {
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'select' ? [_c('OrSelect', {
+    attrs: {
+      "options": _vm.control.options,
+      "variant": 'embedded',
+      "anchor": _vm.root
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'checkbox' ? [_c('OrCheckbox', {
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'switch' ? [_c('OrSwitch', {
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'date' ? [_c('OrDatePicker', {
+    attrs: {
+      "variant": 'embedded',
+      "anchor": _vm.root
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'time' ? [_c('OrTimePicker', {
+    attrs: {
+      "variant": 'embedded',
+      "anchor": _vm.root
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'datetime' ? [_c('OrDateTimePicker', {
+    attrs: {
+      "variant": 'embedded',
+      "anchor": _vm.root
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e(), _vm._v(" "), _vm.control.type === 'tags' ? [_c('OrTagInput', {
+    attrs: {
+      "variant": 'embedded'
+    },
+    model: {
+      value: _vm.model,
+      callback: function ($$v) {
+        _vm.model = $$v;
+      },
+      expression: "model"
+    }
+  })] : _vm._e()] : [_c('div', {
+    class: ['truncate']
+  }, [_vm._t("default")], 2)]], 2);
+};
+var __vue_staticRenderFns__$c = [];
+
+/* style */
+const __vue_inject_styles__$c = undefined;
+/* scoped */
+const __vue_scope_id__$c = undefined;
+/* module identifier */
+const __vue_module_identifier__$c = undefined;
+/* functional template */
+const __vue_is_functional_template__$c = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$n = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$c,
+  staticRenderFns: __vue_staticRenderFns__$c
+}, __vue_inject_styles__$c, __vue_script__$c, __vue_scope_id__$c, __vue_is_functional_template__$c, __vue_module_identifier__$c, false, undefined, undefined, undefined);
+var __vue_component__$o = __vue_component__$n;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$b = script$b;
+
+/* template */
+var __vue_render__$b = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles,
+    attrs: {
+      "selected": _vm.selected
+    }
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$b = [];
+
+/* style */
+const __vue_inject_styles__$b = undefined;
+/* scoped */
+const __vue_scope_id__$b = undefined;
+/* module identifier */
+const __vue_module_identifier__$b = undefined;
+/* functional template */
+const __vue_is_functional_template__$b = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$l = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$b,
+  staticRenderFns: __vue_staticRenderFns__$b
+}, __vue_inject_styles__$b, __vue_script__$b, __vue_scope_id__$b, __vue_is_functional_template__$b, __vue_module_identifier__$b, false, undefined, undefined, undefined);
+var __vue_component__$m = __vue_component__$l;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$a = script$a;
+
+/* template */
+var __vue_render__$a = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$a = [];
+
+/* style */
+const __vue_inject_styles__$a = undefined;
+/* scoped */
+const __vue_scope_id__$a = undefined;
+/* module identifier */
+const __vue_module_identifier__$a = undefined;
+/* functional template */
+const __vue_is_functional_template__$a = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$j = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$a,
+  staticRenderFns: __vue_staticRenderFns__$a
+}, __vue_inject_styles__$a, __vue_script__$a, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, undefined, undefined, undefined);
+var __vue_component__$k = __vue_component__$j;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$9 = script$9;
+
+/* template */
+var __vue_render__$9 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$9 = [];
+
+/* style */
+const __vue_inject_styles__$9 = undefined;
+/* scoped */
+const __vue_scope_id__$9 = undefined;
+/* module identifier */
+const __vue_module_identifier__$9 = undefined;
+/* functional template */
+const __vue_is_functional_template__$9 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$h = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$9,
+  staticRenderFns: __vue_staticRenderFns__$9
+}, __vue_inject_styles__$9, __vue_script__$9, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, undefined, undefined, undefined);
+var __vue_component__$i = __vue_component__$h;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$8 = script$8;
+
+/* template */
+var __vue_render__$8 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$8 = [];
+
+/* style */
+const __vue_inject_styles__$8 = undefined;
+/* scoped */
+const __vue_scope_id__$8 = undefined;
+/* module identifier */
+const __vue_module_identifier__$8 = undefined;
+/* functional template */
+const __vue_is_functional_template__$8 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$f = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$8,
+  staticRenderFns: __vue_staticRenderFns__$8
+}, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined);
+var __vue_component__$g = __vue_component__$f;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$7 = script$7;
+
+/* template */
+var __vue_render__$7 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$7 = [];
+
+/* style */
+const __vue_inject_styles__$7 = undefined;
+/* scoped */
+const __vue_scope_id__$7 = undefined;
+/* module identifier */
+const __vue_module_identifier__$7 = undefined;
+/* functional template */
+const __vue_is_functional_template__$7 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$d = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$7,
+  staticRenderFns: __vue_staticRenderFns__$7
+}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined);
+var __vue_component__$e = __vue_component__$d;
+
+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: __vue_component__$C
+  },
+  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;
+      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: props.column.name,
+          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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$6 = script$6;
+
+/* template */
+var __vue_render__$6 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles,
+    style: _vm.rootInlineStyles,
+    on: {
+      "click": function ($event) {
+        return _vm.toggleSorting();
+      }
+    }
+  }, [_c('div', {
+    class: ['truncate']
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm.model ? [_c('OrIcon', {
+    attrs: {
+      "icon": _vm.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
+    }
+  })] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__$6 = [];
+
+/* style */
+const __vue_inject_styles__$6 = undefined;
+/* scoped */
+const __vue_scope_id__$6 = undefined;
+/* module identifier */
+const __vue_module_identifier__$6 = undefined;
+/* functional template */
+const __vue_is_functional_template__$6 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$b = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$6,
+  staticRenderFns: __vue_staticRenderFns__$6
+}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined);
+var __vue_component__$c = __vue_component__$b;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$5 = script$5;
+
+/* template */
+var __vue_render__$5 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$5 = [];
+
+/* style */
+const __vue_inject_styles__$5 = undefined;
+/* scoped */
+const __vue_scope_id__$5 = undefined;
+/* module identifier */
+const __vue_module_identifier__$5 = undefined;
+/* functional template */
+const __vue_is_functional_template__$5 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$9 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$5,
+  staticRenderFns: __vue_staticRenderFns__$5
+}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined);
+var __vue_component__$a = __vue_component__$9;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$4 = script$4;
+
+/* template */
+var __vue_render__$4 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$4 = [];
+
+/* style */
+const __vue_inject_styles__$4 = undefined;
+/* scoped */
+const __vue_scope_id__$4 = undefined;
+/* module identifier */
+const __vue_module_identifier__$4 = undefined;
+/* functional template */
+const __vue_is_functional_template__$4 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$7 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$4,
+  staticRenderFns: __vue_staticRenderFns__$4
+}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined);
+var __vue_component__$8 = __vue_component__$7;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$3 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$3 = [];
+
+/* style */
+const __vue_inject_styles__$3 = undefined;
+/* scoped */
+const __vue_scope_id__$3 = undefined;
+/* module identifier */
+const __vue_module_identifier__$3 = undefined;
+/* functional template */
+const __vue_is_functional_template__$3 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$5 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$3,
+  staticRenderFns: __vue_staticRenderFns__$3
+}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined);
+var __vue_component__$6 = __vue_component__$5;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$2 = script$2;
+
+/* template */
+var __vue_render__$2 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles,
+    style: _vm.rootInlineStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$2 = [];
+
+/* style */
+const __vue_inject_styles__$2 = undefined;
+/* scoped */
+const __vue_scope_id__$2 = undefined;
+/* module identifier */
+const __vue_module_identifier__$2 = undefined;
+/* functional template */
+const __vue_is_functional_template__$2 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$3 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$2,
+  staticRenderFns: __vue_staticRenderFns__$2
+}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined);
+var __vue_component__$4 = __vue_component__$3;
+
+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
+    };
+  }
+});
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = undefined;
+/* module identifier */
+const __vue_module_identifier__$1 = undefined;
+/* functional template */
+const __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+var __vue_component__$2 = __vue_component__$1;
+
+var script = defineComponent({
+  name: 'OrDataGrid',
+  components: {
+    OrCheckbox: __vue_component__$t,
+    OrDataGridFooter: __vue_component__$s,
+    OrDataGridHeader: __vue_component__$q,
+    OrDataGridTable: __vue_component__$4,
+    OrDataGridTableContent: __vue_component__$k,
+    OrDataGridTableContentCell: __vue_component__$o,
+    OrDataGridTableContentRow: __vue_component__$m,
+    OrDataGridTableFooter: __vue_component__$e,
+    OrDataGridTableFooterCell: __vue_component__$i,
+    OrDataGridTableFooterRow: __vue_component__$g,
+    OrDataGridTableHeader: __vue_component__$8,
+    OrDataGridTableHeaderCell: __vue_component__$c,
+    OrDataGridTableHeaderRow: __vue_component__$a,
+    OrDataGridTablePlaceholder: __vue_component__$6,
+    OrDataGridToolbar: __vue_component__$2,
+    OrPagination: __vue_component__$D,
+    OrSearch: __vue_component__$E,
+    OrSkeletonText: __vue_component__$F
+  },
+  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
+    }
+  },
+  emits: ['update:modelValue', 'update:item'],
+  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.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());
+    // Methods
+    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,
+      selectingModel,
+      filteringModel,
+      searchingModel,
+      sortingModel,
+      pagingModel,
+      updateScrollOffset,
+      removeScrollOffset,
+      scrollTo
+    };
+  }
+});
+
+/* 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', {
+    ref: 'root',
+    class: _vm.rootStyles
+  }, [_vm.$slots['title'] || _vm.features.searching ? [_c('OrDataGridHeader', {
+    class: ['shrink-0'],
+    scopedSlots: _vm._u([_vm.$slots['title'] ? {
+      key: "title",
+      fn: function () {
+        return [_vm._t('title')];
+      },
+      proxy: true
+    } : null, _vm.features.searching ? {
+      key: "searching",
+      fn: function () {
+        return [_c('OrSearch', {
+          model: {
+            value: _vm.searchingModel,
+            callback: function ($$v) {
+              _vm.searchingModel = $$v;
+            },
+            expression: "searchingModel"
+          }
+        })];
+      },
+      proxy: true
+    } : null], null, true)
+  })] : _vm._e(), _vm._v(" "), _vm.$slots['toolbar'] ? [_c('OrDataGridToolbar', {
+    class: ['shrink-0']
+  }, [_vm._t('toolbar')], 2)] : _vm._e(), _vm._v(" "), _c('OrDataGridTable', {
+    class: ['grow', {
+      'grid-rows-[auto_1fr]': _vm.items.length === 0
+    }],
+    style: _vm.tableInlineStyles,
+    attrs: {
+      "columns": _vm.columns,
+      "features": _vm.features
+    }
+  }, [_c('OrDataGridTableHeader', [_c('OrDataGridTableHeaderRow', {
+    attrs: {
+      "variant": _vm.variant
+    }
+  }, [_vm.features.selecting ? [_c('OrDataGridTableHeaderCell', {
+    attrs: {
+      "column": {
+        stickiness: 'start'
+      }
+    },
+    on: {
+      "update:scroll-offset": _vm.updateScrollOffset,
+      "remove:scroll-offset": _vm.removeScrollOffset
+    }
+  }, [_c('OrCheckbox', {
+    attrs: {
+      "indeterminate": !_vm.selectingIndicator && _vm.selectingModel.length > 0,
+      "disabled": _vm.items.length === 0 || _vm.loading
+    },
+    model: {
+      value: _vm.selectingIndicator,
+      callback: function ($$v) {
+        _vm.selectingIndicator = $$v;
+      },
+      expression: "selectingIndicator"
+    }
+  })], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
+    return _c('OrDataGridTableHeaderCell', {
+      key: column.name,
+      attrs: {
+        "column": column,
+        "features": _vm.features
+      },
+      on: {
+        "update:scroll-offset": _vm.updateScrollOffset,
+        "remove:scroll-offset": _vm.removeScrollOffset
+      },
+      model: {
+        value: _vm.sortingModel,
+        callback: function ($$v) {
+          _vm.sortingModel = $$v;
+        },
+        expression: "sortingModel"
+      }
+    }, [_vm._v("\n          " + _vm._s(column.label) + "\n        ")]);
+  })], 2)], 1), _vm._v(" "), _c('OrDataGridTableContent', [_vm.loading ? _vm._l(10, function (n) {
+    return _c('OrDataGridTableContentRow', {
+      key: n,
+      attrs: {
+        "variant": _vm.variant
+      }
+    }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
+      attrs: {
+        "column": {
+          stickiness: 'start'
+        },
+        "override": true
+      }
+    }, [_c('OrSkeletonText')], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
+      return _c('OrDataGridTableContentCell', {
+        key: column.name,
+        attrs: {
+          "column": column,
+          "features": _vm.features,
+          "override": true
+        }
+      }, [_c('OrSkeletonText')], 1);
+    })], 2);
+  }) : _vm.items.length > 0 ? _vm._l(_vm.items, function (item) {
+    return _c('OrDataGridTableContentRow', {
+      key: item.id,
+      attrs: {
+        "variant": _vm.variant,
+        "selected": _vm.selectingModel.includes(item.id)
+      }
+    }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
+      attrs: {
+        "column": {
+          stickiness: 'start'
+        },
+        "force-state": 'none'
+      }
+    }, [_c('OrCheckbox', {
+      attrs: {
+        "value": item.id
+      },
+      model: {
+        value: _vm.selectingModel,
+        callback: function ($$v) {
+          _vm.selectingModel = $$v;
+        },
+        expression: "selectingModel"
+      }
+    })], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
+      return _c('OrDataGridTableContentCell', {
+        key: column.name,
+        attrs: {
+          "column": column,
+          "features": _vm.features
+        },
+        on: {
+          "update:model-value": function ($event) {
+            return _vm.$emit('update:item', item);
+          },
+          "focusin": function ($event) {
+            return _vm.scrollTo($event);
+          }
+        },
+        model: {
+          value: item[column.name],
+          callback: function ($$v) {
+            _vm.$set(item, column.name, $$v);
+          },
+          expression: "item[column.name]"
+        }
+      }, [_vm._t(column.name, function () {
+        return [_vm._v("\n              " + _vm._s(item[column.name]) + "\n            ")];
+      }, {
+        "column": column,
+        "item": item
+      })], 2);
+    })], 2);
+  }) : _vm.$slots['noSearchResults'] && (_vm.features.filtering && _vm.filteringModel || _vm.features.searching && _vm.searchingModel) ? [_c('OrDataGridTablePlaceholder', {
+    class: ['col-span-full'],
+    attrs: {
+      "variant": _vm.variant
+    }
+  }, [_vm._t('noSearchResults', null, {
+    "filter": _vm.filteringModel,
+    "search": _vm.searchingModel
+  })], 2)] : _vm.$slots['empty'] ? [_c('OrDataGridTablePlaceholder', {
+    class: ['col-span-full'],
+    attrs: {
+      "variant": _vm.variant
+    }
+  }, [_vm._t('empty')], 2)] : _vm._e()], 2)], 1), _vm._v(" "), _vm.$slots['extra-row'] ? [_c('OrDataGridTableFooter', [_c('OrDataGridTableFooterRow', {
+    class: ['shrink-0'],
+    attrs: {
+      "variant": _vm.variant
+    }
+  }, [_c('OrDataGridTableFooterCell', [_vm._t('extra-row')], 2)], 1)], 1)] : _vm._e(), _vm._v(" "), _vm.$slots['actions'] || _vm.features.selecting || _vm.features.paging ? [_c('OrDataGridFooter', {
+    class: ['shrink-0'],
+    scopedSlots: _vm._u([_vm.features.selecting && _vm.selectingModel.length > 0 ? {
+      key: "status",
+      fn: function () {
+        return [_vm._v("\n        " + _vm._s(_vm.selectingModel.length) + " row(s) selected\n      ")];
+      },
+      proxy: true
+    } : null, _vm.$slots['actions'] ? {
+      key: "actions",
+      fn: function () {
+        return [_vm._t('actions')];
+      },
+      proxy: true
+    } : null, _vm.features.paging ? {
+      key: "paging",
+      fn: function () {
+        return [_c('OrPagination', {
+          attrs: {
+            "length": _vm.features.paging.length,
+            "options": _vm.features.paging.options
+          },
+          model: {
+            value: _vm.pagingModel,
+            callback: function ($$v) {
+              _vm.pagingModel = $$v;
+            },
+            expression: "pagingModel"
+          }
+        })];
+      },
+      proxy: true
+    } : null], null, true)
+  })] : _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 { DataGridVariant, __vue_component__ as OrDataGridV3 };