LWB-264 Major overhaul for attribute trait structuring

resources/views/forms/inputs/button.blade.php

@@ -1,3 +1 @@
 <input type="button" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/checkbox.blade.php

@@ -1,3 +1 @@
 <input type="checkbox" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/color.blade.php

@@ -1,3 +1 @@
 <input type="color" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/date.blade.php

@@ -1,3 +1 @@
 <input type="date" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/datetimelocal.blade.php

@@ -1,3 +1 @@
 <input type="datetimelocal" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/email.blade.php

@@ -1,3 +1 @@
 <input type="email" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/file.blade.php

@@ -1,3 +1 @@
 <input type="file" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/hidden.blade.php

@@ -1,3 +1 @@
 <input type="hidden" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/image.blade.php

@@ -1,3 +1 @@
 <input type="image" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/month.blade.php

@@ -1,3 +1 @@
 <input type="month" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/number.blade.php

@@ -1,3 +1 @@
 <input type="number" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/password.blade.php

@@ -1,3 +1 @@
 <input type="password" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/radio.blade.php

@@ -1,3 +1 @@
 <input type="radio" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/range.blade.php

@@ -1,3 +1 @@
 <input type="range" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/reset.blade.php

@@ -1,3 +1 @@
 <input type="reset" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/search.blade.php

@@ -1,3 +1 @@
 <input type="search" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/submit.blade.php

@@ -1,3 +1 @@
 <input type="submit" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/tel.blade.php

@@ -1,3 +1 @@
 <input type="tel" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/text.blade.php

@@ -1,3 +1 @@
 <input type="text" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/time.blade.php

@@ -1,3 +1 @@
 <input type="time" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/url.blade.php

@@ -1,3 +1 @@
 <input type="url" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

resources/views/forms/inputs/week.blade.php

@@ -1,3 +1 @@
 <input type="week" {!! $globalAttributes !!} {!! $specificAttributes !!}>
-    {{ $slot }}
-</menu>

src/Components/AttributeTraits/AltAttribute.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace T73biz\LwBits\Components\AttributeTraits;
+
+use Livewire\Features\SupportAttributes\AttributeCollection;
+
+trait AltAttribute
+{
+    /**
+     * A text description of the resource. This is a required attribute for accessibility and is used by screen readers.
+     */
+    public string $alt = '';
+
+    /**
+     * Set the alt attribute
+     *
+     * @throws \T73biz\LwBits\Exceptions\InvalidAttributeException
+     */
+    public function setAltAttribute(AttributeCollection &$specificAttributes): void
+    {
+        if (empty($this->alt)) {
+            throw new \T73biz\LwBits\Exceptions\InvalidAttributeException('The alt attribute is required for accessibility and must be set.');
+        }
+        $specificAttributes->add(['alt' => $this->alt]);
+    }
+}

src/Components/AttributeTraits/AutocompleteAttribute.php

