@ditojs/admin 1.19.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -13,7 +13,9 @@
       "import": "./dist/dito-admin.es.js",
       "require": "./dist/dito-admin.umd.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./src": "./src/index.js",
+    "./imports.sass": "./src/styles/_imports.sass"
   },
   "files": [
     "src/",
@@ -37,8 +39,9 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^1.19.0",
-    "@ditojs/utils": "^1.19.0",
+    "@ditojs/build": "^1.20.0",
+    "@ditojs/ui": "^1.20.0",
+    "@ditojs/utils": "^1.20.0",
     "codeflask": "^1.4.1",
     "filesize": "^10.0.5",
     "filesize-parser": "^1.5.0",
@@ -69,5 +72,5 @@
     "vite-plugin-vue2": "^2.0.2"
   },
   "types": "types",
-  "gitHead": "b6260469c956b99774657045f192fd429c6521d1"
+  "gitHead": "049aa3611927f3f096bc6230f0ce93e1419303e4"
 }

package/src/DitoAdmin.js

@@ -22,6 +22,10 @@ Vue.use(VueRouter)
 Vue.use(VueModal, { dynamic: true })
 Vue.use(VueNotifications)
 
+// Workaround for a strange Vite hot-reloading bug, see:
+// https://github.com/vitejs/vite/issues/7839#issuecomment-1340109679
+import.meta.hot?.on('vite:beforeUpdate', onBeforeViteUpdate)
+
 export default class DitoAdmin {
   constructor(el, {
     // `dito` contains the base and api settings passed from `AdminController`
@@ -274,3 +278,19 @@ function formatQuery(query) {
     )
   ).toString()
 }
+
+function onBeforeViteUpdate(event) {
+  if (event.type === 'update') {
+    // Patch `event.updates` to remove the version query parameter from path,
+    // so that the update gets picked up.
+    // Why the stored `deps` are missing this part of the URL, I cannot say…
+    const updates = []
+    for (const update of event.updates) {
+      updates.push(update, {
+        ...update,
+        acceptedPath: update.acceptedPath.replace(/\?v=[0-9a-f]+&/, '?')
+      })
+    }
+    event.updates = updates
+  }
+}

package/src/components/DitoAccount.vue

@@ -17,6 +17,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-account
     position: relative
     .dito-pulldown

package/src/components/DitoContainer.vue

@@ -29,6 +29,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-container
     // Needed for better vertical alignment:
     align-self: stretch

package/src/components/DitoDialog.vue

@@ -18,7 +18,7 @@
 
 <script>
 import { clone } from '@ditojs/utils'
-import { addEvents } from '@ditojs/ui'
+import { addEvents } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 import { getButtonSchemas } from '../utils/schema.js'
 

package/src/components/DitoErrors.vue

@@ -8,6 +8,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-errors
     position: absolute
     z-index: 1

package/src/components/DitoHeader.vue

@@ -16,6 +16,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-header
     background: $color-black
     font-size: $menu-font-size

package/src/components/DitoLabel.vue

@@ -26,6 +26,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-label
     --label-padding: 0
     // For buttons and chevron to align right:

package/src/components/DitoMenu.vue

@@ -11,6 +11,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-menu
     flex: initial
     font-size: $menu-font-size

package/src/components/DitoPagination.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { Pagination } from '@ditojs/ui'
+import { Pagination } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 
 // @vue/component

package/src/components/DitoPane.vue

@@ -34,6 +34,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-pane
     display: flex
     position: relative

package/src/components/DitoPanel.vue

@@ -27,6 +27,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-panel
     margin-bottom: $content-padding
     .dito-panel-title

package/src/components/DitoPanels.vue

@@ -17,6 +17,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-panels
     max-width: $content-sidebar-width
     min-width: calc($content-sidebar-width / 2)

package/src/components/DitoRoot.vue

@@ -23,7 +23,7 @@
 </template>
 
 <style lang="sass">
-  @import '../styles/style.sass'
+  @import '../styles/style'
 
   .dito-root
     height: 100%

package/src/components/DitoSchema.vue

@@ -80,6 +80,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-schema
     box-sizing: border-box
     // To display schema next to panels:
@@ -153,7 +155,7 @@ import {
   isObject, isArray, isFunction, isRegExp,
   parseDataPath, normalizeDataPath, labelize
 } from '@ditojs/utils'
-import { TransitionHeight } from '@ditojs/ui'
+import { TransitionHeight } from '@ditojs/ui/src'
 import DitoComponent from '../DitoComponent.js'
 import ItemMixin from '../mixins/ItemMixin.js'
 import { appendDataPath, getParentItem } from '../utils/data.js'

package/src/components/DitoSchemaInlined.vue

@@ -31,6 +31,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-schema-inlined
     > .dito-schema-content
       padding: 0

package/src/components/DitoScopes.vue

@@ -15,6 +15,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-scopes
     white-space: nowrap
     display: flex

package/src/components/DitoTableHead.vue

@@ -27,6 +27,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-table-head
     +user-select(none)
     tr

package/src/components/DitoTabs.vue

@@ -11,6 +11,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   $tab-color-background: $color-lightest
   $tab-color-inactive: $color-light
   $tab-color-active: $color-lightest

package/src/components/DitoTreeItem.vue

@@ -86,6 +86,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-tree-item
     --chevron-indent: #{$chevron-indent}
     > .dito-tree-header

package/src/mixins/DomMixin.js

@@ -1,5 +1,5 @@
 import { isObject } from '@ditojs/utils'
-import { addEvents } from '@ditojs/ui'
+import { addEvents } from '@ditojs/ui/src'
 
 // @vue/component
 export default {

package/src/styles/style.sass

@@ -1,4 +1,4 @@
-@import '_vendors'
+@import '_imports'
 // No need to import `_imports.sass` again, since it's handled by sass-loader.
 @import '_base'
 @import '_button'

package/src/types/TypeCheckbox.vue

@@ -10,6 +10,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-checkbox
     @extend %input-borderless
 </style>

package/src/types/TypeCheckboxes.vue

@@ -17,6 +17,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-checkboxes
     label
       @extend %input-borderless

package/src/types/TypeCode.vue

@@ -7,6 +7,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-code
     @extend %input
     position: relative

package/src/types/TypeColor.vue

@@ -35,6 +35,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   $color-swatch-width: $pattern-transparency-size
   $color-swatch-radius: $border-radius - $border-width
   .dito-color
@@ -71,7 +73,7 @@
 import tinycolor from 'tinycolor2'
 import { Sketch as SketchPicker } from 'vue-color'
 import TypeComponent from '../TypeComponent.js'
-import { Trigger } from '@ditojs/ui'
+import { Trigger } from '@ditojs/ui/src'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component

package/src/types/TypeDate.vue

@@ -15,7 +15,7 @@
 <script>
 import TypeComponent from '../TypeComponent.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { DatePicker, TimePicker, DateTimePicker } from '@ditojs/ui'
+import { DatePicker, TimePicker, DateTimePicker } from '@ditojs/ui/src'
 import { isDate } from '@ditojs/utils'
 
 export default TypeComponent.register([

package/src/types/TypeList.vue

@@ -6,7 +6,7 @@
     :style="schema.style"
   )
     .dito-navigation(
-      v-if="scopes || paginate"
+      v-if="scopes || hasPagination"
     )
       dito-scopes(
         v-if="scopes"
@@ -16,10 +16,10 @@
       // When there's only pagination without scopes, we need a good ol' spacer
       // div, for the layout not to break...
       .dito-spacer(
-        v-else-if="paginate"
+        v-else-if="hasPagination"
       )
       dito-pagination(
-        v-if="paginate"
+        v-if="hasPagination"
         :query="query"
         :limit="paginate"
         :total="total || 0"
@@ -147,6 +147,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-list
     position: relative
     .dito-navigation
@@ -226,6 +228,10 @@ export default TypeComponent.register('list', {
   },
 
   computed: {
+    hasPagination() {
+      return this.paginate && this.total > this.paginate
+    },
+
     hasListButtons() {
       return !!(
         this.buttonSchemas ||

package/src/types/TypeMarkup.vue

@@ -27,6 +27,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-markup
     @extend %input
     position: relative
@@ -133,7 +135,7 @@ import {
   // Tools:
   History
 } from 'tiptap-extensions'
-import { Icon } from '@ditojs/ui'
+import { Icon } from '@ditojs/ui/src'
 import {
   isArray, isObject, underscore, hyphenate, debounce
 } from '@ditojs/utils'

package/src/types/TypeMultiselect.vue

@@ -39,6 +39,7 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
   @import 'vue-multiselect/dist/vue-multiselect.min.css'
 
   $spinner-width: $select-arrow-width
@@ -227,7 +228,6 @@ import DitoContext from '../DitoContext.js'
 import OptionsMixin from '../mixins/OptionsMixin.js'
 import VueMultiselect from 'vue-multiselect'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import 'vue-multiselect/dist/vue-multiselect.min.css'
 
 // @vue/component
 export default TypeComponent.register('multiselect', {

package/src/types/TypeNumber.vue

@@ -24,7 +24,7 @@
 <script>
 import TypeComponent from '../TypeComponent.js'
 import NumberMixin from '../mixins/NumberMixin.js'
-import { InputField } from '@ditojs/ui'
+import { InputField } from '@ditojs/ui/src'
 
 export default TypeComponent.register([
   'number', 'integer'

package/src/types/TypeObject.vue

@@ -53,6 +53,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-object
     display: flex
     border: $border-style

package/src/types/TypeRadio.vue

@@ -17,6 +17,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-radio-buttons
     label
       @extend %input-borderless

package/src/types/TypeSection.vue

@@ -13,6 +13,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-section
     &.dito-section-labelled
       border: $border-style

package/src/types/TypeSelect.vue

@@ -42,6 +42,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   // TODO: Move to dito-ui
   $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2)
 

package/src/types/TypeSlider.vue

@@ -24,6 +24,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-slider
     @extend %input
     display: flex
@@ -41,7 +43,7 @@
 import TypeComponent from '../TypeComponent.js'
 import NumberMixin from '../mixins/NumberMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { InputField } from '@ditojs/ui'
+import { InputField } from '@ditojs/ui/src'
 
 // @vue/component
 export default TypeComponent.register('slider', {

package/src/types/TypeSwitch.vue

@@ -11,6 +11,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-switch
     .dito-switch-label
       font-size: $font-size-small
@@ -18,7 +20,7 @@
 
 <script>
 import TypeComponent from '../TypeComponent.js'
-import { SwitchButton } from '@ditojs/ui'
+import { SwitchButton } from '@ditojs/ui/src'
 
 // @vue/component
 export default TypeComponent.register('switch', {

package/src/types/TypeText.vue

@@ -11,7 +11,7 @@
 
 <script>
 import TypeComponent from '../TypeComponent.js'
-import { InputField } from '@ditojs/ui'
+import { InputField } from '@ditojs/ui/src'
 
 const maskedPassword = '****************'
 

package/src/types/TypeTextarea.vue

@@ -11,6 +11,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-textarea
     display: block
     resize: none

package/src/types/TypeTreeList.vue

@@ -21,6 +21,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-tree-list
     @extend %field
     .dito-tree-panel

package/src/types/TypeUpload.vue

@@ -86,6 +86,8 @@
 </template>
 
 <style lang="sass">
+  @import '../styles/_imports'
+
   .dito-upload
     .dito-table
       tr

package/src/styles/_vendors.sass

@@ -1 +0,0 @@
-@import '@ditojs/ui/style.css'