@onereach/ui-components 11.12.1 → 11.13.0

package/dist/esm/v2/components/index.js

@@ -34,8 +34,8 @@ export { _ as OrCombinedInputV3 } from '../OrCombinedInput-b30bea03.js';
 export { _ as OrConfirm } from '../OrConfirm-4b5fdad4.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-14da7c95.js';
 export { _ as OrContextMenuV3 } from '../OrContextMenu-8d7fdcaf.js';
-export { _ as OrDataGridV3 } from '../OrDataGrid-a554e707.js';
-export { D as DataGridVariant } from '../OrDataGridToolbar-dea2d5d8.js';
+export { _ as OrDataGridV3 } from '../OrDataGrid-08b3901b.js';
+export { D as DataGridVariant } from '../OrDataGridToolbar-1f5e8977.js';
 export { _ as OrDateFormatV3 } from '../OrDateFormat-0030848e.js';
 export { _ as OrDatePickerV3 } from '../OrDatePicker-0ec67c35.js';
 export { _ as OrDateRangePickerV3 } from '../OrDateRangePicker-5bdd0d06.js';
@@ -184,6 +184,9 @@ import '@codemirror/language';
 import '@lezer/highlight';
 import '../px-to-rem-0b26b83e.js';
 import '@vueuse/math';
+import '../OrSkeletonCircle.vue_rollup-plugin-vue_script-f572f02f.js';
+import '../styles-6d6a5cbe.js';
+import '../OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
 import '../useTimeFormat-7ad4cc11.js';
 import '../TIME_FORMAT-3d8aa6be.js';
 import '../OrDateTimePicker.vue_rollup-plugin-vue_script-05ce0145.js';
@@ -233,9 +236,6 @@ import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
 import '../searchItemsByLabel-c778a1e4.js';
-import '../OrSkeletonCircle.vue_rollup-plugin-vue_script-f572f02f.js';
-import '../styles-6d6a5cbe.js';
-import '../OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
 import '../OrSelectMultipleControl-8442548c.js';
 import '../isEqual-15f4b2f5.js';
 import '../OrSelectControlInput-51b43e18.js';

package/dist/esm/v2/components/or-data-grid-v3/OrDataGrid.vue.d.ts

@@ -37,6 +37,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<DataGridFeatures>;
         default: () => {};
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<DataGridModelValue>;
@@ -61,6 +65,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<DataGridFeatures>;
         default: () => {};
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: DataGridModelValue;
     items: {
@@ -70,6 +78,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     columns: DataGridColumn[];
     variant: DataGridVariant;
     features: DataGridFeatures;
+    loading: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -93,6 +102,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     columns: DataGridColumn[];
     variant: DataGridVariant;
     features: DataGridFeatures;
+    loading: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -103,5 +113,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }[];
     variant: DataGridVariant;
     features: DataGridFeatures;
+    loading: boolean;
 }, true>);
 export default _default;

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

@@ -1,5 +1,5 @@
-export { _ as OrDataGridV3 } from '../../OrDataGrid-a554e707.js';
-export { D as DataGridVariant } from '../../OrDataGridToolbar-dea2d5d8.js';
+export { _ as OrDataGridV3 } from '../../OrDataGrid-08b3901b.js';
+export { D as DataGridVariant } from '../../OrDataGridToolbar-1f5e8977.js';
 import 'vue-demi';
 import '../../OrCheckbox-38c828d0.js';
 import '../../useIdAttribute-3a339b79.js';
@@ -46,3 +46,9 @@ import '../../OrInput-51dd0d64.js';
 import '../../OrError-b25d782d.js';
 import '../../OrHint-2fe1157b.js';
 import '../../OrInputBox-240ef1d1.js';
+import '../../OrSkeletonCircle.vue_rollup-plugin-vue_script-f572f02f.js';
+import '../../px-to-rem-0b26b83e.js';
+import '../../styles-6d6a5cbe.js';
+import '../../OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
+import '../../OrSkeletonText-b6e51e70.js';
+import 'lodash/range';

package/dist/esm/v2/components/or-data-grid-v3/partials/index.d.ts

