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

package/src/components/or-data-grid-v3/OrDataGrid.vue

@@ -1,309 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-  >
-    <OrDataGridHeader
-      :class="['shrink-0']"
-    >
-      <template
-        v-if="$slots['title']"
-        v-slot:title
-      >
-        <slot :name="'title'" />
-      </template>
-
-      <template
-        v-if="features.searching"
-        v-slot:searching
-      >
-        <OrSearch v-model="searchingModel" />
-      </template>
-    </OrDataGridHeader>
-
-    <template v-if="$slots['toolbar']">
-      <OrDataGridToolbar
-        :class="['shrink-0']"
-      >
-        <slot :name="'toolbar'" />
-      </OrDataGridToolbar>
-    </template>
-
-    <OrDataGridTable
-      :class="['grow']"
-      :columns="columns"
-      :features="features"
-    >
-      <OrDataGridTableHeader>
-        <OrDataGridTableHeaderRow
-          :variant="variant"
-        >
-          <template v-if="features.selecting">
-            <OrDataGridTableHeaderCell />
-          </template>
-
-          <OrDataGridTableHeaderCell
-            v-for="column of columns"
-            :key="column.name"
-            v-model="sortingModel"
-            :column="column"
-            :features="features"
-          >
-            {{ column.label }}
-          </OrDataGridTableHeaderCell>
-        </OrDataGridTableHeaderRow>
-      </OrDataGridTableHeader>
-
-      <OrDataGridTableContent>
-        <OrDataGridTableContentRow
-          v-for="item of items"
-          :key="item.id"
-          :variant="variant"
-          :selected="selectingModel.includes(item.id)"
-        >
-          <template v-if="features.selecting">
-            <OrDataGridTableContentCell>
-              <OrCheckbox
-                v-model="selectingModel"
-                :value="item.id"
-              />
-            </OrDataGridTableContentCell>
-          </template>
-
-          <OrDataGridTableContentCell
-            v-for="column of columns"
-            :key="column.name"
-            :column="column"
-            :features="features"
-          >
-            <slot
-              :name="column.name"
-              :column="column"
-              :item="item"
-            >
-              {{ item[column.name] }}
-            </slot>
-          </OrDataGridTableContentCell>
-        </OrDataGridTableContentRow>
-      </OrDataGridTableContent>
-    </OrDataGridTable>
-
-    <template v-if="$slots['extra-row']">
-      <OrDataGridTableFooter>
-        <OrDataGridTableFooterRow
-          :variant="variant"
-        >
-          <OrDataGridTableFooterCell>
-            <slot :name="'extra-row'" />
-          </OrDataGridTableFooterCell>
-        </OrDataGridTableFooterRow>
-      </OrDataGridTableFooter>
-    </template>
-
-    <OrDataGridFooter
-      :class="['shrink-0']"
-    >
-      <template
-        v-if="features.selecting && selectingModel.length > 0"
-        v-slot:status
-      >
-        {{ selectingModel.length }} row(s) selected
-      </template>
-
-      <template
-        v-if="$slots['actions']"
-        v-slot:actions
-      >
-        <slot :name="'actions'" />
-      </template>
-
-      <template
-        v-if="features.paging"
-        v-slot:paging
-      >
-        <OrPagination
-          v-model="pagingModel"
-          :length="features.paging.length"
-          :options="features.paging.options"
-        />
-      </template>
-    </OrDataGridFooter>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
-import { DataModel, Id } from '../../types';
-import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
-import { OrPaginationV3 as OrPagination } from '../or-pagination-v3';
-import { OrSearchV3 as OrSearch } from '../or-search-v3';
-import * as Partials from './partials';
-import * as Styles from './styles';
-import { DataGridColumn, DataGridFeatures, DataGridItem, DataGridModelValue, DataGridVariant } from './types';
-
-// Vue 2 doesn't support generically typed components
-type T = DataModel<{ id: Id; [key: string]: unknown; }>;
-
-export default defineComponent({
-  name: 'OrDataGrid',
-
-  components: {
-    OrCheckbox,
-    OrDataGridFooter: Partials.OrDataGridFooter,
-    OrDataGridHeader: Partials.OrDataGridHeader,
-    OrDataGridTable: Partials.OrDataGridTable,
-    OrDataGridTableContent: Partials.OrDataGridTableContent,
-    OrDataGridTableContentCell: Partials.OrDataGridTableContentCell,
-    OrDataGridTableContentRow: Partials.OrDataGridTableContentRow,
-    OrDataGridTableFooter: Partials.OrDataGridTableFooter,
-    OrDataGridTableFooterCell: Partials.OrDataGridTableFooterCell,
-    OrDataGridTableFooterRow: Partials.OrDataGridTableFooterRow,
-    OrDataGridTableHeader: Partials.OrDataGridTableHeader,
-    OrDataGridTableHeaderCell: Partials.OrDataGridTableHeaderCell,
-    OrDataGridTableHeaderRow: Partials.OrDataGridTableHeaderRow,
-    OrDataGridToolbar: Partials.OrDataGridToolbar,
-    OrPagination,
-    OrSearch,
-  },
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: undefined as unknown as PropType<DataGridModelValue>,
-      default: undefined,
-    },
-
-    items: {
-      type: Array as PropType<DataGridItem<T>[]>,
-      default: () => [],
-    },
-
-    columns: {
-      type: Array as PropType<DataGridColumn[]>,
-      required: true,
-    },
-
-    variant: {
-      type: String as PropType<DataGridVariant>,
-      default: () => DataGridVariant.Standard,
-    },
-
-    features: {
-      type: Object as PropType<DataGridFeatures>,
-      default: () => ({}),
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-  ],
-
-  expose: [
-    'root',
-  ],
-
-  setup(props, context) {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-data-grid-v3',
-      ...Styles.DataGrid,
-    ]);
-
-    // State
-    const selectingModel = computed({
-      get: () => props.modelValue?.selecting ?? [],
-
-      set: (value) => {
-        context.emit('update:modelValue', {
-          selecting: value,
-          filtering: filteringModel.value,
-          searching: searchingModel.value,
-          sorting: sortingModel.value,
-          paging: pagingModel.value,
-        } as DataGridModelValue);
-      },
-    });
-
-    const filteringModel = computed({
-      get: () => props.modelValue?.filtering,
-
-      set: (value) => {
-        context.emit('update:modelValue', {
-          selecting: selectingModel.value,
-          filtering: value,
-          searching: searchingModel.value,
-          sorting: sortingModel.value,
-
-          paging: {
-            ...pagingModel.value,
-            offset: 0,
-          },
-        } as DataGridModelValue);
-      },
-    });
-
-    const searchingModel = computed({
-      get: () => props.modelValue?.searching,
-
-      set: (value) => {
-        context.emit('update:modelValue', {
-          selecting: selectingModel.value,
-          filtering: filteringModel.value,
-          searching: value,
-          sorting: sortingModel.value,
-
-          paging: {
-            ...pagingModel.value,
-            offset: 0,
-          },
-        } as DataGridModelValue);
-      },
-    });
-
-    const sortingModel = computed({
-      get: () => props.modelValue?.sorting,
-
-      set: (value) => {
-        context.emit('update:modelValue', {
-          selecting: selectingModel.value,
-          filtering: filteringModel.value,
-          searching: searchingModel.value,
-          sorting: value,
-          paging: pagingModel.value,
-        } as DataGridModelValue);
-      },
-    });
-
-    const pagingModel = computed({
-      get: () => props.modelValue?.paging,
-
-      set: (value) => {
-        context.emit('update:modelValue', {
-          selecting: selectingModel.value,
-          filtering: filteringModel.value,
-          searching: searchingModel.value,
-          sorting: sortingModel.value,
-          paging: value,
-        } as DataGridModelValue);
-      },
-    });
-
-    return {
-      root,
-      rootStyles,
-
-      selectingModel,
-      filteringModel,
-      searchingModel,
-      sortingModel,
-      pagingModel,
-    };
-  },
-});
-</script>

