floatLabel

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,29 +4,35 @@ 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';
+
+const input = createSection('input', () => ({
+  $cmp: markRaw(SchemaComponent) as never,
+  bind: '$attrs',
+  props: {
+    invalid: '$state.invalid',
+    disabled: '$disabled',
+    // name: '$node.name',
+    // inputProps: {}
+    onInput: '$handlers.DOMInput',
+    onBlur: '$handlers.blur',
+    modelValue: '$_value',
+    inputId: '$id',
+    fluid: true,
+  },
+}));
 
 export const PInputPassword: FormKitTypeDefinition = {
   type: 'input',
   schema: outer(
-    label('$label'),
-    createSection('input', () => ({
-      $cmp: markRaw(SchemaComponent) as never,
-      bind: '$attrs',
-      props: {
-        invalid: '$state.invalid',
-        disabled: '$disabled',
-        // name: '$node.name',
-        // inputProps: {}
-        onInput: '$handlers.DOMInput',
-        onBlur: '$handlers.blur',
-        modelValue: '$_value',
-        inputId: '$id',
-      },
-    }))(),
+    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,35 +3,36 @@ 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}`;
+const input = createSection('input', () => ({
+  $cmp: markRaw(SchemaComponent) as never,
+  bind: '$attrs',
+  props: {
+    invalid: '$state.invalid',
+    type: '$type',
+    disabled: '$disabled',
+    name: '$node.name',
+    onInput: '$handlers.DOMInput',
+    onBlur: '$handlers.blur',
+    modelValue: '$_value',
+    id: '$id',
+    fluid: true,
+  },
+}));
 
 export const PInputText: FormKitTypeDefinition = {
   type: 'input',
   schema: outer(
-    label('$label'),
-    createSection('input', () => ({
-      $cmp: cmpName,
-      bind: '$attrs',
-      props: {
-        invalid: '$state.invalid',
-        type: '$type',
-        disabled: '$disabled',
-        name: '$node.name',
-        onInput: '$handlers.DOMInput',
-        onBlur: '$handlers.blur',
-        modelValue: '$_value',
-        id: '$id',
-      },
-    }))(),
+    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',
+}));