@hanzo/ui 0.5.24 → 0.6.16

package/src/components/ModernButton.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  //
+  // © 2023 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+
+  import type { Asset, IntlString } from '@hanzo/platform'
+  import { AnySvelteComponent, ButtonBaseSize, IconSize, LabelAndProps } from '../types'
+  import { ComponentType } from 'svelte'
+  import ButtonBase from './ButtonBase.svelte'
+
+  export let title: string | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let kind: 'primary' | 'secondary' | 'tertiary' | 'negative' = 'secondary'
+  export let size: ButtonBaseSize = 'large'
+  export let shape: 'rectangle' | 'round' = 'rectangle'
+  export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconProps: any | undefined = undefined
+  export let iconSize: IconSize | undefined = undefined
+  export let disabled: boolean = false
+  export let loading: boolean = false
+  export let pressed: boolean = false
+  export let hasMenu: boolean = false
+  export let noPrint: boolean = false
+  export let autoFocus: boolean = false
+  export let inheritFont: boolean = false
+  export let focusIndex = -1
+  export let tooltip: LabelAndProps | undefined = undefined
+  export let element: HTMLButtonElement | undefined = undefined
+  export let id: string | undefined = undefined
+  export let dataId: string | undefined = undefined
+</script>
+
+<ButtonBase
+  bind:element
+  type={'type-button'}
+  {title}
+  {shape}
+  {label}
+  {labelParams}
+  {kind}
+  {size}
+  {icon}
+  {iconProps}
+  {iconSize}
+  {loading}
+  {disabled}
+  {pressed}
+  {hasMenu}
+  {noPrint}
+  {inheritFont}
+  {focusIndex}
+  {tooltip}
+  {autoFocus}
+  {id}
+  {dataId}
+  on:click
+>
+  <slot />
+</ButtonBase>

