@studiocms/ui 0.3.2 → 0.4.0

package/dist/components/SearchSelect/searchselect.js

@@ -0,0 +1,166 @@
+const allSearchSelects = document.querySelectorAll(".sui-search-select-label");
+for (const container of allSearchSelects) {
+  let hideOnClickOutside = function(element) {
+    const outsideClickListener = (event) => {
+      if (!element.contains(event.target) && isVisible(element) && active === true) {
+        dropdown.classList.remove("active", "above");
+        active = false;
+      }
+    };
+    document.addEventListener("click", outsideClickListener);
+  }, constructOptionsBasedOnOptions = function(options2) {
+    dropdown.innerHTML = "";
+    if (options2.length === 0) {
+      const element = document.createElement("li");
+      element.classList.add("empty-search-results");
+      element.textContent = "No results found.";
+      dropdown.appendChild(element);
+    }
+    let i = 0;
+    for (const option of options2) {
+      const element = document.createElement("li");
+      element.classList.add(
+        ...[
+          "sui-search-select-option",
+          option.disabled && "disabled",
+          focusIndex === i && "focused"
+        ].filter((x) => typeof x === "string")
+      );
+      element.role = "option";
+      element.value = Number.parseInt(option.value);
+      element.id = "";
+      element.dataset.optionIndex = i.toString();
+      element.dataset.value = option.value;
+      element.textContent = option.label;
+      element.addEventListener("click", (e) => handleSelection(e, element));
+      dropdown.appendChild(element);
+      i++;
+    }
+    optionElements = container.querySelectorAll("li");
+  };
+  var hideOnClickOutside2 = hideOnClickOutside, constructOptionsBasedOnOptions2 = constructOptionsBasedOnOptions;
+  const hiddenSelect = container.querySelector("select");
+  const searchWrapper = container.querySelector(".sui-search-input-wrapper");
+  const searchInput = searchWrapper.querySelector("input");
+  const dropdown = container.querySelector(".sui-search-select-dropdown");
+  let optionElements = container.querySelectorAll("li");
+  let active = false;
+  const options = JSON.parse(container.dataset.options);
+  const id = container.dataset.id;
+  let filteredOptions = options;
+  searchWrapper.addEventListener("click", () => {
+    const { bottom, left, right, width, x, y, height } = searchWrapper.getBoundingClientRect();
+    const optionHeight = 36;
+    const totalBorderSize = 2;
+    const margin = 4;
+    const dropdownHeight = options.length * optionHeight + totalBorderSize + margin;
+    const CustomRect = {
+      top: bottom + margin,
+      left,
+      right,
+      bottom: bottom + margin + dropdownHeight,
+      width,
+      height: dropdownHeight,
+      x,
+      y: y + height + margin
+    };
+    if (active) {
+      searchInput.ariaExpanded = "false";
+      dropdown.classList.remove("active", "above");
+      active = false;
+      return;
+    }
+    active = true;
+    searchInput.ariaExpanded = "true";
+    if (CustomRect.top >= 0 && CustomRect.left >= 0 && CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)) {
+      dropdown.classList.add("active");
+    } else {
+      dropdown.classList.add("active", "above");
+    }
+  });
+  const handleSelection = (e, option) => {
+    e.stopImmediatePropagation();
+    if (option.id === `${id}-selected` || !id) return;
+    const currentlySelected = document.getElementById(`${id}-selected`);
+    if (currentlySelected) {
+      currentlySelected.classList.remove("selected");
+      currentlySelected.id = "";
+    }
+    option.id = `${id}-selected`;
+    option.classList.add("selected");
+    const index = options.findIndex((x) => x.value === option.dataset.value);
+    focusIndex = index;
+    const opt = options[index];
+    hiddenSelect.value = opt.value;
+    searchInput.placeholder = opt.label;
+    dropdown.classList.remove("active", "above");
+    searchInput.value = "";
+    filteredOptions = options;
+    constructOptionsBasedOnOptions(options);
+    active = false;
+  };
+  for (const option of optionElements) {
+    option.addEventListener("click", (e) => handleSelection(e, option));
+  }
+  window.addEventListener("scroll", () => {
+    dropdown.classList.remove("active", "above");
+    active = false;
+  });
+  hideOnClickOutside(container);
+  const isVisible = (elem) => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+  let focusIndex = 0;
+  const recomputeOptions = () => {
+    for (const entry of optionElements) {
+      if (Number.parseInt(entry.dataset.optionIndex) === focusIndex) {
+        entry.classList.add("focused");
+      } else {
+        entry.classList.remove("focused");
+      }
+    }
+  };
+  searchInput.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      active = false;
+      dropdown.classList.remove("active", "above");
+      searchInput.blur();
+      return;
+    }
+    if (e.key === "ArrowUp" && focusIndex > 0) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      focusIndex--;
+      recomputeOptions();
+      return;
+    }
+    if (e.key === "ArrowDown" && focusIndex + 1 < filteredOptions.filter((x) => !x.disabled).length) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      focusIndex++;
+      recomputeOptions();
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      for (const entry of optionElements) {
+        if (Number.parseInt(entry.dataset.optionIndex) === focusIndex) {
+          entry.click();
+        }
+      }
+      return;
+    }
+  });
+  searchInput.addEventListener("keyup", (e) => {
+    if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
+    if (searchInput.value.trim().length === 0) {
+      constructOptionsBasedOnOptions(options);
+      filteredOptions = options;
+      return;
+    }
+    filteredOptions = options.filter((x) => x.label.includes(searchInput.value));
+    focusIndex = 0;
+    constructOptionsBasedOnOptions(filteredOptions);
+  });
+}