@@ -9,5 +9,6 @@ export { default as OrDataGridTableFooter } from './or-data-grid-table-footer/Or
 export { default as OrDataGridTableHeaderCell } from './or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue';
 export { default as OrDataGridTableHeaderRow } from './or-data-grid-table-header-row/OrDataGridTableHeaderRow.vue';
 export { default as OrDataGridTableHeader } from './or-data-grid-table-header/OrDataGridTableHeader.vue';
+export { default as OrDataGridTablePlaceholder } from './or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue';
 export { default as OrDataGridTable } from './or-data-grid-table/OrDataGridTable.vue';
 export { default as OrDataGridToolbar } from './or-data-grid-toolbar/OrDataGridToolbar.vue';

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

@@ -1,4 +1,8 @@
-export { _ as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridToolbar } from '../../../OrDataGridToolbar-dea2d5d8.js';
+export { _ as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-1f5e8977.js';
 import 'vue-demi';
 import '../../../normalize-component-6e8e3d80.js';
 import '../../../OrIcon-0a14dafc.js';
+import '../../../dom-53c9635b.js';
+import 'lodash/get';
+import 'lodash/isElement';
+import '../../../isArray-8eeb52b9.js';

package/dist/esm/v2/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue.d.ts

@@ -13,6 +13,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<DataGridFeatures>;
         default: undefined;
     };
+    truncate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     column: {
         type: PropType<DataGridColumn>;
@@ -22,9 +26,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<DataGridFeatures>;
         default: undefined;
     };
+    truncate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     column: DataGridColumn;
     features: DataGridFeatures;
+    truncate: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -32,8 +41,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
     column: DataGridColumn;
     features: DataGridFeatures;
+    truncate: boolean;
 } & {}, {
     column: DataGridColumn;
     features: DataGridFeatures;
+    truncate: boolean;
 }, true>);
 export default _default;

package/dist/esm/v2/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue.d.ts

@@ -25,6 +25,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<DataGridFeatures>;
         default: undefined;
     };
+    truncate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
         type: PropType<import("../../../..").ModelValue<{
@@ -41,6 +45,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<DataGridFeatures>;
         default: undefined;
     };
+    truncate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: import("../../../..").ModelValue<{
         column: string;
@@ -48,6 +56,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }>;
     column: DataGridColumn;
     features: DataGridFeatures;
+    truncate: boolean;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -64,6 +73,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }>;
     column: DataGridColumn;
     features: DataGridFeatures;
+    truncate: boolean;
 } & {}, {
     modelValue: import("../../../..").ModelValue<{
         column: string;
@@ -71,5 +81,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     }>;
     column: DataGridColumn;
     features: DataGridFeatures;
+    truncate: boolean;
 }, true>);
 export default _default;

package/dist/esm/v2/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/OrDataGridTablePlaceholder.vue.d.ts

@@ -0,0 +1,24 @@
+import { PropType } from 'vue-demi';
+import { DataGridVariant } from '../../types';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    variant: {
+        type: PropType<DataGridVariant>;
+        required: true;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    variant: {
+        type: PropType<DataGridVariant>;
+        required: true;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    variant: DataGridVariant;
+} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
+    root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
+    variant: DataGridVariant;
+} & {}, {}, true>);
+export default _default;

package/dist/esm/v2/components/or-data-grid-v3/partials/or-data-grid-table-placeholder/styles.d.ts

@@ -0,0 +1,3 @@
+import { DataGridVariant } from '../../types';
+export declare const DataGridTablePlaceholder: string[];
+export declare const DataGridTablePlaceholderVariants: Record<DataGridVariant, string[]>;

package/dist/esm/v2/components/or-data-grid-v3/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/esm/v2/components/or-text-v3/OrText.vue.d.ts

@@ -3,7 +3,7 @@
  * Ellipsis can be placed in the end or in the middle of the text. Convenient for displaying long labels,
  * that have same beginning and differ in the ending part.
  */
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     mainTextStyles: import("@vue/composition-api").ComputedRef<string[]>;
@@ -48,7 +48,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: number;
     };
