All files / src/components CalendarDayPopoverRow.vue

0% Statements 0/24
0% Branches 0/18
0% Functions 0/5
0% Lines 0/18
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103                                                                                                                                                                                                             
<template>
<!-- Content row -->
<div
  :class='["c-day-popover-row", { "selectable": isSelectable }]'
  @click='$emit("select")'>
  <!-- Indicator -->
  <div
    v-if='!hideIndicator && indicatorStyle'
    class='c-day-popover-indicator'>
    <span :style='indicatorStyle'></span>
  </div>
  <!-- Content -->
  <div class='c-day-popover-content'>
    <slot>
      This is the default content slot.
    </slot>
  </div>
</div>
</template>
 
<script>
export default {
  props: {
    attribute: Object,
    hideIndicator: Boolean,
  },
  computed: {
    isSelectable() {
      return this.$listeners.select;
    },
    indicatorStyle() {
      const attr = this.attribute;
      if (attr.highlight) {
        return {
          backgroundColor: attr.highlight.backgroundColor,
          width: '10px',
          height: '5px',
          borderRadius: '3px',
          opacity: attr.highlight.opacity,
        };
      }
      if (attr.dot) {
        return {
          backgroundColor: attr.dot.backgroundColor,
          width: '5px',
          height: '5px',
          borderRadius: '50%',
          opacity: attr.dot.opacity,
        };
      }
      if (attr.bar) {
        return {
          backgroundColor: attr.bar.backgroundColor,
          width: '10px',
          height: '3px',
          opacity: attr.bar.opacity,
        };
      }
      if (attr.contentStyle) {
        return {
          backgroundColor: attr.contentStyle.color,
          width: '5px',
          height: '5px',
        };
      }
      return null;
    },
  },
};
</script>
 
<style lang='sass' scoped>
 
@import '../styles/mixins.sass'
 
.c-day-popover-row
  display: flex
  align-items: center
  padding: 2px 5px
  transition: all $day-content-transition-time
  &.selectable
    cursor: pointer
    &:hover
      background-color: rgba(0, 0, 0, 0.1)
  &:not(:first-child)
    margin-top: 3px
  .c-day-popover-indicator
    display: flex
    justify-content: center
    align-items: center
    flex-grow: 0
    width: 15px
    margin-right: 3px
    span
      transition: all $day-content-transition-time
  .c-day-popover-content
    display: flex
    align-items: center
    flex-wrap: none
    flex-grow: 1
    transition: all $day-content-transition-time
</style>