@studiocms/ui 0.3.2 → 0.4.0

package/src/components/Dropdown/Dropdown.astro

@@ -1,314 +0,0 @@
----
-import Icon from '../../utils/Icon.astro';
-import type { StudioCMSColorway } from '../../utils/colors';
-import type { HeroIconName } from '../../utils/iconType';
-
-/**
- * An option in the dropdown.
- */
-interface Option {
-	/**
-	 * The label of the option.
-	 */
-	label: string;
-	/**
-	 * The value of the option, returned by the helper when listened for.
-	 */
-	value: string;
-	/**
-	 * Whether the option is disabled.
-	 */
-	disabled?: boolean;
-	/**
-	 * The color of the option.
-	 */
-	color?: StudioCMSColorway;
-	/**
-	 * The icon to display next to the option.
-	 */
-	icon?: HeroIconName;
-	/**
-	 * The href to link to when the option is clicked. When given, the option will be rendered as an anchor tag.
-	 */
-	href?: string;
-}
-
-/**
- * The props for the Dropdown component.
- */
-interface Props {
-	/**
-	 * The options to display in the dropdown.
-	 */
-	options: Option[];
-	/**
-	 * Whether the dropdown is disabled.
-	 */
-	disabled?: boolean;
-	/**
-	 * The ID of the dropdown. Required because of the helper.
-	 */
-	id: string;
-	/**
-	 * The alignment of the dropdown, defaults to `center`. Will not work on mobile due to size constraints.
-	 */
-	align?: 'start' | 'center' | 'end';
-	/**
-	 * The type of click with which the dropdown is clicked. Defaults to `left`.
-	 */
-	triggerOn?: 'left' | 'right' | 'both';
-	/**
-	 * The offset of the dropdown from the trigger element in pixels.
-	 */
-	offset?: number;
-}
-
-const {
-	options,
-	disabled = false,
-	align = 'center',
-	id,
-	triggerOn = 'left',
-	offset = 0,
-} = Astro.props;
----
-<div 
-  class="sui-dropdown-container"
-  class:list={[disabled && 'disabled']}
-  data-align={align}
-  id={`${id}-container`}
-  data-trigger={triggerOn}
-  transition:persist
-  transition:persist-props
->
-  <div class="sui-dropdown-toggle" id={`${id}-toggle-btn`}>
-    <slot />
-  </div>
-  <ul 
-    class="sui-dropdown" 
-    class:list={[align]}
-    role="listbox" id={`${id}-dropdown`} 
-    transition:persist
-    transition:persist-props
-    aria-labelledby={`${id}-toggle-btn`}
-  >
-    {options.map(({ value, disabled, color, label, icon, href }) => (
-      <li
-        class="sui-dropdown-option"
-        data-value={value}
-        class:list={[disabled && "disabled", icon && "has-icon", color, href && "has-href"]}
-        role="option"
-        aria-selected="false"
-      >
-        {icon && (
-          <Icon width={24} height={24} name={icon} />
-        )}
-        {href ? (
-          <a href={href} class="sui-dropdown-link">{label}</a>
-        ) : (
-          <span>{label}</span>
-        )}
-      </li>
-    ))}
-  </ul>
-</div>
-<style define:vars={{ offset: `${offset}px` }}>
-  .sui-dropdown-toggle {
-    width: fit-content;
-  }
-
-  .sui-dropdown-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: .25rem;
-  }
-
-  .sui-dropdown {
-    position: absolute;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    flex-direction: column;
-    border-radius: .5rem;
-    background-color: hsl(var(--background-step-2));
-    overflow: hidden;
-    left: 0;
-    z-index: 90;
-    min-width: 200px;
-    max-width: min-content;
-
-    height: 0;
-    border: none;
-    pointer-events: none;
-    user-select: none;
-
-    box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
-  }
-
-  @keyframes pop-up {
-    0% {
-      scale: 0.9;
-      opacity: 0;
-    }
-
-    100% {
-      scale: 1;
-      opacity: 1;
-      user-select: all;
-    }
-  }
-
-  @keyframes pop-down {
-    0% {
-      scale: 1;
-      height: auto;
-      border: initial;
-      pointer-events: all;
-      top: auto;
-      bottom: auto;
-      border: 1px solid hsl(var(--border));
-      opacity: 1;
-      user-select: all;
-    }
-
-    99.9999% {
-      scale: 0.9;
-      height: auto;
-      border: initial;
-      pointer-events: all;
-      bottom: initial;
-      top: auto;
-      bottom: auto;
-      border: 1px solid hsl(var(--border));
-      opacity: 0;
-    }
-
-    100% {
-      height: 0;
-      border: none;
-      pointer-events: none;
-      user-select: none;
-    }
-  }
-
-  .sui-dropdown.initialized {
-    animation: pop-down .15s ease forwards;
-  }
-
-  .sui-dropdown.initialized.active {
-    display: flex;
-    border: 1px solid hsl(var(--border));
-    height: auto;
-    pointer-events: all;
-
-    animation: pop-up .15s ease forwards;
-  }
-
-  .sui-dropdown.initialized.below {
-    top: calc(100% + .25rem + var(--offset)) !important;
-    bottom: auto;
-
-    transform-origin: top center;
-  }
-
-  .sui-dropdown.below.start {
-    transform-origin: top left;
-  }
-
-  .sui-dropdown.below.end {
-    transform-origin: top right;
-  }
-
-  .sui-dropdown.above {
-    top: auto;
-    bottom: calc(100% + .25rem + var(--offset)) !important;
-    transform-origin: bottom center;
-  }
-
-  .sui-dropdown.above.start {
-    transform-origin: bottom left;
-  }
-
-  .sui-dropdown.above.end {
-    transform-origin: bottom right;
-  }
-
-  .sui-dropdown-option {
-    padding: .5rem .75rem;
-    cursor: pointer;
-    font-size: .975em;
-    transition: all .15s ease;
-    display: flex;
-    flex-direction: row;
-    gap: .5rem;
-    align-items: center;
-    width: 100%;
-    white-space: normal;
-    user-select: none;
-  }
-
-  .sui-dropdown-option:hover, .sui-dropdown-option:focus, .sui-dropdown-option.focused {
-    background-color: hsl(var(--background-step-3));
-  }
-
-  .sui-dropdown-option.has-href {
-    padding: 0;
-  }
-
-  .sui-dropdown-link {
-    padding: .5rem .75rem;
-    width: 100%;
-    text-decoration: none;
-    color: hsl(var(--text-normal));
-  }
-
-  .sui-dropdown-option.primary {
-    color: hsl(var(--primary-base));
-  }
-
-  .sui-dropdown-option.primary:hover {
-    background-color: hsl(var(--primary-base));
-    color: hsl(var(--text-inverted));
-  }
-
-  .sui-dropdown-option.success {
-    color: hsl(var(--success-base));
-  }
-
-  .sui-dropdown-option.success:hover {
-    background-color: hsl(var(--success-base));
-    color: hsl(var(--text-dark));
-  }
-
-  .sui-dropdown-option.warning {
-    color: hsl(var(--warning-base));
-  }
-
-  .sui-dropdown-option.warning:hover {
-    background-color: hsl(var(--warning-base));
-    color: hsl(var(--text-dark));
-  }
-
-  .sui-dropdown-option.danger {
-    color: hsl(var(--danger-base));
-  }
-
-  .sui-dropdown-option.danger:hover {
-    background-color: hsl(var(--danger-base));
-    color: hsl(var(--text-light));
-  }
-
-  .sui-dropdown-option.disabled {
-    pointer-events: none;
-    color: hsl(var(--text-muted));
-  }
-
-  .sui-dropdown-option.end {
-    justify-content: space-between;
-  }
-
-  .sui-dropdown-option.has-icon {
-    padding-left: .5rem;
-  }
-</style>