package/dist/components/Select/Select.astro

@@ -0,0 +1,147 @@
+---
+import { generateID } from '../../utils/generateID.js';
+import Icon from '../Icon/Icon.astro';
+import './select.css';
+
+/**
+ * The props for the select component.
+ */
+interface Option {
+	/**
+	 * The label of the option.
+	 */
+	label: string;
+	/**
+	 * The value of the option.
+	 */
+	value: string;
+	/**
+	 * Whether the option is disabled. Defaults to `false`.
+	 */
+	disabled?: boolean;
+}
+
+/**
+ * The props for the select component.
+ */
+interface Props {
+	/**
+	 * The label of the select.
+	 */
+	label?: string;
+	/**
+	 * The default value of the select.
+	 */
+	defaultValue?: string;
+	/**
+	 * Additional classes to apply to the select.
+	 */
+	class?: string;
+	/**
+	 * The name of the select. Required because of the helper.
+	 */
+	name?: string;
+	/**
+	 * Whether the select is required. Defaults to `false`.
+	 */
+	isRequired?: boolean;
+	/**
+	 * The options to display in the select.
+	 */
+	options: Option[];
+	/**
+	 * Whether the select is disabled. Defaults to `false`.
+	 */
+	disabled?: boolean;
+	/**
+	 * Whether the select is full width. Defaults to `false`.
+	 */
+	fullWidth?: boolean;
+	/**
+	 * The placeholder of the select. Defaults to `Select`.
+	 */
+	placeholder?: string;
+}
+
+const {
+	label,
+	defaultValue,
+	class: className,
+	name = generateID('select'),
+	isRequired,
+	options = [],
+	disabled,
+	fullWidth,
+	placeholder = 'Select',
+} = Astro.props;
+---
+
+<div
+    id={`${name}-container`}
+    class="sui-select-label"
+    class:list={[disabled && "disabled", className, fullWidth && "full"]}
+    data-options={JSON.stringify(options)}
+    data-id={name}
+>
+    {label && (
+        <label class="label" for={`${name}-select-btn`}>
+            {label}
+            <span class="req-star">{isRequired && "*"}</span>
+        </label>
+    )}
+    <button
+        class="sui-select-button"
+        role="combobox"
+        aria-controls={`${name}-dropdown`}
+        aria-expanded="false"
+        id={`${name}-select-btn`}
+        type="button"
+        aria-label={placeholder}
+        title={placeholder}
+    >
+        <span class="sui-select-value-span" id={`${name}-value-span`}>
+            {
+                defaultValue
+                    ? options.find((x) => x.value === defaultValue)?.label
+                    : placeholder
+            }
+        </span>
+        <Icon name="chevron-up-down" width={24} height={24} />
+    </button>
+    <ul class="sui-select-dropdown" role="listbox" id={`${name}-dropdown`}>
+        {
+            options.map((x, i) => (
+                <li
+                    class="sui-select-option"
+                    role="option"
+                    value={x.value}
+                    class:list={[
+                        defaultValue === x.value && `selected`,
+                        x.disabled && "disabled",
+                    ]}
+                    id={defaultValue === x.value ? `${name}-selected` : ""}
+                    data-option-index={i}
+                >
+                    {x.label}
+                </li>
+            ))
+        }
+    </ul>
+    <select class="sui-hidden-select" id={name} name={name} required={isRequired} hidden tabindex="-1">
+        <option value={""}> Select </option>
+        {
+            options.map((x) => (
+                <option
+                    value={x.value}
+                    selected={defaultValue === x.value}
+                    disabled={x.disabled}
+                >
+                    {x.label}
+                </option>
+            ))
+        }
+    </select>
+</div>
+<script>
+import "studiocms:ui/scripts/select"
+</script>

