Merge pull request #1006 from 3YOURMIND/legacify-more-kt-table-namesp…

…aces chore(KtTableLegacy): add `-legacy` to css class names and inject/provide ids
3YOURMIND · Oct 22, 2024 · 4f2d63b · 4f2d63b
2 parents fc3bdd9 + acd9f5c
commit 4f2d63b
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 38 deletions.
diff --git a/packages/documentation/pages/usage/components/table-legacy.vue b/packages/documentation/pages/usage/components/table-legacy.vue
@@ -1016,11 +1016,11 @@ The above code for `orderBeforeColumn` function, is meant to map the UI drag/dro
 | Attribute         | Description                                                                     | Type                          | Accepted values                            | Default                           |
 | :---------------- | :------------------------------------------------------------------------------ | :---------------------------- | :----------------------------------------- | :-------------------------------- |
 | `align`           | alignment of column text                                                        | `String`                      | `"center"`, `"left"`, `"right"`            | `left`                            |
-| `cellClass`       | classes to this column's to `.kt-table__cell` elements                          | `String`, `Array`, `Object`   | `"responsive"`                             | -                                 |
+| `cellClass`       | classes to this column's to `.kt-table-legacy__cell` elements                   | `String`, `Array`, `Object`   | `"responsive"`                             | -                                 |
 | `default`         | if cell value is undefined, use default. Does not work if you use custom render | `String`                      | -                                          | -                                 |
 | `disableRowClick` | stop row click from bubbling up when clicking on cell                           | `Boolean`                     | -                                          | `false`                           |
 | `formatter`       | formats value before passing it to cell                                         | `Function`                    | -                                          |                                   |
-| `headerCellClass` | classes to this column's to `.kt-table__header-cell` elements                   | `String`, `Array`, `Object`   | `"responsive"`                             | -                                 |
+| `headerCellClass` | classes to this column's to `.kt-table-legacy__header-cell` elements            | `String`, `Array`, `Object`   | `"responsive"`                             | -                                 |
 | `hidden`          | does not render this collumn if true                                            | `Boolean`                     | true, false                                | `false`                           |
 | `key`             | deprecated. Is transalted to `prop`, instead                                    | `String`                      | —                                          | —                                 |
 | `label`           | table column header value                                                       | `String`                      | —                                          | —                                 |

diff --git a/packages/documentation/styles/tables.scss b/packages/documentation/styles/tables.scss
@@ -1,6 +1,6 @@
 @import '@3yourmind/kotti-ui/source/kotti-style/_variables.scss';
 
