From e4ab2b164d7d6e5fa0002b884c91f70a70e4da76 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 17:19:45 +0300
Subject: [PATCH] Migrated float label

---
 .../themes/primeone/base/floatlabel/index.js  | 57 +++++++++++++++++++
 .../primeone/base/floatlabel/package.json     |  6 ++
 components/lib/themes/primeone/base/index.js  |  2 +
 .../primeone/presets/aura/floatlabel/index.js |  4 ++
 .../presets/aura/floatlabel/package.json      |  6 ++
 .../lib/themes/primeone/presets/aura/index.js |  8 +++
 6 files changed, 83 insertions(+)
 create mode 100644 components/lib/themes/primeone/base/floatlabel/index.js
 create mode 100644 components/lib/themes/primeone/base/floatlabel/package.json
 create mode 100644 components/lib/themes/primeone/presets/aura/floatlabel/index.js
 create mode 100644 components/lib/themes/primeone/presets/aura/floatlabel/package.json

diff --git a/components/lib/themes/primeone/base/floatlabel/index.js b/components/lib/themes/primeone/base/floatlabel/index.js
new file mode 100644
index 000000000..91f6019fb
--- /dev/null
+++ b/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);
+}
+    `
+};
diff --git a/components/lib/themes/primeone/base/floatlabel/package.json b/components/lib/themes/primeone/base/floatlabel/package.json
new file mode 100644
index 000000000..f8e9d7ae0
--- /dev/null
+++ b/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"
+}
diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js
index e57432fc5..e8d9c557d 100644
--- a/components/lib/themes/primeone/base/index.js
+++ b/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,
diff --git a/components/lib/themes/primeone/presets/aura/floatlabel/index.js b/components/lib/themes/primeone/presets/aura/floatlabel/index.js
new file mode 100644
index 000000000..eb5342324
--- /dev/null
+++ b/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}'
+};
diff --git a/components/lib/themes/primeone/presets/aura/floatlabel/package.json b/components/lib/themes/primeone/presets/aura/floatlabel/package.json
new file mode 100644
index 000000000..f8e9d7ae0
--- /dev/null
+++ b/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"
+}
diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js
index 6a9645fbb..5ff7e3f86 100644
--- a/components/lib/themes/primeone/presets/aura/index.js
+++ b/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,