@studiocms/ui 0.3.2 → 0.4.0

package/src/components/Modal/modal.ts

@@ -1,163 +0,0 @@
-class ModalHelper {
-	private element: HTMLDialogElement;
-	private cancelButton: HTMLButtonElement | undefined;
-	private confirmButton: HTMLButtonElement | undefined;
-
-	private isForm = false;
-	private modalForm: HTMLFormElement;
-
-	/**
-	 * A helper to manage modals.
-	 * @param id The ID of the modal.
-	 * @param triggerID The ID of the element that should trigger the modal.
-	 */
-	constructor(id: string, triggerID?: string) {
-		const element = document.getElementById(id) as HTMLDialogElement;
-
-		if (!element) {
-			throw new Error(`No modal with ID ${id} found.`);
-		}
-
-		this.element = element as HTMLDialogElement;
-		this.modalForm = document.getElementById(`${id}-form-element`) as HTMLFormElement;
-
-		const isDismissable = this.element.dataset.dismissable === 'true';
-		const isForm = this.element.dataset.form === 'true';
-
-		if (isDismissable) {
-			this.addDismissiveClickListener();
-		}
-
-		if (isForm) this.isForm = true;
-
-		this.addButtonListeners(id, isDismissable);
-
-		if (triggerID) {
-			this.bindTrigger(triggerID);
-		}
-	}
-
-	/**
-	 * A helper function which adds event listeners to the modal buttons to close the modal when clicked.
-	 * @param id The ID of the modal.
-	 * @param dismissable Whether the modal is dismissable.
-	 */
-	private addButtonListeners = (id: string, dismissable: boolean) => {
-		if (
-			dismissable ||
-			(!this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton)
-		) {
-			const xMarkButton = document.getElementById(`${id}-btn-x`) as HTMLButtonElement;
-			xMarkButton.addEventListener('click', this.hide);
-		}
-
-		if (!!this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton) return;
-
-		if (this.element.dataset.hasCancelButton) {
-			this.cancelButton = document.getElementById(`${id}-btn-cancel`) as HTMLButtonElement;
-			this.cancelButton.addEventListener('click', this.hide);
-		}
-
-		if (this.element.dataset.hasActionButton) {
-			this.confirmButton = document.getElementById(`${id}-btn-confirm`) as HTMLButtonElement;
-			this.confirmButton.addEventListener('click', this.hide);
-		}
-	};
-
-	/**
-	 * A helper function to close the modal when the user clicks outside of it.
-	 */
-	private addDismissiveClickListener = () => {
-		this.element.addEventListener('click', (e: MouseEvent) => {
-			if (!e.target) return;
-
-			const { left, right, top, bottom } = this.element.getBoundingClientRect();
-
-			const clickWithinModalBox =
-				e.clientX < right && e.clientX > left && e.clientY < bottom && e.clientY > top;
-
-			if (!clickWithinModalBox) {
-				this.element.close();
-			}
-		});
-	};
-
-	/**
-	 * A function to show the modal.
-	 */
-	public show = () => {
-		this.element.showModal();
-		this.element.focus();
-	};
-
-	/**
-	 * A function to hide the modal.
-	 */
-	public hide = () => {
-		this.element.close();
-	};
-
-	/**
-	 * A function to add another trigger to show the modal with.
-	 * @param elementID The ID of the element that should trigger the modal when clicked.
-	 */
-	public bindTrigger = (elementID: string) => {
-		const element = document.getElementById(elementID);
-
-		if (!element) {
-			throw new Error(`No element with ID ${elementID} found.`);
-		}
-
-		element.addEventListener('click', this.show);
-	};
-
-	/**
-	 * Registers a callback for the cancel button.
-	 * @param func The callback function.
-	 */
-	public registerCancelCallback = (func: () => void) => {
-		if (!this.cancelButton) {
-			throw new Error('Unable to register cancel callback without a cancel button.');
-		}
-
-		this.cancelButton.removeEventListener('click', this.hide);
-
-		this.cancelButton.addEventListener('click', () => {
-			func();
-			this.hide();
-		});
-	};
-
-	/**
-	 * Registers a callback for the confirm button.
-	 * @param func The callback function. If the modal is a form, the function will be called with
-	 * the form data as the first argument.
-	 */
-	public registerConfirmCallback = (func: (data?: FormData | undefined) => void) => {
-		if (!this.confirmButton) {
-			throw new Error('Unable to register cancel callback without a confirmation button.');
-		}
-
-		this.confirmButton.removeEventListener('click', this.hide);
-
-		if (this.isForm) {
-			this.modalForm.addEventListener('submit', (e) => {
-				e.preventDefault();
-
-				const formData = new FormData(this.modalForm);
-
-				func(formData);
-				this.hide();
-
-				setTimeout(() => this.modalForm.reset(), 450);
-			});
-		} else {
-			this.confirmButton.addEventListener('click', () => {
-				func();
-				this.hide();
-			});
-		}
-	};
-}
-
-export { ModalHelper };

