matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Linting

Browse Source
This commit is contained in:
Robert Kossessa
2024-03-02 18:25:31 +01:00
parent ff891dfab9
commit eb30062891
33 changed files with 219 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
postcss.config.js
View File

@@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
autoprefixer: {}
}
}

5
src/renderer/src/components/ui/.eslintrc Normal file
View File

@@ -0,0 +1,5 @@
{
"rules": {
"@typescript-eslint/no-unused-vars": "off"
}
}

13
src/renderer/src/components/ui/badge/index.ts
View File

@@ -7,19 +7,18 @@ export const badgeVariants = cva(
{
variants: {
variant: {
default:
'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
outline: 'text-foreground',
},
outline: 'text-foreground'
}
},
defaultVariants: {
variant: 'default',
},
},
variant: 'default'
}
}
)
export type BadgeVariants = VariantProps<typeof badgeVariants>

2
src/renderer/src/components/ui/button/Button.vue
View File

@@ -12,7 +12,7 @@ interface Props extends PrimitiveProps {
}
const props = withDefaults(defineProps<Props>(), {
as: 'button',
as: 'button'
})
</script>

18
src/renderer/src/components/ui/button/index.ts
View File

@@ -8,27 +8,25 @@ export const buttonVariants = cva(
variants: {
variant: {
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
outline:
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: 'h-9 px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs',
lg: 'h-10 rounded-md px-8',
icon: 'h-9 w-9',
},
icon: 'size-9'
}
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
size: 'default'
}
}
)
export type ButtonVariants = VariantProps<typeof buttonVariants>

5
src/renderer/src/components/ui/collapsible/CollapsibleContent.vue
View File

@@ -5,7 +5,10 @@ const props = defineProps<CollapsibleContentProps>()
</script>
<template>
<CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
<CollapsibleContent
v-bind="props"
class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
>
<slot />
</CollapsibleContent>
</template>

9
src/renderer/src/components/ui/command/Command.vue
View File

@@ -6,7 +6,7 @@ import { cn } from '@renderer/lib/utils'
const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
open: true,
modelValue: '',
modelValue: ''
})
const emits = defineEmits<ComboboxRootEmits>()
@@ -23,7 +23,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template>
<ComboboxRoot
v-bind="forwarded"
:class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
:class="
cn(
'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
props.class
)
"
>
<slot />
</ComboboxRoot>

4
src/renderer/src/components/ui/command/CommandDialog.vue
View File

@@ -13,7 +13,9 @@ const forwarded = useForwardPropsEmits(props, emits)
<template>
<Dialog v-bind="forwarded">
<DialogContent class="overflow-hidden p-0 shadow-lg">
<Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
<Command
class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5"
>
<slot />
</Command>
</DialogContent>

17
src/renderer/src/components/ui/command/CommandGroup.vue
View File

@@ -4,10 +4,12 @@ import type { ComboboxGroupProps } from 'radix-vue'
import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
import { cn } from '@renderer/lib/utils'
const props = defineProps<ComboboxGroupProps & {
class?: HTMLAttributes['class']
heading?: string
}>()
const props = defineProps<
ComboboxGroupProps & {
class?: HTMLAttributes['class']
heading?: string
}
>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
@@ -19,7 +21,12 @@ const delegatedProps = computed(() => {
<template>
<ComboboxGroup
v-bind="delegatedProps"
:class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
:class="
cn(
'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
props.class
)
"
>
<ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
{{ heading }}

19
src/renderer/src/components/ui/command/CommandInput.vue
View File

@@ -5,12 +5,14 @@ import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-v
import { cn } from '@renderer/lib/utils'
defineOptions({
inheritAttrs: false,
inheritAttrs: false
})
const props = defineProps<ComboboxInputProps & {
class?: HTMLAttributes['class']
}>()
const props = defineProps<
ComboboxInputProps & {
class?: HTMLAttributes['class']
}
>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
@@ -23,11 +25,16 @@ const forwardedProps = useForwardProps(delegatedProps)
<template>
<div class="flex items-center border-b px-3" cmdk-input-wrapper>
<MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
<MagnifyingGlassIcon class="mr-2 size-4 shrink-0 opacity-50" />
<ComboboxInput
v-bind="{ ...forwardedProps, ...$attrs }"
auto-focus
:class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
:class="
cn(
'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
props.class
)
"
/>
</div>
</template>

7
src/renderer/src/components/ui/command/CommandItem.vue
View File

@@ -19,7 +19,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template>
<ComboboxItem
v-bind="forwarded"
:class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
)
"
>
<slot />
</ComboboxItem>

5
src/renderer/src/components/ui/command/CommandList.vue
View File

@@ -17,7 +17,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>
<ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
<ComboboxContent
v-bind="forwarded"
:class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)"
>
<div role="presentation">
<slot />
</div>

