fix(stage-web,stage-tamagotchi,stage-ui): eliminate reactive use

apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue

@@ -11,7 +11,7 @@ import {
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
 import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, reactive, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -52,7 +52,7 @@ function handleResetSettings() {
   }
 }
 
-const headers = reactive<{ key: string, value: string }[]>([
+const headers = ref<{ key: string, value: string }[]>([
   { key: '', value: '' },
 ])
 

apps/stage-web/src/components/Backgrounds/SakuraPetal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, reactive } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 interface Props {
   petalCount?: number
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   baseColor: '#FFB6C1',
 })
 
-const petals = reactive<Petal[]>([])
+const petals = ref<Petal[]>([])
 let animationInterval: number | null = null
 
 function createPetalStyle() {
@@ -43,9 +43,9 @@ function createPetalStyle() {
 }
 
 function createPetals() {
-  petals.length = 0
+  petals.value.length = 0
   for (let i = 0; i < props.petalCount; i++) {
-    petals.push({
+    petals.value.push({
       id: Date.now() + i,
       style: createPetalStyle(),
     })

apps/stage-web/src/pages/settings/providers/ollama.vue

@@ -11,7 +11,7 @@ import {
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
 import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, reactive, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -52,7 +52,7 @@ function handleResetSettings() {
   }
 }
 
-const headers = reactive<{ key: string, value: string }[]>([
+const headers = ref<{ key: string, value: string }[]>([
   { key: '', value: '' },
 ])
 

packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { FieldKeyValues } from '@proj-airi/ui'
-import { reactive, watch } from 'vue'
+import { ref, watch } from 'vue'
 
-const emptyHeaders = reactive<{ key: string, value: string }[]>([
+const emptyHeaders = ref<{ key: string, value: string }[]>([
   { key: '', value: '' },
 ])
-const singleHeader = reactive<{ key: string, value: string }[]>([
+const singleHeader = ref<{ key: string, value: string }[]>([
   { key: 'Content-Type', value: 'application/json' },
 ])
-const multipleHeaders = reactive<{ key: string, value: string }[]>([
+const multipleHeaders = ref<{ key: string, value: string }[]>([
   { key: 'Authorization', value: 'Bearer token123' },
   { key: 'Accept', value: 'application/json' },
   { key: 'X-API-Key', value: 'abc123xyz456' },
@@ -36,7 +36,7 @@ function removeKeyValue(index: number, headers: { key: string, value: string }[]
 
 watch(emptyHeaders, (headers) => {
   if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
-    emptyHeaders.push({ key: '', value: '' })
+    emptyHeaders.value.push({ key: '', value: '' })
   }
 }, {
   deep: true,
@@ -45,7 +45,7 @@ watch(emptyHeaders, (headers) => {
 
 watch(singleHeader, (headers) => {
   if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
-    singleHeader.push({ key: '', value: '' })
+    singleHeader.value.push({ key: '', value: '' })
   }
 }, {
   deep: true,
@@ -54,7 +54,7 @@ watch(singleHeader, (headers) => {
 
 watch(multipleHeaders, (headers) => {
   if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
-    multipleHeaders.push({ key: '', value: '' })
+    multipleHeaders.value.push({ key: '', value: '' })
   }
 }, {
   deep: true,