sample-component.vue

<template lang="pug">
  div.c-container
    template(v-if="i_subcomponents.form.include")
      f-create-one-form(:type="type" v-bind="i_subcomponents.form.options")
    component(:is="listComponent")
      template(v-for="x in records")
        v-hover(:key="x.id")
          v-list-tile(slot-scope="{ hover }"
          :to="getRoute ? getRoute(x) : null"
          :class="hover ? 'active f-bg-secondary-500' : ''"
          active-class="active f-bg-secondary-500 f-rounded")
            v-list-tile-content.f-truncate
              .f-truncate
                | {{ getLabel(x) }}
            template(v-if="hasActions")
              v-list-tile-action
                .f-flex
                  template(v-for="({ component, handler }) in actions")
                    component(:is="component" @click="handler(x, self)")
                  template(v-if="i_subcomponents.cloneButton.include")
                    f-clone-button.vl-mr-1(@click="cloneRecord(x)")
                  template(v-if="i_subcomponents.deleteButton.include")
                    f-delete-button(@click="deleteRecord(x)")
</template>

<style scoped>
.c-container {
  @apply f-bg-blue-500;
}

/* TODO padding literals are temporary until I can figure out how to get @apply to work */
.c-container >>> .v-list__tile {
  padding: 0px;
}

.c-container >>> .active .v-list__tile__content {
  padding-left: 12px;
}

.c-container >>> .hover .v-list__tile__content {
  padding-left: 12px;
}
</style>

<script>
import Subcomponents from '../../mixins/subcomponents'
import { VList } from 'vuetify/lib'
import FCompactList from '../widgets/f-compact-list'

export default {
  mixins: [
    Subcomponents
  ],
  props: {
    records: { type: Array, required: true },
    type: { type: Object, required: true },
    getRoute: { type: Function, default: null },
    getLabel: { type: Function, required: true },
    actions: { type: Array, default: () => [] },
    compact: { type: Boolean, default: true }
  },
  data: function() {
    return {
      defaultSubcomponents: {
        form: {
          include: true,
          options: {
            border: false
          }
        },
        cloneButton: {
          include: true
        },
        deleteButton: {
          include: true
        }
      }
    }
  },
  computed: {
    self() { return this },
    listComponent() {
      return this.compact ? FCompactList : VList
    },
    hasActions() {
      return this.actions.length > 0 ||
        this.i_subcomponents.cloneButton.include ||
        this.i_subcomponents.deleteButton.include
    }
  },
  methods: {
    cloneRecord(record) {
      this.$emit('cloneRecord', this.$schema.getRef(record))
    },
    deleteRecord(record) {
      this.$emit('deleteRecord', this.$schema.getRef(record))
    },
  },
}
</script>