@studiocms/ui 0.3.2 → 0.4.0

package/src/components/Select.astro

@@ -1,467 +0,0 @@
----
-import Icon from '../utils/Icon.astro';
-import { generateID } from '../utils/generateID';
-
-/**
- * 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>
-    const allSelects = document.querySelectorAll<HTMLDivElement>(".sui-select-label");
-    // id, options
-
-    for (const container of allSelects) {
-        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<HTMLLIElement>('.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: boolean) => {
-            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';
-
-            // Set focusIndex to currently selected option
-            focusIndex = Array.from(optionElements).findIndex((x) =>
-                x.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') {
-                let currentlyFocused = container.querySelector<HTMLElement>('.focused');
-                if (currentlyFocused) {
-                    currentlyFocused.classList.remove('focused');
-                    currentlyFocused.click();
-
-                    // Stop dropdown from immediately reopening
-                    e.preventDefault();
-                    e.stopImmediatePropagation();
-                }
-
-                return;
-            }
-
-            e.preventDefault();
-            e.stopImmediatePropagation();
-
-            const neighbor = (offset: number) => {
-                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: MouseEvent, option: HTMLElement) => {
-            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[parseInt(option.dataset.optionIndex!)];
-            hiddenSelect.value = opt.value;
-            valueSpan.textContent = opt.label;
-            closeDropdown();
-        }
-
-        optionElements.forEach((option) => {
-            const handleSelectionForOption = (e: MouseEvent) => handleSelection(e, option)
-
-            option.addEventListener("click", handleSelectionForOption);
-        });
-
-        window.addEventListener("scroll", closeDropdown);
-
-        document.addEventListener("keydown", (e) => {
-            if (e.key === "Escape" && dropdown.classList.contains("active")) {
-                closeDropdown();
-            }
-        });
-
-        hideOnClickOutside(container);
-
-        function hideOnClickOutside(element: HTMLElement) {
-            const outsideClickListener = (event: MouseEvent) => {
-                if (
-                    !element.contains(event.target as HTMLElement) &&
-                    isVisible(element) &&
-                    active === true
-                ) {
-                    // or use: event.target.closest(selector) === null
-                    closeDropdown();
-                }
-            };
-
-            document.addEventListener("click", outsideClickListener);
-        }
-
-        // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
-        const isVisible = (elem: HTMLElement) =>
-            !!elem &&
-            !!(
-                elem.offsetWidth ||
-                elem.offsetHeight ||
-                elem.getClientRects().length
-            );
-    }
-</script>
-<style>
-    .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: 8px;
-        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: 0.5rem;
-        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;
-    }
-</style>

package/src/components/Sidebar/helpers.ts

@@ -1,179 +0,0 @@
-class SingleSidebarHelper {
-	private sidebar: HTMLElement;
-	private sidebarToggle?: HTMLElement | undefined;
-
-	/**
-	 * A helper to manage the sidebar with.
-	 * @param toggleID The ID of the element that should toggle the sidebar.
-	 */
-	constructor(toggleID?: string) {
-		const sidebarContainer = document.getElementById('sui-sidebar');
-
-		if (!sidebarContainer) {
-			throw new Error(
-				`No item with ID 'sui-sidebar' found. Please add the <Sidebar> component to this page.`
-			);
-		}
-
-		this.sidebar = sidebarContainer;
-
-		if (toggleID) {
-			const navToggle = document.getElementById(toggleID);
-
-			if (!navToggle) {
-				throw new Error(`No item with ID ${toggleID} found.`);
-			}
-
-			this.sidebarToggle = navToggle;
-
-			this.sidebarToggle.addEventListener('click', () => {
-				this.sidebar.classList.toggle('active');
-			});
-		}
-	}
-
-	/**
-	 * A helper function register an element which should toggle the sidebar.
-	 * @param elementID The ID of the element that should toggle the sidebar.
-	 */
-	public toggleSidebarOnClick = (elementID: string) => {
-		const navToggle = document.getElementById(elementID);
-
-		if (!navToggle) {
-			throw new Error(`No item with ID ${elementID} found.`);
-		}
-
-		this.sidebarToggle = navToggle;
-
-		this.sidebarToggle.addEventListener('click', () => {
-			this.sidebar.classList.toggle('active');
-		});
-	};
-
-	/**
-	 * A helper function to hide the sidebar when an element is clicked.
-	 * @param elementID The ID of the element that should hide the sidebar.
-	 */
-	public hideSidebarOnClick = (elementID: string) => {
-		const element = document.getElementById(elementID);
-
-		if (!element) {
-			throw new Error(`No item with ID ${elementID} found.`);
-		}
-
-		element.addEventListener('click', this.hideSidebar);
-	};
-
-	/**
-	 * A helper function to show the sidebar when an element is clicked.
-	 * @param elementID The ID of the element that should show the sidebar.
-	 */
-	public showSidebarOnClick = (elementID: string) => {
-		const element = document.getElementById(elementID);
-
-		if (!element) {
-			throw new Error(`No item with ID ${elementID} found.`);
-		}
-
-		element.addEventListener('click', this.showSidebar);
-	};
-
-	/**
-	 * A function to hide the sidebar.
-	 */
-	public hideSidebar = () => {
-		this.sidebar.classList.remove('active');
-	};
-
-	/**
-	 * A function to show the sidebar.
-	 */
-	public showSidebar = () => {
-		this.sidebar.classList.add('active');
-	};
-}
-
-class DoubleSidebarHelper {
-	private sidebarsContainer: HTMLElement;
-
-	/**
-	 * A helper to manage the double sidebar with.
-	 */
-	constructor() {
-		const sidebarsContainer = document.getElementById('sui-sidebars');
-
-		if (!sidebarsContainer) {
-			throw new Error(
-				`No item with ID 'sidebars' found. Please add the <DoubleSidebar> component to this page.`
-			);
-		}
-
-		this.sidebarsContainer = sidebarsContainer;
-	}
-
-	/**
-	 * A helper function to hide the sidebar when an element is clicked.
-	 * @param elementID The ID of the element that should hide the sidebar.
-	 */
-	public hideSidebarOnClick = (elementID: string) => {
-		const element = document.getElementById(elementID);
-
-		if (!element) {
-			throw new Error(`No item with ID ${elementID} found.`);
-		}
-
-		element.addEventListener('click', this.hideSidebar);
-	};
-
-	/**
-	 * 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.
-	 */
-	public showOuterOnClick = (elementID: string) => {
-		const element = document.getElementById(elementID);
-
-		if (!element) {
-			throw new Error(`No item with ID ${elementID} found.`);
-		}
-
-		element.addEventListener('click', this.showOuterSidebar);
-	};
-
-	/**
-	 * 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.
-	 */
-	public showInnerOnClick = (elementID: string) => {
-		const element = document.getElementById(elementID);
-
-		if (!element) {
-			throw new Error(`No item with ID ${elementID} found.`);
-		}
-
-		element.addEventListener('click', this.showInnerSidebar);
-	};
-
-	/**
-	 * A function to show the inner sidebar.
-	 */
-	public showInnerSidebar = () => {
-		this.sidebarsContainer.classList.add('inner', 'active');
-	};
-
-	/**
-	 * A function to show the outer sidebar.
-	 */
-	public showOuterSidebar = () => {
-		this.sidebarsContainer.classList.add('active');
-		this.sidebarsContainer.classList.remove('inner');
-	};
-
-	/**
-	 * A function to hide the sidebar altogether.
-	 */
-	public hideSidebar = () => {
-		this.sidebarsContainer.classList.remove('inner', 'active');
-	};
-}
-
-export { SingleSidebarHelper, DoubleSidebarHelper };

package/src/components/Sidebar/index.ts

@@ -1,3 +0,0 @@
-export { default as SingleSidebar } from './Single.astro';
-export { default as DoubleSidebar } from './Double.astro';
-export { SingleSidebarHelper, DoubleSidebarHelper } from './helpers';