Merge branch 'develop' into vue3

This commit is contained in:
syuilo
2020-08-19 22:15:04 +09:00
119 changed files with 3454 additions and 640 deletions

View File

@@ -1,12 +1,14 @@
<template>
<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable }" v-size="[{ max: 500 }]">
<header v-if="showHeader">
<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380], el: resizeBaseEl }">
<header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div>
<slot name="func"></slot>
<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
<template v-if="showBody"><fa :icon="faAngleUp"/></template>
<template v-else><fa :icon="faAngleDown"/></template>
</button>
<div class="sub">
<slot name="func"></slot>
<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
<template v-if="showBody"><fa :icon="faAngleUp"/></template>
<template v-else><fa :icon="faAngleDown"/></template>
</button>
</div>
</header>
<transition name="container-toggle"
@enter="enter"
@@ -52,6 +54,9 @@ export default defineComponent({
required: false,
default: false
},
resizeBaseEl: {
required: false,
},
},
data() {
return {
@@ -59,6 +64,18 @@ export default defineComponent({
faAngleUp, faAngleDown
};
},
mounted() {
this.$watch('showBody', showBody => {
this.$el.style.minHeight = `${this.$refs.header.offsetHeight}px`;
if (showBody) {
this.$el.style.flexBasis = `auto`;
} else {
this.$el.style.flexBasis = `${this.$refs.header.offsetHeight}px`;
}
}, {
immediate: true
});
},
methods: {
toggleContent(show: boolean) {
if (!this.bodyTogglable) return;
@@ -103,10 +120,6 @@ export default defineComponent({
position: relative;
overflow: hidden;
& + .ukygtjoj {
margin-top: var(--margin);
}
&.naked {
background: transparent !important;
box-shadow: none !important;
@@ -127,6 +140,7 @@ export default defineComponent({
z-index: 2;
background: var(--panelHeaderBg);
color: var(--panelHeaderFg);
line-height: 1.4em;
> .title {
margin: 0;
@@ -141,23 +155,42 @@ export default defineComponent({
}
}
> button {
> .sub {
position: absolute;
z-index: 2;
top: 0;
right: 0;
padding: 0;
width: 42px;
height: 100%;
> button {
width: 42px;
height: 100%;
}
}
}
&.max-width_500px {
> div {
> ::v-deep ._content {
padding: 24px;
& + ._content {
border-top: solid 1px var(--divider);
}
}
}
&.max-width_380px {
> header {
> .title {
padding: 8px 10px;
}
}
> div {
> ::v-deep ._content {
padding: 16px;
}
}
}
}

View File

@@ -0,0 +1,126 @@
<template>
<div class="ssazuxis" v-size="{ max: [500] }">
<header @click="() => showBody = !showBody" class="_button">
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
<button class="_button">
<template v-if="showBody"><fa :icon="faAngleUp"/></template>
<template v-else><fa :icon="faAngleDown"/></template>
</button>
</header>
<transition name="folder-toggle"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="showBody">
<slot></slot>
</div>
</transition>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({
props: {
expanded: {
type: Boolean,
required: false,
default: true
},
},
data() {
return {
showBody: this.expanded,
faAngleUp, faAngleDown
};
},
methods: {
toggleContent(show: boolean) {
this.showBody = show;
},
enter(el) {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = 0;
el.offsetHeight; // reflow
el.style.height = elementHeight + 'px';
},
afterEnter(el) {
el.style.height = null;
},
leave(el) {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = elementHeight + 'px';
el.offsetHeight; // reflow
el.style.height = 0;
},
afterLeave(el) {
el.style.height = null;
},
}
});
</script>
<style lang="scss" scoped>
.folder-toggle-enter-active, .folder-toggle-leave-active {
overflow-y: hidden;
transition: opacity 0.5s, height 0.5s !important;
}
.folder-toggle-enter {
opacity: 0;
}
.folder-toggle-leave-to {
opacity: 0;
}
.ssazuxis {
position: relative;
> header {
display: flex;
position: relative;
z-index: 2;
// TODO
// position: sticky;
// top: var(--stickyTopOffset);
// backdrop-filter: blur(20px);
> .title {
margin: 0;
padding: 12px 16px 12px 8px;
> [data-icon] {
margin-right: 6px;
}
&:empty {
display: none;
}
}
> .divider {
flex: 1;
margin: auto;
height: 1px;
background: var(--divider);
}
> button {
width: 42px;
}
}
&.max-width_500px {
> header {
> .title {
padding: 8px 10px;
}
}
}
}
</style>

View File

@@ -64,7 +64,7 @@
<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
</div>
<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
<div class="desc"><slot name="desc"></slot></div>
<div class="desc _caption"><slot name="desc"></slot></div>
</div>
</template>
@@ -401,13 +401,11 @@ export default defineComponent({
> .save {
margin: 6px 0 0 0;
font-size: 13px;
font-size: 0.8em;
}
> .desc {
margin: 6px 0 0 0;
font-size: 13px;
opacity: 0.7;
&:empty {
display: none;

View File

@@ -196,7 +196,7 @@ export default defineComponent({
> .text {
margin: 6px 0;
font-size: 13px;
font-size: 0.8em;
&:empty {
display: none;

View File

@@ -14,7 +14,7 @@
></textarea>
</div>
<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
<div class="desc"><slot name="desc"></slot></div>
<div class="desc _caption"><slot name="desc"></slot></div>
</div>
</template>
@@ -163,13 +163,11 @@ export default defineComponent({
> .save {
margin: 6px 0 0 0;
font-size: 13px;
font-size: 0.8em;
}
> .desc {
margin: 6px 0 0 0;
font-size: 13px;
opacity: 0.7;
&:empty {
display: none;