package/src/components/Dropdown/dropdown.ts

@@ -1,258 +0,0 @@
-class DropdownHelper {
-	private container: HTMLDivElement;
-	private toggleEl: HTMLDivElement;
-	private dropdown: HTMLUListElement;
-
-	private alignment: 'start' | 'center' | 'end';
-	private triggerOn: 'left' | 'right' | 'both';
-	private fullWidth = false;
-	private focusIndex = -1;
-
-	active = false;
-
-	/**
-	 * A helper function to interact with dropdowns.
-	 * @param id The ID of the dropdown.
-	 * @param fullWidth Whether the dropdown should be full width. Not needed normally.
-	 */
-	constructor(id: string, fullWidth?: boolean) {
-		this.container = document.getElementById(`${id}-container`) as HTMLDivElement;
-
-		if (!this.container) {
-			throw new Error(`Unable to find dropdown with ID ${id}.`);
-		}
-
-		this.alignment = this.container.dataset.align as 'start' | 'center' | 'end';
-		this.triggerOn = this.container.dataset.trigger as 'left' | 'right' | 'both';
-
-		this.toggleEl = document.getElementById(`${id}-toggle-btn`) as HTMLDivElement;
-		this.dropdown = document.getElementById(`${id}-dropdown`) as HTMLUListElement;
-
-		if (fullWidth) this.fullWidth = true;
-
-		this.hideOnClickOutside(this.container);
-
-		this.initialBehaviorRegistration();
-		this.initialOptClickRegistration();
-	}
-
-	/**
-	 * Registers a click callback for the dropdown options. Whenever one of the options
-	 * is clicked, the callback will be called with the value of the option.
-	 * @param func The callback function.
-	 */
-	public registerClickCallback = (func: (value: string) => void) => {
-		const dropdownOpts = this.dropdown.querySelectorAll('li');
-
-		for (const opt of dropdownOpts) {
-			opt.removeEventListener('click', this.hide);
-
-			opt.addEventListener('click', () => {
-				func(opt.dataset.value || '');
-				this.hide();
-			});
-		}
-	};
-
-	/**
-	 * Sets up all listeners for the dropdown.
-	 */
-	private initialBehaviorRegistration = () => {
-		window.addEventListener('scroll', this.hide);
-		document.addEventListener('keydown', (e) => {
-			if (e.key === 'Escape') this.hide();
-		});
-		document.addEventListener('astro:before-preparation', () => {
-			this.dropdown.classList.remove('initialized');
-		});
-
-		if (this.triggerOn === 'left') {
-			this.toggleEl.addEventListener('click', this.toggle);
-		} else if (this.triggerOn === 'both') {
-			this.toggleEl.addEventListener('click', this.toggle);
-			this.toggleEl.addEventListener('contextmenu', (e) => {
-				e.preventDefault();
-				this.toggle();
-			});
-		} else {
-			this.toggleEl.addEventListener('contextmenu', (e) => {
-				e.preventDefault();
-				this.toggle();
-			});
-		}
-
-		this.toggleEl.addEventListener('keydown', (e) => {
-			if (!this.active) return;
-
-			if (e.key === 'Enter') {
-				e.preventDefault();
-
-				const focused = this.dropdown.querySelector('li.focused') as HTMLLIElement;
-
-				if (!focused) {
-					this.hide();
-					return;
-				}
-
-				focused.click();
-			}
-
-			if (e.key === 'ArrowDown') {
-				e.preventDefault();
-
-				this.focusIndex =
-					this.focusIndex === this.dropdown.children.length - 1 ? 0 : this.focusIndex + 1;
-			}
-
-			if (e.key === 'ArrowUp') {
-				e.preventDefault();
-
-				this.focusIndex =
-					this.focusIndex === 0 ? this.dropdown.children.length - 1 : this.focusIndex - 1;
-			}
-
-			if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-				if (this.focusIndex > this.dropdown.children.length - 1) {
-					this.focusIndex = 0;
-				}
-
-				this.dropdown.querySelector('li.focused')?.classList.remove('focused');
-
-				const newFocus = this.dropdown.children[this.focusIndex] as HTMLLIElement;
-
-				if (!newFocus) return;
-
-				newFocus.classList.add('focused');
-				newFocus.focus();
-			}
-		});
-	};
-
-	/**
-	 * Registers callbacks to hide the dropdown when an option is clicked.
-	 */
-	private initialOptClickRegistration = () => {
-		const dropdownOpts = this.dropdown.querySelectorAll('li');
-
-		for (const opt of dropdownOpts) {
-			opt.addEventListener('click', this.hide);
-		}
-	};
-
-	/**
-	 * A function to toggle the dropdown.
-	 */
-	public toggle = () => {
-		if (this.active) {
-			this.hide();
-			return;
-		}
-
-		this.show();
-	};
-
-	/**
-	 * A function to hide the dropdown.
-	 */
-	public hide = () => {
-		this.dropdown.classList.remove('active');
-		this.active = false;
-		this.focusIndex = -1;
-
-		this.dropdown.querySelector('li.focused')?.classList.remove('focused');
-
-		setTimeout(() => this.dropdown.classList.remove('above', 'below'), 200);
-	};
-
-	/**
-	 * A function to show the dropdown.
-	 */
-	public show = () => {
-		const isMobile = window.matchMedia('screen and (max-width: 840px)').matches;
-
-		const {
-			bottom,
-			left,
-			right,
-			width: parentWidth,
-			x,
-			y,
-			height,
-		} = this.toggleEl.getBoundingClientRect();
-		const { width: dropdownWidth } = this.dropdown.getBoundingClientRect();
-
-		const optionHeight = 43.28;
-		const totalBorderSize = 2;
-		const margin = 4;
-
-		const dropdownHeight = this.dropdown.children.length * optionHeight + totalBorderSize + margin;
-
-		const CustomRect = {
-			top: bottom + margin,
-			left,
-			right,
-			bottom: bottom + margin + dropdownHeight,
-			width: isMobile || this.fullWidth ? parentWidth : dropdownWidth, // Account for scaling of animation
-			height: dropdownHeight,
-			x,
-			y: y + height + margin,
-		};
-
-		this.active = true;
-
-		if (isMobile || this.fullWidth) {
-			this.dropdown.style.maxWidth = `${parentWidth}px`;
-			this.dropdown.style.minWidth = 'unset';
-			this.dropdown.style.width = `${parentWidth}px`;
-			this.dropdown.style.left = `calc(${parentWidth / 2}px - ${CustomRect.width / 2}px)`;
-		} else {
-			if (this.alignment === 'end') {
-				this.dropdown.style.left = `calc(${parentWidth}px - ${CustomRect.width}px)`;
-			}
-
-			if (this.alignment === 'center') {
-				this.dropdown.style.left = `calc(${parentWidth / 2}px - ${CustomRect.width / 2}px)`;
-			}
-		}
-
-		if (!this.dropdown.classList.contains('initialized')) {
-			this.dropdown.classList.add('initialized');
-		}
-
-		if (
-			CustomRect.top >= 0 &&
-			CustomRect.left >= 0 &&
-			CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-			CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)
-		) {
-			this.dropdown.classList.add('active', 'below');
-			this.focusIndex = -1;
-		} else {
-			this.dropdown.classList.add('active', 'above');
-			this.focusIndex = this.dropdown.children.length;
-		}
-	};
-
-	/**
-	 * A jQuery-like function to hide the dropdown when clicking outside of it.
-	 * @param element The element to hide when clicking outside of it.
-	 */
-	private hideOnClickOutside = (element: HTMLElement) => {
-		const outsideClickListener = (event: MouseEvent) => {
-			if (!event.target) return;
-
-			if (!element.contains(event.target as Node) && isVisible(element) && this.active === true) {
-				// or use: event.target.closest(selector) === null
-				this.hide();
-			}
-		};
-
-		document.addEventListener('click', outsideClickListener);
-	};
-}
-
-export { DropdownHelper };
-
-// 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);

