Newlogic UI

Appearance

Popover ​

Source ​

Example ​

Vanilla Popover ​

html
<div class="x-popover focus">
    <div role="button" class="x-button" tabindex="0">Toggle Popover</div>
    <div class="x-popover-content center shadow dark:bg-body-secondary mt-2.5 p-2 w-32 flex-col">
        Popover content
    </div>
</div>

Javascript Popover ​

Leverages the Popover API with floating-ui.

html
<div
    class="x-popover"
    data-controller="x-popover"
>
    <button
        class="x-button"
        role="button"
        popovertargetaction="toggle"
        popovertarget="popoverElement"
        id="popoverAction"
    >Toggle Popover</button>
    
    <div class="x-popover-content shadow h-48" id="popoverElement" aria-describedby="popoverAction" popover="manual">
        Popover content
        <button
            type="button"
            data-action="x-popover#hide"
        >x</button>
    </div>
</div>

Autocomplete Popover ​

Preview ​

Source ​

html
<div class="x-popover trigger-focus group mx-auto w-80" data-controller="x-popover">
    <div class="x-control w-full">
        <input
            data-action="input->x-popover#autocomplete"
            data-x-popover-target="autocomplete"
            type="search"
            placeholder="Vyhledávání ..."
            autocomplete="off"
            role="combobox"
            aria-autocomplete="list"
            aria-controls="popoverContent"
            aria-haspopup="listbox"
            aria-expanded="true"
            value="Volba"
        >
    </div>
    <div
        class="x-popover-content center flex flex-col shadow dark:bg-body-secondary mt-2 p-2 gap-2 w-full empty:closed group-not-has-aria-expanded:closed"
        data-x-popover-target="content"
        role="listbox"
        id="popoverContent"
    >
        <button id="option-1" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 1</button>
        <button id="option-2" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 2</button>
        <button id="option-3" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 3</button>
    </div>
</div>

More examples can be found in the Winduum docs.

Example CSS ​

css
@import "winduum/src/components/popover/props/content.css" layer(theme);
@import "winduum/src/components/popover/content.css" layer(utilities);
@import "winduum/src/components/popover/default.css" layer(utilities);

/* Example customization */
@layer utilities {
  .x-popover {
    --x-popover-content-background-color: var(--color-accent);
    --x-popover-content-border-radius: var(--radius-md);
  }
}

Winduum CSS Code ​

winduum/src/components/popover/props/content.css ​

css
:root,
:host {
  --x-popover-content-background-color: var(--color-body-primary);
  --x-popover-content-border-radius: var(--radius-xl);
  --x-popover-content-padding-block: calc(var(--spacing) * 2);
  --x-popover-content-padding-inline: calc(var(--spacing) * 2);
  --x-popover-content-scale-y: 0.75;
  --x-popover-content-scale-x: 0.75;
}

winduum/src/components/popover/content.css ​

