Skip to content

Commit 68a3b7b

Browse files
author
mdatelle
committed
refactor: fix unraid-ui typescript errors, amd move usePortal to unraid-ui dropdown and select components
1 parent 39387ba commit 68a3b7b

File tree

11 files changed

+133
-52
lines changed

11 files changed

+133
-52
lines changed

‎unraid-ui/src/components/common/dropdown-menu/DropdownMenuContent.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import useTeleport from '@/composables/useTeleport';
23
import { cn } from '@/lib/utils';
34
import {
45
DropdownMenuContent,
@@ -9,6 +10,8 @@ import {
910
} from 'reka-ui';
1011
import { computed, type HTMLAttributes } from 'vue';
1112
13+
const { teleportTarget } = useTeleport();
14+
1215
const props = withDefaults(
1316
defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
1417
{
@@ -26,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
2629
</script>
2730

2831
<template>
29-
<DropdownMenuPortal>
32+
<DropdownMenuPortal :to="teleportTarget as HTMLElement">
3033
<DropdownMenuContent
3134
v-bind="forwarded"
3235
side="bottom"

‎unraid-ui/src/components/common/tabs/Tabs.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script setup lang="ts">
2-
import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
3-
import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
2+
import { TabsRoot, useForwardPropsEmits } from 'radix-vue';
3+
import type { TabsRootEmits, TabsRootProps } from 'radix-vue';
4+
import type { HTMLAttributes } from 'vue';
45
5-
const props = defineProps<TabsRootProps>()
6-
const emits = defineEmits<TabsRootEmits>()
6+
const props = defineProps<TabsRootProps>();
7+
const emits = defineEmits<TabsRootEmits>();
78
8-
const forwarded = useForwardPropsEmits(props, emits)
9+
const forwarded = useForwardPropsEmits(props, emits) as TabsRootProps & HTMLAttributes;
910
</script>
1011

1112
<template>

‎unraid-ui/src/components/common/tooltip/Tooltip.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<script setup lang="ts">
2-
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
2+
import {
3+
TooltipRoot,
4+
useForwardPropsEmits,
5+
type TooltipRootEmits,
6+
type TooltipRootProps,
7+
} from 'radix-vue';
8+
import type { HTMLAttributes } from 'vue';
39
4-
const props = defineProps<TooltipRootProps>()
5-
const emits = defineEmits<TooltipRootEmits>()
10+
const props = defineProps<TooltipRootProps>();
11+
const emits = defineEmits<TooltipRootEmits>();
612
7-
const forwarded = useForwardPropsEmits(props, emits)
13+
const forwarded = useForwardPropsEmits(props, emits) as TooltipRootProps & HTMLAttributes;
814
</script>
915

1016
<template>

‎unraid-ui/src/components/form/select/SelectContent.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,14 @@ defineOptions({
1616
inheritAttrs: false,
1717
});
1818
19+
const { teleportTarget } = useTeleport();
20+
1921
const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
22+
forceMount: false,
2023
position: 'popper',
24+
to: undefined,
2125
});
26+
2227
const emits = defineEmits<SelectContentEmits>();
2328
2429
const delegatedProps = computed(() => {
@@ -27,15 +32,11 @@ const delegatedProps = computed(() => {
2732
return delegated;
2833
});
2934
30-
const teleportTarget = useTeleport();
31-
32-
console.log('teleportTarget', teleportTarget);
33-
3435
const forwarded = useForwardPropsEmits(delegatedProps, emits);
3536
</script>
3637

3738
<template>
38-
<SelectPortal :defer="true" :to="teleportTarget as unknown as HTMLElement">
39+
<SelectPortal :force-mount="forceMount" :to="teleportTarget as HTMLElement">
3940
<SelectContent
4041
v-bind="{ ...forwarded, ...$attrs }"
4142
:class="

‎unraid-ui/src/composables/useTeleport.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { ref, onMounted } from "vue";
1+
import { onMounted, ref } from 'vue';
22

33
const useTeleport = () => {
4-
const teleportTarget = ref<string | HTMLElement | Element>("#modals");
4+
const teleportTarget = ref<string | HTMLElement | Element>('#modals');
55

66
const determineTeleportTarget = () => {
7-
const myModalsComponent = document.querySelector("unraid-modals");
7+
const myModalsComponent = document.querySelector('unraid-modals');
88
if (!myModalsComponent?.shadowRoot) return;
99

10-
const potentialTarget = myModalsComponent.shadowRoot.querySelector("#modals");
10+
const potentialTarget = myModalsComponent.shadowRoot.querySelector('#modals');
1111
if (!potentialTarget) return;
1212

1313
teleportTarget.value = potentialTarget;
14-
console.log("[determineTeleportTarget] teleportTarget", teleportTarget.value);
14+
console.log('[determineTeleportTarget] teleportTarget', teleportTarget.value);
1515
};
1616

1717
onMounted(() => {

‎unraid-ui/src/forms/Select.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const onSelectOpen = () => {
5252
<span v-else>{{ control.schema.default ?? 'Select an option' }}</span>
5353
</SelectTrigger>
5454
<!-- The content includes the selectable options -->
55-
<SelectContent :to="teleportTarget">
55+
<SelectContent :to="teleportTarget as HTMLElement">
5656
<SelectItem v-for="option in options" :key="option.value" :value="option.value">
5757
<SelectItemText>{{ option.label }}</SelectItemText>
5858
</SelectItem>

‎unraid-ui/stories/components/common/Sheet.stories.ts‎

Lines changed: 88 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,37 @@
1-
import type { Meta, StoryObj } from "@storybook/vue3";
2-
import SheetComponent from "../../../src/components/common/sheet/Sheet.vue";
3-
import SheetTrigger from "../../../src/components/common/sheet/SheetTrigger.vue";
4-
import SheetContent from "../../../src/components/common/sheet/SheetContent.vue";
5-
import SheetHeader from "../../../src/components/common/sheet/SheetHeader.vue";
6-
import SheetTitle from "../../../src/components/common/sheet/SheetTitle.vue";
7-
import SheetDescription from "../../../src/components/common/sheet/SheetDescription.vue";
8-
import SheetFooter from "../../../src/components/common/sheet/SheetFooter.vue";
9-
import Button from "../../../src/components/common/button/Button.vue";
1+
import type { Meta, StoryObj } from '@storybook/vue3';
2+
import { h } from 'vue';
3+
import Button from '../../../src/components/common/button/Button.vue';
4+
import SheetComponent from '../../../src/components/common/sheet/Sheet.vue';
5+
import SheetContent from '../../../src/components/common/sheet/SheetContent.vue';
6+
import SheetDescription from '../../../src/components/common/sheet/SheetDescription.vue';
7+
import SheetFooter from '../../../src/components/common/sheet/SheetFooter.vue';
8+
import SheetHeader from '../../../src/components/common/sheet/SheetHeader.vue';
9+
import SheetTitle from '../../../src/components/common/sheet/SheetTitle.vue';
10+
import SheetTrigger from '../../../src/components/common/sheet/SheetTrigger.vue';
11+
import Select from '../../../src/components/form/select/Select.vue';
12+
import SelectContent from '../../../src/components/form/select/SelectContent.vue';
13+
import SelectItem from '../../../src/components/form/select/SelectItem.vue';
14+
import SelectTrigger from '../../../src/components/form/select/SelectTrigger.vue';
15+
import SelectValue from '../../../src/components/form/select/SelectValue.vue';
1016

1117
const meta = {
12-
title: "Components/Common",
18+
title: 'Components/Common',
1319
component: SheetComponent,
14-
subcomponents: {
20+
subcomponents: {
1521
SheetTrigger,
1622
SheetContent,
1723
SheetHeader,
1824
SheetTitle,
1925
SheetDescription,
20-
SheetFooter
26+
SheetFooter,
27+
Select,
2128
},
29+
decorators: [
30+
(story) => ({
31+
components: { story },
32+
template: '<div style="min-height: 100vh;"><story /></div>',
33+
}),
34+
],
2235
} satisfies Meta<typeof SheetComponent>;
2336

2437
export default meta;
@@ -82,3 +95,66 @@ export const Sheet: Story = {
8295
`,
8396
}),
8497
};
98+
99+
export const SheetWithSelect: Story = {
100+
render: () => ({
101+
components: {
102+
SheetComponent,
103+
SheetTrigger,
104+
SheetContent,
105+
SheetHeader,
106+
SheetTitle,
107+
SheetDescription,
108+
SheetFooter,
109+
Button,
110+
Select,
111+
SelectTrigger,
112+
SelectContent,
113+
SelectItem,
114+
SelectValue,
115+
},
116+
data() {
117+
return {
118+
theme: 'light',
119+
};
120+
},
121+
template: `
122+
<div class="inline-flex items-center gap-4 p-4">
123+
<SheetComponent>
124+
<SheetTrigger>
125+
<Button variant="outline">Open Form Sheet</Button>
126+
</SheetTrigger>
127+
<SheetContent side="right">
128+
<SheetHeader>
129+
<SheetTitle>User Preferences</SheetTitle>
130+
<SheetDescription>
131+
Configure your user preferences using the form below.
132+
</SheetDescription>
133+
</SheetHeader>
134+
<div class="py-6">
135+
<div class="space-y-4">
136+
<div class="space-y-2">
137+
<label class="text-sm font-medium">Theme</label>
138+
<Select v-model="theme">
139+
<SelectTrigger>
140+
<SelectValue placeholder="Select a theme" />
141+
</SelectTrigger>
142+
<SelectContent>
143+
<SelectItem value="light">Light</SelectItem>
144+
<SelectItem value="dark">Dark</SelectItem>
145+
<SelectItem value="system">System</SelectItem>
146+
</SelectContent>
147+
</Select>
148+
</div>
149+
</div>
150+
</div>
151+
<SheetFooter>
152+
<Button variant="outline">Cancel</Button>
153+
<Button>Save changes</Button>
154+
</SheetFooter>
155+
</SheetContent>
156+
</SheetComponent>
157+
</div>
158+
`,
159+
}),
160+
};

‎unraid-ui/tsconfig.app.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"compilerOptions": {
3-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
43
"target": "ES2020",
54
"useDefineForClassFields": true,
65
"module": "ESNext",

‎unraid-ui/tsconfig.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@
2828
"./tailwind.config.ts",
2929
"src/theme/**/*.ts"
3030
],
31-
"exclude": ["node_modules", "**/*.copy.vue", "**/*copy.vue"],
31+
"exclude": [
32+
"node_modules",
33+
"**/*.copy.vue",
34+
"**/*copy.vue",
35+
"**/*.test.ts",
36+
"**/*.spec.ts",
37+
"**/*.test.tsx",
38+
"**/*.spec.tsx"
39+
],
3240
"references": [{ "path": "./tsconfig.test.json" }]
3341
}

‎unraid-ui/tsconfig.test.json‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,9 @@
44
"composite": true,
55
"emitDeclarationOnly": true,
66
"outDir": "./dist/test",
7-
"types": [
8-
"node",
9-
"happy-dom",
10-
"vitest/globals",
11-
"@vue/test-utils",
12-
"@testing-library/vue"
13-
]
7+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.test.tsbuildinfo",
8+
"types": ["node", "happy-dom", "vitest/globals", "@vue/test-utils", "@testing-library/vue"]
149
},
15-
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "tailwind.config.ts"],
10+
"include": ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.test.tsx", "src/**/*.spec.tsx"],
1611
"exclude": ["node_modules", "**/*.copy.vue", "**/*copy.vue"]
1712
}

0 commit comments

Comments
 (0)