wip
This commit is contained in:
parent
73d0174847
commit
280e74749f
src/client
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-modal ref="modal" @closed="destroy" @click="onBgClick" :showing="showing">
|
<x-modal ref="modal" @closed="$emit('closed')" @click="onBgClick" :showing="showing">
|
||||||
<div class="mk-dialog" :class="{ iconOnly }">
|
<div class="mk-dialog" :class="{ iconOnly }">
|
||||||
<template v-if="type == 'signin'">
|
<template v-if="type == 'signin'">
|
||||||
<mk-signin/>
|
<mk-signin/>
|
||||||
|
@ -65,10 +65,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
destroy: {
|
showing: {
|
||||||
required: true
|
|
||||||
},
|
|
||||||
emit: {
|
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
type: {
|
type: {
|
||||||
|
@ -121,9 +118,10 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
emits: ['done', 'closed'],
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showing: true,
|
|
||||||
inputValue: this.input && this.input.default ? this.input.default : null,
|
inputValue: this.input && this.input.default ? this.input.default : null,
|
||||||
userInputValue: null,
|
userInputValue: null,
|
||||||
selectedValue: this.select ? this.select.default ? this.select.default : this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
|
selectedValue: this.select ? this.select.default ? this.select.default : this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
|
||||||
|
@ -162,8 +160,7 @@ export default defineComponent({
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
done(canceled, result?) {
|
done(canceled, result?) {
|
||||||
this.showing = false;
|
this.$emit('done', { canceled, result });
|
||||||
this.emit({ canceled, result });
|
|
||||||
},
|
},
|
||||||
|
|
||||||
async ok() {
|
async ok() {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="destroy" :showing="showing">
|
<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="$emit('closed')" :showing="showing">
|
||||||
<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items" :style="{ width: width + 'px' }">
|
<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items" :style="{ width: width + 'px' }">
|
||||||
<template v-for="(item, i) in items.filter(item => item !== undefined)">
|
<template v-for="(item, i) in items.filter(item => item !== undefined)">
|
||||||
<div v-if="item === null" class="divider" :key="i"></div>
|
<div v-if="item === null" class="divider" :key="i"></div>
|
||||||
|
@ -44,7 +44,7 @@ export default defineComponent({
|
||||||
XModal
|
XModal
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
destroy: {
|
showing: {
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
source: {
|
source: {
|
||||||
|
@ -77,7 +77,6 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showing: true,
|
|
||||||
faCircle
|
faCircle
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -102,7 +101,7 @@ export default defineComponent({
|
||||||
this.close();
|
this.close();
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
this.showing = false;
|
this.$emit('done');
|
||||||
},
|
},
|
||||||
focusUp() {
|
focusUp() {
|
||||||
focusPrev(document.activeElement);
|
focusPrev(document.activeElement);
|
||||||
|
|
|
@ -18,7 +18,6 @@ import * as os from '@/os';
|
||||||
// memo: 旧popup.vueのfixedプロパティに相当するものはsource要素の祖先を辿るなどして自動で判定できるのでは
|
// memo: 旧popup.vueのfixedプロパティに相当するものはsource要素の祖先を辿るなどして自動で判定できるのでは
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
emits: ['click', 'esc', 'closed'],
|
|
||||||
props: {
|
props: {
|
||||||
showing: {
|
showing: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -38,6 +37,7 @@ export default defineComponent({
|
||||||
required: false,
|
required: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
emits: ['click', 'esc', 'closed'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
fixed: false,
|
fixed: false,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, defineAsyncComponent } from 'vue';
|
import { Component, defineAsyncComponent, ref } from 'vue';
|
||||||
import Stream from '@/scripts/stream';
|
import Stream from '@/scripts/stream';
|
||||||
import { store } from '@/store';
|
import { store } from '@/store';
|
||||||
import { apiUrl } from '@/config';
|
import { apiUrl } from '@/config';
|
||||||
|
@ -44,25 +44,29 @@ export function api(endpoint: string, data: Record<string, any> = {}, token?: st
|
||||||
return promise;
|
return promise;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function popup(component: Component, props: Record<string, any>, eventHandler?: Function, closedCallback?: Function) {
|
export function popup(component: Component, props: Record<string, any>, callback?: Function) {
|
||||||
const id = Math.random().toString(); // TODO: uuidとか使う
|
const id = Math.random().toString(); // TODO: uuidとか使う
|
||||||
const destroy = () => {
|
const showing = ref(true);
|
||||||
store.commit('removePopup', id);
|
|
||||||
if (closedCallback) closedCallback();
|
|
||||||
};
|
|
||||||
const popup = {
|
const popup = {
|
||||||
component,
|
component,
|
||||||
props: {
|
props: {
|
||||||
...props,
|
...props,
|
||||||
destroy,
|
showing
|
||||||
emit: (...args) => {
|
},
|
||||||
if (eventHandler) eventHandler(...args);
|
showing,
|
||||||
}
|
done: (...args) => {
|
||||||
|
if (callback) callback(...args);
|
||||||
|
showing.value = false;
|
||||||
|
},
|
||||||
|
closed: () => {
|
||||||
|
store.commit('removePopup', id);
|
||||||
},
|
},
|
||||||
id,
|
id,
|
||||||
};
|
};
|
||||||
store.commit('addPopup', popup);
|
store.commit('addPopup', popup);
|
||||||
return destroy;
|
return () => {
|
||||||
|
showing.value = false;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function dialog(props: Record<string, any>) {
|
export function dialog(props: Record<string, any>) {
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<DeckUI v-if="deckmode"/>
|
<DeckUI v-if="deckmode"/>
|
||||||
<DefaultUI v-else/>
|
<DefaultUI v-else/>
|
||||||
|
|
||||||
<component v-for="popup in $store.state.popups" :is="popup.component" v-bind="popup.props" :key="popup.id"/>
|
<component v-for="popup in $store.state.popups" :is="popup.component" v-bind="popup.props" :key="popup.id" @done="popup.done" @closed="popup.closed"/>
|
||||||
|
|
||||||
<div id="wait" v-if="$store.state.pendingApiRequestsCount > 0"></div>
|
<div id="wait" v-if="$store.state.pendingApiRequestsCount > 0"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue