Merge branch 'master' into dependabot-appenda

internals/scripts/package.json

@@ -1,6 +1,6 @@
 {
 	"dependencies": {
-		"zod": "^3.22.5"
+		"zod": "3.22.5"
 	},
 	"devDependencies": {
 		"@types/bun": "^1.1.2"

packages/documentation/pages/usage/components/comment.vue

@@ -20,6 +20,7 @@
 					:allowInternal="settings.allowInternal"
 					class="mb-block"
 					:dataTest="settings.dataTest"
+					:forceInternal="settings.forceInternal"
 					:isReadOnly="settings.isReadOnly"
 					:tabIndex="settings.tabIndex"
 					:userAvatar="currentUser.avatar"
@@ -30,6 +31,8 @@
 				<KtCommentInput
 					:allowInternal="settings.allowInternal"
 					:dataTest="settings.dataTest"
+					:forceInternal="settings.forceInternal"
+					:isInternal="settings.isInternal"
 					:placeholder="settings.placeholder"
 					:tabIndex="settings.tabIndex"
 					:userAvatar="currentUser.avatar"
@@ -63,6 +66,13 @@
 							label="allowInternal"
 							type="switch"
 						/>
+						<KtFieldToggle
+							formKey="forceInternal"
+							helpText="Force Internal Comments i.e. No public access (only meaningful if allowInternal is true)"
+							isOptional
+							label="forceInternal"
+							type="switch"
+						/>
 						<KtFieldToggle
 							formKey="isReadOnly"
 							helpText="Hides KtComment action buttons"
@@ -215,6 +225,7 @@
 					class="mb-block"
 					:dangerouslyOverrideParser="dangerouslyOverrideParser"
 					:dataTest="settings.dataTest"
+					:forceInternal="settings.forceInternal"
 					:isReadOnly="settings.isReadOnly"
 					:postEscapeParser="postEscapeParser"
 					:tabIndex="settings.tabIndex"
@@ -226,6 +237,7 @@
 				<KtCommentInput
 					:allowInternal="settings.allowInternal"
 					:dataTest="settings.dataTest"
+					:forceInternal="settings.forceInternal"
 					:placeholder="settings.placeholder"
 					:tabIndex="settings.tabIndex"
 					:userAvatar="currentUser.avatar"
@@ -340,13 +352,15 @@ export default defineComponent({
 		})
 		const settings = ref<{
 			allowInternal: Kotti.FieldToggle.Value
+			forceInternal: Kotti.FieldToggle.Value
 			dataTest: Kotti.FieldText.Value
 			isReadOnly: Kotti.FieldToggle.Value
 			locale: Kotti.I18n.SupportedLanguages
 			placeholder: Kotti.FieldText.Value
 			tabIndex: Kotti.FieldNumber.Value
 		}>({
 			allowInternal: true,
+			forceInternal: false,
 			dataTest: null,
 			isReadOnly: false,
 			locale: 'en-US',

packages/documentation/pages/usage/components/table.vue

@@ -146,7 +146,9 @@ Alignment would default to be `left`. It can be customized for common cases that
 When content should not be hidden, using horizontal scrolling is a better alternative.
 `isScrollable` will enable horizontal scrolling for the table.
 
-<KtTable :rows="rows2" :columns="columnsDefault" isScrollable />
+<div style="max-width: 300px; padding: 10px; border: 1px dashed var(--ui-03);">
+    <KtTable :rows="rows2" :columns="columnsScrollable" isScrollable />
+</div>
 
 ```html
 <KtTable :rows="rows" :columns="columns" isScrollable />
@@ -768,6 +770,9 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 	</div>
 </KtTable>
 </div>
+<div slot="vue">
+<KtTable :rows="emptyRows" :columns="columnsDefault" emptyText="Custom empty via prop"/>
+</div>
 
 <div slot="style">
 
@@ -1151,16 +1156,35 @@ export default {
 				{ prop: 'date', label: 'Date' },
 				{ prop: ADDRESS_DOT_LINE, label: 'Address' },
 			],
+			columnsScrollable: [
+				{ prop: 'name', label: 'Name', width: '200px' },
+				{ prop: 'date', label: 'Date', width: '300px' },
+				{ prop: ADDRESS_DOT_LINE, label: 'Address', width: '500px' },
+				{ prop: 'gender', label: 'Gender', width: '100px' },
+			],
 			columnsWidth: [
 				{ prop: 'name', label: 'Name', width: '30%' },
 				{ prop: 'date', label: 'Date', width: '20%' },
 				{ prop: ADDRESS_DOT_LINE, label: 'Address', width: '50%' },
 			],
 			rows2: [
 				{
+					address: { number: 119, line: 'No. 119, Grove St, Los Angeles' },
 					date: '2016-05-03',
+					gender: 'm',
 					name: 'Tom',
-					address: { number: 119, line: 'No. 119, Grove St, Los Angeles' },
+				},
+				{
+					address: { number: 331, line: 'No. 119, Grove St, Los Angeles' },
+					date: '2019-05-04',
+					gender: 'f',
+					name: 'Heinz Dieter',
+				},
+				{
+					address: { number: 10, line: 'No. 119, Grove St, Los Angeles' },
+					date: '2024-05-07',
+					gender: 'd',
+					name: 'Shabeer Mahood',
 				},
 			],
 			emptyRows: [],

packages/documentation/tsconfig.json

@@ -23,6 +23,7 @@
 	"exclude": ["node_modules"],
 	"include": ["./**/*.ts", "./**/*.js", "./**/*.vue"],
 	"vueCompilerOptions": {
+		"skipTemplateCodegen": true,
 		"strictTemplates": true,
 		"target": 2.7
 	}

packages/kotti-ui/package.json

@@ -18,7 +18,7 @@
 		"normalize.css": "^8.0.1",
 		"shortid": "^2.2.15",
 		"tippy.js": "6.x",
-		"zod": "3.23.5"
+		"zod": "3.22.5"
 	},
 	"description": "Kotti Vue Component UI",
 	"devDependencies": {
@@ -96,5 +96,5 @@
 	"style": "./dist/style.css",
 	"type": "module",
 	"types": "./dist/index.d.ts",
-	"version": "6.0.1"
+	"version": "6.1.1"
 }

packages/kotti-ui/source/kotti-comment/KtComment.vue

@@ -25,7 +25,13 @@
 			/>
 			<KtCommentInput
 				v-if="userToReply"
-				v-bind="{ isInternal, placeholder, tabIndex, userAvatar }"
+				v-bind="{
+					forceInternal,
+					isInternal,
+					placeholder,
+					tabIndex,
+					userAvatar,
+				}"
 				autofocus
 				:dataTest="rootDataTest"
 				isReply

packages/kotti-ui/source/kotti-comment/KtCommentInput.vue

@@ -60,16 +60,20 @@ export default defineComponent({
 				const payload: KottiComment.Events.Add = {
 					isInternal: localIsInternal.value,
 					message: localMessage.value,
-					replyToUserId: props.replyToUserId,
 					parentId: props.parentId,
+					replyToUserId: props.replyToUserId,
 				}
 
 				emit('add', payload)
 
 				localIsInternal.value = props.isInternal
 				localMessage.value = ''
 			},
-			onToggleInternal: () => (localIsInternal.value = !localIsInternal.value),
+			onToggleInternal: () => {
+				if (localIsInternal.value && props.allowInternal && props.forceInternal)
+					return
+				localIsInternal.value = !localIsInternal.value
+			},
 		}
 	},
 })

packages/kotti-ui/source/kotti-comment/types.ts

@@ -27,6 +27,7 @@ export module KottiComment {
 
 	const sharedSchema = commentSchema.extend({
 		allowInternal: z.boolean().default(false),
+		forceInternal: z.boolean().default(false),
 		dangerouslyOverrideParser: parseFunctionSchema.default(defaultParser),
 		isReadOnly: z.boolean().default(false),
 		postEscapeParser: parseFunctionSchema.default(defaultPostEscapeParser),
@@ -169,6 +170,7 @@ export module KottiCommentInput {
 	export const propsSchema = KottiComment.propsSchema
 		.pick({
 			allowInternal: true,
+			forceInternal: true,
 			dataTest: true,
 			isInternal: true,
 			tabIndex: true,

packages/kotti-ui/source/kotti-i18n/hooks.ts

@@ -1,9 +1,4 @@
 import elementLocale from 'element-ui/lib/locale/index.js'
-import elementDe from 'element-ui/lib/locale/lang/de.js'
-import elementEn from 'element-ui/lib/locale/lang/en.js'
-import elementEs from 'element-ui/lib/locale/lang/es.js'
-import elementFr from 'element-ui/lib/locale/lang/fr.js'
-import elementJa from 'element-ui/lib/locale/lang/ja.js'
 import type { Ref, UnwrapRef } from 'vue'
 import { computed, inject, provide, reactive, watch } from 'vue'
 
@@ -59,6 +54,37 @@ export const useTranslationNamespace = <NS extends keyof KottiI18n.Messages>(
 	return computed(() => context.messages[namespace])
 }
 
+interface DefaultObject<R extends Record<string, unknown>> {
+	default: DefaultObject<R> | R
+}
+
+/**
+ * HACK: This function works around a CJS/ESM/EsModule interop issue.
+ *
+ * The objects we import at `element-ui/lib/locale/lang/[a-z]{2}.js` are EsModules
+ * (exports.__esModule = true). Due to current javascript flavour shenanigans,
+ * the imported object that we need can be found at the root, at the `.default` key,
+ * or even at the `.default.default` key.
+ * To mitigate we iterate down the potential default chain until we arrive at the
+ * right position.
+ */
+const accessDefaultKey = <R extends Record<string, unknown>>(
+	obj: DefaultObject<R>,
+): R => {
+	if (!('default' in obj)) return obj
+
+	let current: DefaultObject<R> | R = obj
+
+	// Practically, this should terminate after at most 2 iterations. Make it 10 for good measure
+	for (let i = 0; i < 10; i++) {
+		current = current.default as DefaultObject<R> | R
+		if (!('default' in current)) {
+			return current
+		}
+	}
+	throw new Error('accessDefaultKey: could not exhaust nested default keys')
+}
+
 /**
  * Provides the translation context to child components
  */
@@ -89,19 +115,26 @@ export const useI18nProvide = ({
 	 */
 	watch(
 		locale,
-		(newValue) => {
-			const elementUiTranslations = {
-				'en-US': elementEn,
-				'de-DE': elementDe,
-				'es-ES': elementEs,
-				'fr-FR': elementFr,
-				'ja-JP': elementJa,
-			}[newValue]
-
-			if ('default' in elementUiTranslations)
-				throw new Error('Detected Broken Build')
-
-			elementLocale.use(elementUiTranslations)
+		async (newValue) => {
+			try {
+				const elementUiTranslations = await {
+					/* eslint-disable @typescript-eslint/naming-convention */
+					'en-US': () => import('element-ui/lib/locale/lang/en.js'),
+					'de-DE': () => import('element-ui/lib/locale/lang/de.js'),
+					'es-ES': () => import('element-ui/lib/locale/lang/es.js'),
+					'fr-FR': () => import('element-ui/lib/locale/lang/fr.js'),
+					'ja-JP': () => import('element-ui/lib/locale/lang/ja.js'),
+					/* eslint-enable @typescript-eslint/naming-convention */
+				}[newValue]()
+
+				const resolvedEsModuleInterop = accessDefaultKey(elementUiTranslations)
+
+				elementLocale.use(resolvedEsModuleInterop)
+			} catch (error) {
+				// eslint-disable-next-line no-console
+				console.error(error)
+				throw error
+			}
 		},
 		{ immediate: true, flush: 'post' },
 	)

packages/kotti-ui/source/kotti-table/KtTable.vue

@@ -32,13 +32,11 @@ import TableHeader from './components/TableHeader.vue'
 import {
 	KT_TABLE,
 	KT_STORE,
-	KT_LAYOUT,
 	KT_TABLE_STATE_PROVIDER,
 	DEFAULT_DISABLE_ROW,
 } from './constants'
 import { KtTableColumn } from './KtTableColumn'
 import { TableStore } from './logic/store'
-import { TableLayout } from './table-layout'
 import type { CreateElement, PropType } from 'vue'
 import type { KottiTable } from './types'
 
@@ -53,7 +51,7 @@ export const INITIAL_TABLE_STORE_PROPS = [
 	'sortable',
 	'sortedColumns',
 	'sortMultiple',
-]
+] as const
 
 export default {
 	name: 'KtTable',
@@ -69,11 +67,9 @@ export default {
 	},
 	provide() {
 		return {
-			[KT_TABLE]: this,
+			[KT_TABLE as symbol]: this,
 			// @ts-expect-error store will exist at runtime
 			[KT_STORE]: this.store,
-			// @ts-expect-error layout will exist at runtime
-			[KT_LAYOUT]: this.layout,
 		}
 	},
 	props: {
@@ -166,10 +162,8 @@ export default {
 			localStore = new TableStore(this, initialState)
 		}
 
-		const layout = new TableLayout(this)
 		return {
 			localStore,
-			layout,
 		}
 	},
 	computed: {
@@ -214,7 +208,14 @@ export default {
 			return Boolean(this.$scopedSlots.actions || this.renderActions)
 		},
 		_renderExpand() {
-			return (h: CreateElement, rowData: any) => {
+			return (
+				h: CreateElement,
+				rowData: {
+					data: KottiTable.Row.Props
+					row: KottiTable.Row.Props
+					rowIndex: number
+				},
+			) => {
 				if (this.renderExpand) return this.renderExpand(h, rowData)
 
 				// @ts-expect-error $slots will exist at runtime

packages/kotti-ui/source/kotti-table/KtTableColumn.ts

@@ -6,7 +6,6 @@ import {
 	DEFAULT_RENDER_CELL,
 	KT_TABLE,
 	KT_STORE,
-	KT_LAYOUT,
 	DEFAULT_RENDER_HEADER,
 } from './constants'
 import { KottiTable } from './types'
@@ -99,19 +98,19 @@ export const KtTableColumn: any = {
 		this.columnConfig = createColumn(this)
 	},
 	mounted(): void {
-		const columnIndex = this[KT_TABLE].$children.indexOf(this)
-		this[KT_STORE].commit('insertColumn', {
+		const columnIndex = this[KT_TABLE as symbol].$children.indexOf(this)
+		this[KT_STORE as any].commit('insertColumn', {
 			column: this.columnConfig,
 			...(columnIndex !== -1 ? { index: columnIndex } : {}),
 		})
 	},
 	destroyed(): void {
 		if (!this.$parent) return
 		this.columnConfig &&
-			this[KT_STORE].commit('removeColumn', this.columnConfig)
+			this[KT_STORE as any].commit('removeColumn', this.columnConfig)
 	},
 	render: (): null => null,
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
+	inject: { KT_TABLE, KT_STORE },
 }
 
 function createColumn(column: any = {}) {
@@ -120,7 +119,7 @@ function createColumn(column: any = {}) {
 	let columnId = column.id
 	if (!columnId) {
 		// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-		columnId = `${_self[KT_TABLE].tableId}_column_${columnIdSeed}`
+		columnId = `${_self[KT_TABLE as symbol].tableId}_column_${columnIdSeed}`
 		columnIdSeed++
 	}
 	// eslint-disable-next-line no-param-reassign