@bagelink/vue 0.0.692 → 0.0.696

package/src/styles/appearance.css

@@ -264,7 +264,7 @@
     color: var(--bgl-green) !important;
 }
 
-.bg-input-white input {
+.bg-input-white input, .bg-input-white .selectinput-btn {
     background: var(--bgl-white) !important;
 }
 
@@ -272,7 +272,7 @@
     color: var(--bgl-white) !important;
 }
 
-.bg-input-primary input {
+.bg-input-primary input, .bg-input-primary .selectinput-btn {
     background: var(--bgl-primary) !important;
 }
 
@@ -280,7 +280,7 @@
     color: var(--bgl-primary) !important;
 }
 
-.bg-input-primary-tint input {
+.bg-input-primary-tint input, .bg-input-primary-tint .selectinput-btn {
     background: var(--bgl-primary-tint) !important;
 }
 
@@ -288,7 +288,7 @@
     color: var(--bgl-primary-tint) !important;
 }
 
-.bg-input-primary-light input {
+.bg-input-primary-light input, .bg-input-primary-light .selectinput-btn {
     background: var(--bgl-primary-light) !important;
 }
 
@@ -296,7 +296,7 @@
     color: var(--bgl-primary-light) !important;
 }
 
-.bg-input-blue-20 input {
+.bg-input-blue-20 input, .bg-input-blue-20 .selectinput-btn {
     background: var(--bgl-blue-20) !important;
 }
 
@@ -304,7 +304,7 @@
     color: var(--bgl-blue-20) !important;
 }
 
-.bg-input-blue-dark input {
+.bg-input-blue-dark input, .bg-input-blue-dark .selectinput-btn {
     background: var(--bgl-blue-dark) !important;
 }
 
@@ -312,7 +312,7 @@
     color: var(--bgl-blue-dark) !important;
 }
 
-.bg-input-blue-light input {
+.bg-input-blue-light input, .bg-input-blue-light .selectinput-btn {
     background: var(--bgl-blue-light) !important;
 }
 
@@ -320,7 +320,7 @@
     color: var(--bgl-blue-light) !important;
 }
 
-.bg-input-black input {
+.bg-input-black input, .bg-input-black .selectinput-btn {
     background: var(--bgl-black) !important;
 }
 
@@ -328,7 +328,7 @@
     color: var(--bgl-black) !important;
 }
 
-.bg-input-black-tint input {
+.bg-input-black-tint input, .bg-input-black-tint .selectinput-btn {
     background: var(--bgl-black-tint) !important;
 }
 
@@ -336,7 +336,7 @@
     color: var(--bgl-black-tint) !important;
 }
 
-.bg-input-gray input {
+.bg-input-gray input, .bg-input-gray .selectinput-btn {
     background: var(--bgl-gray) !important;
 }
 
@@ -344,7 +344,7 @@
     color: var(--bgl-gray) !important;
 }
 
-.bg-input-gray-light input {
+.bg-input-gray-light input, .bg-input-gray-light .selectinput-btn {
     background: var(--bgl-gray-light) !important;
 }
 
@@ -352,7 +352,7 @@
     color: var(--bgl-gray-light) !important;
 }
 
-.bg-input-gray-80 input {
+.bg-input-gray-80 input, .bg-input-gray-80 .selectinput-btn {
     background: var(--bgl-gray-80) !important;
 }
 
@@ -360,7 +360,7 @@
     color: var(--bgl-gray-80) !important;
 }
 
-.bg-input-gray-20 input {
+.bg-input-gray-20 input, .bg-input-gray-20 .selectinput-btn {
     background: var(--bgl-gray-20) !important;
 }
 
@@ -368,7 +368,7 @@
     color: var(--bgl-gray-20) !important;
 }
 
-.bg-input-pink input {
+.bg-input-pink input, .bg-input-pink .selectinput-btn {
     background: var(--bgl-pink) !important;
 }
 
@@ -376,7 +376,7 @@
     color: var(--bgl-pink) !important;
 }
 