-}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     text: string;
     sliceIndex: number;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{

package/dist/esm/v2/index.js

@@ -34,8 +34,8 @@ export { _ as OrCombinedInputV3 } from './OrCombinedInput-b30bea03.js';
 export { _ as OrConfirm } from './OrConfirm-4b5fdad4.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-14da7c95.js';
 export { _ as OrContextMenuV3 } from './OrContextMenu-8d7fdcaf.js';
-export { _ as OrDataGridV3 } from './OrDataGrid-a554e707.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-dea2d5d8.js';
+export { _ as OrDataGridV3 } from './OrDataGrid-08b3901b.js';
+export { D as DataGridVariant } from './OrDataGridToolbar-1f5e8977.js';
 export { _ as OrDateFormatV3 } from './OrDateFormat-0030848e.js';
 export { _ as OrDatePickerV3 } from './OrDatePicker-0ec67c35.js';
 export { _ as OrDateRangePickerV3 } from './OrDateRangePicker-5bdd0d06.js';
@@ -198,6 +198,9 @@ import '@codemirror/lang-markdown';
 import '@codemirror/language';
 import '@lezer/highlight';
 import '@vueuse/math';
+import './OrSkeletonCircle.vue_rollup-plugin-vue_script-f572f02f.js';
+import './styles-6d6a5cbe.js';
+import './OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
 import './OrDateTimePicker.vue_rollup-plugin-vue_script-05ce0145.js';
 import 'lodash/padStart';
 import './OrEditorTabsItem-90b4650b.js';
@@ -236,9 +239,6 @@ import './codemirrorView-7e243a9d.js';
 import 'prosemirror-state';
 import 'prosemirror-commands';
 import 'lodash/keyBy';
-import './OrSkeletonCircle.vue_rollup-plugin-vue_script-f572f02f.js';
-import './styles-6d6a5cbe.js';
-import './OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
 import './OrSelectMultipleControl-8442548c.js';
 import './OrSelectControlInput-51b43e18.js';
 import './OrSelectPlaceholder-a6caa9e0.js';

package/dist/esm/v3/{OrDataGrid-40a36949.js → OrDataGrid-727b63c7.js}

@@ -1,8 +1,11 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { s as script$1 } from './OrCheckbox-84a9c024.js';
-import { s as script$f } from './OrPagination-37ac94d3.js';
-import { s as script$g } from './OrSearch-f8cd6609.js';
-import { s as script$2, a as script$3, b as script$4, c as script$5, d as script$6, e as script$7, f as script$8, g as script$9, h as script$a, i as script$b, j as script$c, k as script$d, l as script$e, D as DataGridVariant } from './OrDataGridToolbar-f9e9f135.js';
+import { s as script$g } from './OrPagination-37ac94d3.js';
+import { s as script$h } from './OrSearch-f8cd6609.js';
+import './OrSkeletonCircle-a3eb5f53.js';
+import './OrSkeletonRect-d0b8b2cf.js';
+import { s as script$i } from './OrSkeletonText-5e9579c1.js';
+import { s as script$2, a as script$3, b as script$4, c as script$5, d as script$6, e as script$7, f as script$8, g as script$9, h as script$a, i as script$b, j as script$c, k as script$d, l as script$e, m as script$f, D as DataGridVariant } from './OrDataGridToolbar-993e4fb0.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createSlots, withCtx, renderSlot, createVNode, createCommentVNode, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
 
 const DataGrid = [
@@ -25,9 +28,11 @@ var script = defineComponent({
     OrDataGridTableHeader: script$b,
     OrDataGridTableHeaderCell: script$c,
     OrDataGridTableHeaderRow: script$d,
-    OrDataGridToolbar: script$e,
-    OrPagination: script$f,
-    OrSearch: script$g
+    OrDataGridTablePlaceholder: script$e,
+    OrDataGridToolbar: script$f,
+    OrPagination: script$g,
+    OrSearch: script$h,
+    OrSkeletonText: script$i
   },
   model: {
     prop: 'modelValue',
@@ -53,6 +58,10 @@ var script = defineComponent({
     features: {
       type: Object,
       default: () => ({})
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -179,8 +188,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");
@@ -228,8 +239,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, {
@@ -249,7 +263,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,
@@ -281,8 +324,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 */
     })]),