feat(kt-value-label): add KtValueLabel

3YOURMIND · Oct 10, 2023 · 9aada21 · 9aada21
1 parent 802a440
commit 9aada21
Show file tree

Hide file tree

Showing 15 changed files with 477 additions and 12 deletions.
diff --git a/packages/documentation/data/menu.ts b/packages/documentation/data/menu.ts
@@ -22,6 +22,7 @@ import {
 	KtTag,
 	KtToaster,
 	KtUserMenu,
+	KtValueLabel,
 } from '@3yourmind/kotti-ui'
 import { Yoco } from '@3yourmind/yoco'
 import { kebabCase, startCase } from 'lodash'
@@ -174,6 +175,7 @@ export const menu: Array<Section> = [
 					makeComponentMenuItem(KtTable),
 					makeComponentMenuItem(KtTag),
 					makeComponentMenuItem(KtToaster),
+					makeComponentMenuItem(KtValueLabel),
 				],
 			},
 			{

diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
@@ -1527,7 +1527,12 @@ export default defineComponent({
 						KtFieldTextArea,
 						KtFieldToggle,
 						KtFieldToggleGroup,
-					}[componentValue.value.name as Exclude<ComponentNames, 'KtFilters'>]),
+					}[
+						componentValue.value.name as Exclude<
+							ComponentNames,
+							'KtFilters' | 'KtValueLabel'
+						>
+					]),
 			),
 			componentDefinition,
 			componentHasActionsToggle,

