versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: ⬆️ Upgrade to the latest Shadcn-Vue version
Some checks failed
CodeQL / Analyze (javascript) (push) Failing after 2m30s
Details
Deploy to GitHub Pages / build (push) Failing after 6s
Details
Deploy to GitHub Pages / deploy (push) Has been skipped
Details
Docker / build (push) Failing after 5s
Details
Mirror to Codeberg / Mirror (push) Failing after 0s
Details

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-03-28 01:16:24 +01:00
parent 7649ecfb80
commit 092bce0f24
No known key found for this signature in database
169 changed files with 1860 additions and 1088 deletions
Download patch file Download diff file Expand all files Collapse all files

106
components/ui/sidebar/Sidebar.vue
View file

@ -1,30 +1,100 @@
<script setup lang="ts">
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import type { SidebarProps } from ".";
import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils";
defineOptions({
inheritAttrs: false,
});
const props = withDefaults(
defineProps<{
side?: "left" | "right";
variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none";
class?: HTMLAttributes["class"];
}>(),
{
side: "left",
variant: "sidebar",
collapsible: "offcanvas",
},
);
const props = withDefaults(defineProps<SidebarProps>(), {
side: "left",
variant: "sidebar",
collapsible: "offcanvas",
});
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
</script>
<template>
<aside
:class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground p-1', props.class)"
v-bind="$attrs" data-component="sidebar">
<div
v-if="collapsible === 'none'"
:class="
cn(
'flex h-dvh w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
props.class
)
"
v-bind="$attrs"
>
<slot />
</aside>
</div>
<Sheet
v-else-if="isMobile"
:open="openMobile"
v-bind="$attrs"
@update:open="setOpenMobile"
>
<SheetContent
data-sidebar="sidebar"
data-mobile="true"
:side="side"
class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
:style="{
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
}"
>
<div class="flex h-full w-full flex-col">
<slot />
</div>
</SheetContent>
</Sheet>
<div
v-else
class="group peer hidden md:block"
:data-state="state"
:data-collapsible="state === 'collapsed' ? collapsible : ''"
:data-variant="variant"
:data-side="side"
>
<!-- This is what handles the sidebar gap on desktop -->
<div
:class="
cn(
'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
)
"
/>
<div
:class="
cn(
'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
props.class
)
"
v-bind="$attrs"
>
<div
data-sidebar="sidebar"
class="flex h-full w-full flex-col text-sidebar-foreground bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
>
<slot />
</div>
</div>
</div>
</template>

5
components/ui/sidebar/SidebarGroupAction.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import type { PrimitiveProps } from "radix-vue";
import { Primitive } from "radix-vue";
import type { PrimitiveProps } from "reka-ui";
import { Primitive } from "reka-ui";
import type { HTMLAttributes } from "vue";
const props = defineProps<
@ -18,7 +18,6 @@ const props = defineProps<
:as-child="asChild"
:class="cn(
'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
// Increases the hit area of the button on mobile.
'after:absolute after:-inset-2 after:md:hidden',
'group-data-[collapsible=icon]:hidden',
props.class,

4
components/ui/sidebar/SidebarGroupLabel.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import type { PrimitiveProps } from "radix-vue";
import { Primitive } from "radix-vue";
import type { PrimitiveProps } from "reka-ui";
import { Primitive } from "reka-ui";
import type { HTMLAttributes } from "vue";
const props = defineProps<

2
components/ui/sidebar/SidebarInput.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import Input from "~/components/ui/input/Input.vue";
const props = defineProps<{
class?: HTMLAttributes["class"];

26
components/ui/sidebar/SidebarInset.vue
View file

@ -1,30 +1,22 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import { SettingIds } from "~/settings";
const props = defineProps<{
class?: HTMLAttributes["class"];
}>();
const bgSetting = useSetting(SettingIds.BackgroundURL);
const bgImage = computed(() =>
bgSetting.value.value && URL.canParse(bgSetting.value.value as string)
? bgSetting.value.value
: "/images/banner.webp",
);
</script>
<template>
<main :class="cn(
'relative flex min-h-svh max-w-full flex-1 flex-col bg-background',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:overflow-hidden md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow bg-cover bg-center bg-no-repeat',
props.class,
)" :style="{
backgroundImage: `url('${bgImage}')`,
}">
<!-- Overlay for the background image -->
<div class="absolute -z-10 inset-0 bg-black/20" />
<main
:class="
cn(
'relative flex min-h-svh flex-1 flex-col bg-background',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
props.class
)
"
>
<slot />
</main>
</template>

