@hanzo/ui 0.5.24 → 0.6.15

package/src/components/CheckBoxWithLabel.svelte.txt

@@ -0,0 +1,147 @@
+<!--
+// 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 } from 'svelte'
+  import { onMount } from 'svelte'
+  import type { IntlString } from '@hanzo/platform'
+  import CheckBox from './CheckBox.svelte'
+
+  export let label: IntlString
+  export let checked: boolean = false
+  export let editable: boolean = false
+
+  let text: HTMLElement
+  let input: HTMLInputElement
+  let onEdit: boolean = false
+
+  $: {
+    if (text && input) {
+      if (onEdit) {
+        text.style.visibility = 'hidden'
+        input.style.visibility = 'visible'
+        input.focus()
+      } else {
+        input.style.visibility = 'hidden'
+        text.style.visibility = 'visible'
+      }
+    }
+  }
+
+  const findNode = (el: Node, name: string): any => {
+    while (el.parentNode !== null) {
+      if (el.classList.contains(name)) return el
+      el = el.parentNode
+    }
+    return false
+  }
+  const waitClick = (event: any): void => {
+    if (onEdit) {
+      if (!findNode(event.target, 'edit-item')) onEdit = false
+    }
+  }
+
+  function computeSize (t: EventTarget | null) {
+    const target = t as HTMLInputElement
+    const value = target.value.charCodeAt(target.value.length - 1) === 10 ? 1.125 : 0
+    text.innerHTML = label.replaceAll(' ', '&nbsp;')
+    target.style.height = `calc(${text.clientHeight}px + ${value + .5}rem)`
+  }
+
+  onMount(() => {
+    computeSize(input)
+  })
+
+  const dispatch = createEventDispatcher()
+  function changeItem () {
+    dispatch('change', { checked, label })
+  }
+</script>
+
+<svelte:window on:mousedown={waitClick} />
+<div class="flex-stretch">
+  <div style="margin-top: 1px;">
+    <CheckBox bind:checked on:change={changeItem} />
+  </div>
+  <div
+    class="label"
+    on:click={() => {
+      if (editable) {
+        onEdit = true
+      }
+    }}
+  >
+    <textarea
+      bind:this={input}
+      type="text"
+      bind:value={label}
+      class="edit-item"
+      on:input={(ev) => ev.target && computeSize(ev.target)}
+      on:change={changeItem}
+    />
+    <div class="hidden-text text" class:checked bind:this={text}>{label}</div>
+  </div>
+</div>
+
+<style lang="scss">
+  .label {
+    position: relative;
+    margin-left: 1rem;
+    width: 100%;
+    color: var(--caption-color);
+
+    .edit-item {
+      width: 100%;
+      min-height: 1.25rem;
+      height: minmax(1.25rem, auto);
+      margin: -.25rem;
+      padding: .125rem;
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--caption-color);
+      background-color: transparent;
+      border: .125rem solid transparent;
+      border-radius: .125rem;
+      outline: none;
+      overflow-y: scroll;
+      resize: none;
+      overflow-wrap: break-word;
+
+      &:focus {
+        border-color: var(--primary-button-default);
+      }
+
+      &::-webkit-contacts-auto-fill-button,
+      &::-webkit-credentials-auto-fill-button {
+        visibility: hidden;
+        display: none !important;
+        pointer-events: none;
+        height: 0;
+        width: 0;
+        margin: 0;
+      }
+    }
+    .text {
+      top: 0;
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow-wrap: break-word;
+
+      &.checked {
+        text-decoration: line-through;
+        color: var(--dark-color);
+      }
+    }
+  }
+</style>

package/src/components/Chevron.svelte

