Vue/TS bug and bad typing fixes

This commit is contained in:
Keavon Chambers
2022-01-02 20:02:35 -08:00
parent 2c8d70acb4
commit 5518384ec1
20 changed files with 319 additions and 251 deletions
@@ -1,6 +1,6 @@
<template>
<div class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" />
<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
<label :for="`checkbox-input-${id}`">
<div class="checkbox-box">
<IconLabel :icon="icon" />
@@ -82,7 +82,9 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import IconLabel, { IconName } from "@/components/widgets/labels/IconLabel.vue";
import { IconName } from "@/utilities/icons";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
data() {
@@ -1,14 +1,14 @@
<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` }" @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:activeEntry="activeEntry"
@update:activeEntry="(newActiveEntry) => activeEntryChanged(newActiveEntry)"
@widthChanged="(newWidth) => onWidthChanged(newWidth)"
@update:activeEntry="(newActiveEntry: typeof MenuListEntry) => activeEntryChanged(newActiveEntry)"
@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
:menuEntries="menuEntries"
:direction="'Bottom'"
:drawIcon="drawIcon"
@@ -5,12 +5,12 @@
<IconLabel :icon="'GraphiteLogo'" />
</div>
</div>
<div class="entry-container" v-for="entry in menuEntries" :key="entry">
<div class="entry-container" v-for="(entry, index) in menuEntries" :key="index">
<div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
<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) => setEntryRefs(entry, ref)" />
</div>
</div>
</template>
@@ -1,6 +1,6 @@
<template>
<div class="optional-input">
<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" :icon="icon" />
<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" />
</div>
</template>
@@ -36,8 +36,9 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
import { IconName } from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
props: {
@@ -69,13 +69,15 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
export interface RadioEntryData {
value?: string;
label?: string;
icon?: string;
icon?: IconName;
tooltip?: string;
action?: () => void;
}
@@ -31,8 +31,9 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IconName } from "@/utilities/icons";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import { IconName } from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
components: { IconButton },