package/src/components/RadioGroup.astro

@@ -1,299 +0,0 @@
----
-import type { StudioCMSColorway } from '../utils/colors';
-import { generateID } from '../utils/generateID';
-
-/**
- * The props for the RadioGroup component.
- */
-interface Option {
-	/**
-	 * The label of the option.
-	 */
-	label: string;
-	/**
-	 * The value of the option.
-	 */
-	value: string;
-	/**
-	 * Whether the option is disabled.
-	 */
-	disabled?: boolean;
-}
-
-/**
- * The props for the RadioGroup component.
- */
-interface Props {
-	/**
-	 * The label of the radio group.
-	 */
-	label: string;
-	/**
-	 * The color of the radio group. Defaults to `default`.
-	 */
-	color?: StudioCMSColorway;
-	/**
-	 * The default value of the radio group. Needs to be one of the values in the options.
-	 */
-	defaultValue?: string;
-	/**
-	 * The options to display in the radio group.
-	 */
-	options: Option[];
-	/**
-	 * Whether the radio group is disabled. Defaults to `false`.
-	 */
-	disabled?: boolean;
-	/**
-	 * The name of the radio group.
-	 */
-	name?: string;
-	/**
-	 * Whether the radio group is required. Defaults to `false`.
-	 */
-	isRequired?: boolean;
-	/**
-	 * Whether the radio group is horizontal. Defaults to `false`.
-	 */
-	horizontal?: boolean;
-	/**
-	 * Additional classes to apply to the radio group.
-	 */
-	class?: string;
-}
-
-const {
-	label,
-	color = 'default',
-	defaultValue,
-	options,
-	disabled = false,
-	isRequired = false,
-	horizontal = false,
-	name = generateID('radio'),
-	class: className,
-} = Astro.props;
----
-
-<div 
-  class="sui-radio-container"
-  class:list={[
-    disabled && "disabled",
-    horizontal && "horizontal",
-    color,
-    className
-  ]}
->
-  <span>
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </span>
-  <div class="sui-radio-inputs" role="radiogroup">
-    {options.map(({ label, value, disabled: individuallyDisabled }, i) => (
-      <label
-        for={value}
-        class="sui-radio-label"
-        class:list={[ individuallyDisabled && "disabled" ]}
-      >
-        <div class="sui-radio-box-container">
-          <div 
-            class="sui-radio-box" 
-            role="radio" 
-            tabindex={i === 0 ? 0 : -1} 
-            aria-checked={value === defaultValue}
-            aria-label={label}
-          />
-        </div>
-        <input 
-          class="sui-radio-toggle"
-          type="radio" 
-          value={value} 
-          id={value} 
-          name={name} 
-          checked={value === defaultValue} 
-          disabled={disabled || individuallyDisabled}
-          required={isRequired}
-        />
-        <span>{label}</span>
-      </label>
-    ))}
-  </div>
-</div>
-<script>
-  const elements = document.querySelectorAll<HTMLDivElement>('.sui-radio-container');
-
-  for (const element of elements) {
-    if (element.dataset.initialized) continue;
-    
-    element.dataset.initialized = 'true';
-
-    const radioBoxes = element.querySelectorAll<HTMLDivElement>('.sui-radio-box');
-
-    let i = 0;
-
-    for (const radioBox of radioBoxes) {
-      radioBox.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' || e.key === " ") {
-          e.preventDefault();
-
-          const input = (e.target as HTMLDivElement).parentElement!.parentElement!.querySelector<HTMLInputElement>('.sui-radio-toggle')!;
-
-          if (input.disabled) return;
-
-          input.checked = true;
-        }
-
-        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-          e.preventDefault();
-
-          let nextRadioBox: HTMLDivElement | undefined;
-
-          radioBoxes.forEach((box, index) => {
-            if (box === radioBox) nextRadioBox = radioBoxes[index + 1];
-          });
-
-          if (!nextRadioBox) return;
-
-          radioBox.tabIndex = -1;
-          nextRadioBox.tabIndex = 0;
-          nextRadioBox.focus();
-          nextRadioBox.click();
-        }
-
-        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-          e.preventDefault();
-
-          let previousRadioBox: HTMLDivElement | undefined;
-
-          radioBoxes.forEach((box, index) => {
-            if (box === radioBox) previousRadioBox = radioBoxes[index - 1];
-          });
-
-          if (!previousRadioBox) return;
-
-          radioBox.tabIndex = -1;
-          previousRadioBox.tabIndex = 0;
-          previousRadioBox.focus();
-          previousRadioBox.click();
-        }
-      });
-
-      i++;
-    }
-    element.addEventListener('keydown', (e) => {
-      if (e.key !== 'Enter') return;
-
-      const checkbox = element.querySelector<HTMLInputElement>('.sui-checkbox');
-        
-      if (!checkbox) return;
-
-      checkbox.click();
-    });
-  }
-</script>
-<style>
-  .sui-radio-container {
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-  }
-
-  .sui-radio-container.disabled {
-    opacity: 0.5;
-    color: hsl(var(--text-muted));
-  }
-
-  .sui-radio-label.disabled {
-    opacity: 0.5;
-    color: hsl(var(--text-muted));
-    pointer-events: none;
-  }
-
-  .req-star {
-    color: hsl(var(--danger-base));
-    font-weight: 700;
-  }
-
-  .sui-radio-inputs {
-    display: flex;
-    flex-direction: column;
-    gap: .75rem;
-  }
-
-  .sui-radio-container.horizontal .sui-radio-inputs {
-    flex-direction: row;
-  }
-
-  .sui-radio-label {
-    display: flex;
-    flex-direction: row;
-    gap: .5rem;
-    position: relative;
-    align-items: center;
-  }
-
-  .sui-radio-label:hover .sui-radio-box {
-    outline-color: hsl(var(--default-hover));
-  }
-
-  .sui-radio-container:not(.disabled) .sui-radio-label:active .sui-radio-box {
-    outline-color: hsl(var(--default-active));
-    scale: 0.9;
-  }
-
-  .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-    background-color: hsl(var(--text-normal));
-    outline-color: hsl(var(--text-normal));
-  }
-
-  .sui-radio-container.primary .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-    background-color: hsl(var(--primary-base));
-    outline-color: hsl(var(--primary-base));
-  }
-
-  .sui-radio-container.success .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-    background-color: hsl(var(--success-base));
-    outline-color: hsl(var(--success-base));
-  }
-
-  .sui-radio-container.warning .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-    background-color: hsl(var(--warning-base));
-    outline-color: hsl(var(--warning-base));
-  }
-
-  .sui-radio-container.danger .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-    background-color: hsl(var(--danger-base));
-    outline-color: hsl(var(--danger-base));
-  }
-
-  .sui-radio-box-container {
-    width: 20px;
-    height: 20px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-
-  .sui-radio-box {
-    width: 12px;
-    height: 12px;
-    border-radius: 20px;
-    outline: 1px solid hsl(var(--default-base));
-    outline-offset: 4px;
-    transition: all .15s ease;
-  }
-
-  .sui-radio-box:focus-visible {
-    outline-color: hsl(var(--text-normal)) !important;
-  }
-
-  .sui-radio-toggle {
-    width: 0;
-    height: 0;
-    visibility: hidden;
-    opacity: 0;
-    margin: 0;
-    position: absolute;
-  }
-</style>