@hanzo/ui 0.5.24 → 0.6.16

package/src/components/calendar/DateTimePresenter.svelte

@@ -0,0 +1,23 @@
+<!--
+// 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 { DateRangeMode } from '@hanzo/core'
+  import DatePresenter from './DatePresenter.svelte'
+
+  export let value: number | null | undefined
+  export let editable: boolean = false
+</script>
+
+<DatePresenter bind:value mode={DateRangeMode.DATETIME} {editable} />

package/src/components/calendar/DateTimeRangePresenter.svelte

@@ -0,0 +1,28 @@
+<!--
+// 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 { DateRangeMode } from '@hanzo/core'
+  import type { IntlString } from '@hanzo/platform'
+  import ui from '../../plugin'
+  import DateRangePresenter from './DateRangePresenter.svelte'
+
+  export let value: number | null | undefined
+  export let editable: boolean = false
+  export let iconModifier: 'normal' | 'warning' | 'overdue' = 'normal'
+  export let labelNull: IntlString = ui.string.NoDate
+  export let noShift: boolean = false
+</script>
+
+<DateRangePresenter bind:value mode={DateRangeMode.DATETIME} {editable} {iconModifier} {labelNull} {noShift} />

package/src/components/calendar/DueDatePopup.svelte

@@ -0,0 +1,93 @@
+<!--
+// Copyright © 2022 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 DPCalendar from './icons/DPCalendar.svelte'
+  import DPCalendarOver from './icons/DPCalendarOver.svelte'
+  import ui from '../../plugin'
+  import Icon from '../Icon.svelte'
+  import Label from '../Label.svelte'
+
+  export let formattedDate: string = ''
+  export let daysDifference: number = 0
+  export let isOverdue: boolean = false
+  export let iconModifier: 'warning' | 'critical' | 'overdue' | 'normal' = 'normal'
+  export let shouldIgnoreOverdue: boolean = false
+</script>
+
+{#if formattedDate}
+  <div class="root">
+    <div
+      class="iconContainer"
+      class:mIconContainerWarning={iconModifier === 'warning'}
+      class:mIconContainerCritical={iconModifier === 'critical' || iconModifier === 'overdue'}
+    >
+      <Icon icon={isOverdue && !shouldIgnoreOverdue ? DPCalendarOver : DPCalendar} size={'small'} />
+    </div>
+    <div class="messageContainer">
+      <div class="title">
+        <Label
+          label={isOverdue ? ui.string.DueDatePopupOverdueTitle : ui.string.DueDatePopupTitle}
+          params={{ value: formattedDate }}
+        />
+      </div>
+      {#if !shouldIgnoreOverdue}
+        <div class="description">
+          <Label
+            label={isOverdue ? ui.string.DueDatePopupOverdueDescription : ui.string.DueDatePopupDescription}
+            params={{ value: daysDifference }}
+          />
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  .root {
+    display: flex;
+    width: 10rem;
+    min-width: 0;
+  }
+
+  .iconContainer {
+    margin-top: 0.125rem;
+    margin-right: 0.5rem;
+    color: var(--theme-caption-color);
+
+    &.mIconContainerWarning {
+      color: var(--theme-warning-color);
+    }
+
+    &.mIconContainerCritical {
+      color: var(--theme-error-color);
+    }
+  }
+
+  .messageContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .title {
+    color: var(--theme-caption-color);
+    font-weight: 500;
+  }
+
+  .description {
+    margin-top: 0.25rem;
+    color: var(--theme-dark-color);
+  }
+</style>

package/src/components/calendar/DueDatePresenter.svelte

@@ -0,0 +1,83 @@
+<!--
+// Copyright © 2022 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 { Timestamp } from '@hanzo/core'
+  import DueDatePopup from './DueDatePopup.svelte'
+  import { tooltip } from '../../tooltips'
+  import ui from '../../plugin'
+  import DatePresenter from './DatePresenter.svelte'
+  import { getDaysDifference, getDueDateIconModifier, getFormattedDate } from './internal/DateUtils'
+  import { ButtonKind, ButtonSize } from '../../types'
+
+  export let value: number | null = null
+  export let shouldRender: boolean = true
+  export let onChange: (newDate: number | null) => void
+  export let kind: ButtonKind = 'link'
+  export let editable: boolean = true
+  export let shouldIgnoreOverdue: boolean = false
+  export let size: ButtonSize = 'medium'
+  export let width: string | undefined = 'auto'
+
+  const today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
+  $: isOverdue = value !== null && value < today.getTime()
+  $: dueDate = value === null ? null : new Date(value)
+  $: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
+  $: iconModifier = getDueDateIconModifier(isOverdue, daysDifference, shouldIgnoreOverdue)
+  let formattedDate = getFormattedDate(value)
+  $: formattedDate = getFormattedDate(value)
+
+  const handleDueDateChanged = async (event: CustomEvent<Timestamp>) => {
+    const newDate = event.detail
+
+    if (newDate === undefined || value === newDate || !editable) {
+      return
+    }
+
+    onChange(newDate)
+  }
+</script>
+
+{#if shouldRender}
+  <div
+    class="clear-mins"
+    style:width
+    use:tooltip={formattedDate
+      ? {
+          direction: 'top',
+          component: DueDatePopup,
+          props: {
+            formattedDate,
+            daysDifference,
+            isOverdue,
+            iconModifier,
+            shouldIgnoreOverdue
+          }
+        }
+      : undefined}
+  >
+    <DatePresenter
+      labelNull={ui.string.DueDate}
+      {value}
+      {editable}
+      {iconModifier}
+      {kind}
+      {size}
+      {width}
+      {shouldIgnoreOverdue}
+      on:change={handleDueDateChanged}
+      on:resize
+    />
+  </div>
+{/if}

package/src/components/calendar/Month.svelte

@@ -0,0 +1,243 @@
+<!--
+// 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 { afterUpdate, createEventDispatcher } from 'svelte'
+  import { capitalizeFirstLetter } from '../../utils'
+  import ButtonIcon from '../ButtonIcon.svelte'
+  import IconChevronLeft from '../icons/ChevronLeft.svelte'
+  import IconChevronRight from '../icons/ChevronRight.svelte'
+  import { deviceOptionsStore as deviceInfo } from '../..'
+  import {
+    ICell,
+    TCellStyle,
+    areDatesEqual,
+    day,
+    daysInMonth,
+    firstDay,
+    fromCurrentToTz,
+    getMonthName,
+    getUserTimezone,
+    getWeekDayName
+  } from './internal/DateUtils'
+
+  export let currentDate: Date | null
+  export let timeZone: string = getUserTimezone()
+  export let hideNavigator: boolean = false
+  export let replacementDay: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  let monthYear: string
+  const today: Date = new Date()
+  const viewDate: Date = new Date(currentDate ?? today)
+  let selectedDate: Date = new Date(currentDate ?? today)
+  $: firstDayOfCurrentMonth = firstDay(viewDate, $deviceInfo.firstDayOfWeek)
+  const isToday = (n: number): boolean => {
+    if (areDatesEqual(today, new Date(viewDate.getFullYear(), viewDate.getMonth(), n))) return true
+    return false
+  }
+
+  const getDateStyle = (date: Date): TCellStyle => {
+    if (selectedDate != null) {
+      const zonedTime = fromCurrentToTz(selectedDate, timeZone)
+      if (areDatesEqual(zonedTime, date)) {
+        return 'selected'
+      }
+    }
+    return 'not-selected'
+  }
+  const renderCellStyles = (date: Date, firstDay: number = 1): ICell[] => {
+    const result: ICell[] = []
+    for (let i = 1; i <= daysInMonth(date); i++) {
+      const tempDate = new Date(date.getFullYear(), date.getMonth(), i)
+      result.push({
+        dayOfWeek: (tempDate.getDay() - firstDay + 7) % 7,
+        classes: getDateStyle(tempDate)
+      })
+    }
+    monthYear = capitalizeFirstLetter(getMonthName(viewDate)) + ' ' + viewDate.getFullYear()
+    return result
+  }
+  $: days = renderCellStyles(viewDate, $deviceInfo.firstDayOfWeek)
+
+  const changeMonth = (offset: number): void => {
+    viewDate.setMonth(viewDate.getMonth() + offset)
+    days = renderCellStyles(viewDate, $deviceInfo.firstDayOfWeek)
+  }
+</script>
+
+<div class="month-container">
+  <div class="header">
+    {#if viewDate}
+      <div class="monthYear font-medium-14">{monthYear}</div>
+      <slot name="header" />
+      {#if !hideNavigator}
+        <div class="flex-row-center flex-no-shrink gap-2 tertiary-textColor">
+          <ButtonIcon
+            icon={IconChevronLeft}
+            kind={'tertiary'}
+            size={'extra-small'}
+            inheritColor
+            on:click={() => {
+              viewDate.setDate(1)
+              changeMonth(-1)
+            }}
+          />
+          <ButtonIcon
+            icon={IconChevronRight}
+            kind={'tertiary'}
+            size={'extra-small'}
+            inheritColor
+            on:click={() => {
+              viewDate.setDate(1)
+              changeMonth(1)
+            }}
+          />
+        </div>
+      {/if}
+    {/if}
+  </div>
+
+  {#if viewDate}
+    <div class="caption">
+      {#each [...Array(7).keys()] as dayOfWeek}
+        <span class="weekdays ui-regular-12">
+          {capitalizeFirstLetter(getWeekDayName(day(firstDayOfCurrentMonth, dayOfWeek), 'short'))}
+        </span>
+      {/each}
+    </div>
+    <div class="calendar">
+      {#each days as day, i}
+        <button
+          class="day ui-regular-14 {day.classes}"
+          class:today={isToday(i + 1)}
+          class:day-off={day.dayOfWeek > 5}
+          style="grid-column: {day.dayOfWeek + 1}/{day.dayOfWeek + 2};"
+          on:click|stopPropagation={() => {
+            viewDate.setDate(i + 1)
+            selectedDate = new Date(viewDate)
+            dispatch('update', viewDate)
+          }}
+        >
+          <slot day={{ display: i + 1, date: new Date(viewDate.getFullYear(), viewDate.getMonth(), i + 1) }}>
+            {i + 1}
+          </slot>
+          {#if $$slots.default && !replacementDay}{i + 1}{/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .month-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--medium-BorderRadius);
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2_75);
+
+      .monthYear {
+        white-space: nowrap;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        min-width: 0;
+        color: var(--global-primary-TextColor);
+
+        &::first-letter {
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+
+  .caption,
+  .calendar {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+
+    .weekdays,
+    .day {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 2rem;
+      height: 2rem;
+      margin: 0.125rem;
+      color: var(--content-color);
+    }
+  }
+  .caption {
+    padding: 0 var(--spacing-2);
+
+    .weekdays {
+      height: 2rem;
+      color: var(--dark-color);
+      &::first-letter {
+        text-transform: capitalize;
+      }
+    }
+  }
+  .calendar {
+    padding: var(--spacing-1) var(--spacing-2) var(--spacing-2);
+
+    .day {
+      position: relative;
+      margin: 0;
+      padding: 0;
+      color: var(--accent-color);
+      background-color: rgba(var(--accent-color), 0.05);
+      border: 1px solid transparent;
+      border-radius: 0.25rem;
+      outline: none;
+
+      &.day-off {
+        color: var(--content-color);
+      }
+      &.focused {
+        box-shadow: 0 0 0 3px var(--primary-button-outline);
+      }
+      &:hover {
+        color: var(--caption-color);
+        background-color: var(--primary-button-transparent);
+      }
+      &.today:not(.selected) {
+        font-weight: 700;
+        color: var(--global-primary-LinkColor);
+      }
+      &.selected {
+        font-weight: 700;
+        color: var(--primary-button-color);
+        background-color: var(--primary-button-default);
+        cursor: default;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        inset: -0.625rem;
+      }
+    }
+  }
+</style>

package/src/components/calendar/MonthCalendar.svelte

@@ -0,0 +1,138 @@
+<!--
+// Copyright © 2022 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 { areDatesEqual, day, firstDay, getWeekDayName, isWeekend, weekday } from './internal/DateUtils'
+  import { Scroller, deviceOptionsStore as deviceInfo, checkAdaptiveMatching } from '../..'
+
+  export let weekFormat: 'narrow' | 'short' | 'long' | undefined = 'long'
+  export let cellHeight: string | undefined = undefined
+  export let selectedDate: Date = new Date()
+  export let currentDate: Date = selectedDate
+  export let displayedWeeksCount = 6
+
+  const dispatch = createEventDispatcher()
+
+  $: devSize = $deviceInfo.size
+  $: shortName = checkAdaptiveMatching(devSize, 'lg')
+
+  $: firstDayOfCurrentMonth = firstDay(currentDate, $deviceInfo.firstDayOfWeek)
+
+  function onSelect (date: Date): void {
+    dispatch('change', date)
+  }
+
+  const todayDate = new Date()
+</script>
+
+<Scroller fade={{ multipler: { top: 2.25, bottom: 0 } }}>
+  <div class="days-of-week-header scroller-header">
+    {#each [...Array(7).keys()] as dayOfWeek}
+      <div class="day-name">
+        {getWeekDayName(
+          day(firstDayOfCurrentMonth, dayOfWeek),
+          shortName && weekFormat === 'long' ? 'short' : weekFormat
+        )}
+      </div>
+    {/each}
+  </div>
+  <div
+    class="days-of-month"
+    style:grid-template-rows={`repeat(${displayedWeeksCount}, ${cellHeight || 'minmax(0, 1fr)'})`}
+  >
+    {#each [...Array(displayedWeeksCount).keys()] as weekIndex}
+      {#each [...Array(7).keys()] as dayOfWeek}
+        {@const date = weekday(firstDayOfCurrentMonth, weekIndex, dayOfWeek)}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div
+          class="cell"
+          class:weekend={isWeekend(date)}
+          class:wrongMonth={date.getMonth() !== currentDate.getMonth()}
+          class:left-border={dayOfWeek !== 0}
+          class:right-border={dayOfWeek === 6}
+          style:grid-column-start={dayOfWeek + 1}
+          style:grid-row-start={weekIndex + 1}
+          on:click={() => {
+            onSelect(date)
+          }}
+        >
+          {#if !$$slots.cell}
+            {date.getDate()}
+          {:else}
+            <slot
+              name="cell"
+              {date}
+              today={areDatesEqual(todayDate, date)}
+              selected={areDatesEqual(selectedDate, date)}
+              wrongMonth={date.getMonth() !== currentDate.getMonth()}
+            />
+          {/if}
+        </div>
+      {/each}
+    {/each}
+  </div>
+</Scroller>
+
+<style lang="scss">
+  .days-of-week-header,
+  .days-of-month {
+    display: grid;
+    grid-auto-columns: max-content;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    width: 100%;
+  }
+  .days-of-week-header {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    min-height: 2.25rem;
+    color: var(--theme-darker-color);
+    background-color: var(--theme-comp-header-color);
+    border-bottom: 1px solid var(--theme-divider-color);
+
+    .day-name {
+      text-align: center;
+      &::first-letter {
+        text-transform: uppercase;
+      }
+    }
+  }
+  .days-of-month {
+    justify-items: stretch;
+    align-items: stretch;
+  }
+  .cell {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    border-bottom: 1px solid var(--theme-divider-color);
+    cursor: pointer;
+
+    &.weekend {
+      background-color: var(--theme-button-default);
+    }
+    &.wrongMonth {
+      color: var(--theme-trans-color);
+    }
+
+    &.left-border {
+      border-left: 1px solid var(--theme-divider-color);
+    }
+  }
+</style>