package/dist/components/Select/select.css

@@ -0,0 +1,110 @@
+.sui-select-label {
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 200px;
+  position: relative;
+  height: fit-content;
+}
+.sui-select-label.full,
+.sui-select-label.full .sui-select-button {
+  width: 100%;
+}
+.sui-select-label.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  color: hsl(var(--text-muted));
+}
+.label {
+  font-size: 14px;
+}
+.req-star {
+  color: hsl(var(--danger-base));
+  font-weight: 700;
+}
+.sui-select-button {
+  padding: 0.5rem 0.75rem 0.5rem 1rem;
+  border-radius: var(--radius-md);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background-step-2));
+  color: hsl(var(--text-normal));
+  transition: background border 0.15s ease;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  gap: 1rem;
+}
+.sui-select-button:focus {
+  border: 1px solid hsl(var(--primary-base));
+}
+.sui-select-button:hover,
+.sui-select-button:focus {
+  background: hsl(var(--background-step-3));
+}
+.sui-select-button.active,
+.sui-select-button:active,
+.sui-select-button:has(+ .sui-select-dropdown.active) {
+  border: 1px solid hsl(var(--primary-base));
+  background: hsl(var(--background-step-2));
+}
+.sui-select-dropdown {
+  position: absolute;
+  width: 100%;
+  border: 1px solid hsl(var(--border));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  border-radius: var(--radius-md);
+  background-color: hsl(var(--background-step-2));
+  overflow: hidden;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  display: none;
+  z-index: 90;
+  box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+}
+.sui-select-dropdown.active {
+  display: flex;
+}
+.sui-select-dropdown.above {
+  top: auto;
+  bottom: calc(100% - 18px + 0.25rem);
+}
+.sui-select-option {
+  padding: 0.5rem;
+  cursor: pointer;
+  font-size: 0.975em;
+  transition: all 0.15s ease;
+}
+.sui-select-option.disabled {
+  pointer-events: none;
+  color: hsl(var(--text-muted));
+}
+.sui-select-option:hover,
+.sui-select-option:focus,
+.sui-select-option.focused {
+  background-color: hsl(var(--background-step-3));
+}
+.sui-select-option:focus {
+  outline: none;
+  border: none;
+}
+.sui-select-option.selected {
+  background-color: hsl(var(--primary-base));
+  color: hsl(var(--text-inverted));
+  cursor: default;
+}
+.sui-hidden-select {
+  height: 0;
+  width: 0;
+  border: none;
+  outline: none;
+  position: absolute;
+  background-color: transparent;
+  pointer-events: none;
+  opacity: 0;
+}

