@hanzo/ui 0.5.24 → 0.6.16

package/src/components/ShowMore.svelte

@@ -0,0 +1,99 @@
+<!--
+// 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 Label from './Label.svelte'
+  import ui from '../plugin'
+  import { resizeObserver } from '../resize'
+
+  export let limit: number = 240
+  export let ignore: boolean = false
+  export let fixed: boolean = false
+
+  let cHeight: number
+  let bigger: boolean = false
+  let crop: boolean = false
+
+  const toggle = (): void => {
+    crop = !crop
+  }
+
+  $: if (cHeight > limit && !bigger) bigger = true
+  $: if (bigger && !ignore) crop = true
+</script>
+
+<div class="clear-mins">
+  <div
+    use:resizeObserver={(element) => {
+      cHeight = element.clientHeight
+    }}
+    class="showMore-content"
+    class:crop={!ignore && crop}
+    class:full={bigger && !ignore && !crop}
+    style={!ignore && crop ? `max-height: ${limit}px;` : ''}
+  >
+    <slot />
+  </div>
+
+  {#if !ignore && bigger && !fixed}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="showMore" class:outter={cHeight > limit} on:click={toggle}>
+      <Label label={cHeight > limit ? ui.string.ShowLess : ui.string.ShowMore} />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .showMore-content {
+    max-height: max-content;
+
+    &.crop {
+      overflow: hidden;
+      max-height: 15rem;
+      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0, black 5rem);
+    }
+    &.full {
+      margin-bottom: 2.25rem;
+    }
+  }
+
+  .showMore {
+    position: absolute;
+    left: 50%;
+    bottom: 0.25rem;
+    padding: 0.5rem 1rem;
+    transform: translateX(-50%);
+
+    word-wrap: none;
+    font-size: 0.75rem;
+    color: var(--theme-caption-color);
+    background: var(--theme-list-row-color);
+    border: 0.5px solid var(--theme-list-divider-color);
+    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+    border-radius: 2.5rem;
+    // z-index: 1;
+    user-select: none;
+    cursor: pointer;
+
+    &.outter {
+      bottom: 0.25rem;
+      transform: translateX(-50%);
+    }
+    &:hover {
+      background: var(--theme-list-button-color);
+    }
+  }
+</style>

package/src/components/Spinner.svelte

