diff --git a/src/Components/GlobalAttributesTrait.php b/src/Components/GlobalAttributesTrait.php index 6123a94d..ea8ac99e 100755 --- a/src/Components/GlobalAttributesTrait.php +++ b/src/Components/GlobalAttributesTrait.php @@ -3,6 +3,7 @@ namespace T73biz\LwBits\Components; use Livewire\Features\SupportAttributes\AttributeCollection; +use T73biz\LwBits\Exceptions\InvalidAttributeException; /** * Class GlobalElement @@ -10,68 +11,49 @@ * Global attributes are attributes common to all HTML elements. * * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes - * - * @property string $accessKey - * @property bool $autoCapitalize - * @property bool $autoFocus - * @property bool $contentEditable - * @property array $cssClasses - * @property array $data - * @property string $direction - * @property bool $draggable - * @property string $enterKeyHint - * @property bool $hidden - * @property string $id - * @property string $language - * @property string $nonce - * @property array $parts - * @property string $role - * @property mixed $slot - * @property string $slotAttribute - * @property bool $spellCheck - * @property array $styles - * @property int $tabIndex - * @property string $title - * @property bool $translate - * @property string $virtualKeyboardPolicy */ trait GlobalAttributesTrait { /** - * Specifies a shortcut key to activate/focus an element. - * AKA: accesskey attribute + * Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a + * space-separated list of characters. The browser should use the first one that exists on the computer keyboard. */ - public string $accessKey = ''; - - protected AttributeCollection $attributes; + public string $accesskey = ''; /** - * Specifies whether the element should automatically get focus when the page loads. - * AKA: autocapitalize attribute + * Controls whether inputted text is automatically capitalized and, if so, in what manner. */ - public bool $autoCapitalize = false; + public bool $autocapitalize = false; /** - * Specifies whether the element should automatically get focus when the page loads. - * AKA: autofocus attribute + * Indicates that an element is to be focused on page load, or as soon as the it is part of is displayed. + * This attribute is a boolean, initially false. */ - public bool $autoFocus = false; + public bool $autofocus = false; /** - * Specifies whether the content of an element is editable or not. - * AKA: contenteditable attribute + * An enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its + * widget to allow editing. The attribute must take one of the following values: + * + * - true: (or the empty string), Indicates that the element must be editable; + * - false: Indicates that the element must not be editable. + * - plaintext-only: Indicates the element's raw text is editable, but rich text formatting is disabled. */ - public bool $contentEditable = false; + public bool $contenteditable = false; /** - * Specifies one or more classnames for an element (refers to a class in a style sheet). - * AKA: class attribute + * A space-separated list of the classes of the element. Classes allow CSS and JavaScript to select and access + * specific elements via the class selectors or functions like the method Document.getElementsByClassName(). */ public array $cssClasses = []; /** - * Allows the storage of custom data private to the page or application. - * AKA: data-* attributes + * Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged + * between the HTML and its DOM representation that may be used by scripts. All such custom data are available via + * the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access + * to them. + * + * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset * * Requires a key-value pair array where the key is the attribute name and the value is the attribute value. * Example: @@ -88,22 +70,30 @@ trait GlobalAttributesTrait public array $data = []; /** - * Specifies the text direction for the content in an element. + * An enumerated attribute indicating the directionality of the element's text. It can have the following values: + * + * - ltr: which means left to right and is to be used for languages that are written from the left to the right + * - rtl: which means right to left and is to be used for languages that are written from the right to the left + * - auto: which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the + * element until it finds a character with a strong directionality, then it applies that directionality to + * the whole element. * AKA: dir attribute */ public string $direction = ''; /** - * Specifies whether an element is draggable or not. - * AKA: draggable attribute + * An enumerated attribute indicating whether the element can be dragged, using the Drag and Drop API. + * It can have the following values: + * + * - true: Which indicates that the element may be dragged + * - false: Which indicates that the element may not be dragged. */ - public bool $draggable = false; + public string $draggable = ''; /** - * Specifies what action label (or icon) to present for the enter key on virtual keyboards. - * AKA: enterkeyhint attribute + * Hints what action label (or icon) to present for the enter key on virtual keyboards. */ - public string $enterKeyHint = ''; + public string $enterkeyhint = ''; /** * An enumerated attribute indicating that the element is not yet, or is no longer, relevant. For example, @@ -111,95 +101,112 @@ trait GlobalAttributesTrait * The browser won't render such elements. * * This attribute must not be used to hide content that could legitimately be shown. - * - * AKA: hidden attribute */ public bool $hidden = false; /** - * Specifies a unique id for an element. - * AKA: id attribute + * Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the + * element when linking (using a fragment identifier), scripting, or styling (with CSS). */ public string $id = ''; /** - * Specifies the language of the element's content. - * AKA: lang attribute + * Helps define the language of an element: the language that non-editable elements are in, or the language that + * editable elements should be written in by the user. The attribute contains one "language tag" (made of + * hyphen-separated "language subtags") in the format defined in RFC 5646: Tags for Identifying Languages (also + * known as BCP 47). xml:lang has priority over it. + * + * @see https://datatracker.ietf.org/doc/html/rfc5646 */ public string $language = ''; /** * A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether * a given fetch will be allowed to proceed. - * AKA: nonce attribute */ public string $nonce = ''; /** * A space-separated list of the part names of the element. * Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. - * AKA: part attribute */ public array $parts = []; /** - * Used to designate an element as a popover element + * Used to designate an element as a popover element (see Popover API). Popover elements are hidden via display: + * none until opened via an invoking/control element (i.e. a