css
.x-popover-content {
  background-color: var(--x-popover-content-background-color);
  border-radius: var(--x-popover-content-border-radius);
  padding: var(--x-popover-content-padding-block) var(--x-popover-content-padding-inline);
  z-index: var(--x-popover-content-z-index, var(--z-index-10));
  transition-property: var(--default-transition-property);
  transition-timing-function: var(--ease-in-out);
  transition-duration: var(--default-transition-duration);
  transform:
    translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
    scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
  will-change: transform;
  inline-size: max-content;
  position: absolute;

  &:where(.bottom),
  & {
    transform-origin: top;
  }

  &:where(.bottom-start) {
    transform-origin: top left;
  }

  &:where(.bottom-end) {
    inset-inline-end: 0;
    transform-origin: top right;
  }

  &:where(.right) {
    inset-block-start: 0;
    inset-inline-start: 100%;
    transform-origin: left;
  }

  &:where(.right-start) {
    transform-origin: left top;
  }

  &:where(.right-end) {
    inset-block: auto 0;
    transform-origin: left bottom;
  }

  &:where(.left) {
    inset-block-start: 0;
    inset-inline-end: 100%;
    transform-origin: right;
  }

  &:where(.left-start) {
    transform-origin: right top;
  }

  &:where(.left-end) {
    inset-block: auto 0;
    transform-origin: right bottom;
  }

  &:where(.top) {
    inset-block-end: 100%;
    transform-origin: bottom;
  }

  &:where(.top-start) {
    transform-origin: bottom left;
  }

  &:where(.top-end) {
    inset-inline-end: 0;
    transform-origin: bottom right;
  }

  &:where(.inline-center) {
    --tw-translate-x: -50%;

    inset-inline-start: 50%;
  }

  &:where(.block-center) {
    --tw-translate-y: -50%;

    inset-block-start: 50%;
  }

  &[popover]:not([data-open]) {
    --tw-scale-x: var(--x-popover-content-scale-x);
    --tw-scale-y: var(--x-popover-content-scale-y);

    opacity: 0%;
    pointer-events: none;
  }

  &:not([popover]) {
    .trigger-focus:not(:focus, :focus-within) > &,
    .trigger-hover:not(:hover) > & {
      --tw-scale-x: var(--x-popover-content-scale-x);
      --tw-scale-y: var(--x-popover-content-scale-y);

      opacity: 0%;
      visibility: hidden;
    }
  }
}

winduum/src/components/popover/default.css ​

css
.x-popover {
  position: relative;
  display: inline-block;
}

Stimulus Actions ​

toggle ​

Action is automatically added on first [popovertargetaction] element upon controller connection, if it exists.

html
<button 
    class="x-button" 
    role="button" 
    popovertargetaction="toggle" 
    data-action="click->x-popover#toggle:prevent keydown.esc@window->x-popover#hide click@window->x-popover#dismiss click->invoke-ripple#show" 
    popovertarget="_6zbalmci_" 
    aria-expanded="false" 
    aria-haspopup="dialog"
>
    Toggle Popover
</button>

show ​

Action is automatically added on first [popovertargetaction] element upon controller connection, if it exists.

hide ​

Action is automatically added on first [popovertargetaction] element upon controller connection, if it exists.

html
    <div class="x-popover-content shadow h-48" id="popoverElement" aria-describedby="popoverAction" popover="manual">
        Popover content
        <button
            type="button"
            data-action="x-popover#hide"
        >x</button>
    </div>

dismiss ​

Action is automatically added on first [popovertargetaction] element upon controller connection as click@window->x-popover#dismiss, if it exists.

fetch ​

Fetches the popover remotely, used internally.

onFetchComplete ​

Callback that is executed after fetch is complete.

Stimulus Values ​

url ​

Fetches the popover remotely, popovertarget is added dynamically upon completed request.

html
    <div
        class="x-popover"
        data-controller="x-popover"
        data-x-popover-url-value="/popover/info.json"
    >
        <button
            class="x-button"
            role="button"
            popovertargetaction="toggle"
            id="popoverAction"
        >Fetch Popover</button>
    </div>

appendTo ​

Choose a selector where to append the popover after a fetch. Defaults to position after the trigger element of the popover.

html
    <div
        class="x-popover"
        data-controller="x-popover"
        data-x-popover-url-value="/popover/info.json"
        data-x-popover-append-to-value="body"
        id="popoverAction"
    >
        <button
            class="x-button"
            role="button"
            popovertargetaction="toggle"
        >Fetch Popover</button>
    </div>

manual ​

Disables automatic generation of action values to [popovertargetaction] element upon controller connection.

html
<div
    class="x-popover"
    data-controller="x-popover"
    data-x-popover-manual-value="true"
>
    <button
        class="x-button"
        role="button"
        popovertargetaction="toggle"
        popovertarget="popoverElement"
    >Toggle Popover</button>
</div>

Released under the MIT License.

Copyright © 2024-present newlogic.cz