initial commit

components/ToggleOnOff.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { featureEnableBlock } from "@/utils/storage"
+
+const isEnabled = ref(false)
+let unwatchStorage: (() => void | undefined)
+
+onMounted(async() => {
+  isEnabled.value = await featureEnableBlock.getValue()
+
+  unwatchStorage = featureEnableBlock.watch((newValue) => {
+    if (newValue !== isEnabled.value) {
+      isEnabled.value = newValue
+    }
+  })
+})
+
+onUnmounted(() => {
+  if (unwatchStorage) unwatchStorage();
+})
+
+watch(isEnabled, async (newValue) => {
+  await featureEnableBlock.setValue(newValue)
+})
+
+const toggleOnOff = () => {
+  isEnabled.value = !isEnabled.value
+}
+</script>
+
+<template>
+  <button @click="toggleOnOff" class="button-toggle">
+      <img src="/icon/128.png" class="logo" :class="{ 'logo-on': isEnabled }" alt="let me focus logo" />
+  </button>
+  <br/>
+  {{ isEnabled ? '[on]' : '[off]' }}
+</template>
+
+<style scoped>
+.button-toggle {
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: none;
+}
+.button-toggle .logo {
+    width: 80%;
+    cursor: pointer;
+}
+
+.button-toggle .logo-on {
+    filter: drop-shadow(0 0 1em #ffffff);
+}
+</style>