github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Dashboard/editor/ViewTab.vue (about)

     1  <script setup lang="ts">
     2  import {computed, onMounted, onUnmounted, PropType, ref, watch} from "vue";
     3  import {Card, Core, eventBus, fontService, Tab} from "@/views/Dashboard/core";
     4  import Vuuri from "@/components/Vuuri"
     5  import ViewCard from "@/views/Dashboard/editor/ViewCard.vue";
     6  import {Frame} from "@/views/Dashboard/components";
     7  import {useAppStore} from "@/store/modules/app";
     8  import {DraggableContainer} from "@/components/DraggableContainer";
     9  
    10  const appStore = useAppStore()
    11  
    12  // ---------------------------------
    13  // common
    14  // ---------------------------------
    15  
    16  const grid = ref(null)
    17  const props = defineProps({
    18    core: {
    19      type: Object as PropType<Core>,
    20    },
    21    tab: {
    22      type: Object as PropType<Tab>,
    23      default: () => null
    24    },
    25  })
    26  
    27  const reloadKey = ref(0);
    28  const eventHandler = (event: string, tabId: number) => {
    29    if (props.tab?.id === tabId) {
    30      // console.log('update tab', tabId)
    31      reloadKey.value += 1
    32    }
    33  }
    34  
    35  const eventUpdateGridHandler = (event: string, tabId: number) => {
    36    if (props.tab?.id === tabId) {
    37      // console.log('update grid', tabId)
    38      grid.value.update();
    39    }
    40  }
    41  
    42  onMounted(() => {
    43    eventBus.subscribe('updateTab', eventHandler)
    44    eventBus.subscribe('updateGrid', eventUpdateGridHandler)
    45  })
    46  
    47  onUnmounted(() => {
    48    eventBus.unsubscribe('updateTab', eventHandler)
    49    eventBus.unsubscribe('updateGrid', eventUpdateGridHandler)
    50  })
    51  
    52  // ---------------------------------
    53  // component methods
    54  // ---------------------------------
    55  
    56  const getItemWidth = (card: Card): string => {
    57    // console.log('getItemWidth', activeTab.columnWidth)
    58    if (card.width > 0) {
    59      return `${card.width}px`
    60    }
    61    return `${props.tab?.columnWidth}px`
    62  }
    63  
    64  const getItemHeight = (card: Card): string => {
    65    // console.log('getItemHeight', card.height)
    66    return `${card.height}px`
    67  }
    68  
    69  const cards = computed<Card[]>(() => props.tab?.cards2)
    70  const modalCards = computed<Card[]>(() => props.tab?.modalCards)
    71  
    72  watch(
    73    () => props.tab.fonts,
    74    (val?: string[]) => {
    75      if (!val) return
    76      val.forEach(variableName => fontService.loadFont(variableName))
    77    },
    78    {
    79      immediate: true
    80    }
    81  )
    82  
    83  const getBackground = (card: Card) => {
    84    let background = 'inherit'
    85    if (card?.background) {
    86      background = card.background
    87    } else {
    88      if (card?.backgroundAdaptive) {
    89        background = appStore.isDark ? '#232324' : '#F5F7FA'
    90      }
    91    }
    92    return background
    93  }
    94  
    95  const getModalWidth = (card: Card): number => {
    96    if (card.width > 0) {
    97      return card.width
    98    }
    99    return props.tab?.columnWidth
   100  }
   101  
   102  const getModalHeight = (card: Card) => {
   103    return card.height
   104  }
   105  
   106  </script>
   107  
   108  <template>
   109    <Vuuri
   110      v-model="cards"
   111      item-key="id"
   112      :get-item-width="getItemWidth"
   113      :get-item-height="getItemHeight"
   114      :drag-enabled="false"
   115      ref="grid"
   116      :key="reloadKey"
   117    >
   118      <template #item="{item}">
   119        <Frame :frame="item.templateFrame" :background="getBackground(item)" v-if="item.template">
   120          <ViewCard :card="item" :key="item" :core="core"/>
   121        </Frame>
   122        <ViewCard v-else :card="item" :key="item" :core="core"/>
   123      </template>
   124    </Vuuri>
   125  
   126    <DraggableContainer
   127      v-for="(item, index) in modalCards"
   128      :key="index + item?.id || 0"
   129      :class-name="'dashboard-modal'"
   130      :name="'modal-card-items-' + item.id"
   131      :initial-width="getModalWidth(item)"
   132      :initial-height="getModalHeight(item) + (item?.modalHeader?24: 0)"
   133      :modal="true"
   134      :header="item?.modalHeader"
   135      :resizeable="false"
   136      v-show="!item.hidden"
   137    >
   138      <template #header>
   139        <span v-html="item.title"></span>
   140      </template>
   141      <template #default>
   142        <Frame :frame="item.templateFrame" :background="getBackground(item)" v-if="item.template">
   143          <ViewCard :card="item" :key="index" :core="core"/>
   144        </Frame>
   145        <ViewCard v-else :card="item" :key="index" :core="core"/>
   146      </template>
   147    </DraggableContainer>
   148  
   149  </template>
   150  
   151  <style lang="less">
   152  .gap {
   153    .muuri-item {
   154      padding: 5px;
   155  
   156      .muuri-item-content {
   157      //border: 1px solid #e9edf3;
   158      }
   159    }
   160  }
   161  
   162  .draggable-container.dashboard-modal {
   163    background: none;
   164    backdrop-filter: blur(10px);
   165  
   166    .draggable-container-content {
   167      padding: 0;
   168    }
   169  }
   170  </style>