package/dist/components/Select/select.d.ts

@@ -0,0 +1 @@
+declare function loadSelects(): void;

package/dist/components/Select/select.js

@@ -0,0 +1,143 @@
+function loadSelects() {
+  const allSelects = document.querySelectorAll(".sui-select-label");
+  for (const container of allSelects) {
+    let hideOnClickOutside2 = function(element) {
+      const outsideClickListener = (event) => {
+        if (!element.contains(event.target) && isVisible(element) && active === true) {
+          closeDropdown();
+        }
+      };
+      document.addEventListener("click", outsideClickListener);
+    };
+    var hideOnClickOutside = hideOnClickOutside2;
+    const hiddenSelect = container.querySelector("select");
+    const button = container.querySelector("button");
+    const valueSpan = container.querySelector(".sui-select-value-span");
+    const dropdown = container.querySelector(".sui-select-dropdown");
+    const optionElements = container.querySelectorAll(".sui-select-option");
+    const options = JSON.parse(container.dataset.options);
+    const id = container.dataset.id;
+    let active = false;
+    const closeDropdown = () => {
+      dropdown.classList.remove("active", "above");
+      active = false;
+      button.ariaExpanded = "false";
+      focusIndex = -1;
+      for (const entry of optionElements) {
+        entry.classList.remove("focused");
+      }
+    };
+    const openDropdown = (toggle) => {
+      const { bottom, left, right, width, x, y, height } = button.getBoundingClientRect();
+      const optionHeight = 36;
+      const totalBorderSize = 2;
+      const margin = 4;
+      const dropdownHeight = options.length * optionHeight + totalBorderSize + margin;
+      const CustomRect = {
+        top: bottom + margin,
+        left,
+        right,
+        bottom: bottom + margin + dropdownHeight,
+        width,
+        height: dropdownHeight,
+        x,
+        y: y + height + margin
+      };
+      if (active && toggle) {
+        closeDropdown();
+        return;
+      }
+      active = true;
+      button.ariaExpanded = "true";
+      focusIndex = Array.from(optionElements).findIndex((x2) => x2.classList.contains("selected"));
+      if (CustomRect.top >= 0 && CustomRect.left >= 0 && CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)) {
+        dropdown.classList.add("active");
+      } else {
+        dropdown.classList.add("active", "above");
+      }
+    };
+    button.addEventListener("click", () => openDropdown(true));
+    let focusIndex = -1;
+    const recomputeOptions = () => {
+      for (const entry of optionElements) {
+        if (Number.parseInt(entry.dataset.optionIndex) === focusIndex) {
+          entry.classList.add("focused");
+        } else {
+          entry.classList.remove("focused");
+        }
+      }
+    };
+    button.addEventListener("keydown", (e) => {
+      if (e.key === "Tab" || e.key === "Escape") {
+        closeDropdown();
+        return;
+      }
+      if (e.key === " " && !active) openDropdown(false);
+      if (e.key === "Enter") {
+        const currentlyFocused = container.querySelector(".focused");
+        if (currentlyFocused) {
+          currentlyFocused.classList.remove("focused");
+          currentlyFocused.click();
+          e.preventDefault();
+          e.stopImmediatePropagation();
+        }
+        return;
+      }
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      const neighbor = (offset) => {
+        return optionElements.item(
+          (Array.from(optionElements).findIndex((x) => x.classList.contains("selected")) ?? -1) + offset
+        );
+      };
+      if (e.key === "ArrowUp" && (focusIndex > 0 || !active)) {
+        if (!active) return neighbor(-1)?.click();
+        focusIndex--;
+        recomputeOptions();
+      }
+      if (e.key === "ArrowDown" && focusIndex + 1 < optionElements.length) {
+        if (!active) return neighbor(1)?.click();
+        focusIndex++;
+        recomputeOptions();
+      }
+      if (e.key === "PageUp") {
+        focusIndex = 0;
+        if (!active) return optionElements.item(focusIndex)?.click();
+        recomputeOptions();
+      }
+      if (e.key === "PageDown") {
+        focusIndex = optionElements.length - 1;
+        if (!active) return optionElements.item(focusIndex)?.click();
+        recomputeOptions();
+      }
+    });
+    const handleSelection = (e, option) => {
+      e.stopImmediatePropagation();
+      if (option.id === `${id}-selected` || !id) return;
+      const currentlySelected = document.getElementById(`${id}-selected`);
+      if (currentlySelected) {
+        currentlySelected.classList.remove("selected");
+        currentlySelected.id = "";
+      }
+      option.id = `${id}-selected`;
+      option.classList.add("selected");
+      const opt = options[Number.parseInt(option.dataset.optionIndex)];
+      hiddenSelect.value = opt.value;
+      valueSpan.textContent = opt.label;
+      closeDropdown();
+    };
+    for (const option of optionElements) {
+      const handleSelectionForOption = (e) => handleSelection(e, option);
+      option.addEventListener("click", handleSelectionForOption);
+    }
+    window.addEventListener("scroll", closeDropdown);
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && dropdown.classList.contains("active")) {
+        closeDropdown();
+      }
+    });
+    hideOnClickOutside2(container);
+    const isVisible = (elem) => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+  }
+}
+document.addEventListener("astro:page-load", loadSelects);

