@afeefa/vue-app 0.0.327 → 0.0.329

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

@@ -1 +1 @@
-0.0.327
+0.0.329

package/package.json

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

package/src/components/ABreadcrumbs.vue

@@ -39,6 +39,7 @@
 
 <script>
 import { Component, Vue, Watch } from '@a-vue'
+import { adminConfig } from '@a-admin/config/AdminConfig'
 import { SaveEvent } from './save-indicator/SaveEvent'
 import { routeConfigPlugin } from '@a-vue/plugins/route-config/RouteConfigPlugin'
 
@@ -124,6 +125,17 @@ export default class ABreadcrumbs extends Vue {
     this.breadcrumbs = breadcrumbs
     this.wrapBreadcrumbs_ = false
 
+    const titles = breadcrumbs
+      .filter(b => b.title && b.title !== '...')
+      .map(b => b.title)
+    const appTitle = adminConfig.app.title
+    if (titles.length) {
+      const pageTitle = titles.reverse().join(' – ')
+      document.title = appTitle ? `${pageTitle} | ${appTitle}` : pageTitle
+    } else if (appTitle) {
+      document.title = appTitle
+    }
+
     this.scrollBreadcrumbs()
   }
 

package/src/components/ATable2.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="['a-table2', {border: hasBorder}]" :style="gridStyle">
+    <slot />
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: [{border: false}, 'columns'],
+  provide () {
+    return {
+      table2Border: this.hasBorder
+    }
+  }
+})
+export default class ATable2 extends Vue {
+  get hasBorder () {
+    return this.border !== false && this.border !== undefined
+  }
+
+  get gridStyle () {
+    const columns = this.columns || []
+    return {
+      'grid-template-columns': columns.join(' ')
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.a-table2 {
+  display: grid;
+  width: 100%;
+}
+</style>

package/src/components/ATable2Header.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :class="['a-table2-header', {small: hasSmall, border: table2Border}]">
+    <slot />
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: ['small'],
+  inject: {
+    table2Border: { default: false }
+  }
+})
+export default class ATable2Header extends Vue {
+  get hasSmall () {
+    return this.small !== undefined && this.small !== false
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.a-table2-header {
+  display: contents;
+
+  > :deep(*) {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #999999;
+    font-size: .9rem;
+    padding: .4rem 1.5rem .4rem 0;
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  &.border > :deep(*) {
+    border-bottom: 1px solid #EEEEEE;
+    padding-left: .5rem;
+    padding-bottom: .6rem;
+
+    &:last-child {
+      padding-right: .2rem;
+    }
+  }
+
+  &.small > :deep(*) {
+    font-size: .85rem;
+  }
+
+  &.small.border > :deep(*) {
+    padding-bottom: .2rem;
+  }
+}
+</style>

package/src/components/ATable2Row.vue

@@ -0,0 +1,112 @@
+<template>
+  <div
+    :class="['a-table2-row', {border: table2Border, small: hasSmall, tiny: hasTiny, selected, disabled}]"
+    @click="$emit('click')"
+  >
+    <slot />
+  </div>
+</template>
+
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: [{tiny: false, small: false}, 'selected', 'disabled'],
+  inject: {
+    table2Border: { default: false }
+  }
+})
+export default class ATable2Row extends Vue {
+  get hasSmall () {
+    return this.small !== undefined && this.small !== false
+  }
+
+  get hasTiny () {
+    return this.tiny !== undefined && this.tiny !== false
+  }
+
+  mounted () {
+    this.applyColspan()
+  }
+
+  updated () {
+    this.applyColspan()
+  }
+
+  applyColspan () {
+    if (!this.$el || !this.$el.children) return
+    for (const child of this.$el.children) {
+      const colspan = child.dataset.colspan
+      if (colspan) {
+        child.style.gridColumn = `span ${colspan}`
+      }
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.a-table2-row {
+  display: contents;
+
+  > :deep(*) {
+    padding: .15rem 1.5rem .15rem 0;
+    vertical-align: top;
+
+    &:last-child {
+      padding-right: .1rem;
+    }
+  }
+
+  &.border > :deep(*) {
+    border-bottom: 1px solid #E5E5E5;
+    padding: .4rem 1.5rem .4rem .4rem;
+
+    &:last-child {
+      padding-right: .4rem;
+    }
+  }
+
+  &:hover > :deep(*) {
+    background: #F4F4F4;
+  }
+
+  &.selected > :deep(*) {
+    background: #F4F4F4;
+  }
+
+  &.disabled {
+    pointer-events: none;
+    opacity: .5;
+  }
+
+  // Small mode
+  &.small > :deep(*) {
+    font-size: .9rem;
+  }
+
+  &.small.border > :deep(*) {
+    padding-top: .2rem;
+    padding-bottom: .2rem;
+  }
+
+  // Tiny mode
+  &.tiny > :deep(*) {
+    font-size: .8rem;
+  }
+
+  &.tiny.border > :deep(*) {
+    padding-top: .1rem;
+    padding-bottom: .1rem;
+  }
+
+  // Text truncation utility
+  :deep(.a-table-cell-truncate) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>