@@ -0,0 +1,85 @@
+<!--
+// Copyright © 2022 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 IconDownOutline from './icons/DownOutline.svelte'
+
+  export let size: 'small' | 'medium' = 'medium'
+  export let fill = 'var(--dark-color)'
+  export let expanded: boolean = false
+  export let direction: 'left' | 'right' = 'right'
+  export let outline: boolean = false
+  export let marginRight: string | undefined = undefined
+  export let marginLeft: string | undefined = undefined
+  export let margin: string | undefined = undefined
+</script>
+
+<div
+  class="chevron {size} {direction}"
+  class:outline
+  class:expanded
+  style:margin-right={marginRight}
+  style:margin-left={marginLeft}
+  style:margin
+>
+  {#if outline}
+    <IconDownOutline {size} {fill} />
+  {:else}
+    <svg {fill} viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0,0L6,3L0,6Z" />
+    </svg>
+  {/if}
+</div>
+
+<style lang="scss">
+  .chevron {
+    flex-shrink: 0;
+    transition: transform 0.15s var(--timing-main);
+
+    &.outline {
+      transform-origin: center;
+      &.right {
+        transform: rotate(-90deg);
+      }
+      &.left {
+        transform: rotate(90deg);
+      }
+      &.expanded {
+        transform: rotate(0deg);
+      }
+    }
+    &:not(.outline) {
+      transform-origin: 35% center;
+      transform: rotate(0deg);
+
+      &.small {
+        width: 0.325rem;
+        height: 0.325rem;
+      }
+      &.medium {
+        width: 0.375rem;
+        height: 0.375rem;
+      }
+      &.right {
+        transform: rotate(0deg);
+      }
+      &.left {
+        transform: rotate(180deg);
+      }
+      &.expanded {
+        transform: rotate(90deg);
+      }
+    }
+  }
+</style>

package/src/components/Chip.svelte

@@ -0,0 +1,109 @@
+<!--
+// 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 { createEventDispatcher } from 'svelte'
+  import { IconClose, ButtonIcon, LabelAndProps, tooltip as tp } from '..'
+
+  export let label: string
+  export let size: 'small' | 'min' = 'small'
+  export let isRemovable: boolean = false
+  export let backgroundColor: string | undefined = undefined
+  export let tooltip: LabelAndProps | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  let buttonRef: ButtonIcon | undefined
+
+  function handleBackspace (event: KeyboardEvent) {
+    if (event.key === 'Backspace') {
+      dispatch('remove')
+    }
+  }
+
+  export function focus () {
+    buttonRef?.focus()
+  }
+</script>
+
+<div
+  class="flex items-center font-medium-14 max-w-60 chip {size}"
+  class:removable={isRemovable}
+  style:background-color={backgroundColor}
+  use:tp={tooltip}
+>
+  <span class="px-2 overflow-label chip-label">{label}</span>
+  {#if isRemovable}
+    <ButtonIcon
+      bind:this={buttonRef}
+      kind="tertiary"
+      size="min"
+      icon={IconClose}
+      inheritColor={true}
+      on:click={() => dispatch('remove')}
+      on:keydown={handleBackspace}
+    />
+  {/if}
+</div>
+
+<style lang="scss">
+  .chip {
+    position: relative;
+    height: var(--global-small-Size);
+    padding: var(--spacing-0_5);
+    border: none;
+    color: var(--tag-on-accent-PorpoiseText);
+    background-color: var(--global-accent-BackgroundColor);
+    border-radius: var(--small-BorderRadius);
+
+    &.removable {
+      &:after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: var(--small-BorderRadius);
+        overflow: hidden;
+        background-color: transparent;
+        pointer-events: none;
+      }
+
+      &:hover:after {
+        background-color: var(--global-ui-hover-OverlayColor);
+      }
+
+      &:active:after {
+        background-color: var(--global-ui-active-OverlayColor);
+      }
+    }
+
+    &.min {
+      height: 1.25rem;
+      padding: var(--spacing-0_25);
+      border-radius: var(--extra-small-BorderRadius);
+      font-size: 0.6875rem;
+
+      .chip-label {
+        padding: 0 var(--spacing-0_5);
+      }
+    }
+
+    .chip-label {
+      padding: 0 var(--spacing-1);
+    }
+
+    & :global(button.type-button-icon) {
+      margin-right: var(--spacing-0_25);
+    }
+  }
+</style>

package/src/components/CircleButton.svelte

@@ -0,0 +1,165 @@
+<!--
+// 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 } from 'svelte'
+  import type { Asset } from '@hanzo/platform'
+  import type { AnySvelteComponent, ButtonSize } from '../types'
+  import Icon from './Icon.svelte'
+
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let size: ButtonSize = 'large'
+  export let ghost: boolean = false
+  export let selected: boolean = false
+  export let primary: boolean = false
+  export let disabled: boolean = false
+  export let id: string | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'Space') {
+      key.preventDefault()
+      key.stopPropagation()
+      dispatch('selected')
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  {id}
+  class="flex-center icon-button icon-{size}"
+  class:selected
+  class:ghost
+  class:primary
+  class:disabled
+  tabindex="0"
+  on:keydown={onKeydown}
+  on:click|stopPropagation
+  on:mousemove
+>
+  {#if $$slots.content}
+    <slot name="content" />
+  {:else if icon}
+    <div class="flex-center content">
+      <Icon {icon} size={'full'} />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .icon-button {
+    position: relative;
+    flex-shrink: 0;
+    color: var(--theme-content-color);
+    background-color: var(--theme-button-default);
+    border: 1px solid var(--theme-divider-color);
+    border-radius: 50%;
+    outline: none;
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      top: -0.25rem;
+      bottom: -0.25rem;
+      left: -0.25rem;
+      right: -0.25rem;
+      border: 1px solid var(--primary-button-default);
+      border-radius: 50%;
+    }
+    &:hover {
+      background-color: var(--theme-button-hovered);
+    }
+    &:active {
+      background-color: var(--theme-button-pressed);
+    }
+    &:focus {
+      background-color: var(--theme-button-focused);
+
+      &::before {
+        content: '';
+      }
+    }
+    &.disabled {
+      background-color: transparent;
+    }
+    .content {
+      pointer-events: none;
+    }
+    &.selected {
+      background-color: var(--menu-bg-select);
+    }
+    &.ghost {
+      background-color: var(--menu-bg-select-trans);
+
+      &:hover {
+        background-color: var(--menu-bg-select);
+      }
+    }
+    &.primary {
+      color: var(--secondary-button-color);
+      background-color: var(--secondary-button-default);
+      &:hover {
+        background-color: var(--secondary-button-hovered);
+      }
+      &:active {
+        background-color: var(--secondary-button-pressed);
+      }
+      &:focus {
+        background-color: var(--secondary-button-focused);
+      }
+      &.disabled {
+        background-color: var(--primary-button-disabled);
+      }
+    }
+  }
+  .icon-inline {
+    width: 1em;
+    height: 1em;
+  }
+  .icon-small {
+    width: 1.5rem;
+    height: 1.5rem;
+    .content {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+  }
+  .icon-medium {
+    width: 1.75rem;
+    height: 1.75rem;
+    .content {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+  .icon-large {
+    width: 2rem;
+    height: 2rem;
+    .content {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+  .icon-x-large {
+    width: 2.25rem;
+    height: 2.25rem;
+    .content {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+</style>

package/src/components/CodeForm.svelte

@@ -0,0 +1,164 @@
+<!--
+// 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 { createEventDispatcher, onDestroy } from 'svelte'
+
+  import CodeInput from './CodeInput.svelte'
+
+  export let fields: { id: string, name: string, optional: boolean }[] = []
+  export let size: 'small' | 'medium' = 'small'
+  export let kind: 'primary' | 'secondary' = 'primary'
+  export let padding: string | null = null
+  export let minHeight: string | null = null
+
+  const dispatch = createEventDispatcher()
+  const formData: Record<string, string> = Object.fromEntries(fields.map(({ name }) => [name, '']))
+
+  let formElement: HTMLFormElement | undefined
+
+  function trim (field: string): void {
+    formData[field] = formData[field].trim()
+  }
+
+  async function validateCode (): Promise<void> {
+    const code = Object.values(formData).join('')
+
+    dispatch('submit', code)
+  }
+
+  function onInput (e: Event): void {
+    if (e.target == null) return
+    const target = e.target as HTMLInputElement
+    const { value } = target
+    if (value == null || value === '') return
+    const index = fields.findIndex(({ id }) => id === target.id)
+    if (index === -1) return
+    if (Object.values(formData).every((v) => v !== '')) {
+      void validateCode()
+      return
+    }
+    const nextField = fields[index + 1]
+    if (nextField === undefined) return
+    const nextInput = formElement?.querySelector(`input[name="${nextField.name}"]`) as HTMLInputElement
+    if (nextInput != null) {
+      nextInput.focus()
+    }
+  }
+
+  function onKeydown (e: KeyboardEvent): void {
+    if (e.key === undefined) {
+      return
+    }
+    const key = e.key.toLowerCase()
+    const target = e.target as HTMLInputElement
+    if (key !== 'backspace' && key !== 'delete') return
+    const index = fields.findIndex(({ id }) => id === target.id)
+    if (index === -1) return
+    const { value } = target
+    target.value = ''
+    formData[fields[index].name] = ''
+    if (value === '') {
+      const prevField = fields[index - 1]
+      if (prevField === undefined) return
+      const prevInput = formElement?.querySelector(`input[name="${prevField.name}"]`) as HTMLInputElement
+      if (prevInput != null) {
+        prevInput.focus()
+      }
+    }
+  }
+
+  function onPaste (e: ClipboardEvent): void {
+    e.preventDefault()
+    if (e.clipboardData == null) return
+    const text = e.clipboardData.getData('text')
+    const digits = text.split('').filter((it) => it !== ' ')
+    if (digits.length !== fields.length) return
+    let focusName: string | undefined = undefined
+    for (const field of fields) {
+      const digit = digits.shift()
+      if (digit === undefined) break
+      formData[field.name] = digit
+      focusName = field.name
+    }
+    if (focusName !== undefined && focusName !== '' && formElement) {
+      const input = formElement.querySelector(`input[name="${focusName}"]`) as HTMLInputElement | undefined
+      input?.focus()
+    }
+    if (Object.values(formData).every((v) => v !== '')) {
+      void validateCode()
+    }
+  }
+
+  $: if (formElement != null) {
+    formElement.addEventListener('input', onInput)
+    formElement.addEventListener('keydown', onKeydown)
+    formElement.addEventListener('paste', onPaste)
+    const firstInput = formElement.querySelector(`input[name="${fields[0].name}"]`) as HTMLInputElement | undefined
+    firstInput?.focus()
+  }
+
+  onDestroy(() => {
+    if (formElement !== undefined) {
+      formElement.removeEventListener('input', onInput)
+      formElement.removeEventListener('keydown', onKeydown)
+      formElement.removeEventListener('paste', onPaste)
+    }
+  })
+</script>
+
+<form bind:this={formElement} class="container" style:padding style:min-height={minHeight}>
+  <div class="form">
+    {#each fields as field, index (field.name)}
+      {#if index === fields.length / 2}
+        <div class="separator" />
+      {/if}
+      <div class={'form-row'}>
+        <CodeInput
+          id={field.id}
+          name={field.name}
+          {size}
+          {kind}
+          bind:value={formData[field.name]}
+          on:blur={() => {
+            trim(field.name)
+          }}
+        />
+      </div>
+    {/each}
+  </div>
+</form>
+
+<style lang="scss">
+  .separator {
+    display: block;
+    width: 0.75rem;
+    height: 1px;
+    background-color: var(--theme-button-border);
+    flex-shrink: 0;
+  }
+
+  .container {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    .form {
+      display: flex;
+      gap: 1rem;
+      margin-top: 1.5rem;
+      align-items: center;
+    }
+  }
+</style>