UI: Refactor (#2127)

Signed-off-by: Anna No <anna.no@xored.com>

packages/ui/src/components/ColorPopup.svelte

@@ -16,7 +16,8 @@
   import type { IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
   import { createEventDispatcher, onMount } from 'svelte'
-  import { getPlatformColor, ListView } from '..'
+  import { getPlatformColor } from '../colors'
+  import ListView from './ListView.svelte'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined

packages/ui/src/components/Dropdown.svelte

@@ -14,10 +14,13 @@
 -->
 <script lang="ts">
   import type { Asset, IntlString } from '@anticrm/platform'
-  import { Button, DropdownPopup, showPopup, Tooltip } from '..'
   import { getFocusManager } from '../focus'
+  import { showPopup } from '../popups'
   import type { AnySvelteComponent, ButtonKind, ButtonSize, ListItem, TooltipAlignment } from '../types'
+  import Button from './Button.svelte'
+  import DropdownPopup from './DropdownPopup.svelte'
   import Label from './Label.svelte'
+  import Tooltip from './Tooltip.svelte'
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString | undefined = undefined

packages/ui/src/components/DropdownLabels.svelte

@@ -14,12 +14,15 @@
 -->
 <script lang="ts">
   import { IntlString, Asset } from '@anticrm/platform'
-  import DropdownLabelsPopup from './DropdownLabelsPopup.svelte'
   import type { AnySvelteComponent, DropdownTextItem, TooltipAlignment, ButtonKind, ButtonSize } from '../types'
-  import { showPopup, Tooltip, Button, Label } from '..'
   import { createEventDispatcher } from 'svelte'
   import ui from '../plugin'
+  import { showPopup } from '../popups'
   import { getFocusManager } from '../focus'
+  import Button from './Button.svelte'
+  import DropdownLabelsPopup from './DropdownLabelsPopup.svelte'
+  import Label from './Label.svelte'
+  import Tooltip from './Tooltip.svelte'
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString

packages/ui/src/components/DropdownLabelsIntl.svelte

@@ -14,11 +14,14 @@
 -->
 <script lang="ts">
   import { IntlString, Asset } from '@anticrm/platform'
-  import DropdownLabelsPopupIntl from './DropdownLabelsPopupIntl.svelte'
-  import type { AnySvelteComponent, TooltipAlignment, ButtonKind, ButtonSize, DropdownIntlItem } from '../types'
-  import { showPopup, Tooltip, Button, Label } from '..'
   import { createEventDispatcher } from 'svelte'
+  import type { AnySvelteComponent, TooltipAlignment, ButtonKind, ButtonSize, DropdownIntlItem } from '../types'
   import ui from '../plugin'
+  import { showPopup } from '../popups'
+  import Button from './Button.svelte'
+  import DropdownLabelsPopupIntl from './DropdownLabelsPopupIntl.svelte'
+  import Label from './Label.svelte'
+  import Tooltip from './Tooltip.svelte'
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString

packages/ui/src/components/DropdownLabelsPopup.svelte

@@ -16,9 +16,9 @@
   import type { IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
   import { createEventDispatcher, onMount } from 'svelte'
-  import CheckBox from './CheckBox.svelte'
   import type { DropdownTextItem } from '../types'
   import plugin from '../plugin'
+  import CheckBox from './CheckBox.svelte'
   import ListView from './ListView.svelte'
 
   export let placeholder: IntlString = plugin.string.SearchDots

packages/ui/src/components/DropdownLabelsPopupIntl.svelte

@@ -16,10 +16,10 @@
   import type { IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
   import { createEventDispatcher, onMount } from 'svelte'
-  import CheckBox from './CheckBox.svelte'
-  import type { DropdownIntlItem } from '../types'
   import plugin from '../plugin'
-  import { Label } from '..'
+  import type { DropdownIntlItem } from '../types'
+  import CheckBox from './CheckBox.svelte'
+  import Label from './Label.svelte'
 
   export let placeholder: IntlString = plugin.string.SearchDots
   export let items: DropdownIntlItem[]

packages/ui/src/components/DropdownRecord.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import { IntlString } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
-  import ui, { Label, Button, IconDownOutline, showPopup } from '..'
+  import ui from '../plugin'
+  import { showPopup } from '../popups'
   import type { ButtonKind, ButtonSize } from '../types'
+  import IconDownOutline from './icons/DownOutline.svelte'
+  import Button from './Button.svelte'
   import DropdownRecordPopup from './DropdownRecordPopup.svelte'
+  import Label from './Label.svelte'
 
   export let items: Record<any, IntlString>
   export let selected: any | undefined = undefined

packages/ui/src/components/DropdownRecordPopup.svelte

@@ -16,7 +16,7 @@
   import { IntlString } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
   import CheckBox from './CheckBox.svelte'
-  import { Label } from '..'
+  import Label from './Label.svelte'
   import ListView from './ListView.svelte'
 
   export let items: Record<any, IntlString>

packages/ui/src/components/EditWithIcon.svelte

@@ -16,10 +16,10 @@
   import type { Asset, IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
+  import plugin from '../plugin'
   import type { AnySvelteComponent } from '../types'
   import Icon from './Icon.svelte'
   import IconClose from './icons/Close.svelte'
-  import plugin from '../plugin'
 
   export let icon: Asset | AnySvelteComponent
   export let width: string | undefined = undefined

packages/ui/src/components/Panel.svelte

@@ -14,7 +14,11 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { Button, IconClose, IconDetails, IconScale, IconScaleFull } from '..'
+  import IconClose from './icons/Close.svelte'
+  import IconDetails from './icons/Details.svelte'
+  import IconScale from './icons/Scale.svelte'
+  import IconScaleFull from './icons/ScaleFull.svelte'
+  import Button from './Button.svelte'
 
   export let innerWidth: number = 0
   export let panelWidth: number = 0

packages/ui/src/components/PanelInstance.svelte

@@ -16,10 +16,11 @@
 <script lang="ts">
   import { getResource } from '@anticrm/platform'
   import { afterUpdate, onMount } from 'svelte'
-  import { Spinner } from '..'
+
-  import type { AnySvelteComponent, PopupOptions } from '..'
   import { closePanel, PanelProps, panelstore } from '../panelup'
   import { fitPopupElement, popupstore } from '../popups'
+  import type { AnySvelteComponent, PopupOptions } from '../types'
+  import Spinner from './Spinner.svelte'
 
   export let contentPanel: HTMLElement
 

packages/ui/src/components/Popup.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { popupstore as modal } from '..'
+  import { popupstore as modal } from '../popups'
   import PopupInstance from './PopupInstance.svelte'
 </script>
 

packages/ui/src/components/SelectPopup.svelte

@@ -16,7 +16,9 @@
   import type { Asset, IntlString } from '@anticrm/platform'
   import { translate } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
-  import { Icon, Label, IconCheck } from '..'
+  import IconCheck from './icons/Check.svelte'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined

packages/ui/src/components/ShowMore.svelte

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import Label from './Label.svelte'
-  import ui from '..'
+  import ui from '../plugin'
 
   export let limit: number = 240
   export let ignore: boolean = false

packages/ui/src/components/Submenu.svelte

@@ -14,9 +14,12 @@
 -->
 <script lang="ts">
   import { Asset, IntlString } from '@anticrm/platform'
-  import type { LabelAndProps, AnySvelteComponent, AnyComponent } from '../types'
-  import { Icon, Label, Component, Menu } from '..'
   import { tooltip } from '../tooltips'
+  import type { LabelAndProps, AnySvelteComponent, AnyComponent } from '../types'
+  import Component from './Component.svelte'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
+  import Menu from './Menu.svelte'
 
   export let component: AnySvelteComponent | AnyComponent | undefined = undefined
   export let props: any = {}

packages/ui/src/components/TabList.svelte

@@ -14,8 +14,10 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
+  import { tooltip } from '../tooltips'
   import type { TabItem } from '../types'
-  import { Label, Icon, tooltip } from '..'
+  import Icon from './Icon.svelte'
+  import Label from './Label.svelte'
 
   export let selected: string | string[] = ''
   export let multiselect: boolean = false

packages/ui/src/components/TextArea.svelte

@@ -14,10 +14,10 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
-  import Label from './Label.svelte'
+  import { translate } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../plugin'
-  import { translate } from '@anticrm/platform'
+  import Label from './Label.svelte'
 
   export let label: IntlString | undefined = undefined
   export let width: string | undefined = undefined

packages/ui/src/components/TimeShiftPicker.svelte

@@ -15,11 +15,12 @@
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
   import { createEventDispatcher, onMount } from 'svelte'
-  import { Label, showPopup } from '..'
+  import { showPopup } from '../popups'
   import { DateOrShift } from '../types'
   import DateRangePresenter from './calendar/DateRangePresenter.svelte'
   import Calendar from './icons/Calendar.svelte'
   import Close from './icons/Close.svelte'
+  import Label from './Label.svelte'
   import TimeShiftPopup from './TimeShiftPopup.svelte'
   import TimeShiftPresenter from './TimeShiftPresenter.svelte'
 

packages/ui/src/components/Tooltip.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
   import { onDestroy } from 'svelte'
-  import type { TooltipAlignment, AnySvelteComponent, AnyComponent } from '..'
+  import type { TooltipAlignment, AnySvelteComponent, AnyComponent } from '../types'
   import { tooltipstore as tooltip, showTooltip } from '..'
 
   export let label: IntlString | undefined = undefined

packages/ui/src/components/TooltipInstance.svelte

@@ -14,8 +14,9 @@
 -->
 <script lang="ts">
   import { afterUpdate, onDestroy } from 'svelte'
-  import type { TooltipAlignment } from '..'
+  import { closeTooltip, tooltipstore as tooltip } from '../tooltips'
-  import { closeTooltip, Component, tooltipstore as tooltip } from '..'
+  import type { TooltipAlignment } from '../types'
+  import Component from './Component.svelte'
   import Label from './Label.svelte'
 
   let tooltipHTML: HTMLElement

packages/ui/src/components/calendar/DatePicker.svelte

@@ -15,7 +15,8 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { IntlString } from '@anticrm/platform'
-  import ui, { Label } from '../..'
+  import ui from '../../plugin'
+  import Label from '../Label.svelte'
   import DatePresenter from './DatePresenter.svelte'
 
   export let title: IntlString

packages/ui/src/components/calendar/DatePopup.svelte

@@ -15,7 +15,12 @@
 <script lang="ts">
   import { createEventDispatcher, afterUpdate } from 'svelte'
   import { IntlString } from '@anticrm/platform'
-  import ui, { Button, ActionIcon, IconClose, Icon, Label } from '../..'
+  import ui from '../../plugin'
+  import IconClose from '../icons/Close.svelte'
+  import ActionIcon from '../ActionIcon.svelte'
+  import Button from '../Button.svelte'
+  import Icon from '../Icon.svelte'
+  import Label from '../Label.svelte'
   import { daysInMonth } from './internal/DateUtils'
   import MonthSquare from './MonthSquare.svelte'
 

packages/ui/src/components/calendar/DatePresenter.svelte

@@ -15,10 +15,14 @@
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
-  import { getMonthName } from './internal/DateUtils'
+
-  import ui, { Label, Icon, showPopup } from '../..'
+  import ui from '../../plugin'
+  import { showPopup } from '../../popups'
+  import Icon from '../Icon.svelte'
+  import Label from '../Label.svelte'
   import DPCalendar from './icons/DPCalendar.svelte'
   import DPCalendarOver from './icons/DPCalendarOver.svelte'
+  import { getMonthName } from './internal/DateUtils'
   import DatePopup from './DatePopup.svelte'
 
   export let value: number | null | undefined

packages/ui/src/components/calendar/DateRangePicker.svelte

@@ -15,7 +15,8 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { IntlString } from '@anticrm/platform'
-  import ui, { Label } from '../..'
+  import ui from '../../plugin'
+  import Label from '../Label.svelte'
   import DateRangePresenter from './DateRangePresenter.svelte'
 
   export let title: IntlString

packages/ui/src/components/calendar/DateRangePopup.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { dpstore } from '../..'
+  import { dpstore } from '../../popups'
   import Month from './Month.svelte'
   import Scroller from '../Scroller.svelte'
   import TimeShiftPresenter from '../TimeShiftPresenter.svelte'

packages/ui/src/components/calendar/DateRangePresenter.svelte

@@ -16,8 +16,11 @@
   import type { IntlString } from '@anticrm/platform'
   import { createEventDispatcher, afterUpdate } from 'svelte'
   import { daysInMonth, getMonthName } from './internal/DateUtils'
-  import ui, { Label, Icon, IconClose } from '../..'
+  import ui from '../../plugin'
   import { dpstore, closeDatePopup } from '../../popups'
+  import Label from '../Label.svelte'
+  import Icon from '../Icon.svelte'
+  import IconClose from '../icons/Close.svelte'
   import DPCalendar from './icons/DPCalendar.svelte'
   import DPCalendarOver from './icons/DPCalendarOver.svelte'
   import DateRangePopup from './DateRangePopup.svelte'

packages/ui/src/components/calendar/DateTimeRangePresenter.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
-  import ui from '../..'
+  import ui from '../../plugin'
   import DateRangePresenter from './DateRangePresenter.svelte'
 
   export let value: number | null | undefined

packages/ui/src/components/calendar/Month.svelte

@@ -14,9 +14,19 @@
 -->
 <script lang="ts">
   import { afterUpdate, createEventDispatcher } from 'svelte'
-  import { IconNavPrev, IconNavNext, Icon } from '../..'
+  import IconNavPrev from '../icons/NavPrev.svelte'
-  import { TCellStyle, ICell } from './internal/DateUtils'
+  import IconNavNext from '../icons/NavNext.svelte'
-  import { firstDay, day, getWeekDayName, areDatesEqual, getMonthName, daysInMonth } from './internal/DateUtils'
+  import Icon from '../Icon.svelte'
+  import {
+    firstDay,
+    day,
+    getWeekDayName,
+    areDatesEqual,
+    getMonthName,
+    daysInMonth,
+    TCellStyle,
+    ICell
+  } from './internal/DateUtils'
 
   export let currentDate: Date | null
   export let mondayStart: boolean = true

packages/ui/src/components/calendar/MonthSquare.svelte

@@ -14,7 +14,9 @@
 -->
 <script lang="ts">
   import { afterUpdate, createEventDispatcher } from 'svelte'
-  import { IconNavPrev, IconNavNext, Icon } from '../..'
+  import IconNavPrev from '../icons/NavPrev.svelte'
+  import IconNavNext from '../icons/NavNext.svelte'
+  import Icon from '../Icon.svelte'
   import { firstDay, day, getWeekDayName, areDatesEqual, getMonthName, weekday, isWeekend } from './internal/DateUtils'
 
   export let currentDate: Date | null

packages/ui/src/components/calendar/WeekCalendar.svelte

@@ -14,8 +14,8 @@
 -->
 <script type="ts">
   import { createEventDispatcher } from 'svelte'
-  import { Label } from '../..'
   import ui from '../../plugin'
+  import Label from '../Label.svelte'
   import { addZero, areDatesEqual, day as getDay, getMonday, getWeekDayName } from './internal/DateUtils'
 
   export let mondayStart = true

packages/ui/src/index.ts

@@ -13,12 +13,11 @@
 // limitations under the License.
 //
 
-import { SvelteComponent } from 'svelte'
 import { addLocation, addStringsLoader } from '@anticrm/platform'
-import { uiId } from './plugin'
+import { SvelteComponent } from 'svelte'
 import { readable } from 'svelte/store'
-
 import Root from './components/internal/Root.svelte'
+import { uiId } from './plugin'
 
 export type {
   AnyComponent,

packages/ui/src/location.ts

@@ -13,8 +13,8 @@
 // limitations under the License.
 //
 
-import { Location as PlatformLocation } from './types'
 import { writable, derived } from 'svelte/store'
+import { Location as PlatformLocation } from './types'
 
 export function locationToUrl (location: PlatformLocation): string {
   let result = '/'

packages/ui/src/utils.ts

@@ -13,7 +13,6 @@
 // limitations under the License.
 //
 
-// import type { Metadata } from '@anticrm/platform'
 import type { Metadata } from '@anticrm/platform'
 import { setMetadata } from '@anticrm/platform'