@ditojs/admin 2.0.4 → 2.1.0

package/types/index.d.ts

@@ -8,7 +8,7 @@ import {
   TimeFormat
 } from '@ditojs/utils'
 import { RequireAtLeastOne, SetOptional } from 'type-fest'
-import Vue, { VueConstructor } from 'vue'
+import { Component as VueComponent } from 'vue'
 
 declare global {
   const dito: DitoGlobal
@@ -453,7 +453,7 @@ export type ComponentSchema<$Item = any> = BaseSchema<$Item> & {
    * Use a Vue component to render the component. The component is specified
    * like this: import(...).
    */
-  component: Resolvable<VueConstructor<Vue>>
+  component: Resolvable<VueComponent>
 }
 
 export type InputSchema<$Item = any> = BaseSchema<$Item> & {
@@ -850,7 +850,7 @@ export type ColumnSchema<$Item = any> = {
    * Use a Vue component to render the cell. The component is specified
    * like this: import(...).
    */
-  component?: Resolvable<VueConstructor<Vue>>
+  component?: Resolvable<VueComponent>
   /**
    * Whether the column should be sortable.
    */
@@ -1010,13 +1010,13 @@ export type DitoContext<$Item = any> = {
   itemLabel: string | null
   formLabel: string | null
   component: any
-  schemaComponent: Vue | null
+  schemaComponent: VueComponent | null
   formComponent: any
   viewComponent: any
   dialogComponent: any
-  panelComponent: Vue | null
-  resourceComponent: Vue | null
-  sourceComponent: Vue | null
+  panelComponent: VueComponent | null
+  resourceComponent: VueComponent | null
+  sourceComponent: VueComponent | null
   option: any
   options: any
   query: string
@@ -1058,17 +1058,19 @@ export type DitoContext<$Item = any> = {
   }): void
 }
 
-export type View<$Item = any> = {
-  type: 'view',
-  resource?: Form['resource']
-  clipboard?: Form['clipboard']
-  component?: Component<$Item>
-} | {
-  type: 'view',
-  resource?: Form['resource']
-  clipboard?: Form['clipboard']
-  components?: Components<$Item>
-}
+export type View<$Item = any> =
+  | {
+      type: 'view'
+      resource?: Form['resource']
+      clipboard?: Form['clipboard']
+      component?: Component<$Item>
+    }
+  | {
+      type: 'view'
+      resource?: Form['resource']
+      clipboard?: Form['clipboard']
+      components?: Components<$Item>
+    }
 
 export type Component<$Item = any> =
   | InputSchema<$Item>
@@ -1093,9 +1095,11 @@ export type Component<$Item = any> =
   | SectionSchema<$Item>
   | HiddenSchema<$Item>
 
-export type Components<$Item = any> = Component<$Item>[] | {
-  [$name: string]: Component<$Item>
-}
+export type Components<$Item = any> =
+  | Component<$Item>[]
+  | {
+      [$name: string]: Component<$Item>
+    }
 
 export type Buttons<$Item> = Record<
   string,
@@ -1125,7 +1129,7 @@ export type Form<$Item = any> = {
     string,
     Omit<Form<$Item>, 'tabs' | 'type'> & {
       defaultTab?: OrItemAccessor<$Item, {}, boolean>
-  }
+    }
   >
   // TODO: document components
   components?: Components<$Item>
@@ -1154,7 +1158,7 @@ export class DitoAdmin<
 > {
   api: ApiConfig
   // TODO: finish off Vue types
-  root: Vue
+  root: VueComponent
   constructor(
     element: Element | string,
     options?: {

package/src/styles/_base.sass

@@ -1,15 +0,0 @@
-+reset
-
-\:root
-  --font-size: #{$font-size}
-  --line-height: #{$line-height}
-  --color-text: #{$color-text}
-  font-size: var(--font-size)
-  line-height: var(--line-height)
-  color: var(--color-text)
-  background: $content-color-background
-  font-family: $font-family-sans
-  -moz-osx-font-smoothing: grayscale
-  -webkit-font-smoothing: antialiased
-  overflow-x: hidden
-  max-width: 100%

package/src/styles/_button.sass

@@ -1,127 +0,0 @@
-.dito-button
-  // .dito-button with order-arrows:
-  .dito-order-arrows
-    display: inline-block
-    width: round($button-order-arrow-size * $math-sqrt2)
-    padding-left: $form-spacing
-    $arrow-offset: calc($button-order-arrow-size / 2 + $border-width)
-    &::before
-      +arrow($button-order-arrow-size, 'up')
-      bottom: $arrow-offset
-    &::after
-      +arrow($button-order-arrow-size, 'down')
-      top: $arrow-offset
-  &.dito-order-asc .dito-order-arrows
-    &::before
-      bottom: 0
-    &::after
-      display: none
-  &.dito-order-desc .dito-order-arrows
-    &::before
-      display: none
-    &::after
-      top: 0
-
-.dito-button-create:empty::before
-  content: 'Create'
-.dito-button-add:empty::before
-  content: 'Add'
-.dito-button-delete:empty::before
-  content: 'Delete'
-.dito-button-remove:empty::before
-  content: 'Remove'
-.dito-button-edit:empty::before
-  content: 'Edit'
-.dito-button-save:empty::before
-  content: 'Save'
-.dito-button-apply:empty::before
-  content: 'Apply'
-.dito-button-login:empty::before
-  content: 'Login'
-.dito-button-ok:empty::before
-  content: 'OK'
-.dito-button-cancel:empty::before
-  content: 'Cancel'
-.dito-button-close:empty::before
-  content: 'Close'
-.dito-button-drag:empty::before
-  content: 'Drag'
-.dito-button-copy:empty::before
-  content: 'Copy'
-.dito-button-paste:empty::before
-  content: 'Paste'
-
-.dito-button-drag
-  cursor: grab
-  &:active
-    cursor: grabbing
-
-.dito-buttons
-  &.dito-buttons-large
-    --button-margin: 3px
-    font-size: $menu-font-size
-    flex-flow: row wrap
-    justify-content: center
-    .dito-container
-      // Do not specify this on .dito-buttons directly as it would break borders
-      margin-top: $content-padding
-    .dito-button
-      border-radius: 2em
-      padding: $button-round-padding
-  &.dito-buttons-main
-    position: sticky
-    bottom: 0
-    width: 100%
-    align-self: flex-end
-    z-index: 500
-    padding-bottom:  $content-padding
-    margin-bottom: -$content-padding
-    margin-top: 2 * $content-padding
-    box-shadow: 0 (-$content-padding) $content-padding (-$content-padding) $color-shadow
-    background: $content-color-background
-
-  &.dito-buttons-round,
-  &.dito-buttons-small
-    // For now, nothing for these:
-    // .dito-button-create:empty::before,
-    // .dito-button-add:empty::before
-    // Special .dito-button-add-upload without :empty:
-    .dito-button-add-upload::before
-      @extend %icon-add
-    .dito-button-delete:empty::before,
-    .dito-button-remove:empty::before
-      @extend %icon-remove
-    .dito-button-edit:empty::before
-      @extend %icon-edit
-    .dito-button-drag:empty::before
-      @extend %icon-drag
-    .dito-button-copy:empty::before
-      @extend %icon-copy
-    .dito-button-paste:empty::before
-      @extend %icon-paste
-
-.dito-button-overlay
-  position: absolute
-  right: $border-width
-  top: $border-width
-  bottom: $border-width
-  border: 0
-  border-radius: $border-radius
-  cursor: pointer
-  &.dito-button-clear
-    width: $input-height
-    z-index: 1
-    background: $color-white
-    display: none
-    $button-clear: &
-    @at-root .dito-component:hover
-      // Support two levels of nesting inside .dito-component, used by TypeColor
-      & > #{$button-clear},
-      & > * > #{$button-clear},
-      & > * > * > #{$button-clear}
-        display: block
-    &::before
-      @extend %icon-clear
-      color: $color-grey
-    &:hover::before
-      color: $color-black

package/src/styles/_imports.sass

@@ -1,2 +0,0 @@
-@import '@ditojs/ui/imports.sass'
-@import '_settings'

package/src/styles/_layout.sass

@@ -1,13 +0,0 @@
-// TODO: Convert to flexbox
-
-.dito-layout-vertical
-  display: table
-  > *
-    display: table-row
-
-.dito-layout-horizontal
-  display: table-row
-  > *
-    display: table-cell
-    & + *
-      padding-left: $form-spacing

package/src/styles/_notifications.sass

@@ -1,33 +0,0 @@
-=type($background)
-  background: lighten($background, 5)
-  color: $color-white
-  border-left: 12px solid darken($background, 10)
-
-.dito-notifications
-  .dito-notification
-    padding: 8px
-    margin: 12px 12px 0
-    font-size: inherit
-    color: $color-white
-    border-radius: $border-radius
-    box-shadow: $shadow-window
-    .notification-title
-      font-weight: bold
-      padding-bottom: 8px
-    .notification-content
-      p
-        margin: 0
-        & + p
-          margin-top: 8px
-    &,
-    &.info
-      +type($color-active)
-    &.success
-      +type($color-success)
-    &.warning
-      +type($color-warning)
-    &.error
-      +type($color-error)
-
-  .vue-notification-wrapper
-    overflow: visible

package/src/styles/_pulldown.sass

@@ -1,26 +0,0 @@
-ul.dito-pulldown
-  display: none
-  position: absolute
-  top: 0
-  z-index: 1000
-  border-radius: $pulldown-radius
-  box-shadow: $shadow-window
-  &.dito-open
-    display: block
-  li
-    +user-select(none)
-    a
-      display: block
-      text-align: center
-      padding: $pulldown-padding
-      line-height: 1
-      background: $button-color
-      &:hover
-        background: $color-active
-        color: $color-white
-    &:first-child a
-      border-top-left-radius: $pulldown-radius
-      border-top-right-radius: $pulldown-radius
-    &:last-child a
-      border-bottom-left-radius: $pulldown-radius
-      border-bottom-right-radius: $pulldown-radius

package/src/styles/_scroll.sass

@@ -1,13 +0,0 @@
-.dito-scroll
-  flex: 1
-  max-height: 100%
-  overflow-x: hidden
-  overflow-y: auto
-
-.dito-scroll-parent
-  // To make vertical scrolling in .dito-scroll work:
-  flex: 1
-  display: flex
-  position: relative
-  flex-flow: column
-  overflow: hidden

package/src/styles/_settings.sass

@@ -1,55 +0,0 @@
-// Typography
-$font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
-$font-family-mono: 'Menlo', 'Consolas', 'Monaco', 'Vera Mono', 'Andale Mono', 'Ubuntu Mono', monospace
-$font-size: 13px
-$font-size-small: 11px
-// Adjust line-height so that it fulfills this equation, which is used
-// to reach equal height for icon-buttons (`height: 2em`), table headers & co.:
-// `(2 * $font-size - 2 * ($border-width + $input-padding-ver)) / $font-size`
-// TODO: Ideally, this would be handled in @ditojs/ui, but it would have to be
-// done in a way independent of `$font-size`. The right approach would probably
-// be to use `$input-height` and vertical centering instead for all inputs that
-// have a height of one line?
-// NOTE: Due to higher precision in dart-sass, this needs to be rounded to 5
-// fractional digits, otherwise CSS creates the wrong resulting line-height with
-// 1 mixsing pixel.
-$line-height: rounded(calc($input-height-factor - 2 * ($border-width + $input-padding-ver) / $font-size), 5)
-
-// Button
-$button-order-arrow-size: 4px
-
-// Pulldown
-$pulldown-radius: 0.5em
-$pulldown-padding-ver: 0.5em
-$pulldown-padding-hor: 1em
-$pulldown-padding: $pulldown-padding-ver $pulldown-padding-hor
-
-// Content
-$content-width: 900px
-$content-sidebar-width: 360px
-$content-padding: 16px
-$content-padding-half: calc($content-padding / 2)
-$content-color-background: $color-lightest
-
-// Form
-$form-spacing: $input-padding-hor
-$form-spacing-half: calc($form-spacing / 2)
-
-// Menu
-$menu-font-size: 14px
-$menu-line-height: 1
-$menu-z-index: 1000
-$menu-padding-ver: $menu-font-size
-$menu-padding-hor: $content-padding
-$menu-padding: $menu-padding-ver $menu-padding-hor
-$menu-height: $menu-font-size + 2 * $menu-padding-ver
-
-// Tabs
-$tab-margin: 6px
-$tab-padding-hor: 12px
-$tab-padding-ver: calc(($menu-padding-ver * 2 - $tab-margin) / 2)
-$tab-radius: 4px // $border-radius
-
-// Patterns
-$pattern-transparency-size: ($font-size - $border-width) * $input-height-factor
-$pattern-transparency: repeating-conic-gradient(transparent 0% 25%, #eee 0% 50%) 0% 0% / #{$pattern-transparency-size} #{$pattern-transparency-size}

package/src/styles/_sortable.sass

@@ -1,9 +0,0 @@
-.dito-sortable-fallback
-  filter: drop-shadow(0 2px 4px $color-shadow)
-
-  // Nested <td> need to also switch to `display: block` style during dragging
-  &,
-  td
-    display: flex
-    > *
-      flex: 1

package/src/styles/_table.sass

@@ -1,153 +0,0 @@
-=table-border
-  // Note: No border-width set here on purpose!
-  border-style: solid
-  border-color: $border-color
-
-=table-border-left
-  border-left-width: $border-width
-
-=table-border-right
-  border-right-width: $border-width
-
-=table-border-top
-  border-top-width: $border-width
-
-=table-border-bottom
-  border-bottom-width: $border-width
-
-=table-border-top-left
-  +table-border-top
-  +table-border-left
-  border-top-left-radius: $border-radius
-
-=table-border-top-right
-  +table-border-top
-  +table-border-right
-  border-top-right-radius: $border-radius
-
-=table-border-bottom-left
-  +table-border-bottom
-  +table-border-left
-  border-bottom-left-radius: $border-radius
-
-=table-border-bottom-right
-  +table-border-bottom
-  +table-border-right
-  border-bottom-right-radius: $border-radius
-
-table.dito-table
-  --separator-width: #{$border-width}
-  width: 100%
-  height: min-content
-  border-radius: $border-radius
-
-  > tbody,
-  > tfoot
-    > tr
-      vertical-align: baseline
-      > td
-        padding: $form-spacing 0 $form-spacing $form-spacing
-        background: $content-color-background
-        &:last-child
-          padding-right: $form-spacing
-        &.dito-cell-edit-buttons
-          width: 1%
-          &,
-          .dito-button
-            // To align better with `vertical-align: baseline` in normal td:
-            vertical-align: top
-
-  &.dito-table-larger-padding
-    // Add more spacing to cells in tables except those containing edit buttons,
-    // to better align cell texts with edit buttons.
-    td:not(.dito-cell-edit-buttons)
-      $padding: $form-spacing * 1.5
-      padding: $padding 0 $padding $padding
-
-  // Variants of list styles: separators and alternate colors.
-  &.dito-table-separators
-    > tbody > tr + tr,
-    > tbody:not(:empty) + tfoot > tr
-      > td
-        border-top: var(--separator-width) solid $border-color
-
-  &.dito-table-alternate-colors
-    > tbody > tr:nth-child(odd),
-    &.dito-table-even-count > tfoot > tr
-      > td
-        background: $color-white
-
-  &.dito-table-background
-    > tbody,
-    > tfoot
-       > tr > td
-        background: $color-white
-
-  // Add top/top-left/top-right borders to the thead cells, using the special
-  // convention that they're added to the first element inside them instead of
-  // the cell itself, so buttons can keep the border themselves and display
-  // focus nicely.
-  > thead > tr > th
-    // Use `:not(:focus)` to avoid overriding button focus border styling.
-    > *
-      box-sizing: content-box
-      &:not(:focus)
-        +table-border
-      &
-        +table-border-top
-        +table-border-bottom
-        +table-border-left
-        +table-border-right
-    &:first-child > *
-      +table-border-top-left
-    &:last-child > *
-      +table-border-top-right
-    & + th > *
-      margin-left: -1px
-      // Don't cover the focused border of buttons:
-      &:focus
-        z-index: 1
-
-  // Add left/rigth borders to the normal tbody cells.
-  > tbody > tr > td
-    border: 0
-    +table-border
-    &:first-child
-      +table-border-left
-    &:last-child
-      +table-border-right
-
-  // If there is no thead, add top/top-left/top-right borders borders to the
-  // first row of the tbody cells.
-  > tbody:first-child > tr:first-child > td,
-  // Use :first-child to exclude situation where there's a thead and empty tbody
-  > tbody:first-child:empty + tfoot > tr > td
-    +table-border-top
-    &:first-child
-      +table-border-top-left
-    &:last-child
-      +table-border-top-right
-
-  // If there is no toot, add top/top-left/top-right borders borders to the
-  // first row of the tbody cells.
-  > tbody:last-child > tr:last-child > td
-    +table-border-bottom
-    &:first-child
-      +table-border-bottom-left
-    &:last-child
-      +table-border-bottom-right
-
-  // Add bottom/bottom-left/bottom-right borders to the thead cells.
-  > tfoot > tr > td
-    border-width: 0
-    +table-border
-    +table-border-bottom
-    &:first-child
-      +table-border-bottom-left
-    &:last-child
-      +table-border-bottom-right
-
-// Nested .dito-table:
-table.dito-table table.dito-table,
-.dito-form-nested table.dito-table
-  margin: 0

package/src/styles/style.sass

@@ -1,10 +0,0 @@
-@import '_imports'
-// No need to import `_imports.sass` again, since it's handled by sass-loader.
-@import '_base'
-@import '_button'
-@import '_pulldown'
-@import '_layout'
-@import '_scroll'
-@import '_sortable'
-@import '_table'
-@import '_notifications'

package/src/types/TypeButton.vue

@@ -1,73 +0,0 @@
-<template lang="pug">
-button.dito-button(
-  ref="element"
-  :id="dataPath"
-  :type="type"
-  :title="text"
-  :class="`dito-button-${verb}`"
-  v-bind="attributes"
-) {{ text }}
-</template>
-
-<script>
-import TypeComponent from '../TypeComponent.js'
-import { getSchemaAccessor } from '../utils/accessor.js'
-import { hasResource } from '../utils/resource.js'
-import { labelize } from '@ditojs/utils'
-
-export default TypeComponent.register([
-  'button', 'submit'
-],
-// @vue/component
-{
-  defaultValue: () => undefined, // Callback to override `defaultValue: null`
-  excludeValue: true,
-  defaultWidth: 'auto',
-  // TODO: Consider making this work nicely:
-  // omitFlexGrow: true,
-
-  computed: {
-    verb() {
-      return this.verbs[this.name] || this.name
-    },
-
-    text: getSchemaAccessor('text', {
-      type: String,
-      get(text) {
-        return text || labelize(this.verb)
-      }
-    }),
-
-    closeForm: getSchemaAccessor('closeForm', {
-      type: Boolean,
-      default: false
-    }),
-
-    // @override
-    events() {
-      const { onFocus, onBlur, onClick } = this
-      return { onFocus, onBlur, onClick }
-    }
-
-  },
-
-  methods: {
-    async submit(options) {
-      return this.resourceComponent?.submit(this, options)
-    },
-
-    async onClick() {
-      const res = await this.emitEvent('click', {
-        parent: this.schemaComponent
-      })
-      // Have buttons that define resources call `this.submit()` by default:
-      if (
-        res === undefined && // Meaning: don't prevent default.
-        hasResource(this.schema)
-      ) {
-        await this.submit()
-      }
-    }
-  }
-})
-</script>