@onereach/ui-components 11.12.1 → 11.13.0

package/dist/bundled/v3/components/OrDataGridV3/OrDataGrid.vue.d.ts

@@ -25,6 +25,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<DataGridFeatures>;
         default: () => {};
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
@@ -61,6 +65,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<DataGridFeatures>;
         default: () => {};
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -71,5 +79,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     }[];
     variant: DataGridVariant;
     features: DataGridFeatures;
+    loading: boolean;
 }>;
 export default _default;

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

@@ -1 +1 @@
-export { D as DataGridVariant, s as OrDataGridV3 } from '../OrDataGridV3-2895428f.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from '../OrDataGridV3-75884003.js';

package/dist/bundled/v3/components/OrDataGridV3/styles.js

@@ -1 +1 @@
-export { a as DataGrid } from '../OrDataGridV3-2895428f.js';
+export { a as DataGrid } from '../OrDataGridV3-75884003.js';

package/dist/bundled/v3/components/OrDataGridV3/types.d.ts

@@ -14,8 +14,7 @@ export type DataGridItem<T extends DataModel> = T;
 export type DataGridColumn = {
     name: string;
     label: string;
-    width?: string;
-    offset?: number;
+    width?: string | [string, string];
     alignment?: 'start' | 'end' | 'center';
     stickiness?: 'start' | 'end';
 };

package/dist/bundled/v3/components/{OrDataGridV3-2895428f.js → OrDataGridV3-75884003.js}

@@ -1,9 +1,11 @@
 import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, normalizeStyle, resolveComponent, createBlock, createSlots, withCtx, createVNode, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$e } from './OrIconV3-b5c97ea7.js';
-import { s as script$f } from './OrCheckboxV3-5b64ff3b.js';
-import { s as script$g } from './OrPaginationV3-c683a3b2.js';
-import script$h from './OrSearchV3/OrSearch.js';
+import { s as script$f } from './OrIconV3-b5c97ea7.js';
+import { isArray } from '../utils/isArray.js';
+import { s as script$g } from './OrCheckboxV3-e26de9e6.js';
+import { s as script$h } from './OrPaginationV3-8b90f965.js';
+import script$i from './OrSearchV3/OrSearch.js';
+import { s as script$j } from './OrSkeletonV3-c63b143f.js';
 
 const DataGridFooter = [
 // Layout
@@ -20,7 +22,7 @@ const DataGridFooterStatus = [
 // Typography
 'typography-body-2-semibold'];
 
-var script$d = defineComponent({
+var script$e = defineComponent({
   name: 'OrDataGridFooter',
   expose: ['root'],
   setup() {
@@ -36,22 +38,22 @@ var script$d = defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$4 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
+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$2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, 'status')], 2 /* CLASS */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'actions'), _ctx.$slots['paging'] ? (openBlock(), createElementBlock("div", _hoisted_1$4)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'paging')], 2 /* CLASS */);
 }
 
-script$d.render = render$d;
-script$d.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
+script$e.render = render$e;
+script$e.__file = "src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue";
 
 const DataGridHeader = [
 // Layout
@@ -64,7 +66,7 @@ const DataGridHeaderTitle = [
 // Typography
 'typography-headline-2'];
 
-var script$c = defineComponent({
+var script$d = defineComponent({
   name: 'OrDataGridHeader',
   expose: ['root'],
   setup() {
@@ -80,36 +82,34 @@ var script$c = defineComponent({
   }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1$3 = {
   key: 1,
   class: /*#__PURE__*/normalizeClass(['grow'])
 };
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
+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$1)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, 'title')], 2 /* CLASS */)) : createCommentVNode("v-if", true), _ctx.$slots['searching'] ? (openBlock(), createElementBlock("div", _hoisted_1$3)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, 'searching')], 2 /* CLASS */);
 }
 
-script$c.render = render$c;
-script$c.__file = "src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue";
+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',
-// 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({
+var script$c = defineComponent({
   name: 'OrDataGridTableContentCell',
   props: {
     column: {
@@ -119,6 +119,10 @@ var script$b = defineComponent({
     features: {
       type: Object,
       default: undefined
+    },
+    truncate: {
+      type: Boolean,
+      default: true
     }
   },
   expose: ['root'],
@@ -165,16 +169,22 @@ var script$b = defineComponent({
   }
 });
 
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$2 = {
+  key: 0,
+  class: /*#__PURE__*/normalizeClass(['truncate'])
+};
+function render$c(_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 */);
+  }, [_ctx.truncate ? (openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(_ctx.$slots, "default")])) : renderSlot(_ctx.$slots, "default", {
+    key: 1
+  })], 6 /* CLASS, STYLE */);
 }
 
