fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 05:48:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Major frontend code cleanup (#452)

Browse Source 
Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed
This commit is contained in:
Keavon Chambers
2022-01-02 06:00:02 -08:00
parent 6662a9a04f
commit 2c8d70acb4
53 changed files with 842 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/IconButton.vue
+7 -7
View File
@@ -1,5 +1,5 @@
<template>
<button class="icon-button" :class="`size-${String(size)}`" @click="(e) => action(e)">
<button class="icon-button" :class="`size-${size}`" @click="(e) => action(e)">
<IconLabel :icon="icon" />
</button>
</template>
@@ -57,16 +57,16 @@
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import IconLabel, { IconName, IconSize } from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
props: {
action: { type: Function, required: true },
icon: { type: String, required: true },
size: { type: Number, required: true },
gapAfter: { type: Boolean, default: false },
action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
icon: { type: String as PropType<IconName>, required: true },
size: { type: Number as PropType<IconSize>, required: true },
gapAfter: { type: Boolean as PropType<boolean>, default: false },
},
components: { IconLabel },
});
frontend/src/components/widgets/buttons/PopoverButton.vue
+6 -15
View File
@@ -1,7 +1,7 @@
<template>
<div class="popover-button">
<IconButton :action="handleClick" :icon="icon" :size="16" data-hover-menu-spawner />
<FloatingMenu :type="MenuType.Popover" :direction="MenuDirection.Bottom" ref="floatingMenu">
<FloatingMenu :type="'Popover'" :direction="'Bottom'" ref="floatingMenu">
<slot></slot>
</FloatingMenu>
</div>
@@ -47,15 +47,12 @@
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
export enum PopoverButtonIcon {
"DropdownArrow" = "DropdownArrow",
"VerticalEllipsis" = "VerticalEllipsis",
}
export type PopoverButtonIcon = "DropdownArrow" | "VerticalEllipsis";
export default defineComponent({
components: {
@@ -63,8 +60,8 @@ export default defineComponent({
IconButton,
},
props: {
action: { type: Function, required: false },
icon: { type: String, default: PopoverButtonIcon.DropdownArrow },
action: { type: Function as PropType<() => void>, required: false },
icon: { type: String as PropType<PopoverButtonIcon>, default: "DropdownArrow" },
},
methods: {
handleClick() {
@@ -73,11 +70,5 @@ export default defineComponent({
if (this.action) this.action();
},
},
data() {
return {
MenuDirection,
MenuType,
};
},
});
</script>
frontend/src/components/widgets/buttons/TextButton.vue
+8 -8
View File
@@ -1,5 +1,5 @@
<template>
<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="action">
<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e) => action(e)">
<TextLabel>{{ label }}</TextLabel>
</button>
</template>
@@ -49,18 +49,18 @@
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, PropType } from "vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
export default defineComponent({
props: {
action: { type: Function, required: true },
label: { type: String, required: true },
emphasized: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
minWidth: { type: Number, default: 0 },
gapAfter: { type: Boolean, default: false },
action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
label: { type: String as PropType<string>, required: true },
emphasized: { type: Boolean as PropType<boolean>, default: false },
disabled: { type: Boolean as PropType<boolean>, default: false },
minWidth: { type: Number as PropType<number>, default: 0 },
gapAfter: { type: Boolean as PropType<boolean>, default: false },
},
components: { TextLabel },
});