fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-20 11:28:30 +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 1954aceb0e
commit 7e0cbb60b4
53 changed files with 842 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/widgets/inputs/DropdownInput.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="dropdown-input">
<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="clickDropdownBox" data-hover-menu-spawner>
<div class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px`, disabled: 'disabled' }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
<IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
<span>{{ activeEntry.label }}</span>
<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
</div>
<MenuList
v-model:active-entry="activeEntry"
@update:activeEntry="activeEntryChanged"
@width-changed="onWidthChanged"
v-model:activeEntry="activeEntry"
@update:activeEntry="(newActiveEntry) => activeEntryChanged(newActiveEntry)"
@widthChanged="(newWidth) => onWidthChanged(newWidth)"
:menuEntries="menuEntries"
:direction="MenuDirection.Bottom"
:direction="'Bottom'"
:drawIcon="drawIcon"
:scrollable="true"
ref="menuList"
@@ -90,21 +90,19 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
props: {
menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
selectedIndex: { type: Number, required: true },
drawIcon: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
selectedIndex: { type: Number as PropType<number>, required: true },
drawIcon: { type: Boolean as PropType<boolean>, default: false },
disabled: { type: Boolean as PropType<boolean>, default: false },
},
data() {
return {
activeEntry: this.menuEntries.flat()[this.selectedIndex],
MenuDirection,
minWidth: 0,
};
},