@afeefa/vue-app 0.0.86 → 0.0.88

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.86
+0.0.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.86",
+  "version": "0.0.88",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/AAlert.vue

@@ -105,7 +105,7 @@ export default class AAlert extends Vue {
     font-size: 2rem;
   }
 
-  ::v-deep {
+  :deep() {
     .v-snack__wrapper {
       width: 500px;
       // margin-top: 1rem;

package/src/components/ABadge.vue

@@ -36,7 +36,7 @@ export default class ABadge extends Vue {
 
 
 <style scoped lang="scss">
-::v-deep .v-badge__badge {
+:deep(.v-badge__badge) {
   color: #666666;
 }
 </style>

package/src/components/AContextMenuItem.vue

@@ -55,7 +55,7 @@ export default class AContextMenuItem extends Vue {
     background-color: #EEEEEE;
   }
 
-  ::v-deep .v-icon {
+  :deep(.v-icon) {
     display: block;
     text-align: center;
     margin-right: 0.5rem;

package/src/components/ADatePicker.vue

@@ -146,7 +146,7 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin) {
 
 
 <style lang="scss" scoped>
-::v-deep .v-select__slot {
+:deep(.v-select__slot) {
   cursor: pointer;
   input {
     cursor: pointer;

package/src/components/ADialog.vue

@@ -233,7 +233,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, CancelOnEs
   padding: .8rem 1rem !important;
 }
 
-::v-deep .v-dialog {
+:deep(.v-dialog) {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/AModal.vue

@@ -23,6 +23,19 @@
 
     <v-card v-if="modal">
       <v-card-title v-if="title">
+        <v-avatar
+          v-if="icon"
+          color="#FFFFFF"
+          size="2rem"
+          class="ml-n1 mr-2"
+        >
+          <v-icon
+            :color="icon.color"
+            size="1.2rem"
+            v-text="icon.icon"
+          />
+        </v-avatar>
+
         {{ title }}
       </v-card-title>
 
@@ -43,7 +56,7 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
-  props: ['show', 'title', 'beforeClose', 'triggerClass', 'anchorPosition']
+  props: ['show', 'icon', 'title', 'beforeClose', 'triggerClass', 'anchorPosition']
 })
 export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentWidthMixin, CancelOnEscMixin) {
   modalId = randomCssClass(10)
@@ -189,7 +202,7 @@ export default class ADialog extends Mixins(UsesPositionServiceMixin, ComponentW
   color: inherit !important;
 }
 
-::v-deep .v-dialog {
+:deep(.v-dialog) {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/APagination.vue

@@ -33,7 +33,7 @@ export default class APagination extends Vue {
 
 
 <style scoped lang="scss">
-::v-deep .v-pagination {
+:deep(.v-pagination) {
   gap: .3rem;
   .v-pagination__item,
   .v-pagination__more,

package/src/components/ARadioGroup.vue

@@ -68,7 +68,7 @@ export default class ARadioGroup extends Vue {
   margin: 0;
 
   &:not(.hasLabel) {
-    ::v-deep legend {
+    :deep(legend) {
       display: none;
     }
   }

package/src/components/ARichTextArea.vue

@@ -200,10 +200,8 @@ export default class ARichTextArea extends Vue {
 
 <style lang="scss" scoped>
 .a-rich-text-editor {
-  ::v-deep .ProseMirror {
-    &-focused {
+  :deep(.ProseMirror-focused) {
       outline: none;
-    }
   }
 }
 
@@ -226,14 +224,14 @@ export default class ARichTextArea extends Vue {
   box-shadow: none;
   border-radius: 0;
 
-  ::v-deep .v-icon {
+  :deep(.v-icon) {
     font-size: 20px;
     width: 20px;
     height: 20px;
   }
 
   &.strike {
-    ::v-deep .v-icon {
+    :deep(.v-icon) {
       width: 15px;
     }
   }
@@ -251,7 +249,7 @@ export default class ARichTextArea extends Vue {
   }
 }
 
-::v-deep .ProseMirror {
+:deep(.ProseMirror) {
   min-height: 200px;
 
   > :last-child {

package/src/components/ASearchSelect.vue

@@ -5,7 +5,10 @@
       style="width: max-content;"
       @click="open"
     >
-      <slot name="activator">
+      <slot
+        v-if="!autoOpen"
+        name="activator"
+      >
         <a-icon class="contextButton">
           $dotsHorizontalIcon
         </a-icon>
@@ -99,9 +102,10 @@ import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
     'listAction',
     'q',
     'width',
-    'closeOnSelect',
     'loadOnlyIfKeyword',
     {
+      autoOpen: false,
+      closeOnSelect: true,
       selectedItems: []
     }
   ],
@@ -120,6 +124,12 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
   filters = []
   count = 0
 
+  mounted () {
+    if (this.autoOpen) {
+      this.open()
+    }
+  }
+
   destroyed () {
     this.close()
   }
@@ -167,10 +177,6 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
     return this.loadOnlyIfKeyword === undefined || this.loadOnlyIfKeyword
   }
 
-  get _closeOnSelect () {
-    return this.closeOnSelect === undefined || this.closeOnSelect
-  }
-
   positionize () {
     const position = new PositionConfig()
       .setAnchor(this, '.activator')
@@ -249,7 +255,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
 
   selectHandler (model) {
     return event => {
-      if (this._closeOnSelect) {
+      if (this.closeOnSelect) {
         this.close()
       }
       this.$emit('select', model, {
@@ -319,7 +325,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
   display: block;
   padding: 0 .5rem;
 
-  ::v-deep .a-row {
+  :deep(.a-row) {
     overflow: unset;
   }
 }
@@ -334,7 +340,7 @@ export default class ASearchSelect extends Mixins(ComponentWidthMixin, UsesPosit
   overflow-x: hidden;
   overscroll-behavior: contain;
 
-  ::v-deep .a-table-row {
+  :deep(.a-table-row) {
     &:not(.selected) {
       cursor: pointer;
     }

package/src/components/ATable.vue

@@ -48,7 +48,7 @@ export default class ATable extends Vue {
   > * {
     display: table-row;
 
-    > ::v-deep * {
+    > :deep(*) {
       display: table-cell;
 
       white-space: nowrap;

package/src/components/ATextArea.vue

@@ -38,7 +38,7 @@ export default class ATextArea extends Vue {
 
 
 <style lang="scss" scoped>
-.v-input:not(.v-input--is-focused) ::v-deep .v-counter {
+.v-input:not(.v-input--is-focused) :deep(.v-counter) {
   display: none;
 }
 </style>

package/src/components/ATextField.vue

@@ -100,7 +100,7 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
 
 
 <style lang="scss" scoped>
-.v-input:not(.v-input--is-focused) ::v-deep .v-counter {
+.v-input:not(.v-input--is-focused) :deep(.v-counter) {
   display: none;
 }
 </style>

package/src/components/form/EditModal.vue

@@ -1,6 +1,5 @@
 <template>
   <a-modal
-    :title="title"
     :beforeClose="beforeClose"
     :show.sync="show_"
     v-bind="$attrs"
@@ -61,7 +60,7 @@ import { Component, Vue, Watch } from '@a-vue'
 import { DialogEvent } from '@a-vue/events'
 
 @Component({
-  props: ['model', 'createModelToEdit', 'title', 'show']
+  props: ['model', 'createModelToEdit', 'show']
 })
 export default class EditModal extends Vue {
   show_ = false

package/src/components/list/ListFilterRow.vue

@@ -20,7 +20,7 @@ export default class ListFilterRow extends Vue {
 
 
 <style scoped lang="scss">
-::v-deep .v-text-field__details {
+:deep(.v-text-field__details) {
   display: none;
 }
 </style>

package/src-admin/components/SidebarMenu.vue

@@ -47,7 +47,7 @@ export default class SidebarMenu extends Vue {
 
 
 <style lang="scss" scoped>
-::v-deep .v-list-group {
+:deep(.v-list-group) {
   > .v-list-item {
     padding: 0;
     > .v-list-item {

package/src-admin/components/controls/SearchSelectFormField.vue

@@ -206,19 +206,19 @@ export default class SearchSelectFormField extends Vue {
 
 
 <style scoped lang="scss">
-.selectedIcon::v-deep {
+.selectedIcon:deep() {
   padding-right: .3rem !important;
 }
 
-.selectableIcon::v-deep {
+.selectableIcon:deep() {
   padding-right: 2rem !important;
 }
 
-.selectedContent::v-deep {
+.selectedContent:deep() {
   width: 100%;
 }
 
-.selectableContent::v-deep {
+.selectableContent:deep() {
   width: 100%;
 }
 </style>

package/src-admin/components/detail/DetailProperty.vue

@@ -15,10 +15,9 @@
       </v-avatar>
 
       <label :class="['label', {'label--withIcon': !!_icon}]">{{ label }}</label>
+
       <div class="pl-2">
-        <slot
-          name="actionButton"
-        />
+        <slot name="actionButton" />
       </div>
     </div>
 

package/src-admin/components/list/ListColumnHeader.vue

@@ -109,7 +109,7 @@ export default class ListColumnHeader extends Vue {
   }
 }
 
-::v-deep .v-icon {
+:deep(.v-icon) {
   color: #AAAAAA !important;
 
   &.active {