refactor(client): use composition api

packages/client/src/components/cw-button.vue

@@ -5,41 +5,33 @@
 </button>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { computed } from 'vue';
 import { length } from 'stringz';
+import * as misskey from 'misskey-js';
 import { concat } from '@/scripts/array';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	modelValue: boolean;
-		modelValue: {
+	note: misskey.entities.Note;
-			type: Boolean,
+}>();
-			required: true
-		},
-		note: {
-			type: Object,
-			required: true
-		}
-	},
 
-	computed: {
+const emit = defineEmits<{
-		label(): string {
+	(e: 'update:modelValue', v: boolean): void;
+}>();
+
+const label = computed(() => {
 	return concat([
-				this.note.text ? [this.$t('_cw.chars', { count: length(this.note.text) })] : [],
+		props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
-				this.note.files && this.note.files.length !== 0 ? [this.$t('_cw.files', { count: this.note.files.length }) ] : [],
+		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length }) ] : [],
-				this.note.poll != null ? [this.$ts.poll] : []
+		props.note.poll != null ? [i18n.locale.poll] : []
 	] as string[][]).join(' / ');
-		}
-	},
-
-	methods: {
-		length,
-
-		toggle() {
-			this.$emit('update:modelValue', !this.modelValue);
-		}
-	}
 });
+
+const toggle = () => {
+	emit('update:modelValue', !props.modelValue);
+};
 </script>
 
 <style lang="scss" scoped>