@kubex/zinc 1.1.29 → 1.1.31

package/docs/pages/components/settings-container.md

@@ -132,6 +132,41 @@ for example by adding item-selector="zn-inline-edit" only the inline edit elemen
 </div>
 ```
 
-### Second Example
+### Pull Tab
 
-TODO
+Add the `pull-tab` attribute to replace the settings dropdown with a pull tab anchored to the top right
+of the container. Clicking the tab slides down a panel containing the settings options. Optional content
+can be placed in the `tab` slot to render alongside the chevron.
+
+```html:preview
+
+<div style="width: 100%; height: 300px; border: 1px solid #ccc;">
+  <zn-settings-container pull-tab store-key="example-pull-tab-filters">
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile private caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <zn-tile original caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+      <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+      <div slot="actions">
+        <zn-button href="#">Action</zn-button>
+      </div>
+    </zn-tile>
+
+    <div slot="filter" attribute="private" default="true">Toggle Private Messages</div>
+    <div slot="filter" attribute="original" default="true">Toggle Original Messages</div>
+
+  </zn-settings-container>
+</div>
+```

package/package.json

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

package/src/components/header/header.scss

@@ -127,7 +127,8 @@
   &__right {
     flex-grow: 1;
     flex-shrink: 1;
-    overflow: hidden;
+    overflow-x: clip;
+    overflow-y: visible;
     min-width: 20px;
   }
 
@@ -225,6 +226,7 @@
   slot[name="actions"] {
     justify-content: end;
     flex-wrap: nowrap;
+    height: var(--zn-icon-size, 20px);
   }
 
   slot[name="actions"]::slotted(zn-button-menu) {

package/src/components/panel/panel.scss

@@ -51,6 +51,7 @@
 
     &::part(base) {
       border-bottom: 0;
+      overflow: visible;
     }
 
     &--inline {

package/src/components/settings-container/settings-container.component.ts

@@ -25,10 +25,13 @@ interface SettingsContainerFilter {
  *
  * @dependency zn-example
  *
- * @event zn-event-name - Emitted as an example.
+ * @event zn-show - Emitted when the pull tab panel opens.
+ * @event zn-hide - Emitted when the pull tab panel closes.
  *
  * @slot - The default slot.
- * @slot example - An example slot.
+ * @slot filter - Filter definitions used to toggle visibility of content.
+ * @slot dropdown-content - Custom content for the settings panel.
+ * @slot tab - Extra content rendered inside the pull tab next to the chevron.
  *
  * @csspart base - The component's base wrapper.
  *
@@ -43,6 +46,10 @@ export default class ZnSettingsContainer extends ZincElement {
 
   @property({attribute: 'store-key'}) storeKey: string;
   @property({attribute: 'no-scroll'}) noScroll: boolean;
+  @property({attribute: 'pull-tab', type: Boolean, reflect: true}) pullTab = false;
+  @property({type: Boolean, reflect: true}) open = false;
+
+  @state() private panelExpanded = false;
 
   private readonly _mutationObserver = new MutationController(this, {
     target: null,
@@ -88,6 +95,40 @@ export default class ZnSettingsContainer extends ZincElement {
     this._mutationObserver.observe(this);
   }
 
+  disconnectedCallback() {
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
+    super.disconnectedCallback();
+  }
+
+  private handleDocumentMouseDown = (e: MouseEvent) => {
+    if (!this.open) return;
+    const pullTab = this.shadowRoot?.querySelector('.pull-tab');
+    if (pullTab && e.composedPath().includes(pullTab)) return;
+    this.hidePullTab();
+  };
+
+  private togglePullTab = () => {
+    if (this.open) {
+      this.hidePullTab();
+    } else {
+      this.open = true;
+      document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
+      this.emit('zn-show');
+    }
+  };
+
+  private hidePullTab() {
+    this.open = false;
+    this.panelExpanded = false;
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
+    this.emit('zn-hide');
+  }
+
+  private handlePanelTransitionEnd = (e: TransitionEvent) => {
+    if (e.propertyName !== 'grid-template-rows') return;
+    this.panelExpanded = this.open;
+  };
+
   // Debounced scheduling to avoid excessive updates on rapid DOM mutations
   private scheduleUpdateFilters() {
     if (this._updateFiltersScheduled) return;
@@ -221,17 +262,41 @@ export default class ZnSettingsContainer extends ZincElement {
         <div class="scroll-content">
           <slot @slotchange="${this.handleContentSlotChange}"></slot>
         </div>
-        <zn-dropdown placement="${placement}" class="${classMap({
-          'setting-container__dropdown': true,
-          [`setting-container__dropdown--${this.position}`]: true,
-        })}">
-          <zn-icon class="setting-container__toggle-button" slot="trigger" size="24" src="settings" round></zn-icon>
-          ${this.getDropdownContent()}
-        </zn-dropdown>
+        ${this.pullTab ? this.renderPullTab() : html`
+          <zn-dropdown placement="${placement}" class="${classMap({
+            'setting-container__dropdown': true,
+            [`setting-container__dropdown--${this.position}`]: true,
+          })}">
+            <zn-icon class="setting-container__toggle-button" slot="trigger" size="24" src="settings" round></zn-icon>
+            ${this.getDropdownContent()}
+          </zn-dropdown>`}
       </div>
     `;
   }
 
