@hanzo/ui 0.5.23 → 0.6.15

package/src/components/NestedMenu.svelte

@@ -0,0 +1,119 @@
+<!--
+// Copyright © 2025 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 { Label, Scroller, Submenu } from '..'
+  import { resizeObserver } from '../resize'
+  import { DropdownIntlItem } from '../types'
+  import NestedMenu from './NestedMenu.svelte'
+
+  export let items: [DropdownIntlItem, DropdownIntlItem[]][]
+  export let nestedFrom: DropdownIntlItem | undefined = undefined
+  export let onSelect: ((val: DropdownIntlItem) => void) | undefined = undefined
+
+  const elements: HTMLElement[] = []
+
+  const dispatch = createEventDispatcher()
+
+  const actionElements: HTMLButtonElement[] = []
+
+  const keyDown = (event: KeyboardEvent, index: number): void => {
+    if (event.key === 'ArrowDown') {
+      actionElements[(index + 1) % actionElements.length]?.focus()
+    }
+
+    if (event.key === 'ArrowUp') {
+      actionElements[(actionElements.length + index - 1) % actionElements.length]?.focus()
+    }
+
+    if (event.key === 'ArrowLeft') {
+      dispatch('close')
+    }
+  }
+
+  function onNestedSelect (val: any): void {
+    dispatch('close', val)
+  }
+
+  function click (val: DropdownIntlItem): void {
+    onSelect?.(val)
+    dispatch('close', val)
+  }
+</script>
+
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
+  <div class="menu-space" />
+  <Scroller>
+    {#if nestedFrom}
+      <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+      <button
+        class="menu-item"
+        on:keydown={(event) => {
+          keyDown(event, -1)
+        }}
+        on:mouseover={(event) => {
+          event.currentTarget.focus()
+        }}
+        on:click={() => {
+          if (nestedFrom !== undefined) {
+            click(nestedFrom)
+          }
+        }}
+      >
+        <div class="overflow-label pr-1"><Label label={nestedFrom.label} /></div>
+      </button>
+      <div class="divider" />
+    {/if}
+    {#each items as item, i}
+      {#if item[1].length > 0 && nestedFrom === undefined}
+        <Submenu
+          bind:element={elements[i]}
+          on:keydown={(event) => {
+            keyDown(event, i)
+          }}
+          on:mouseover={() => {
+            elements[i]?.focus()
+          }}
+          label={item[0].label}
+          props={{
+            items: item[1].map((p) => {
+              return [p, []]
+            }),
+            nestedFrom: item[0],
+            onSelect: onNestedSelect
+          }}
+          options={{ component: NestedMenu }}
+        />
+      {:else}
+        <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+        <button
+          class="menu-item"
+          on:keydown={(event) => {
+            keyDown(event, i)
+          }}
+          on:mouseover={(event) => {
+            event.currentTarget.focus()
+          }}
+          on:click={() => {
+            click(item[0])
+          }}
+        >
+          <div class="overflow-label pr-1"><Label label={item[0].label} /></div>
+        </button>
+      {/if}
+    {/each}
+  </Scroller>
+  <div class="menu-space" />
+</div>

package/src/components/NotificationToast.svelte

@@ -0,0 +1,112 @@
+<!--
+//
+// 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 type { ComponentType } from 'svelte'
+  import { fade } from 'svelte/transition'
+  import Button from './Button.svelte'
+  import Icon from './Icon.svelte'
+  import CheckCircle from './icons/CheckCircle.svelte'
+  import Close from './icons/Close.svelte'
+  import Info from './icons/Info.svelte'
+  import { NotificationSeverity } from './notifications/NotificationSeverity'
+
+  export let onClose: (() => void) | undefined = undefined
+  export let severity: NotificationSeverity | undefined = undefined
+  export let title: string
+
+  const getIcon = (): ComponentType | undefined => {
+    switch (severity) {
+      case NotificationSeverity.Success:
+        return CheckCircle
+      case NotificationSeverity.Error:
+      case NotificationSeverity.Info:
+      case NotificationSeverity.Warning:
+        return Info
+    }
+  }
+
+  $: icon = getIcon()
+</script>
+
+<div class="notifyPopup" in:fade out:fade>
+  <div class="flex-between">
+    <div class="flex-row-center">
+      {#if icon}
+        <div
+          class="mr-2"
+          class:icon-success={severity === NotificationSeverity.Success}
+          class:icon-error={severity === NotificationSeverity.Error}
+          class:icon-info={severity === NotificationSeverity.Info}
+          class:icon-warning={severity === NotificationSeverity.Warning}
+        >
+          <Icon {icon} size="medium" />
+        </div>
+      {/if}
+      <span class="overflow-label fs-bold text-base caption-color">{title}</span>
+    </div>
+    {#if onClose !== undefined}
+      <Button icon={Close} kind="ghost" size="small" dataId={'btnNotifyClose'} on:click={onClose} />
+    {/if}
+  </div>
+
+  <div class="content">
+    <slot name="content" />
+  </div>
+
+  {#if $$slots.buttons}
+    <div class="flex-between gap-2">
+      <slot name="buttons" />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .notifyPopup {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    margin: 0.75rem;
+    padding: 0.5rem;
+    min-width: 25rem;
+    max-width: 35rem;
+    min-height: 7rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-popup-color);
+    border: 1px solid var(--theme-popup-divider);
+    border-radius: 0.5rem;
+    box-shadow: var(--theme-popup-shadow);
+
+    .icon-success {
+      color: var(--theme-won-color);
+    }
+    .icon-error {
+      color: var(--theme-lost-color);
+    }
+    .icon-info {
+      color: var(--primary-color-skyblue);
+    }
+    .icon-warning {
+      color: var(--theme-warning-color);
+    }
+
+    .content {
+      flex-grow: 1;
+      margin: 1rem 0 1.25rem;
+    }
+  }
+</style>

package/src/components/NumberInput.svelte

@@ -0,0 +1,200 @@
+<!--
+// 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 type { IntlString } from '@hanzo/platform'
+  import { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hcengineering/theme'
+  import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
+  import { registerFocus } from '../focus'
+  import plugin from '../plugin'
+  import { resizeObserver } from '../resize'
+  import { floorFractionDigits } from '../utils'
+  import Button from './Button.svelte'
+  import DownOutline from './icons/DownOutline.svelte'
+  import UpOutline from './icons/UpOutline.svelte'
+
+  export let maxWidth: string | undefined = undefined
+  export let value: number = 0
+  export let minValue: number | undefined = undefined
+  export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
+  export let placeholderParam: any | undefined = undefined
+  export let maxDigitsAfterPoint: number | undefined = undefined
+  export let disabled: boolean = false
+  export let autoFocus: boolean = false
+  export let select: boolean = false
+  export let focusable: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  let text: HTMLElement
+  let input: HTMLInputElement
+  let style: string
+  let phTranslate: string = ''
+  let parentWidth: number | undefined
+
+  $: {
+    if (
+      maxDigitsAfterPoint !== undefined &&
+      value &&
+      !value.toString().match(`^\\d+\\.?\\d{0,${maxDigitsAfterPoint}}$`)
+    ) {
+      value = floorFractionDigits(Number(value), maxDigitsAfterPoint)
+    }
+  }
+
+  $: {
+    if (minValue !== undefined && value < minValue) value = minValue
+  }
+  $: style = `max-width: ${maxWidth || (parentWidth ? `${parentWidth}px` : 'max-content')};`
+  $: translateCB(placeholder, placeholderParam ?? {}, $themeStore.language, (res) => {
+    phTranslate = res
+  })
+
+  function computeSize (t: HTMLInputElement | EventTarget | null) {
+    if (t == null) {
+      return
+    }
+    const target = t as HTMLInputElement
+    const value = target.value
+    text.innerHTML = (value === '' ? phTranslate : value)
+      .replaceAll(' ', '&nbsp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+    target.style.width = maxWidth ?? '5rem'
+    dispatch('input')
+  }
+
+  onMount(() => {
+    if (autoFocus) {
+      input.focus()
+      autoFocus = false
+    }
+    if (select) {
+      input.select()
+      select = false
+    }
+    computeSize(input)
+  })
+
+  afterUpdate(() => {
+    computeSize(input)
+  })
+
+  export function focusInput () {
+    input?.focus()
+  }
+  export function selectInput () {
+    input?.select()
+  }
+
+  // Focusable control with index
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      focusInput()
+      return input != null
+    },
+    isFocus: () => document.activeElement === input
+  })
+  const updateFocus = () => {
+    focusManager?.setFocus(idx)
+  }
+  $: if (input) {
+    input.addEventListener('focus', updateFocus, { once: true })
+  }
+
+  export function focus (): void {
+    input.focus()
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="editbox-container"
+  on:click={() => {
+    input.focus()
+  }}
+  use:resizeObserver={(element) => {
+    parentWidth = element.parentElement?.getBoundingClientRect().width
+  }}
+>
+  <div class="hidden-text" bind:this={text} />
+  <div class="flex-row-center clear-mins" class:focusable>
+    <input
+      {disabled}
+      bind:this={input}
+      type="number"
+      class="number"
+      bind:value
+      placeholder={phTranslate}
+      {style}
+      on:input={(ev) => {
+        if (ev.target) {
+          computeSize(ev.target)
+        }
+      }}
+      on:change
+      on:keydown
+      on:keypress
+      on:blur
+    />
+    <div class="flex-col-center py-0-5">
+      <Button icon={UpOutline} kind={'stepper'} padding={'0'} {disabled} on:click={() => value++} />
+      <Button icon={DownOutline} kind={'stepper'} padding={'0'} {disabled} on:click={() => value--} />
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .editbox-container {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0rem 0.125rem 0 0.5rem;
+    border: 1px solid var(--theme-divider-color);
+    border-radius: 0.375rem;
+
+    input {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      min-width: 0;
+      color: var(--theme-caption-color);
+
+      &::-webkit-contacts-auto-fill-button,
+      &::-webkit-credentials-auto-fill-button {
+        visibility: hidden;
+        display: none !important;
+        pointer-events: none;
+        height: 0;
+        width: 0;
+        margin: 0;
+      }
+      &:disabled {
+        color: var(--theme-darker-color);
+      }
+
+      &.number::-webkit-outer-spin-button,
+      &.number::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+      }
+    }
+
+    input[type='number'] {
+      appearance: textfield;
+    }
+  }
+</style>