package/src/components/Dropdown/index.ts

@@ -1,2 +0,0 @@
-export { default as Dropdown } from './Dropdown.astro';
-export { DropdownHelper } from './dropdown';

package/src/components/Footer.astro

@@ -1,137 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-
-interface FooterLink {
-	/**
-	 * The label of the link.
-	 */
-	label: string;
-	/**
-	 * The href of the link.
-	 */
-	href: string;
-}
-
-/**
- * The props for the footer component.
- */
-interface Props extends HTMLAttributes<'footer'> {
-	/**
-	 * The links to display in the footer.
-	 */
-	links: {
-		[label: string]: FooterLink[];
-	};
-	/**
-	 * The copyright text to display in the footer.
-	 */
-	copyright: string;
-}
-
-const { copyright, links, ...props } = Astro.props;
----
-
-<footer {...props}>
-  <div class="upper">
-    <div>
-      <slot name="brand" />
-    </div>
-    <div class="links">
-      {Object.keys(links).map((groupLabel) => (
-        <ul>
-          <li class="sui-footer-link-label">{groupLabel}</li>
-          {links[groupLabel]!.map((item) => (
-            <li>
-              <a href={item.href}>{item.label}</a>
-            </li>
-          ))}
-        </ul>
-      ))}
-    </div>
-  </div>
-  <hr class="separator" />
-  <div class="lower">
-    <span class="copyright-span">{copyright}</span>
-    <slot name="socials" />
-  </div>
-</footer>
-<style>
-  footer {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    background-color: hsl(var(--background-step-1));
-    padding: 2rem 10vw;
-    color: hsl(var(--text-normal)) !important;
-  }
-
-  .upper, .lower {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .links {
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 2rem;
-  }
-
-  .links ul {
-    list-style-type: none;
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-
-  .links ul li, .links ul li * {
-    color: hsl(var(--text-normal)) !important;
-    width: fit-content;
-  }
-
-  .links ul li:has(a):hover {
-    text-decoration: underline;
-  }
-
-  .sui-footer-link-label {
-    font-size: 1.125em;
-    font-weight: 700;
-  }
-
-  .separator {
-    height: 1px;
-    width: 100%;
-    border: none;
-    background: hsl(var(--border));
-  }
-
-  .lower {
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-
-  @media screen and (max-width: 1440px) {
-    footer {
-      padding: 2rem;
-    }
-  }
-
-  @media screen and (max-width: 1280px) {
-    .upper {
-      flex-direction: column;
-      gap: 2rem;
-    }
-
-    .links {
-      justify-content: flex-start;
-    }
-  }
-
-  @media screen and (max-width: 640px) {
-    .links ul {
-      width: calc(50% - 1rem);
-    }
-  }
-</style>

package/src/components/Modal/index.ts

@@ -1,2 +0,0 @@
-export { default as Modal } from './Modal.astro';
-export { ModalHelper } from './modal';