mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Switch Vue components from class to object syntax

Browse source
This commit is contained in:
Keavon Chambers 2021-02-16 16:05:03 -08:00
parent d111c0ae4d
commit d5366a9400
12 changed files with 51 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web-frontend/src/App.vue
View file

@ -3,15 +3,15 @@
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
import MainWindow from "./components/window/MainWindow.vue";
@Options({
export default defineComponent({
name: "App",
components: {
MainWindow,
},
})
export default class App extends Vue {}
});
</script>
<style lang="scss">

14
web-frontend/src/components/footer/FooterBar.vue
View file

@ -44,18 +44,14 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import { defineComponent } from "vue";
import InputHint from "./InputHint.vue";
@Options({
export default defineComponent({
name: "FooterBar",
components: {
LayoutRow,
LayoutCol,
InputHint,
},
props: {},
})
export default class FooterBar extends Vue {}
});
</script>

13
web-frontend/src/components/footer/InputHint.vue
View file

@ -54,7 +54,7 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
export enum MouseInputInteraction {
"None" = "None",
@ -69,14 +69,14 @@ export enum MouseInputInteraction {
"MMBDrag" = "MMBDrag",
}
@Options({
components: {},
export default defineComponent({
name: "InputHint",
props: {
inputKeys: { type: Array, default: [] },
inputKeys: { type: Array, default: () => [] },
inputMouse: { type: String },
},
computed: {
getMouseIconInnerSVG() {
getMouseIconInnerSVG(): string {
switch (this.inputMouse) {
case MouseInputInteraction.None: return `
<path style="fill:#888888;" d="M9,7c0,0.55-0.45,1-1,1l0,0C7.45,8,7,7.55,7,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
@ -140,6 +140,5 @@ export enum MouseInputInteraction {
}
},
},
})
export default class InputHint extends Vue {}
});
</script>

10
web-frontend/src/components/header/FileMenu.vue
View file

@ -48,11 +48,9 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
@Options({
components: {},
props: {},
})
export default class FileMenu extends Vue {}
export default defineComponent({
name: "FileMenu",
});
</script>

13
web-frontend/src/components/header/HeaderBar.vue
View file

@ -30,22 +30,17 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import { defineComponent } from "vue";
import FileMenu from "./FileMenu.vue";
import WindowTitle from "./WindowTitle.vue";
import WindowButtons from "./WindowButtons.vue";
@Options({
export default defineComponent({
name: "HeaderBar",
components: {
LayoutRow,
LayoutCol,
FileMenu,
WindowTitle,
WindowButtons,
},
props: {},
})
export default class HeaderBar extends Vue {}
});
</script>

9
web-frontend/src/components/header/WindowButtons.vue
View file

@ -46,13 +46,12 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
@Options({
components: {},
export default defineComponent({
name: "WindowButtons",
props: {
maximized: { type: Boolean, default: false },
},
})
export default class WindowButtons extends Vue {}
});
</script>

10
web-frontend/src/components/header/WindowTitle.vue
View file

@ -14,11 +14,9 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
@Options({
components: {},
props: {},
})
export default class WindowTitle extends Vue {}
export default defineComponent({
name: "WindowTitle",
});
</script>

10
web-frontend/src/components/layout/LayoutCol.vue
View file

@ -13,11 +13,9 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
@Options({
components: {},
props: {},
})
export default class LayoutCol extends Vue {}
export default defineComponent({
name: "LayoutCol",
});
</script>

10
web-frontend/src/components/layout/LayoutRow.vue
View file

@ -13,11 +13,9 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
@Options({
components: {},
props: {},
})
export default class LayoutRow extends Vue {}
export default defineComponent({
name: "LayoutRow",
});
</script>

9
web-frontend/src/components/panel-system/DockablePanel.vue
View file

@ -131,16 +131,15 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
@Options({
components: {},
export default defineComponent({
name: "DockablePanel",
props: {
tabConstantWidths: { type: Boolean, default: false },
tabCloseButtons: { type: Boolean, default: false },
tabLabels: { type: Array, required: true },
tabActiveIndex: { type: Number, required: true },
},
})
export default class DockablePanel extends Vue {}
});
</script>

9
web-frontend/src/components/panel-system/PanelArea.vue
View file

@ -39,18 +39,17 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import DockablePanel from "./DockablePanel.vue";
@Options({
export default defineComponent({
name: "PanelArea",
components: {
LayoutRow,
LayoutCol,
DockablePanel,
},
props: {},
})
export default class PanelArea extends Vue {}
});
</script>

9
web-frontend/src/components/window/MainWindow.vue
View file

@ -34,14 +34,15 @@
</style>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import HeaderBar from "../header/HeaderBar.vue";
import PanelArea from "../panel-system/PanelArea.vue";
import FooterBar from "../footer/FooterBar.vue";
@Options({
export default defineComponent({
name: "MainWindow",
components: {
LayoutRow,
LayoutCol,
@ -49,7 +50,5 @@ import FooterBar from "../footer/FooterBar.vue";
PanelArea,
FooterBar,
},
props: {},
})
export default class MainWindow extends Vue {}
});
</script>