vue-formkit-example/src/all-custom/all-custom.vue

<script setup lang="ts">
import { FormKitNode } from '@formkit/core';
import { text } from '@formkit/inputs';
import Swal from 'sweetalert2';
import dayjs from 'dayjs';
import { arrayToTree } from 'utils4u/array';

async function submit(formData: Record<string, any>, formNode: FormKitNode) {
  console.group('submit');
  console.log('formData :>> ', formData);
  console.log('formNode :>> ', formNode);
  console.groupEnd();

  await new Promise(r => setTimeout(r, 2000))
  Swal.fire({
    title: 'Submitted! 🎉',
    icon: 'success',
    showConfirmButton: false,
    timer: 1500
  })
}

const K_OPTIONS = [
  { label: 'Option 1', value: 'Value 1' },
  { label: 'Option 2', value: 'Value 2' },
  { label: 'Option 3', value: 'Value 3' },
];
const promiseOptions = new Promise<typeof K_OPTIONS>(resolve => {
  setTimeout(() => resolve(K_OPTIONS), 1000);
});

const K_FLAT_TREE = [
  {
    dictLabel: '北京市',
    dictValue: '110000',
    fullName: '北京市',
    abbrName: '北京',
    dictParent: '00',
  },
  {
    dictLabel: '山西省',
    dictValue: '140000',
    fullName: '山西省',
    abbrName: '山西',
    dictParent: '00',
  },
  {
    dictLabel: '太原市',
    dictValue: '140100',
    fullName: '山西省,太原市',
    abbrName: '山西太原',
    dictParent: '140000',
  },
  {
    dictLabel: '大同市',
    dictValue: '140200',
    fullName: '山西省,大同市',
    abbrName: '山西大同',
    dictParent: '140000',
  },
]


const promiseCascadeOptions = new Promise<typeof K_FLAT_TREE>((resolve) => {
  setTimeout(() => {
    resolve(arrayToTree(K_FLAT_TREE, { id: 'dictValue', parentId: 'dictParent', rootId: '00' }));
  }, 1000);
});
/* const funcOptions = async () => {
  await new Promise(r => setTimeout(r, 1000))
  return K_OPTIONS;
} */
</script>

<template>
  <Fieldset
    legend="表单"
    toggleable
    class="min-w-full"
    pt:content:class="flex justify-center"
  >
    <!-- https://formkit.com/inputs/form#props-attributes -->
    <FormKit
      :value="{
        a: '1', b: '2',
        PInputText: 'PInputText default value from form',
        notInForm: 'not in form',
      }"
      :config="{
        classes: {
          form: 'flex flex-col w-full py-6 gap-8',
          outer: 'flex flex-col gap-2',
          /* label: 'font-medium block' */
        },
      }"
      type="form"
      #default="{ value }"
      @submit="submit"
      submit-label="提交 ✨"
      :submit-attrs="{
        'some-submit-attr': 'value',
      }"
    >
      <FormKit
        type="PInputText"
        name="PInputText"
        label="输入框"
        value="`default value from field`"
        some="prop"
        some-boolean-prop
        validation="required"
      >
      </FormKit>
      <FormKit
        type="PInputPassword"
        name="PInputPassword"
        label="密码"
        validation="required"
        toggleMask
        :feedback="false"
      />
      <FormKit
        type="PSelect"
        name="PSelect_1"
        label="选择框"
        validation="required"
        :options="K_OPTIONS"
        optionLabel="label"
        optionValue="value"
        value="数据的值不在options里"
      />
      <FormKit
        type="PSelect"
        name="PSelect_2"
        label="选择框"
        validation="required"
        :options="promiseOptions"
        optionLabel="label"
        optionValue="value"
      />
      <FormKit
        type="PCascadeSelect"
        name="PCascadeSelect"
        label="级联选择框"
        validation="required"
        :options="promiseCascadeOptions"
        optionLabel="dictLabel"
        optionValue="dictValue"
      />
      <FormKit
        type="PDatePicker"
        name="PDatePicker"
        :manualInput="false"
        dateFormat="yy年mm月"
        :dateToValue="(date) => dayjs(date as Date).format('YYYY-MM')"
        :valueToDate="(value) => dayjs(value as string).toDate()"
        view="month"
        value="2022-01"
        label="选日期"
        validation="required"
      />

      <div class="flex flex-wrap gap-4">
        <FormKit
          v-if="!value?.PInputPassword"
          :type="text"
          :preserve="false"
          name="customType"
          value="this input will display if the password is empty"
        >
          <!-- <template #label>
          <div>labelll</div>
        </template> -->
        </FormKit>


        <FormKit
          type="group"
          name="group"
        >
          <FormKit
            :type="text"
            name="text-in-group-1"
          >
          </FormKit>
        </FormKit>

        <FormKit
          type="group"
          name="group"
        >
          <FormKit
            :type="text"
            name="text-in-group-2"
          >
          </FormKit>
        </FormKit>
      </div>

      <Button
        label="Button"
        @click="() => {
          value!.button = value!.button || {};
          (value!.button as any).clicked = 'clicked-这个值在@submit回调的formData里不会出现';
          (value!.group as any)['text-in-group-1'] = 'changed-by-button';
        }"
      />

      <pre class="font-mono text-sm p-4 bg-slate-100 dark:bg-gray-900 overflow-x-auto rounded-md shadow-inner dark:text-gray-300
      ">{{ value }}</pre>
      <!-- <FormKitSummary /> -->
    </FormKit>
  </Fieldset>

</template>

<style scoped>
:deep(.formkit-input) {
  border: 1px solid #e2e8f0;
}
</style>