@ditojs/admin 2.0.5 → 2.1.0

package/src/types/{TypeList.vue → DitoTypeList.vue}

@@ -8,7 +8,7 @@
   .dito-navigation(
     v-if="scopes || hasPagination"
   )
-    dito-scopes(
+    DitoScopes(
       v-if="scopes"
       :query="query"
       :scopes="scopes"
@@ -18,7 +18,7 @@
     .dito-spacer(
       v-else-if="hasPagination"
     )
-    dito-pagination(
+    DitoPagination(
       v-if="hasPagination"
       :query="query"
       :limit="paginate"
@@ -32,28 +32,30 @@
       'dito-table-even-count': hasEvenCount
     }`
   )
-    dito-table-head(
+    DitoTableHead(
       v-if="columns"
       :query="query"
       :columns="columns"
       :hasEditButtons="hasEditButtons"
     )
-    use-sortable(
+    UseSortable(
       tag="tbody"
       :modelValue="updateOrder(sourceSchema, listData, paginationRange)"
-      @update:modelValue="value => listData = value"
       :options="getSortableOptions(draggable)"
+      @update:modelValue="value => (listData = value)"
     )
       tr(
-        v-for="item, index in listData"
-        :key="getItemUid(schema, item)"
+        v-for="(item, index) in listData"
         :id="getDataPath(index)"
+        :key="getItemUid(schema, item)"
       )
-        template(v-if="columns")
+        template(
+          v-if="columns"
+        )
           template(
             v-for="column in columns"
           )
-            dito-table-cell(
+            DitoTableCell(
               v-if="shouldRender(column)"
               :key="column.name"
               :class="getCellClass(column)"
@@ -70,7 +72,7 @@
           v-else
         )
           td
-            dito-schema-inlined(
+            DitoSchemaInlined(
               v-if="isInlined"
               :label="getItemLabel(schema, item, { index, asObject: true })"
               :schema="getItemFormSchema(schema, item, context)"
@@ -105,7 +107,7 @@
         td.dito-cell-edit-buttons(
           v-if="hasCellEditButtons"
         )
-          dito-edit-buttons(
+          DitoEditButtons(
             :deletable="deletable"
             :draggable="draggable"
             :editable="editable"
@@ -122,10 +124,8 @@
       v-if="hasListButtons && !single"
     )
       tr
-        td.dito-cell-edit-buttons(
-          :colspan="numColumns"
-        )
-          dito-edit-buttons(
+        td.dito-cell-edit-buttons(:colspan="numColumns")
+          DitoEditButtons(
             :creatable="creatable"
             :createPath="path"
             :buttons="buttonSchemas"
@@ -136,7 +136,7 @@
             :store="store"
           )
   //- Render create buttons outside table when in a single component view:
-  dito-edit-buttons.dito-buttons-main.dito-buttons-large(
+  DitoEditButtons.dito-buttons-main.dito-buttons-large(
     v-if="hasListButtons && single"
     :creatable="creatable"
     :createPath="path"
@@ -149,45 +149,23 @@
   )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-list
-    position: relative
-    .dito-navigation
-      display: flex
-      justify-content: space-between
-      padding-bottom: $content-padding-half
-      +user-select(none)
-      &:empty
-        display: none
-      .dito-scopes,
-      .dito-pagination
-        display: flex
-        flex: 0 1 auto
-        min-width: 0
-    &.dito-single
-      // So that list buttons can be sticky to the bottom:
-      display: grid
-      grid-template-rows: min-content
-      height: 100%
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import SourceMixin from '../mixins/SourceMixin.js'
 import SortableMixin from '../mixins/SortableMixin.js'
 import {
-  getNamedSchemas, getViewEditPath,
-  resolveSchemaComponent, resolveSchemaComponents
+  getNamedSchemas,
+  getViewEditPath,
+  resolveSchemaComponent,
+  resolveSchemaComponents
 } from '../utils/schema.js'
 import { getFiltersPanel } from '../utils/filter.js'
 import { appendDataPath } from '../utils/data.js'
 import { pickBy, equals, hyphenate } from '@ditojs/utils'
 
 // @vue/component
-export default TypeComponent.register('list', {
+export default DitoTypeComponent.register('list', {
   mixins: [SourceMixin, SortableMixin],
 
   getSourceType(type) {
@@ -203,15 +181,17 @@ export default TypeComponent.register('list', {
       // At the time of the creation of the panel schema, the schemaComponent is
       // not filled yet, so we can't get the target component (dataPath) right
       // away. Use a proxy and a getter instead, to get around this:
-      const getListComponent = () => schemaComponent.getComponentByDataPath(
-        dataPath,
-        component => component.type === 'list'
-      )
+      const getListComponent = () =>
+        schemaComponent.getComponentByDataPath(
+          dataPath,
+          component => component.type === 'list'
+        )
 
       return getFiltersPanel(
         getNamedSchemas(filters),
         dataPath,
-        { // Create a simple proxy to get / set the query, see getFiltersPanel()
+        {
+          // Create a simple proxy to get / set the query, see getFiltersPanel()
           get query() {
             return getListComponent()?.query
           },
@@ -237,18 +217,17 @@ export default TypeComponent.register('list', {
     },
 
     hasListButtons() {
-      return !!(
-        this.buttonSchemas ||
-        this.creatable
-      )
+      return !!(this.buttonSchemas || this.creatable)
     },
 
     hasEditButtons() {
       const { listData } = this
-      return listData.length > 0 && (
-        this.editable ||
-        this.deletable ||
-        this.draggable
+      return (
+        listData.length > 0 && (
+          this.editable ||
+          this.deletable ||
+          this.draggable
+        )
       )
     },
 
@@ -306,19 +285,62 @@ export default TypeComponent.register('list', {
   },
 
   async processSchema(
-    api, schema, name, routes, level,
-    nested = false, flatten = false,
+    api,
+    schema,
+    name,
+    routes,
+    level,
+    nested = false,
+    flatten = false,
     process = null
   ) {
     await Promise.all([
       resolveSchemaComponent(schema),
       resolveSchemaComponents(schema.columns),
       SourceMixin.processSchema(
-        api, schema, name, routes, level,
-        nested, flatten,
+        api,
+        schema,
+        name,
+        routes,
+        level,
+        nested,
+        flatten,
         process
       )
     ])
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-list {
+  position: relative;
+
+  .dito-navigation {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: $content-padding-half;
+    @include user-select(none);
+
+    &:empty {
+      display: none;
+    }
+
+    .dito-scopes,
+    .dito-pagination {
+      display: flex;
+      flex: 0 1 auto;
+      min-width: 0;
+    }
+  }
+
+  &.dito-single {
+    // So that list buttons can be sticky to the bottom:
+    display: grid;
+    grid-template-rows: min-content;
+    height: 100%;
+  }
+}
+</style>

package/src/types/{TypeMarkup.vue → DitoTypeMarkup.vue}

@@ -1,7 +1,5 @@
 <template lang="pug">
-.dito-markup(
-  :id="dataPath"
-)
+.dito-markup(:id="dataPath")
   .dito-markup-toolbar(:editor="editor")
     .dito-buttons.dito-buttons-toolbar(
       v-if="groupedButtons.length > 0"
@@ -11,11 +9,12 @@
       )
         button.dito-button(
           v-for="{ name, icon, isActive, onClick } in buttons"
-          :class="{ 'dito-active': isActive }",
+          :key="name"
+          :class="{ 'dito-active': isActive }"
           @click="onClick"
         )
-          icon(:name="icon")
-  editor-content.dito-markup-editor(
+          Icon(:name="icon")
+  EditorContent.dito-markup-editor(
     ref="editor"
     :editor="editor"
     :style="styles"
@@ -26,98 +25,8 @@
   )
 </template>
 
-<style lang="sass">
-  @import '../styles/_imports'
-
-  .dito-markup
-    @extend %input
-    position: relative
-
-    .dito-resize
-      @extend %icon-resize
-      position: absolute
-      top: unset
-      left: unset
-      right: 0
-      bottom: 0
-      width: 1em
-      height: 1em
-
-    .ProseMirror
-      height: 100%
-      outline: none
-
-    .dito-markup-editor
-      overflow-y: scroll
-      // Move padding "inside" editor to correctly position scrollbar
-      margin-right: -$input-padding-hor
-      padding-right: $input-padding-hor
-
-    .dito-buttons-toolbar
-      margin: $input-padding-ver 0
-
-    h1,
-    h2,
-    h3,
-    p,
-    ul,
-    ol,
-    pre,
-    blockquote
-      margin: 1rem 0
-      &:first-child
-        margin-top: 0
-      &:last-child
-        margin-bottom: 0
-    h1,
-    h2,
-    h3
-      font-weight: bold
-    h1
-      font-size: 1.4rem
-    h2
-      font-size: 1.2rem
-    ul
-      list-style: disc
-    code
-      font-family: $font-family-mono
-    pre
-      padding: 0.7rem 1rem
-      border-radius: $border-radius
-      background: $color-darker
-      color: $color-white
-      overflow-x: auto
-      code
-        display: block
-    p code
-      display: inline-block
-      padding: 0 0.3rem
-      border-radius: $border-radius
-      background: $color-lighter
-    a
-      pointer-events: none
-      cursor: default
-      color: blue
-      text-decoration: underline
-    ul,
-    ol
-      padding-left: 2rem
-    li
-      & > p,
-      & > ol,
-      & > ul
-        margin: 0
-    blockquote
-      border-left: 3px solid $color-lighter
-      padding-left: 1rem
-      font-style: italic
-      p
-        margin: 0
-
-</style>
-
 <script>
-import TypeComponent from '../TypeComponent.js'
+import DitoTypeComponent from '../DitoTypeComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { Editor, EditorContent, Mark, getMarkAttributes } from '@tiptap/vue-3'
@@ -158,18 +67,22 @@ import { History } from '@tiptap/extension-history'
 
 import { Icon } from '@ditojs/ui/src'
 import {
-  isArray, isObject, underscore, hyphenate, debounce, camelize
+  isArray,
+  isObject,
+  underscore,
+  hyphenate,
+  debounce,
+  camelize
 } from '@ditojs/utils'
 
 // @vue/component
-export default TypeComponent.register('markup', {
+export default DitoTypeComponent.register('markup', {
+  mixins: [DomMixin],
   components: {
     EditorContent,
     Icon
   },
 
-  mixins: [DomMixin],
-
   data() {
     return {
       editor: null,
@@ -205,8 +118,8 @@ export default TypeComponent.register('markup', {
     basicNodeButtons() {
       return this.getButtons('nodes', {
         paragraph: {
-        // Do not show the paragraph command as active if any of the block
-        // commands are also active:
+          // Do not show the paragraph command as active if any of the block
+          // commands are also active:
           ignoreActive: () =>
             this.otherNodeButtons.some(button => button.isActive)
         },
@@ -286,9 +199,9 @@ export default TypeComponent.register('markup', {
         return isObject(enableRules)
           ? enableRules
           : {
-            input: !!enableRules,
-            paste: !!enableRules
-          }
+              input: !!enableRules,
+              paste: !!enableRules
+            }
       }
     })
   },
@@ -411,6 +324,7 @@ export default TypeComponent.register('markup', {
           // See if `href` can be parsed as a URL, and if not,
           // prefix it with a default protocol.
           try {
+            // eslint-disable-next-line no-new
             new URL(href)
           } catch {
             href = `https://${href}`
@@ -542,15 +456,21 @@ const Small = Mark.create({
 
   addCommands() {
     return {
-      setSmall: attributes => ({ commands }) => {
-        return commands.setMark(this.name, attributes)
-      },
-      toggleSmall: attributes => ({ commands }) => {
-        return commands.toggleMark(this.name, attributes)
-      },
-      unsetSmall: () => ({ commands }) => {
-        return commands.unsetMark(this.name)
-      }
+      setSmall:
+        attributes =>
+        ({ commands }) => {
+          return commands.setMark(this.name, attributes)
+        },
+      toggleSmall:
+        attributes =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name, attributes)
+        },
+      unsetSmall:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name)
+        }
     }
   }
 })
