@studiocms/ui 0.4.11 → 0.4.13

package/dist/components/Select/Select.astro

@@ -1,5 +1,6 @@
 ---
 import { generateID } from '../../utils/generateID.js';
+import Badge from '../Badge/Badge.astro';
 import Icon from '../Icon/Icon.astro';
 import './select.css';
 
@@ -21,18 +22,36 @@ interface Option {
 	disabled?: boolean;
 }
 
+type NonMultipleProps = {
+	/**
+	 * Whether the select accepts multiple options. Defaults to `false`.
+	 */
+	multiple: false;
+	/**
+	 * The default value of the select.
+	 */
+	defaultValue: string;
+};
+
+type MultipleProps = {
+	/**
+	 * Whether the select accepts multiple options. Defaults to `false`.
+	 */
+	multiple: true;
+	/**
+	 * The default value of the select.
+	 */
+	defaultValue: string[];
+};
+
 /**
  * The props for the select component.
  */
-interface Props {
+type BaseProps = {
 	/**
 	 * The label of the select.
 	 */
 	label?: string;
-	/**
-	 * The default value of the select.
-	 */
-	defaultValue?: string;
 	/**
 	 * Additional classes to apply to the select.
 	 */
@@ -61,7 +80,13 @@ interface Props {
 	 * The placeholder of the select. Defaults to `Select`.
 	 */
 	placeholder?: string;
-}
+	/**
+	 * The maximum number of options that can be selected. Defaults to `undefined`.
+	 */
+	max?: number;
+};
+
+type Props = BaseProps & (MultipleProps | NonMultipleProps);
 
 const {
 	label,
@@ -73,74 +98,113 @@ const {
 	disabled,
 	fullWidth,
 	placeholder = 'Select',
+	multiple = false,
+	max = undefined,
 } = Astro.props;
+
+let selected: Option | (Option | undefined)[] | undefined;
+
+if (multiple && Array.isArray(defaultValue)) {
+	selected = defaultValue.map((x) => options.find((y) => y.value === x));
+} else {
+	selected = options.find((x) => x.value === defaultValue);
+}
+
+const defaultLabel = selected
+	? Array.isArray(selected)
+		? selected.map((x) => x?.label)
+		: selected.label
+	: placeholder;
 ---
 
 <div
-    id={`${name}-container`}
-    class="sui-select-label"
-    class:list={[disabled && "disabled", className, fullWidth && "full"]}
-    data-options={JSON.stringify(options)}
-    data-id={name}
+	id={`${name}-container`}
+	class="sui-select-label"
+	class:list={[disabled && "disabled", className, fullWidth && "full"]}
+	data-options={JSON.stringify(options)}
+	data-multiple={multiple ? "true" : undefined}
+	data-multiple-max={multiple && max !== undefined ? max : undefined}
+	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>
+	{label && (
+		<label class="label" for={`${name}-select-btn`}>
+			{label}
+			<span class="req-star">{isRequired && "*"}</span>
+		</label>
+	)}
+	<div class="sui-select-dropdown-container">
+		<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`}>
+				{Array.isArray(selected)
+					? <div class="sui-select-badge-container">{selected.map((s) => s && <Badge class="sui-select-badge" data-value={s.value} size="sm" label={s.label} iconPosition="right" icon="x-mark" />)}</div>
+					: selected?.label ?? defaultLabel
+				}
+			</span>
+			<Icon name="chevron-up-down" width={24} height={24} class="sui-select-chevron" />
+		</button>
+		<ul class="sui-select-dropdown" role="listbox" id={`${name}-dropdown`}>
+			{
+				options.map((x, i) => {
+					const isSelected = Array.isArray(selected)
+						? selected.map((y) => y && y.value).includes(x.value)
+						: selected?.value === x.value;
+					return (
+						<li
+							class="sui-select-option"
+							role="option"
+							value={x.value}
+							class:list={[
+								isSelected && `selected`,
+								x.disabled && "disabled",
+							]}
+							id={isSelected ? `${name}-selected` : ""}
+							data-option-index={i}
+						>
+							{x.label}
+						</li>
+					)
+				})
+			}
+		</ul>
+	</div>
+	<select class="sui-hidden-select" id={name} name={name} required={isRequired} multiple={multiple ? "" : undefined} hidden tabindex="-1">
+		<option value={""}> Select </option>
+		{
+			options.map((x) => {
+				const isSelected = Array.isArray(selected)
+					? selected.map((y) => y && y.value).includes(x.value)
+					: selected?.value === x.value;
+				(
+					<option
+						value={x.value}
+						selected={isSelected}
+						disabled={x.disabled}
+					>
+						{x.label}
+					</option>
+				)
+			})
+		}
+	</select>
+	{multiple && max !== undefined && (
+		<span class="sui-select-max-span">
+			<span class="sui-select-select-count">0</span> / {max} selected
+		</span>
+	)}
+	{
+		multiple && Array.isArray(selected ?? []) && (		
+			<div class="sui-select-badge-container-below"></div>
+		)
+	}
 </div>
 <script>
 import "studiocms:ui/scripts/select"

package/dist/components/Select/select.css

@@ -24,12 +24,12 @@
   font-weight: 700;
 }
 .sui-select-button {
-  padding: 0.5rem 0.75rem 0.5rem 1rem;
+  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
   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;
+  transition: background, border 0.15s ease;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -50,6 +50,23 @@
   border: 1px solid hsl(var(--primary-base));
   background: hsl(var(--background-step-2));
 }
+.sui-select-button:has(.sui-select-badge-container) {
+  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+}
+.sui-select-value-span {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+.sui-select-dropdown-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  position: relative;
+  height: fit-content;
+}
 .sui-select-dropdown {
   position: absolute;
   width: 100%;
@@ -72,7 +89,7 @@
 }
 .sui-select-dropdown.above {
   top: auto;
-  bottom: calc(100% - 18px + 0.25rem);
+  bottom: calc(100% + 0.25rem);
 }
 .sui-select-option {
   padding: 0.5rem;
@@ -89,6 +106,11 @@
 .sui-select-option.focused {
   background-color: hsl(var(--background-step-3));
 }
+.sui-select-label[data-multiple=true] .sui-select-option.selected:hover,
+.sui-select-label[data-multiple=true] .sui-select-option.selected:focus,
+.sui-select-label[data-multiple=true] .sui-select-option.selected.focused {
+  background-color: hsl(var(--primary-hover));
+}
 .sui-select-option:focus {
   outline: none;
   border: none;
@@ -98,6 +120,9 @@
   color: hsl(var(--text-inverted));
   cursor: default;
 }
+.sui-select-label[data-multiple=true] .sui-select-option.selected {
+  cursor: pointer;
+}
 .sui-hidden-select {
   height: 0;
   width: 0;
@@ -108,3 +133,51 @@
   pointer-events: none;
   opacity: 0;
 }
+.sui-select-badge-container {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  width: fit-content;
+}
+.sui-select-badge-container-below:has(.sui-select-badge-container) .sui-select-badge-container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin-top: 0.5rem;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.sui-select-label:has(.sui-select-max-span) .sui-select-badge-container {
+  margin-top: 0rem;
+}
+.sui-select-badge-container .sui-select-badge.sui-badge {
+  white-space: nowrap;
+  cursor: default;
+  position: relative;
+  padding-right: 2rem;
+  border-block: 1.5px solid rgba(0, 0, 0, 0);
+}
+.sui-select-badge-container .sui-select-badge.sui-badge svg {
+  position: absolute;
+  right: 0.25rem;
+  padding: 4px;
+  height: 20px;
+  width: 20px;
+  aspect-ratio: 1 / 1;
+  border-radius: 999px;
+  cursor: pointer;
+  outline: 1px solid hsla(var(--border), 0);
+  transition: background-color 0.15s ease, outline 0.15s ease;
+}
+.sui-select-badge-container .sui-select-badge.sui-badge svg:hover {
+  background-color: hsla(100, 100%, 95%, 0.2);
+}
+.sui-select-badge-container .sui-select-badge.sui-badge svg:active,
+.sui-select-badge-container .sui-select-badge.sui-badge svg:focus {
+  background-color: hsla(100, 100%, 95%, 0.2);
+  outline: 1px solid hsl(var(--border));
+}
+.sui-select-max-span {
+  font-size: 0.875em;
+  color: hsl(var(--text-muted));
+}

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

@@ -1 +1,18 @@
+type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type SelectContainer = HTMLDivElement & {
+    button: HTMLButtonElement | null;
+    dropdown: HTMLUListElement | null;
+    select: HTMLSelectElement | null;
+};
+type SelectState = {
+    optionsMap: Record<string, SelectOption[]>;
+    isMultipleMap: Record<string, boolean>;
+    focusIndex: number;
+    placeholder: string;
+};
+type ResizeCallback = (width: number, height: number, element: Element) => void;
 declare function loadSelects(): void;