🎨 Unified disabled form component appearance

Author: codewithkyle

src/framework/components/checkbox-group/checkbox-group.scss

@@ -3,8 +3,9 @@ checkbox-group {
     width: 100%;
     position: relative;
 
-    &.is-disabled {
+    &[state="DISABLED"] {
         p {
+            opacity: 0.6;
             color: var(--grey-400) !important;
 
             strong {
@@ -14,10 +15,11 @@ checkbox-group {
 
         @media (prefers-color-scheme: dark) {
             p {
-                color: var(--grey-500) !important;
+                color: var(--grey-300) !important;
+                opacity: 0.3;
 
                 strong {
-                    color: var(--grey-500) !important;
+                    color: var(--grey-300) !important;
                 }
             }
         }

src/framework/components/checkbox-group/checkbox-group.ts

@@ -37,6 +37,7 @@ export default class CheckboxGroup extends Component<ICheckboxGroup> {
         settings.options.map((option) => {
             option.disabled = settings?.disabled ?? false;
         });
+        this.state = settings.disabled ? "DISABLED" : "IDLING";
         this.set(settings);
     }
 
@@ -82,6 +83,7 @@ export default class CheckboxGroup extends Component<ICheckboxGroup> {
     }
 
     override render() {
+        this.setAttribute("state", this.state);
         this.setAttribute("form-input", "");
         const view = html`
             <p>

src/framework/components/checkbox-group/index.html

@@ -5,6 +5,15 @@
     data-options='[{"label": "Example 1","value":"example1"},{"label": "Example 2","value":"example2"},{"label": "Example 3","checked": true,"value":"example3"}]'
 ></checkbox-group>
 
+<checkbox-group
+    class="mt-2"
+    data-label="Example"
+    data-name="example"
+    data-instructions="Lorem ipsum and wat knot..."
+    data-options='[{"label": "Example 1","value":"example1"},{"label": "Example 2","value":"example2"},{"label": "Example 3","checked": true,"value":"example3"}]'
+    data-disabled="true"
+></checkbox-group>
+
 <script type="module" src="/js/checkbox-group.js"></script>
 <script>
     document.querySelector('checkbox-group').addEventListener('change', (event) => {

src/framework/components/checkbox/checkbox.ts

@@ -63,6 +63,7 @@ export default class Checkbox extends Component<ICheckbox> {
 
     private handleChange: EventListener = (e: Event) => {
         e.stopImmediatePropagation();
+        if (this.model.disabled) return;
         const isChecked = !this.model.checked;
         this.set({
             checked: isChecked,

src/framework/components/checkbox/index.html

@@ -3,6 +3,13 @@
     data-name="example"
 ></checkbox-component>
 
+<checkbox-component
+    class="mt-1"
+    data-label="Example"
+    data-name="example"
+    data-disabled="true"
+></checkbox-component>
+
 <script type="module" src="/js/checkbox.js"></script>
 
 <script>

src/framework/components/inputs/color-input/color-input.scss

@@ -5,6 +5,15 @@ color-input {
     width: 100%;
     height: 36px;
 
+    &[state="DISABLED"] {
+        opacity: 0.6;
+        cursor: not-allowed !important;
+
+        @media (prefers-color-scheme: dark) {
+            opacity: 0.3;
+        }
+    }
+
     input[type="color"] {
         opacity: 0;
         visibility: hidden;
@@ -16,10 +25,6 @@ color-input {
             & + label {
                 cursor: not-allowed !important;
 
-                color-preview {
-                    background-color: var(--grey-300) !important;
-                }
-
                 span {
                     color: var(--grey-400) !important;
                 }

src/framework/components/inputs/color-input/color-input.ts

@@ -56,6 +56,7 @@ export default class ColorInput extends InputBase<IColorInput> {
     };
 
     override render() {
+        this.setAttribute("state", this.state);
         const view = html`
             <input
                 name="${this.model.name}"

src/framework/components/inputs/color-input/index.html

@@ -4,6 +4,14 @@
     data-value="#ff0000"
 ></color-input>
 
+<color-input 
+    class="mt-2"
+    data-name="demo" 
+    data-label="Background Color"
+    data-value="#ff0000"
+    data-disabled="true"
+></color-input>
+
 <script type="module" src="/js/color-input.js"></script>
 <script>
     const colorInput = document.querySelector('color-input');

src/framework/components/inputs/date-input/date-input.ts

@@ -199,25 +199,27 @@ export default class DateInput extends InputBase<IDateInput> {
                     autocapitalize=${this.model.autocapitalize}
                     autocomplete="${this.model.autocomplete}"
                     ?required=${this.model.required}
-                    ?disalbed=${this.model.disabled}
+                    ?disabled=${this.model.disabled}
                     ?autofocus=${this.model.autofocus}
                 />
             </input-container>
         `;
         render(view, this);
 
-        const input = this.querySelector("input");
-        flatpickr(input, {
-            dateFormat: this.model.dateFormat,
-            enableTime: this.model.enableTime,
-            altFormat: this.model.displayFormat,
-            altInput: true,
-            minDate: this.model.minDate,
-            maxDate: this.model.maxDate,
-            mode: this.model.mode,
-            noCalendar: this.model.disableCalendar,
-            time_24hr: this.model.timeFormat === "24",
-        });
+        if (this.state !== "DISABLED") {
+            const input = this.querySelector("input");
+            flatpickr(input, {
+                dateFormat: this.model.dateFormat,
+                enableTime: this.model.enableTime,
+                altFormat: this.model.displayFormat,
+                altInput: true,
+                minDate: this.model.minDate,
+                maxDate: this.model.maxDate,
+                mode: this.model.mode,
+                noCalendar: this.model.disableCalendar,
+                time_24hr: this.model.timeFormat === "24",
+            });
+        }
         this.firstRender = false;
     }
 }

src/framework/components/inputs/date-input/index.html

@@ -5,6 +5,14 @@
     class="mb-2"
 ></date-input-component>
 
+<date-input-component
+    data-label="Example"
+    data-icon='<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>'
+    data-mode="single"
+    data-disabled="true"
+    class="mb-2"
+></date-input-component>
+
 <script>
     const dateInput = document.querySelector('date-input-component');
     dateInput.addEventListener('change', (e) => {