design-system-next 2.12.1 → 2.12.6

package/src/components/table/table.ts

@@ -1,173 +1,174 @@
-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>;
+
+export interface Header {
+  field: string;
+  name: string;
+  sort: boolean;
+  hasAvatar: boolean;
+  hasIcon: boolean;
+  hasSubtext: boolean;
+  hasLozengeTitle: boolean;
+  hasChipTitle: boolean;
+  badgeText: string;
+  badgeVariant: string;
+  avatarVariant: string;
+  customTailwindClasses?: 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/table/table.vue

@@ -21,7 +21,7 @@
       <table aria-describedby="describe" class="spr-h-full spr-w-full spr-table-fixed" cellspacing="0" cellpadding="0">
         <thead>
           <tr v-if="!(props.removeHeaderOnEmpty && sortedData.length <= 0)">
-            <th v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.headerClasses]">
+            <th v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.headerClasses(null)]">
               <div class="spr-flex spr-items-center spr-justify-center">
                 <spr-checkbox
                   label=""
@@ -31,7 +31,7 @@
                 />
               </div>
             </th>
-            <th v-for="(header, keyHeader) in headers" :key="keyHeader" :class="[getTableClasses.headerClasses]">
+            <th v-for="(header, keyHeader) in headers" :key="keyHeader" :class="[getTableClasses.headerClasses(header)]">
               <div :class="getTableClasses.headerNameClass">
                 <span :class="[{ 'spr-cursor-pointer': header.sort }]" @click="header.sort && sortData(header.field)">
                   {{ header.name }}

package/src/components/table/use-table.ts

@@ -1,6 +1,6 @@
 import { ref, computed, toRefs, Slots, watch } from 'vue';
 
-import type { TablePropTypes, TableEmitTypes, TABLE_SORT, TableData, TableDataProps } from './table';
+import type { TablePropTypes, TableEmitTypes, TABLE_SORT, TableData, TableDataProps, Header } from './table';
 import type { SetupContext } from 'vue';
 
 import classNames from 'classnames';
@@ -96,15 +96,20 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       'spr-background-color': props.variant === 'white',
       'spr-background-color-surface': props.variant === 'surface',
     });
-    const headerClasses = classNames(
-      'spr-min-h-12 spr-px-size-spacing-2xs spr-py-size-spacing-3xs',
-      'spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase',
-      'spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid',
-      {
-        'spr-border-t-0': !slots.default,
+    const headerClasses = (header: Header | null) => {
+      if (header?.customTailwindClasses){
+        return classNames(header.customTailwindClasses);
+      }
+
+      return classNames(
+        'spr-min-h-12 spr-px-size-spacing-2xs spr-py-size-spacing-3xs',
+        'spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase',
+        'spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid',
+        {
+          'spr-border-t-0': !slots.default,
       },
       headerBackground,
-    );
+    )};
 
     const headerNameClass = 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs';
 

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;

package/src/components/textarea/textarea.ts

@@ -1,72 +1,72 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const textAreaPropTypes = {
-  id: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  minLength: {
-    type: Number,
-  },
-  maxLength: {
-    type: Number,
-  },
-  rows: {
-    type: Number,
-    default: 4,
-  },
-  displayHelper: {
-    type: Boolean,
-    default: false,
-  },
-  helperIcon: {
-    type: String,
-    default: null,
-  },
-  helperText: {
-    type: String,
-    default: '',
-  },
-  hasCounter: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const textAreaEmitTypes = {
-  'update:modelValue': (value: string) => typeof value === 'string',
-};
-
-export type TextAreaEmitTypes = { 'update:modelValue': typeof textAreaEmitTypes };
-
-export type TextAreaPropTypes = ExtractPropTypes<typeof textAreaPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const textAreaPropTypes = {
+  id: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  minLength: {
+    type: Number,
+  },
+  maxLength: {
+    type: Number,
+  },
+  rows: {
+    type: Number,
+    default: 4,
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  hasCounter: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const textAreaEmitTypes = {
+  'update:modelValue': (value: string) => typeof value === 'string',
+};
+
+export type TextAreaEmitTypes = { 'update:modelValue': typeof textAreaEmitTypes };
+
+export type TextAreaPropTypes = ExtractPropTypes<typeof textAreaPropTypes>;