package/src/components/or-data-grid-v3/index.ts

@@ -1,2 +0,0 @@
-export { default as OrDataGridV3 } from './OrDataGrid.vue';
-export * from './types';

package/src/components/or-data-grid-v3/partials/index.ts

@@ -1,13 +0,0 @@
-export { default as OrDataGridFooter } from './or-data-grid-footer/OrDataGridFooter.vue';
-export { default as OrDataGridHeader } from './or-data-grid-header/OrDataGridHeader.vue';
-export { default as OrDataGridTableContentCell } from './or-data-grid-table-content-cell/OrDataGridTableContentCell.vue';
-export { default as OrDataGridTableContentRow } from './or-data-grid-table-content-row/OrDataGridTableContentRow.vue';
-export { default as OrDataGridTableContent } from './or-data-grid-table-content/OrDataGridTableContent.vue';
-export { default as OrDataGridTableFooterCell } from './or-data-grid-table-footer-cell/OrDataGridTableFooterCell.vue';
-export { default as OrDataGridTableFooterRow } from './or-data-grid-table-footer-row/OrDataGridTableFooterRow.vue';
-export { default as OrDataGridTableFooter } from './or-data-grid-table-footer/OrDataGridTableFooter.vue';
-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 OrDataGridTable } from './or-data-grid-table/OrDataGridTable.vue';
-export { default as OrDataGridToolbar } from './or-data-grid-toolbar/OrDataGridToolbar.vue';

