@hanzo/ui 0.5.23 → 0.6.15

package/src/components/ListViewItem.svelte

@@ -0,0 +1,84 @@
+<!--
+// 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 row: number = 0
+  export let colorsSchema: 'default' | 'lumia' = 'default'
+  export let addClass: string | undefined = undefined
+  export let selected = false
+  export let element: HTMLElement | undefined = undefined
+  export let kind: 'default' | 'thin' | 'full-size' = 'default'
+  export let isHighlighted = false
+</script>
+
+<slot name="category" item={row} />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="list-item{addClass ? ` ${addClass}` : ''} {kind}"
+  class:selection={selected}
+  class:lumia={colorsSchema === 'lumia'}
+  class:default={colorsSchema === 'default'}
+  class:highlighted={isHighlighted}
+  on:mouseover
+  on:mouseenter
+  on:focus={() => {}}
+  bind:this={element}
+  on:click
+>
+  <slot name="item" item={row} />
+</div>
+
+<style lang="scss">
+  .list-item {
+    margin: 0 0.5rem;
+    min-width: 0;
+    border-radius: 0.25rem;
+
+    &.thin {
+      margin: 0 0.375rem;
+      border-radius: 0.375rem;
+
+      &:not(:first-child) {
+        margin-top: 0.375rem;
+      }
+    }
+
+    &.full-size {
+      margin: 0;
+    }
+
+    &.default.highlighted:hover:not(.highlighted) {
+      background-color: var(--theme-popup-divider);
+    }
+
+    &.lumia.highlighted:hover:not(.highlighted) {
+      background-color: var(--global-ui-highlight-BackgroundColor);
+    }
+
+    &.selection:not(.highlighted) {
+      &.default {
+        background-color: var(--theme-popup-hover);
+      }
+
+      &.lumia {
+        background-color: var(--global-ui-highlight-BackgroundColor);
+      }
+    }
+
+    &.highlighted {
+      background-color: var(--global-ui-hover-highlight-BackgroundColor);
+    }
+  }
+</style>

package/src/components/Loading.svelte

