- init

2026-08-29 17:47:12 +02:00
commit c7885067e7
53 changed files with 13458 additions and 0 deletions
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useDocument } from '../store/document';
+
+const store = useDocument();
+const draft = ref('');
+const focused = ref(false);
+
+// keep the field in sync with the active cell unless the user is editing it
+watch(
+  () => store.activeCellInput.value,
+  (v) => {
+    if (!focused.value) draft.value = v;
+  },
+  { immediate: true },
+);
+
+function commit() {
+  const sel = store.doc.selection;
+  if (sel) store.setCellInput(sel.tableId, sel.focus.col, sel.focus.row, draft.value);
+}
+function onEnter() {
+  commit();
+  (document.activeElement as HTMLElement)?.blur();
+}
+function onBlur() {
+  focused.value = false;
+  commit();
+}
+function onEscape() {
+  draft.value = store.activeCellInput.value;
+  (document.activeElement as HTMLElement)?.blur();
+}
+</script>
+
+<template>
+  <div class="formula-bar">
+    <span class="cell-name" :title="store.activeCellName.value">
+      {{ store.activeCellName.value }}
+    </span>
+    <span class="fx">fx</span>
+    <input
+      v-model="draft"
+      class="formula-input"
+      type="text"
+      spellcheck="false"
+      placeholder="Wert oder =Formel"
+      @focus="focused = true"
+      @blur="onBlur"
+      @keydown.enter.prevent="onEnter"
+      @keydown.esc.prevent="onEscape"
+    />
+  </div>
+</template>
+
+<style scoped>
+.formula-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+.cell-name {
+  min-width: 128px;
+  max-width: 128px;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+@media (max-width: 480px) {
+  .cell-name {
+    min-width: 64px;
+    max-width: 64px;
+  }
+  .formula-bar {
+    gap: 6px;
+    padding: 6px 8px;
+  }
+}
+.fx {
+  font-style: italic;
+  color: var(--text-dim);
+  font-size: 13px;
+}
+.formula-input {
+  flex: 1;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+  background: var(--surface-2);
+}
+.formula-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--surface);
+}
+</style>