feature(#1005): provide a click handler for click on right icon for K…

…tField

This is needed for KtPassword to reveal/hide passwords to user

packages/documentation/pages/usage/components/form-fields.vue

@@ -294,6 +294,16 @@
 								</template>
 							</KtFieldSingleSelect>
 						</div>
+							<div class="field-row">
+								<KtFieldToggle
+									formKey="isRightIconAction"
+									helpText="Support Varies"
+									isOptional
+									label="isRightIconAction"
+									type="switch"
+								/>
+							</div>
+
 						<div
 							v-if="componentDefinition.supports.autoComplete"
 							class="field-row"
@@ -1229,6 +1239,7 @@ export default defineComponent({
 			hasHelpTextSlot: boolean
 			helpDescription: Kotti.FieldText.Value
 			helpText: Kotti.FieldText.Value
+			isRightIconAction: boolean
 			label: Kotti.FieldText.Value
 			leftIcon: Yoco.Icon | null
 			locale: Kotti.I18n.SupportedLanguages
@@ -1296,13 +1307,14 @@ export default defineComponent({
 			hasHelpTextSlot: false,
 			helpDescription: null,
 			helpText: null,
+			isRightIconAction: true,
 			label: 'Label',
 			leftIcon: null,
 			locale: 'en-US',
 			placeholder: null,
 			placeholder2: null,
 			prefix: null,
-			rightIcon: null,
+			rightIcon: Yoco.Icon.EYE,
 			size: Kotti.Field.Size.MEDIUM,
 			suffix: null,
 			tabIndex: null,
@@ -1346,6 +1358,7 @@ export default defineComponent({
 
 			if (componentDefinition.value.supports.decoration)
 				Object.assign(additionalProps, {
+					isRightIconAction: settings.value.isRightIconAction,
 					leftIcon: settings.value.leftIcon,
 					prefix: settings.value.prefix,
 					rightIcon: settings.value.rightIcon,

packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue

@@ -3,13 +3,14 @@
 		v-bind="{ field }"
 		:getEmptyValue="() => null"
 		:helpTextSlot="$slots.helpText"
+		@rightIconClick="handleVisibilityChange"
 	>
 		<input v-bind="inputProps" @input="onInput" />
 	</KtField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import type { InputHTMLAttributes } from 'vue/types/jsx'
 
 import { KtField } from '../kotti-field'
@@ -31,9 +32,8 @@ export default defineComponent({
 			props,
 			supports: KOTTI_FIELD_PASSWORD_SUPPORTS,
 		})
-
+		const fieldType = ref('password')
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
-
 		return {
 			field,
 			inputProps: computed(
@@ -47,7 +47,7 @@ export default defineComponent({
 					forceUpdateKey: forceUpdateKey.value,
 					placeholder: props.placeholder ?? undefined,
 					size: 1,
-					type: 'password',
+					type: fieldType.value,
 					value: field.currentValue ?? '',
 				}),
 			),
@@ -57,6 +57,10 @@ export default defineComponent({
 
 				forceUpdate()
 			},
+			handleVisibilityChange: () => {
+				const isValueHidden = fieldType.value === 'password'
+				fieldType.value = isValueHidden ? 'text' : 'password'
+			},
 		}
 	},
 })

packages/kotti-ui/source/kotti-field/KtField.vue

@@ -85,7 +85,12 @@
 						</slot>
 						<div
 							v-if="field.rightIcon"
-							:class="iconClasses('input-container', ['right'])"
+							:class="
+								field.isRightIconAction
+									? iconClasses('input-container', ['right', 'interactive'])
+									: iconClasses('input-container', ['right'])
+							"
+							@click.stop="handleRightIconClick"
 						>
 							<i class="yoco" v-text="field.rightIcon" />
 						</div>
@@ -149,8 +154,8 @@ export default defineComponent({
 		isRange: { default: false, type: Boolean },
 		useFieldset: { default: false, type: Boolean },
 	},
-	emits: ['click', 'mousedown'],
-	setup(props) {
+	emits: ['click', 'mousedown', 'rightIconClick'],
+	setup(props, { emit }) {
 		const inputId = computed(() =>
 			props.isRange
 				? `${props.field.inputProps.id}-start`
@@ -191,6 +196,9 @@ export default defineComponent({
 				props.field.setValue(props.getEmptyValue())
 				focusInput()
 			},
+			handleRightIconClick: () => {
+				if (props.field.isRightIconAction) emit('rightIconClick')
+			},
 			hasHelpText: computed(
 				() => props.helpTextSlot.length > 0 || props.field.helpText !== null,
 			),

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

@@ -25,6 +25,9 @@ const useDecoration = <DATA_TYPE>({
 	supports,
 }: Pick<KottiField.Hook.Parameters<DATA_TYPE>, 'props' | 'supports'>) => {
 	return {
+		isRightIconAction: computed(() =>
+			supports.decoration ? props.isRightIconAction : false,
+		),
 		leftIcon: computed(() => (supports.decoration ? props.leftIcon : null)),
 		prefix: computed(() => (supports.decoration ? props.prefix : null)),
 		rightIcon: computed(() => (supports.decoration ? props.rightIcon : null)),

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

@@ -75,6 +75,7 @@ export module KottiField {
 			| 'isDisabled'
 			| 'isLoading'
 			| 'isOptional'
+			| 'isRightIconAction'
 			| 'label'
 			| 'leftIcon'
 			| 'prefix'
@@ -131,6 +132,7 @@ export module KottiField {
 			])
 			.default(AutoComplete.OFF),
 		hideClear: z.boolean().default(false),
+		isRightIconAction: z.boolean().default(false),
 		leftIcon: yocoIconSchema.nullable().default(null),
 		prefix: z.string().nullable().default(null),
 		rightIcon: yocoIconSchema.nullable().default(null),
@@ -234,6 +236,7 @@ export module KottiField {
 		 * This is never by default and specified by component schemas that need it
 		 */
 		isOptional: z.boolean().default(false),
+		isRightIconAction: z.boolean().default(false),
 
 		label: z.string().nullable().default(null),