@hanzo/ui 0.5.24 → 0.6.16

package/src/components/CodeInput.svelte

@@ -0,0 +1,86 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  export let value: string | undefined = undefined
+  export let id: string | undefined = undefined
+  export let name: string | undefined = undefined
+  export let size: 'small' | 'medium' = 'small'
+  export let kind: 'primary' | 'secondary' = 'primary'
+</script>
+
+<div class="container {kind}">
+  <input
+    class={size}
+    type="text"
+    {id}
+    {name}
+    bind:value
+    on:blur
+    on:change
+    on:keyup
+    on:input
+    inputmode="numeric"
+    autocomplete="off"
+    placeholder=""
+    spellcheck="false"
+    autocapitalize="on"
+  />
+</div>
+
+<style lang="scss">
+  .container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    background-color: var(--theme-button-default);
+    border: 1px solid var(--theme-button-border);
+
+    &.primary {
+      caret-color: var(--theme-content-color);
+    }
+
+    &.secondary {
+      caret-color: var(--theme-caret-color);
+    }
+
+    &:focus-within {
+      border-color: var(--theme-list-divider-color);
+      background-color: var(--theme-button-focused);
+    }
+
+    input {
+      text-align: center;
+      margin: 0;
+      padding: 0;
+      background-color: transparent;
+      border: none;
+      border-radius: 0.75rem;
+
+      &.small {
+        width: 1.5rem;
+        height: 2rem;
+        font-size: 1rem;
+      }
+
+      &.medium {
+        width: 3.125rem;
+        height: 4.375rem;
+        font-size: 2rem;
+      }
+    }
+  }
+</style>

package/src/components/ColorPopup.svelte

