Merge pull request #2450 from skeletonlabs/dev

Merge for release - Jan 30, 2024

.changeset/famous-pots-trade.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Removed recursive-tree-view's unused props for `disabled` and `open`

.changeset/flat-icons-do.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: InputChips now allow you to add/remove chips programatically.

.changeset/nasty-terms-allow.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: CodeBlock copy button type is now `button` instead of default (`submit`)

.changeset/real-cougars-invent.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: added `label` prop to InputChips to provide aria-label for a11y

.changeset/swift-insects-rush.md

@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+chore: Applied `@html` interpretation to Autocomplete empty state

packages/plugin/src/styles/components/modals.css

@@ -16,7 +16,7 @@
  }
 
  /* Provides initial focus selection styles on opening the modal */
- .modal *:focus:not([tabindex='-1']):not(.input):not(.textarea):not(.select):not(.input-group) {
+ .modal *:focus:not([tabindex='-1']):not(.input):not(.textarea):not(.select):not(.input-group):not(.input-group input) {
  outline-style: auto;
  @apply outline-[-webkit-focus-ring-color];
  }

packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte

@@ -174,6 +174,6 @@
  </ul>
  </nav>
  {:else}
- <div class="autocomplete-empty {classesEmpty}">{emptyState}</div>
+ <div class="autocomplete-empty {classesEmpty}">{@html emptyState}</div>
  {/if}
 </div>

packages/skeleton/src/lib/components/InputChip/InputChip.svelte

@@ -28,7 +28,10 @@
  type InputChipEvent = {
  add: { event: SubmitEvent; chipIndex: number; chipValue: string };
  remove: { event: MouseEvent; chipIndex: number; chipValue: string };
+ addManually: { chipIndex: number; chipValue: string };
+ removeManually: { chipValue: string };
  invalid: { event: SubmitEvent; input: string };
+ invalidManually: { input: string };
  };
  const dispatch = createEventDispatcher<InputChipEvent>();
 
@@ -86,6 +89,10 @@
  /** Provide arbitrary classes to style the input field region. */
  export let regionInput: CssClasses = '';
 
+ // Props (A11y)
+ /** Provide the ARIA label for the select input. */
+ export let label = 'Chips select';
+
  // Props (transition)
  /**
  * Enable/Disable transitions
@@ -170,27 +177,53 @@
  inputValid = true;
  }
 
- function validate(): boolean {
- if (!input) return false;
+ function validateCustom(chip: string) {
+ return validation === undefined || validation(chip);
+ }
+
+ function validateCount() {
+ return max === -1 || value.length < max;
+ }
+
+ function validateLength(chip: string) {
+ return (minlength === -1 || chip.length >= minlength) && (maxlength === -1 || chip.length <= maxlength);
+ }
+
+ function validateWhiteList(chip: string) {
+ return whitelist.length === 0 || whitelist.includes(chip);
+ }
+
+ function validateDuplicates(chip: string) {
+ return allowDuplicates || !value.includes(chip);
+ }
+
+ function validate(chip: string = ''): boolean {
+ if (!chip && !input) return false;
  // Format: trim value
- input = input.trim();
- // Custom validation
- if (validation !== undefined && !validation(input)) return false;
- // Maximum
- if (max !== -1 && value.length >= max) return false;
- // Minimum Character Length
- if (minlength !== -1 && input.length < minlength) return false;
- // Maximum Character Length
- if (maxlength !== -1 && input.length > maxlength) return false;
- // Whitelist (if available)
- if (whitelist.length > 0 && !whitelist.includes(input)) return false;
- // Value is unique
- if (allowDuplicates === false && value.includes(input)) return false;
- // State is valid
- return true;
+ chip = chip !== '' ? chip.trim() : input.trim();
+ return validateCustom(chip) && validateCount() && validateLength(chip) && validateWhiteList(chip) && validateDuplicates(chip);
  }
 
- function addChip(event: SvelteEvent<SubmitEvent, HTMLFormElement>): void {
+ function addChipCommon(chip: string) {
+ // Format: to lowercase (if enabled)
+ chip = allowUpperCase ? chip : chip.toLowerCase();
+ // Append value to array
+ value.push(chip);
+ value = value;
+ chipValues.push({ val: chip, id: Math.random() });
+ chipValues = chipValues;
+ }
+
+ function removeChipCommon(chip: string) {
+ let chipIndex = value.indexOf(chip);
+ // Remove value from array
+ value.splice(chipIndex, 1);
+ value = value;
+ chipValues.splice(chipIndex, 1);
+ chipValues = chipValues;
+ }
+
+ function addChipInternally(event: SvelteEvent<SubmitEvent, HTMLFormElement>): void {
  event.preventDefault();
  // Validate
  inputValid = validate();
@@ -200,30 +233,42 @@
  dispatch('invalid', { event, input });
  return;
  }
- // Format: to lowercase (if enabled)
- input = allowUpperCase ? input : input.toLowerCase();
- // Append value to array
- value.push(input);
- value = value;
- chipValues.push({ val: input, id: Math.random() });
- chipValues = chipValues;
+ addChipCommon(input);
  /** @event {{ event: Event, chipIndex: number, chipValue: string }} add - Fires when a chip is added. */
  dispatch('add', { event, chipIndex: value.length - 1, chipValue: input });
  // Clear input value
  input = '';
  }
 
