91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<template lang="html">
|
|
<transition-group name="slide">
|
|
<dialog-base
|
|
v-show="!value"
|
|
key="left"
|
|
class="step-1"
|
|
>
|
|
<template slot="toolbar">
|
|
<v-toolbar-title>
|
|
Property Type
|
|
</v-toolbar-title>
|
|
<v-spacer />
|
|
<v-switch
|
|
:input-value="showPropertyHelp"
|
|
append-icon="mdi-help"
|
|
hide-details
|
|
flat
|
|
@change="propertyHelpChanged"
|
|
/>
|
|
</template>
|
|
<property-selector
|
|
slot="unwrapped-content"
|
|
:no-library-only-props="noLibraryOnlyProps"
|
|
@select="type => $emit('input', type)"
|
|
/>
|
|
</dialog-base>
|
|
<div
|
|
v-show="value"
|
|
key="right"
|
|
class="step-2"
|
|
style="height: 100%;"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</transition-group>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
|
|
import PropertySelector from '/imports/ui/properties/shared/PropertySelector.vue';
|
|
import {snackbar} from '/imports/ui/components/snackbars/SnackbarQueue.js';
|
|
|
|
export default {
|
|
components: {
|
|
DialogBase,
|
|
PropertySelector,
|
|
},
|
|
props: {
|
|
noLibraryOnlyProps: Boolean,
|
|
value: {
|
|
type: String,
|
|
},
|
|
},
|
|
meteor: {
|
|
showPropertyHelp(){
|
|
let user = Meteor.user();
|
|
return !(user?.preferences?.hidePropertySelectDialogHelp)
|
|
},
|
|
},
|
|
methods: {
|
|
propertyHelpChanged(value){
|
|
Meteor.users.setPreference.call({
|
|
preference: 'hidePropertySelectDialogHelp',
|
|
value: !value
|
|
}, error => {
|
|
if (!error) return;
|
|
console.error(error);
|
|
snackbar({
|
|
text: error.reason,
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.slide-enter-active, .slide-leave-active {
|
|
transition: transform .3s ease;
|
|
}
|
|
.slide-enter-active.step-1, .slide-leave-active.step-1{
|
|
position: absolute;
|
|
}
|
|
.slide-enter.step-1, .slide-leave-to.step-1 {
|
|
transform: translateX(-100%);
|
|
}
|
|
.slide-enter.step-2, .slide-leave-to.step-2 {
|
|
transform: translateX(100%);
|
|
}
|
|
</style>
|