@ctrliq/quantic-components 1.86.0 → 1.86.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/meta.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
|
-
"generated": "2026-08-28T17:
|
|
3
|
+
"generated": "2026-08-28T17:35:22.734Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"tag": "quantic-action-group",
|
|
@@ -2094,6 +2094,15 @@
|
|
|
2094
2094
|
"description": "Validation message shown when status is set."
|
|
2095
2095
|
}
|
|
2096
2096
|
],
|
|
2097
|
+
"examples": [
|
|
2098
|
+
"<quantic-field\n fieldId=\"color-input\"\n label=\"Favorite Color\"\n hint=\"Pick your favorite color\"\n required\n >\n <input\n type=\"color\"\n id=\"color-input\"\n aria-labelledby=\"color-input\"\n aria-describedby=\"hint-color-input\"\n style=\"width: 100%; height: 48px; border: 1px solid var(--quantic-border-secondary); border-radius: var(--quantic-radius-md); cursor: pointer;\"\n />\n </quantic-field>",
|
|
2099
|
+
"<quantic-field\n fieldId=\"datetime-input\"\n label=\"Appointment Date & Time\"\n message=\"Appointment successfully scheduled\"\n status=\"success\"\n required\n >\n <quantic-text-input\n type=\"datetime-local\"\n id=\"datetime-input\"\n aria-labelledby=\"datetime-input\"\n aria-describedby=\"message-datetime-input\"\n ></quantic-text-input>\n </quantic-field>",
|
|
2100
|
+
"<quantic-field\n fieldId=\"custom-input-error\"\n label=\"File Upload\"\n hint=\"Maximum file size: 5MB\"\n message=\"File size exceeds the maximum limit\"\n status=\"error\"\n required\n >\n <input\n type=\"file\"\n id=\"custom-input-error\"\n aria-labelledby=\"custom-input-error\"\n aria-describedby=\"hint-custom-input-error message-custom-input-error\"\n aria-invalid=\"true\"\n style=\"width: 100%; padding: 8px; border: 2px solid var(--quantic-border-error); border-radius: var(--quantic-radius-md);\"\n />\n </quantic-field>",
|
|
2101
|
+
"<quantic-field\n fieldId=\"custom-textarea\"\n label=\"Comments\"\n hint=\"Please provide detailed feedback\"\n required\n >\n <textarea\n id=\"custom-textarea\"\n rows=\"5\"\n placeholder=\"Enter your comments here...\"\n aria-labelledby=\"custom-textarea\"\n aria-describedby=\"hint-custom-textarea\"\n style=\"width: 100%; padding: 12px; font-family: inherit; font-size: 14px; border: 1px solid var(--quantic-border-secondary); border-radius: var(--quantic-radius-md); resize: vertical;\"\n ></textarea>\n </quantic-field>",
|
|
2102
|
+
"<quantic-field\n fieldId=\"phone-input\"\n label=\"Phone Number\"\n hint=\"Enter your phone number with country code\"\n required\n >\n <div style=\"display: flex; gap: 8px;\">\n <quantic-text-input\n placeholder=\"+1\"\n maxlength=\"3\"\n aria-labelledby=\"phone-input\"\n aria-describedby=\"hint-phone-input\"\n style=\"max-width: 60px;\"\n ></quantic-text-input>\n <quantic-text-input\n placeholder=\"(555) 123-4567\"\n aria-labelledby=\"phone-input\"\n aria-describedby=\"hint-phone-input\"\n ></quantic-text-input>\n </div>\n </quantic-field>",
|
|
2103
|
+
"<quantic-field\n fieldId=\"with-hint\"\n label=\"Username\"\n hint=\"Must be 3–20 characters\"\n size=\"md\"\n hint-position=\"below\"\n >\n <quantic-text-input\n id=\"with-hint\"\n aria-labelledby=\"with-hint\"\n aria-describedby=\"hint-with-hint\"\n placeholder=\"Enter username\"\n size=\"md\"\n ></quantic-text-input>\n </quantic-field>",
|
|
2104
|
+
"<quantic-field\n fieldId=\"with-select\"\n label=\"Country\"\n hint=\"Select your country of residence\"\n size=\"md\"\n hint-position=\"below\"\n >\n <quantic-select\n id=\"with-select\"\n aria-labelledby=\"with-select\"\n aria-describedby=\"hint-with-select\"\n placeholder=\"Select a country\"\n >\n <option value=\"us\">United States</option>\n <option value=\"ca\">Canada</option>\n <option value=\"uk\">United Kingdom</option>\n <option value=\"au\">Australia</option>\n </quantic-select>\n </quantic-field>"
|
|
2105
|
+
],
|
|
2097
2106
|
"relatedTo": [
|
|
2098
2107
|
"quantic-field-group",
|
|
2099
2108
|
"quantic-fieldset"
|