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

Fix all remaining Vue/TS errors flagged in Volar

Browse Source
This commit is contained in:
Keavon Chambers
2022-01-15 17:24:58 -08:00
parent 56599db753
commit e877eea457
14 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/widgets/buttons/IconButton.vue
View File

@@ -1,5 +1,5 @@
<template>
<button class="icon-button" :class="`size-${size}`" @click="(e) => action(e)">
<button class="icon-button" :class="`size-${size}`" @click="(e: MouseEvent) => action(e)">
<IconLabel :icon="icon" />
</button>
</template>

4
frontend/src/components/widgets/buttons/PopoverButton.vue
View File

@@ -49,11 +49,11 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { PopoverButtonIcon } from "@/utilities/widgets";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
export type PopoverButtonIcon = "DropdownArrow" | "VerticalEllipsis";
export default defineComponent({
components: {
FloatingMenu,

2
frontend/src/components/widgets/buttons/TextButton.vue
View File

@@ -1,5 +1,5 @@
<template>
<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e) => action(e)">
<button class="text-button" :class="{ emphasized, disabled }" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" @click="(e: MouseEvent) => action(e)">
<TextLabel>{{ label }}</TextLabel>
</button>
</template>

6
frontend/src/components/widgets/floating-menus/ColorPicker.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="color-picker">
<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e) => onPointerDown(e)">
<div class="saturation-picker" ref="saturationPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="saturationCursor" class="selection-circle"></div>
</div>
<div class="hue-picker" ref="huePicker" @pointerdown="(e) => onPointerDown(e)">
<div class="hue-picker" ref="huePicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="hueCursor" class="selection-pincers"></div>
</div>
<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e) => onPointerDown(e)">
<div class="opacity-picker" ref="opacityPicker" @pointerdown="(e: PointerEvent) => onPointerDown(e)">
<div ref="opacityCursor" class="selection-pincers"></div>
</div>
</div>

2
frontend/src/components/widgets/floating-menus/MenuList.vue
View File

@@ -29,7 +29,7 @@
:direction="'TopRight'"
:menuEntries="entry.children"
v-bind="{ defaultAction, minWidth, drawIcon, scrollable }"
:ref="(ref) => setEntryRefs(entry, ref)"
:ref="(ref: any) => setEntryRefs(entry, ref)"
/>
</div>
</template>

2
frontend/src/components/widgets/inputs/CheckboxInput.vue
View File

@@ -98,7 +98,7 @@ export default defineComponent({
},
},
props: {
checked: { type: Boolean as PropType<boolean>, required: true },
checked: { type: Boolean as PropType<boolean>, default: false },
icon: { type: String as PropType<IconName>, default: "Checkmark" },
outlineStyle: { type: Boolean as PropType<boolean>, default: false },
},

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

@@ -7,7 +7,7 @@
</div>
<MenuList
v-model:activeEntry="activeEntry"
@update:activeEntry="(newActiveEntry: typeof MenuListEntry) => activeEntryChanged(newActiveEntry)"
@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
:menuEntries="menuEntries"
:direction="'Bottom'"
@@ -93,6 +93,11 @@ import { defineComponent, PropType } from "vue";
import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
// Satisfies Volar (https://github.com/johnsoncodehk/volar/issues/596)
declare global {
const MENU_LIST_ENTRY: MenuListEntry;
}
export default defineComponent({
props: {
menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },

2
frontend/src/components/widgets/inputs/MenuBarInput.vue
View File

@@ -10,7 +10,7 @@
<IconLabel :icon="entry.icon" v-if="entry.icon" />
<span v-if="entry.label">{{ entry.label }}</span>
</div>
<MenuList :menuEntries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref) => setEntryRefs(entry, ref)" />
<MenuList :menuEntries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref: any) => setEntryRefs(entry, ref)" />
</div>
</div>
</template>

3
frontend/src/components/widgets/inputs/NumberInput.vue
View File

@@ -152,8 +152,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
export type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
export type IncrementDirection = "Decrease" | "Increase";
import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets";
export default defineComponent({
props: {

11
frontend/src/components/widgets/inputs/SwatchPairInput.vue
View File

@@ -3,13 +3,13 @@
<div class="secondary swatch">
<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
<ColorPicker @update:color="(color) => secondaryColorChanged(color)" :color="secondaryColor" />
<ColorPicker @update:color="(color: RGBA_) => secondaryColorChanged(color)" :color="secondaryColor" />
</FloatingMenu>
</div>
<div class="primary swatch">
<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
<ColorPicker @update:color="(color) => primaryColorChanged(color)" :color="primaryColor" />
<ColorPicker @update:color="(color: RGBA_) => primaryColorChanged(color)" :color="primaryColor" />
</FloatingMenu>
</div>
</div>
@@ -68,12 +68,17 @@
<script lang="ts">
import { defineComponent } from "vue";
import { RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
import { type RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
import { rgbaToDecimalRgba } from "@/utilities/color";
import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
// Satisfies Volar (https://github.com/johnsoncodehk/volar/issues/596)
declare global {
type RGBA_ = RGBA;
}
export default defineComponent({
inject: ["editor"],
components: {

2
frontend/src/components/widgets/options/ToolOptions.vue
View File

@@ -9,7 +9,7 @@
</PopoverButton>
<NumberInput
v-if="option.kind === 'NumberInput'"
@update:value="(value) => updateToolOptions(option.optionPath, value)"
@update:value="(value: number) => updateToolOptions(option.optionPath, value)"
:title="option.tooltip"
:value="getToolOption(option.optionPath)"
v-bind="option.props"