@sveltia/ui 0.1.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Kohei Yoshino.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package/components/composite/calendar.svelte

@@ -0,0 +1,240 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from '../core/button.svelte';
+  import Icon from '../core/icon.svelte';
+  import MenuButton from '../core/menu-button.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">
+    <MenuButton
+      class="ternary"
+      label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
+      iconName="arrow_drop_down"
+    >
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div 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>
+    </MenuButton>
+    <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.calendar.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;
+  font-size: 14px;
+}
+[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: 12px;
+}
+.grid div.weekday {
+  color: var(--secondary-foreground-color);
+}
+.grid div.other-month {
+  color: var(--ternary-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: 12px;
+}
+
+.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?: "vertical" | "horizontal";
+    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,179 @@
+<!--
+  @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 TextInput from '../core/text-input.svelte';
+  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();
+  let comboboxElement;
+  /** @type {(TextInput| undefined)} */
+  let inputComponent;
+  /** @type {(Popup| undefined)} */
+  let popupComponent;
+  let open = writable(false);
+
+  $: {
+    dispatch('change', { target: inputComponent?.element, value });
+  }
+
+  $: {
+    if (readOnly && value && popupComponent?.element) {
+      window.requestAnimationFrame(() => {
+        label =
+          popupComponent?.element.querySelector('[aria-selected="true"] .label')?.textContent || '';
+      });
+    }
+  }
+</script>
+
+<div class="sui combobox {className}">
+  {#if readOnly}
+    <!-- svelte-ignore a11y-role-has-required-aria-props -->
+    <div
+      class:selected={value !== undefined}
+      role="combobox"
+      aria-disabled={disabled ? true : undefined}
+      aria-haspopup="listbox"
+      aria-activedescendant="selected-option"
+      {...$$restProps}
+      bind:this={comboboxElement}
+    >
+      {value !== undefined ? label || value : $_('sui.combobox.select_an_option')}
+    </div>
+  {:else}
+    <TextInput
+      role="combobox"
+      {value}
+      {disabled}
+      aria-haspopup="listbox"
+      aria-activedescendant="selected-option"
+      {...$$restProps}
+      bind:this={inputComponent}
+    />
+  {/if}
+  <Button
+    {disabled}
+    class="ternary iconic"
+    iconName="expand_more"
+    iconLabel={$open ? $_('sui._.collapse') : $_('sui._.expand')}
+    on:click={(event) => {
+      event.stopPropagation();
+
+      if (!disabled) {
+        open.set(!$open);
+      }
+    }}
+  />
+</div>
+<Popup
+  anchor={comboboxElement || inputComponent?.element}
+  {position}
+  bind:open
+  bind:this={popupComponent}
+>
+  <Listbox
+    on:click={({ target }) => {
+      if (target.matches('[role="option"]')) {
+        value = target.value;
+      }
+    }}
+  >
+    <slot />
+  </Listbox>
+</Popup>
+
+<style>.combobox {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.combobox :global(.icon) {
+  font-size: 20px;
+  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;
+}
+.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);
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+.combobox div[role=combobox]:not(.selected) {
+  font-style: italic;
+}
+.combobox div[role=combobox][aria-disabled=true] {
+  background-color: var(--disabled-background-color);
+  opacity: 0.4;
+  cursor: default;
+}
+.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;
+    class?: string;
+    label?: string;
+    disabled?: boolean;
+    value?: string;
+    position?: any;
+    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;
+        class?: string;
+        label?: string;
+        disabled?: boolean;
+        value?: (string | undefined);
+        position?: any;
+        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<{
+    class?: string;
+    label?: 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: {
+        class?: string;
+        label?: string;
+        expanded?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};