<template> <MkContainer :show-header="props.showHeader"> <template #header><Fa :icon="faStickyNote"/>{{ $ts._widgets.memo }}</template> <div class="otgbylcu"> <textarea v-model="text" :placeholder="$ts.placeholder" @input="onChange"></textarea> <button @click="saveMemo" :disabled="!changed" class="_buttonPrimary">{{ $ts.save }}</button> </div> </MkContainer> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { faStickyNote } from '@fortawesome/free-solid-svg-icons'; import MkContainer from '@client/components/ui/container.vue'; import define from './define'; import * as os from '@client/os'; const widget = define({ name: 'memo', props: () => ({ showHeader: { type: 'boolean', default: true, }, }) }); export default defineComponent({ extends: widget, components: { MkContainer }, data() { return { text: null, changed: false, timeoutId: null, faStickyNote }; }, created() { this.text = this.$store.state.memo; this.$watch(() => this.$store.reactiveState.memo, text => { this.text = text; }); }, methods: { onChange() { this.changed = true; clearTimeout(this.timeoutId); this.timeoutId = setTimeout(this.saveMemo, 1000); }, saveMemo() { this.$store.set('memo', this.text); this.changed = false; } } }); </script> <style lang="scss" scoped> .otgbylcu { padding-bottom: 28px + 16px; > textarea { display: block; width: 100%; max-width: 100%; min-width: 100%; padding: 16px; color: var(--fg); background: transparent; border: none; border-bottom: solid 1px var(--divider); border-radius: 0; box-sizing: border-box; font: inherit; font-size: 0.9em; &:focus { outline: none; } } > button { display: block; position: absolute; bottom: 8px; right: 8px; margin: 0; padding: 0 10px; height: 28px; outline: none; border-radius: 4px; &:disabled { opacity: 0.7; cursor: default; } } } </style>