@@ -0,0 +1,72 @@
+<!--
+// 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 { ButtonSize } from '../types'
+
+  export let size: ButtonSize = 'medium'
+</script>
+
+<div class="spinner spinner-{size}">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" y1="22" x2="0" y2="2">
+      <stop offset="0" stop-color={'var(--caption-color)'} />
+      <stop offset="1" stop-color={'var(--caption-color)'} stop-opacity="0" />
+    </linearGradient>
+    <g>
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="rotate"
+        from="0 12 12"
+        to="360 12 12"
+        dur="1s"
+        repeatCount="indefinite"
+      />
+      <path
+        d="M12,22.5C6.2,22.5,1.5,17.8,1.5,12C1.5,6.2,6.2,1.5,12,1.5v-1C5.6,0.5,0.5,5.6,0.5,12c0,6.4,5.1,11.5,11.5,11.5V22.5z"
+        fill="var(--caption-color)"
+      />
+      <path
+        d="M12,0.5v1c5.8,0,10.5,4.7,10.5,10.5c0,5.8-4.7,10.5-10.5,10.5v1c6.4,0,11.5-5.1,11.5-11.5C23.5,5.6,18.4,0.5,12,0.5z"
+        fill="url(#a)"
+      />
+    </g>
+  </svg>
+</div>
+
+<style lang="scss">
+  .spinner {
+    &-inline {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+    &-small {
+      width: 1rem;
+      height: 1rem;
+    }
+    &-medium {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    &-large {
+      width: 2rem;
+      height: 2rem;
+    }
+    &-x-large {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+</style>

package/src/components/SplitButton.svelte

@@ -0,0 +1,100 @@
+<!--
+// 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 { ComponentType } from 'svelte'
+  import { tooltip } from '../tooltips'
+  import type { AnySvelteComponent, ButtonBaseSize, IconProps, LabelAndProps } from '../types'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+  import Spinner from './Spinner.svelte'
+
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let title: string | undefined = undefined
+  export let secondTitle: string | undefined = undefined
+  export let kind: 'secondary' | 'primary' = 'secondary'
+  export let size: ButtonBaseSize = 'medium'
+  export let disabled: boolean = false
+  export let loading: boolean = false
+  export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconProps: IconProps = {}
+  export let secondIcon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let secondIconProps: IconProps = {}
+  export let width: string | undefined = undefined
+  export let height: string | undefined = undefined
+  export let pressed: boolean = false
+  export let secondPressed: boolean = false
+  export let showTooltip: LabelAndProps | undefined = undefined
+  export let secondShowTooltip: LabelAndProps | undefined = undefined
+  export let action: (e: MouseEvent) => void = () => {}
+  export let secondAction: (e: MouseEvent) => void = () => {}
+  export let noFocus: boolean = false
+  export let separate: boolean = false
+
+  $: iconSize = iconProps?.size !== undefined ? iconProps.size : 'full'
+  $: secondIconSize = secondIconProps?.size !== undefined ? secondIconProps.size : 'full'
+</script>
+
+<div
+  class="hulySplitButton-container {kind} {size}"
+  class:no-focus={noFocus}
+  class:disabled
+  class:separate
+  style:width
+  style:height
+>
+  {#if loading}
+    <Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
+  {:else}
+    <button
+      use:tooltip={showTooltip}
+      class="hulySplitButton-main"
+      class:pressed
+      {disabled}
+      {title}
+      type={kind === 'primary' ? 'submit' : 'button'}
+      on:click|stopPropagation={action}
+    >
+      {#if icon || $$slots.icon}
+        <div class="btn-icon pointer-events-none">
+          {#if icon}<Icon bind:icon size={iconSize} {iconProps} />{/if}
+          {#if $$slots.icon}<slot name="icon" />{/if}
+        </div>
+      {/if}
+      {#if label}
+        <span class="overflow-label label pointer-events-none">
+          <Label {label} params={labelParams} />
+        </span>
+      {/if}
+      {#if $$slots.content}<slot name="content" />{/if}
+    </button>
+    <button
+      use:tooltip={secondShowTooltip}
+      class="hulySplitButton-second"
+      class:pressed={secondPressed}
+      {disabled}
+      title={secondTitle}
+      on:click|stopPropagation={secondAction}
+    >
+      {#if secondIcon || $$slots.secondIcon}
+        <div class="btn-icon pointer-events-none">
+          {#if secondIcon}<Icon bind:icon={secondIcon} size={secondIconSize} iconProps={secondIconProps} />{/if}
+          {#if $$slots.secondIcon}<slot name="secondIcon" />{/if}
+        </div>
+      {/if}
+    </button>
+  {/if}
+</div>

package/src/components/StateTag.svelte

@@ -0,0 +1,79 @@
+<!--
+//
+// 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 { IntlString } from '@hanzo/platform'
+
+  import Label from './Label.svelte'
+  import { StateType } from '../types'
+
+  type LabelString = $$Generic<IntlString>
+  type LabelParams = LabelString extends IntlString<infer Params> ? Params : Record<string, any>
+
+  export let type: StateType
+  export let label: LabelString
+  export let params: LabelParams = {} as unknown as LabelParams
+</script>
+
+<div
+  class="root"
+  class:ghost={type === StateType.Ghost}
+  class:negative={type === StateType.Negative}
+  class:positive={type === StateType.Positive}
+  class:primary={type === StateType.Primary}
+  class:regular={type === StateType.Regular}
+>
+  <Label {label} {params} />
+</div>
+
+<style lang="scss">
+  .root {
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    display: flex;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    padding: 0.125rem 0.5rem;
+    width: max-content;
+
+    &.ghost {
+      background: var(--theme-state-ghost-background-color);
+      border-color: var(--theme-state-ghost-border-color);
+      color: var(--theme-state-ghost-color);
+    }
+    &.negative {
+      background: var(--theme-state-negative-background-color);
+      border-color: var(--theme-state-negative-border-color);
+      color: var(--theme-state-negative-color);
+    }
+    &.positive {
+      background: var(--theme-state-positive-background-color);
+      border-color: var(--theme-state-positive-border-color);
+      color: var(--theme-state-positive-color);
+    }
+    &.primary {
+      background: var(--theme-state-primary-background-color);
+      border-color: var(--theme-qms-primary-ghost-border-color);
+      color: var(--theme-state-primary-color);
+    }
+    &.regular {
+      background: var(--theme-state-regular-background-color);
+      border-color: var(--theme-state-regular-border-color);
+      color: var(--theme-state-regular-color);
+    }
+  }
+</style>

package/src/components/Status.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Status } from '@hanzo/platform'
+  import { Severity } from '@hanzo/platform'
+
+  import Info from './icons/Info.svelte'
+  import Label from './Label.svelte'
+
+  export let status: Status
+  export let overflow: boolean = true
+</script>
+
+<div class="flex-center container {status.severity}" class:overflow-label={overflow}>
+  {#if status.severity !== Severity.OK}
+    <Info size={'small'} />
+    <span class="text-sm ml-2" class:overflow-label={overflow}>
+      <Label label={status.code} params={status.params} />
+    </span>
+  {/if}
+</div>
+
+<style lang="scss">
+  .container {
+    user-select: none;
+    font-size: 14px;
+    color: var(--theme-content-color);
+    &.WARNING {
+      color: yellow;
+    }
+    &.ERROR {
+      color: var(--system-error-color);
+    }
+  }
+</style>

package/src/components/StepsDialog.svelte

@@ -0,0 +1,290 @@
+<!--
+// 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 { Asset, IntlString } from '@hanzo/platform'
+  import { createEventDispatcher, SvelteComponent } from 'svelte'
+  import ui from '../plugin'
+  import {
+    AnySvelteComponent,
+    DialogStep,
+    Panel,
+    Icon,
+    deviceOptionsStore as deviceInfo,
+    Scroller,
+    Label,
+    Button,
+    Component
+  } from '..'
+
+  export let steps: readonly DialogStep[]
+  export let stepIndex = 0
+  export let doneLabel: IntlString = ui.string.Save
+  export let title: IntlString
+  export let stepsName: IntlString | undefined = undefined
+  export let stepsDescription: IntlString | undefined = undefined
+  export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let useMaxWidth: boolean | undefined = undefined
+  export let panelWidth = 0
+  export let innerWidth = 0
+  export let allowClose = true
+  export let floatAside = false
+
+  const dispatch = createEventDispatcher()
+
+  let step: SvelteComponent | undefined
+  let currentStepModel: DialogStep | undefined
+  let currentStepIndex = 0
+  let isStepValid = false
+  let isSaving = false
+
+  async function handleStepSelect (index: number) {
+    const newStepIndex = index < steps.length ? Math.max(0, index) : Math.max(0, steps.length - 1)
+
+    if (newStepIndex > currentStepIndex) {
+      await completeCurrentStep()
+    }
+
+    currentStepIndex = newStepIndex
+    isStepValid = false
+  }
+
+  function handleComponentChange (ev: CustomEvent<{ isValid?: boolean }>) {
+    isStepValid = !!ev.detail.isValid
+  }
+
+  async function handleDone () {
+    await completeCurrentStep()
+
+    dispatch('close')
+  }
+
+  async function completeCurrentStep () {
+    if (!step?.done) {
+      return
+    }
+
+    isSaving = true
+    try {
+      await step.done()
+    } finally {
+      isSaving = false
+    }
+  }
+
+  $: currentStepModel = steps[currentStepIndex]
+  $: stepIndex = currentStepIndex
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<Panel bind:panelWidth bind:innerWidth bind:useMaxWidth {floatAside} {allowClose} isAside isHeader on:close>
+  <svelte:fragment slot="title">
+    {@const additionalStepInfo = currentStepModel?.additionalInfo}
+
+    <div class="popupPanel-title__content-container antiTitle" style:min-height={'2.5rem'}>
+      <div class="icon-wrapper">
+        {#if icon}<div class="wrapped-icon"><Icon {icon} size="medium" /></div>{/if}
+        <div class="title-wrapper">
+          {#if title}<span class="wrapped-title"><Label label={title} /></span>{/if}
+          {#if additionalStepInfo}<span class="wrapped-subtitle">{additionalStepInfo}</span>{/if}
+        </div>
+      </div>
+    </div>
+  </svelte:fragment>
+
+  <svelte:fragment slot="utils">
+    {@const isDone = currentStepIndex === steps.length - 1}
+
+    {#if currentStepIndex > 0}
+      <Button
+        kind="regular"
+        label={ui.string.Back}
+        on:click={async () => {
+          await handleStepSelect(currentStepIndex - 1)
+        }}
+      />
+    {/if}
+    <Button
+      kind="primary"
+      label={isDone ? doneLabel : ui.string.Next}
+      disabled={!isStepValid}
+      loading={isSaving}
+      on:click={isDone
+        ? handleDone
+        : async () => {
+          await handleStepSelect(currentStepIndex + 1)
+        }}
+    />
+  </svelte:fragment>
+
+  <svelte:fragment slot="header">
+    {@const stepName = currentStepModel?.name}
+    {@const stepDescription = currentStepModel?.description}
+
+    <div class="header header-row between">
+      {#if stepName}<h4 class="no-margin"><Label label={stepName} /></h4>{/if}
+      {#if stepDescription}
+        <div class="buttons-group xsmall-gap" style:align-self="flex-start">
+          <span class="lines-limit-2"><Label label={stepDescription} /></span>
+        </div>
+      {/if}
+    </div>
+  </svelte:fragment>
+
+  <svelte:fragment slot="aside">
+    <Scroller>
+      <div class="default-padding">
+        {#if stepsName}<h4 class="no-margin"><Label label={stepsName} /></h4>{/if}
+        <ol>
+          {#each steps as step, index}
+            {@const selected = index === currentStepIndex}
+            {@const disabled = index > currentStepIndex && !(index === currentStepIndex + 1 && isStepValid)}
+            {@const fulfilled = index < currentStepIndex}
+
+            <li
+              class="overflow-label"
+              class:selected
+              class:disabled
+              class:fulfilled
+              title={step.name}
+              on:click={disabled || selected
+                ? undefined
+                : async () => {
+                  await handleStepSelect(index)
+                }}
+            >
+              <Label label={step.name} />
+            </li>
+          {/each}
+        </ol>
+        {#if stepsDescription}
+          <span class="content-dark-color"><Label label={stepsDescription} /></span>
+        {/if}
+      </div>
+    </Scroller>
+  </svelte:fragment>
+
+  {#if currentStepModel?.component}
+    {@const { component, props } = currentStepModel}
+    {@const isMobile = $deviceInfo.isMobile}
+
+    <Scroller>
+      <div
+        class="clear-mins flex-no-shrink"
+        class:popupPanel-body__mobile-content={isMobile}
+        class:popupPanel-body__main-content={!isMobile}
+        class:py-8={!isMobile}
+        class:max={!isMobile && useMaxWidth}
+      >
+        {#if typeof component === 'string'}
+          <Component bind:innerRef={step} is={component} {props} on:change={handleComponentChange} />
+        {:else}
+          <svelte:component this={component} bind:this={step} {...props} on:change={handleComponentChange} />
+        {/if}
+      </div>
+    </Scroller>
+  {/if}
+</Panel>
+
+<style lang="scss">
+  ol {
+    list-style: none;
+    counter-reset: item;
+    margin: 2rem 0;
+  }
+
+  li {
+    counter-increment: item;
+    transition-property: border, background-color, color, box-shadow;
+    transition-duration: 0.15s;
+    color: var(--content-color);
+    border-radius: 1rem 0.25rem 0.25rem 1rem;
+    padding-right: 0.5rem;
+
+    &:not(:last-child) {
+      margin-bottom: 0.75rem;
+    }
+
+    &:hover {
+      background-color: var(--button-bg-hover);
+      color: var(--caption-color);
+      cursor: pointer;
+
+      &::before {
+        color: var(--caption-color);
+      }
+    }
+
+    &.selected {
+      color: var(--accent-color);
+      background-color: var(--noborder-bg-color);
+      cursor: default;
+
+      &::before {
+        color: var(--accent-color);
+        background-color: var(--primary-bg-color);
+      }
+    }
+
+    &.fulfilled {
+      background-color: var(--accent-bg-color);
+
+      &::before {
+        background-color: var(--primary-button-outline);
+      }
+    }
+
+    &.disabled {
+      color: var(--dark-color);
+      cursor: not-allowed;
+
+      &::before {
+        color: var(--dark-color);
+        background-color: var(--trans-content-05);
+      }
+
+      &:hover {
+        background-color: inherit;
+        color: none;
+      }
+    }
+
+    &::before {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 1rem;
+      content: counter(item);
+      color: var(--content-color);
+      background-color: var(--trans-content-10);
+      border-radius: 100%;
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+
+  .header {
+    display: flex;
+    gap: 0.25rem 1rem;
+  }
+
+  .default-padding {
+    padding: 0.75rem 1.5rem;
+  }
+
+  .no-margin {
+    margin: 0;
+  }
+</style>