You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.5 KiB
118 lines
3.5 KiB
<template>
|
|
<div class="flex flex-nowrap py-2">
|
|
<div ref="titleContainerRef" class="flex items-end text-subtitle2 text-no-wrap">{{ title }}</div>
|
|
<q-space />
|
|
<div ref="actionContainerRef" class="flex flex-nowrap">
|
|
<!-- baseActions -->
|
|
<template v-for="(action, index) in baseActions" :key="'baseAction_' + index">
|
|
<q-separator
|
|
v-if="action.separator"
|
|
vertical
|
|
class="class-action-item"
|
|
:style="{
|
|
'margin-left': '5px',
|
|
'margin-right': '5px',
|
|
}"
|
|
/>
|
|
<q-btn
|
|
v-else
|
|
v-bind="action"
|
|
:id="action.name"
|
|
:disable="action.enableIf ? !action.enableIf() : false"
|
|
no-wrap
|
|
class="class-action-item"
|
|
:style="{
|
|
'margin-left': '5px',
|
|
'margin-right': '5px',
|
|
}"
|
|
@click="action.click"
|
|
/>
|
|
</template>
|
|
|
|
<!-- moreActions -->
|
|
<q-btn-dropdown v-if="moreActions && moreActions.length > 0" :label="$t('more')" class="class-action-item" style="margin-left: 5px">
|
|
<q-list>
|
|
<template v-for="(action, index) in moreActions" :key="'moreAction_' + index">
|
|
<q-separator v-if="action.separator" />
|
|
<q-item v-else v-close-popup clickable @click="action.click">
|
|
<q-item-section avatar style="min-width: 28px; padding-right: 0px">
|
|
<q-icon :name="action.icon" size="20px" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label :v-bind="action">{{ action.label }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
<q-resize-observer @resize="onResize" />
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { Tools } from '@/platform/utils';
|
|
|
|
const props = defineProps({
|
|
title: { type: String, default: '' },
|
|
actions: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
});
|
|
|
|
const titleContainerRef = ref();
|
|
const actionContainerRef = ref();
|
|
|
|
const actions = props.actions;
|
|
const baseActions = ref(actions);
|
|
const moreActions = ref([]);
|
|
const isActionWidthInitializedRef = ref(false);
|
|
const moreActionWidth = 100;
|
|
|
|
const onResize = (size) => {
|
|
if (Tools.isUndefinedOrNull(titleContainerRef.value) || Tools.isUndefinedOrNull(actionContainerRef.value)) {
|
|
return;
|
|
}
|
|
|
|
if (!isActionWidthInitializedRef.value) {
|
|
const nodes = actionContainerRef.value.getElementsByClassName('class-action-item');
|
|
for (let i = 0; i < actions.length; i++) {
|
|
actions[i].width = nodes[i].clientWidth + 10;
|
|
}
|
|
isActionWidthInitializedRef.value = true;
|
|
}
|
|
|
|
const _baseActions = [];
|
|
const _moreActions = [];
|
|
const length = actions.length;
|
|
let availableWidth = size.width - titleContainerRef.value.clientWidth;
|
|
let width = 0;
|
|
let index = 0;
|
|
|
|
for (; index < length; index++) {
|
|
console.log(index, width + actions[index].width, availableWidth);
|
|
if (width + actions[index].width > availableWidth) {
|
|
availableWidth -= moreActionWidth;
|
|
while (width > availableWidth) {
|
|
index--;
|
|
width -= actions[index].width;
|
|
_baseActions.pop();
|
|
}
|
|
break;
|
|
} else {
|
|
_baseActions.push(actions[index]);
|
|
width += actions[index].width;
|
|
}
|
|
}
|
|
|
|
for (; index < length; index++) {
|
|
_moreActions.push(actions[index]);
|
|
}
|
|
|
|
baseActions.value = _baseActions;
|
|
moreActions.value = _moreActions;
|
|
};
|
|
</script>
|
|
|