@sveltia/ui 0.12.4 → 0.13.0

package/package/components/checkbox/checkbox-group.svelte

@@ -46,6 +46,7 @@
 .checkbox-group.horizontal {
   gap: 8px;
   align-items: center;
+  flex-wrap: wrap;
 }
 .checkbox-group.vertical {
   gap: 4px;

package/package/components/radio/radio-group.svelte

@@ -79,6 +79,7 @@
 .radio-group.horizontal {
   gap: 8px;
   align-items: center;
+  flex-wrap: wrap;
 }
 .radio-group.vertical {
   gap: 4px;

package/package/components/select/select-tags.svelte

@@ -0,0 +1,137 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import Option from '../listbox/option.svelte';
+  import Select from './select.svelte';
+
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Whether to make the widget read-only. An alias of the `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Whether to mark the widget required. An alias of the `aria-required` attribute.
+   * @type {boolean}
+   */
+  export let required = false;
+  /**
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
+   * @type {boolean}
+   */
+  export let invalid = false;
+  /**
+   * Available options.
+   * @type {{ label: string, value: string, searchValue?: string }[]}
+   */
+  export let options;
+  /**
+   * Selected option values.
+   * @type {string[]}
+   */
+  export let values = [];
+  /**
+   * Maximum number of selectable options.
+   * @type {number | undefined}
+   */
+  export let max = undefined;
+
+  /**
+   * @type {string | undefined}
+   */
+  let selectedValue = undefined;
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div
+  role="none"
+  class="sui select-tags {className}"
+  class:disabled={disabled || readonly}
+  hidden={hidden || undefined}
+>
+  {#each values as value}
+    {@const option = options.find((o) => o.value === value)}
+    {#if option}
+      <span role="none">
+        {option.label}
+        <Button
+          iconic
+          size="small"
+          disabled={disabled || readonly}
+          aria-label={$_('remove_x', { values: { name: option.label } })}
+          on:click={() => {
+            values = values.filter((v) => v !== value);
+            dispatch('RemoveValue', { value });
+          }}
+        >
+          <Icon slot="start-icon" name="close" />
+        </Button>
+      </span>
+    {/if}
+  {/each}
+  {#if (typeof max !== 'number' || values.length < max) && values.length < options.length}
+    <Select
+      disabled={disabled || readonly}
+      {readonly}
+      {required}
+      {invalid}
+      {...$$restProps}
+      bind:value={selectedValue}
+      on:change={() => {
+        if (selectedValue) {
+          values = [...values, selectedValue];
+          dispatch('AddValue', { value: selectedValue });
+          // Reset the combobox
+          selectedValue = undefined;
+        }
+      }}
+    >
+      {#each options as { label, value, searchValue } (value)}
+        {#if !values.includes(value)}
+          <Option {label} {value} {searchValue} />
+        {/if}
+      {/each}
+    </Select>
+  {/if}
+</div>
+
+<style>.select-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.select-tags.disabled {
+  pointer-events: none;
+}
+.select-tags.disabled > * {
+  opacity: 0.5;
+}
+.select-tags span {
+  display: inline-flex;
+  align-items: center;
+  margin: var(--sui-focus-ring-width);
+  padding: 0 0 0 8px;
+  border-radius: var(--sui-control-medium-border-radius);
+  background-color: var(--sui-secondary-background-color);
+}
+.select-tags span :global(.icon) {
+  font-size: var(--sui-font-size-large);
+}</style>

package/package/components/select/select-tags.svelte.d.ts

@@ -0,0 +1,55 @@
+/** @typedef {typeof __propDef.props}  SelectTagsProps */
+/** @typedef {typeof __propDef.events}  SelectTagsEvents */
+/** @typedef {typeof __propDef.slots}  SelectTagsSlots */
+export default class SelectTags extends SvelteComponent<{
+    [x: string]: any;
+    options: {
+        label: string;
+        value: string;
+        searchValue?: string | undefined;
+    }[];
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    values?: string[] | undefined;
+    required?: boolean | undefined;
+    max?: number | undefined;
+}, {
+    RemoveValue: CustomEvent<any>;
+    AddValue: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SelectTagsProps = typeof __propDef.props;
+export type SelectTagsEvents = typeof __propDef.events;
+export type SelectTagsSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        options: {
+            label: string;
+            value: string;
+            searchValue?: string;
+        }[];
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        hidden?: boolean | undefined;
+        readonly?: boolean | undefined;
+        values?: string[] | undefined;
+        required?: boolean | undefined;
+        max?: number | undefined;
+    };
+    events: {
+        RemoveValue: CustomEvent<any>;
+        AddValue: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/slider/slider.svelte.d.ts

@@ -18,8 +18,8 @@ export default class Slider extends SvelteComponent<{
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     values?: [number, number] | undefined;
-    min?: number | undefined;
     max?: number | undefined;
+    min?: number | undefined;
     sliderLabel?: string | undefined;
     sliderLabels?: [string, string] | undefined;
     step?: number | undefined;
@@ -44,8 +44,8 @@ declare const __propDef: {
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         values?: [number, number] | undefined;
-        min?: number | undefined;
         max?: number | undefined;
+        min?: number | undefined;
         sliderLabel?: string | undefined;
         sliderLabels?: [string, string] | undefined;
         step?: number | undefined;

package/package/components/text-field/number-input.svelte.d.ts

@@ -16,8 +16,8 @@ export default class NumberInput extends SvelteComponent<{
     readonly?: boolean | undefined;
     flex?: boolean | undefined;
     required?: boolean | undefined;
-    min?: number | undefined;
     max?: number | undefined;
+    min?: number | undefined;
     step?: number | undefined;
 }, {
     keydown: KeyboardEvent;
@@ -51,8 +51,8 @@ declare const __propDef: {
         readonly?: boolean | undefined;
         flex?: boolean | undefined;
         required?: boolean | undefined;
-        min?: number | undefined;
         max?: number | undefined;
+        min?: number | undefined;
         step?: number | undefined;
     };
     events: {

package/package/index.d.ts

@@ -40,6 +40,7 @@ export { default as Menu } from "./components/menu/menu.svelte";
 export { default as RadioGroup } from "./components/radio/radio-group.svelte";
 export { default as Radio } from "./components/radio/radio.svelte";
 export { default as Combobox } from "./components/select/combobox.svelte";
+export { default as SelectTags } from "./components/select/select-tags.svelte";
 export { default as Select } from "./components/select/select.svelte";
 export { default as Slider } from "./components/slider/slider.svelte";
 export { default as Switch } from "./components/switch/switch.svelte";

package/package/index.js

@@ -72,6 +72,7 @@ export { default as Menu } from './components/menu/menu.svelte';
 export { default as RadioGroup } from './components/radio/radio-group.svelte';
 export { default as Radio } from './components/radio/radio.svelte';
 export { default as Combobox } from './components/select/combobox.svelte';
+export { default as SelectTags } from './components/select/select-tags.svelte';
 export { default as Select } from './components/select/select.svelte';
 export { default as Slider } from './components/slider/slider.svelte';
 export { default as Switch } from './components/switch/switch.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.12.4",
+  "version": "0.13.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -257,6 +257,11 @@
       "svelte": "./package/components/select/combobox.svelte",
       "default": "./package/components/select/combobox.svelte"
     },
+    "./components/select/select-tags.svelte": {
+      "types": "./package/components/select/select-tags.svelte.d.ts",
+      "svelte": "./package/components/select/select-tags.svelte",
+      "default": "./package/components/select/select-tags.svelte"
+    },
     "./components/select/select.svelte": {
       "types": "./package/components/select/select.svelte.d.ts",
       "svelte": "./package/components/select/select.svelte",
@@ -554,6 +559,9 @@
       "components/select/combobox.svelte": [
         "./package/components/select/combobox.svelte.d.ts"
       ],
+      "components/select/select-tags.svelte": [
+        "./package/components/select/select-tags.svelte.d.ts"
+      ],
       "components/select/select.svelte": [
         "./package/components/select/select.svelte.d.ts"
       ],