+  private renderPullTab() {
+    return html`
+      <div class="${classMap({
+        'pull-tab': true,
+        'pull-tab--open': this.open,
+        'pull-tab--expanded': this.panelExpanded,
+      })}">
+        <div class="pull-tab__panel" @transitionend="${this.handlePanelTransitionEnd}">
+          <div class="pull-tab__panel-content">
+            ${this.getDropdownContent()}
+          </div>
+        </div>
+        <button class="pull-tab__tab"
+                type="button"
+                aria-expanded="${this.open ? 'true' : 'false'}"
+                aria-label="Settings"
+                @click="${this.togglePullTab}">
+          <slot name="tab"></slot>
+          <zn-icon src="${this.open ? 'chevron-up@lu' : 'chevron-down@lu'}" size="20"></zn-icon>
+        </button>
+      </div>`;
+  }
+
   private getDropdownContent() {
     const hasDropdownContent = this.querySelector('[slot="dropdown-content"]');
     if (hasDropdownContent) {

package/src/components/settings-container/settings-container.scss

@@ -84,6 +84,81 @@ zn-button {
   border-radius: var(--zn-border-radius);
 }
 
+.pull-tab {
+  position: absolute;
+  top: 0;
+  right: calc(var(--zn-base-gap) + var(--zn-gutter));
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  max-height: 100%;
+
+  &__panel {
+    display: grid;
+    grid-template-rows: 0fr;
+    min-height: 0;
+    overflow: hidden;
+    background-color: rgb(var(--zn-panel));
+    border: 1px solid rgb(var(--zn-border-color));
+    border-top: none;
+    border-bottom-width: 0;
+    border-radius: 0 0 0 var(--zn-border-radius);
+    transition: grid-template-rows 0.22s ease, border-bottom-width 0s linear 0.22s;
+    will-change: grid-template-rows;
+  }
+
+  &--open &__panel {
+    grid-template-rows: 1fr;
+    border-bottom-width: 1px;
+    transition: grid-template-rows 0.22s ease, border-bottom-width 0s linear 0s;
+  }
+
+  &__panel-content {
+    min-height: 0;
+    overflow: hidden;
+
+    .settings-container__dropdown-content {
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      margin-bottom: 0;
+      max-width: none;
+      width: auto;
+    }
+  }
+
+  &--expanded &__panel-content {
+    overflow-y: auto;
+  }
+
+  &__tab {
+    flex-shrink: 0;
+    background-color: rgb(var(--zn-panel));
+    color: rgb(var(--zn-text-heading));
+    border: 1px solid rgb(var(--zn-border-color));
+    border-top: none;
+    border-radius: 0 0 10px 10px;
+    padding: var(--zn-spacing-x-small);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--zn-spacing-x-small);
+    max-height: 36px;
+    overflow: hidden;
+    margin-top: -1px;
+
+    &:hover {
+      background-color: rgb(var(--zn-shadow));
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgb(var(--zn-primary));
+      outline-offset: -2px;
+    }
+  }
+}
+
 .settings-container__dropdown-content {
   display: flex;
   flex-direction: column;

package/src/components/settings-container/settings-container.test.ts

@@ -7,4 +7,39 @@ describe('<zn-settings-container>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('pull tab', () => {
+    it('should render a pull tab instead of the dropdown', async () => {
+      const el = await fixture<HTMLElement>(html` <zn-settings-container pull-tab></zn-settings-container> `);
+
+      expect(el.shadowRoot!.querySelector('.pull-tab')).to.exist;
+      expect(el.shadowRoot!.querySelector('zn-dropdown')).to.not.exist;
+    });
+
+    it('should open and close when the tab is clicked', async () => {
+      const el = await fixture<HTMLElement>(html` <zn-settings-container pull-tab></zn-settings-container> `);
+      const tab = el.shadowRoot!.querySelector<HTMLButtonElement>('.pull-tab__tab')!;
+
+      tab.click();
+      await (el as any).updateComplete;
+      expect(el.hasAttribute('open')).to.be.true;
+
+      tab.click();
+      await (el as any).updateComplete;
+      expect(el.hasAttribute('open')).to.be.false;
+    });
+
+    it('should close when clicking outside', async () => {
+      const el = await fixture<HTMLElement>(html` <zn-settings-container pull-tab></zn-settings-container> `);
+      const tab = el.shadowRoot!.querySelector<HTMLButtonElement>('.pull-tab__tab')!;
+
+      tab.click();
+      await (el as any).updateComplete;
+      expect(el.hasAttribute('open')).to.be.true;
+
+      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, composed: true }));
+      await (el as any).updateComplete;
+      expect(el.hasAttribute('open')).to.be.false;
+    });
+  });
 });