package/src/components/or-data-grid-v3/partials/or-data-grid-footer/OrDataGridFooter.vue

@@ -1,54 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-  >
-    <template v-if="$slots['status']">
-      <div :class="statusStyles">
-        <slot :name="'status'" />
-      </div>
-    </template>
-
-    <slot :name="'actions'" />
-
-    <template v-if="$slots['paging']">
-      <div :class="['grow']" />
-    </template>
-
-    <slot :name="'paging'" />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import * as Styles from './styles';
-
-export default defineComponent({
-  name: 'OrDataGridFooter',
-
-  expose: [
-    'root',
-  ],
-
-  setup() {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-data-grid-footer-v3',
-      ...Styles.DataGridFooter,
-    ]);
-
-    const statusStyles = computed(() => [
-      ...Styles.DataGridFooterStatus,
-    ]);
-
-    return {
-      root,
-      rootStyles,
-
-      statusStyles,
-    };
-  },
-});
-</script>

package/src/components/or-data-grid-v3/partials/or-data-grid-footer/styles.ts

@@ -1,28 +0,0 @@
-export const DataGridFooter: string[] = [
-  // 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',
-];
-
-export const DataGridFooterStatus: string[] = [
-  // Typography
-  'typography-body-2-semibold',
-];

package/src/components/or-data-grid-v3/partials/or-data-grid-header/OrDataGridHeader.vue

@@ -1,52 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-  >
-    <template v-if="$slots['title']">
-      <div :class="titleStyles">
-        <slot :name="'title'" />
-      </div>
-    </template>
-
-    <template v-if="$slots['searching']">
-      <div :class="['grow']" />
-    </template>
-
-    <slot :name="'searching'" />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import * as Styles from './styles';
-
-export default defineComponent({
-  name: 'OrDataGridHeader',
-
-  expose: [
-    'root',
-  ],
-
-  setup() {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-data-grid-header-v3',
-      ...Styles.DataGridHeader,
-    ]);
-
-    const titleStyles = computed(() => [
-      ...Styles.DataGridHeaderTitle,
-    ]);
-
-    return {
-      root,
-      rootStyles,
-
-      titleStyles,
-    };
-  },
-});
-</script>

package/src/components/or-data-grid-v3/partials/or-data-grid-header/styles.ts

