floatLabel

.vscode/settings.json

@@ -3,12 +3,12 @@
     "source.fixAll": "explicit"
   },
   "[vue]": {
-    "editor.defaultFormatter": "Vue.volar",
+    "editor.defaultFormatter": "Vue.volar"
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "file",
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

components.d.ts

@@ -7,14 +7,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    Button: typeof import('primevue/button')['default']
-    BUtton: typeof import('primevue/button')['default']
     Fieldset: typeof import('primevue/fieldset')['default']
-    Form: typeof import('@primevue/forms/form')['default']
-    FormField: typeof import('@primevue/forms/formfield')['default']
+    FloatLabel: typeof import('primevue/floatlabel')['default']
     InputText: typeof import('primevue/inputtext')['default']
     Message: typeof import('primevue/message')['default']
-    Password: typeof import('primevue/password')['default']
-    Toast: typeof import('primevue/toast')['default']
   }
 }

src/App.vue

@@ -13,4 +13,11 @@ import ZodForm from './zod-form/index.vue';
     <AllCustom />
   </div>
   <!-- </div> -->
+
+  <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
+    <FloatLabel>
+      <label for="username">用户名</label>
+      <InputText id="username"></InputText>
+    </FloatLabel>
+  </div>
 </template>

src/__fk-inputs__/inputs/_demo_text.ts

@@ -1,77 +0,0 @@
-import { FormKitTypeDefinition, type FormKitFrameworkContext } from '@formkit/core';
-import {
-  casts,
-  createSection,
-  help,
-  icon,
-  inner,
-  label,
-  outer,
-  prefix,
-  suffix,
-  textInput,
-  wrapper,
-} from '@formkit/inputs';
-import { messages } from '../sections/messages';
-import { h, markRaw } from 'vue';
-
-// https://github.com/formkit/formkit/blob/e57ad1632b95d34d9e6cf046a4802f7ae389700e/packages/vue/src/composables/createInput.ts
-
-/**
- * Input definition for a text.
- * @public
- */
-export const text: FormKitTypeDefinition = {
-  /**
-   * The actual schema of the input, or a function that returns the schema.
-   */
-  schema: outer(
-    wrapper(label('$label'), inner(icon('prefix', 'label'), prefix(), textInput(), suffix(), icon('suffix'))),
-    help('$help'),
-    messages(),
-  ),
-  /**
-   * The type of node, can be a list, group, or input.
-   */
-  type: 'input',
-  /**
-   * The family of inputs this one belongs too. For example "text" and "email"
-   * are both part of the "text" family. This is primary used for styling.
-   */
-  family: 'text',
-  /**
-   * An array of extra props to accept for this input.
-   */
-  props: [
-    // 'label2',
-  ],
-  /**
-   * Forces node.props.type to be this explicit value.
-   */
-  // forceTypeProp: 'text',
-  /**
-   * Additional features that should be added to your input
-   */
-  features: [casts],
-  /**
-   * The key used to memoize the schema.
-   */
-  // schemaMemoKey: 'g2f31c24kjh',
-};
-
-// @ts-ignore
-const custom_FComponent = {
-  schema: createSection('input', () => ({
-    $cmp: 'FComponent',
-    props: { context: '$node.context' },
-  }))(),
-  library: markRaw(((props: { context: FormKitFrameworkContext } /* context */) => {
-    return h('XxxxCmp', {
-      id: props.context.id,
-      value: props.context._value,
-      ...props.context.attrs,
-      onInput: props.context.handlers.DOMInput,
-      onBlur: props.context.handlers.blur,
-    });
-  }) satisfies import('vue').FunctionalComponent<{ context: FormKitFrameworkContext }>),
-};

src/__fk-inputs__/inputs/form.ts

@@ -11,9 +11,9 @@ const formInput = createSection('form', () => ({
     autoAnimate: true,
   },
   attrs: {
-    id: '$id',
-    name: '$node.name',
-    onSubmit: '$handlers.submit',
+    'id': '$id',
+    'name': '$node.name',
+    'onSubmit': '$handlers.submit',
     'data-loading': '$state.loading || undefined',
   },
 }));
