Skip to content

Commit 39f8dfb

Browse files
author
mdatelle
committed
refactor: update shadcn select to latest and use teleport in select story
1 parent eddc407 commit 39f8dfb

File tree

7 files changed

+47
-37
lines changed

7 files changed

+47
-37
lines changed

‎pnpm-lock.yaml‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 10 additions & 17 deletions
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
SelectContent,
@@ -15,21 +16,9 @@ defineOptions({
1516
inheritAttrs: false,
1617
});
1718
18-
const props = withDefaults(
19-
defineProps<
20-
SelectContentProps & {
21-
class?: HTMLAttributes['class'];
22-
disabled?: boolean;
23-
forceMount?: boolean;
24-
to?: string | HTMLElement | Element;
25-
}
26-
>(),
27-
{
28-
position: 'popper',
29-
class: undefined,
30-
to: '#modals',
31-
}
32-
);
19+
const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
20+
position: 'popper',
21+
});
3322
const emits = defineEmits<SelectContentEmits>();
3423
3524
const delegatedProps = computed(() => {
@@ -38,11 +27,15 @@ const delegatedProps = computed(() => {
3827
return delegated;
3928
});
4029
30+
const teleportTarget = useTeleport();
31+
32+
console.log('teleportTarget', teleportTarget);
33+
4134
const forwarded = useForwardPropsEmits(delegatedProps, emits);
4235
</script>
4336

4437
<template>
45-
<SelectPortal :disabled="disabled" :force-mount="forceMount" :to="to as HTMLElement">
38+
<SelectPortal :defer="true" :to="teleportTarget as unknown as HTMLElement">
4639
<SelectContent
4740
v-bind="{ ...forwarded, ...$attrs }"
4841
:class="
@@ -60,7 +53,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
6053
cn(
6154
'p-1',
6255
position === 'popper' &&
63-
'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]'
56+
'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]'
6457
)
6558
"
6659
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps);
2020
v-bind="forwardedProps"
2121
:class="
2222
cn(
23-
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-4.5 py-3 text-base ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
23+
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
2424
props.class
2525
)
2626
"

‎unraid-ui/src/components/form/select/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
export { default as Select } from './Select.vue'
2-
export { default as SelectValue } from './SelectValue.vue'
3-
export { default as SelectTrigger } from './SelectTrigger.vue'
42
export { default as SelectContent } from './SelectContent.vue'
53
export { default as SelectGroup } from './SelectGroup.vue'
64
export { default as SelectItem } from './SelectItem.vue'
75
export { default as SelectItemText } from './SelectItemText.vue'
86
export { default as SelectLabel } from './SelectLabel.vue'
9-
export { default as SelectSeparator } from './SelectSeparator.vue'
10-
export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
117
export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
8+
export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
9+
export { default as SelectSeparator } from './SelectSeparator.vue'
10+
export { default as SelectTrigger } from './SelectTrigger.vue'
11+
export { default as SelectValue } from './SelectValue.vue'

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup lang="ts">
2-
import { computed } from 'vue';
3-
42
import {
53
Select,
64
SelectContent,
@@ -10,11 +8,10 @@ import {
108
SelectValue,
119
} from '@/components/form/select';
1210
import useTeleport from '@/composables/useTeleport';
13-
import { useJsonFormsControl } from '@jsonforms/vue';
14-
1511
import type { ControlElement } from '@jsonforms/core';
12+
import { useJsonFormsControl } from '@jsonforms/vue';
1613
import type { RendererProps } from '@jsonforms/vue';
17-
14+
import { computed } from 'vue';
1815
import ControlLayout from './ControlLayout.vue';
1916
2017
const props = defineProps<RendererProps<ControlElement>>();
@@ -29,8 +26,8 @@ const options = computed(() => {
2926
}));
3027
});
3128
32-
const onChange = (value: string) => {
33-
handleChange(control.value.path, value);
29+
const onChange = (value: unknown) => {
30+
handleChange(control.value.path, String(value));
3431
};
3532
3633
// Without this, the select dropdown will not be visible, unless it's already in a teleported context.

‎unraid-ui/stories/components/form/Select.stories.ts‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Meta, StoryObj } from "@storybook/vue3";
1+
import type { Meta, StoryObj } from '@storybook/vue3';
22
import {
33
Select as SelectComponent,
44
SelectContent,
@@ -7,10 +7,28 @@ import {
77
SelectLabel,
88
SelectTrigger,
99
SelectValue,
10-
} from "../../../src/components/form/select";
10+
} from '../../../src/components/form/select';
11+
12+
// Define the custom element for modals
13+
class ModalsContainer extends HTMLElement {
14+
constructor() {
15+
super();
16+
const shadow = this.attachShadow({ mode: 'open' });
17+
const parent = document.createElement('div');
18+
const container = document.createElement('div');
19+
container.id = 'modals';
20+
21+
parent.appendChild(container);
22+
23+
shadow.appendChild(parent);
24+
}
25+
}
26+
27+
// Register the custom element
28+
customElements.define('unraid-modals', ModalsContainer);
1129

1230
const meta = {
13-
title: "Components/Form/Select",
31+
title: 'Components/Form/Select',
1432
component: SelectComponent,
1533
} satisfies Meta<typeof SelectComponent>;
1634

@@ -34,7 +52,7 @@ export const Select: Story = {
3452
},
3553
template: `
3654
<div>
37-
<div id="modals"></div>
55+
<unraid-modals></unraid-modals>
3856
<SelectComponent>
3957
<SelectTrigger class="w-[180px]">
4058
<SelectValue placeholder="Select a fruit" />
@@ -70,7 +88,7 @@ export const Grouped: Story = {
7088
},
7189
template: `
7290
<div>
73-
<div id="modals"></div>
91+
<unraid-modals></unraid-modals>
7492
<SelectComponent>
7593
<SelectTrigger class="w-[180px]">
7694
<SelectValue placeholder="Select a food" />

‎web/components/Notifications/Sidebar.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -178,15 +178,16 @@ const prepareToViewNotifications = () => {
178178

179179
<Select
180180
@update:model-value="
181-
(val: string) => {
182-
importance = val === 'all' ? undefined : (val as Importance);
181+
(val: unknown) => {
182+
const strVal = String(val);
183+
importance = strVal === 'all' || !strVal ? undefined : (strVal as Importance);
183184
}
184185
"
185186
>
186187
<SelectTrigger class="h-auto">
187188
<SelectValue class="text-gray-400 leading-6" placeholder="Filter By" />
188189
</SelectTrigger>
189-
<SelectContent :to="teleportTarget">
190+
<SelectContent>
190191
<SelectGroup>
191192
<SelectLabel>Notification Types</SelectLabel>
192193
<SelectItem value="all">All Types</SelectItem>

0 commit comments

Comments
 (0)