5
src/renderer/src/components/ui/command/CommandSeparator.vue
View File

@@ -14,10 +14,7 @@ const delegatedProps = computed(() => {
</script>
<template>
<ComboboxSeparator
v-bind="delegatedProps"
:class="cn('-mx-1 h-px bg-border', props.class)"
>
<ComboboxSeparator v-bind="delegatedProps" :class="cn('-mx-1 h-px bg-border', props.class)">
<slot />
</ComboboxSeparator>
</template>

7
src/renderer/src/components/ui/dialog/Dialog.vue
View File

@@ -1,5 +1,10 @@
<script setup lang="ts">
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
import {
DialogRoot,
type DialogRootEmits,
type DialogRootProps,
useForwardPropsEmits
} from 'radix-vue'
const props = defineProps<DialogRootProps>()
const emits = defineEmits<DialogRootEmits>()

11
src/renderer/src/components/ui/dialog/DialogContent.vue
View File

@@ -7,7 +7,7 @@ import {
type DialogContentProps,
DialogOverlay,
DialogPortal,
useForwardPropsEmits,
useForwardPropsEmits
} from 'radix-vue'
import { Cross2Icon } from '@radix-icons/vue'
import { cn } from '@renderer/lib/utils'
@@ -27,22 +27,23 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
/>
<DialogContent
v-bind="forwarded"
:class="
cn(
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
props.class,
)"
props.class
)
"
>
<slot />
<DialogClose
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>
<Cross2Icon class="w-4 h-4" />
<Cross2Icon class="size-4" />
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>

27
src/renderer/src/components/ui/dialog/DialogScrollContent.vue
View File

@@ -7,7 +7,7 @@ import {
type DialogContentProps,
DialogOverlay,
DialogPortal,
useForwardPropsEmits,
useForwardPropsEmits
} from 'radix-vue'
import { X } from 'lucide-vue-next'
import { cn } from '@renderer/lib/utils'
@@ -27,30 +27,35 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
>
<DialogContent
:class="
cn(
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
props.class,
props.class
)
"
v-bind="forwarded"
@pointer-down-outside="(event) => {
const originalEvent = event.detail.originalEvent;
const target = originalEvent.target as HTMLElement;
if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
event.preventDefault();
@pointer-down-outside="
(event) => {
const originalEvent = event.detail.originalEvent
const target = originalEvent.target as HTMLElement
if (
originalEvent.offsetX > target.clientWidth ||
originalEvent.offsetY > target.clientHeight
) {
event.preventDefault()
}
}
}"
"
>
<slot />
<DialogClose
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
class="absolute right-4 top-4 rounded-md p-0.5 transition-colors hover:bg-secondary"
>
<Cross2Icon class="w-4 h-4" />
<Cross2Icon class="size-4" />
<span class="sr-only">Close</span>
</DialogClose>
</DialogContent>

7
src/renderer/src/components/ui/dialog/DialogTitle.vue
View File

@@ -17,12 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
<template>
<DialogTitle
v-bind="forwardedProps"
:class="
cn(
'text-lg font-semibold leading-none tracking-tight',
props.class,
)
"
:class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
>
<slot />
</DialogTitle>

7
src/renderer/src/components/ui/dropdown-menu/DropdownMenu.vue
View File

@@ -1,5 +1,10 @@
<script setup lang="ts">
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
import {
DropdownMenuRoot,
type DropdownMenuRootEmits,
type DropdownMenuRootProps,
useForwardPropsEmits
} from 'radix-vue'
const props = defineProps<DropdownMenuRootProps>()
const emits = defineEmits<DropdownMenuRootEmits>()

16
src/renderer/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
View File

