Vue3 / FormKit / Schema / Icon Clicker Handler

Question

Question: How to bind icon click handler property in schema with the handler function?

Description: As shown in the following code, I can bind handler function with FormKit component. However, I do not know to bind to FormKitSchema component.

Code:

<script setup>
import { FormKitSchema } from "@formkit/vue";
import { reactive } from 'vue';

const schema = [
  {
    $formkit: "password",
    name: "test_select",
    label: "Password Input: FormKit Schema",
    value: "mySecretPassword!",
    suffixIcon: "eyeClosed",
    suffixIconClick: "$handleIconClickSchema"
  },
];

const data = reactive({
  handleIconClickSchema: (node, e) => {
    node.props.suffixIcon = node.props.suffixIcon === 'eye' ? 'eyeClosed' : 'eye'
    node.props.type = node.props.type === 'password' ? 'text' : 'password'
  }
})

const handleIconClick = (node, e) => {
  node.props.suffixIcon = node.props.suffixIcon === 'eye' ? 'eyeClosed' : 'eye'
  node.props.type = node.props.type === 'password' ? 'text' : 'password'
}

const handleSubmit = () => {
  alert('Form submitted!')
}

</script>

<template>
  <FormKit type="form" @submit="handleSubmit">
    <FormKit type="password" label="Password Input: FormKit" value="mySecretPassword!" suffix-icon="eyeClosed"
      @suffix-icon-click="handleIconClick" />
    <FormKitSchema :schema="schema" :data="data" />
  </FormKit>
</template>

<style>
.formkit-suffix-icon.formkit-icon svg {
  width: 16px;
  height: 16px;
}

.formkit-prefix-icon.formkit-icon svg {
  width: 16px;
  height: 16px;
}
</style>

Answer 1

In schema you should be able to add your function with a onSuffixIconClick key. All @whatever event props in Vue become onWhatever keys in schema.

example: https://formkit.link/ea336f92d3efe549e2a0c39be669c8b7