summaryrefslogtreecommitdiff
path: root/packages/client/src/components/form
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/form')
-rw-r--r--packages/client/src/components/form/folder.vue107
-rw-r--r--packages/client/src/components/form/group.vue3
-rw-r--r--packages/client/src/components/form/input.vue4
-rw-r--r--packages/client/src/components/form/pagination.vue44
-rw-r--r--packages/client/src/components/form/radio.vue20
-rw-r--r--packages/client/src/components/form/section.vue14
-rw-r--r--packages/client/src/components/form/select.vue4
-rw-r--r--packages/client/src/components/form/split.vue27
-rw-r--r--packages/client/src/components/form/suspense.vue2
-rw-r--r--packages/client/src/components/form/switch.vue5
10 files changed, 159 insertions, 71 deletions
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
new file mode 100644
index 0000000000..571afe50c0
--- /dev/null
+++ b/packages/client/src/components/form/folder.vue
@@ -0,0 +1,107 @@
+<template>
+<div class="dwzlatin" :class="{ opened }">
+ <div class="header _button" @click="toggle">
+ <span class="icon"><slot name="icon"></slot></span>
+ <span class="text"><slot name="label"></slot></span>
+ <span class="right">
+ <span class="text"><slot name="suffix"></slot></span>
+ <i v-if="opened" class="fas fa-angle-up icon"></i>
+ <i v-else class="fas fa-angle-down icon"></i>
+ </span>
+ </div>
+ <keep-alive>
+ <div v-if="openedAtLeastOnce" v-show="opened" class="body">
+ <MkSpacer :margin-min="14" :margin-max="22">
+ <slot></slot>
+ </MkSpacer>
+ </div>
+ </keep-alive>
+</div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+ defaultOpen: boolean;
+}>(), {
+ defaultOpen: false,
+})
+
+let opened = $ref(props.defaultOpen);
+let openedAtLeastOnce = $ref(props.defaultOpen);
+
+const toggle = () => {
+ opened = !opened;
+ if (opened) {
+ openedAtLeastOnce = true;
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+.dwzlatin {
+ display: block;
+
+ > .header {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 12px 14px 12px 14px;
+ background: var(--buttonBg);
+ border-radius: 6px;
+
+ &:hover {
+ text-decoration: none;
+ background: var(--buttonHoverBg);
+ }
+
+ &.active {
+ color: var(--accent);
+ background: var(--buttonHoverBg);
+ }
+
+ > .icon {
+ margin-right: 0.75em;
+ flex-shrink: 0;
+ text-align: center;
+ opacity: 0.8;
+
+ &:empty {
+ display: none;
+
+ & + .text {
+ padding-left: 4px;
+ }
+ }
+ }
+
+ > .text {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding-right: 12px;
+ }
+
+ > .right {
+ margin-left: auto;
+ opacity: 0.7;
+ white-space: nowrap;
+
+ > .text:not(:empty) {
+ margin-right: 0.75em;
+ }
+ }
+ }
+
+ > .body {
+ background: var(--panel);
+ border-radius: 0 0 6px 6px;
+ }
+
+ &.opened {
+ > .header {
+ border-radius: 6px 6px 0 0;
+ }
+ }
+}
+</style>
diff --git a/packages/client/src/components/form/group.vue b/packages/client/src/components/form/group.vue
index 2fc203f1b9..1e8376ca44 100644
--- a/packages/client/src/components/form/group.vue
+++ b/packages/client/src/components/form/group.vue
@@ -1,5 +1,5 @@
<template>
-<div v-sticky-container v-panel class="adfeebaf _formBlock">
+<div v-sticky-container class="adfeebaf _formBlock">
<div class="label"><slot name="label"></slot></div>
<div class="main _formRoot">
<slot></slot>
@@ -17,6 +17,7 @@ export default defineComponent({
<style lang="scss" scoped>
.adfeebaf {
padding: 24px 24px;
+ border: solid 1px var(--divider);
border-radius: var(--radius);
> .label {
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 3533f4f27b..7165671af3 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -167,7 +167,7 @@ export default defineComponent({
// このコンポーネントが作成された時、非表示状態である場合がある
// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
- const clock = setInterval(() => {
+ const clock = window.setInterval(() => {
if (prefixEl.value) {
if (prefixEl.value.offsetWidth) {
inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
@@ -181,7 +181,7 @@ export default defineComponent({
}, 100);
onUnmounted(() => {
- clearInterval(clock);
+ window.clearInterval(clock);
});
});
});
diff --git a/packages/client/src/components/form/pagination.vue b/packages/client/src/components/form/pagination.vue
deleted file mode 100644
index 3d3b40a783..0000000000
--- a/packages/client/src/components/form/pagination.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<FormSlot>
- <template #label><slot name="label"></slot></template>
- <div class="abcaccfa">
- <slot :items="items"></slot>
- <div v-if="empty" key="_empty_" class="empty">
- <slot name="empty"></slot>
- </div>
- <MkButton v-show="more" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
- <template v-if="!moreFetching">{{ $ts.loadMore }}</template>
- <template v-if="moreFetching"><MkLoading inline/></template>
- </MkButton>
- </div>
-</FormSlot>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@/components/ui/button.vue';
-import FormSlot from './slot.vue';
-import paging from '@/scripts/paging';
-
-export default defineComponent({
- components: {
- MkButton,
- FormSlot,
- },
-
- mixins: [
- paging({}),
- ],
-
- props: {
- pagination: {
- required: true
- },
- },
-});
-</script>
-
-<style lang="scss" scoped>
-.abcaccfa {
-}
-</style>
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index f0b8c71376..2becbec6f3 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -1,6 +1,6 @@
<template>
<div
- v-panel
+ v-adaptive-border
class="novjtctn"
:class="{ disabled, checked }"
:aria-checked="checked"
@@ -53,7 +53,10 @@ export default defineComponent({
display: inline-block;
text-align: left;
cursor: pointer;
- padding: 11px 14px;
+ padding: 10px 12px;
+ background-color: var(--panel);
+ background-clip: padding-box !important;
+ border: solid 1px var(--panel);
border-radius: 6px;
transition: all 0.3s;
@@ -69,9 +72,13 @@ export default defineComponent({
}
}
+ &:hover {
+ border-color: var(--inputBorderHover) !important;
+ }
+
&.checked {
- background: var(--accentedBg) !important;
- border-color: var(--accent);
+ background-color: var(--accentedBg) !important;
+ border-color: var(--accentedBg) !important;
color: var(--accent);
&, * {
@@ -89,11 +96,6 @@ export default defineComponent({
}
}
- &:hover {
- border-color: var(--inputBorderHover);
- color: var(--accent);
- }
-
> input {
position: absolute;
width: 0;
diff --git a/packages/client/src/components/form/section.vue b/packages/client/src/components/form/section.vue
index bc2ab966b8..c6e34ef1cc 100644
--- a/packages/client/src/components/form/section.vue
+++ b/packages/client/src/components/form/section.vue
@@ -1,5 +1,5 @@
<template>
-<div v-size="{ max: [500] }" v-sticky-container class="vrtktovh _formBlock">
+<div class="vrtktovh _formBlock">
<div class="label"><slot name="label"></slot></div>
<div class="main _formRoot">
<slot></slot>
@@ -7,20 +7,13 @@
</div>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-
-});
+<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.vrtktovh {
- margin: 0;
border-top: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--divider);
- padding: 24px 0;
& + .vrtktovh {
border-top: none;
@@ -36,7 +29,7 @@ export default defineComponent({
> .label {
font-weight: bold;
- padding: 0 0 16px 0;
+ margin: 1.5em 0 16px 0;
&:empty {
display: none;
@@ -44,6 +37,7 @@ export default defineComponent({
}
> .main {
+ margin: 1.5em 0;
}
}
</style>
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index afc53ca9c8..87196027a8 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -117,7 +117,7 @@ export default defineComponent({
// このコンポーネントが作成された時、非表示状態である場合がある
// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
- const clock = setInterval(() => {
+ const clock = window.setInterval(() => {
if (prefixEl.value) {
if (prefixEl.value.offsetWidth) {
inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
@@ -131,7 +131,7 @@ export default defineComponent({
}, 100);
onUnmounted(() => {
- clearInterval(clock);
+ window.clearInterval(clock);
});
});
});
diff --git a/packages/client/src/components/form/split.vue b/packages/client/src/components/form/split.vue
new file mode 100644
index 0000000000..676b293967
--- /dev/null
+++ b/packages/client/src/components/form/split.vue
@@ -0,0 +1,27 @@
+<template>
+<div class="terlnhxf _formBlock">
+ <slot></slot>
+</div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+ minWidth: number;
+}>(), {
+ minWidth: 210,
+});
+
+const minWidth = props.minWidth + 'px';
+</script>
+
+<style lang="scss" scoped>
+.terlnhxf {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
+ grid-gap: 12px;
+
+ > ::v-deep(*) {
+ margin: 0 !important;
+ }
+}
+</style>
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
index 4d5debe604..2ad55dacae 100644
--- a/packages/client/src/components/form/suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -1,5 +1,5 @@
<template>
-<transition name="fade" mode="out-in">
+<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="pending">
<MkLoading/>
</div>
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index aa9b09215e..f8a07b4caa 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -13,7 +13,8 @@
<i class="check fas fa-check"></i>
</span>
<span class="label">
- <span @click="toggle"><slot></slot></span>
+ <!-- TODO: 無名slotの方は廃止 -->
+ <span @click="toggle"><slot name="label"></slot><slot></slot></span>
<p class="caption"><slot name="caption"></slot></p>
</span>
</div>
@@ -110,7 +111,7 @@ export default defineComponent({
}
> .label {
- margin-left: 16px;
+ margin-left: 12px;
margin-top: 2px;
display: block;
transition: inherit;
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-14 04:52:07 +0000