-script$b.render = render$b;
-script$b.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue";
+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) {
@@ -185,7 +195,7 @@ var DataGridVariant;
 
 const DataGridTableContentRow = [
 // Layout
-'grid col-span-full grid-cols-[subgrid]',
+'grid grid-cols-[subgrid] col-span-full',
 // Typography
 'typography-body-2-regular',
 // Theme
@@ -210,7 +220,7 @@ const DataGridTableContentRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$a = defineComponent({
+var script$b = defineComponent({
   name: 'OrDataGridTableContentRow',
   props: {
     variant: {
@@ -234,23 +244,23 @@ var script$a = defineComponent({
   }
 });
 
-const _hoisted_1 = ["selected"];
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$1 = ["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);
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1$1);
 }
 
-script$a.render = render$a;
-script$a.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content-row/OrDataGridTableContentRow.vue";
+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$9 = defineComponent({
+var script$a = defineComponent({
   name: 'OrDataGridTableContent',
   expose: ['root'],
   setup() {
@@ -264,25 +274,23 @@ var script$9 = defineComponent({
   }
 });
 
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
+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$9.render = render$9;
-script$9.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue";
+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',
-// Typography
-'whitespace-nowrap'];
+'px-sm+', 'py-0', 'gap-xs'];
 
-var script$8 = defineComponent({
+var script$9 = defineComponent({
   name: 'OrDataGridTableFooterCell',
   expose: ['root'],
   setup() {
@@ -296,19 +304,19 @@ var script$8 = defineComponent({
   }
 });
 
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+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$8.render = render$8;
-script$8.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue";
+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 col-span-full',
+'grid grid-cols-1',
 // Typography
 'typography-body-2-regular',
 // Theme
@@ -327,7 +335,7 @@ const DataGridTableFooterRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$7 = defineComponent({
+var script$8 = defineComponent({
   name: 'OrDataGridTableFooterRow',
   props: {
     variant: {
@@ -347,21 +355,21 @@ var script$7 = defineComponent({
   }
 });
 
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+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$7.render = render$7;
-script$7.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue";
+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$6 = defineComponent({
+var script$7 = defineComponent({
   name: 'OrDataGridTableFooter',
   expose: ['root'],
   setup() {
@@ -375,32 +383,30 @@ var script$6 = defineComponent({
   }
 });
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+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$6.render = render$6;
-script$6.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-footer/OrDataGridTableFooter.vue";
+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',
-// 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({
+var script$6 = defineComponent({
   name: 'OrDataGridTableHeaderCell',
   components: {
-    OrIcon: script$e
+    OrIcon: script$f
   },
   model: {
     prop: 'modelValue',
@@ -418,6 +424,10 @@ var script$5 = defineComponent({
     features: {
       type: Object,
       default: undefined
+    },
+    truncate: {
+      type: Boolean,
+      default: true
     }
   },
   expose: ['root'],
@@ -500,27 +510,33 @@ var script$5 = defineComponent({
   }
 });
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1 = {
+  key: 0,
+  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())
-  }, [renderSlot(_ctx.$slots, "default"), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
-    key: 0,
+  }, [_ctx.truncate ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])) : renderSlot(_ctx.$slots, "default", {
+    key: 1
+  }), _ctx.model ? (openBlock(), createBlock(_component_OrIcon, {
+    key: 2,
     icon: _ctx.model.direction === 'asc' ? 'arrow_upward' : 'arrow_downward'
   }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)], 6 /* CLASS, STYLE */);
 }
 
-script$5.render = render$5;
-script$5.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue";
+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 col-span-full grid-cols-[subgrid]',
+'grid grid-cols-[subgrid] col-span-full',
 // Typography
 'typography-body-2-semibold',
 // Theme (children)
@@ -537,7 +553,7 @@ const DataGridTableHeaderRowVariants = {
   'h-[calc(theme(spacing.xl)+theme(spacing.xs))]']
 };
 
-var script$4 = defineComponent({
+var script$5 = defineComponent({
   name: 'OrDataGridTableHeaderRow',
   props: {
     variant: {
@@ -557,21 +573,21 @@ var script$4 = defineComponent({
   }
 });
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+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$4.render = render$4;
-script$4.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue";
+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$3 = defineComponent({
+var script$4 = defineComponent({
   name: 'OrDataGridTableHeader',
   expose: ['root'],
   setup() {
@@ -585,6 +601,57 @@ var script$3 = defineComponent({
   }
 });
 
+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 col-span-full',
+// 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',
@@ -593,7 +660,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 script$3.render = render$3;
-script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-header/OrDataGridTableHeader.vue";
+script$3.__file = "src/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue";
 
 const DataGridTable = [
 // Layout
@@ -623,15 +690,18 @@ var script$2 = defineComponent({
     const rootInlineStyles = computed(() => {
       const gridTemplateColumns = props.columns.map(column => {
         var _a;
+        if (isArray(column.width)) {
+          return `minmax(${column.width[0]}, ${column.width[1]})`;
+        }
         return (_a = column.width) !== null && _a !== void 0 ? _a : 'auto';
-      }).join(' ');
+      });
       if (props.features.selecting) {
         return {
-          gridTemplateColumns: `auto ${gridTemplateColumns}`
+          gridTemplateColumns: `auto ${gridTemplateColumns.join(' ')}`
         };
       }
       return {
-        gridTemplateColumns
+        gridTemplateColumns: gridTemplateColumns.join(' ')
       };
     });
     return {
@@ -692,22 +762,24 @@ const DataGrid = [
 var script = defineComponent({
   name: 'OrDataGrid',
   components: {
-    OrCheckbox: script$f,
-    OrDataGridFooter: script$d,
-    OrDataGridHeader: script$c,
+    OrCheckbox: script$g,
+    OrDataGridFooter: script$e,
+    OrDataGridHeader: script$d,
     OrDataGridTable: script$2,
-    OrDataGridTableContent: script$9,
-    OrDataGridTableContentCell: script$b,
-    OrDataGridTableContentRow: script$a,
-    OrDataGridTableFooter: script$6,
-    OrDataGridTableFooterCell: script$8,
-    OrDataGridTableFooterRow: script$7,
-    OrDataGridTableHeader: script$3,
-    OrDataGridTableHeaderCell: script$5,
-    OrDataGridTableHeaderRow: script$4,
+    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$g,
-    OrSearch: script$h
+    OrPagination: script$h,
+    OrSearch: script$i,
+    OrSkeletonText: script$j
   },
   model: {
     prop: 'modelValue',
@@ -733,6 +805,10 @@ var script = defineComponent({
     features: {
       type: Object,
       default: () => ({})
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -859,8 +935,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrDataGridTableHeaderCell = resolveComponent("OrDataGridTableHeaderCell");
   const _component_OrDataGridTableHeaderRow = resolveComponent("OrDataGridTableHeaderRow");
   const _component_OrDataGridTableHeader = resolveComponent("OrDataGridTableHeader");
+  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");
@@ -908,8 +986,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           default: withCtx(() => [createVNode(_component_OrCheckbox, {
             modelValue: _ctx.selectingIndicator,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.selectingIndicator = $event),
+            class: normalizeClass({
+              'invisible': _ctx.items.length === 0 || _ctx.loading
+            }),
             indeterminate: !_ctx.selectingIndicator && _ctx.selectingModel.length > 0
-          }, null, 8 /* PROPS */, ["modelValue", "indeterminate"])]),
+          }, null, 8 /* PROPS */, ["modelValue", "class", "indeterminate"])]),
           _: 1 /* STABLE */
         })) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, column => {
           return openBlock(), createBlock(_component_OrDataGridTableHeaderCell, {
@@ -929,7 +1010,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8 /* PROPS */, ["variant"])]),
       _: 1 /* STABLE */
     }), createVNode(_component_OrDataGridTableContent, null, {
-      default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, item => {
+      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,
+            truncate: false
+          }, {
+            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,
+              truncate: false
+            }, {
+              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,
@@ -961,8 +1071,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
           _: 2 /* DYNAMIC */
         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["variant", "selected"]);
-      }), 128 /* KEYED_FRAGMENT */))]),
-
+      }), 128 /* KEYED_FRAGMENT */)) : _ctx.$slots['empty'] ? (openBlock(), createBlock(_component_OrDataGridTablePlaceholder, {
+        key: 2,
+        variant: _ctx.variant
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, 'empty')]),
+        _: 3 /* FORWARDED */
+      }, 8 /* PROPS */, ["variant"])) : createCommentVNode("v-if", true)]),
       _: 3 /* FORWARDED */
     })]),
 

package/dist/bundled/v3/components/OrDateFormatV3/OrDateFormat.js

@@ -1 +1 @@
-export { s as default } from '../OrDateFormatV3-2d1668bd.js';
+export { s as default } from '../OrDateFormatV3-f3383cef.js';

package/dist/bundled/v3/components/OrDateFormatV3/index.js

@@ -1 +1 @@
-export { s as OrDateFormatV3 } from '../OrDateFormatV3-2d1668bd.js';
+export { s as OrDateFormatV3 } from '../OrDateFormatV3-f3383cef.js';

package/dist/bundled/v3/components/OrDateFormatV3/styles.js

@@ -1 +1 @@
-export { D as DateFormat } from '../OrDateFormatV3-2d1668bd.js';
+export { D as DateFormat } from '../OrDateFormatV3-f3383cef.js';