studio3-starter/index.js at main · designftw/studio3-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { createApp } from "vue";

const app = createApp({
  template: "#template",

  data() {
    return {
      tasks: [
        {
          done: false,
          title: "",
          active: true,
        },
      ],
    };
  },

  methods: {
    addItem() {
      this.tasks.push({});

      this.setActive();
    },

    deleteItem(i) {
      this.tasks.splice(i, 1);
      this.setActive(i - 1);
    },

    deleteItemIfEmpty(i) {
      if (!this.tasks[i]?.title) {
        this.deleteItem(i);
      }
    },

    clearCompleted() {
      this.tasks = this.tasks.filter((task) => !task.done);
    },

    setActive(i) {
      for (let task of this.tasks) {
        task.active = false;
      }

      if (i >= 0 && this.tasks[i]) {
        this.tasks[i].active = true;
      } else if (this.tasks.length > 0) {
        this.tasks.at(-1).active = true;
      }
    },
  },
})
  .directive("focus", (e, b) => (b.value ?? 1) && !b.oldValue && e.focus())
  .mount("#app");

// For debugging
globalThis.app = app;