@@ -0,0 +1,119 @@
+<!--
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import { deviceOptionsStore, resizeObserver, themeStore } from '..'
+  import { getPlatformColorDef } from '../colors'
+  import EditWithIcon from './EditWithIcon.svelte'
+  import Icon from './Icon.svelte'
+  import ListView from './ListView.svelte'
+  import IconCheck from './icons/Check.svelte'
+  import IconSearch from './icons/Search.svelte'
+
+  export let placeholder: IntlString | undefined = undefined
+  export let placeholderParam: any | undefined = undefined
+  export let searchable: boolean = false
+  export let selected: number | string | undefined = undefined
+  export let value: Array<{ id: number | string, color: number, label: string }>
+
+  let search: string = ''
+
+  const dispatch = createEventDispatcher()
+
+  $: objects = value.filter((el) => el.label.toLowerCase().includes(search.toLowerCase()))
+
+  let selection = 0
+  let list: ListView
+
+  async function handleSelection (_: Event | undefined, selection: number): Promise<void> {
+    const space = objects[selection]
+    dispatch('close', space)
+  }
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'ArrowUp') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection - 1)
+    }
+    if (key.code === 'ArrowDown') {
+      key.stopPropagation()
+      key.preventDefault()
+      list.select(selection + 1)
+    }
+    if (key.code === 'Enter') {
+      key.preventDefault()
+      key.stopPropagation()
+      handleSelection(key, selection)
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="selectPopup"
+  on:keydown={onKeydown}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
+  {#if searchable}
+    <div class="header">
+      <EditWithIcon
+        icon={IconSearch}
+        size={'large'}
+        width={'100%'}
+        autoFocus={!$deviceOptionsStore.isMobile}
+        bind:value={search}
+        {placeholder}
+        {placeholderParam}
+        on:change
+      />
+    </div>
+  {/if}
+  <div class="scroll">
+    <div class="box">
+      <ListView
+        bind:this={list}
+        count={objects.length}
+        bind:selection
+        on:click={async (evt) => {
+          await handleSelection(evt, evt.detail)
+        }}
+      >
+        <svelte:fragment slot="item" let:item>
+          {@const itemValue = objects[item]}
+          {@const color = getPlatformColorDef(itemValue.color, $themeStore.dark)}
+          <button
+            class="menu-item withList w-full"
+            on:click={() => {
+              dispatch('close', itemValue)
+            }}
+          >
+            <div class="color" style:background={color.color} />
+            <span class="label" style:color={color.title}>{itemValue.label}</span>
+            <div class="check">
+              {#if itemValue.id === selected}
+                <Icon icon={IconCheck} size={'small'} />
+              {/if}
+            </div>
+          </button>
+        </svelte:fragment>
+      </ListView>
+    </div>
+  </div>
+  <div class="menu-space" />
+</div>

package/src/components/Component.svelte

@@ -0,0 +1,152 @@
+<!--
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { getResourceP } from '@hanzo/platform'
+  import { deepEqual } from 'fast-equals'
+  import { SvelteComponent } from 'svelte'
+  import type { AnyComponent, AnySvelteComponent } from '../types'
+  import ErrorPresenter from './ErrorPresenter.svelte'
+  import Loading from './Loading.svelte'
+  import ErrorBoundary from './internal/ErrorBoundary'
+
+  // Reference to rendered component instance
+  export let innerRef: SvelteComponent | undefined = undefined
+  export let is: AnyComponent | AnySvelteComponent
+  export let props = {}
+  export let shrink: boolean = false
+  export let showLoading = true
+  export let inline: boolean = false
+  export let disabled: boolean = false
+
+  let _is: AnyComponent | AnySvelteComponent = is
+  let _props: any = props
+
+  // See https://github.com/sveltejs/svelte/issues/4068
+  // When passing undefined prop value, then Svelte uses default value only first time when
+  // component is instantiated. On the next update the value will be set to undefined.
+  // Here we filter out undefined values from props on updates to ensure we don't overwrite them.
+  const filterDefaultUndefined = (pnew: any, pold: any): any =>
+    pnew != null
+      ? Object.fromEntries(Object.entries(pnew).filter(([k, v]) => v !== undefined || pold?.[k] !== undefined))
+      : pnew
+
+  $: if (!deepEqual(_is, is)) {
+    _is = is
+  }
+  $: {
+    const p = filterDefaultUndefined(props, _props)
+    if (!deepEqual(_props, p)) {
+      _props = p
+    }
+  }
+
+  let Ctor: any
+  let loading = false
+  let error: any
+  let counter = 0
+
+  function updateComponent (_is: AnyComponent | AnySvelteComponent): void {
+    const current = ++counter
+    if (_is == null) {
+      Ctor = undefined
+      error = new Error('is not defined')
+      return
+    }
+    if (typeof _is === 'string') {
+      const component = getResourceP<any>(_is)
+      if (component instanceof Promise) {
+        loading = true
+        Ctor = undefined
+        void component
+          .then((res) => {
+            if (current === counter) {
+              Ctor = res
+              _props = filterDefaultUndefined(props, props)
+              loading = false
+            }
+          })
+          .catch((err) => {
+            if (current === counter) {
+              error = err
+            }
+          })
+      } else {
+        loading = false
+        Ctor = component
+        _props = filterDefaultUndefined(props, props)
+      }
+    } else {
+      Ctor = _is
+      _props = filterDefaultUndefined(props, props)
+    }
+  }
+
+  $: updateComponent(_is)
+</script>
+
+{#if _is != null}
+  {#if loading}
+    {#if showLoading}
+      <Loading {shrink} />
+    {/if}
+  {:else if Ctor != null}
+    <ErrorBoundary bind:error>
+      {#if $$slots.default !== undefined}
+        <svelte:component
+          this={Ctor}
+          bind:this={innerRef}
+          {..._props}
+          {inline}
+          {disabled}
+          on:change
+          on:close
+          on:open
+          on:click
+          on:delete
+          on:action
+          on:valid
+          on:validate
+          on:submit
+          on:select
+        >
+          <slot />
+        </svelte:component>
+      {:else}
+        <svelte:component
+          this={Ctor}
+          bind:this={innerRef}
+          {..._props}
+          {inline}
+          {disabled}
+          on:change
+          on:close
+          on:open
+          on:click
+          on:delete
+          on:action
+          on:valid
+          on:validate
+          on:submit
+          on:select
+        />
+      {/if}
+    </ErrorBoundary>
+  {/if}
+{/if}
+{#if error != null}
+  <pre style="max-height: 140px; overflow: auto;">
+    <ErrorPresenter {error} />
+  </pre>
+{/if}

package/src/components/Dialog.svelte

@@ -0,0 +1,105 @@
+<!--
+// Copyright © 2020, 2021 Hanzo <dev@hanzo.ai>.
+// Copyright © 2021 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import {
+    Button,
+    Label,
+    IconClose,
+    IconMaximize,
+    IconMinimize,
+    resizeObserver,
+    tooltip,
+    deviceOptionsStore as deviceInfo,
+    checkAdaptiveMatching
+  } from '..'
+  import ui from '../plugin'
+
+  export let label: IntlString | undefined = undefined
+  export let isFullSize: boolean = false
+  export let padding: string = '1rem'
+
+  const dispatch = createEventDispatcher()
+
+  export function maximize (): void {
+    toggleFullSize = true
+  }
+
+  let fullSize: boolean = false
+  let toggleFullSize: boolean = fullSize
+  $: needFullSize = checkAdaptiveMatching($deviceInfo.size, 'md')
+  $: if ((needFullSize && !fullSize) || (!needFullSize && (fullSize || toggleFullSize))) {
+    fullSize = toggleFullSize ? true : needFullSize
+    dispatch('fullsize', fullSize)
+  }
+</script>
+
+<form
+  class="antiDialog"
+  class:fullsize={fullSize}
+  on:submit|preventDefault={() => {}}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
+  <div class="flex-between header">
+    <div class="flex-row-center gap-1-5">
+      <Button icon={IconClose} kind={'ghost'} size={'medium'} on:click={() => dispatch('close')} />
+      {#if label}
+        <span class="title" use:tooltip={{ label }}><Label {label} /></span>
+      {/if}
+      {#if $$slots.title}<slot name="title" />{/if}
+    </div>
+    <div class="flex-row-center flex-no-shrink gap-1-5">
+      {#if $$slots.utils}
+        <slot name="utils" />
+      {/if}
+      {#if $$slots.utils && isFullSize && !needFullSize}
+        <div class="buttons-divider" />
+      {/if}
+      {#if isFullSize && !needFullSize}
+        <Button
+          focusIndex={100010}
+          icon={fullSize ? IconMinimize : IconMaximize}
+          kind={'ghost'}
+          size={'medium'}
+          selected={fullSize}
+          id={'btnDialogFullScreen'}
+          showTooltip={{ label: fullSize ? ui.string.NormalSize : ui.string.FullSize }}
+          on:click={() => (toggleFullSize = !toggleFullSize)}
+        />
+      {/if}
+    </div>
+  </div>
+  <div class="content" class:rounded={!($$slots.footerLeft || $$slots.footerRight)} style:padding>
+    <slot />
+  </div>
+  {#if $$slots.footerLeft || $$slots.footerRight}
+    <div class="footer">
+      {#if $$slots.footerLeft}
+        <div class="flex-row-center gap-2">
+          <slot name="footerLeft" />
+        </div>
+      {:else}<div />{/if}
+      {#if $$slots.footerRight}
+        <div class="flex-row-center gap-2">
+          <slot name="footerRight" />
+        </div>
+      {:else}<div />{/if}
+    </div>
+  {/if}
+</form>

package/src/components/Dock.svelte

@@ -0,0 +1,53 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { dockStore, unpin } from '../popups'
+
+  function _close (result: any): void {
+    if ($dockStore?.onClose !== undefined) $dockStore.onClose(result)
+    $dockStore?.close()
+  }
+</script>
+
+{#if $dockStore !== undefined}
+  <div class="dock">
+    <svelte:component
+      this={$dockStore.is}
+      {...$dockStore.props}
+      isDock
+      on:close={(ev) => {
+        _close(ev?.detail)
+      }}
+      on:dock={() => {
+        if ($dockStore !== undefined) {
+          unpin()
+        }
+      }}
+    />
+  </div>
+{/if}
+
+<style lang="scss">
+  .dock {
+    box-sizing: content-box;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    background-color: transparent;
+    transform-origin: center;
+  }
+</style>

package/src/components/Dropdown.svelte

@@ -0,0 +1,91 @@
+<!--
+// Copyright © 2020 Hanzo <dev@hanzo.ai>.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { Asset, IntlString } from '@hanzo/platform'
+  import { createEventDispatcher } from 'svelte'
+  import { getFocusManager } from '../focus'
+  import { showPopup } from '../popups'
+  import type { AnySvelteComponent, ButtonKind, ButtonSize, ListItem, TooltipAlignment } from '../types'
+  import Button from './Button.svelte'
+  import DropdownPopup from './DropdownPopup.svelte'
+  import Label from './Label.svelte'
+
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let placeholder: IntlString
+  export let items: ListItem[] = []
+  export let selected: ListItem | undefined = undefined
+  export let disabled: boolean = false
+  export let padding: string = '0 .75rem'
+
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = undefined
+  export let stretchWidth: boolean | undefined = undefined
+  export let labelDirection: TooltipAlignment | undefined = undefined
+  export let focusIndex = -1
+
+  export let withSearch: boolean = true
+
+  let container: HTMLElement
+  let opened: boolean = false
+
+  const dispatch = createEventDispatcher()
+  const mgr = getFocusManager()
+</script>
+
+<div
+  bind:this={container}
+  class={stretchWidth ? 'flex-row-center' : 'min-w-0'}
+  style={stretchWidth ? 'flex: 1' : undefined}
+>
+  <Button
+    {focusIndex}
+    icon={icon !== undefined ? selected?.icon ?? icon : undefined}
+    iconProps={selected?.iconProps}
+    width={stretchWidth ? 'unset' : width ?? 'min-content'}
+    flex={stretchWidth ? '1' : undefined}
+    {size}
+    {kind}
+    {justify}
+    {disabled}
+    {padding}
+    showTooltip={{ label, direction: labelDirection }}
+    on:click={() => {
+      if (!opened && !disabled) {
+        opened = true
+        showPopup(DropdownPopup, { title: label, items, icon, withSearch }, container, (result) => {
+          if (result) {
+            selected = result
+            dispatch('selected', result)
+          }
+          opened = false
+          mgr?.setFocusPos(focusIndex)
+        })
+      }
+    }}
+  >
+    <span slot="content" class="overflow-label disabled">
+      {#if selected}
+        {selected.label}
+      {:else}
+        <div style="color: var(--theme-darker-color);">
+          <Label label={placeholder} />
+        </div>
+      {/if}
+    </span>
+  </Button>
+</div>