@ditojs/admin 0.271.0 → 0.274.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "0.271.0",
+  "version": "0.274.0",
   "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",
   "main": "dist/dito-admin.umd.min.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -33,15 +33,15 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
-    "@ditojs/ui": "^0.271.0",
-    "@ditojs/utils": "^0.271.0",
-    "axios": "^0.22.0",
+    "@babel/runtime": "^7.17.2",
+    "@ditojs/ui": "^0.274.0",
+    "@ditojs/utils": "^0.274.0",
+    "axios": "^0.26.0",
     "codeflask": "^1.4.1",
-    "core-js": "^3.18.1",
-    "filesize": "^8.0.3",
+    "core-js": "^3.21.1",
+    "filesize": "^8.0.7",
     "filesize-parser": "^1.5.0",
-    "nanoid": "^3.1.28",
+    "nanoid": "^3.3.1",
     "postcss-inset": "^1.0.0",
     "tinycolor2": "^1.4.2",
     "tiptap": "^1.32.2",
@@ -53,29 +53,28 @@
     "vue-js-modal": "^1.3.35",
     "vue-multiselect": "^2.1.6",
     "vue-notification": "^1.3.20",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.3",
     "vue-spinner": "^1.0.4",
     "vue-template-compiler": "^2.6.14",
     "vue-upload-component": "^2.8.22",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@ditojs/babel-preset": "^0.271.0",
-    "@ditojs/build": "^0.271.0",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "autoprefixer": "^9.8.7",
-    "babel-loader": "^8.2.2",
-    "fibers": "^5.0.0",
-    "postcss": "^8.3.8",
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@ditojs/babel-preset": "^0.274.0",
+    "@ditojs/build": "^0.274.0",
+    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-service": "^4.5.15",
+    "autoprefixer": "^9.8.8",
+    "babel-loader": "^8.2.3",
+    "postcss": "^8.4.8",
     "postcss-loader": "^4.3.0",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
-    "sass": "1.32.13",
-    "sass-loader": "^10.2.0",
+    "sass": "1.49.9",
+    "sass-loader": "^10.2.1",
     "webpack": "^4.46.0"
   },
-  "gitHead": "23245bf234f83049097413475a32d5bd27c5a603"
+  "gitHead": "0ebfe0bb8913f9d338bb91a0a507e7a4c6e49ecb"
 }

package/src/components/DitoPanels.vue

@@ -19,7 +19,7 @@
 <style lang="sass">
   .dito-panels
     max-width: $content-sidebar-width
-    min-width: $content-sidebar-width / 2
+    min-width: calc($content-sidebar-width / 2)
 </style>
 
 <script>

package/src/components/DitoRoot.vue

@@ -158,6 +158,10 @@ export default DitoComponent.component('dito-root', {
 
     async login() {
       this.allowLogin = true
+      const {
+        additionalComponents,
+        redirectAfterLogin
+      } = this.options.login || {}
       const loginData = await this.showDialog({
         components: {
           username: {
@@ -166,7 +170,8 @@ export default DitoComponent.component('dito-root', {
           },
           password: {
             type: 'password'
-          }
+          },
+          ...additionalComponents
         },
         buttons: {
           cancel: {},
@@ -180,8 +185,12 @@ export default DitoComponent.component('dito-root', {
             data: loginData,
             internal: true
           })
-          this.setUser(response.data.user)
-          await this.resolveViews()
+          if (redirectAfterLogin) {
+            location.replace(redirectAfterLogin)
+          } else {
+            this.setUser(response.data.user)
+            await this.resolveViews()
+          }
         } catch (err) {
           const error = err.response?.data?.error
           this.notify({

package/src/components/DitoTableHead.vue

@@ -3,6 +3,7 @@
     tr
       th(
         v-for="(column, index) in columns"
+        v-if="shouldRender(column)"
         :class="getColumnClass(column)"
       )
         router-link(

package/src/styles/_button.sass

@@ -4,7 +4,7 @@
     display: inline-block
     width: round($button-order-arrow-size * $math-sqrt2)
     padding-left: $form-spacing
-    $arrow-offset: $button-order-arrow-size / 2 + $border-width
+    $arrow-offset: calc($button-order-arrow-size / 2 + $border-width)
     &::before
       +arrow($button-order-arrow-size, 'up')
       bottom: $arrow-offset

package/src/styles/_settings.sass

@@ -13,7 +13,7 @@ $font-size-small: 11px
 // 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($input-height-factor - 2 * ($border-width + $input-padding-ver) / $font-size, 5)
+$line-height: rounded(calc($input-height-factor - 2 * ($border-width + $input-padding-ver) / $font-size), 5)
 
 // Button
 $button-order-arrow-size: 4px
@@ -28,12 +28,12 @@ $pulldown-padding: $pulldown-padding-ver $pulldown-padding-hor
 $content-width: 900px
 $content-sidebar-width: 360px
 $content-padding: 16px
-$content-padding-half: $content-padding / 2
+$content-padding-half: calc($content-padding / 2)
 $content-color-background: $color-lightest
 
 // Form
 $form-spacing: $input-padding-hor
-$form-spacing-half: $form-spacing / 2
+$form-spacing-half: calc($form-spacing / 2)
 
 // Menu
 $menu-font-size: 14px
@@ -47,7 +47,7 @@ $menu-height: $menu-font-size + 2 * $menu-padding-ver
 // Tabs
 $tab-margin: 6px
 $tab-padding-hor: 12px
-$tab-padding-ver: ($menu-padding-ver * 2 - $tab-margin) / 2
+$tab-padding-ver: calc(($menu-padding-ver * 2 - $tab-margin) / 2)
 $tab-radius: 4px // $border-radius
 
 // Patterns

package/src/types/TypeColor.vue

@@ -103,6 +103,7 @@ export default TypeComponent.register('color', {
         } else {
           this.value = tinycolor(value).toString(format)
         }
+        this.onChange()
       }
     },
 

package/src/types/TypeList.vue

@@ -51,6 +51,7 @@
           template(v-if="columns")
             dito-table-cell(
               v-for="column in columns"
+              v-if="shouldRender(column)"
               :key="column.name"
               :class="getCellClass(column)"
               :cell="column"

package/src/types/TypeMultiselect.vue

@@ -113,11 +113,11 @@
 
     .multiselect__select
       width: 0
-      margin-right: $select-arrow-width / 2
+      margin-right: calc($select-arrow-width / 2)
       &::before
         +arrow($select-arrow-size)
         bottom: $select-arrow-bottom
-        right: -$select-arrow-size / 2
+        right: calc(-1 * $select-arrow-size / 2)
 
     .multiselect__spinner
       width: $spinner-width

package/src/types/TypeSelect.vue

@@ -43,7 +43,7 @@
 
 <style lang="sass">
   // TODO: Move to dito-ui
-  $select-arrow-right: ($select-arrow-width - $select-arrow-size) / 2
+  $select-arrow-right: calc(($select-arrow-width - $select-arrow-size) / 2)
 
   .dito-select
     display: inline-block