basic variant

src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant.element.ts

@@ -7,43 +7,88 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 @customElement('umb-basic-variant')
 export class UmbBasicVariantElement extends UmbLitElement {
 	// A take on only firing events when the value is changed from the outside.
-	#silent = false;
+	#silentOnce = true;
 
 	public readonly context: UmbBasicVariantContext;
 
+	/**
+	 * The value of the dataset.
+	 * @returns {Array<UmbPropertyValueData>}
+	 * @memberof UmbBasicVariantElement
+	 * @example
+	 * ```ts
+	 * const dataSet = [
+	 * 	{
+	 * 		alias: 'testAlias',
+	 * 		value: 'value as a string',
+	 * 	},
+	 *  {
+	 * 		alias: 'anotherAlias',
+	 * 		value: 123,
+	 * 	}
+	 * ]
+	 *
+	 * html`
+	 * <umb-basic-variant .value="${dataSet}">
+	 * 	<umb-workspace-property
+	 * 		label="My label for this property"
+	 * 		description="The description to show on the property"
+	 * 		alias="testAlias"
+	 * 		property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"
+	 * 		.config=${...}>
+	 * 	</umb-workspace-property>
+	 * </umb-basic-variant>
+	 * `
+	 * ```
+	 */
 	@property({ attribute: false })
 	public get value(): Array<UmbPropertyValueData> {
 		return this.context.getValues();
 	}
 	public set value(value: Array<UmbPropertyValueData>) {
-		this.#silent = true;
+		this.#silentOnce = true;
 		this.context.setValues(value);
-		this.#silent = false;
 	}
 
+	/**
+	 * The name of the dataset.
+	 * @returns {string}
+	 * @memberof UmbBasicVariantElement
+	 * @example
+	 * ```ts
+	 * html`
+	 * <umb-basic-variant name="My variant name">
+	 * 	...
+	 * </umb-basic-variant>
+	 * `
+	 */
 	@property({ attribute: false })
 	public get name(): string | undefined {
 		return this.context.getName();
 	}
 	public set name(value: string | undefined) {
-		this.#silent = true;
+		this.#silentOnce = true;
 		this.context.setName(value);
-		this.#silent = false;
 	}
 
 	constructor() {
 		super();
 		this.context = new UmbBasicVariantContext(this);
 		this.observe(this.context.name, () => {
-			if (!this.#silent) {
+			if (!this.#silentOnce) {
+				console.log('——— name fire event!');
 				this.dispatchEvent(new UmbChangeEvent());
+			} else {
+				this.#silentOnce = false;
 			}
 		});
+		this.#silentOnce = true;
 		this.observe(this.context.values, () => {
-			console.log('value change');
-			if (!this.#silent) {
-				console.log('value fire event!');
+			if (!this.#silentOnce) {
+				console.log('——— value fire event!');
 				this.dispatchEvent(new UmbChangeEvent());
+			} else {
+				this.#silentOnce = false;
 			}
 		});
 	}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant.test.ts

@@ -29,9 +29,13 @@ export class UmbTestPropertyEditorElement extends UmbElementMixin(LitElement) {
 	}
 	setValue(value: string) {
 		if (this._alias) {
+			console.log('# Fire input event....');
 			this.dispatchEvent(new UmbChangeEvent());
+			console.log('# Set the value....');
 			this.#variantContext?.setPropertyValue(this._alias, value);
+			console.log('# Fire input event....');
 			this.dispatchEvent(new UmbChangeEvent());
+			console.log('done');
 		}
 	}
 
@@ -100,8 +104,14 @@ describe('UmbBasicVariantElement', () => {
 
 		it('variant element fires change event', async () => {
 			console.log('START!');
+
+			variantElement.addEventListener(UmbChangeEvent.TYPE, (event: any) => {
+				console.log('EVENT!', event);
+			});
+
 			const listener = oneEvent(variantElement, UmbChangeEvent.TYPE);
 
+			console.log('property editor:', propertyEditor.alias, propertyEditor.getValue());
 			expect(propertyEditor.alias).to.eq('testAlias');
 			propertyEditor.setValue('testValue3');