adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-13 02:32:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

migrate select/multiselect components to Radix Vue primitives

Browse Source
This commit is contained in:
Gregor Vostrak
2026-02-02 00:56:06 +01:00
parent 44bcce97cf
commit bca1e8b3b5
24 changed files with 615 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
resources/js/Components/ui/select/SelectTrigger.vue
View File

@@ -4,19 +4,43 @@ import { ChevronDown } from 'lucide-vue-next';
import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<
SelectTriggerProps & { size?: 'small'; class?: HTMLAttributes['class'] }
>();
const props = withDefaults(
defineProps<
SelectTriggerProps & {
size?: 'small';
class?: HTMLAttributes['class'];
showChevron?: boolean;
variant?: 'default' | 'outline';
active?: boolean;
}
>(),
{
showChevron: true,
variant: 'default',
active: false,
}
);
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
const { class: _, showChevron: __, variant: ___, active: ____, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
const sizeClasses = computed(() => {
return props.size === 'small' ? 'h-[34px] text-sm' : 'h-[42px]';
return props.size === 'small' ? 'h-8 text-xs' : 'h-[42px] w-full text-sm';
});
const variantClasses = computed(() => {
if (props.variant === 'outline') {
if (props.active) {
return 'border border-accent-300/50 bg-accent-50 hover:bg-accent-100 dark:border-accent-300/50 dark:bg-accent-300/5 dark:hover:bg-accent-300/10';
}
return 'border shadow-xs hover:text-text-primary bg-card-background dark:bg-transparent border-input dark:border-input hover:bg-white/5';
}
return 'border border-input-border bg-input-background shadow-sm';
});
</script>
@@ -25,14 +49,15 @@ const sizeClasses = computed(() => {
v-bind="forwardedProps"
:class="
cn(
'flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input-border bg-input-background px-3 py-2.5 shadow-sm data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
'flex items-center justify-between gap-3 whitespace-nowrap rounded-md px-3 py-2.5 data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start font-medium transition-colors',
sizeClasses,
variantClasses,
props.class
)
">
<slot />
<SelectIcon as-child>
<ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
<SelectIcon v-if="showChevron" as-child>
<ChevronDown class="w-4 h-4 text-icon-default shrink-0" />
</SelectIcon>
</SelectTrigger>
</template>