Strengthened CRF, added more vue, and removed viewtransitions

src/components/AutoSubmit.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+function onChange(e: Event) {
+  const el = e.target as HTMLElement;
+  el.closest('form')?.submit();
+}
+</script>
+
+<template>
+  <span @change="onChange">
+    <slot />
+  </span>
+</template>

src/components/ColorDot.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  color: string;
+  as?: string;
+  class?: string;
+  borderColor?: boolean;
+}>();
+</script>
+
+<template>
+  <component
+    :is="as || 'span'"
+    :class="$props.class"
+    :style="borderColor ? { borderColor: color } : { backgroundColor: color }"
+  ><slot /></component>
+</template>

src/components/ConfirmForm.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  message: string;
+  action: string;
+  method?: string;
+  class?: string;
+}>();
+
+function onSubmit(e: Event) {
+  if (!confirm((e.currentTarget as HTMLFormElement).dataset.message!)) {
+    e.preventDefault();
+  }
+}
+</script>
+
+<template>
+  <form
+    :method="method || 'POST'"
+    :action="action"
+    :class="$props.class"
+    :data-message="message"
+    @submit="onSubmit"
+  >
+    <slot />
+  </form>
+</template>

src/components/ModalButton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  modalId: string;
+  action?: 'open' | 'close';
+  class?: string;
+  title?: string;
+  type?: string;
+}>();
+
+function onClick(e: MouseEvent) {
+  const btn = e.currentTarget as HTMLElement;
+  const id = btn.dataset.modalId!;
+  const act = btn.dataset.action || 'open';
+  const modal = document.getElementById(id) as HTMLDialogElement | null;
+  if (act === 'close') {
+    modal?.close();
+  } else {
+    modal?.showModal();
+  }
+}
+</script>
+
+<template>
+  <button
+    :type="(type as any) || 'button'"
+    :class="$props.class"
+    :title="$props.title"
+    :data-modal-id="modalId"
+    :data-action="action || 'open'"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+</template>