@@ -5,7 +5,7 @@ import {
type DropdownMenuCheckboxItemEmits,
type DropdownMenuCheckboxItemProps,
DropdownMenuItemIndicator,
useForwardPropsEmits,
useForwardPropsEmits
} from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue'
import { cn } from '@renderer/lib/utils'
@@ -25,14 +25,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<template>
<DropdownMenuCheckboxItem
v-bind="forwarded"
:class=" cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class,
)"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
)
"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<CheckIcon class="w-4 h-4" />
<CheckIcon class="size-4" />
</DropdownMenuItemIndicator>
</span>
<slot />

13
src/renderer/src/components/ui/dropdown-menu/DropdownMenuContent.vue
View File

@@ -5,15 +5,15 @@ import {
type DropdownMenuContentEmits,
type DropdownMenuContentProps,
DropdownMenuPortal,
useForwardPropsEmits,
useForwardPropsEmits
} from 'radix-vue'
import { cn } from '@renderer/lib/utils'
const props = withDefaults(
defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
{
sideOffset: 4,
},
sideOffset: 4
}
)
const emits = defineEmits<DropdownMenuContentEmits>()
@@ -30,7 +30,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<DropdownMenuPortal>
<DropdownMenuContent
v-bind="forwarded"
:class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
:class="
cn(
'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class
)
"
>
<slot />
</DropdownMenuContent>

16
src/renderer/src/components/ui/dropdown-menu/DropdownMenuItem.vue
View File

@@ -3,7 +3,9 @@ import { type HTMLAttributes, computed } from 'vue'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@renderer/lib/utils'
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const props = defineProps<
DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
@@ -17,11 +19,13 @@ const forwardedProps = useForwardProps(delegatedProps)
<template>
<DropdownMenuItem
v-bind="forwardedProps"
:class="cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
props.class,
)"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
props.class
)
"
>
<slot />
</DropdownMenuItem>

2
src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
View File

@@ -3,7 +3,7 @@ import {
DropdownMenuRadioGroup,
type DropdownMenuRadioGroupEmits,
type DropdownMenuRadioGroupProps,
useForwardPropsEmits,
useForwardPropsEmits
} from 'radix-vue'
const props = defineProps<DropdownMenuRadioGroupProps>()

4
src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
View File

@@ -33,9 +33,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
)
"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuItemIndicator>
<DotFilledIcon class="h-4 w-4 fill-current" />
<DotFilledIcon class="size-4 fill-current" />
</DropdownMenuItemIndicator>
</span>
<slot />

18
src/renderer/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
View File

@@ -1,14 +1,13 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import {
DropdownMenuSeparator,
type DropdownMenuSeparatorProps,
} from 'radix-vue'
import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'radix-vue'
import { cn } from '@renderer/lib/utils'
const props = defineProps<DropdownMenuSeparatorProps & {
class?: HTMLAttributes['class']
}>()
const props = defineProps<
DropdownMenuSeparatorProps & {
class?: HTMLAttributes['class']
}
>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
@@ -18,5 +17,8 @@ const delegatedProps = computed(() => {
</script>
<template>
<DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
<DropdownMenuSeparator
v-bind="delegatedProps"
:class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
/>
</template>

2
src/renderer/src/components/ui/dropdown-menu/DropdownMenuSub.vue
View File

@@ -3,7 +3,7 @@ import {
DropdownMenuSub,
type DropdownMenuSubEmits,
type DropdownMenuSubProps,
useForwardPropsEmits,
useForwardPropsEmits
} from 'radix-vue'
const props = defineProps<DropdownMenuSubProps>()

14
src/renderer/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View File

@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
import {
DropdownMenuSubTrigger,
type DropdownMenuSubTriggerProps,
useForwardProps,
useForwardProps
} from 'radix-vue'
import { ChevronRightIcon } from '@radix-icons/vue'
import { cn } from '@renderer/lib/utils'
@@ -22,12 +22,14 @@ const forwardedProps = useForwardProps(delegatedProps)
<template>
<DropdownMenuSubTrigger
v-bind="forwardedProps"
:class="cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
props.class,
)"
:class="
cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
props.class
)
"
>
<slot />
<ChevronRightIcon class="ml-auto h-4 w-4" />
<ChevronRightIcon class="ml-auto size-4" />
</DropdownMenuSubTrigger>
</template>

