Rename value-non-empty to non-empty-value

Travelopia · Oct 11, 2024 · e5827f1 · e5827f1
1 parent d052bb8
commit e5827f1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/toggle-attribute/README.md b/src/toggle-attribute/README.md
@@ -74,8 +74,8 @@ import '@travelopia/web-components/dist/toggle-attribute/style.css';
 <div class="toggle-target-variable" data-toggle-value="First,All">
 	Toggled First
 </div>
-<div class="toggle-target-variable" data-toggle-value-non-empty="yes">
-	<!-- add the data-toggle-value-non-empty="yes" attribute to toggle on with all non empty values. -->
+<div class="toggle-target-variable" data-toggle-non-empty-value="yes">
+	<!-- add the data-toggle-non-empty-value="yes" attribute to toggle on with all non empty values. -->
 	This will be toggled for all non empty values.
 </div>
 <div class="toggle-target-variable" data-toggle-value="Second,All">
@@ -86,7 +86,7 @@ import '@travelopia/web-components/dist/toggle-attribute/style.css';
 <p>Toggle with non empty values</p>
 
 <!-- Select value -->
-<tp-toggle-attribute target=".toggle-target-non-empty" value-non-empty="yes">
+<tp-toggle-attribute target=".toggle-target-non-empty" non-empty-value="yes">
 	<select>
 		<option value="">Select</option>
 		<option value="First">First</option>
@@ -134,7 +134,7 @@ import '@travelopia/web-components/dist/toggle-attribute/style.css';
 | value                  | No       | <comma separated values to match>  | If this is specified, these comma separated values are matched with the value of the trigger. If they match, the target(s) is/are toggled. Same goes for having a `data-toggle-value` attribute on a target.                                                                                                                                                                                   |
 | trigger                | No       | <selector of the trigger>          | If this is not specified, the direct child is treated as the trigger. If it is mentioned, it looks for this selector within the context |
 | closest-ancestor       | No       | <selector of the closest ancestor> | Default: `body`. If this is specified, the target is searched for within this selector, not on `body`.                                  |
-| value-non-empty        | No       | yes                                | A boolean attribute that signifies whether or not the targets should be toggled for all non empty values on the trigger.
+| non-empty-value        | No       | yes                                | A boolean attribute that signifies whether or not the targets should be toggled for all non empty values on the trigger.
 
 ## Events
 

diff --git a/src/toggle-attribute/index.html b/src/toggle-attribute/index.html
@@ -76,8 +76,8 @@
 		<div class="toggle-target-variable" data-toggle-value="First,All">
 			Toggled First
 		</div>
-		<div class="toggle-target-variable" data-toggle-value-non-empty="yes">
-			<!-- add the data-toggle-value-non-empty="yes" attribute to toggle on with all non empty values. -->
+		<div class="toggle-target-variable" data-toggle-non-empty-value="yes">
+			<!-- add the data-toggle-non-empty-value="yes" attribute to toggle on with all non empty values. -->
 			This will be toggled for all non empty values.
 		</div>
 		<div class="toggle-target-variable" data-toggle-value="Second,All">
@@ -88,7 +88,7 @@
 		<p>Toggle with non empty values</p>
 
 		<!-- Select value -->
-		<tp-toggle-attribute target=".toggle-target-non-empty" value-non-empty="yes">
+		<tp-toggle-attribute target=".toggle-target-non-empty" non-empty-value="yes">
 			<select>
 				<option value="">Select</option>
 				<option value="First">First</option>

diff --git a/src/toggle-attribute/tp-toggle-attribute.ts b/src/toggle-attribute/tp-toggle-attribute.ts
@@ -61,7 +61,7 @@ export class TPToggleAttributeElement extends HTMLElement {
 		// Check if trigger has a value, example: form inputs.
 		if ( value || '' === value ) {
 			// Check if we have a value.
-			if ( this.hasAttribute( 'value' ) || this.hasAttribute( 'value-non-empty' ) ) {
+			if ( this.hasAttribute( 'value' ) || this.hasAttribute( 'non-empty-value' ) ) {
 				this.toggleByValueAttribute( value );
 			} else {
 				this.toggleByTargetDataValue( value );
@@ -92,7 +92,7 @@ export class TPToggleAttributeElement extends HTMLElement {
 
 		// Get value to listen for.
 		const valuesAttribute = this.getAttribute( 'value' );
-		const nonEmptyValuesAttribute = this.hasAttribute( 'value-non-empty' );
+		const nonEmptyValuesAttribute = this.hasAttribute( 'non-empty-value' );
 
 		// Can we proceed?
 		if ( ! valuesAttribute && ! nonEmptyValuesAttribute ) {
@@ -136,7 +136,7 @@ export class TPToggleAttributeElement extends HTMLElement {
 		targetElements.forEach( ( target: HTMLElement ): void => {
 			// Get values and split them. Set an empty array otherwise.
 			const valuesAttribute = target.getAttribute( 'data-toggle-value' );
-			const nonEmptyValuesAttribute = target.hasAttribute( 'data-toggle-value-non-empty' );
+			const nonEmptyValuesAttribute = target.hasAttribute( 'data-toggle-non-empty-value' );
 
 			// Can we proceed?
 			if ( ! valuesAttribute && ! nonEmptyValuesAttribute ) {