@studiocms/ui 0.3.2 → 0.4.0

package/{src/utils/iconType.ts → dist/components/Icon/iconType.d.ts}

@@ -1,3 +1,2 @@
 import type { icons as heroIcons } from '@iconify-json/heroicons/icons.json';
-
 export type HeroIconName = keyof typeof heroIcons;

package/{src/components → dist/components/Input}/Input.astro

@@ -1,6 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import { generateID } from '../utils/generateID';
+import { generateID } from '../../utils/generateID.js';
+import './input.css';
 
 /**
  * The props for the input component.
@@ -72,50 +73,3 @@ const {
 		{...props}
   />
 </label>
-<style>
-	.sui-input-label {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: .25rem;
-	}
-
-	.sui-input-label.disabled {
-		opacity: 0.5;
-		pointer-events: none;
-		color: hsl(var(--text-muted));
-	}
-
-	.label {
-		font-size: 14px;
-	}
-
-	.sui-input {
-		padding: .5rem 1rem;
-		border-radius: 8px;
-		border: 1px solid hsl(var(--border));
-		background: hsl(var(--background-step-2));
-		color: hsl(var(--text-normal));
-		transition: all .15s ease;
-	}
-
-	.sui-input:hover {
-		background: hsl(var(--background-step-3));
-	}
-
-	.sui-input:active,
-	.sui-input:focus {
-		border: 1px solid hsl(var(--primary-base));
-		outline: none;
-		background: hsl(var(--background-step-2));
-	}
-
-	.disabled .sui-input:active {
-		border: 1px solid hsl(var(--border));
-	}
-
-	.req-star {
-		color: hsl(var(--danger-base));
-		font-weight: 700;
-	}
-</style>

package/dist/components/Input/input.css

@@ -0,0 +1,38 @@
+.sui-input-label {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+.sui-input-label.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  color: hsl(var(--text-muted));
+}
+.label {
+  font-size: 14px;
+}
+.sui-input {
+  padding: .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: all .15s ease;
+}
+.sui-input:hover {
+  background: hsl(var(--background-step-3));
+}
+.sui-input:active,
+.sui-input:focus {
+  border: 1px solid hsl(var(--primary-base));
+  outline: none;
+  background: hsl(var(--background-step-2));
+}
+.disabled .sui-input:active {
+  border: 1px solid hsl(var(--border));
+}
+.req-star {
+  color: hsl(var(--danger-base));
+  font-weight: 700;
+}

package/{src → dist}/components/Modal/Modal.astro

@@ -1,7 +1,8 @@
 ---
-import type { StudioCMSColorway } from 'src/utils/colors';
-import Icon from '../../utils/Icon.astro';
-import Button from '../Button.astro';
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import Button from '../Button/Button.astro';
+import Icon from '../Icon/Icon.astro';
+import './modal.css';
 
 interface ButtonType {
 	label: string;
@@ -97,122 +98,3 @@ const {
     </div>
   </form>
 </dialog>
-<style>
-  .sui-modal {
-    border: 1px solid hsl(var(--border));
-    border-radius: .5rem;
-    padding: 1.5rem;
-    box-shadow: 0px 6px 8px hsl(var(--shadow));
-    animation: hide .25s ease;
-    overflow: visible;
-    margin: auto;
-    z-index: 50;
-    max-width: calc(100% - 4rem);
-  }
-
-  .sui-modal.sm {
-    width: 384px;
-  }
-
-  .sui-modal.md {
-    width: 448px;
-  }
-
-  .sui-modal.lg {
-    width: 608px;
-  }
-
-  .sui-modal[open] {
-    animation: show .25s ease-in-out;
-  }
-
-  html:has(.sui-modal[open]),
-  body:has(.sui-modal[open]) {
-    overflow: hidden;
-  }
-
-  .sui-modal[open]::backdrop {
-    background-color: rgba(0, 0, 0, 0.75);
-    animation: backdrop .3s ease-in-out forwards;
-  }
-
-  .sui-modal-header:has(*) {
-    margin-bottom: 1rem;
-
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 1rem;
-
-    * {
-      margin: 0;
-    }
-  }
-
-  .x-mark-container {
-    cursor: pointer;
-    height: 1.5rem;
-    width: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color .15s ease;
-    border-radius: .25rem;
-  }
-
-  .x-mark-container:hover {
-    background-color: hsl(var(--default-base));
-  }
-
-  .x-mark-container:focus-visible {
-    outline: 2px solid hsl(var(--text-normal));
-    outline-offset: 2px;
-  }
-
-  .sui-modal-footer {
-    display: none;
-  }
-
-  .sui-modal-footer:has(*) {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    margin-top: 1rem;
-    justify-content: end;
-  }
-
-  @keyframes hide {
-    0% {
-      scale: 1;
-      opacity: 1;
-      display: block;
-    }
-    100% {
-      scale: 0.85;
-      opacity: 0;
-      display: none;
-    }
-  }
-
-  @keyframes show {
-    0% {
-      scale: 0.85;
-      opacity: 0;
-      display: none;
-    }
-    100% {
-      scale: 1;
-      opacity: 1;
-      display: block;
-    }
-  }
-
-  @keyframes backdrop {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-</style>

package/dist/components/Modal/modal.css

@@ -0,0 +1,100 @@
+.sui-modal {
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  box-shadow: 0px 6px 8px hsl(var(--shadow));
+  animation: hide .25s ease;
+  overflow: visible;
+  margin: auto;
+  z-index: 50;
+  max-width: calc(100% - 4rem);
+}
+.sui-modal.sm {
+  width: 384px;
+}
+.sui-modal.md {
+  width: 448px;
+}
+.sui-modal.lg {
+  width: 608px;
+}
+.sui-modal[open] {
+  animation: show .25s ease-in-out;
+}
+html:has(.sui-modal[open]),
+body:has(.sui-modal[open]) {
+  overflow: hidden;
+}
+.sui-modal[open]::backdrop {
+  background-color: rgba(0, 0, 0, 0.75);
+  animation: backdrop .3s ease-in-out forwards;
+}
+.sui-modal-header:has(*) {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+  * {
+    margin: 0;
+  }
+}
+.x-mark-container {
+  cursor: pointer;
+  height: 1.5rem;
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color .15s ease;
+  border-radius: var(--radius-sm);
+}
+.x-mark-container:hover {
+  background-color: hsl(var(--default-base));
+}
+.x-mark-container:focus-visible {
+  outline: 2px solid hsl(var(--text-normal));
+  outline-offset: 2px;
+}
+.sui-modal-footer {
+  display: none;
+}
+.sui-modal-footer:has(*) {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin-top: 1rem;
+  justify-content: end;
+}
+@keyframes hide {
+  0% {
+    scale: 1;
+    opacity: 1;
+    display: block;
+  }
+  100% {
+    scale: 0.85;
+    opacity: 0;
+    display: none;
+  }
+}
+@keyframes show {
+  0% {
+    scale: 0.85;
+    opacity: 0;
+    display: none;
+  }
+  100% {
+    scale: 1;
+    opacity: 1;
+    display: block;
+  }
+}
+@keyframes backdrop {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/components/Modal/modal.d.ts

@@ -0,0 +1,48 @@
+declare class ModalHelper {
+    private element;
+    private cancelButton;
+    private confirmButton;
+    private isForm;
+    private modalForm;
+    /**
+     * 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);
+    /**
+     * 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;
+    /**
+     * A helper function to close the modal when the user clicks outside of it.
+     */
+    private addDismissiveClickListener;
+    /**
+     * A function to show the modal.
+     */
+    show: () => void;
+    /**
+     * A function to hide the modal.
+     */
+    hide: () => void;
+    /**
+     * 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.
+     */
+    bindTrigger: (elementID: string) => void;
+    /**
+     * Registers a callback for the cancel button.
+     * @param func The callback function.
+     */
+    registerCancelCallback: (func: () => void) => void;
+    /**
+     * 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.
+     */
+    registerConfirmCallback: (func: (data?: FormData | undefined) => void) => void;
+}
+export { ModalHelper };