4
src/renderer/src/components/ui/menubar/MenubarCheckboxItem.vue
View File

@@ -32,9 +32,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
)
"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<MenubarItemIndicator>
<CheckIcon class="w-4 h-4" />
<CheckIcon class="size-4" />
</MenubarItemIndicator>
</span>
<slot />

2
src/renderer/src/components/ui/menubar/MenubarRadioGroup.vue
View File

@@ -3,7 +3,7 @@ import {
MenubarRadioGroup,
type MenubarRadioGroupEmits,
type MenubarRadioGroupProps,
useForwardPropsEmits,
useForwardPropsEmits
} from 'radix-vue'
const props = defineProps<MenubarRadioGroupProps>()

4
src/renderer/src/components/ui/menubar/MenubarRadioItem.vue
View File

@@ -32,9 +32,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
)
"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span class="absolute left-2 flex size-3.5 items-center justify-center">
<MenubarItemIndicator>
<DotFilledIcon class="h-4 w-4 fill-current" />
<DotFilledIcon class="size-4 fill-current" />
</MenubarItemIndicator>
</span>
<slot />

2
src/renderer/src/components/ui/menubar/MenubarSubTrigger.vue
View File

@@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps)
"
>
<slot />
<ChevronRightIcon class="ml-auto h-4 w-4" />
<ChevronRightIcon class="ml-auto size-4" />
</MenubarSubTrigger>
</template>

6
src/renderer/src/components/ui/slider/Slider.vue
View File

@@ -22,12 +22,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded"
>
<SliderTrack
class="flex h-2 w-full grow overflow-hidden rounded-full bg-primary/20 items-center transition-all duration-75"
class="flex h-2 w-full grow items-center overflow-hidden rounded-full bg-primary/20 transition-all duration-75"
>
<SliderRange class="absolute h-1.5 bg-primary rounded-full" />
<SliderRange class="absolute h-1.5 rounded-full bg-primary" />
</SliderTrack>
<SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 transition-all duration-75 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
class="flex h-6 w-8 cursor-pointer items-center justify-center rounded-[8px] border border-zinc-100 bg-zinc-300 text-zinc-600 transition-all duration-75 hover:bg-zinc-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
style="box-shadow: -3px 0 15px 0 rgba(0, 0, 0, 0.6)"
>
<MoreHorizontal class="h-full" />

2
src/renderer/src/lib/utils.ts
View File

@@ -1,6 +1,6 @@
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
// import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))

98
tailwind.config.js
View File

@@ -1,92 +1,92 @@
const animate = require("tailwindcss-animate")
const animate = require('tailwindcss-animate')
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
safelist: ["dark"],
darkMode: ['class'],
safelist: ['dark'],
content: [
'./pages/**/*.{ts,tsx,vue}',
'./components/**/*.{ts,tsx,vue}',
'./app/**/*.{ts,tsx,vue}',
'./src/**/*.{ts,tsx,vue}',
],
'./src/**/*.{ts,tsx,vue}'
],
theme: {
container: {
center: true,
padding: "2rem",
padding: '2rem',
screens: {
"2xl": "1400px",
},
'2xl': '1400px'
}
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
}
},
borderRadius: {
xl: "calc(var(--radius) + 4px)",
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
xl: 'calc(var(--radius) + 4px)',
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
keyframes: {
"accordion-down": {
'accordion-down': {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
to: { height: 'var(--radix-accordion-content-height)' }
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: 0 }
},
"collapsible-down": {
'collapsible-down': {
from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' },
to: { height: 'var(--radix-collapsible-content-height)' }
},
"collapsible-up": {
'collapsible-up': {
from: { height: 'var(--radix-collapsible-content-height)' },
to: { height: 0 },
},
to: { height: 0 }
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"collapsible-down": "collapsible-down 0.2s ease-in-out",
"collapsible-up": "collapsible-up 0.2s ease-in-out",
},
},
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
'collapsible-down': 'collapsible-down 0.2s ease-in-out',
'collapsible-up': 'collapsible-up 0.2s ease-in-out'
}
}
},
plugins: [animate],
plugins: [animate]
}