@@ -1,18 +0,0 @@
-export const DataGridHeader: string[] = [
-  // Layout
-  'layout-row items-start',
-
-  // Layout (empty)
-  'empty:hidden',
-
-  // Interactivity
-  'interactivity-default',
-
-  // Box
-  'h-3xl',
-];
-
-export const DataGridHeaderTitle: string[] = [
-  // Typography
-  'typography-headline-2',
-];

package/src/components/or-data-grid-v3/partials/or-data-grid-table/OrDataGridTable.vue

@@ -1,61 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-    :style="rootInlineStyles"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
-import { DataGridColumn, DataGridFeatures } from '../../types';
-import * as Styles from './styles';
-
-export default defineComponent({
-  name: 'OrDataGridTable',
-
-  props: {
-    columns: {
-      type: Array as PropType<DataGridColumn[]>,
-      required: true,
-    },
-
-    features: {
-      type: Object as PropType<DataGridFeatures>,
-      required: true,
-    },
-  },
-
-  expose: [
-    'root',
-  ],
-
-  setup(props) {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-data-grid-table-v3',
-      ...Styles.DataGridTable,
-    ]);
-
-    const rootInlineStyles = computed(() => {
-      const gridTemplateColumns = props.columns.map((column) => column.width ?? 'auto').join(' ');
-
-      if (props.features.selecting) {
-        return { gridTemplateColumns: `auto ${gridTemplateColumns}` };
-      }
-
-      return { gridTemplateColumns };
-    });
-
-    return {
-      root,
-      rootStyles,
-      rootInlineStyles,
-    };
-  },
-});
-</script>

package/src/components/or-data-grid-v3/partials/or-data-grid-table/styles.ts

@@ -1,10 +0,0 @@
-export const DataGridTable: string[] = [
-  // Layout
-  'grid content-start',
-
-  // Overflow
-  'overflow-auto',
-
-  // Interactivity
-  'interactivity-default',
-];

package/src/components/or-data-grid-v3/partials/or-data-grid-table-content/OrDataGridTableContent.vue

@@ -1,36 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
-import * as Styles from './styles';
-
-export default defineComponent({
-  name: 'OrDataGridTableContent',
-
-  expose: [
-    'root',
-  ],
-
-  setup() {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-data-grid-table-content-v3',
-      ...Styles.DataGridTableContent,
-    ]);
-
-    return {
-      root,
-      rootStyles,
-    };
-  },
-});
-</script>

package/src/components/or-data-grid-v3/partials/or-data-grid-table-content/styles.ts

@@ -1,4 +0,0 @@
-export const DataGridTableContent: string[] = [
-  // Layout
-  'contents',
-];

package/src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue

@@ -1,84 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-    :style="rootInlineStyles"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
-import { DataGridColumn, DataGridFeatures } from '../../types';
-import * as Styles from './styles';
-
-export default defineComponent({
-  name: 'OrDataGridTableContentCell',
-
-  props: {
-    column: {
-      type: Object as PropType<DataGridColumn>,
-      default: undefined,
-    },
-
-    features: {
-      type: Object as PropType<DataGridFeatures>,
-      default: undefined,
-    },
-  },
-
-  expose: [
-    'root',
-  ],
-
-  setup(props) {
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-data-grid-table-content-cell-v3',
-      ...Styles.DataGridTableContentCell,
-      ...props.column?.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,
-            } as Partial<CSSStyleDeclaration>;
-
-          case 'end':
-            return {
-              position: 'sticky',
-              insetInlineEnd: '0',
-              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
-              justifyContent: props.column.alignment,
-            } as Partial<CSSStyleDeclaration>;
-
-          default:
-            return {
-              flexDirection: props.column.alignment === 'end' ? 'row-reverse' : undefined,
-              justifyContent: props.column.alignment,
-            } as Partial<CSSStyleDeclaration>;
-        }
-      }
-
-      return {
-        justifyContent: 'center',
-      } as Partial<CSSStyleDeclaration>;
-    });
-
-    return {
-      root,
-      rootStyles,
-      rootInlineStyles,
-    };
-  },
-});
-</script>