@xen-orchestra/web-core 0.26.1 → 0.28.0

package/lib/components/ui/{quoteCode/UiQuoteCode.vue → log-entry-viewer/UiLogEntryViewer.vue}

@@ -1,44 +1,51 @@
+<!-- v2 -->
 <template>
-  <div class="ui-quote-code" :class="className">
+  <div class="ui-log-entry-viewer" :class="className">
     <div class="label-container">
       <div :class="fontClasses.labelClass" class="label">
         {{ label }}
       </div>
-      <div v-if="slots.actions || copy" class="actions">
-        <VtsCopyButton v-if="copy" :value="codeTextValue ?? ''" />
-        <slot name="actions" />
+      <div class="actions">
+        <VtsCopyButton :value="content" />
+        <UiButtonIcon
+          icon="fa:arrow-up-right-from-square"
+          size="medium"
+          accent="brand"
+          @click="openRawValueInNewTab()"
+        />
       </div>
     </div>
-    <code ref="code-element" :class="fontClasses.codeClass" class="code-container">
-      <slot />
+    <code :class="fontClasses.codeClass" class="code-container">
+      {{ content }}
     </code>
   </div>
 </template>
 
 <script setup lang="ts">
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { useMapper } from '@core/packages/mapper'
 import { toVariants } from '@core/utils/to-variants.util.ts'
-import { computed, useTemplateRef } from 'vue'
+import { computed, watch } from 'vue'
 
-type QuoteCodeAccent = 'brand' | 'danger'
-type QuoteCodeSize = 'small' | 'medium'
+type LogEntryViewerAccent = 'info' | 'warning' | 'danger'
+type LogEntryViewerSize = 'small' | 'medium'
 
