@hanzo/ui 0.5.24 → 0.6.16

package/src/components/Panel.svelte

@@ -0,0 +1,324 @@
+<!--
+// Copyright © 2022, 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 { afterUpdate, createEventDispatcher, onMount } from 'svelte'
+  import {
+    deviceOptionsStore as deviceInfo,
+    Separator,
+    defineSeparators,
+    resizeObserver,
+    Button,
+    ButtonGroup,
+    Scroller,
+    panelSeparators,
+    ButtonItem,
+    Header,
+    HeaderAdaptive
+  } from '../../'
+  import IconClose from './icons/Close.svelte'
+  import IconDetails from './icons/Details.svelte'
+  import IconMaxWidth from './icons/MaxWidth.svelte'
+  import IconMinWidth from './icons/MinWidth.svelte'
+  import IconScale from './icons/Scale.svelte'
+  import IconScaleFull from './icons/ScaleFull.svelte'
+
+  import plugin from '../plugin'
+
+  export let innerWidth: number = 0
+  export let panelWidth: number = 0
+  export let isHeader: boolean = true
+  export let isAside: boolean = true
+  export let isFullSize: boolean = false
+  export let withoutTitle: boolean = false
+  export let floatAside: boolean = false
+  export let allowClose: boolean = true
+  export let embedded: boolean = false
+  export let useMaxWidth: boolean | undefined = undefined
+  export let customAside: ButtonItem[] | undefined = undefined
+  export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside
+  export let printHeader = true
+  export let printAside = false
+  export let adaptive: HeaderAdaptive = 'default'
+  export let hideBefore: boolean = false
+  export let hideSearch: boolean = true
+  export let hideActions: boolean = false
+  export let hideExtra: boolean = false
+  export let overflowExtra: boolean = false
+
+  export function getAside (): string | boolean {
+    if (customAside) return selectedAside
+    return asideShown
+  }
+  export function setAside (id: string | boolean): void {
+    if (typeof id === 'string' && customAside) {
+      const i = customAside.findIndex((as) => as.id === id)
+      if (i === -1) return
+      handleSelectAside({ detail: id })
+    } else {
+      asideShown = id !== false
+      hideAside = !asideShown
+      if (id === false) selectedAside = false
+    }
+  }
+
+  const dispatch = createEventDispatcher()
+
+  let el: HTMLElement
+  let asideFloat: boolean = false
+  let asideShown: boolean = selectedAside !== false
+  let hideAside: boolean = !asideShown
+  let fullSize: boolean = false
+  let oldAside: string | boolean = selectedAside
+
+  $: if (typeof selectedAside === 'string' && oldAside !== selectedAside) oldAside = selectedAside
+  $: setAside(selectedAside)
+  $: if (el !== undefined) {
+    panelWidth = el.clientWidth
+    checkPanel()
+  }
+
+  let oldWidth = ''
+  let hideTimer: any | undefined
+
+  const checkPanel = (): void => {
+    const k = `${panelWidth}-${asideFloat}`
+    if (oldWidth === k) {
+      return
+    }
+    oldWidth = k
+    if (floatAside) {
+      asideFloat = true
+    } else if (panelWidth <= 900 && !asideFloat) {
+      asideFloat = true
+      if (asideShown) {
+        asideShown = false
+        if (customAside) handleSelectAside({ detail: false }, false)
+      }
+    } else if (panelWidth > 900) {
+      if (asideFloat) asideFloat = false
+      if (!asideShown && !hideAside) {
+        asideShown = true
+        if (customAside) handleSelectAside({ detail: oldAside }, false)
+      }
+    }
+  }
+
+  afterUpdate(() => {
+    if (hideTimer) {
+      clearTimeout(hideTimer)
+    }
+    hideTimer = setTimeout(() => {
+      checkPanel()
+    }, 500)
+  })
+
+  onMount(() => dispatch('open'))
+
+  defineSeparators('panel-aside', panelSeparators)
+
+  const handleAside = (): void => {
+    asideShown = !asideShown
+    hideAside = !asideShown
+  }
+
+  const handleSelectAside = (result: { detail: any }, sw: boolean = true): void => {
+    selectedAside = result.detail
+    if (sw) {
+      asideShown = selectedAside !== false
+      hideAside = !asideShown
+    }
+    dispatch('select', result.detail)
+  }
+
+  let isPrinting = false
+</script>
+
+<svelte:window
+  on:beforeprint={() => {
+    isPrinting = true
+  }}
+  on:afterprint={() => {
+    isPrinting = false
+  }}
+/>
+
+<div
+  bind:this={el}
+  class="popupPanel panel"
+  class:withPageHeader={$$slots['page-header'] !== undefined}
+  class:withPageFooter={$$slots['page-footer'] !== undefined}
+  class:embedded
+  use:resizeObserver={(element) => {
+    panelWidth = element.clientWidth
+    checkPanel()
+  }}
+>
+  <Header
+    type={'type-panel'}
+    noPrint={!printHeader}
+    adaptive={$deviceInfo.isMobile ? 'disabled' : adaptive}
+    {hideBefore}
+    {hideSearch}
+    {hideActions}
+    {hideExtra}
+    {overflowExtra}
+  >
+    <svelte:fragment slot="beforeTitle">
+      {#if allowClose}
+        <Button
+          id={'btnPClose'}
+          focusIndex={10001}
+          icon={IconClose}
+          iconProps={{ size: 'medium' }}
+          kind={'icon'}
+          noPrint
+          on:click={() => {
+            dispatch('close')
+          }}
+        />
+        {#if $$slots.beforeTitle}
+          <div class="hulyHeader-divider short no-print" />
+        {/if}
+      {/if}
+      <slot name="beforeTitle" />
+    </svelte:fragment>
+
+    {#if !withoutTitle}<slot name="title" />{/if}
+
+    <svelte:fragment slot="search">
+      <slot name="search" />
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+      <slot name="actions" />
+      <slot name="presence" />
+      <slot name="pre-utils" />
+      <slot name="utils" />
+      {#if useMaxWidth !== undefined}
+        <Button
+          focusIndex={10009}
+          icon={useMaxWidth ? IconMaxWidth : IconMinWidth}
+          iconProps={{ size: 'medium' }}
+          kind={'icon'}
+          selected={useMaxWidth}
+          showTooltip={{ label: plugin.string.UseMaxWidth, direction: 'bottom' }}
+          on:click={() => {
+            useMaxWidth = !useMaxWidth
+            dispatch('maxWidth', useMaxWidth)
+          }}
+        />
+      {/if}
+      {#if isFullSize}
+        <Button
+          focusIndex={100010}
+          icon={fullSize ? IconScale : IconScaleFull}
+          iconProps={{ size: 'medium' }}
+          kind={'icon'}
+          selected={fullSize}
+          showTooltip={{ label: plugin.string.FullSize, direction: 'bottom' }}
+          on:click={() => {
+            fullSize = !fullSize
+            dispatch('fullsize')
+          }}
+        />
+      {/if}
+      {#if $$slots.aside && isAside}
+        {#if customAside}
+          <ButtonGroup
+            items={customAside}
+            props={{ kind: 'icon', iconProps: { size: 'medium' } }}
+            bind:selected={selectedAside}
+            on:select={handleSelectAside}
+          />
+        {:else}
+          <Button
+            id={'btnPAside'}
+            focusIndex={10008}
+            icon={IconDetails}
+            iconProps={{ size: 'medium', filled: asideShown }}
+            kind={'icon'}
+            selected={asideShown}
+            showTooltip={{ label: plugin.string.Sidebar, direction: 'bottom' }}
+            on:click={handleAside}
+          />
+        {/if}
+      {/if}
+      <slot name="post-utils" />
+    </svelte:fragment>
+    <svelte:fragment slot="extra">
+      <slot name="extra" />
+    </svelte:fragment>
+  </Header>
+  <div class="popupPanel-body {$deviceInfo.isMobile ? 'mobile' : 'main'}" class:asideShown>
+    {#if $deviceInfo.isMobile}
+      <div
+        class="popupPanel-body__mobile"
+        use:resizeObserver={(element) => {
+          innerWidth = element.clientWidth
+        }}
+      >
+        <Scroller horizontal padding={'.5rem .75rem'}>
+          {#if $$slots.header && isHeader}
+            <div class="popupPanel-body__header mobile bottom-divider" class:max={useMaxWidth}>
+              <slot name="header" />
+            </div>
+          {/if}
+          <slot />
+        </Scroller>
+      </div>
+    {:else}
+      <div
+        class="popupPanel-body__main"
+        use:resizeObserver={(element) => {
+          innerWidth = element.clientWidth
+        }}
+      >
+        {#if $$slots.header && isHeader}
+          <div class="popupPanel-body__header-wrapper">
+            <div class="popupPanel-body__header main" class:max={useMaxWidth}>
+              <slot name="header" />
+            </div>
+          </div>
+        {/if}
+        <slot />
+        {#if isPrinting && printAside}
+          <div class="only-print pagebreak">
+            <slot name="aside" />
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    {#if $$slots.aside && isAside && asideShown}
+      <Separator name={'panel-aside'} float={asideFloat} index={0} />
+      <div class="popupPanel-body__aside no-print" class:float={asideFloat} class:shown={asideShown}>
+        <Separator name={'panel-aside'} float={asideFloat ? 'aside' : true} index={0} />
+        <div class="antiPanel-wrap__content">
+          <slot name="aside" />
+        </div>
+      </div>
+    {/if}
+  </div>
+  {#if $$slots['panel-footer']}
+    <div class="popupPanel-footer">
+      <slot name="panel-footer" />
+    </div>
+  {/if}
+  <div class="popupPanel-pageHeader only-print" id="page-header">
+    <slot name="page-header" />
+  </div>
+  <div class="popupPanel-pageFooter only-print" id="page-footer">
+    <slot name="page-footer" />
+  </div>
+</div>

package/src/components/PanelInstance.svelte

@@ -0,0 +1,254 @@
+<!--
+// 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 { getResourceC } from '@hanzo/platform'
+  import { afterUpdate, onMount } from 'svelte'
+
+  import { deviceOptionsStore as deviceInfo, resizeObserver } from '..'
+  import { closePanel, PanelProps, panelstore } from '../panelup'
+  import { fitPopupElement, popupstore } from '../popups'
+  import type { AnySvelteComponent, DeviceOptions, PopupOptions } from '../types'
+  import Spinner from './Spinner.svelte'
+
+  export let contentPanel: HTMLElement | undefined
+  export let embedded: boolean = false
+  export let readonly: boolean = false
+
+  let modalHTML: HTMLElement
+  let oldPanel: HTMLElement | undefined
+  let componentInstance: any
+
+  let options: PopupOptions = {
+    props: {
+      top: '',
+      bottom: '',
+      left: '',
+      right: '',
+      width: '',
+      height: '',
+      maxWidth: '',
+      maxHeight: '',
+      minWidth: ''
+    },
+    showOverlay: false,
+    direction: 'bottom'
+  }
+
+  let component: AnySvelteComponent | undefined
+  let keepSize: boolean = false
+
+  let props: PanelProps | undefined
+  function _close (): void {
+    closePanel()
+  }
+
+  $: if ($panelstore.panel !== undefined) {
+    if ($panelstore.panel.component === undefined) {
+      props = $panelstore.panel
+    } else {
+      getResourceC($panelstore.panel.component, (r) => {
+        component = r
+        props = $panelstore.panel
+      })
+    }
+    $panelstore.panel.refit = fitPopupInstance
+  } else {
+    props = undefined
+  }
+
+  function escapeClose (): void {
+    // Check if there is popup visible, then ignore
+    if ($popupstore.length > 0) {
+      return
+    }
+
+    if (componentInstance?.canClose !== undefined) {
+      if (!(componentInstance as { canClose: () => boolean }).canClose()) {
+        return
+      }
+    }
+    _close()
+  }
+
+  const fitPopup = (props: PanelProps, contentPanel: HTMLElement): void => {
+    if (modalHTML != null) {
+      const device: DeviceOptions = $deviceInfo
+      options =
+        device.isMobile && device.docWidth <= 480
+          ? {
+              props: {
+                top: 'var(--status-bar-height)',
+                bottom: '4.25rem',
+                left: '0',
+                right: '3.5rem',
+                width: '',
+                height: 'calc(100dvh - var(--status-bar-height) - var(--app-panel-width))',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                minWidth: '0'
+              },
+              showOverlay: true,
+              direction: 'bottom'
+            }
+          : fitPopupElement(modalHTML, device, props.element, contentPanel)
+    }
+  }
+
+  function handleKeydown (ev: KeyboardEvent): void {
+    if (ev.key === 'Escape') {
+      escapeClose()
+    }
+  }
+
+  function _open (): void {
+    if (modalHTML != null && props != null) {
+      if (props.element === 'content') {
+        modalHTML.classList.add('bg')
+      } else {
+        modalHTML.classList.remove('bg')
+      }
+    }
+  }
+
+  const _update = (): void => {
+    if (props != null && contentPanel != null) {
+      fitPopup(props, contentPanel)
+    }
+  }
+
+  const checkResize = (): void => {
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
+  }
+
+  onMount(() => {
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
+  })
+
+  afterUpdate(() => {
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
+  })
+
+  $: if (contentPanel !== oldPanel) {
+    oldPanel = contentPanel
+    keepSize = false
+  }
+  $: if (props != null && contentPanel !== undefined) {
+    fitPopup(props, contentPanel)
+    if (!keepSize && props?.element === 'content') {
+      keepSize = true
+      resizeObserver(contentPanel, checkResize)
+      if (!contentPanel.hasAttribute('data-id')) contentPanel.setAttribute('data-id', 'contentPanel')
+    }
+  }
+
+  export function fitPopupInstance (): void {
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
+  }
+</script>
+
+<svelte:window
+  on:resize={() => {
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
+  }}
+  on:keydown={(evt) => {
+    if (props != null) handleKeydown(evt)
+  }}
+  on:beforeprint={() => {
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
+  }}
+  on:afterprint={() => {
+    if (props != null && contentPanel != null) fitPopup(props, contentPanel)
+  }}
+/>
+{#if props}
+  {#if !(component != null)}
+    <Spinner />
+  {:else}
+    <slot name="panel-header" />
+    <div
+      class="panel-instance"
+      bind:this={modalHTML}
+      style:top={options?.props?.top}
+      style:bottom={options?.props?.bottom}
+      style:left={options?.props?.left}
+      style:right={options?.props?.right}
+      style:width={options?.props?.width}
+      style:height={options?.props?.height}
+      style:max-width={options?.props?.maxWidth}
+      style:max-height={options?.props?.maxHeight}
+      style:min-width={options?.props?.minWidth}
+      style:transform={options?.props?.transform}
+    >
+      <svelte:component
+        this={component}
+        bind:this={componentInstance}
+        _id={props._id}
+        _class={props._class}
+        rightSection={props.rightSection}
+        position={props.element}
+        {readonly}
+        {embedded}
+        bind:popupOptions={options}
+        on:open={_open}
+        on:close={_close}
+        on:update={_update}
+      />
+    </div>
+    {#if props.element !== 'content'}
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="modal-overlay"
+        class:show={options.showOverlay}
+        on:click={() => {
+          escapeClose()
+        }}
+        on:keydown={() => {}}
+        on:keyup={() => {}}
+      />
+    {/if}
+  {/if}
+{/if}
+
+<style lang="scss">
+  .panel-instance {
+    z-index: 401;
+    position: fixed;
+    background-color: transparent;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    @media print {
+      position: static;
+      z-index: initial;
+      width: auto !important;
+      height: auto !important;
+    }
+  }
+
+  .modal-overlay {
+    z-index: 400;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+
+    &.show {
+      background: rgba(0, 0, 0, 0.5);
+    }
+  }
+</style>

package/src/components/PlainTextEditor.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 { IntlString } from '@hanzo/platform'
+  import { translateCB } from '@hanzo/platform'
+  import { themeStore } from '@hanzo/theme'
+  import { afterUpdate, onMount } from 'svelte'
+
+  import ui from '../plugin'
+  import { DelayedCaller } from '../utils'
+
+  export let value: string | undefined = undefined
+  export let placeholder: IntlString = ui.string.TypeHere
+  export let placeholderParam: any | undefined = undefined
+  export let disabled: boolean = false
+
+  let input: HTMLTextAreaElement
+  let phTranslate: string = ''
+
+  $: translateCB(placeholder, placeholderParam ?? {}, $themeStore.language, (res) => {
+    phTranslate = res
+  })
+
+  onMount(() => {
+    const throttle = new DelayedCaller(50)
+    const observer = new ResizeObserver(() => {
+      throttle.call(adjustHeight)
+    })
+    observer.observe(input)
+
+    return () => {
+      observer.disconnect()
+    }
+  })
+
+  afterUpdate(adjustHeight)
+
+  function adjustHeight (): void {
+    if (input == null) {
+      return
+    }
+
+    input.style.height = 'auto'
+    input.style.height = `${input.scrollHeight + 2}px`
+  }
+
+  export function focus (): void {
+    input.focus()
+  }
+</script>
+
+<textarea
+  class="root"
+  bind:value
+  bind:this={input}
+  {disabled}
+  placeholder={phTranslate}
+  on:keydown
+  on:change
+  on:keydown
+  on:keypress
+  on:blur
+/>
+
+<style lang="scss">
+  .root {
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    min-height: 3.25rem;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.25rem;
+    color: var(--theme-text-primary-color);
+    background-color: var(--theme-button-default);
+    border: 1px solid var(--theme-refinput-border);
+    border-radius: 0.375rem;
+    outline: none;
+    resize: none;
+
+    &:focus {
+      border-color: var(--primary-button-default);
+    }
+
+    &::placeholder {
+      color: var(--theme-text-placeholder-color);
+    }
+  }
+</style>