All files / src/components/u-list-components.vue index.vue

60% Statements 9/15
4.76% Branches 1/21
0% Functions 0/4
60% Lines 9/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 104 105 106      7x   7x     7x                                                                                                                                                                                                  
<template>
  <div class="u-for-com" vusion-slot-name="default">
    <template v-if="options.length > 0">
      <div v-for="(item, index) in options" :key="index" class="u-for-com-frag">
        <u-list-components-item
          v-for="(item2, index2) in item"
          :key="index2"
          :item="item2"
          :colnum="colnum || 5"
          :equal-width="equalWidth"
          :index="comIndex(index, index2)"
        >
          <template #default="item2">
            <slot :item="item2.item" :index="comIndex(index, index2)"></slot>
            <s-empty v-if="$scopedSlots
                &&!($scopedSlots.default && $scopedSlots.default(item2))
                &&$env.VUE_APP_DESIGNER
                && !!$attrs['vusion-node-path']"></s-empty>
          </template>
        </u-list-components-item>
      </div>
    </template>
    <template v-else-if="$env.VUE_APP_DESIGNER">
        <slot><s-empty v-if="!$slots.default && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']"></s-empty></slot>
    </template>
  </div>
</template>
 
<script>
import UListComponentsItem from './item.vue';
import SEmpty from '../../components/s-empty.vue';
import { formatDSResult } from '../../utils/DataSource/format';
 
export default {
    name: 'u-list-components',
    components: {
        UListComponentsItem,
        SEmpty,
    },
    props: {
        dataSource: {
            type: [Array, Object, Function, String],
            default: () => [],
        },
        colnum: {
            type: Number,
            default: 5,
        },
        equalWidth: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            options: [],
        };
    },
    computed: {},
    watch: {
        dataSource: {
            deep: true,
            handler: 'update',
            immediate: true,
        },
    },
    methods: {
        divide(arr) {
            const result = [];
            const arre = [...arr];
            while (arre.length > 0) {
                const temp = arre.splice(0, this.colnum || 5);
                result.push(temp);
            }
            return result;
        },
        async update() {
            if (typeof (this.dataSource) === 'function') {
                try {
                    const res = await this.dataSource({
                        page: 1,
                        size: 1000,
                    });
                    this.options = this.divide(formatDSResult(res));
                } catch (error) {
                    console.error(error);
                }
            } else {
                this.options = this.divide(formatDSResult(this.dataSource));
            }
        },
        comIndex(index1, index2) {
            return index1 * (this.colnum || 5) + index2;
        },
    },
};
</script>
 
<style>
.u-for-com-frag {
  display: flex;
  flex-basis: auto;
  flex-wrap: wrap;
}
</style>