-const { size, accent } = defineProps<{
+const {
+  size,
+  accent,
+  content: rawContent = '',
+} = defineProps<{
   label: string
-  size: QuoteCodeSize
-  accent: QuoteCodeAccent
-  copy?: boolean
+  content: string | object | undefined
+  size: LogEntryViewerSize
+  accent: LogEntryViewerAccent
 }>()
 
-const slots = defineSlots<{
+defineSlots<{
   default(): any
-  actions?(): any
 }>()
 
-const codeElement = useTemplateRef('code-element')
-const codeTextValue = computed(() => codeElement.value?.textContent)
-
 const mapping = {
   small: {
     labelClass: 'typo-body-regular-small',
@@ -57,10 +64,32 @@ const className = computed(() =>
     accent,
   })
 )
+
+const content = computed(() => {
+  if (typeof rawContent === 'object') {
+    return JSON.stringify(rawContent, null, 2)
+  }
+
+  return rawContent
+})
+
+const pre = document.createElement('pre')
+
+watch(
+  () => content,
+  content => {
+    pre.textContent = content.value
+  },
+  { immediate: true }
+)
+
+function openRawValueInNewTab() {
+  window.open('', '_blank')?.document.body.appendChild(pre)
+}
 </script>
 
 <style lang="postcss" scoped>
-.ui-quote-code {
+.ui-log-entry-viewer {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
@@ -88,11 +117,19 @@ const className = computed(() =>
     border-inline-start: 0.2rem solid;
     white-space: pre-wrap;
     word-break: break-word;
+    max-height: 18rem;
+    overflow: auto;
+  }
+
+  &.accent--info {
+    .code-container {
+      border-inline-start-color: var(--color-info-item-base);
+    }
   }
 
-  &.accent--brand {
+  &.accent--warning {
     .code-container {
-      border-inline-start-color: var(--color-brand-item-base);
+      border-inline-start-color: var(--color-warning-item-base);
     }
   }
 

package/lib/components/ui/object-link/UiObjectLink.vue

@@ -3,7 +3,7 @@
   <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo-action-link-small">
     <span class="icon">
       <slot name="icon">
-        <VtsIcon :icon accent="current" />
+        <VtsIcon :name="icon" size="medium" />
       </slot>
     </span>
     <span v-tooltip class="content text-ellipsis">
@@ -13,7 +13,7 @@
   <span v-else :class="{ disabled }" class="ui-object-link typo-action-link-small">
     <span class="icon">
       <slot name="icon">
-        <VtsIcon :icon accent="current" />
+        <VtsIcon :name="icon" size="medium" />
       </slot>
     </span>
     <slot />
@@ -23,13 +23,13 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 import { type RouteLocationRaw } from 'vue-router'
 
 defineProps<{
   route?: RouteLocationRaw
   disabled?: boolean
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 defineSlots<{

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -10,7 +10,7 @@
       type="text"
       accent="brand"
       :aria-label="uiStore.isMobile ? t('core.query-search-bar.label') : undefined"
-      :icon="!uiStore.isMobile ? faMagnifyingGlass : undefined"
+      :icon="!uiStore.isMobile ? 'fa:magnifying-glass' : undefined"
       :placeholder="t('core.query-search-bar.placeholder')"
     />
     <template v-if="!uiStore.isMobile">
@@ -32,8 +32,8 @@
 
     <!-- Mobile icons: search + filter -->
     <template v-else>
-      <UiButtonIcon accent="brand" size="medium" type="submit" :icon="faMagnifyingGlass" class="action-button" />
-      <UiButtonIcon accent="brand" size="medium" disabled :icon="faFilter" class="action-button" />
+      <UiButtonIcon accent="brand" size="medium" type="submit" icon="fa:magnifying-glass" class="action-button" />
+      <UiButtonIcon accent="brand" size="medium" disabled icon="fa:filter" class="action-button" />
     </template>
   </form>
 </template>
@@ -46,7 +46,6 @@ import UiInput from '@core/components/ui/input/UiInput.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useUiStore } from '@core/stores/ui.store'
 import { uniqueId } from '@core/utils/unique-id.util'
-import { faFilter, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -2,7 +2,7 @@
 <template>
   <li class="ui-quick-task-item">
     <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
-      <UiButtonIcon accent="brand" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
+      <UiButtonIcon accent="brand" :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'" size="small" />
     </div>
     <div class="content">
       <div class="typo-body-bold">
@@ -12,14 +12,14 @@
         <div class="line-1">
           <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
-            <VtsIcon :icon="faCircleNotch" accent="current" />
+            <VtsIcon name="fa:circle-notch" size="medium" />
             <span class="typo-body-regular-small">{{ t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo-body-regular-small">
           {{ d(task.start, 'datetime_short') }}
           <template v-if="task.end">
-            <VtsIcon :icon="faArrowRight" accent="current" />
+            <VtsIcon name="fa:arrow-right" size="medium" />
             {{ d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
@@ -34,7 +34,6 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsQuickTaskList from '@core/components/task/VtsQuickTaskList.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiTag from '@core/components/ui/tag/UiTag.vue'
-import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -3,7 +3,7 @@
   <label :class="variant" class="ui-radio-button typo-body-regular">
     <span class="radio-container">
       <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
-      <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
+      <VtsIcon name="fa:circle" size="medium" class="radio-icon" />
     </span>
     <slot />
   </label>
@@ -13,7 +13,6 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
-import { faCircle } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 const { accent, value, disabled } = defineProps<{

package/lib/components/ui/table-pagination/PaginationButton.vue

@@ -4,33 +4,10 @@
 
 <script setup lang="ts">
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import type { IconName } from '@core/icons'
 
 defineProps<{
   disabled: boolean
-  icon: IconDefinition
+  icon: IconName
 }>()
 </script>
-
-<style scoped lang="postcss">
-.pagination-button.accent--brand {
-  border: 0.1rem solid var(--color-neutral-border);
-  font-size: 1rem;
-  /* Override UiButtonIcon size to match DS */
-  width: 3rem;
-  height: 3rem;
-
-  &:hover {
-    border-color: var(--color-brand-item-hover);
-  }
-
-  &:active {
-    border-color: var(--color-brand-item-active);
-  }
-
-  &:disabled {
-    background-color: var(--color-neutral-background-disabled);
-    border-color: transparent;
-  }
-}
-</style>

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -1,45 +1,41 @@
-<!-- v3 -->
+<!-- v5 -->
 <template>
-  <div class="ui-table-pagination">
-    <div class="buttons-container">
-      <PaginationButton :disabled="isFirstPage" :icon="faAngleDoubleLeft" @click="emit('first')" />
-      <PaginationButton :disabled="isFirstPage" :icon="faAngleLeft" @click="emit('previous')" />
-      <PaginationButton :disabled="isLastPage" :icon="faAngleRight" @click="emit('next')" />
-      <PaginationButton :disabled="isLastPage" :icon="faAngleDoubleRight" @click="emit('last')" />
+  <div class="ui-table-pagination" :class="className">
+    <div class="container">
+      <span class="typo-body-regular-small label">
+        {{ t('core.select.n-object-of', { from, to, total }) }}
+      </span>
+      <div class="buttons-container">
+        <PaginationButton :disabled="isFirstPage" icon="fa:angle-double-left" @click="emit('first')" />
+        <PaginationButton :disabled="isFirstPage" icon="fa:angle-left" @click="emit('previous')" />
+        <PaginationButton :disabled="isLastPage" icon="fa:angle-right" @click="emit('next')" />
+        <PaginationButton :disabled="isLastPage" icon="fa:angle-double-right" @click="emit('last')" />
+      </div>
     </div>
-    <span class="typo-body-regular-small label">
-      {{ t('core.select.n-object-of', { from, to, total }) }}
-    </span>
-    <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
-    <div class="dropdown-wrapper">
-      <select v-model="showBy" class="dropdown typo-body-regular-small">
-        <option v-for="option in [12, 24, 48, -1]" :key="option" :value="option" class="typo-body-bold-small">
-          {{ option === -1 ? t('core.pagination.all') : option }}
-        </option>
-      </select>
-      <VtsIcon :icon="faAngleDown" accent="current" class="icon" />
+    <div class="container">
+      <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
+      <VtsSelect :id="showBySelectId" accent="brand" class="typo-body-regular-small show-by-select" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsSelect from '@core/components/select/VtsSelect.vue'
 import PaginationButton from '@core/components/ui/table-pagination/PaginationButton.vue'
-import {
-  faAngleDoubleLeft,
-  faAngleDoubleRight,
-  faAngleDown,
-  faAngleLeft,
-  faAngleRight,
-} from '@fortawesome/free-solid-svg-icons'
+import { useFormSelect } from '@core/packages/form-select'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-defineProps<{
+export type TablePaginationSize = 'small' | 'medium'
+
+const { size } = defineProps<{
   from: number
   to: number
   total: number
   isFirstPage: boolean
   isLastPage: boolean
+  size: TablePaginationSize
 }>()
 
 const emit = defineEmits<{
@@ -51,7 +47,16 @@ const emit = defineEmits<{
 
 const showBy = defineModel<number>('showBy', { default: 24 })
 
+const className = computed(() => toVariants({ size }))
+
 const { t } = useI18n()
+
+const { id: showBySelectId } = useFormSelect([12, 24, 48, -1], {
+  model: showBy,
+  option: {
+    label: option => (option === -1 ? t('core.pagination.all') : option.toString()),
+  },
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -60,6 +65,21 @@ const { t } = useI18n()
   align-items: center;
   gap: 0.8rem;
 
+  &.size--small {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  &.size--medium {
+    flex-direction: row;
+  }
+
+  .container {
+    display: flex;
+    gap: 0.8rem;
+    align-items: center;
+  }
+
   .buttons-container {
     display: flex;
     gap: 0.2rem;
@@ -69,78 +89,19 @@ const { t } = useI18n()
     color: var(--color-neutral-txt-secondary);
   }
 
-  .show::before {
-    content: '-';
-    margin-right: 0.8rem;
-  }
-
-  .dropdown-wrapper {
-    position: relative;
+  /* Workaround: we don't have "small" select yet */
+  .show-by-select {
+    width: 6rem;
 
-    .dropdown {
-      cursor: pointer;
-      padding: 0.2rem 0.6rem;
+    &:deep(.ui-input) {
       height: 3rem;
-      width: 5rem;
-      appearance: none;
-      border-radius: 0.4rem;
-      color: var(--color-brand-txt-base);
-      border: 0.1rem solid var(--color-neutral-border);
-      background-color: var(--color-neutral-background-primary);
-
-      &:hover {
-        border-color: var(--color-brand-item-hover);
-        background-color: var(--color-brand-background-hover);
-        color: var(--color-brand-txt-hover);
-
-        + .icon {
-          color: var(--color-brand-txt-hover);
-        }
-      }
-
-      &:disabled {
-        cursor: not-allowed;
-        background-color: var(--color-neutral-background-disabled);
-        color: var(--color-neutral-txt-secondary);
-        border-color: transparent;
-
-        + .icon {
-          color: var(--color-neutral-txt-secondary);
-        }
-      }
-
-      &:active {
-        background-color: var(--color-brand-background-active);
-        border-color: var(--color-brand-item-active);
-      }
-
-      &:focus-visible {
-        outline: 0.1rem solid var(--color-brand-item-base);
-        border: 0.1rem solid var(--color-brand-item-base);
-        color: var(--color-brand-txt-base);
-        background-color: var(--color-brand-background-selected);
-
-        + .icon {
-          color: var(--color-brand-txt-base);
-        }
-      }
-
-      option {
-        background-color: var(--color-neutral-background-primary);
-        border: 0.1rem solid var(--color-neutral-border);
-        border-radius: 0.4rem;
-        color: var(--color-neutral-txt-primary);
-      }
+      padding-inline: 0.8rem;
+      gap: 0.8rem;
+      min-width: 6rem;
     }
 
-    .icon {
-      position: absolute;
-      top: 50%;
-      right: 0.8rem;
-      transform: translateY(-50%);
-      pointer-events: none;
-      font-size: 1rem;
-      color: var(--color-brand-txt-base);
+    &:deep(.input) {
+      font-size: 1.4rem;
     }
   }
 }

package/lib/components/ui/tag/UiTag.vue

@@ -3,7 +3,7 @@
 <template>
   <span :class="toVariants({ accent, variant })" class="ui-tag typo-body-regular-small">
     <slot name="icon">
-      <VtsIcon :icon accent="current" fixed-width />
+      <VtsIcon :name="icon" size="medium" />
     </slot>
     <span class="text-ellipsis"><slot /></span>
   </span>
@@ -11,8 +11,8 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 type TagAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
 type TagVariant = 'primary' | 'secondary'
@@ -20,7 +20,7 @@ type TagVariant = 'primary' | 'secondary'
 defineProps<{
   accent: TagAccent
   variant: TagVariant
-  icon?: IconDefinition
+  icon?: IconName
 }>()
 
 defineSlots<{

package/lib/components/ui/text-area/UiTextarea.vue

@@ -19,8 +19,8 @@
 import UiCharacterLimit from '@core/components/ui/character-limit/UiCharacterLimit.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useFocus } from '@vueuse/core'
 import { computed, useAttrs, useId, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -39,7 +39,7 @@ const {
   maxCharacters?: number
   disabled?: boolean
   href?: string
-  icon?: IconDefinition
+  icon?: IconName
   required?: boolean
 }>()
 

package/lib/components/ui/toaster/UiToaster.vue

@@ -2,7 +2,7 @@
 <template>
   <div :class="toVariants({ accent })" class="ui-toaster">
     <div class="content">
-      <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
+      <VtsIcon class="information-icon" :name="icon" size="medium" />
       <div>
         <div class="typo-h5">
           <slot />
@@ -11,7 +11,7 @@
           <slot name="description" />
         </div>
       </div>
-      <UiButtonIcon class="close-icon" :icon="faXmark" accent="brand" size="medium" @click="emit('close')" />
+      <UiButtonIcon class="close-icon" icon="fa:xmark" accent="brand" size="medium" @click="emit('close')" />
     </div>
     <div v-if="slots.actions" class="actions">
       <slot name="actions" />
@@ -22,14 +22,13 @@
 <script setup lang="ts">
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { IconName } from '@core/icons'
+import { useMapper } from '@core/packages/mapper'
 import { toVariants } from '@core/utils/to-variants.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faCheck, faCircle, faExclamation, faInfo, faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed } from 'vue'
 
 type ToasterAccent = 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<{
+const { accent } = defineProps<{
   accent: ToasterAccent
 }>()
 
@@ -43,13 +42,16 @@ const slots = defineSlots<{
   actions?(): any
 }>()
 
-const states: Record<ToasterAccent, IconDefinition> = {
-  info: faInfo,
-  success: faCheck,
-  warning: faExclamation,
-  danger: faXmark,
-}
-const icon = computed(() => states[props.accent])
+const icon = useMapper<ToasterAccent, IconName>(
+  () => accent,
+  {
+    info: 'legacy:status:info',
+    success: 'legacy:status:success',
+    warning: 'legacy:status:warning',
+    danger: 'legacy:status:danger',
+  },
+  'info'
+)
 </script>
 
 <style scoped lang="postcss">

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -19,7 +19,7 @@
         v-tooltip="isExpanded ? t('core.close') : t('core.open')"
         class="toggle"
         accent="brand"
-        :icon="isExpanded ? faAngleDown : faAngleRight"
+        :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'"
         size="small"
         :target-scale="{ x: 1.5, y: 2 }"
         @click="emit('toggle')"
@@ -27,7 +27,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo-body-bold-small" @click="navigate">
         <slot name="icon">
-          <VtsIcon :icon accent="current" class="icon" />
+          <VtsIcon :name="icon" size="medium" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
@@ -43,9 +43,8 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconName } from '@core/icons'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
@@ -56,7 +55,7 @@ defineOptions({
 
 defineProps<{
   route: RouteLocationRaw
-  icon?: IconDefinition
+  icon?: IconName
   active?: boolean
 }>()
 

package/lib/composables/default-tab.composable.md

@@ -0,0 +1,42 @@
+# `useDefaultTab` Composable
+
+This composable manages automatic navigation to default tabs and remembers the last visited tab for a given router dispatcher.
+
+## How it works
+
+The composable watches route changes and:
+
+- Automatically redirects to the remembered or default tab when navigating to the base dispatcher route
+- Stores the current tab in localStorage for future visits
+- Uses the naming convention `{dispatcherRouteName}/{tabName}` for tab route names
+
+## Parameters
+
+| Name                  | Type     | Required | Description                                     |
+| --------------------- | -------- | :------: | ----------------------------------------------- |
+| `dispatcherRouteName` | `string` |    ✓     | Dispatcher page route name (e.g., '/pool/<id>') |
+| `defaultTab`          | `string` |    ✓     | Default tab name (e.g., 'dashboard')            |
+
+## Usage
+
+```typescript
+// In the dispatcher page component (e.g., `pages/pool/[id].vue`)
+useDefaultTab('pool/[id]', 'dashboard')
+
+// User first navigates to /pool/123
+// → Automatic redirect to /pool/123/dashboard (default tab)
+
+// User then navigates to /pool/123/stats
+// → 'stats' is stored as the last visited tab for this route
+
+// Finally, user navigates to /pool/456
+// → Automatic redirect to /pool/456/stats
+```
+
+## Storage
+
+Tab preferences are stored in localStorage under the key `default-tabs` with the structure:
+
+```typescript
+Map<string, string> // dispatcherRouteName -> lastVisitedTab
+```