@sveltia/ui 0.2.0 → 0.2.1

package/package/components/composite/calendar.svelte

@@ -0,0 +1,239 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from '../core/button.svelte';
+  import Icon from '../core/icon.svelte';
+  import Separator from '../core/separator.svelte';
+  import Spacer from '../core/spacer.svelte';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  const dayList = [];
+  const weeks = [];
+  const now = new Date();
+
+  $: date = value ? new Date(value) : now;
+  $: firstDayOfMonth = new Date(date.getUTCFullYear(), date.getUTCMonth(), 1);
+  $: firstDay = new Date(firstDayOfMonth);
+
+  const getWeeks = () => {
+    const cursor = new Date(firstDay);
+
+    // Start from Sunday
+    cursor.setDate(1 - cursor.getUTCDay());
+
+    for (let i = 0; i < 42; i += 1) {
+      const week = Math.floor(i / 7);
+
+      dayList[i] = { day: new Date(cursor) };
+      weeks[week] ||= [];
+      weeks[week][cursor.getUTCDay() % 7] = { day: new Date(cursor) };
+      cursor.setUTCDate(cursor.getUTCDate() + 1);
+    }
+  };
+
+  $: {
+    if (firstDay) {
+      getWeeks();
+    }
+  }
+</script>
+
+<div role="group">
+  <input type="hidden" bind:value />
+  <div class="header">
+    <Button
+      class="tertiary"
+      label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
+      aria-haspopup="dialog"
+    >
+      <Icon slot="end-icon" name="arrow_drop_down" />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div slot="popup" class="popup-inner" on:click|stopPropagation>
+        <div role="group" aria-label={$_('sui.calendar.year')}>
+          <div class="header">
+            <Button
+              on:click={() => {
+                //
+              }}
+            >
+              <Icon name="chevron_left" label={$_('sui.calendar.previous_decade')} />
+            </Button>
+            <Button
+              on:click={() => {
+                //
+              }}
+            >
+              <Icon name="chevron_right" label={$_('sui.calendar.next_decade')} />
+            </Button>
+          </div>
+          <div class="grid">
+            {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as year}
+              <div>
+                <Button>202{year}</Button>
+              </div>
+            {/each}
+          </div>
+        </div>
+        <Separator orientation="vertical" />
+        <div role="group" aria-label={$_('sui.calendar.month')}>
+          <div class="grid">
+            {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as month}
+              <div>
+                <Button>
+                  {new Date(date.getUTCFullYear(), month, 10).toLocaleDateString('en', {
+                    month: 'short',
+                  })}
+                </Button>
+              </div>
+            {/each}
+          </div>
+        </div>
+      </div>
+    </Button>
+    <Button
+      on:click={() => {
+        firstDay.setUTCMonth(firstDay.getUTCMonth() - 1);
+        firstDay = firstDay;
+      }}
+    >
+      <Icon name="chevron_left" label={$_('sui.calendar.previous_month')} />
+    </Button>
+    <Button
+      on:click={() => {
+        firstDay.setUTCMonth(firstDay.getUTCMonth() + 1);
+        firstDay = firstDay;
+      }}
+    >
+      <Icon name="chevron_right" label={$_('sui.calendar.next_month')} />
+    </Button>
+  </div>
+  <div class="grid" role="listbox">
+    {#each dayList.slice(0, 7) as { day }}
+      <div class="weekday" role="presentation">
+        {day.toLocaleDateString('en', { weekday: 'narrow' })}
+      </div>
+    {/each}
+    {#each dayList as { day }}
+      <div
+        class:other-month={day.getUTCMonth() !== firstDay.getUTCMonth()}
+        class:today={day.getFullYear() === now.getFullYear() &&
+          day.getMonth() === now.getMonth() &&
+          day.getDate() === now.getDate()}
+      >
+        <Button
+          role="option"
+          aria-selected={false}
+          on:click={() => {
+            [value] = day.toJSON().split('T');
+          }}
+        >
+          {day.getUTCDate()}
+        </Button>
+      </div>
+    {/each}
+  </div>
+  <div class="footer">
+    <Button
+      on:click={() => {
+        value = '';
+      }}
+    >
+      {$_('sui._.clear')}
+    </Button>
+    <Spacer flex={true} />
+    <Button
+      on:click={() => {
+        [value] = now.toJSON().split('T');
+      }}
+    >
+      {$_('sui.calendar.today')}
+    </Button>
+  </div>
+</div>
+
+<style>[role=group] {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+[role=group] > * {
+  flex: none;
+}
+
+.header,
+.footer {
+  display: flex;
+  gap: 8px;
+  height: 24px;
+  align-items: center;
+}
+.header :global(button.secondary),
+.footer :global(button.secondary) {
+  width: 100px;
+  flex: auto;
+}
+
+.grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fill, 24px);
+  gap: 2px;
+  width: 180px;
+}
+.grid div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  font-size: var(--font-size--small);
+}
+.grid div.weekday {
+  color: var(--secondary-foreground-color);
+}
+.grid div.other-month {
+  color: var(--tertiary-foreground-color);
+}
+.grid div.today :global(button) {
+  color: var(--highlight-foreground-color);
+  background-color: var(--primary-accent-color);
+}
+.grid div :global(button) {
+  justify-content: center;
+  width: 100%;
+  height: 24px;
+  border-radius: 50%;
+}
+.grid div :global(button):hover {
+  background-color: var(--highlight-background-color);
+}
+.grid div :global(button):focus {
+  border-width: 1px;
+  border-color: var(--primary-accent-color-lighter);
+}
+
+.footer :global(button) {
+  font-size: var(--font-size--small);
+}
+
+.popup-inner {
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+}
+.popup-inner [role=group] {
+  gap: 0;
+}
+.popup-inner [role=group] .header {
+  justify-content: center;
+}
+.popup-inner .grid {
+  grid-template-columns: repeat(auto-fill, 48px);
+  width: 98px;
+}
+.popup-inner .grid > div {
+  width: 48px;
+}</style>