- function removeChip(event: SvelteEvent<MouseEvent, HTMLButtonElement>, chipIndex: number, chipValue: string): void {
+ function removeChipInternally(event: SvelteEvent<MouseEvent, HTMLButtonElement>, chipIndex: number, chipValue: string): void {
  if ($$restProps.disabled) return;
- // Remove value from array
- value.splice(chipIndex, 1);
- value = value;
- chipValues.splice(chipIndex, 1);
- chipValues = chipValues;
+ removeChipCommon(chipValue);
  /** @event {{ event: Event, chipIndex: number, chipValue: string }} remove - Fires when a chip is removed. */
  dispatch('remove', { event, chipIndex, chipValue });
  }
 
+ // Export functions
+ export function addChip(chip: string) {
+ // Validate
+ inputValid = validate(chip);
+ // When the onInvalid hook is present
+ if (inputValid === false) {
+ /** @event {{ input: string }} invalidManually - Fires when the manually added value is invalid. */
+ dispatch('invalidManually', { input: chip });
+ return;
+ }
+ addChipCommon(chip);
+ /** @event {{ chipIndex: number, chipValue: string }} addManually - Fires when a chip is added manually. */
+ dispatch('addManually', { chipIndex: value.length - 1, chipValue: chip });
+ }
+
+ export function removeChip(chip: string) {
+ if ($$restProps.disabled) return;
+ removeChipCommon(chip);
+ /** @event {{ chipValue: string }} removeManually - Fires when a chip is removed manually. */
+ dispatch('removeManually', { chipValue: chip });
+ }
+
  // State
  $: classesInvalid = inputValid === false ? invalid : '';
  // Reactive
@@ -241,15 +286,15 @@
 <div class="input-chip {classesBase}" class:opacity-50={$$restProps.disabled}>
  <!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
  <div class="h-0 overflow-hidden">
- <select bind:this={selectElement} bind:value {name} multiple {required} tabindex="-1">
+ <select bind:this={selectElement} bind:value {name} multiple {required} aria-label={label} tabindex="-1">
  <!-- NOTE: options are required! -->
  {#each value as option}<option value={option}>{option}</option>{/each}
  </select>
  </div>
  <!-- Chip Wrapper -->
  <div class="input-chip-wrapper {classesChipWrapper}">
  <!-- Input Field -->
- <form on:submit={addChip}>
+ <form on:submit={addChipInternally}>
  <input
  type="text"
  bind:value={input}
@@ -275,9 +320,7 @@
  <button
  type="button"
  class="chip {chips}"
- on:click={(e) => {
- removeChip(e, i, val);
- }}
+ on:click={(e) => removeChipInternally(e, i, val)}
  on:click
  on:keypress
  on:keydown

packages/skeleton/src/lib/components/TreeView/RecursiveTreeView.svelte

@@ -43,10 +43,6 @@
  export let spacing: CssClasses = 'space-y-1';
 
  // Props (children)
- /** Set open by default on load. */
- export let open = false;
- /** Set the tree disabled state */
- export let disabled = false;
  /** Provide classes to set the tree item padding styles. */
  export let padding: CssClasses = 'py-4 px-4';
  /** Provide classes to set the tree children indentation */
@@ -77,11 +73,9 @@
  export let labelledby = '';
 
  // Context API
- setContext('open', open);
  setContext('selection', selection);
  setContext('multiple', multiple);
  setContext('relational', relational);
- setContext('disabled', disabled);
  setContext('padding', padding);
  setContext('indent', indent);
  setContext('hover', hover);
@@ -114,14 +108,7 @@
  $: classesBase = `${width} ${spacing} ${$$props.class ?? ''}`;
 </script>
 
-<div
- class="tree {classesBase}"
- data-testid="tree"
- role="tree"
- aria-multiselectable={multiple}
- aria-label={labelledby}
- aria-disabled={disabled}
->
+<div class="tree {classesBase}" data-testid="tree" role="tree" aria-multiselectable={multiple} aria-label={labelledby}>
  {#if nodes && nodes.length > 0}
  <RecursiveTreeViewItem
  {nodes}

packages/skeleton/src/lib/utilities/CodeBlock/CodeBlock.svelte

@@ -94,7 +94,7 @@
  <!-- Language -->
  <span class="codeblock-language">{languageFormatter(language)}</span>
  <!-- Copy Button -->
- <button class="codeblock-btn {button}" on:click={onCopyClick} use:clipboard={code}>
+ <button type="button" class="codeblock-btn {button}" on:click={onCopyClick} use:clipboard={code}>
  {!copyState ? buttonLabel : buttonCopied}
  </button>
  </header>

sites/skeleton.dev/src/routes/(inner)/components/input-chips/+page.svelte

@@ -30,6 +30,8 @@
  let emails = ['[email protected]', '[email protected]', '[email protected]'];
  let musicalGenres = ['rock', 'r&b', 'pop'];
  let musicalGenresWhitelist = ['rock', 'pop', 'hip-hop', 'metal', 'techno', 'r&b'];
+ let manualList: string[] = [];
+ let manualInputChip: InputChip;
  const toastStore = getToastStore();
 
  function isValidEmail(value: string): boolean {
@@ -161,6 +163,50 @@ function onInvalidHandler(event: any): void {
  </svelte:fragment>
  </DocsPreview>
  </section>
+ <!-- Add/Remove Chips Programatically -->
+ <section class="space-y-4">
+ <h2 class="h2">Add / Remove Chips</h2>
+ <p>
+ To add or remove chips programatically, use the exported functions <code class="code">addChip</code> and
+ <code class="code">removeChip</code> after binding the ChipInput.
+ </p>
+ <DocsPreview background="neutral">
+ <svelte:fragment slot="preview">
+ <InputChip
+ bind:this={manualInputChip}
+ bind:value={manualList}
+ name="chips-example-programatic"
+ placeholder="Enter number..."
+ chips="variant-filled-tertiary"
+ />
+ </svelte:fragment>
+ <svelte:fragment slot="footer">
+ <div class="text-center">
+ <button type="button" class="btn variant-filled" on:click={() => manualInputChip.removeChip(manualList[-1])}
+ >Remove LastChip</button
+ >
+ <button
+ type="button"
+ class="btn variant-filled"
+ on:click={() => manualInputChip.addChip((Math.floor(Math.random() * 10000) + 1).toString())}>Add Random Number</button
+ >
+ </div>
+ </svelte:fragment>
+ <svelte:fragment slot="source">
+ <CodeBlock
+ language="ts"
+ code={`
+let inputChip: InputChip;
+// add chip manually
+inputChip.addChip('chipValue');
+// remove chip manually
+inputChip.removeChip('chipValue');
+ `}
+ />
+ <CodeBlock language="html" code={`<InputChip ... bind:this={inputChip} />`} />
+ </svelte:fragment>
+ </DocsPreview>
+ </section>
  <!-- Additional Settings -->
  <section class="space-y-4">
  <h2 class="h2">Additional Settings</h2>

sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte

@@ -135,7 +135,7 @@
  <svelte:fragment slot="source">
  <CodeBlock
  language="html"
- code={`<ProgressRadial ... stroke={${strokeProps.value}} meter="stroke-primary-500" track="stroke-primary-500/30" strokeLinecap={${strokeLinecap}} />`}
+ code={`<ProgressRadial ... stroke={${strokeProps.value}} meter="stroke-primary-500" track="stroke-primary-500/30" strokeLinecap="${strokeLinecap}" />`}
  />
  </svelte:fragment>
  </DocsPreview>

sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte

@@ -587,7 +587,7 @@ const popupState: PopupSettings = {
  <span class="capitalize">{comboboxValue ?? 'Trigger'}</span>
  <i class="fa-solid fa-caret-down opacity-50" />
  </button>
- <div class="card w-48 shadow-xl py-2" data-popup="popupCombobox">
+ <div class="card w-48 shadow-xl py-2 overflow-hidden" data-popup="popupCombobox">
  <ListBox rounded="rounded-none">
  <ListBoxItem bind:group={comboboxValue} name="medium" value="books">Books</ListBoxItem>
  <ListBoxItem bind:group={comboboxValue} name="medium" value="movies">Movies</ListBoxItem>