-.bg-input-red input {
+.bg-input-red input, .bg-input-red .selectinput-btn {
     background: var(--bgl-red) !important;
 }
 
@@ -384,7 +384,7 @@
     color: var(--bgl-red) !important;
 }
 
-.bg-input-red-tint input {
+.bg-input-red-tint input, .bg-input-red-tint .selectinput-btn {
     background: var(--bgl-red-tint) !important;
 }
 
@@ -392,7 +392,7 @@
     color: var(--bgl-red-tint) !important;
 }
 
-.bg-input-yellow input {
+.bg-input-yellow input, .bg-input-yellow .selectinput-btn {
     background: var(--bgl-yellow) !important;
 }
 
@@ -400,7 +400,7 @@
     color: var(--bgl-yellow) !important;
 }
 
-.bg-input-yellow-light input {
+.bg-input-yellow-light input, .bg-input-yellow-light .selectinput-btn {
     background: var(--bgl-yellow-light) !important;
 }
 
@@ -408,11 +408,11 @@
     color: var(--bgl-yellow-light) !important;
 }
 
-.bg-input-green input {
+.bg-input-green input, .bg-input-green .selectinput-btn {
     background: var(--bgl-green) !important;
 }
 
-.bg-input-transparent input {
+.bg-input-transparent input, .bg-input-transparent .selectinput-btn {
     background: transparent !important;
 }
 
@@ -769,7 +769,7 @@
         background: transparent !important;
     }
 
-    .m_bg-input-white input {
+    .m_bg-input-white input,    .m_bg-input-white .selectinput-btn {
         background: var(--bgl-white) !important;
     }
 
@@ -777,7 +777,7 @@
         color: var(--bgl-white) !important;
     }
 
-    .m_bg-input-primary input {
+    .m_bg-input-primary input,    .m_bg-input-primary .selectinput-btn {
         background: var(--bgl-primary) !important;
     }
 
@@ -785,7 +785,7 @@
         color: var(--bgl-primary) !important;
     }
 
-    .m_bg-input-primary-tint input {
+    .m_bg-input-primary-tint input,    .m_bg-input-primary-tint .selectinput-btn {
         background: var(--bgl-primary-tint) !important;
     }
 
@@ -793,7 +793,7 @@
         color: var(--bgl-primary-tint) !important;
     }
 
-    .m_bg-input-primary-light input {
+    .m_bg-input-primary-light input,    .m_bg-input-primary-light .selectinput-btn {
         background: var(--bgl-primary-light) !important;
     }
 
@@ -801,7 +801,7 @@
         color: var(--bgl-primary-light) !important;
     }
 
-    .m_bg-input-blue-20 input {
+    .m_bg-input-blue-20 input,    .m_bg-input-blue-20 .selectinput-btn {
         background: var(--bgl-blue-20) !important;
     }
 
@@ -809,7 +809,7 @@
         color: var(--bgl-blue-20) !important;
     }
 
-    .m_bg-input-blue-dark input {
+    .m_bg-input-blue-dark input,    .m_bg-input-blue-dark .selectinput-btn {
         background: var(--bgl-blue-dark) !important;
     }
 
@@ -817,7 +817,7 @@
         color: var(--bgl-blue-dark) !important;
     }
 
-    .m_bg-input-blue-light input {
+    .m_bg-input-blue-light input,    .m_bg-input-blue-light .selectinput-btn {
         background: var(--bgl-blue-light) !important;
     }
 
@@ -825,7 +825,7 @@
         color: var(--bgl-blue-light) !important;
     }
 
-    .m_bg-input-black input {
+    .m_bg-input-black input,    .m_bg-input-black .selectinput-btn {
         background: var(--bgl-black) !important;
     }
 
@@ -833,7 +833,7 @@
         color: var(--bgl-black) !important;
     }
 
-    .m_bg-input-black-tint input {
+    .m_bg-input-black-tint input,    .m_bg-input-black-tint .selectinput-btn {
         background: var(--bgl-black-tint) !important;
     }
 
@@ -841,7 +841,7 @@
         color: var(--bgl-black-tint) !important;
     }
 
-    .m_bg-input-gray input {
+    .m_bg-input-gray input,    .m_bg-input-gray .selectinput-btn {
         background: var(--bgl-gray) !important;
     }
 
@@ -849,7 +849,7 @@
         color: var(--bgl-gray) !important;
     }
 
-    .m_bg-input-gray-light input {
+    .m_bg-input-gray-light input,    .m_bg-input-gray-light .selectinput-btn {
         background: var(--bgl-gray-light) !important;
     }
 
@@ -857,7 +857,7 @@
         color: var(--bgl-gray-light) !important;
     }
 
-    .m_bg-input-gray-80 input {
+    .m_bg-input-gray-80 input,    .m_bg-input-gray-80 .selectinput-btn {
         background: var(--bgl-gray-80) !important;
     }
 
@@ -865,7 +865,7 @@
         color: var(--bgl-gray-80) !important;
     }
 
-    .m_bg-input-gray-20 input {
+    .m_bg-input-gray-20 input,    .m_bg-input-gray-20 .selectinput-btn {
         background: var(--bgl-gray-20) !important;
     }
 
@@ -873,7 +873,7 @@
         color: var(--bgl-gray-20) !important;
     }
 
-    .m_bg-input-pink input {
+    .m_bg-input-pink input,    .m_bg-input-pink .selectinput-btn {
         background: var(--bgl-pink) !important;
     }
 
@@ -881,7 +881,7 @@
         color: var(--bgl-pink) !important;
     }
 
-    .m_bg-input-red input {
+    .m_bg-input-red input,    .m_bg-input-red .selectinput-btn {
         background: var(--bgl-red) !important;
     }
 
@@ -889,7 +889,7 @@
         color: var(--bgl-red) !important;
     }
 
-    .m_bg-input-red-tint input {
+    .m_bg-input-red-tint input,    .m_bg-input-red-tint .selectinput-btn {
         background: var(--bgl-red-tint) !important;
     }
 
@@ -897,7 +897,7 @@
         color: var(--bgl-red-tint) !important;
     }
 
-    .m_bg-input-yellow input {
+    .m_bg-input-yellow input,    .m_bg-input-yellow .selectinput-btn {
         background: var(--bgl-yellow) !important;
     }
 
@@ -905,7 +905,7 @@
         color: var(--bgl-yellow) !important;
     }
 
-    .m_bg-input-yellow-light input {
+    .m_bg-input-yellow-light input,    .m_bg-input-yellow-light .selectinput-btn {
         background: var(--bgl-yellow-light) !important;
     }
 
@@ -913,7 +913,7 @@
         color: var(--bgl-yellow-light) !important;
     }
 
-    .m_bg-input-green input {
+    .m_bg-input-green input,    .m_bg-input-green .selectinput-btn {
         background: var(--bgl-green) !important;
     }
 
@@ -921,7 +921,7 @@
         color: var(--bgl-green) !important;
     }
 
-    .m_bg-input-transparent input {
+    .m_bg-input-transparent input,    .m_bg-input-transparent .selectinput-btn {
         background: transparent !important;
     }
 

package/src/styles/inputs.css

@@ -5,6 +5,13 @@ select {
     width: 100%;
 }
 
+
+.bagel-input-error input,
+.bagel-input-error button,
+.bagel-input-error textarea {
+	outline: 1px solid var(--bgl-red);
+}
+
 .bagel-input {
     position: relative;
     display: flex;
@@ -15,6 +22,34 @@ select {
     color: var(--bgl-black);
 }
 
+.bagel-input::-webkit-input-placeholder .bagel-input label {
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+}
+
+.bagel-input::-moz-placeholder .bagel-input label {
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+}
+
+.bagel-input:-ms-input-placeholder .bagel-input label {
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+}
+
+.bagel-input::-ms-input-placeholder .bagel-input label {
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
+}
+
 .bagel-input::placeholder .bagel-input label {
     display: block;
     font-size: var(--label-font-size);
@@ -22,6 +57,22 @@ select {
     line-height: 1.3;
 }
 
+.bagel-input::-webkit-input-placeholder {
+    color: var(--placeholder-color);
+}
+
+.bagel-input::-moz-placeholder {
+    color: var(--placeholder-color);
+}
+
+.bagel-input:-ms-input-placeholder {
+    color: var(--placeholder-color);
+}
+
+.bagel-input::-ms-input-placeholder {
+    color: var(--placeholder-color);
+}
+
 .bagel-input::placeholder {
     color: var(--placeholder-color);
 }
@@ -51,6 +102,26 @@ select {
 }
 
 
+.bagel-input input::-webkit-input-placeholder, .bagel-input textarea::-webkit-input-placeholder, .bagel-input select::-webkit-input-placeholder, .custom-select .input::-webkit-input-placeholder {
+    color: var(--placeholder-color);
+}
+
+
+.bagel-input input::-moz-placeholder, .bagel-input textarea::-moz-placeholder, .bagel-input select::-moz-placeholder, .custom-select .input::-moz-placeholder {
+    color: var(--placeholder-color);
+}
+
+
+.bagel-input input:-ms-input-placeholder, .bagel-input textarea:-ms-input-placeholder, .bagel-input select:-ms-input-placeholder, .custom-select .input:-ms-input-placeholder {
+    color: var(--placeholder-color);
+}
+
+
+.bagel-input input::-ms-input-placeholder, .bagel-input textarea::-ms-input-placeholder, .bagel-input select::-ms-input-placeholder, .custom-select .input::-ms-input-placeholder {
+    color: var(--placeholder-color);
+}
+
+
 .bagel-input input::placeholder,
 .bagel-input textarea::placeholder,
 .bagel-input select::placeholder,
@@ -65,11 +136,13 @@ select {
 }
 
 .bagel-input.search-wrap input {
-    padding-inline-end: 2rem;
+    -webkit-padding-end: 2rem;
+            padding-inline-end: 2rem;
 }
 
 .bagel-input.search-wrap .bgl_icon-font {
-    margin-inline-start: -1.75rem;
+    -webkit-margin-start: -1.75rem;
+            margin-inline-start: -1.75rem;
 }
 
 .bagel-input select {
@@ -88,6 +161,8 @@ select {
 
 .bagel-input input[type="radio"] {
     padding: 0;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
     width: fit-content;
 }
 
@@ -209,12 +284,14 @@ select {
 .bagel-input input[type="color"]::-webkit-color-swatch {
     border-radius: var(--input-border-radius);
     border: none;
+    -webkit-transition: box-shadow 200ms ease;
     transition: box-shadow 200ms ease;
 }
 
 .bagel-input input[type="color"]::-moz-color-swatch {
     border-radius: var(--input-border-radius);
     border: none;
+    -moz-transition: box-shadow 200ms ease;
     transition: box-shadow 200ms ease;
 }
 

package/src/utils/BagelFormUtils.ts

@@ -1,4 +1,4 @@
-import type { Field, Option } from '@bagelink/vue'
+import type { BglFormSchemaT, Field, Option } from '@bagelink/vue'
 
 interface InputOptions {
 	required?: boolean
@@ -163,3 +163,34 @@ export function frmRow(...children: Field[]) {
 		children,
 	}
 }
+
+export function findBglFieldById(id: string, _schema: BglFormSchemaT): Field | undefined {
+	for (const field of _schema) {
+		if (field.id === id) return field
+		if (field.children && Number(field.children.length) > 0) {
+			const child = findBglFieldById(id, field.children)
+			if (child) return child
+		}
+	}
+	return undefined
+}
+
+// export function updateBagelSchemaWithErrorResponse<T>(
+// 	schema: BglFormSchemaT<T>,
+// 	invalidFieldId: Record<string, string[]>,
+// ) {
+// 	return schema.map((f) => {
+// 				if (f.id === invalidFieldId) {
+// 					f.class = 'bagel-input-error'
+// 				}
+// 				if (f.id === undefined && f.children) {
+// 					f.children = f.children.map((c) => {
+// 						if (c.id === invalidFieldId) {
+// 							c.class = 'bagel-input-error'
+// 						}
+// 						return c
+// 					})
+// 				}
+// 				return f
+// 			})
+// }