package/package/components/composite/calendar.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  CalendarProps */
+/** @typedef {typeof __propDef.events}  CalendarEvents */
+/** @typedef {typeof __propDef.slots}  CalendarSlots */
+export default class Calendar extends SvelteComponentTyped<{
+    value?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CalendarProps = typeof __propDef.props;
+export type CalendarEvents = typeof __propDef.events;
+export type CalendarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: (string | undefined);
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,43 @@
+<!--
+  @component
+  The container of `<Checkbox>`es.
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  // eslint-disable-next-line padding-line-between-statements
+  let className = '';
+
+  export { className as class };
+
+  /**
+   * The `aria-label` attribute on the button element.
+   * @type {String}
+   */
+  export let ariaLabel = '';
+
+  /** @type {('horizontal'|'vertical')} */
+  export let orientation = 'horizontal';
+</script>
+
+<div
+  class="sui checkbox-group {className} {orientation}"
+  role="group"
+  aria-label={ariaLabel}
+  {...$$restProps}
+>
+  <slot />
+</div>
+
+<style>.checkbox-group {
+  display: inline-flex;
+  gap: 16px;
+}
+.checkbox-group.horizontal {
+  align-items: center;
+}
+.checkbox-group.vertical {
+  flex-direction: column;
+}</style>

package/package/components/composite/checkbox-group.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  CheckboxGroupProps */
+/** @typedef {typeof __propDef.events}  CheckboxGroupEvents */
+/** @typedef {typeof __propDef.slots}  CheckboxGroupSlots */
+/** The container of `<Checkbox>`es. */
+export default class CheckboxGroup extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    orientation?: "horizontal" | "vertical";
+    ariaLabel?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CheckboxGroupProps = typeof __propDef.props;
+export type CheckboxGroupEvents = typeof __propDef.events;
+export type CheckboxGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        orientation?: ('horizontal' | 'vertical');
+        ariaLabel?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/combobox.svelte

@@ -0,0 +1,210 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#combobox
+  @see https://w3c.github.io/aria-practices/#combobox
+-->
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import { _ } from 'svelte-i18n';
+  import { writable } from 'svelte/store';
+  import Button from '../core/button.svelte';
+  import Icon from '../core/icon.svelte';
+  import TextInput from '../core/text-input.svelte';
+  import { getRandomId } from '../helpers/util';
+  import Popup from '../util/popup.svelte';
+  import Listbox from './listbox.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /**
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
+   */
+  export let position = 'bottom-left';
+
+  /**
+   * Whether the textbox is editable.
+   */
+  export let readOnly = false;
+
+  export let disabled = false;
+
+  export let label = '';
+
+  /**
+   * Selected option’s value.
+   * @type {(String|undefined)}
+   */
+  export let value = undefined;
+
+  const dispatch = createEventDispatcher();
+  const id = getRandomId('combobox');
+  let comboboxElement;
+  /** @type {(TextInput| undefined)} */
+  let inputComponent;
+  /** @type {(Popup| undefined)} */
+  let popupComponent;
+  let isPopupOpen = writable(false);
+</script>
+
+<div class="sui combobox {className}">
+  {#if readOnly}
+    <div
+      class:selected={value !== undefined}
+      role="combobox"
+      {id}
+      tabindex={disabled ? -1 : 0}
+      aria-controls="{id}-popup"
+      aria-expanded={$isPopupOpen}
+      aria-disabled={disabled ? true : undefined}
+      aria-haspopup="listbox"
+      aria-activedescendant="selected-option"
+      {...$$restProps}
+      bind:this={comboboxElement}
+    >
+      <div class="label">
+        {value !== undefined ? label || value : $_('sui.combobox.select_an_option')}
+      </div>
+    </div>
+  {:else}
+    <TextInput
+      role="combobox"
+      {id}
+      {value}
+      {disabled}
+      aria-controls="{id}-popup"
+      aria-expanded={$isPopupOpen}
+      aria-disabled={disabled ? true : undefined}
+      aria-haspopup="listbox"
+      aria-activedescendant="selected-option"
+      {...$$restProps}
+      bind:this={inputComponent}
+    />
+  {/if}
+  <Button
+    {disabled}
+    tabindex={readOnly || disabled ? -1 : 0}
+    aria-controls="{id}-popup"
+    aria-expanded={$isPopupOpen}
+    aria-disabled={disabled ? true : undefined}
+    class="tertiary iconic"
+    on:click={(event) => {
+      event.stopPropagation();
+
+      if (!disabled) {
+        $isPopupOpen = !$isPopupOpen;
+      }
+    }}
+  >
+    <Icon
+      slot="start-icon"
+      name="expand_more"
+      label={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
+    />
+  </Button>
+</div>
+<Popup
+  id="{id}-popup"
+  anchor={comboboxElement || inputComponent?.element}
+  {position}
+  bind:open={isPopupOpen}
+  bind:this={popupComponent}
+>
+  <Listbox
+    on:click={({ target }) => {
+      if (target.matches('[role="option"]')) {
+        // @todo support more types
+        value = target.dataset.type === 'number' ? Number(target.value) : target.value;
+        label = target.querySelector('.label')?.textContent || target.value;
+        dispatch('change', { target: inputComponent?.element, value });
+      }
+    }}
+  >
+    <slot />
+  </Listbox>
+</Popup>
+
+<style>.combobox {
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-width: var(--combobox-min-width, 160px);
+}
+.combobox :global(.icon) {
+  font-size: var(--font-size--xx-large);
+  opacity: 0.5;
+}
+.combobox > :global(.icon) {
+  position: absolute;
+  inset: 8px auto auto 8px;
+  z-index: 1;
+}
+.combobox > :global(button) {
+  position: absolute;
+  inset: 0 0 auto auto;
+  z-index: 1;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-width: 0;
+  background-color: transparent;
+}
+.combobox > :global(button[tabindex="-1"]) {
+  pointer-events: none;
+}
+.combobox div[role=combobox] {
+  display: flex;
+  align-items: center;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  border-radius: 4px;
+  padding: 0 32px 0 8px;
+  width: 100%;
+  height: var(--input--medium--height);
+  background-color: var(--disabled-background-color);
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  transition: all 200ms;
+}
+.combobox div[role=combobox]:not(.selected) {
+  font-style: italic;
+}
+.combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
+  background-color: var(--highlight-background-color);
+}
+.combobox div[role=combobox][aria-disabled=true] {
+  background-color: var(--disabled-background-color);
+  opacity: 0.4;
+  cursor: default;
+}
+.combobox div[role=combobox] .label {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.combobox :global(input) {
+  padding: 0 32px 0 8px;
+  width: 100%;
+}
+.combobox + :global([role="listbox"]) {
+  position: fixed;
+  z-index: 100;
+  border-radius: 4px;
+  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  overflow: auto;
+  background-color: var(--secondary-background-color);
+  backdrop-filter: blur(16px);
+  transition: opacity 100ms 100ms;
+}
+.combobox + :global([role="listbox"]:not(.open)) {
+  opacity: 0;
+  pointer-events: none;
+}</style>

package/package/components/composite/combobox.svelte.d.ts

@@ -0,0 +1,47 @@
+/** @typedef {typeof __propDef.props}  ComboboxProps */
+/** @typedef {typeof __propDef.events}  ComboboxEvents */
+/** @typedef {typeof __propDef.slots}  ComboboxSlots */
+/**
+ * @see https://w3c.github.io/aria/#combobox
+ * @see https://w3c.github.io/aria-practices/#combobox
+ */
+export default class Combobox extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    position?: any;
+    class?: string;
+    disabled?: boolean;
+    value?: string;
+    readOnly?: boolean;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ComboboxProps = typeof __propDef.props;
+export type ComboboxEvents = typeof __propDef.events;
+export type ComboboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string;
+        position?: any;
+        class?: string;
+        disabled?: boolean;
+        value?: (string | undefined);
+        readOnly?: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/composite/disclosure.svelte

@@ -0,0 +1,60 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria-practices/#disclosure
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
+-->
+<script>
+  import Button from '../core/button.svelte';
+  import Icon from '../core/icon.svelte';
+  import { getRandomId } from '../helpers/util';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let label = '';
+
+  export let expanded = false;
+
+  const id = getRandomId('disclosure');
+</script>
+
+<div class="sui disclosure {className}" {id} role="group" aria-labelledby="{id}-header">
+  <Button
+    class="header"
+    id="{id}-header"
+    aria-controls="{id}-content"
+    aria-expanded={expanded}
+    on:click={() => {
+      expanded = !expanded;
+    }}
+  >
+    <Icon name="expand_more" />
+    {label}
+  </Button>
+  <div class="content" id="{id}-content" hidden={!expanded ? 'hidden' : undefined}>
+    <slot />
+  </div>
+</div>
+
+<style>.disclosure :global(button) {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.disclosure :global(button .icon) {
+  transition: all 200ms;
+}
+.disclosure :global(button[aria-expanded="false"] .icon) {
+  transform: rotate(-90deg);
+}
+
+.content[hidden] {
+  display: block;
+  overflow: hidden;
+  height: 0;
+}</style>

package/package/components/composite/disclosure.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  DisclosureProps */
+/** @typedef {typeof __propDef.events}  DisclosureEvents */
+/** @typedef {typeof __propDef.slots}  DisclosureSlots */
+/**
+ * @see https://w3c.github.io/aria-practices/#disclosure
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
+ */
+export default class Disclosure extends SvelteComponentTyped<{
+    label?: string;
+    class?: string;
+    expanded?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DisclosureProps = typeof __propDef.props;
+export type DisclosureEvents = typeof __propDef.events;
+export type DisclosureSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string;
+        class?: string;
+        expanded?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};