-table:not(.kt-table) {
+table:not(.kt-table-legacy) {
 	width: 100%;
 	hyphens: auto;
 	table-layout: auto;

diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
@@ -96,5 +96,5 @@
 	"style": "./dist/style.css",
 	"type": "module",
 	"types": "./dist/index.d.ts",
-	"version": "7.3.1"
+	"version": "7.4.0"
 }
diff --git a/packages/kotti-ui/source/kotti-table-legacy/KtTableLegacy.vue b/packages/kotti-ui/source/kotti-table-legacy/KtTableLegacy.vue
@@ -14,7 +14,7 @@
 				isPropDefined
 			/>
 		</div>
-		<table class="kt-table">
+		<table class="kt-table-legacy">
 			<TableHeader />
 			<TableBody />
 		</table>
@@ -330,7 +330,7 @@ export default {
 	},
 	beforeCreate() {
 		// @ts-expect-error tableId will exist at runtime
-		this.tableId = `kt-table_${String(tableIdSeed)}`
+		this.tableId = `kt-table-legacy_${String(tableIdSeed)}`
 		tableIdSeed += 1
 	},
 	mounted() {
@@ -378,15 +378,15 @@ export default {
 @import './style/form-checkbox.scss';
 @import '../kotti-style/_variables.scss';
 
-table.kt-table {
+table.kt-table-legacy {
 	position: relative;
 	width: 100%;
 	hyphens: auto;
 	table-layout: auto;
 	border-collapse: collapse;
 }
 
-:deep(table.kt-table tr) {
+:deep(table.kt-table-legacy tr) {
 	position: relative;
 	margin: 0;
 
@@ -412,7 +412,7 @@ table.kt-table {
 	}
 }
 
-:deep(table.kt-table td) {
+:deep(table.kt-table-legacy td) {
 	position: relative;
 	padding: var(--unit-2) var(--unit-1);
 	line-height: 1.2rem;
@@ -424,9 +424,9 @@ table.kt-table {
 	}
 }
 
-:deep(table.kt-table) {
+:deep(table.kt-table-legacy) {
 	.expand-toggle,
-	.kt-table__quick-sort-control {
+	.kt-table-legacy__quick-sort-control {
 		i {
 			margin: 0 0.2rem;
 			font-size: 1rem !important;
@@ -439,7 +439,7 @@ table.kt-table {
 	}
 }
 
-:deep(table.kt-table .table-actions) {
+:deep(table.kt-table-legacy .table-actions) {
 	position: absolute;
 	top: 50%;
 	right: 0.8rem;
@@ -472,7 +472,7 @@ table.kt-table {
 	}
 }
 
-:deep(table.kt-table .form-group) {
+:deep(table.kt-table-legacy .form-group) {
 	width: 32px;
 	line-height: 0;
 
@@ -481,16 +481,16 @@ table.kt-table {
 	}
 }
 
-:deep(.kt-table .kt-table__no-row) {
+:deep(.kt-table-legacy .kt-table-legacy__no-row) {
 	color: $lightgray-500;
 	text-align: center;
 }
 
-:deep(.kt-table .kt-table__loader) {
+:deep(.kt-table-legacy .kt-table-legacy__loader) {
 	text-align: center;
 }
 
-:deep(.kt-table .loading) {
+:deep(.kt-table-legacy .loading) {
 	margin: 1.6rem 0;
 	text-align: center;
 }

diff --git a/packages/kotti-ui/source/kotti-table-legacy/KtTableLegacyProvider.ts b/packages/kotti-ui/source/kotti-table-legacy/KtTableLegacyProvider.ts
@@ -33,7 +33,7 @@ export const KtTableLegacyProvider: any = {
 		},
 	},
 	beforeCreate(): void {
-		this.tableId = `kt-table-provider_${tableProviderIdSeed}`
+		this.tableId = `kt-table-legacy-provider_${tableProviderIdSeed}`
 		tableProviderIdSeed += 1
 	},
 	methods: {

diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableBodyEmptyRow.ts b/packages/kotti-ui/source/kotti-table-legacy/components/TableBodyEmptyRow.ts
@@ -21,10 +21,14 @@ export const TableBodyEmptyRow = defineComponent({
 				h(
 					'td',
 					{
-						class: 'kt-table__no-row',
+						class: 'kt-table-legacy__no-row',
 						domProps: { colSpan: colSpan.value },
 					},
-					[h('span', { class: 'kt-table__empty-text' }, [render.value(h)])],
+					[
+						h('span', { class: 'kt-table-legacy__empty-text' }, [
+							render.value(h),
+						]),
+					],
 				),
 			])
 	},

diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableBodyExpandRow.ts b/packages/kotti-ui/source/kotti-table-legacy/components/TableBodyExpandRow.ts
@@ -36,7 +36,7 @@ export const TableBodyExpandRow = defineComponent({
 					'td',
 					{
 						attrs: { colSpan: colSpan.value },
-						class: 'kt-table__expanded-cell',
+						class: 'kt-table-legacy__expanded-cell',
 					},
 					[
 						render.value(h, {

diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableBodyLoadingRow.ts b/packages/kotti-ui/source/kotti-table-legacy/components/TableBodyLoadingRow.ts
@@ -23,7 +23,7 @@ export const TableBodyLoadingRow: any = defineComponent({
 					'td',
 					{
 						attrs: { colSpan: colSpan.value },
-						class: 'kt-table__loader',
+						class: 'kt-table-legacy__loader',
 					},
 					[render.value(h)],
 				),

diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableHeader.vue b/packages/kotti-ui/source/kotti-table-legacy/components/TableHeader.vue
@@ -2,7 +2,10 @@
 	<thead>
 		<tr :class="tableHeaderClass">
 			<th v-if="isExpandable" class="th-expandable" />
-			<th v-if="isSelectable" class="th-selectable kt-table__checkbox-col">
+			<th
+				v-if="isSelectable"
+				class="th-selectable kt-table-legacy__checkbox-col"
+			>
 				<div class="form-group" @click="handleSelectAll">
 					<label class="form-checkbox">
 						<input :checked="isAllSelected" type="checkbox" />
@@ -32,9 +35,9 @@
 				<TableHeaderCell v-bind="{ column, columnIndex }" />
 				<div
 					v-if="useQuickSortControl && (canSort(column) || isSorted(column))"
-					class="kt-table__controls"
+					class="kt-table-legacy__controls"
 				>
-					<div class="kt-table__quick-sort-control clickable">
+					<div class="kt-table-legacy__quick-sort-control clickable">
 						<i :class="{ active: isSortedByAsc(column), yoco: true }">
 							triangle_up
 						</i>
@@ -159,7 +162,7 @@ export default defineComponent({
 	background-color: var(--ui-01);
 }
 
-.kt-table__checkbox-col .form-group {
+.kt-table-legacy__checkbox-col .form-group {
 	position: relative;
 }
 
@@ -189,7 +192,7 @@ th.dragging {
 	cursor: move;
 }
 
-th.sortable .kt-table__controls {
+th.sortable .kt-table-legacy__controls {
 	position: absolute;
 	top: 0;
 	right: 0.1rem;
@@ -199,27 +202,27 @@ th.sortable .kt-table__controls {
 	hyphens: none;
 }
 
-th.sortable:hover .kt-table__controls,
-th.sorted .kt-table__controls {
+th.sortable:hover .kt-table-legacy__controls,
+th.sorted .kt-table-legacy__controls {
 	display: flex;
 	align-items: center;
 }
 
-th.sortable:hover .kt-table__quick-sort-control,
-th.sorted .kt-table__quick-sort-control {
+th.sortable:hover .kt-table-legacy__quick-sort-control,
+th.sorted .kt-table-legacy__quick-sort-control {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	width: 0.5rem;
 }
 
-.kt-table__quick-sort-control .yoco {
+.kt-table-legacy__quick-sort-control .yoco {
 	height: 0.5rem;
 	line-height: 0.5;
 	color: var(--text-03);
 }
 
-.kt-table__quick-sort-control .yoco.active {
+.kt-table-legacy__quick-sort-control .yoco.active {
 	color: var(--interactive-01);
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableHeaderCell.ts b/packages/kotti-ui/source/kotti-table-legacy/components/TableHeaderCell.ts
@@ -25,8 +25,8 @@ export const TableHeaderCell = defineComponent({
 						'data-prop': props.column.prop,
 					},
 					class: [
-						'kt-table__cell',
-						'kt-table__header-cell',
+						'kt-table-legacy__cell',
+						'kt-table-legacy__header-cell',
 						props.column.headerCellClass,
 					],
 				},

diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableRow.ts b/packages/kotti-ui/source/kotti-table-legacy/components/TableRow.ts
@@ -163,7 +163,7 @@ export const TableRow = defineComponent({
 						h(
 							'td',
 							{
-								class: 'td-selectable kt-table__checkbox-col',
+								class: 'td-selectable kt-table-legacy__checkbox-col',
 								on: {
 									click: ($event: MouseEvent) => {
 										$event.stopPropagation()

diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableRowCell.ts b/packages/kotti-ui/source/kotti-table-legacy/components/TableRowCell.ts
@@ -42,7 +42,7 @@ export const TableRowCell = defineComponent({
 			props.column.tdClass,
 		])
 		const _cellClass = computed(() => [
-			'kt-table__cell',
+			'kt-table-legacy__cell',
 			props.column.cellClass,
 		])
 		const _tdStyles = computed(() => {

diff --git a/packages/kotti-ui/source/kotti-table-legacy/constants.ts b/packages/kotti-ui/source/kotti-table-legacy/constants.ts
@@ -85,7 +85,7 @@ export const KT_TABLE: InjectionKey<KottiTableContext> =
 export const KT_STORE: InjectionKey<TableStore> =
 	'KT_STORE' as unknown as symbol
 export const KT_TABLE_STATE_PROVIDER = 'KT_TABLE_STATE_PROVIDER'
-export const COLUMN_TYPE = Symbol('kt-table-column')
+export const COLUMN_TYPE = Symbol('kt-table-legacy-column')
 
 export const DEFAULT_DISABLE_ROW = (): boolean => false
 

diff --git a/packages/kotti-ui/source/kotti-table-legacy/style/form-checkbox.scss b/packages/kotti-ui/source/kotti-table-legacy/style/form-checkbox.scss
@@ -4,7 +4,7 @@
  * @deprecated this was moved-over from the old KtCheckbox.vue so
  * that it can be removed without having to touch the table
  */
-table.kt-table :deep(.form-checkbox) {
+table.kt-table-legacy :deep(.form-checkbox) {
 	position: relative;
 	display: inline-block;
 	min-height: 1.2rem;