@hanzo/ui 0.5.24 → 0.6.15

package/src/components/wizard/ModernWizardDialog.svelte

@@ -0,0 +1,144 @@
+<!--
+// 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 Button from '../Button.svelte'
+  import Scroller from '../Scroller.svelte'
+  import WizardBar from './ModernWizardBar.svelte'
+  import ModernDialog from '../ModernDialog.svelte'
+  import { IWizardStep } from '../../types'
+  import ui from '../../plugin'
+  import ArrowLeft from '../icons/ArrowLeft.svelte'
+  import ArrowRight from '../icons/ArrowRight.svelte'
+
+  export let loading: boolean = false
+  export let label: IntlString
+  export let canSubmit: boolean = true
+  export let canProceed: boolean = true
+  export let submitLabel: IntlString
+  export let steps: ReadonlyArray<IWizardStep>
+  export let selectedStep: string
+
+  const dispatch = createEventDispatcher()
+
+  $: selectedIdx = hasSelectedStep() ? steps.findIndex((s) => s.id === selectedStep) : -1
+  $: hasBack = selectedIdx > 0
+  $: hasNext = selectedIdx < steps.length - 1
+  $: hasSubmit = selectedIdx === steps.length - 1
+
+  function hasSelectedStep (): boolean {
+    return selectedStep !== undefined && selectedStep !== ''
+  }
+
+  function handleBack (): void {
+    if (!hasSelectedStep()) {
+      return
+    }
+
+    const currIdx = steps.findIndex((s) => s.id === selectedStep)
+    const newIdx = currIdx > 0 ? currIdx - 1 : 0
+
+    dispatch('stepChanged', steps[newIdx].id)
+  }
+
+  function handleNext (): void {
+    if (!hasSelectedStep()) {
+      return
+    }
+
+    const currIdx = steps.findIndex((s) => s.id === selectedStep)
+    const newIdx = currIdx < steps.length - 1 ? currIdx + 1 : steps.length - 1
+
+    dispatch('stepChanged', steps[newIdx].id)
+  }
+
+  function handleSubmit (): void {
+    dispatch('submit')
+  }
+</script>
+
+<ModernDialog {loading} {label} {canSubmit} noContentPadding={true} scrollableContent={false} on:submit on:close>
+  <div class="root">
+    <div class="side">
+      <Scroller>
+        <WizardBar {steps} {selectedStep} />
+      </Scroller>
+    </div>
+    <div class="content">
+      <Scroller>
+        <div class="contentBody">
+          <slot />
+        </div>
+      </Scroller>
+    </div>
+  </div>
+
+  <div slot="footerExtra">
+    {#if hasBack}
+      <Button kind="regular" size="large" label={ui.string.Back} icon={ArrowLeft} on:click={handleBack} {loading} />
+    {/if}
+  </div>
+
+  <div slot="footerButtons">
+    {#if hasSubmit}
+      <Button
+        kind="positive"
+        size="large"
+        label={submitLabel}
+        disabled={!canSubmit}
+        {loading}
+        on:click={handleSubmit}
+      />
+    {/if}
+    {#if hasNext}
+      <Button
+        kind="primary"
+        size="large"
+        label={ui.string.NextStep}
+        iconRight={ArrowRight}
+        iconRightProps={{ size: 'small' }}
+        {loading}
+        disabled={!canProceed}
+        on:click={handleNext}
+      />
+    {/if}
+  </div>
+</ModernDialog>
+
+<style lang="scss">
+  .root {
+    color: var(--theme-text-primary-color);
+    width: 100%;
+    min-height: 0;
+    display: flex;
+    align-items: stretch;
+  }
+
+  .side {
+    flex: 0 0 12rem;
+    padding: 1.5rem;
+    min-width: 0;
+  }
+
+  .content {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .contentBody {
+    padding: 1.5rem;
+  }
+</style>

package/src/components/wizard/Wizard.svelte

@@ -0,0 +1,59 @@
+<!--
+// 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 { getPlatformColor } from '../../colors'
+  import { Component, WizardModel, WizardItemPosition, themeStore } from '../..'
+  import ScrollerBar from '../ScrollerBar.svelte'
+  import WizardStep from './WizardStep.svelte'
+
+  export let items: readonly WizardModel[]
+  export let selected = 0
+  export let gap: 'none' | 'small' | 'big' = 'none'
+
+  const COLOR = 9
+
+  let divScroll: HTMLElement
+  let selectedItem: WizardModel | undefined
+
+  function getPosition (n: number): WizardItemPosition {
+    if (n === 0) return 'start'
+    else if (n === items.length - 1) return 'end'
+    else return 'middle'
+  }
+
+  $: selectedItem = items[selected]
+</script>
+
+<ScrollerBar {gap} bind:scroller={divScroll}>
+  {#each items as item, i}
+    <WizardStep
+      label={item.label}
+      position={getPosition(i)}
+      positionState={selected === i ? 'current' : i < selected ? 'prev' : 'next'}
+      prevColor={getPlatformColor(COLOR, $themeStore.dark)}
+      currentColor={getPlatformColor(COLOR, $themeStore.dark)}
+      nextColor="var(--trans-content-10)"
+    />
+  {/each}
+</ScrollerBar>
+
+{#if selectedItem}
+  {#if typeof selectedItem.component === 'string'}
+    <Component is={selectedItem.component} props={selectedItem.props} on:change />
+  {:else}
+    <svelte:component this={selectedItem.component} {...selectedItem.props} on:change />
+  {/if}
+{/if}

package/src/components/wizard/WizardStep.svelte

@@ -0,0 +1,144 @@
+<!--
+// 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 { IntlString, translate } from '@hanzo/platform'
+  import { afterUpdate } from 'svelte'
+  import { WizardItemPosition, WizardItemPositionState } from '../..'
+  import { themeStore } from '@hcengineering/theme'
+
+  export let label: IntlString
+  export let position: WizardItemPosition
+  export let positionState: WizardItemPositionState
+  export let currentColor = 'var(--trans-content-10)'
+  export let prevColor = 'var(--trans-content-10)'
+  export let nextColor = 'var(--trans-content-05)'
+
+  let lenght: number = 0
+  let text: HTMLElement
+  let divBar: HTMLElement
+  let svgBack: SVGElement
+  let style: string
+  let translation: string | undefined
+
+  function getStyle (state: typeof positionState) {
+    switch (state) {
+      case 'current':
+        return `fill: ${currentColor};`
+      case 'prev':
+        return `fill: ${prevColor};`
+      case 'next':
+        return `fill: ${nextColor};`
+    }
+  }
+
+  $: style = getStyle(positionState)
+  $: label && translate(label, {}, $themeStore.language).then((t) => (translation = t))
+
+  afterUpdate(() => {
+    if (text) lenght = text.clientWidth + 32 > 300 ? 300 : text.clientWidth + 32
+  })
+</script>
+
+{#if translation}
+  <div class="hidden-text text-md font-medium" bind:this={text}>{translation}</div>
+  {#if lenght > 0}
+    <div class="flex-row">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div bind:this={divBar} class="bar" on:click|stopPropagation>
+        <svg
+          bind:this={svgBack}
+          class="bar__back"
+          viewBox="0 0 {lenght} 24"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          {#if position === 'start'}
+            <path
+              class="bar__element"
+              {style}
+              d="M0,5.3C0,2.4,2.3,0,5.2,0h1.3h{lenght -
+                13}h1.2c0.5,0,1,0.3,1.2,0.9l4,10.7c0.1,0.3,0.1,0.7,0,0.9l-4,10.7c-0.2,0.5-0.7,0.9-1.2,0.9 l-1.2,0h-{lenght -
+                13}H5.2C2.3,24,0,21.6,0,18.7V5.3z"
+            />
+          {:else if position === 'middle'}
+            <path
+              class="bar__element"
+              {style}
+              d="M4,11.5L0.1,0.9C-0.1,0.5,0.2,0,0.6,0h5.8h{lenght -
+                13}h1.2c0.5,0,1,0.3,1.2,0.9l4,10.7c0.1,0.3,0.1,0.7,0,0.9l-4,10.7 c-0.2,0.5-0.7,0.9-1.2,0.9h-1.2h-{lenght -
+                13}H0.6c-0.5,0-0.8-0.5-0.6-0.9L4,12.5C4.1,12.2,4.1,11.8,4,11.5z"
+            />
+          {:else if position === 'end'}
+            <path
+              class="bar__element"
+              {style}
+              d="M4.1,11.5l-4-10.6C-0.1,0.5,0.2,0,0.7,0h{lenght - 7}C{lenght -
+                3},0,{lenght},2.4,{lenght},5.3v13.3c0,2.9-2.4,5.3-5.3,5.3h-{lenght}H0.6c-0.5,0-0.8-0.5-0.6-0.9L4,12.5C4.1,12.2,4.1,11.8,4,11.5z"
+            />
+          {:else}
+            <path
+              class="bar__element"
+              {style}
+              d="M0,5.3C0,2.4,2.3,0,5.2,0h1.3h{lenght}h1.3C49.7,0,52,2.4,52,5.3v13.3c0,2.9-2.3,5.3-5.2,5.3h-1.3h-{lenght}H5.2 C2.3,24,0,21.6,0,18.7V5.3z"
+            />
+          {/if}
+        </svg>
+        <div class="container"><div class="overflow-label">{translation}</div></div>
+      </div>
+    </div>
+  {/if}
+{/if}
+
+<style lang="scss">
+  .bar {
+    flex: 1 0 auto;
+    position: relative;
+    display: flex;
+    min-width: 0;
+    width: auto;
+
+    &__back {
+      width: auto;
+      padding: 1px 0.5px;
+      height: calc(1.5rem + 2px);
+    }
+    &__element {
+      fill: var(--accent-bg-color);
+      stroke: var(--divider-color);
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .container {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 0;
+      left: 0.5rem;
+      right: 0.5rem;
+      min-width: 0;
+      width: calc(100% - 1rem);
+      height: 100%;
+      font-weight: 500;
+      font-size: 0.8125rem;
+      color: var(--dark-color);
+      pointer-events: none;
+      color: var(--caption-color);
+    }
+  }
+</style>

package/src/focus.ts

@@ -0,0 +1,139 @@
+import { getContext, onDestroy, setContext } from 'svelte'
+
+/**
+ * @public
+ */
+export interface FocusManager {
+  next: (inc?: 1 | -1) => void
+  setFocus: (idx: number) => void
+  setFocusPos: (order: number) => void
+  updateFocus: (idx: number, order: number) => void
+
+  // Check if current manager has focus
+  hasFocus: () => boolean
+}
+
+class FocusManagerImpl implements FocusManager {
+  counter = 0
+  elements: Array<{
+    id: number
+    order: number
+    focus: () => boolean
+    isFocus: () => boolean
+    canBlur?: () => boolean
+  }> = []
+
+  current = 0
+  register (order: number, focus: () => boolean, isFocus: () => boolean, canBlur?: () => boolean): number {
+    const el = { id: this.counter++, order, focus, isFocus, canBlur }
+    this.elements.push(el)
+    this.sort()
+    return el.id
+  }
+
+  unregister (idx: number): void {
+    this.elements = this.elements.filter((it) => it.id !== idx)
+    this.sort()
+  }
+
+  sort (): void {
+    // this.needSort = 0
+    this.elements.sort((a, b) => {
+      return a.order - b.order
+    })
+  }
+
+  next (inc?: 1 | -1): void {
+    if (this.elements.length === 0) return
+    const current = this.elements[this.current]
+    if (!(current?.canBlur?.() ?? true)) {
+      return
+    }
+    for (let index = 0; index < this.elements.length; index++) {
+      this.current = this.current + (inc ?? 1)
+      const el = this.elements[Math.abs(this.current) % this.elements.length]
+      if (el?.focus()) {
+        return
+      }
+    }
+  }
+
+  setFocus (idx: number): void {
+    if (idx === -1) {
+      return
+    }
+    this.current = this.elements.findIndex((it) => it.id === idx) ?? 0
+    this.elements[Math.abs(this.current) % this.elements.length]?.focus()
+  }
+
+  setFocusPos (order: number): void {
+    if (order === -1) {
+      return
+    }
+    const idx = this.elements.findIndex((it) => it.order === order)
+    if (idx !== undefined) {
+      this.current = idx
+      this.elements[Math.abs(this.current) % this.elements.length]?.focus()
+    }
+  }
+
+  updateFocus (idx: number, order: number): void {
+    const el = this.elements.find((it) => it.id === idx)
+    if (el !== undefined) {
+      if (el.order !== order) {
+        el.order = order
+        this.sort()
+      }
+    }
+  }
+
+  hasFocus (): boolean {
+    for (const el of this.elements) {
+      if (el.isFocus()) {
+        return true
+      }
+    }
+    return false
+  }
+}
+
+/**
+ * @public
+ */
+export function createFocusManager (): FocusManager {
+  const mgr = new FocusManagerImpl()
+  setFocusManager(mgr)
+  return mgr
+}
+
+export function setFocusManager (manager: FocusManager): void {
+  setContext('ui.focus.elements', manager)
+}
+
+/**
+ * @public
+ */
+export function getFocusManager (): FocusManager | undefined {
+  return getContext('ui.focus.elements')
+}
+
+/**
+ * Register new focus reciever if order !== -1
+ * @public
+ */
+export function registerFocus (
+  order: number,
+  item: { focus: () => boolean, isFocus: () => boolean, canBlur?: () => boolean }
+): { idx: number, focusManager?: FocusManager } {
+  const focusManager = getFocusManager() as FocusManagerImpl
+  if (order === -1) {
+    return { idx: -1, focusManager }
+  }
+  const idx = focusManager?.register(order, item.focus, item.isFocus, item.canBlur) ?? -1
+  if (idx !== -1) {
+    onDestroy(() => {
+      focusManager.unregister(idx)
+    })
+  }
+  return { idx, focusManager }
+}