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

     1  <script setup lang="ts">
     2  import {onMounted, PropType, ref,} from "vue";
     3  import {Card, CardItem, Core} from "@/views/Dashboard/core";
     4  import {CardItemName} from "@/views/Dashboard/card_items";
     5  import {UUID} from "uuid-generator-ts";
     6  import {KeystrokeCaptureViewer} from "@/views/Dashboard/components";
     7  import {useAppStore} from "@/store/modules/app";
     8  
     9  const appStore = useAppStore()
    10  
    11  const currentID = ref('')
    12  onMounted(() => {
    13    const uuid = new UUID()
    14    currentID.value = uuid.getDashFreeUUID()
    15  })
    16  
    17  // ---------------------------------
    18  // common
    19  // ---------------------------------
    20  
    21  const zoom = ref(1);
    22  
    23  const props = defineProps({
    24    core: {
    25      type: Object as PropType<Core>,
    26    },
    27    card: {
    28      type: Object as PropType<Nullable<Card>>,
    29      default: () => null
    30    },
    31  })
    32  
    33  const hover = ref(false)
    34  
    35  // ---------------------------------
    36  // component methods
    37  // ---------------------------------
    38  const getCardItemName = (item: CardItem): string => {
    39    //todo: check if item disabled
    40    return CardItemName(item.type);
    41  }
    42  
    43  const getCardStyle = () => {
    44    const style = {
    45      transform: `scale(${zoom.value})`,
    46    }
    47    if (props.card?.template) {
    48      style['background-color'] = 'inherit'
    49    } else {
    50      if (props.card?.background) {
    51        style['background-color'] = props.card.background
    52      } else {
    53        if (props.card?.backgroundAdaptive) {
    54          style['background-color'] = appStore.isDark ? '#232324' : '#F5F7FA'
    55        }
    56      }
    57    }
    58  
    59    return style
    60  }
    61  
    62  </script>
    63  
    64  <template>
    65  
    66    <div
    67      class="item-card elements selecto-area"
    68      v-bind:class="'class-'+card.currentID"
    69      :style="getCardStyle()"
    70      @mouseover="hover = true"
    71      @touchstart="hover = true"
    72      @mouseleave="hover = false"
    73      @mouseout="hover = false"
    74    >
    75      <KeystrokeCaptureViewer :card="card" :core="core" :hover="hover"/>
    76      <component
    77        v-for="(item, index) in card.items"
    78        :key="index"
    79        class="item-element"
    80        :style="item.position"
    81        :is="getCardItemName(item)"
    82        :item="item"
    83        :core="core"
    84      />
    85    </div>
    86  
    87  </template>
    88  
    89  <style lang="less">
    90  
    91  .item-card {
    92    position: relative;
    93    overflow: hidden;
    94    width: 100%;
    95    height: 100%;
    96  }
    97  
    98  .item-element {
    99    position: absolute;
   100    width: 100%;
   101    height: 100%;
   102    /*overflow: hidden;*/
   103    /*user-select: none;*/
   104  }
   105  
   106  </style>