@@ -0,0 +1,115 @@
+<?php
+
+namespace T73biz\LwBits\Components\AttributeTraits;
+
+use Livewire\Features\SupportAttributes\AttributeCollection;
+use T73biz\LwBits\Exceptions\InvalidAttributeException;
+
+trait AutocompleteAttribute
+{
+    /**
+     * The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide
+     * automated assistance in filling out form field values, as well as guidance to the browser as to the type of
+     * information expected in the field.
+     *
+     * It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select>
+     * elements, and <form> elements.
+     */
+    public string $autocomplete = '';
+
+    /**
+     * Set the autocomplete attribute.
+     *
+     * @throws \T73biz\LwBits\Exceptions\InvalidAttributeException
+     */
+    public function setAutocompleteAttribute(AttributeCollection &$specificAttributes): void
+    {
+        /**
+         * Possible Values:
+         * - off: The browser is not allowed to automatically complete the input. Note: It can't prevent a password manager from asking the user if they want to save username and password information.
+         * - on: The browser is allowed to automatically complete the input with no guidance as to the type of data expected.
+         * - <token-list>: An ordered set of space-separated tokens consisting of autofill detail tokens.
+         *
+         * If the autocomplete attribute is <token-list>, each token is the string "section-", case-insensitive,
+         * followed by the rest of the token. All form controls with the same token belong to the named group.
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+         */
+        $allowedValues = [
+            'name',
+            'honorific-prefix',
+            'given-name',
+            'additional-name',
+            'family-name',
+            'honorific-suffix',
+            'nickname',
+            'email',
+            'username',
+            'new-password',
+            'current-password',
+            'one-time-code',
+            'organization-title',
+            'organization',
+            'street-address',
+            'shipping',
+            'billing',
+            'address-line1',
+            'address-line2',
+            'address-line3',
+            'address-level4',
+            'address-level3',
+            'address-level2',
+            'address-level1',
+            'country',
+            'country-name',
+            'postal-code',
+            'cc-name',
+            'cc-given-name',
+            'cc-additional-name',
+            'cc-family-name',
+            'cc-number',
+            'cc-exp',
+            'cc-exp-month',
+            'cc-exp-year',
+            'cc-csc',
+            'cc-type',
+            'transaction-currency',
+            'transaction-amount',
+            'language',
+            'bday',
+            'bday-day',
+            'bday-month',
+            'bday-year',
+            'sex',
+            'tel',
+            'tel-country-code',
+            'tel-national',
+            'tel-area-code',
+            'tel-local',
+            'tel-extension',
+            'impp',
+            'url',
+            'photo',
+            'webauthn',
+        ];
+        if (! empty($this->autocomplete)) {
+            if (in_array($this->autocomplete, ['on', 'off'])) {
+                $specificAttributes->add(['autocomplete' => $this->autocomplete]);
+
+                return;
+            } else {
+                $valueParts = explode(' ', $this->autocomplete);
+
+                foreach ($valueParts as $key => $valuePart) {
+                    if (str_starts_with($valuePart, 'section-') && $key !== 0) {
+                        throw new InvalidAttributeException('The autocomplete attribute value is invalid. The section token must be the first token.');
+                    } elseif (! in_array($valuePart, $allowedValues) && ! str_starts_with($valuePart, 'section-')) {
+                        throw new InvalidAttributeException('The autocomplete attribute value is invalid.');
+                    }
+                }
+            }
+
+            $specificAttributes->add(['autocomplete' => $this->autocomplete]);
+        }
+    }
+}

src/Components/AttributeTraits/CheckedAttribute.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace T73biz\LwBits\Components\AttributeTraits;
+
+use Livewire\Features\SupportAttributes\AttributeCollection;
+
+trait CheckedAttribute
+{
+    /**
+     * Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates
+     * that the radio button is the currently selected one in the group of same-named radio buttons. If present on a
+     * checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate
+     * whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not
+     * reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)
+     *
+     * Note:
+     * Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data
+     * if they are currently checked. If they are, the name and the value(s) of the checked controls are submitted.
+     *
+     * For example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data
+     * submitted will include fruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The
+     * default value for checkboxes and radio buttons is on.
+     */
+    public bool $checked = false;
+
+    /**
+     * Set the checked attribute.
+     */
+    public function setCheckedAttribute(AttributeCollection $specificAttributes): void
+    {
+        if ($this->checked) {
+            $specificAttributes->add(['checked']);
+        }
+    }
+}

src/Components/AttributeTraits/DimensionalAttributes.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace T73biz\LwBits\Components\AttributeTraits;
+
+use Livewire\Features\SupportAttributes\AttributeCollection;
+
+trait DimensionalAttributes
+{
+    /**
+     * The displayed height of the resource, in CSS pixels. This must be an absolute value; percentages are not allowed.
+     */
+    public int $height = 0;
+
+    /**
+     * The displayed width of the resource, in CSS pixels. This must be an absolute value; percentages are not allowed.
+     */
+    public int $width = 0;
+
+    /**
+     * Set the dimensional attributes
+     */
+    public function setDimensionalAttributes(AttributeCollection &$specificAttributes): void
+    {
+        if ($this->height > 0) {
+            $specificAttributes->add(['height' => $this->height]);
+        }
+        if ($this->width > 0) {
+            $specificAttributes->add(['width' => $this->width]);
+        }
+    }
+}