@@ -33,13 +33,13 @@ const button = createSection(
 );
 
 export const form: FormKitTypeDefinition = {
+  type: 'group',
   schema: formInput(
     '$slots.default',
     messages(),
     actions(submitInput()),
     button(), //
   ),
-  type: 'group',
   props: [
     'submitLabel',
     'submitAttrs',

src/__fk-inputs__/inputs/input-password.ts

@@ -4,12 +4,9 @@ import { casts, createSection, label, outer } from '@formkit/inputs';
 import SchemaComponent from 'primevue/password';
 import { markRaw } from 'vue';
 import { messages } from '../sections/messages';
+import { floatLabel } from '../sections/floatLabel';
 
-export const PInputPassword: FormKitTypeDefinition = {
-  type: 'input',
-  schema: outer(
-    label('$label'),
-    createSection('input', () => ({
+const input = createSection('input', () => ({
   $cmp: markRaw(SchemaComponent) as never,
   bind: '$attrs',
   props: {
@@ -21,12 +18,21 @@ export const PInputPassword: FormKitTypeDefinition = {
     onBlur: '$handlers.blur',
     modelValue: '$_value',
     inputId: '$id',
+    fluid: true,
   },
-    }))(),
+}));
+
+export const PInputPassword: FormKitTypeDefinition = {
+  type: 'input',
+  schema: outer(
+    floatLabel(
+      input(), //
+      label('$label'),
+    ),
     messages(),
   ),
   features: [casts],
-  // schemaMemoKey: 'g2f31c24kjh',
+  // schemaMemoKey: 'g2f31c24kjh', // Math.random().toString(36).substring(2, 15)
 };
 
 declare module '@formkit/inputs' {

src/__fk-inputs__/inputs/input-text.ts

@@ -3,16 +3,11 @@ import type { FormKitInputs } from '@formkit/inputs';
 import { casts, createSection, label, outer } from '@formkit/inputs';
 import SchemaComponent from 'primevue/inputtext';
 import { markRaw } from 'vue';
+import { floatLabel } from '../sections/floatLabel';
 import { messages } from '../sections/messages';
 
-const cmpName = `SchemaComponent${SchemaComponent.name}`;
-
-export const PInputText: FormKitTypeDefinition = {
-  type: 'input',
-  schema: outer(
-    label('$label'),
-    createSection('input', () => ({
-      $cmp: cmpName,
+const input = createSection('input', () => ({
+  $cmp: markRaw(SchemaComponent) as never,
   bind: '$attrs',
   props: {
     invalid: '$state.invalid',
@@ -23,15 +18,21 @@ export const PInputText: FormKitTypeDefinition = {
     onBlur: '$handlers.blur',
     modelValue: '$_value',
     id: '$id',
+    fluid: true,
   },
-    }))(),
+}));
+
+export const PInputText: FormKitTypeDefinition = {
+  type: 'input',
+  schema: outer(
+    floatLabel(
+      input(), //
+      label('$label'),
+    ),
     messages(),
   ),
-  library: {
-    [cmpName]: markRaw(SchemaComponent),
-  },
   features: [casts],
-  // schemaMemoKey: 'g2f31c24kjh',
+  // schemaMemoKey: 'g2f31c24kjh', // Math.random().toString(36).substring(2, 15)
 };
 
 declare module '@formkit/inputs' {

src/__fk-inputs__/sections/floatLabel.ts

@@ -0,0 +1,8 @@
+import { createSection } from '@formkit/inputs';
+import FloatLabel from 'primevue/floatlabel';
+import { markRaw } from 'vue';
+
+export const floatLabel = createSection('floatLabel', () => ({
+  $cmp: markRaw(FloatLabel) as never,
+  bind: '$attrs',
+}));

src/all-custom/all-custom.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { text } from '@/__fk-inputs__/inputs/_demo_text';
 import { FormKitNode } from '@formkit/core';
+import { text } from '@formkit/inputs';
 import Swal from 'sweetalert2';
 
-
-
 async function submit(formData: Record<string, any>, formNode: FormKitNode) {
   console.group('submit');
   console.log('formData :>> ', formData);
@@ -19,8 +17,6 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
     timer: 1500
   })
 }
-
-
 </script>
 
 <template>
@@ -33,10 +29,10 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
     <FormKit
       :config="{
         classes: {
-          form: 'flex flex-col gap-4 w-full',
+          form: 'flex flex-col w-full py-8 gap-8',
           outer: 'flex flex-col gap-2',
-          label: 'font-medium block'
-        }
+          /* label: 'font-medium block' */
+        },
       }"
       type="form"
       #default="{ value }"
@@ -51,7 +47,6 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
         name="PInputText"
         label="输入框"
         :value="`default value`.repeat(5)"
-        placeholder="请输入"
         some="prop"
         some-boolean-prop
         validation="required"
@@ -61,10 +56,8 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
         type="PInputPassword"
         name="PInputPassword"
         label="密码"
-        placeholder="输入一个密码"
         validation="required"
         toggleMask
-        fluid
         :feedback="false"
       />
       <FormKit