diff --git a/packages/documentation/pages/usage/components/value-label.vue b/packages/documentation/pages/usage/components/value-label.vue
@@ -0,0 +1,192 @@
+<template>
+	<div>
+		<ComponentInfo v-bind="{ component }" />
+		<KtI18nContext :locale="settings.locale">
+			<div class="overview">
+				<div class="overview__component">
+					<h4>Component</h4>
+					<KtValueLabel v-bind="componentProps">
+						<template v-if="settings.hasDefaultSlot" #default>
+							<div v-text="DEFAULT_SLOT_CONTENT" />
+						</template>
+						<template v-if="settings.hasHelpTextSlot" #helpText>
+							<div>
+								Supports
+								<abbr title="Hypertext Markup Language">HTML</abbr> via
+								<code>&lt;template #helpText&gt;</code>
+							</div>
+						</template>
+					</KtValueLabel>
+				</div>
+				<div class="overview__code">
+					<h4>Code</h4>
+					<pre v-text="componentCode" />
+				</div>
+			</div>
+			<KtForm v-model="settings">
+				<div class="wrapper">
+					<div>
+						<h4>Texts</h4>
+						<KtFieldText formKey="label" isOptional label="label" />
+						<KtFieldText formKey="value" isOptional label="value" />
+						<KtFieldText
+							formKey="helpDescription"
+							isOptional
+							label="helpDescription"
+						/>
+						<div class="field-row">
+							<KtFieldText
+								formKey="helpText"
+								:helpText="
+									settings.hasHelpTextSlot
+										? 'Not supported when using a #helpText slot'
+										: null
+								"
+								:isDisabled="settings.hasHelpTextSlot"
+								isOptional
+								label="helpText"
+							/>
+							<KtFieldToggle
+								formKey="hasHelpTextSlot"
+								isOptional
+								label="Use #helpText Slot"
+								type="switch"
+							/>
+						</div>
+						<KtFieldText formKey="dataTest" isOptional label="dataTest" />
+						<KtFieldSingleSelect
+							formKey="validation"
+							isOptional
+							label="validation"
+							:options="[
+								{ label: 'Success', value: 'success' },
+								{ label: 'Warning', value: 'warning' },
+								{ label: 'Error', value: 'error' },
+							]"
+						>
+							<div slot="helpText">
+								Passed as an object:
+								<code>{ type: 'error', message: '' }</code>
+							</div>
+						</KtFieldSingleSelect>
+					</div>
+					<div>
+						<h4>Settings</h4>
+						<KtFieldSingleSelect
+							formKey="locale"
+							helpText="Can be set via KtI18nContext"
+							hideClear
+							label="Language"
+							leftIcon="global"
+							:options="[
+								{ label: 'German (de-DE)', value: 'de-DE' },
+								{ label: 'English (en-US)', value: 'en-US' },
+								{ label: 'Spanish (es-ES)', value: 'es-ES' },
+								{ label: 'French (fr-FR)', value: 'fr-FR' },
+								{ label: 'Japanese (ja-JP)', value: 'ja-JP' },
+							]"
+						/>
+						<KtFieldToggle
+							formKey="isLoading"
+							isOptional
+							label="isLoading"
+							:size="Kotti.Field.Size.SMALL"
+							type="switch"
+						/>
+						<KtFieldToggle
+							formKey="isUnset"
+							isOptional
+							label="isUnset"
+							:size="Kotti.Field.Size.SMALL"
+							type="switch"
+						/>
+						<KtFieldToggle
+							formKey="hasDefaultSlot"
+							isOptional
+							label="Use #default Slot"
+							type="switch"
+						/>
+					</div>
+				</div>
+			</KtForm>
+		</KtI18nContext>
+	</div>
+</template>
+
+<script lang="ts">
+import { Kotti, KtValueLabel } from '@3yourmind/kotti-ui'
+import { computed, defineComponent, ref } from '@vue/composition-api'
+import cloneDeep from 'lodash/cloneDeep'
+
+import { generateComponentCode } from '../../utilities'
+
+const DEFAULT_SLOT_CONTENT = 'Default slot content'
+
+const createValidation = (
+	validation: Kotti.Field.Validation.Result['type'] | null,
+) =>
+	validation !== null
+		? {
+				text: `Some Validation Text`,
+				type: validation,
+		  }
+		: null
+
+import ComponentInfo from '~/components/ComponentInfo.vue'
+export default defineComponent({
+	name: 'DocumentationPageUsageComponentsValueLabel',
+	components: { ComponentInfo, KtValueLabel },
+	setup() {
+		const settings = ref({
+			dataTest: null,
+			hasHelpTextSlot: false,
+			helpDescription: null,
+			helpText: null,
+			isLoading: false,
+			isUnset: false,
+			label: 'Label',
+			locale: 'en-US',
+			hasDefaultSlot: false,
+			validation: null,
+			value: 'Value',
+		})
+		const componentProps = computed(() => ({
+			dataTest: settings.value.dataTest,
+			helpDescription: settings.value.helpDescription,
+			helpText: settings.value.helpText,
+			isLoading: settings.value.isLoading,
+			isUnset: settings.value.isUnset,
+			label: settings.value.label,
+			validation: createValidation(settings.value.validation),
+			value: settings.value.value,
+		}))
+
+		return {
+			component: KtValueLabel,
+			componentCode: computed(() =>
+				generateComponentCode({
+					contentSlot: null,
+					defaultSlot: settings.value.hasDefaultSlot
+						? DEFAULT_SLOT_CONTENT
+						: null,
+					hasActions: false,
+					hasHelpTextSlot: settings.value.hasHelpTextSlot,
+					hasOptionSlot: false,
+					hasRemoteUpload: false,
+					headerSlot: null,
+					name: 'KtValueLabel',
+					props: cloneDeep(componentProps.value),
+					showHeaderSideSlot: false,
+					validation: 'empty',
+				}),
+			),
+			componentProps,
+			DEFAULT_SLOT_CONTENT,
+			Kotti,
+			settings,
+		}
+	},
+})
+</script>
+
+<style src="../styles/form-fields.scss" lang="scss" scoped />
diff --git a/packages/documentation/pages/utilities.ts b/packages/documentation/pages/utilities.ts
@@ -19,6 +19,7 @@ export type ComponentNames =
 	| 'KtFieldToggle'
 	| 'KtFieldToggleGroup'
 	| 'KtFilters'