package/dist/components/Sidebar/helpers.d.ts

@@ -0,0 +1,76 @@
+declare class SingleSidebarHelper {
+    private sidebar;
+    private sidebarToggle?;
+    /**
+     * A helper to manage the sidebar with.
+     * @param toggleID The ID of the element that should toggle the sidebar.
+     */
+    constructor(toggleID?: string);
+    /**
+     * A helper function register an element which should toggle the sidebar.
+     * @param elementID The ID of the element that should toggle the sidebar.
+     */
+    toggleSidebarOnClick: (elementID: string) => void;
+    /**
+     * A helper function to hide the sidebar when an element is clicked.
+     * @param elementID The ID of the element that should hide the sidebar.
+     */
+    hideSidebarOnClick: (elementID: string) => void;
+    /**
+     * A helper function to show the sidebar when an element is clicked.
+     * @param elementID The ID of the element that should show the sidebar.
+     */
+    showSidebarOnClick: (elementID: string) => void;
+    /**
+     * A function to hide the sidebar.
+     */
+    hideSidebar: () => void;
+    /**
+     * A function to show the sidebar.
+     */
+    showSidebar: () => void;
+}
+declare class DoubleSidebarHelper {
+    private sidebarsContainer;
+    /**
+     * A helper to manage the double sidebar with.
+     */
+    constructor();
+    /**
+     * A helper function to hide the sidebar when an element is clicked.
+     * @param elementID The ID of the element that should hide the sidebar.
+     */
+    hideSidebarOnClick: (elementID: string) => void;
+    /**
+     * A helper function to show the outer sidebar when an element is clicked.
+     * @param elementID The ID of the element that should show the outer sidebar.
+     */
+    showOuterOnClick: (elementID: string) => void;
+    /**
+     * A helper function to show the inner sidebar when an element is clicked.
+     * @param elementID The ID of the element that should show the inner sidebar.
+     */
+    showInnerOnClick: (elementID: string) => void;
+    /**
+     * A helper function to toggle between the outer and inner sidebar when an element is clicked.
+     * @param elementID The ID of the element that should toggle the sidebar view.
+     */
+    toggleStateOnClick: (elementID: string) => void;
+    /**
+     * A function to show the inner sidebar.
+     */
+    showInnerSidebar: () => void;
+    /**
+     * A function to show the outer sidebar.
+     */
+    showOuterSidebar: () => void;
+    /**
+     * A function to toggle between the outer and inner sidebar.
+     */
+    toggleSidebarState: () => void;
+    /**
+     * A function to hide the sidebar altogether.
+     */
+    hideSidebar: () => void;
+}
+export { SingleSidebarHelper, DoubleSidebarHelper };