3
components/ui/sidebar/SidebarMenuAction.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import { Primitive, type PrimitiveProps } from "radix-vue";
import { Primitive, type PrimitiveProps } from "reka-ui";
import type { HTMLAttributes } from "vue";
const props = withDefaults(
@ -21,7 +21,6 @@ const props = withDefaults(
data-sidebar="menu-action"
:class="cn(
'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
// Increases the hit area of the button on mobile.
'after:absolute after:-inset-2 after:md:hidden',
'peer-data-[size=sm]/menu-button:top-1',
'peer-data-[size=default]/menu-button:top-1.5',

8
components/ui/sidebar/SidebarMenuButton.vue
View file

@ -1,8 +1,10 @@
<script setup lang="ts">
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { type Component, computed } from "vue";
import Tooltip from "~/components/ui/tooltip/Tooltip.vue";
import TooltipContent from "~/components/ui/tooltip/TooltipContent.vue";
import TooltipTrigger from "~/components/ui/tooltip/TooltipTrigger.vue";
import SidebarMenuButtonChild, {
type SidebarMenuButtonProps,
} from "./SidebarMenuButtonChild.vue";

2
components/ui/sidebar/SidebarMenuButtonChild.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import { Primitive, type PrimitiveProps } from "radix-vue";
import { Primitive, type PrimitiveProps } from "reka-ui";
import type { HTMLAttributes } from "vue";
import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from ".";

2
components/ui/sidebar/SidebarMenuSkeleton.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { type HTMLAttributes, computed } from "vue";
import Skeleton from "~/components/ui/skeleton/Skeleton.vue";
const props = defineProps<{
showIcon?: boolean;

4
components/ui/sidebar/SidebarMenuSubButton.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import type { PrimitiveProps } from "radix-vue";
import { Primitive } from "radix-vue";
import type { PrimitiveProps } from "reka-ui";
import { Primitive } from "reka-ui";
import type { HTMLAttributes } from "vue";
const props = withDefaults(

5
components/ui/sidebar/SidebarProvider.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import { useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
import { TooltipProvider } from "radix-vue";
import { TooltipProvider } from "reka-ui";
import { type HTMLAttributes, type Ref, computed, ref } from "vue";
import {
SIDEBAR_COOKIE_MAX_AGE,
@ -86,7 +86,8 @@ provideSidebarContext({
'--sidebar-width': SIDEBAR_WIDTH,
'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
}"
:class="cn('group/sidebar-wrapper flex h-svh overflow-hidden w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
:class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
v-bind="$attrs"
>
<slot />
</div>

2
components/ui/sidebar/SidebarSeparator.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import Separator from "~/components/ui/separator/Separator.vue";
const props = defineProps<{
class?: HTMLAttributes["class"];

4
components/ui/sidebar/SidebarTrigger.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { PanelLeft } from "lucide-vue-next";
import type { HTMLAttributes } from "vue";
import Button from "~/components/ui/button/Button.vue";
import { useSidebar } from "./utils";
const props = defineProps<{
@ -17,7 +17,7 @@ const { toggleSidebar } = useSidebar();
data-sidebar="trigger"
variant="ghost"
size="icon"
:class="cn('size-7', props.class)"
:class="cn('h-7 w-7', props.class)"
@click="toggleSidebar"
>
<PanelLeft />

14
components/ui/sidebar/index.ts
View file

@ -1,4 +1,12 @@
import { type VariantProps, cva } from "class-variance-authority";
import type { HTMLAttributes } from "vue";
export interface SidebarProps {
side?: "left" | "right";
variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none";
class?: HTMLAttributes["class"];
}
export { default as Sidebar } from "./Sidebar.vue";
export { default as SidebarContent } from "./SidebarContent.vue";
@ -37,9 +45,9 @@ export const sidebarMenuButtonVariants = cva(
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
},
size: {
default: "h-8 text-sm",
sm: "h-7 text-xs",
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
default: "text-sm",
sm: "text-xs",
lg: "text-sm group-data-[collapsible=icon]:!p-0",
},
},
defaultVariants: {

2
components/ui/sidebar/utils.ts
View file

@ -1,4 +1,4 @@
import { createContext } from "radix-vue";
import { createContext } from "reka-ui";
import type { ComputedRef, Ref } from "vue";
export const SIDEBAR_COOKIE_NAME = "sidebar:state";