@@ -0,0 +1,88 @@
+<!--
+// 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 { createEventDispatcher, onMount } from 'svelte'
+  import Spinner from './Spinner.svelte'
+  import { ButtonSize } from '../types'
+
+  export let shrink: boolean = false
+  export let label: string = ''
+  export let size: ButtonSize = 'medium'
+
+  const dispatch = createEventDispatcher()
+  let timer: any
+  onMount(() => {
+    timer = setTimeout(() => {
+      dispatch('progress')
+    }, 50)
+    return () => {
+      clearTimeout(timer)
+    }
+  })
+</script>
+
+<div class="spinner-container" class:fullSize={!shrink}>
+  <div data-label={label} class="inner flex-row-center" class:labeled={label !== ''}>
+    <Spinner {size} />
+    <slot />
+  </div>
+</div>
+
+<style lang="scss">
+  .spinner-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.fullSize {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @keyframes makeVisible {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .spinner-container .inner {
+    opacity: 0;
+    animation-name: makeVisible;
+    animation-duration: 0.25s;
+    animation-delay: 0.25s;
+    animation-fill-mode: forwards;
+
+    &.labeled {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: attr(data-label);
+        bottom: -0.75rem;
+        left: 50%;
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 0.5rem;
+        color: var(--dark-color);
+        transform: translateX(-50%);
+      }
+    }
+  }
+</style>

package/src/components/Menu.svelte

@@ -0,0 +1,205 @@
+<!--
+// 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 { createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import { generateId, Ref, Doc } from '@hanzo/core'
+  import ui from '../plugin'
+  import { closePopup, showPopup } from '../popups'
+  import { Action } from '../types'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+  import MouseSpeedTracker from './MouseSpeedTracker.svelte'
+  import { resizeObserver } from '../resize'
+
+  export let actions: Action[] = []
+  export let ctx: any = undefined
+  export let popupCategory: Ref<Doc> | undefined = undefined
+  export let addClass: string | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+  const btns: HTMLElement[] = []
+  let activeElement: HTMLElement
+  const category = popupCategory || generateId()
+  const nextCategory = generateId()
+
+  const keyDown = (ev: KeyboardEvent): void => {
+    if (ev.key === 'Tab') {
+      dispatch('close')
+      ev.preventDefault()
+      ev.stopPropagation()
+    }
+    const n = btns.indexOf(activeElement) ?? 0
+    if (ev.key === 'ArrowDown') {
+      if (n < btns.length - 1) {
+        activeElement = btns[n + 1]
+      }
+      ev.preventDefault()
+      ev.stopPropagation()
+    }
+    if (ev.key === 'ArrowUp') {
+      if (n > 0) {
+        activeElement = btns[n - 1]
+      }
+      ev.preventDefault()
+      ev.stopPropagation()
+    }
+    if (ev.key === 'ArrowLeft') {
+      dispatch('update', 'left')
+      closePopup(category)
+      ev.preventDefault()
+      ev.stopPropagation()
+    }
+    if (ev.key === 'ArrowRight') {
+      dispatch('update', 'right')
+      showActionPopup(actions[n], activeElement)
+      ev.preventDefault()
+      ev.stopPropagation()
+    }
+  }
+
+  onMount(() => {
+    dispatch('update')
+    if (btns[0]) {
+      btns[0].focus()
+    }
+  })
+  onDestroy(() => {
+    closePopup(category)
+  })
+
+  function showActionPopup (action: Action, target: HTMLElement, isPopupHidden?: boolean): void {
+    closePopup(category)
+    closePopup(nextCategory)
+
+    if (action.component !== undefined && !isPopupHidden) {
+      showPopup(
+        action.component,
+        { ...action.props, popupCategory: nextCategory },
+        { getBoundingClientRect: () => target.getBoundingClientRect(), kind: 'submenu' },
+        (evt) => {
+          dispatch('close')
+        },
+        undefined,
+        { category, overlay: false }
+      )
+    }
+  }
+  function focusTarget (action: Action, target: HTMLElement, isPopupHidden?: boolean): void {
+    if (focusSpeed && target !== activeElement) {
+      activeElement = target
+      showActionPopup(action, target, isPopupHidden)
+    }
+  }
+  export function clearFocus (): void {
+    closePopup(category)
+    activeElement = popup
+  }
+
+  let focusSpeed: boolean = false
+  let popup: HTMLElement
+
+  $: popup?.focus()
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="antiPopup{addClass ? ` ${addClass}` : ''}"
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+  on:keydown={keyDown}
+>
+  <MouseSpeedTracker bind:focusSpeed />
+  <div class="ap-space x2" />
+  <slot name="header" />
+  <div class="ap-scroll">
+    <div class="ap-box" bind:this={popup}>
+      {#if actions.length === 0}
+        <div class="p-6 error-color">
+          <Label label={ui.string.NoActionsDefined} />
+        </div>
+      {/if}
+      {#each actions as action, i}
+        {#if i > 0 && actions[i - 1].group !== action.group}
+          <span class="ap-menuItem separator" />
+        {/if}
+        {#if action.link}
+          <a class="stealth" href={action.link}>
+            <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+            <button
+              bind:this={btns[i]}
+              class="ap-menuItem flex-row-center withIcon w-full"
+              class:hover={btns[i] === activeElement}
+              on:mousemove={() => {
+                if (btns[i] !== activeElement) focusTarget(action, btns[i])
+              }}
+              on:click|preventDefault|stopPropagation={(evt) => {
+                if (!action.inline) dispatch('close')
+                action.action(ctx, evt)
+              }}
+            >
+              {#if action.icon}<div class="icon mr-2"><Icon icon={action.icon} size={'small'} /></div>{/if}
+              <span class="overflow-label pr-4 flex-grow"><Label label={action.label} /></span>
+            </button>
+          </a>
+        {:else if action.component !== undefined && !action.isSubmenuRightClicking}
+          <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+          <button
+            bind:this={btns[i]}
+            class="ap-menuItem antiPopup-submenu withIconHover"
+            class:hover={btns[i] === activeElement}
+            on:mousemove={() => {
+              if (btns[i] !== activeElement) focusTarget(action, btns[i])
+            }}
+            on:click={() => {
+              focusTarget(action, btns[i])
+            }}
+          >
+            {#if action.icon}
+              <div class="icon mr-2"><Icon icon={action.icon} size={'small'} /></div>
+            {/if}
+            <span class="overflow-label pr-4 flex-grow"><Label label={action.label} /></span>
+          </button>
+        {:else}
+          <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+          <button
+            bind:this={btns[i]}
+            class="ap-menuItem flex-row-center withIcon"
+            class:hover={btns[i] === activeElement}
+            on:mousemove={() => {
+              if (btns[i] !== activeElement) focusTarget(action, btns[i], action.isSubmenuRightClicking)
+            }}
+            on:click={(evt) => {
+              if (!action.inline) dispatch('close')
+              action.action(ctx, evt)
+            }}
+            on:contextmenu={(evt) => {
+              if (action.component) {
+                evt.preventDefault()
+                showActionPopup(action, btns[i])
+              }
+            }}
+          >
+            {#if action.icon}
+              <div class="icon mr-2"><Icon icon={action.icon} size={'small'} /></div>
+            {/if}
+            <span class="overflow-label pr-4 flex-grow"><Label label={action.label} /></span>
+          </button>
+        {/if}
+      {/each}
+    </div>
+  </div>
+  <div class="ap-space x2" />
+</div>

package/src/components/MiniToggle.svelte

@@ -0,0 +1,125 @@
+<!--
+// 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 Label from './Label.svelte'
+  import { createEventDispatcher } from 'svelte'
+
+  export let label: IntlString | undefined = undefined
+  export let on: boolean = false
+  export let disabled: boolean = false
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="flex-row-center">
+  <label class="mini-toggle">
+    <input class="chBox" type="checkbox" bind:checked={on} on:change {disabled} />
+    <span class="toggle-switch" />
+  </label>
+  {#if label}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span
+      class="mini-toggle-label"
+      on:click={() => {
+        if (!disabled) {
+          on = !on
+          dispatch('change', on)
+        }
+      }}
+    >
+      <Label {label} />
+    </span>
+  {/if}
+</div>
+
+<style lang="scss">
+  .mini-toggle {
+    display: inline-block;
+    width: 22px;
+    height: 14px;
+    min-width: 22px;
+    // line-height: 1.75rem;
+    vertical-align: middle;
+    font-size: inherit;
+    user-select: none;
+    .chBox {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      border: 0;
+      padding: 0;
+      clip: rect(0 0 0 0);
+      overflow: hidden;
+
+      &:checked + .toggle-switch {
+        background-color: var(--theme-toggle-on-bg-color);
+        &:hover {
+          background-color: var(--theme-toggle-on-bg-hover);
+        }
+        &:before {
+          left: 9px;
+          background: var(--theme-toggle-on-sw-color);
+        }
+      }
+      &:not(:disabled) + .toggle-switch {
+        cursor: pointer;
+      }
+      &:disabled + .toggle-switch {
+        filter: grayscale(70%);
+        &:before {
+          background: #eee;
+        }
+      }
+      // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+    }
+    // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); }
+    .toggle-switch {
+      position: relative;
+      display: inline-block;
+      width: 22px;
+      height: 14px;
+      border-radius: 4.5rem;
+      background-color: var(--theme-toggle-bg-color);
+      transition:
+        left 0.2s,
+        background-color 0.2s;
+      &:before {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 3px;
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--theme-toggle-sw-color);
+        // box-shadow: 1px 2px 7px rgba(119, 129, 142, 0.1);
+        transition: all 0.1s ease-out;
+      }
+      &:hover {
+        background-color: var(--theme-toggle-bg-hover);
+      }
+    }
+
+    &-label {
+      margin-left: 0.375rem;
+      font-size: 0.75rem;
+      color: var(--content-color);
+      cursor: pointer;
+    }
+  }
+</style>

package/src/components/Modal.svelte

@@ -0,0 +1,117 @@
+<!--
+// Copyright © 2023 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 { createEventDispatcher } from 'svelte'
+  import { IntlString } from '@hanzo/platform'
+  import Header from './Header.svelte'
+  import Label from './Label.svelte'
+  import ButtonIcon from './ButtonIcon.svelte'
+  import ButtonBase from './ButtonBase.svelte'
+  import Scroller from './Scroller.svelte'
+  import ui from '..'
+
+  export let type: 'type-aside' | 'type-popup' | 'type-component'
+  export let width: 'large' | 'medium' | 'small' | 'x-small' | 'menu' | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let labelProps: any | undefined = undefined
+  export let okAction: () => Promise<void> | void = () => {}
+  export let onCancel: (() => void) | undefined = undefined
+  export let canSave: boolean = false
+  export let okLabel: IntlString = ui.string.Ok
+  export let padding: string | undefined = undefined
+  export let hidden: boolean = false
+  export let allowFullsize: boolean = false
+  export let noTopIndent: boolean = false
+  export let hideFooter: boolean = false
+  export let adaptive: 'default' | 'freezeActions' | 'doubleRow' | 'disabled' = 'disabled'
+  export let showCancelButton: boolean = true
+
+  const dispatch = createEventDispatcher()
+
+  function close (): void {
+    if (onCancel) onCancel()
+    else dispatch('close')
+  }
+  function onKeyDown (ev: KeyboardEvent) {
+    if (ev.key === 'Escape') close()
+  }
+
+  $: typePadding =
+    type === 'type-popup'
+      ? 'var(--spacing-2) var(--spacing-3) var(--spacing-4)'
+      : type === 'type-aside'
+        ? 'var(--spacing-2) var(--spacing-1_5)'
+        : 'var(--spacing-4)'
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<div class="hulyModal-container {type} {width ?? ''}" class:hidden class:noTopIndent>
+  <Header
+    {type}
+    {allowFullsize}
+    {adaptive}
+    on:close={close}
+    hideBefore={!$$slots.beforeTitle}
+    hideActions={!$$slots.actions}
+  >
+    <svelte:fragment slot="beforeTitle">
+      <slot name="beforeTitle" />
+    </svelte:fragment>
+    {#if label}<Label {label} params={labelProps} />{/if}
+    <slot name="title" />
+    <svelte:fragment slot="actions">
+      <slot name="actions" />
+    </svelte:fragment>
+  </Header>
+  <slot name="beforeContent" />
+  <div class="hulyModal-content">
+    <Scroller
+      padding={padding ?? typePadding}
+      bottomPadding={type === 'type-popup'
+        ? undefined
+        : type === 'type-aside'
+          ? 'var(--spacing-2)'
+          : 'var(--spacing-4)'}
+    >
+      <slot />
+    </Scroller>
+  </div>
+  <slot name="afterContent" />
+  {#if type !== 'type-component' && !hideFooter}
+    <div class="hulyModal-footer">
+      <ButtonBase
+        type={'type-button'}
+        kind={'primary'}
+        size={type === 'type-aside' ? 'large' : 'medium'}
+        label={okLabel}
+        on:click={okAction}
+        disabled={!canSave}
+      />
+      {#if showCancelButton}
+        <ButtonBase
+          type={'type-button'}
+          kind={'secondary'}
+          size={type === 'type-aside' ? 'large' : 'medium'}
+          label={ui.string.Cancel}
+          on:click={onCancel}
+        />
+      {/if}
+      {#if $$slots.buttons}
+        <slot name="buttons" />
+      {/if}
+    </div>
+  {/if}
+</div>

package/src/components/ModeSelector.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" generics="T extends string">
+  import Switcher from './Switcher.svelte'
+  import { IModeSelector } from '../utils'
+
+  export let props: IModeSelector
+  export let kind: 'nuance' | 'subtle' = 'nuance'
+  export let onlyIcons: boolean = false
+  export let expansion: 'stretch' | 'default' = 'default'
+  export let padding: string | undefined = undefined
+
+  $: modeList =
+    props.config != null
+      ? props.config.map((c) => {
+        return {
+          id: c[0],
+          labelIntl: c[1],
+          labelParams: c[2],
+          action: () => {
+            props.onChange(c[0])
+          }
+        }
+      })
+      : []
+</script>
+
+{#if modeList.length > 0}
+  <Switcher
+    name={'modeSelector'}
+    items={modeList}
+    selected={props.mode}
+    {kind}
+    {onlyIcons}
+    on:select={(result) => {
+      if (result.detail !== undefined && result.detail.action) result.detail.action()
+    }}
+  />
+{/if}