design-system-next 2.11.22 → 2.12.1

package/src/components/table/table-pagination/table-pagination.vue

@@ -1,72 +1,72 @@
-<template>
-  <div :class="paginationClasses.baseClass">
-    <spr-dropdown
-      :id="dropdownId"
-      :menu-list="dropdownSelection"
-      dropdown-type="single-select"
-      placement="bottom"
-      :class="paginationClasses.dropdownClass"
-      @update:model-value="handleSelectedItem"
-    >
-      <spr-input v-model="computeSelectedRowCount" :class="paginationClasses.dropdownInputFieldClass" :readonly="true">
-        <template #icon>
-          <Icon icon="ph:caret-down-bold" :class="paginationClasses.inputFieldIconClass" />
-        </template>
-      </spr-input>
-    </spr-dropdown>
-
-    <div :class="paginationClasses.rightSideClass">
-      <div :class="paginationClasses.computeRowRangeClass">
-        {{ computeRowRange }}
-      </div>
-      <div :class="paginationClasses.navigationContainerClass">
-        <spr-button
-          id="previousButton"
-          has-icon
-          :class="paginationClasses.navigationButtonClass"
-          :disabled="disabledNext"
-          @click="previous"
-        >
-          <Icon icon="ph:caret-left" />
-        </spr-button>
-        <spr-button
-          id="nextButton"
-          has-icon
-          :class="paginationClasses.navigationButtonClass"
-          :disabled="disabledPrevious"
-          @click="next"
-        >
-          <Icon icon="ph:caret-right" />
-        </spr-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
-import { tablePaginationEmitTypes, tablePaginationPropTypes } from './table-pagination';
-import { useTablePagination } from './use-table-pagination';
-
-import SprInput from '@/components/input/input.vue';
-import SprButton from '@/components/button/button.vue';
-import SprDropdown from '@/components/dropdown/dropdown.vue';
-
-const emit = defineEmits(tablePaginationEmitTypes);
-
-const props = defineProps(tablePaginationPropTypes);
-
-const {
-  paginationClasses,
-  handleSelectedItem,
-  computeRowRange,
-  computeSelectedRowCount,
-  next,
-  previous,
-  disabledNext,
-  disabledPrevious,
-  dropdownSelection,
-  dropdownId,
-} = useTablePagination(props, emit);
-</script>
+<template>
+  <div :class="paginationClasses.baseClass">
+    <spr-dropdown
+      :id="dropdownId"
+      :menu-list="dropdownSelection"
+      dropdown-type="single-select"
+      placement="bottom"
+      :class="paginationClasses.dropdownClass"
+      @update:model-value="handleSelectedItem"
+    >
+      <spr-input v-model="computeSelectedRowCount" :class="paginationClasses.dropdownInputFieldClass" :readonly="true">
+        <template #icon>
+          <Icon icon="ph:caret-down-bold" :class="paginationClasses.inputFieldIconClass" />
+        </template>
+      </spr-input>
+    </spr-dropdown>
+
+    <div :class="paginationClasses.rightSideClass">
+      <div :class="paginationClasses.computeRowRangeClass">
+        {{ computeRowRange }}
+      </div>
+      <div :class="paginationClasses.navigationContainerClass">
+        <spr-button
+          id="previousButton"
+          has-icon
+          :class="paginationClasses.navigationButtonClass"
+          :disabled="disabledNext"
+          @click="previous"
+        >
+          <Icon icon="ph:caret-left" />
+        </spr-button>
+        <spr-button
+          id="nextButton"
+          has-icon
+          :class="paginationClasses.navigationButtonClass"
+          :disabled="disabledPrevious"
+          @click="next"
+        >
+          <Icon icon="ph:caret-right" />
+        </spr-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+import { tablePaginationEmitTypes, tablePaginationPropTypes } from './table-pagination';
+import { useTablePagination } from './use-table-pagination';
+
+import SprInput from '@/components/input/input.vue';
+import SprButton from '@/components/button/button.vue';
+import SprDropdown from '@/components/dropdown/dropdown.vue';
+
+const emit = defineEmits(tablePaginationEmitTypes);
+
+const props = defineProps(tablePaginationPropTypes);
+
+const {
+  paginationClasses,
+  handleSelectedItem,
+  computeRowRange,
+  computeSelectedRowCount,
+  next,
+  previous,
+  disabledNext,
+  disabledPrevious,
+  dropdownSelection,
+  dropdownId,
+} = useTablePagination(props, emit);
+</script>

package/src/components/table/table.ts