+	| 'KtValueLabel'
 
 const COMPONENT_NAMES: ComponentNames[] = [
 	'KtFieldDate',
@@ -39,6 +40,7 @@ const COMPONENT_NAMES: ComponentNames[] = [
 	'KtFieldToggle',
 	'KtFieldToggleGroup',
 	'KtFilters',
+	'KtValueLabel',
 ]
 
 export type ComponentValue = {
@@ -116,25 +118,29 @@ const createRemoteUploadCode = (component: ComponentValue): string | null => {
 }
 
 const appendAdditionalSlots = (component: ComponentValue) => {
-	return component.hasHelpTextSlot ||
-		component.headerSlot !== null ||
-		component.contentSlot !== null
+	return component.contentSlot !== null ||
+		component.defaultSlot !== null ||
+		component.hasHelpTextSlot ||
+		component.headerSlot !== null
 		? [
 				'>',
-				...(component.hasHelpTextSlot
+				...(component.contentSlot !== null
 					? [
-							'\t<template #helpText>',
-							'\t\t<div>',
-							'\t\t\tSlot Content',
-							'\t\t</div>',
+							'\t<template #content :option="option">',
+							`\t\t${component.contentSlot}`,
 							// eslint-disable-next-line sonarjs/no-duplicate-string
 							'\t</template>',
 					  ]
 					: []),
-				...(component.contentSlot !== null
+				...(component.defaultSlot !== null
+					? [`\t${component.defaultSlot}`]
+					: []),
+				...(component.hasHelpTextSlot
 					? [
-							'\t<template #content :option="option">',
-							`\t\t${component.contentSlot}`,
+							'\t<template #helpText>',
+							'\t\t<div>',
+							'\t\t\tSlot Content',
+							'\t\t</div>',
 							'\t</template>',
 					  ]
 					: []),

diff --git a/packages/kotti-ui/source/index.ts b/packages/kotti-ui/source/index.ts
@@ -102,6 +102,9 @@ import { KtToaster } from './kotti-toaster'
 export * from './kotti-toaster'
 import { KtUserMenu } from './kotti-user-menu'
 export * from './kotti-user-menu'
+import { KtValueLabel } from './kotti-value-label'
+export * from './kotti-value-label'
+
 export * from './types'
 
 export default {
@@ -161,6 +164,7 @@ export default {
 			KtTag,
 			KtToaster,
 			KtUserMenu,
+			KtValueLabel,
 		])
 			Vue.use(component)
 

diff --git a/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts b/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts
@@ -130,4 +130,7 @@ export const deDE: KottiI18n.Messages = {
 		menuExpand: 'Menü einblenden',
 		quickLinksTitle: 'Schnellzugriff',
 	},
+	KtValueLabel: {
+		notSet: 'Nicht festgelegt',
+	},
 }
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts b/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts
@@ -129,4 +129,7 @@ export const enUS: KottiI18n.Messages = {
 		menuExpand: 'Expand menu',
 		quickLinksTitle: 'Quick Links',
 	},
+	KtValueLabel: {
+		notSet: 'Not Set',
+	},
 }
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts b/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts
@@ -129,4 +129,7 @@ export const esES: KottiI18n.Messages = {
 		menuExpand: 'Expandir el menú',
 		quickLinksTitle: 'Enlaces rápidos',
 	},
+	KtValueLabel: {
+		notSet: 'No establecido',
+	},
 }
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts b/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts
@@ -129,4 +129,7 @@ export const frFR: KottiI18n.Messages = {
 		menuExpand: 'Étendre le menu',
 		quickLinksTitle: 'Liens Rapides',
 	},
+	KtValueLabel: {
+		notSet: 'Non définie',
+	},
 }
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts b/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts
@@ -130,4 +130,7 @@ export const jaJP: KottiI18n.Messages = {
 		menuExpand: '拡張メニュー',
 		quickLinksTitle: 'クイックリンク',
 	},
+	KtValueLabel: {
+		notSet: '未設定',
+	},
 }
diff --git a/packages/kotti-ui/source/kotti-i18n/types.ts b/packages/kotti-ui/source/kotti-i18n/types.ts
@@ -8,6 +8,7 @@ import { Shared as KottiFieldSelectShared } from '../kotti-field-select/types'
 import { KottiFilters } from '../kotti-filters/types'
 import { KottiFormSubmit } from '../kotti-form-submit/types'
 import { KottiNavbar } from '../kotti-navbar/types'
+import { KottiValueLabel } from '../kotti-value-label/types'
 import { DecimalSeparator } from '../types/kotti'
 
 export type DeepPartial<T> = T extends Record<string, unknown>
@@ -40,6 +41,7 @@ export namespace KottiI18n {
 		KtFilters: KottiFilters.Translations
 		KtFormSubmit: KottiFormSubmit.Translations
 		KtNavbar: KottiNavbar.Translations
+		KtValueLabel: KottiValueLabel.Translations
 	}
 
 	export type Props = {