package/dist/components/Modal/modal.js

@@ -0,0 +1,129 @@
+class ModalHelper {
+  element;
+  cancelButton;
+  confirmButton;
+  isForm = false;
+  modalForm;
+  /**
+   * 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, triggerID) {
+    const element = document.getElementById(id);
+    if (!element) {
+      throw new Error(`No modal with ID ${id} found.`);
+    }
+    this.element = element;
+    this.modalForm = document.getElementById(`${id}-form-element`);
+    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.
+   */
+  addButtonListeners = (id, dismissable) => {
+    if (dismissable || !this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton) {
+      const xMarkButton = document.getElementById(`${id}-btn-x`);
+      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`);
+      this.cancelButton.addEventListener("click", this.hide);
+    }
+    if (this.element.dataset.hasActionButton) {
+      this.confirmButton = document.getElementById(`${id}-btn-confirm`);
+      this.confirmButton.addEventListener("click", this.hide);
+    }
+  };
+  /**
+   * A helper function to close the modal when the user clicks outside of it.
+   */
+  addDismissiveClickListener = () => {
+    this.element.addEventListener("click", (e) => {
+      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.
+   */
+  show = () => {
+    this.element.showModal();
+    this.element.focus();
+  };
+  /**
+   * A function to hide the modal.
+   */
+  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.
+   */
+  bindTrigger = (elementID) => {
+    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.
+   */
+  registerCancelCallback = (func) => {
+    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.
+   */
+  registerConfirmCallback = (func) => {
+    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/dist/components/Progress/Progress.astro

@@ -0,0 +1,21 @@
+---
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import './progress.css';
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = {
+	id: string;
+	value?: number;
+	max?: number;
+	color?: Omit<StudioCMSColorway, 'default'>;
+} & HTMLAttributes<'div'>;
+
+const { id, value = 0, max = 100, color = 'primary' } = Astro.props;
+---
+
+<div class="sui-progress" class:list={[color]} role="progressbar" id={id} data-max={max} data-value={value}>
+  <div class="sui-progress-slider" />
+</div>
+<script>
+  import 'studiocms:ui/scripts/progress';
+</script>

package/dist/components/Progress/helper.d.ts

@@ -0,0 +1,13 @@
+declare class ProgressHelper {
+    private bar;
+    private progress;
+    private value;
+    private max;
+    constructor(id: string);
+    getValue(): number;
+    setValue(value: number): void;
+    getMax(): number;
+    setMax(value: number): void;
+    getPercentage(): number;
+}
+export { ProgressHelper };

package/dist/components/Progress/helper.js

@@ -0,0 +1,32 @@
+class ProgressHelper {
+  bar;
+  progress;
+  value;
+  max;
+  constructor(id) {
+    this.bar = document.getElementById(id);
+    this.progress = this.bar.firstElementChild;
+    this.value = this.getValue();
+    this.max = this.getMax();
+  }
+  getValue() {
+    return Number.parseInt(this.bar.dataset.value, 10);
+  }
+  setValue(value) {
+    const max = Number.parseInt(this.bar.dataset.max, 10);
+    const percent = Math.round(value / max * 100);
+    this.progress.style.width = `${percent}%`;
+  }
+  getMax() {
+    return Number.parseInt(this.bar.dataset.max, 10);
+  }
+  setMax(value) {
+    this.bar.dataset.max = value.toString();
+  }
+  getPercentage() {
+    return Math.round(this.value / this.max * 100);
+  }
+}
+export {
+  ProgressHelper
+};

package/dist/components/Progress/progress.css

@@ -0,0 +1,29 @@
+.sui-progress {
+  width: 100%;
+  height: 1rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.sui-progress-slider {
+  height: 100%;
+  width: 0;
+  transition: all .75s ease;
+  border-radius: var(--radius-sm);
+  background-color: hsl(var(--primary-base));
+}
+.sui-progress.success .sui-progress-slider {
+  background-color: hsl(var(--success-base));
+}
+.sui-progress.warning .sui-progress-slider {
+  background-color: hsl(var(--warning-base));
+}
+.sui-progress.danger .sui-progress-slider {
+  background-color: hsl(var(--danger-base));
+}
+.sui-progress.info .sui-progress-slider {
+  background-color: hsl(var(--info-base));
+}
+.sui-progress.monochrome .sui-progress-slider {
+  background-color: hsl(var(--mono-base));
+}

package/dist/components/Progress/progress.d.ts

@@ -0,0 +1 @@
+declare const allBars: NodeListOf<HTMLDivElement>;

package/dist/components/Progress/progress.js

@@ -0,0 +1,10 @@
+const allBars = document.querySelectorAll(".sui-progress");
+for (const bar of allBars) {
+  const value = bar.dataset.value;
+  const max = bar.dataset.max;
+  const progress = bar.firstElementChild;
+  if (value && max) {
+    const percent = Math.round(Number.parseInt(value, 10) / Number.parseInt(max, 10) * 100);
+    progress.style.width = `${percent}%`;
+  }
+}