@@ -1,173 +1,173 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { ChipTitle } from '@/components/table/table-chips-title/table-chips-title';
-import type { LozengeTitle } from '@/components/table/table-lozenge-title/table-lozenge-title';
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-interface Header {
-  field: string;
-  name: string;
-  sort: boolean;
-  hasAvatar: boolean;
-  hasIcon: boolean;
-  hasSubtext: boolean;
-  hasLozengeTitle: boolean;
-  hasChipTitle: boolean;
-  badgeText: string;
-  badgeVariant: string;
-  avatarVariant: string;
-}
-
-export interface TableData {
-  [key: string]: TableDataProps | string | number;
-}
-
-export interface TableDataProps {
-  title: string | LozengeTitle | ChipTitle | LozengeTitle[] | ChipTitle[];
-  subtext?: string;
-  image?: string;
-  icon?: string;
-}
-
-interface EmptyState {
-  description: string;
-  subDescription: string;
-  image: string;
-  size: 'small' | 'large';
-}
-
-interface TableActions {
-  search: boolean;
-  filter: boolean;
-  option: boolean;
-}
-
-interface SortEvent {
-  field: string;
-  sortOrder: TABLE_SORT;
-}
-
-const TABLE_SORT = ['asc', 'desc'] as const;
-const TABLE_VARIANT = ['surface', 'white'] as const;
-export type TABLE_SORT = (typeof TABLE_SORT)[number];
-
-export const tablePropTypes = {
-  /**
-   * @description Action Column,
-   */
-  action: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  /**
-   * @description Table Values
-   */
-  dataTable: {
-    type: Array as PropType<TableData[]>,
-    default: false,
-  },
-  /**
-   * @description Table Headers
-   */
-  headers: {
-    type: Array as PropType<Header[]>,
-    required: true,
-    default: () => [],
-  },
-  emptyState: {
-    type: Object as PropType<EmptyState>,
-    default: () => ({
-      description: 'No results found',
-      subDescription: 'Try a different search term',
-      image: 'location',
-      size: 'large',
-    }),
-  },
-  emptyStateCustomClasses: {
-    type: String,
-    default: ''
-  },
-  tableActionSlotCustomClasses: {
-    type: String,
-    default: ''
-  },
-  loading: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-
-  /**
-   * @description Table Actions
-   */
-  tableActions: {
-    type: Object as PropType<TableActions>,
-    default: () => ({
-      search: false,
-      filter: false,
-      option: false,
-    }),
-  },
-
-  /**
-   * @description Search variable
-   *
-   */
-  searchModel: {
-    type: String as PropType<string>,
-    default: '',
-  },
-
-  sortOrder: {
-    type: String as PropType<(typeof TABLE_SORT)[number]>,
-    validator: (value: (typeof TABLE_SORT)[number]) => TABLE_SORT.includes(value),
-    default: 'asc'
-  },
-
-  variant: {
-    type: String as PropType<(typeof TABLE_VARIANT)[number]>,
-    validator: (value: (typeof TABLE_VARIANT)[number]) => TABLE_VARIANT.includes(value),
-    default: 'surface',
-  },
-
-  isRowClickable: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  fullHeight: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  removeHeaderOnEmpty: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  isMultiSelect: {
-    type: Boolean,
-    default: false,
-  },
-  selectedKeyId: {
-    type: String,
-    default: '',
-  },
-  returnCompleteSelectedProperties: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const tableEmitTypes = {
-  'update:searchModel': (value: string): value is string => typeof value === 'string',
-  onSort: (value: SortEvent): value is SortEvent =>
-    typeof value.field === 'string' && TABLE_SORT.includes(value.sortOrder),
-  onRowClick: (rowData: TableData, rowKey: number): rowData is TableData =>
-    typeof rowData === 'object' && typeof rowKey === 'number',
-  onHover: (value: { active: boolean; data: TableData }): value is { active: boolean; data: TableData } =>
-    typeof value.active === 'boolean' && typeof value.data === 'object',
-  'update:selectedData': (value: (string | number | TableDataProps)[] | TableData[]) =>
-    Array.isArray(value) &&
-    value.every(
-      (item) => (typeof item === 'object' || typeof item === 'string' || typeof item === 'number') && item !== null,
-    ),
-};
-
-export type TablePropTypes = ExtractPropTypes<typeof tablePropTypes>;
-export type TableEmitTypes = typeof tableEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { ChipTitle } from '@/components/table/table-chips-title/table-chips-title';
+import type { LozengeTitle } from '@/components/table/table-lozenge-title/table-lozenge-title';
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+interface Header {
+  field: string;
+  name: string;
+  sort: boolean;
+  hasAvatar: boolean;
+  hasIcon: boolean;
+  hasSubtext: boolean;
+  hasLozengeTitle: boolean;
+  hasChipTitle: boolean;
+  badgeText: string;
+  badgeVariant: string;
+  avatarVariant: string;
+}
+
+export interface TableData {
+  [key: string]: TableDataProps | string | number;
+}
+
+export interface TableDataProps {
+  title: string | LozengeTitle | ChipTitle | LozengeTitle[] | ChipTitle[];
+  subtext?: string;
+  image?: string;
+  icon?: string;
+}
+
+interface EmptyState {
+  description: string;
+  subDescription: string;
+  image: string;
+  size: 'small' | 'large';
+}
+
+interface TableActions {
+  search: boolean;
+  filter: boolean;
+  option: boolean;
+}
+
+interface SortEvent {
+  field: string;
+  sortOrder: TABLE_SORT;
+}
+
+const TABLE_SORT = ['asc', 'desc'] as const;
+const TABLE_VARIANT = ['surface', 'white'] as const;
+export type TABLE_SORT = (typeof TABLE_SORT)[number];
+
+export const tablePropTypes = {
+  /**
+   * @description Action Column,
+   */
+  action: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  /**
+   * @description Table Values
+   */
+  dataTable: {
+    type: Array as PropType<TableData[]>,
+    default: false,
+  },
+  /**
+   * @description Table Headers
+   */
+  headers: {
+    type: Array as PropType<Header[]>,
+    required: true,
+    default: () => [],
+  },
+  emptyState: {
+    type: Object as PropType<EmptyState>,
+    default: () => ({
+      description: 'No results found',
+      subDescription: 'Try a different search term',
+      image: 'location',
+      size: 'large',
+    }),
+  },
+  emptyStateCustomClasses: {
+    type: String,
+    default: ''
+  },
+  tableActionSlotCustomClasses: {
+    type: String,
+    default: ''
+  },
+  loading: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+
+  /**
+   * @description Table Actions
+   */
+  tableActions: {
+    type: Object as PropType<TableActions>,
+    default: () => ({
+      search: false,
+      filter: false,
+      option: false,
+    }),
+  },
+
+  /**
+   * @description Search variable
+   *
+   */
+  searchModel: {
+    type: String as PropType<string>,
+    default: '',
+  },
+
+  sortOrder: {
+    type: String as PropType<(typeof TABLE_SORT)[number]>,
+    validator: (value: (typeof TABLE_SORT)[number]) => TABLE_SORT.includes(value),
+    default: 'asc'
+  },
+
+  variant: {
+    type: String as PropType<(typeof TABLE_VARIANT)[number]>,
+    validator: (value: (typeof TABLE_VARIANT)[number]) => TABLE_VARIANT.includes(value),
+    default: 'surface',
+  },
+
+  isRowClickable: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  fullHeight: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  removeHeaderOnEmpty: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  isMultiSelect: {
+    type: Boolean,
+    default: false,
+  },
+  selectedKeyId: {
+    type: String,
+    default: '',
+  },
+  returnCompleteSelectedProperties: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const tableEmitTypes = {
+  'update:searchModel': (value: string): value is string => typeof value === 'string',
+  onSort: (value: SortEvent): value is SortEvent =>
+    typeof value.field === 'string' && TABLE_SORT.includes(value.sortOrder),
+  onRowClick: (rowData: TableData, rowKey: number): rowData is TableData =>
+    typeof rowData === 'object' && typeof rowKey === 'number',
+  onHover: (value: { active: boolean; data: TableData }): value is { active: boolean; data: TableData } =>
+    typeof value.active === 'boolean' && typeof value.data === 'object',
+  'update:selectedData': (value: (string | number | TableDataProps)[] | TableData[]) =>
+    Array.isArray(value) &&
+    value.every(
+      (item) => (typeof item === 'object' || typeof item === 'string' || typeof item === 'number') && item !== null,
+    ),
+};
+
+export type TablePropTypes = ExtractPropTypes<typeof tablePropTypes>;
+export type TableEmitTypes = typeof tableEmitTypes;

package/src/components/tabs/tabs.ts

@@ -1,43 +1,43 @@
-import type { PropType, ExtractPropTypes, Component } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-type List = {
-  label: string;
-  icon?: string;
-  iconFill?: Component;
-  disabled?: boolean;
-};
-
-export const tabsPropTypes = {
-  /**
-   * @description Tabs List,
-   * option list: label, icon, iconFill, disabled
-   */
-  list: {
-    type: Array<List>,
-    default: () => [],
-  },
-  /**
-   * @description Tabs Type (underlined, not underlined)
-   */
-  underlined: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description Active Tab
-   */
-  activeTab: {
-    type: String,
-    default: '',
-  },
-};
-
-export const tabsEmitTypes = {
-  tabIndex: (index: number): index is number => typeof index === 'number',
-};
-
-export type TabsPropTypes = ExtractPropTypes<typeof tabsPropTypes>;
-
-export type TabsEmitTypes = typeof tabsEmitTypes;
+import type { PropType, ExtractPropTypes, Component } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+type List = {
+  label: string;
+  icon?: string;
+  iconFill?: Component;
+  disabled?: boolean;
+};
+
+export const tabsPropTypes = {
+  /**
+   * @description Tabs List,
+   * option list: label, icon, iconFill, disabled
+   */
+  list: {
+    type: Array<List>,
+    default: () => [],
+  },
+  /**
+   * @description Tabs Type (underlined, not underlined)
+   */
+  underlined: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Active Tab
+   */
+  activeTab: {
+    type: String,
+    default: '',
+  },
+};
+
+export const tabsEmitTypes = {
+  tabIndex: (index: number): index is number => typeof index === 'number',
+};
+
+export type TabsPropTypes = ExtractPropTypes<typeof tabsPropTypes>;
+
+export type TabsEmitTypes = typeof tabsEmitTypes;