@kubex/zinc 1.1.134 → 1.1.135

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.134",
+  "version": "1.1.135",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/data-select/data-select.component.ts

@@ -137,6 +137,12 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
 
   @property() conditional = "";
 
+  /**
+   * Ids or names of controls that must have a value before this one becomes
+   * usable, comma separated. Forwarded to the underlying select.
+   */
+  @property() requires = "";
+
   protected readonly formControlController = new FormControlController(this);
 
   private readonly selectObserver = new MutationController(this, {
@@ -316,6 +322,7 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
                  ?disabled="${this.disabled}"
                  ?select-first="${this.selectFirst}"
                  conditional="${this.conditional}"
+                 requires="${this.requires}"
                  @zn-input="${this.handleInput}"
                  @zn-clear="${this.handleClear}"
                  @blur=${this.blur}

package/src/components/inline-edit/inline-edit.component.ts

@@ -74,6 +74,12 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   @property() conditional = '';
 
+  /**
+   * Ids or names of controls that must have a value before this one becomes
+   * usable, comma separated.
+   */
+  @property() requires = '';
+
   @property({ type: Boolean }) disabled: boolean
 
   @property({ type: Boolean }) inline: boolean

package/src/components/select/select.component.ts

@@ -356,6 +356,13 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
   @property() conditional = "";
 
+  /**
+   * Ids or names of controls that must have a value before this one becomes
+   * usable, comma separated. The control stays disabled until every one of them
+   * is filled, and is disabled again if any is cleared.
+   */
+  @property() requires = "";
+
   /**
    * The URL to fetch options from. When set, the component fetches JSON from this URL and renders the results as
    * options. The expected format is an array of objects with `key` and `value` properties:
@@ -691,8 +698,15 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     const isExpandIcon = path.some(el => el instanceof Element && el.classList.contains('select__expand-icon'));
     // if click is inside the prefix area (e.g. checkbox), don't toggle the select
     const inPrefix = path.some(el => el instanceof Element && el.classList.contains('select__prefix'));
-    // Ignore disabled controls, fetch loading/error, and clicks on tags (remove buttons)
-    if (((this.disabled || this._fetchLoading || this._fetchError || isIcon) && !isExpandIcon) || inPrefix) {
+    // A control that cannot be used never toggles, whatever was clicked — the
+    // expand icon included, or a disabled select still opens from its chevron.
+    if (this.disabled || this._fetchLoading || this._fetchError) {
+      return;
+    }
+    // Icon clicks (e.g. a tag's remove button) don't toggle, but the expand
+    // icon is what opens the control; the prefix area (e.g. a checkbox) never
+    // toggles.
+    if ((isIcon && !isExpandIcon) || inPrefix) {
       return;
     }
 

package/src/components/select/select.test.ts

@@ -865,3 +865,106 @@ describe('<zn-select>', () => {
     expect(popoverOf(second).matches(':popover-open')).to.be.true;
   });
 });
+
+describe('<zn-select> disabled', () => {
+  it('should not open when the expand icon is clicked', async () => {
+    const el: any = await fixture(html`
+      <zn-select disabled>
+        <zn-option value="a">A</zn-option>
+      </zn-select>`);
+    await el.updateComplete;
+
+    el.shadowRoot.querySelector('.select__expand-icon')
+      .dispatchEvent(new MouseEvent('mousedown', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(el.open).to.be.false;
+  });
+
+  it('should open from the expand icon when enabled', async () => {
+    const el: any = await fixture(html`
+      <zn-select>
+        <zn-option value="a">A</zn-option>
+      </zn-select>`);
+    await el.updateComplete;
+
+    el.shadowRoot.querySelector('.select__expand-icon')
+      .dispatchEvent(new MouseEvent('mousedown', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(el.open).to.be.true;
+  });
+});
+
+describe('<zn-select> requires', () => {
+  const pair = () => fixture(html`
+    <div>
+      <zn-select id="parent" name="parent">
+        <zn-option value="p1">P1</zn-option>
+      </zn-select>
+      <zn-select id="child" name="child" requires="parent" disabled>
+        <zn-option value="c1">C1</zn-option>
+      </zn-select>
+    </div>`);
+
+  it('should stay disabled while the required control is empty', async () => {
+    const root: any = await pair();
+    const child = root.querySelector('#child');
+    await child.updateComplete;
+
+    expect(child.disabled).to.be.true;
+  });
+
+  it('should enable once the required control has a value', async () => {
+    const root: any = await pair();
+    const parent = root.querySelector('#parent');
+    const child = root.querySelector('#child');
+    await child.updateComplete;
+
+    parent.value = 'p1';
+    parent.dispatchEvent(new CustomEvent('zn-change', {bubbles: true, composed: true}));
+    await child.updateComplete;
+
+    expect(child.disabled).to.be.false;
+  });
+
+  it('should disable again when the required control is cleared', async () => {
+    const root: any = await pair();
+    const parent = root.querySelector('#parent');
+    const child = root.querySelector('#child');
+    await child.updateComplete;
+
+    parent.value = 'p1';
+    parent.dispatchEvent(new CustomEvent('zn-change', {bubbles: true, composed: true}));
+    await child.updateComplete;
+
+    parent.value = '';
+    parent.dispatchEvent(new CustomEvent('zn-change', {bubbles: true, composed: true}));
+    await child.updateComplete;
+
+    expect(child.disabled).to.be.true;
+  });
+
+  it('should require every named control', async () => {
+    const root: any = await fixture(html`
+      <div>
+        <zn-select id="a" name="a"><zn-option value="1">1</zn-option></zn-select>
+        <zn-select id="b" name="b"><zn-option value="2">2</zn-option></zn-select>
+        <zn-select id="c" name="c" requires="a,b" disabled></zn-select>
+      </div>`);
+    const a = root.querySelector('#a');
+    const b = root.querySelector('#b');
+    const c = root.querySelector('#c');
+    await c.updateComplete;
+
+    a.value = '1';
+    a.dispatchEvent(new CustomEvent('zn-change', {bubbles: true, composed: true}));
+    await c.updateComplete;
+    expect(c.disabled, 'one of two filled').to.be.true;
+
+    b.value = '2';
+    b.dispatchEvent(new CustomEvent('zn-change', {bubbles: true, composed: true}));
+    await c.updateComplete;
+    expect(c.disabled, 'both filled').to.be.false;
+  });
+});

package/src/internal/conditional.ts

@@ -3,13 +3,26 @@ import type {ReactiveController, ReactiveControllerHost} from 'lit';
 
 export interface ConditionalHost {
   conditional: string;
+  requires: string;
   disabled: boolean;
 }
 
-/** A reactive controller that disables the host when linked selects have a value. */
+type ValuedElement = Element & { value: string | string[] };
+
+function hasValue(el: ValuedElement): boolean {
+  const values = Array.isArray(el.value) ? el.value : [el.value];
+  return values.some(v => v !== '' && v !== '0');
+}
+
+/**
+ * A reactive controller that drives the host's disabled state from other form
+ * controls: `conditional` disables the host once a linked control has a value,
+ * `requires` keeps it disabled until every named control has one.
+ */
 export class ConditionalController implements ReactiveController {
   host: ReactiveControllerHost & Element & ConditionalHost;
-  private conditionals: (Element & { value: string | string[] })[] = [];
+  private conditionals: ValuedElement[] = [];
+  private required: ValuedElement[] = [];
   private initiallyDisabled = false;
   private readonly handleChange = () => this.checkConditionals();
 
@@ -19,43 +32,48 @@ export class ConditionalController implements ReactiveController {
 
   /** Call from the host's `firstUpdated()` to parse IDs, find elements, attach listeners, and run the initial check. */
   setup() {
-    if (this.host.conditional === '') {
+    this.conditionals = this.resolve(this.host.conditional);
+    this.required = this.resolve(this.host.requires);
+
+    this.initiallyDisabled = this.host.disabled;
+
+    const watched = [...this.conditionals, ...this.required];
+    if (watched.length === 0) {
       return;
     }
 
-    const ids = this.host.conditional.split(',').map(id => id.trim());
+    watched.forEach(el => {
+      el.addEventListener('zn-change', this.handleChange);
+      el.addEventListener('zn-input', this.handleChange);
+    });
+
+    // trigger the check once to initialize
+    this.checkConditionals();
+  }
+
+  /** Resolve a comma-separated list of ids or names to the controls they name. */
+  private resolve(list: string): ValuedElement[] {
+    if (!list) {
+      return [];
+    }
 
-    ids.forEach(id => {
-      const byId = deepQuerySelectorAll(idSelector(id), document.documentElement, '') as (Element & {
-        value: string | string[];
-      })[];
-      const byName = deepQuerySelectorAll(`[name="${id}"]`, document.documentElement, '') as (Element & {
-        value: string | string[];
-      })[];
+    const found: ValuedElement[] = [];
+    const seen = new Set<Element>();
+
+    list.split(',').map(id => id.trim()).filter(Boolean).forEach(id => {
+      const byId = deepQuerySelectorAll(idSelector(id), document.documentElement, '') as ValuedElement[];
+      const byName = deepQuerySelectorAll(`[name="${id}"]`, document.documentElement, '') as ValuedElement[];
 
       // de-duplicate in case the same element matches both id and name
-      const seen = new Set<Element>();
       [...byId, ...byName].forEach(el => {
         if (!seen.has(el)) {
           seen.add(el);
-          this.conditionals.push(el);
+          found.push(el);
         }
       });
     });
 
-    this.initiallyDisabled = this.host.disabled;
-
-    if (ids.length === 0) {
-      return;
-    }
-
-    this.conditionals.forEach(select => {
-      select.addEventListener('zn-change', this.handleChange);
-      select.addEventListener('zn-input', this.handleChange);
-    });
-
-    // trigger the check once to initialize
-    this.checkConditionals();
+    return found;
   }
 
   hostConnected() {
@@ -63,12 +81,13 @@ export class ConditionalController implements ReactiveController {
   }
 
   hostDisconnected() {
-    this.conditionals.forEach(select => {
-      select.removeEventListener('zn-change', this.handleChange);
-      // select.removeEventListener('zn-input', this.handleChange);
+    [...this.conditionals, ...this.required].forEach(el => {
+      el.removeEventListener('zn-change', this.handleChange);
+      el.removeEventListener('zn-input', this.handleChange);
     });
 
     this.conditionals = [];
+    this.required = [];
   }
 
   /** Re-evaluate the conditional state. Call from the host when needed. */
@@ -77,12 +96,11 @@ export class ConditionalController implements ReactiveController {
   }
 
   private checkConditionals() {
-    const shouldDisable = this.conditionals.some(select => {
-      let linkedValues = Array.isArray(select.value) ? select.value : [select.value];
-      linkedValues = linkedValues.filter(v => (v !== '' && v !== "0"));
-      return linkedValues.length > 0;
-    });
+    const blocked = this.conditionals.some(hasValue);
+    const unmet = this.required.length > 0 && !this.required.every(hasValue);
+
+    const latched = this.required.length > 0 ? false : this.initiallyDisabled;
 
-    this.host.disabled = this.initiallyDisabled || shouldDisable;
+    this.host.disabled = latched || blocked || unmet;
   }
 }