chore: chanegs syntax for floatingLabel default prop value

formkit · Mar 22, 2024 · b83de53 · b83de53
1 parent d266ab0
commit b83de53
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/packages/addons/src/plugins/floatingLabels/floatingLabelsPlugin.ts b/packages/addons/src/plugins/floatingLabels/floatingLabelsPlugin.ts
@@ -3,7 +3,7 @@ import {
   FormKitPlugin,
   FormKitSectionsSchema,
 } from '@formkit/core'
-import { clone, whenAvailable, undefine } from '@formkit/utils'
+import { clone, whenAvailable } from '@formkit/utils'
 import { findSection } from '@formkit/inputs'
 
 /**
@@ -77,21 +77,17 @@ export function createFloatingLabelsPlugin(
 ): FormKitPlugin {
   const floatingLabelsPlugin = (node: FormKitNode) => {
     let nodeEl: HTMLElement | null = null
-    node.addProps([
-      'floatingLabel',
-      '_labelBackgroundColor',
-      '_labelOffset',
-      '_offsetCalculated',
-    ])
-
-    node.props.floatingLabel = undefine(node.props.floatingLabel)
-
-    const useFloatingLabels =
-      typeof node.props.floatingLabel === 'boolean'
-        ? node.props.floatingLabel
-        : typeof FloatingLabelsOptions?.useAsDefault === 'boolean'
-        ? FloatingLabelsOptions?.useAsDefault
-        : false
+    node.addProps({
+      floatingLabel: {
+        boolean: true,
+        default: !!FloatingLabelsOptions?.useAsDefault,
+      },
+      _labelBackgroundColor: {},
+      _labelOffset: {},
+      _offsetCalculated: {},
+    })
+
+    const useFloatingLabels = node.props.floatingLabel
 
     if (useFloatingLabels && node.context) {
       node.on('created', () => {

diff --git a/packages/nuxt/playground/pages/floating-labels.vue b/packages/nuxt/playground/pages/floating-labels.vue
@@ -34,14 +34,14 @@ import '@formkit/addons/css/floatingLabels.css'
       label="test"
     />
     <FormKit
-      :plugins="[createFloatingLabelsPlugin()]"
+      :plugins="[createFloatingLabelsPlugin({ useAsDefault: true })]"
       type="email"
       name="email"
       label="test"
       floating-label="false"
     />
     <FormKit
-      :plugins="[createFloatingLabelsPlugin()]"
+      :plugins="[createFloatingLabelsPlugin({ useAsDefault: true })]"
       type="email"
       name="email"
       label="test"