@onereach/ui-components 10.4.5-beta.4376.0 → 10.4.5-beta.4380.0

package/dist/bundled/v2/OrDataGrid-4af46b6e.js

@@ -0,0 +1,1318 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import __vue_component__$r from './components/OrIconV3/OrIcon.js';
+import { DataGrid } from './components/OrDataGridV3/styles.js';
+import __vue_component__$s from './components/OrCheckboxV3/OrCheckbox.js';
+import __vue_component__$t from './components/OrPaginationV3/OrPagination.js';
+import __vue_component__$u from './components/OrSearchV3/OrSearch.js';
+
+const DataGridFooter = [
+// Layout
+'layout-row',
+// Layout (empty)
+'empty:hidden',
+// 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$d = 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__$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['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__$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 DataGridHeader = [
+// Layout
+'layout-row items-start',
+// Layout (empty)
+'empty:hidden',
+// Interactivity
+'interactivity-default',
+// Box
+'h-3xl'];
+const DataGridHeaderTitle = [
+// Typography
+'typography-headline-2'];
+
+var script$c = 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__$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
+  }, [_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__$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;
+
+const DataGridTableContentCell = [
+// Layout
+'layout-row',
+// Spacing
+'px-sm+', 'py-0', 'gap-xs',
+// Typography
+'whitespace-nowrap',
+// Theme (.sticky-start)
+'[&.sticky-start]:theme-border-disabled [&.sticky-start:not(:last-child)]:border-e-1', 'dark:[&.sticky-start]:theme-border-disabled-dark',
+// Theme (.sticky-end)
+'[&.sticky-end]:theme-border-disabled [&.sticky-end:not(:first-child)]:border-s-1', 'dark:[&.sticky-end]:theme-border-disabled-dark'];
+
+var script$b = defineComponent({
+  name: 'OrDataGridTableContentCell',
+  props: {
+    column: {
+      type: Object,
+      default: undefined
+    },
+    features: {
+      type: Object,
+      default: undefined
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // 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'
+      };
+    });
+    return {
+      root,
+      rootStyles,
+      rootInlineStyles
+    };
+  }
+});
+
+/* 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,
+    style: _vm.rootInlineStyles
+  }, [_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;
+
+var DataGridVariant;
+(function (DataGridVariant) {
+  DataGridVariant["Standard"] = "standard";
+  DataGridVariant["Comfortable"] = "comfortable";
+  DataGridVariant["Compact"] = "compact";
+})(DataGridVariant || (DataGridVariant = {}));
+
+const DataGridTableContentRow = [
+// Layout
+'grid col-span-full grid-cols-[subgrid]',
+// 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-primary-translucent-1', 'dark:children:hover:theme-background-primary-translucent-1-dark',
+// Theme (selected / children)
+'children:selected:theme-background-primary-translucent-2', 'dark:children:selected:theme-background-primary-translucent-2-dark',
+// Theme (selected + hover / children)
+'children:hover:selected:theme-background-primary-translucent-3', 'dark:children:hover:selected:theme-background-primary-translucent-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$a = 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__$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,
+    attrs: {
+      "selected": _vm.selected
+    }
+  }, [_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 DataGridTableContent = [
+// Layout
+'contents'];
+
+var script$9 = 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__$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 DataGridTableFooterCell = [
+// Layout
+'layout-row',
+// Spacing
+'px-sm+', 'py-0', 'gap-xs',
+// Typography
+'whitespace-nowrap'];
+
+var script$8 = 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__$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 DataGridTableFooterRow = [
+// Position
+'sticky bottom-0 z-10',
+// Layout
+'grid col-span-full',
+// 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$7 = 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__$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 DataGridTableFooter = [
+// Layout
+'contents'];
+
+var script$6 = 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__$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
+  }, [_vm._t("default")], 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 DataGridTableHeaderCell = [
+// Layout
+'layout-row',
+// Spacing
+'px-sm+', 'py-0', 'gap-xs',
+// Typography
+'whitespace-nowrap',
+// Theme (.sticky-start)
+'[&.sticky-start]:theme-border-disabled [&.sticky-start:not(:last-child)]:border-e-1', 'dark:[&.sticky-start]:theme-border-disabled-dark',
+// Theme (.sticky-end)
+'[&.sticky-end]:theme-border-disabled [&.sticky-end:not(:first-child)]:border-s-1', 'dark:[&.sticky-end]:theme-border-disabled-dark'];
+
+var script$5 = defineComponent({
+  name: 'OrDataGridTableHeaderCell',
+  components: {
+    OrIcon: __vue_component__$r
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
+    column: {
+      type: Object,
+      default: undefined
+    },
+    features: {
+      type: Object,
+      default: undefined
+    }
+  },
+  expose: ['root'],
+  setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => {
+      var _a, _b;
+      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) && props.column ? ['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'
+        };
+      }
+    }
+    return {
+      root,
+      rootStyles,
+      rootInlineStyles,
+      model,
+      toggleSorting
+    };
+  }
+});
+
+/* 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,
+    style: _vm.rootInlineStyles,
+    on: {
+      "click": function ($event) {
+        return _vm.toggleSorting();
+      }
+    }
+  }, [_vm._t("default"), _vm._v(" "), _vm.model ? [_c('OrIcon', {
+    attrs: {
+      "icon": _vm.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
+    }
+  })] : _vm._e()], 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 DataGridTableHeaderRow = [
+// Position
+'sticky top-0 z-10',
+// Layout
+'grid col-span-full grid-cols-[subgrid]',
+// 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$4 = 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__$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 DataGridTableHeader = [
+// Layout
+'contents'];
+
+var script$3 = 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__$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';
+      }).join(' ');
+      if (props.features.selecting) {
+        return {
+          gridTemplateColumns: `auto ${gridTemplateColumns}`
+        };
+      }
+      return {
+        gridTemplateColumns
+      };
+    });
+    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__$s,
+    OrDataGridFooter: __vue_component__$q,
+    OrDataGridHeader: __vue_component__$o,
+    OrDataGridTable: __vue_component__$4,
+    OrDataGridTableContent: __vue_component__$i,
+    OrDataGridTableContentCell: __vue_component__$m,
+    OrDataGridTableContentRow: __vue_component__$k,
+    OrDataGridTableFooter: __vue_component__$c,
+    OrDataGridTableFooterCell: __vue_component__$g,
+    OrDataGridTableFooterRow: __vue_component__$e,
+    OrDataGridTableHeader: __vue_component__$6,
+    OrDataGridTableHeaderCell: __vue_component__$a,
+    OrDataGridTableHeaderRow: __vue_component__$8,
+    OrDataGridToolbar: __vue_component__$2,
+    OrPagination: __vue_component__$t,
+    OrSearch: __vue_component__$u
+  },
+  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: () => ({})
+    }
+  },
+  emits: ['update:modelValue'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-data-grid-v3', ...DataGrid]);
+    // State
+    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
+        });
+      }
+    });
+    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
+        });
+      }
+    });
+    return {
+      root,
+      rootStyles,
+      selectingModel,
+      filteringModel,
+      searchingModel,
+      sortingModel,
+      pagingModel
+    };
+  }
+});
+
+/* 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
+  }, [_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._v(" "), _vm.$slots['toolbar'] ? [_c('OrDataGridToolbar', {
+    class: ['shrink-0']
+  }, [_vm._t('toolbar')], 2)] : _vm._e(), _vm._v(" "), _c('OrDataGridTable', {
+    class: ['grow'],
+    attrs: {
+      "columns": _vm.columns,
+      "features": _vm.features
+    }
+  }, [_c('OrDataGridTableHeader', [_c('OrDataGridTableHeaderRow', {
+    attrs: {
+      "variant": _vm.variant
+    }
+  }, [_vm.features.selecting ? [_c('OrDataGridTableHeaderCell')] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
+    return _c('OrDataGridTableHeaderCell', {
+      key: column.name,
+      attrs: {
+        "column": column,
+        "features": _vm.features
+      },
+      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._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', [_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
+        }
+      }, [_vm._t(column.name, function () {
+        return [_vm._v("\n            " + _vm._s(item[column.name]) + "\n          ")];
+      }, {
+        "column": column,
+        "item": item
+      })], 2);
+    })], 2);
+  }), 1)], 1), _vm._v(" "), _vm.$slots['extra-row'] ? [_c('OrDataGridTableFooter', [_c('OrDataGridTableFooterRow', {
+    attrs: {
+      "variant": _vm.variant
+    }
+  }, [_c('OrDataGridTableFooterCell', [_vm._t('extra-row')], 2)], 1)], 1)] : _vm._e(), _vm._v(" "), _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)
+  })], 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 as D, __vue_component__ as _ };