package/src/components/ModernCheckbox.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  //
+  // © 2023 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  import type { IntlString } from '@hanzo/platform'
+  import { generateId } from '@hanzo/core'
+  import { Label } from '../..'
+
+  export let id: string = generateId()
+  export let label: string | undefined = undefined
+  export let labelIntl: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> | undefined = undefined
+  export let checked: boolean = false
+  export let indeterminate: boolean = false
+  export let disabled: boolean = false
+  export let error: boolean = false
+  export let required: boolean = false
+</script>
+
+<label class="checkbox-container" class:disabled>
+  <input type="checkbox" class="checkbox" {id} bind:checked {disabled} {indeterminate} {required} on:change />
+  <div class="checkbox-element" class:disabled class:error />
+  {#if label !== undefined || labelIntl !== undefined || $$slots.default !== undefined}
+    <div class="checkbox-label">
+      {#if labelIntl}<Label label={labelIntl} params={labelParams} />{:else}{label}{/if}
+      <slot />
+    </div>
+  {/if}
+  <slot name="after" />
+</label>
+
+<style lang="scss">
+  .checkbox-element {
+    position: relative;
+    flex-shrink: 0;
+    width: var(--spacing-2);
+    height: var(--spacing-2);
+    background-color: var(--selector-BackgroundColor);
+    border: 1px solid var(--selector-BorderColor);
+    border-radius: var(--extra-small-BorderRadius);
+  }
+  .checkbox-label {
+    color: var(--global-primary-TextColor);
+    user-select: none;
+  }
+  .checkbox {
+    overflow: hidden;
+    position: absolute;
+    margin: -1px;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    border: 0;
+    clip: rect(0 0 0 0);
+
+    &:checked + .checkbox-element,
+    &:indeterminate + .checkbox-element {
+      background-color: var(--selector-active-BackgroundColor);
+      border-color: var(--selector-active-BackgroundColor);
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0.625rem;
+        height: 0.5rem;
+        background-color: var(--selector-IconColor);
+        transform: translate(-50%, -50%);
+      }
+    }
+    &:checked + .checkbox-element::after {
+      clip-path: path(
+        'M9.7,0.5c0.4,0.4,0.4,1,0,1.4L4.1,7.8L0.3,4.2c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0L4,5l4.3-4.5C8.6,0.1,9.3,0.1,9.7,0.5z'
+      );
+    }
+    &:indeterminate + .checkbox-element::after {
+      clip-path: path('M0,4c0-0.6,0.4-1,1-1h8c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1H1C0.4,5,0,4.6,0,4z');
+    }
+    &:disabled + .checkbox-element {
+      box-shadow: none;
+      background-color: var(--selector-disabled-BackgroundColor);
+      border-color: var(--selector-disabled-BorderColor);
+
+      & + .checkbox-label {
+        color: var(--global-disabled-TextColor);
+      }
+    }
+    & + .checkbox-element.error {
+      border-color: var(--border-color-global-error-border-color);
+    }
+    &:focus + .checkbox-element {
+      outline: 2px solid var(--global-focus-BorderColor);
+      outline-offset: 2px;
+    }
+    &:required + .checkbox-element + .checkbox-label::after {
+      content: '*';
+      position: relative;
+      top: -0.125rem;
+      left: 0.125rem;
+      color: var(--global-error-TextColor);
+    }
+  }
+  .checkbox-container {
+    display: inline-flex;
+    gap: var(--spacing-1_5);
+    min-width: var(--spacing-2);
+    min-height: var(--spacing-2);
+
+    &:not(.disabled) {
+      cursor: pointer;
+
+      &:active .checkbox-element {
+        outline: 2px solid var(--global-focus-BorderColor);
+        outline-offset: 2px;
+      }
+      &:hover .checkbox-element {
+        box-shadow: 0 0 0 4px var(--selector-hover-overlay-BackgroundColor);
+      }
+    }
+  }
+</style>

package/src/components/ModernDialog.svelte

@@ -0,0 +1,258 @@
+<!--
+// 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">
+  // Note: migrated from QMS. Should be unified with the platform solutions eventually.
+  import { createEventDispatcher } from 'svelte'
+  import type { IntlString } from '@hanzo/platform'
+  import { AnySvelteComponent, ButtonKind } from '../types'
+  import Button from './Button.svelte'
+  import Label from './Label.svelte'
+  import Scroller from './Scroller.svelte'
+  import { resizeObserver } from '../resize'
+  import ui from '../plugin'
+  import Close from './icons/Close.svelte'
+  import Left from './icons/Left.svelte'
+
+  export let label: IntlString
+  export let labelProps: any | undefined = undefined
+  export let submitLabel: IntlString = ui.string.Submit
+  export let submitKind: ButtonKind = 'primary'
+  export let cancelLabel: IntlString = ui.string.Cancel
+  export let canSubmit: boolean = false
+  export let shouldSubmitOnEnter: boolean = false
+  export let shouldCloseOnCancel: boolean = true
+  export let hasBack: boolean = false
+  export let isForm: boolean = true
+  export let embedded: boolean = false
+  export let width: string | undefined = undefined
+  export let isFooterBorderHidden = false
+  export let loading = false
+  export let noContentPadding = false
+  export let scrollableContent = true
+  export let withoutFooter = false
+  export let closeIcon: AnySvelteComponent = Close
+  export let shadow: boolean = false
+  export let className: string = ''
+
+  const dispatch = createEventDispatcher()
+
+  function submit (): void {
+    dispatch('submit')
+  }
+
+  function close (): void {
+    dispatch('close')
+  }
+
+  function cancel (): void {
+    dispatch('cancel')
+
+    if (shouldCloseOnCancel) {
+      close()
+    }
+  }
+</script>
+
+<svelte:element
+  this={isForm ? 'form' : 'div'}
+  class="root {className}"
+  class:shadow
+  class:embedded
+  on:submit|preventDefault={isForm && shouldSubmitOnEnter ? submit : undefined}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+  style:width
+>
+  <div class="header">
+    <slot name="headerLeft">
+      <div class="headerLeft">
+        <div class="flex-row-center flex-gap-2">
+          {#if hasBack}
+            <div class="back">
+              <Button
+                icon={Left}
+                iconProps={{ size: 'small' }}
+                size="small"
+                kind="ghost"
+                label={ui.string.Back}
+                on:click={() => dispatch('back')}
+              />
+            </div>
+          {/if}
+          <slot name="headerExtra" />
+        </div>
+        <span class="label"><Label {label} params={labelProps} /></span>
+      </div>
+    </slot>
+    <slot name="headerRight">
+      {#if !embedded}
+        <Button icon={closeIcon} iconProps={{ size: 'medium' }} kind="ghost" size="small" on:click={close} />
+      {/if}
+    </slot>
+  </div>
+
+  {#if scrollableContent}
+    <Scroller>
+      <div class="content" class:noPadding={noContentPadding}>
+        {#if !noContentPadding}
+          <div class="htPadding" />
+        {/if}
+        <slot />
+        {#if !noContentPadding}
+          <div class="hbPadding" />
+        {/if}
+      </div>
+    </Scroller>
+  {:else}
+    <div class="content" class:noPadding={noContentPadding}>
+      {#if !noContentPadding}
+        <div class="htPadding" />
+      {/if}
+      <slot />
+      {#if !noContentPadding}
+        <div class="hbPadding" />
+      {/if}
+    </div>
+  {/if}
+
+  {#if !withoutFooter || $$slots.footerExtra || $$slots.footerButtons || $$slots.btnsXtraStart || $$slots.btnsXtraBetween || $$slots.btnsXtraEnd}
+    <div class="footer tweak-buttons" class:footerWithBorder={!isFooterBorderHidden}>
+      <slot name="footerExtra">
+        <div />
+      </slot>
+
+      <div class="footerButtons">
+        <slot name="footerButtons">
+          <slot name="btnsXtraStart" />
+          <Button kind="regular" size="large" label={cancelLabel} on:click={cancel} {loading} />
+          <slot name="btnsXtraBetween" />
+          <Button
+            kind={submitKind}
+            size="large"
+            label={submitLabel}
+            focusIndex={10001}
+            disabled={!canSubmit}
+            on:click={submit}
+            {loading}
+          />
+          <slot name="btnsXtraEnd" />
+        </slot>
+      </div>
+    </div>
+  {/if}
+</svelte:element>
+
+<style lang="scss">
+  .root {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 58.25rem;
+    max-height: 80vh;
+    border-radius: 1.25rem;
+    background-color: var(--theme-dialog-background-color);
+
+    &.embedded {
+      width: 100%;
+      height: 100%;
+      max-height: unset;
+      border-radius: 0;
+    }
+  }
+
+  .shadow {
+    box-shadow: var(--theme-popup-shadow);
+  }
+
+  .header {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    padding: 1.25rem 2rem 0.875rem 2.5rem;
+    border-bottom: 1px solid var(--theme-dialog-border-color);
+  }
+
+  .headerLeft {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .back {
+    :global(button) {
+      color: var(--theme-dialog-back-color) !important;
+      padding-left: 0 !important;
+    }
+  }
+
+  .label {
+    font-size: 1.25rem;
+    color: var(--theme-caption-color);
+  }
+
+  // we need these elements as paddings because Scroller doesn't respect css padding
+  .htPadding {
+    width: 100%;
+    height: 1.25rem;
+  }
+
+  .hbPadding {
+    width: 100%;
+    height: 2rem;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 0 2.5rem 0 2.5rem;
+
+    &.noPadding {
+      padding: 0;
+    }
+  }
+
+  .footer {
+    flex: 0 0 auto;
+    height: 4.875rem;
+    padding: 1.25rem 2.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &.footerWithBorder {
+      border-top: 1px solid var(--theme-dialog-border-color);
+    }
+  }
+
+  .footerButtons {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  // TODO: remove when supported on the platform
+  .tweak-buttons {
+    :global(button) {
+      min-width: 6.25rem !important;
+    }
+  }
+</style>

package/src/components/ModernEditbox.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+  //
+  // © 2023 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+
+  import { IntlString, translateCB } from '@hanzo/platform'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import { themeStore } from '..'
+  import { registerFocus } from '../focus'
+  import Label from './Label.svelte'
+
+  export let label: IntlString
+  export let value: string | undefined = undefined
+  export let kind: 'default' | 'ghost' = 'default'
+  export let size: 'small' | 'medium' | 'large' = 'small'
+  export let disabled: boolean = false
+  export let error: boolean = false
+  export let password: boolean = false
+  export let limit: number = 0
+  export let element: HTMLInputElement | undefined = undefined
+  export let autoFocus: boolean = false
+  export let autoAction: boolean = true
+  export let width: string = ''
+  export let style: string = ''
+
+  const dispatch = createEventDispatcher()
+
+  $: maxlength = limit === 0 ? null : limit
+
+  let placeholderStr: string = ''
+  $: translateCB(label, {}, $themeStore.language, (r) => {
+    placeholderStr = r
+  })
+  $: labeled = kind === 'default' && size === 'large'
+  $: placeholder = labeled ? ' ' : placeholderStr
+
+  onMount(() => {
+    if (autoFocus && element) {
+      autoFocus = false
+      element.focus()
+    }
+  })
+
+  // Focusable control with index
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      element?.focus()
+      return element != null
+    },
+    isFocus: () => document.activeElement === element
+  })
+  const updateFocus = () => {
+    focusManager?.setFocus(idx)
+  }
+  $: if (element) {
+    element.addEventListener('focus', updateFocus)
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<svelte:element
+  this={autoAction ? 'label' : 'div'}
+  class="editbox-wrapper {kind} {size}"
+  class:error
+  class:disabled
+  {style}
+  style:width
+  on:click|stopPropagation={() => {
+    if (!autoAction) element?.focus()
+  }}
+>
+  {#if size !== 'large' && $$slots.default}
+    <slot />
+  {/if}
+  {#if password}
+    <input
+      bind:this={element}
+      type="password"
+      class="font-regular-14"
+      class:labeled
+      {style}
+      style:width
+      bind:value
+      autocomplete="off"
+      {placeholder}
+      spellcheck="false"
+      {disabled}
+      {maxlength}
+      on:change
+      on:keyup
+      on:keydown
+      on:input
+      on:blur={() => {
+        dispatch('blur', value)
+      }}
+    />
+  {:else}
+    <input
+      bind:this={element}
+      type="text"
+      class="font-regular-14"
+      class:labeled
+      {style}
+      style:width
+      bind:value
+      autocomplete="off"
+      {placeholder}
+      spellcheck="false"
+      {disabled}
+      {maxlength}
+      on:change
+      on:keyup
+      on:keydown
+      on:input
+      on:blur={() => {
+        dispatch('blur', value)
+      }}
+    />
+  {/if}
+  {#if labeled}<div class="font-regular-14 label"><Label {label} /></div>{/if}
+</svelte:element>
+
+<style lang="scss">
+  .editbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-0_75);
+    min-width: 0;
+    border-radius: var(--medium-BorderRadius);
+
+    &.default {
+      background-color: var(--input-BackgroundColor);
+      box-shadow: inset 0 0 0 1px var(--input-BorderColor);
+
+      &.small {
+        padding: var(--spacing-1) var(--spacing-1_5);
+        height: var(--global-small-Size);
+      }
+      &.medium {
+        padding: var(--spacing-1_5) var(--spacing-2);
+        height: var(--global-medium-Size);
+      }
+      &.large {
+        position: relative;
+        padding: 0 var(--spacing-2);
+        height: var(--global-extra-large-Size);
+      }
+    }
+    &.ghost {
+      &.small,
+      &.medium {
+        // medium/ghost - not designed
+        padding: var(--spacing-1_5) var(--spacing-2);
+        height: var(--spacing-5);
+      }
+      &.large {
+        padding: var(--spacing-1) var(--spacing-2);
+        height: var(--spacing-6);
+
+        input {
+          font-weight: 500;
+          font-size: 1.5rem;
+        }
+      }
+    }
+
+    &.error {
+      box-shadow: inset 0 0 0 1px var(--input-error-BorderColor);
+    }
+    &:not(.disabled) {
+      cursor: text;
+
+      &.default {
+        input::placeholder {
+          color: var(--input-PlaceholderColor);
+        }
+        &:active,
+        &:focus-within {
+          background-color: var(--input-BackgroundColor);
+          outline: 2px solid var(--global-focus-BorderColor);
+          outline-offset: 2px;
+        }
+        &:hover {
+          background-color: var(--input-hover-BackgroundColor);
+        }
+      }
+      &.ghost input::placeholder {
+        color: var(--input-PlaceholderColor);
+      }
+      &:hover input:not(:focus)::placeholder {
+        color: var(--input-hover-PlaceholderColor);
+      }
+      &.default:active input::placeholder,
+      input:focus::placeholder {
+        color: var(--input-focus-PlaceholderColor);
+      }
+    }
+    &.disabled {
+      &,
+      input {
+        cursor: not-allowed;
+      }
+      input::placeholder {
+        color: var(--input-PlaceholderColor);
+      }
+      &.default {
+        background-color: transparent;
+      }
+      &.ghost {
+        box-shadow: inset 0 0 0 1px var(--input-BorderColor);
+      }
+    }
+
+    input {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      text-overflow: ellipsis;
+      color: var(--input-TextColor);
+      caret-color: var(--global-focus-BorderColor);
+      background-color: transparent;
+      border: none;
+      outline: none;
+      appearance: none;
+
+      &.labeled {
+        height: 100%;
+        padding-top: var(--spacing-3_5);
+        padding-bottom: var(--spacing-1_5);
+      }
+    }
+
+    .label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      padding: var(--spacing-2_5) var(--spacing-2);
+      font-size: 0.875rem;
+      color: var(--input-LabelColor);
+      transition:
+        padding-top 0.2s,
+        font-size 0.2s;
+      pointer-events: none;
+      user-select: none;
+    }
+    input:focus + .label,
+    input:not(:placeholder-shown) + .label {
+      padding-top: var(--spacing-1_5);
+      font-size: 0.75rem;
+      color: var(--input-filled-LabelColor);
+    }
+  }
+</style>