@@ -568,13 +488,15 @@ const LinkWithTitle = Link.extend({
     },
 
     parseHTML() {
-      return [{
-        tag: 'a',
-        getAttrs: element => ({
-          href: element.getAttribute('href'),
-          title: element.getAttribute('title')
-        })
-      }]
+      return [
+        {
+          tag: 'a',
+          getAttrs: element => ({
+            href: element.getAttribute('href'),
+            title: element.getAttribute('title')
+          })
+        }
+      ]
     },
 
     renderHTML(node) {
@@ -583,3 +505,131 @@ const LinkWithTitle = Link.extend({
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-markup {
+  @extend %input;
+
+  position: relative;
+
+  .dito-resize {
+    @extend %icon-resize;
+
+    position: absolute;
+    top: unset;
+    left: unset;
+    right: 0;
+    bottom: 0;
+    width: 1em;
+    height: 1em;
+  }
+
+  .ProseMirror {
+    height: 100%;
+    outline: none;
+  }
+
+  .dito-markup-editor {
+    overflow-y: scroll;
+    // Move padding "inside" editor to correctly position scrollbar
+    margin-right: -$input-padding-hor;
+    padding-right: $input-padding-hor;
+  }
+
+  .dito-buttons-toolbar {
+    margin: $input-padding-ver 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  p,
+  ul,
+  ol,
+  pre,
+  blockquote {
+    margin: 1rem 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  code {
+    font-family: $font-family-mono;
+  }
+
+  pre {
+    padding: 0.7rem 1rem;
+    border-radius: $border-radius;
+    background: $color-darker;
+    color: $color-white;
+    overflow-x: auto;
+
+    code {
+      display: block;
+    }
+  }
+
+  p code {
+    display: inline-block;
+    padding: 0 0.3rem;
+    border-radius: $border-radius;
+    background: $color-lighter;
+  }
+
+  a {
+    pointer-events: none;
+    cursor: default;
+    color: blue;
+    text-decoration: underline;
+  }
+
+  ul,
+  ol {
+    padding-left: 2rem;
+  }
+
+  li {
+    & > p,
+    & > ol,
+    & > ul {
+      margin: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid $color-lighter;
+    padding-left: 1rem;
+    font-style: italic;
+
+    p {
+      margin: 0;
+    }
+  }
+}
+</style>