Migrated float label

components/lib/themes/primeone/base/floatlabel/index.js

@@ -0,0 +1,57 @@
+export default {
+    css: `
+.p-float-label {
+    display: block;
+    position: relative;
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+    left: 0.75rem;
+    color: var(--p-float-label-text-color);
+    transition-duration: var(--p-transition-duration);
+}
+
+.p-float-label:has(textarea) label {
+    top: 1rem;
+}
+
+.p-float-label:has(input:focus) label,
+.p-float-label:has(input.p-filled) label,
+.p-float-label:has(input:-webkit-autofill) label,
+.p-float-label:has(textarea:focus) label,
+.p-float-label:has(textarea.p-filled) label,
+.p-float-label:has(.p-inputwrapper-focus) label,
+.p-float-label:has(.p-inputwrapper-filled) label {
+    top: -.75rem;
+    font-size: 12px;
+    color: var(--p-float-label-text-color-focus);
+}
+
+.p-float-label .p-placeholder,
+.p-float-label input::placeholder,
+.p-float-label .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label .p-focus .p-placeholder,
+.p-float-label input:focus::placeholder,
+.p-float-label .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label > .p-invalid + label {
+    color: var(--p-float-label-text-color-invalid);
+}
+    `
+};

components/lib/themes/primeone/base/floatlabel/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/primeone/base/index.js

@@ -24,6 +24,7 @@ import dock from 'primevue/themes/primeone/base/dock';
 import dropdown from 'primevue/themes/primeone/base/dropdown';
 import editor from 'primevue/themes/primeone/base/editor';
 import fieldset from 'primevue/themes/primeone/base/fieldset';
+import floatlabel from 'primevue/themes/primeone/base/floatlabel';
 import galleria from 'primevue/themes/primeone/base/galleria';
 import global from 'primevue/themes/primeone/base/global';
 import iconfield from 'primevue/themes/primeone/base/iconfield';
@@ -107,6 +108,7 @@ export default {
         dock,
         editor,
         fieldset,
+        floatlabel,
         galleria,
         iconfield,
         image,

components/lib/themes/primeone/presets/aura/floatlabel/index.js

@@ -0,0 +1,4 @@
+export default {
+    color: '{form.field.placeholder.text.color}',
+    focusColor: '{form.field.placeholder.text.color}'
+};

components/lib/themes/primeone/presets/aura/floatlabel/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/primeone/presets/aura/index.js

@@ -24,6 +24,7 @@ import dock from 'primevue/themes/primeone/presets/aura/dock';
 import dropdown from 'primevue/themes/primeone/presets/aura/dropdown';
 import editor from 'primevue/themes/primeone/presets/aura/editor';
 import fieldset from 'primevue/themes/primeone/presets/aura/fieldset';
+import floatlabel from 'primevue/themes/primeone/presets/aura/floatlabel';
 import galleria from 'primevue/themes/primeone/presets/aura/galleria';
 import iconfield from 'primevue/themes/primeone/presets/aura/iconfield';
 import image from 'primevue/themes/primeone/presets/aura/image';
@@ -173,6 +174,9 @@ export default {
                     textColor: '{surface.700}',
                     textColorDisabled: '{surface.500}',
                     placeholderTextColor: '{surface.500}',
+                    floatLabelTextColor: '{surface.500}',
+                    floatLabelTextColorInvalid: '{red.400}',
+                    floatLabelTextColorFocus: '{surface.500}',
                     boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 }
             },
@@ -216,6 +220,9 @@ export default {
                     textColor: '{surface.0}',
                     textColorDisabled: '{surface.400}',
                     placeholderTextColor: '{surface.400}',
+                    floatLabelTextColor: '{surface.400}',
+                    floatLabelTextColorInvalid: '{red.300}',
+                    floatLabelTextColorFocus: '{surface.400}',
                     boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 }
             }
@@ -248,6 +255,7 @@ export default {
         dropdown,
         editor,
         fieldset,
+        floatlabel,
         galleria,
         iconfield,
         image,