213 lines
4.6 KiB
Vue
213 lines
4.6 KiB
Vue
<template>
|
|
|
|
<ui-button v-if="!hasDropdown" :type="type" :label="label" @click="onConfirm(null, false)" :disabled="disabled" />
|
|
|
|
<ui-dropdown v-else ref="dropdown" align="right">
|
|
|
|
<template v-slot:button>
|
|
<slot>
|
|
<ui-button :label="label" :type="type" :disabled="disabled" />
|
|
</slot>
|
|
</template>
|
|
|
|
<template v-if="flavors.length > 0">
|
|
<ui-dropdown-button v-for="(flavor, index) in flavors" :key="index" :icon="flavor.icon" :value="flavor" :label="flavor.name" :prevent="true" @click="selectFlavor" :selected="selectedflavor == flavor.alias" />
|
|
<template v-if="allowBlueprint">
|
|
<ui-dropdown-separator />
|
|
<div class="ui-decision">
|
|
<ui-toggle v-model:on="asBlueprint" :on-content="'Shared'" :off-content="'Not shared'" />
|
|
</div>
|
|
</template>
|
|
<ui-dropdown-separator />
|
|
<div class="ui-decision-button">
|
|
<ui-button label="@addoverlay.gotoeditor" type="accent" icon="fth-arrow-right" :disabled="disabled" @click="onConfirm(selectedflavor, asBlueprint)" />
|
|
</div>
|
|
</template>
|
|
|
|
<div v-else class="ui-add-button-items">
|
|
<button type="button" class="ui-add-button-item" @click="onConfirm(null, true)" :disabled="disabled">
|
|
<ui-icon symbol="fth-cloud" :size="20" />
|
|
<span class="-text">Shared</span>
|
|
</button>
|
|
<span class="ui-add-button-items-line"></span>
|
|
<button type="button" class="ui-add-button-item" @click="onConfirm(null, false)" :disabled="disabled">
|
|
<ui-icon symbol="fth-arrow-right" :size="20" />
|
|
<span class="-text">Local</span>
|
|
</button>
|
|
</div>
|
|
|
|
</ui-dropdown>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
import { useUiStore } from '../ui/store';
|
|
import { defineComponent } from 'vue';
|
|
import { UiFlavorProvider } from 'zero/ui';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: '@ui.add'
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'accent'
|
|
},
|
|
route: {
|
|
type: [String, Object],
|
|
default: null
|
|
},
|
|
alias: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data: () => ({
|
|
flavors: [],
|
|
loading: false,
|
|
asBlueprint: false,
|
|
allowBlueprint: false,
|
|
selectedflavor: null,
|
|
store: null
|
|
}),
|
|
|
|
computed: {
|
|
hasDropdown()
|
|
{
|
|
return this.flavors.length > 0 || this.allowBlueprint;
|
|
}
|
|
},
|
|
|
|
async created()
|
|
{
|
|
this.store = useUiStore();
|
|
this.buildFlavors();
|
|
},
|
|
|
|
methods: {
|
|
|
|
buildFlavors()
|
|
{
|
|
this.flavors = this.store.getFlavors(this.alias);
|
|
this.allowBlueprint = this.store.blueprints.indexOf(this.alias) > -1;
|
|
|
|
if (this.flavors.length > 0)
|
|
{
|
|
this.selectedflavor = this.flavors[0].alias;
|
|
}
|
|
},
|
|
|
|
|
|
selectFlavor(flavor, opts)
|
|
{
|
|
this.selectedflavor = flavor.alias;
|
|
},
|
|
|
|
|
|
onConfirm(flavor, shared)
|
|
{
|
|
if (!!this.route)
|
|
{
|
|
let routeObj = typeof this.route === 'object' ? this.route : { name: this.route };
|
|
routeObj.query = routeObj.query || {};
|
|
if (flavor)
|
|
{
|
|
routeObj.query['zero.flavor'] = flavor;
|
|
}
|
|
if (shared)
|
|
{
|
|
routeObj.query['zero.scope'] = 'system';
|
|
}
|
|
this.$router.push(routeObj);
|
|
}
|
|
|
|
this.$emit('click', { flavor, shared });
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.ui-decision
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 16px 16px;
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
.ui-decision-button
|
|
{
|
|
padding: 16px 16px;
|
|
}
|
|
|
|
.ui-dropdown.theme-dark .ui-decision
|
|
{
|
|
.ui-toggle-switch:not(.is-active)
|
|
{
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
input:focus + .ui-toggle-switch
|
|
{
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.ui-add-button
|
|
{
|
|
display: flex;
|
|
}
|
|
|
|
.ui-add-button-items
|
|
{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1px 1fr;
|
|
}
|
|
|
|
.ui-add-button-item
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 10px;
|
|
font-size: var(--font-size);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.ui-add-button-item .ui-icon
|
|
{
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ui-add-button-item .is-primary
|
|
{
|
|
font-size: 24px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.ui-add-button-item:hover
|
|
{
|
|
background: var(--color-dropdown-selected);
|
|
}
|
|
|
|
.ui-add-button-items-line
|
|
{
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--color-line);
|
|
}
|
|
</style> |