iceshrimp/packages/client/src/components/MkCwButton.vue

71 lines
1.5 KiB
Vue
Raw Normal View History

<template>
<button
class="_button"
:class="{showLess: modelValue, fade: !modelValue}"
@click.stop="toggle"
>
<span>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}
<span v-if="!modelValue">{{ label }}</span>
</span>
2023-04-08 09:01:42 +09:00
</button>
</template>
2022-01-07 13:26:12 +09:00
<script lang="ts" setup>
2023-04-08 09:01:42 +09:00
import { computed } from "vue";
import { length } from "stringz";
import * as misskey from "calckey-js";
import { concat } from "@/scripts/array";
import { i18n } from "@/i18n";
2022-01-07 13:26:12 +09:00
const props = defineProps<{
modelValue: boolean;
note: misskey.entities.Note;
}>();
const emit = defineEmits<{
2023-04-08 09:01:42 +09:00
(ev: "update:modelValue", v: boolean): void;
2022-01-07 13:26:12 +09:00
}>();
const label = computed(() => {
return concat([
2023-04-08 09:01:42 +09:00
props.note.text
? [i18n.t("_cw.chars", { count: length(props.note.text) })]
: [],
props.note.files && props.note.files.length !== 0
? [i18n.t("_cw.files", { count: props.note.files.length })]
: [],
props.note.poll != null ? [i18n.ts.poll] : [],
props.note.renote != null ? [i18n.ts.quoteAttached] : [],
] as string[][]).join(", ");
});
2022-01-07 13:26:12 +09:00
const toggle = () => {
2023-04-08 09:01:42 +09:00
emit("update:modelValue", !props.modelValue);
2022-01-07 13:26:12 +09:00
};
</script>
<style lang="scss" scoped>
._button {
font-weight: 700;
> span {
background: var(--cwBg) !important;
color: var(--cwFg);
transition: background .2s, color .2s;
> span {
font-weight: 500;
&::before {
content: "("
}
&::after {
content: ")"
}
}
}
&:hover > span {
background: var(--cwFg) !important;
color: var(--cwBg) !important;
}
}
</style>