diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
| commit | 9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch) | |
| tree | ce5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/form/folder.vue | |
| parent | wip: retention for dashboard (diff) | |
| download | misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.gz misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.bz2 misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.zip | |
rename: client -> frontend
Diffstat (limited to 'packages/client/src/components/form/folder.vue')
| -rw-r--r-- | packages/client/src/components/form/folder.vue | 107 |
1 files changed, 0 insertions, 107 deletions
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue deleted file mode 100644 index 1256dfcbb4..0000000000 --- a/packages/client/src/components/form/folder.vue +++ /dev/null @@ -1,107 +0,0 @@ -<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="ti ti-chevron-up icon"></i> - <i v-else class="ti ti-chevron-down icon"></i> - </span> - </div> - <KeepAlive> - <div v-if="openedAtLeastOnce" v-show="opened" class="body"> - <MkSpacer :margin-min="14" :margin-max="22"> - <slot></slot> - </MkSpacer> - </div> - </KeepAlive> -</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: 10px 14px 10px 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> |