mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-21 23:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(ui): sidenav layout

Browse source
This commit is contained in:
Corentin Thomasset 2024-10-27 15:02:54 +01:00
parent b88f13a7ca
commit 8929b5af6e
No known key found for this signature in database
GPG key ID: DBD997E935996158
85 changed files with 648 additions and 566 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/app/src/locales/en.yaml
View file

@ -34,8 +34,8 @@ tools:
use-lowercase: Include lowercase letters use-lowercase: Include lowercase letters
use-numbers: Include numbers use-numbers: Include numbers
use-symbols: Include symbols use-symbols: Include symbols
exclude-similar: Exclude similar characters
length: Length length: Length
refresh: Refresh refresh: Refresh token
quantity: Quantity quantity: Quantity
format: Format format: Format

27
packages/app/src/modules/app/components/app-header.vue
View file

@ -1,23 +1,34 @@
<script setup> <script setup>
import { Button } from '@/src/modules/ui/components/button'; import { Button } from '@/src/modules/ui/components/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu';
import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
const { openCommandPalette } = useCommandPaletteStore();
const colorMode = useColorMode(); const colorMode = useColorMode();
</script> </script>
<template> <template>
<div class="w-full border-b bg-card"> <div class="w-full flex items-center justify-between">
<div class="max-w-screen-xl mx-auto flex items-center justify-between py-2 px-6"> <div>
<NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home"> <Button variant="outline" class="sm:pr-12 md:pr-24 text-muted-foreground hidden sm:flex" @click="openCommandPalette">
<span class="font-bold text-foreground">IT</span> <Icon name="i-tabler-search" class="mr-2 size-4" />
<span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span> {{ $t('home.search-tools') }}
</NuxtLink> </Button>
</div>
<div class="flex items-center gap-1">
<Button variant="ghost" size="icon" class="sm:hidden" @click="openCommandPalette">
<Icon name="i-tabler-search" class="size-5" />
</Button>
<LocalePicker />
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger as-child> <DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon"> <Button variant="ghost" size="icon">
<Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <Icon name="i-tabler-moon" class="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <Icon name="i-tabler-sun" class="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span class="sr-only">Toggle theme</span> <span class="sr-only">Toggle theme</span>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>

34
packages/app/src/modules/app/components/locale-picker.vue Normal file
View file

@ -0,0 +1,34 @@
<script setup lang="ts">
import { Button } from '../../ui/components/button';
import { DropdownMenu } from '../../ui/components/dropdown-menu';
import DropdownMenuContent from '../../ui/components/dropdown-menu/DropdownMenuContent.vue';
import DropdownMenuItem from '../../ui/components/dropdown-menu/DropdownMenuItem.vue';
import DropdownMenuTrigger from '../../ui/components/dropdown-menu/DropdownMenuTrigger.vue';
const { locale, locales, setLocale } = useI18n();
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<slot>
<Button variant="ghost" aria-label="Change language">
<Icon name="i-tabler-language" class="size-5 mr-1" />
<Icon name="i-tabler-chevron-down" class="text-muted-foreground" />
</Button>
</slot>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
v-for="({ name, code }) in locales"
:key="code"
class="cursor-pointer"
:class="{ 'font-bold': locale === code }"
@click="setLocale(code)"
>
{{ name }}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>

4
packages/app/src/modules/app/components/sidenav-menu.vue
View file

@ -2,7 +2,7 @@
import { Button } from '@/src/modules/ui/components/button'; import { Button } from '@/src/modules/ui/components/button';
import { useToolsStore } from '../../tools/tools.store'; import { useToolsStore } from '../../tools/tools.store';
const { tools } = useToolsStore(); const toolStore = useToolsStore();
const localePath = useLocalePath(); const localePath = useLocalePath();
</script> </script>
@ -20,7 +20,7 @@ const localePath = useLocalePath();
Home Home
</NuxtLink> </NuxtLink>
<NuxtLink v-for="tool in tools" :key="tool.key" class="py-1.5 px-3 flex items-center text-muted-foreground hover:text-foreground transition hover:bg-muted rounded-lg" :to="tool.path" exact-active-class="bg-secondary !text-foreground"> <NuxtLink v-for="tool in toolStore.tools" :key="tool.key" class="py-1.5 px-3 flex items-center text-muted-foreground hover:text-foreground transition hover:bg-muted rounded-lg" :to="tool.path" exact-active-class="bg-secondary !text-foreground">
<Icon :name="tool.icon" class="mr-2 size-4" /> <Icon :name="tool.icon" class="mr-2 size-4" />
{{ tool.title }} {{ tool.title }}
</NuxtLink> </NuxtLink>

16
packages/app/src/modules/app/layouts/default.vue
View file

@ -1,6 +1,22 @@
<script setup>
import { Button } from '@/src/modules/ui/components/button';
import { useToolsStore } from '../../tools/tools.store';
const localePath = useLocalePath();
</script>
<template> <template>
<div class="w-full min-h-screen text-sm relative font-sans flex flex-col"> <div class="w-full min-h-screen text-sm relative font-sans flex flex-col">
<div class="h-[60px] border-b">
<div class="max-w-screen-xl mx-auto py-2 px-6 w-full flex items-center gap-4 h-full">
<NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
<span class="font-bold text-foreground">IT</span>
<span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
</NuxtLink>
<app-header /> <app-header />
</div>
</div>
<div class="flex-1 pb-6"> <div class="flex-1 pb-6">
<slot /> <slot />

43
packages/app/src/modules/app/layouts/sidenav.vue
View file

@ -1,14 +1,6 @@
<script setup> <script setup>
import { Button } from '@/src/modules/ui/components/button'; import { Button } from '../../ui/components/button';
import { useCommandPaletteStore } from '../../command-palette/command-palette.store'; import { Sheet, SheetContent, SheetTrigger } from '../../ui/components/sheet';
import { DropdownMenu } from '../../ui/components/dropdown-menu';
import DropdownMenuContent from '../../ui/components/dropdown-menu/DropdownMenuContent.vue';
import DropdownMenuItem from '../../ui/components/dropdown-menu/DropdownMenuItem.vue';
import DropdownMenuTrigger from '../../ui/components/dropdown-menu/DropdownMenuTrigger.vue';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '../../ui/components/sheet';
const { openCommandPalette } = useCommandPaletteStore();
const colorMode = useColorMode();
</script> </script>
<template> <template>
@ -31,38 +23,9 @@ const colorMode = useColorMode();
</SheetContent> </SheetContent>
</Sheet> </Sheet>
</div> </div>
<Button variant="outline" class="sm:pr-12 md:pr-24 text-muted-foreground" @click="openCommandPalette">
<Icon name="i-tabler-search" class="mr-2 size-4" />
{{ $t('home.search-tools') }}
</Button>
</div> </div>
<div> <app-header />
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon">
<Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span class="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'light' }" @click="colorMode.preference = 'light'">
<Icon name="i-tabler-sun" class="mr-2 size-4" />
Light
</DropdownMenuItem>
<DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'dark' }" @click="colorMode.preference = 'dark'">
<Icon name="i-tabler-moon" class="mr-2 size-4" />
Dark
</DropdownMenuItem>
<DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'system' }" @click="colorMode.preference = 'system'">
<Icon name="i-tabler-device-laptop" class="mr-2 size-4" />
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div> </div>
<div class="flex-1"> <div class="flex-1">

3
packages/app/src/modules/app/pages/about.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
TODO
</template>

4
packages/app/src/modules/app/pages/index.vue
View file

@ -1,10 +1,8 @@
<script setup> <script setup>
import { Badge } from '@/src/modules/ui/components/badge'; import { Badge } from '@/src/modules/ui/components/badge';
import { Button, buttonVariants } from '@/src/modules/ui/components/button'; import { Button } from '@/src/modules/ui/components/button';
import { useCommandPaletteStore } from '../../command-palette/command-palette.store'; import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
import { cn } from '../../shared/style/cn';
import { useToolsStore } from '../../tools/tools.store'; import { useToolsStore } from '../../tools/tools.store';
import { CardContent } from '../../ui/components/card';
import Card from '../../ui/components/card/Card.vue'; import Card from '../../ui/components/card/Card.vue';
const { tools } = useToolsStore(); const { tools } = useToolsStore();

3
packages/app/src/modules/command-palette/components/command-palette.vue
View file

@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useMagicKeys } from '@vueuse/core';
import { useToolsStore } from '../../tools/tools.store'; import { useToolsStore } from '../../tools/tools.store';
import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../../ui/components/command'; import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../ui/components/command';
import { useCommandPaletteStore } from '../command-palette.store'; import { useCommandPaletteStore } from '../command-palette.store';
const commandPaletteStore = useCommandPaletteStore(); const commandPaletteStore = useCommandPaletteStore();

7
packages/app/src/modules/tools/definitions/token-generator/token-generator.models.ts
View file

@ -7,6 +7,7 @@ export function createToken({
withSymbols = false, withSymbols = false,
length = 64, length = 64,
alphabet, alphabet,
exclude,
sample = sampleImpl, sample = sampleImpl,
}: { }: {
withUppercase?: boolean; withUppercase?: boolean;
@ -15,6 +16,7 @@ export function createToken({
withSymbols?: boolean; withSymbols?: boolean;
length?: number; length?: number;
alphabet?: string; alphabet?: string;
exclude?: string | string[];
sample?: (str: string) => string; sample?: (str: string) => string;
}) { }) {
const allAlphabet = alphabet ?? [ const allAlphabet = alphabet ?? [
@ -24,5 +26,8 @@ export function createToken({
withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '', withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '',
].join(''); ].join('');
return times(length, () => sample(allAlphabet)).join(''); const charsToExclude = exclude ? (Array.isArray(exclude) ? exclude.join('') : exclude) : '';
const filteredAlphabet = allAlphabet.split('').filter(char => !charsToExclude.includes(char)).join('');
return times(length, () => sample(filteredAlphabet)).join('');
} }

105
packages/app/src/modules/tools/definitions/token-generator/token-generator.vue
View file

@ -2,7 +2,6 @@
import { times } from 'lodash-es'; import { times } from 'lodash-es';
import { useRefreshableState } from '~/src/modules/shared/composables/useRefreshableState'; import { useRefreshableState } from '~/src/modules/shared/composables/useRefreshableState';
import { Button } from '~/src/modules/ui/components/button'; import { Button } from '~/src/modules/ui/components/button';
import Card from '~/src/modules/ui/components/card/Card.vue';
import { Checkbox } from '~/src/modules/ui/components/checkbox'; import { Checkbox } from '~/src/modules/ui/components/checkbox';
import NumberField from '~/src/modules/ui/components/number-field/NumberField.vue'; import NumberField from '~/src/modules/ui/components/number-field/NumberField.vue';
import NumberFieldContent from '~/src/modules/ui/components/number-field/NumberFieldContent.vue'; import NumberFieldContent from '~/src/modules/ui/components/number-field/NumberFieldContent.vue';
@ -19,12 +18,6 @@ definePageMeta({
layout: 'sidenav', layout: 'sidenav',
}); });
const withUppercase = ref(true);
const withLowercase = ref(true);
const withNumbers = ref(true);
const withSymbols = ref(false);
const length = ref(48);
const formats = { const formats = {
raw: { raw: {
label: 'Raw', label: 'Raw',
@ -35,10 +28,29 @@ const formats = {
format: ({ tokens }: { tokens: string[] }) => JSON.stringify(tokens), format: ({ tokens }: { tokens: string[] }) => JSON.stringify(tokens),
}, },
}; };
const similarChars = ['I', 'l', '1', 'O', '0'];
const withUppercase = ref(true);
const withLowercase = ref(true);
const withNumbers = ref(true);
const withSymbols = ref(false);
const excludeSimilar = ref(false);
const length = ref(64);
const format = ref<keyof typeof formats>('raw'); const format = ref<keyof typeof formats>('raw');
const quantity = ref(1); const quantity = ref(1);
function reset() {
withUppercase.value = true;
withLowercase.value = true;
withNumbers.value = true;
withSymbols.value = false;
excludeSimilar.value = false;
length.value = 64;
format.value = 'raw';
quantity.value = 1;
}
function generateToken() { function generateToken() {
return createToken({ return createToken({
withUppercase: withUppercase.value, withUppercase: withUppercase.value,
@ -46,6 +58,7 @@ function generateToken() {
withNumbers: withNumbers.value, withNumbers: withNumbers.value,
withSymbols: withSymbols.value, withSymbols: withSymbols.value,
length: length.value, length: length.value,
exclude: excludeSimilar.value ? similarChars : [],
}); });
} }
@ -69,6 +82,7 @@ watch([
length, length,
format, format,
quantity, quantity,
excludeSimilar,
], refreshToken); ], refreshToken);
// const { copy: copyToken } = useCopy({ source: token, notificationText: 'Token copied to clipboard' }); // const { copy: copyToken } = useCopy({ source: token, notificationText: 'Token copied to clipboard' });
@ -85,10 +99,14 @@ watch([
</p> </p>
</div> </div>
<div class="h-full flex-1 p-6"> <div class="h-full flex-1 flex flex-col md:flex-row">
<Card class="max-w-[550px] mx-auto p-6 bg-white dark:bg-background shadow-none"> <div class="md:max-w-[360px] bg-white dark:bg-background h-full border-b md:border-b-none md:border-r">
<div class="grid grid-cols-2 gap-4"> <div class="px-6 pt-4 pb-6 ">
<div class="flex gap-2 items-center"> <div class="text-muted-foreground mb-3">
Token configuration
</div>
<div class="flex gap-2 items-center mb-1">
<Checkbox id="use-uppercase" v-model:checked="withUppercase" /> <Checkbox id="use-uppercase" v-model:checked="withUppercase" />
<label for="use-uppercase"> <label for="use-uppercase">
{{ $t('tools.token-generator.use-uppercase') }} {{ $t('tools.token-generator.use-uppercase') }}
@ -98,7 +116,7 @@ watch([
</label> </label>
</div> </div>
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center mb-1">
<Checkbox id="use-lowercase" v-model:checked="withLowercase" /> <Checkbox id="use-lowercase" v-model:checked="withLowercase" />
<label for="use-lowercase"> <label for="use-lowercase">
{{ $t('tools.token-generator.use-lowercase') }} {{ $t('tools.token-generator.use-lowercase') }}
@ -108,7 +126,7 @@ watch([
</label> </label>
</div> </div>
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center mb-1">
<Checkbox id="use-numbers" v-model:checked="withNumbers" /> <Checkbox id="use-numbers" v-model:checked="withNumbers" />
<label for="use-numbers"> <label for="use-numbers">
{{ $t('tools.token-generator.use-numbers') }} {{ $t('tools.token-generator.use-numbers') }}
@ -118,7 +136,7 @@ watch([
</label> </label>
</div> </div>
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center mb-1">
<Checkbox id="use-symbols" v-model:checked="withSymbols" /> <Checkbox id="use-symbols" v-model:checked="withSymbols" />
<label for="use-symbols"> <label for="use-symbols">
{{ $t('tools.token-generator.use-symbols') }} {{ $t('tools.token-generator.use-symbols') }}
@ -128,8 +146,18 @@ watch([
</label> </label>
</div> </div>
<div class="flex gap-4 items-center"> <div class="flex gap-2 items-center mb-1">
<label for="length" class="shrink-0">{{ $t('tools.token-generator.length') }}</label> <Checkbox id="exclude-similar" v-model:checked="excludeSimilar" />
<label for="exclude-similar">
{{ $t('tools.token-generator.exclude-similar') }}
<span class="text-muted-foreground">
({{ similarChars.join('') }})
</span>
</label>
</div>
<div class="flex gap-4 items-center mb-3 mt-4">
<label for="length" class="w-20 shrink-0">{{ $t('tools.token-generator.length') }}</label>
<NumberField id="length" v-model="length" :min="1" :max="1024"> <NumberField id="length" v-model="length" :min="1" :max="1024">
<NumberFieldContent class="flex-1"> <NumberFieldContent class="flex-1">
<NumberFieldDecrement /> <NumberFieldDecrement />
@ -148,10 +176,17 @@ watch([
/> />
</div> </div>
<hr class="my-6"> <hr>
<div class="mb-4 flex items-center gap-4"> <div class="px-6 pt-4 pb-6 border-b">
<div>{{ $t('tools.token-generator.format') }}</div> <div class="text-muted-foreground mb-3">
Output configuration
</div>
<div class="flex items-center mb-2 gap-4">
<div class="w-20 shrink-0">
{{ $t('tools.token-generator.format') }}
</div>
<ToggleGroup v-model="format" type="single" variant="outline"> <ToggleGroup v-model="format" type="single" variant="outline">
<ToggleGroupItem v-for="({ label }, key) in formats" :key="key" :value="key"> <ToggleGroupItem v-for="({ label }, key) in formats" :key="key" :value="key">
{{ label }} {{ label }}
@ -159,8 +194,10 @@ watch([
</ToggleGroup> </ToggleGroup>
</div> </div>
<div class="mb-4 flex items-center gap-4"> <div class="flex items-center gap-4">
<div>{{ $t('tools.token-generator.quantity') }}</div> <div class="w-20 shrink-0">
{{ $t('tools.token-generator.quantity') }}
</div>
<NumberField v-model="quantity" :min="1" :max="100"> <NumberField v-model="quantity" :min="1" :max="100">
<NumberFieldContent class="flex-1"> <NumberFieldContent class="flex-1">
@ -170,13 +207,33 @@ watch([
</NumberFieldContent> </NumberFieldContent>
</NumberField> </NumberField>
</div> </div>
</div>
<Textarea v-model="token" rows="5" class="font-mono" readonly :placeholder="$t('tools.token-generator.placeholder')" /> <div class="p-6">
<Button class="w-full" variant="secondary" @click="reset">
Reset configuration
</Button>
</div>
</div>
<Button class="mt-4" variant="secondary" @click="refreshToken"> <div class="flex-1 p-6 pt-4 bg-white dark:bg-background pb-20">
<div class="text-muted-foreground mb-3">
Generated token
</div>
<Textarea v-model="token" rows="12" class="font-mono" readonly :placeholder="$t('tools.token-generator.placeholder')" />
<div class="flex md:items-center mt-2 gap-2 flex-col md:flex-row">
<Button variant="secondary" @click="refreshToken">
<Icon name="i-tabler-refresh" class="mr-2" />
{{ $t('tools.token-generator.refresh') }} {{ $t('tools.token-generator.refresh') }}
</Button> </Button>
</Card>
<Button variant="secondary">
<Icon name="i-tabler-copy" class="mr-2" />
Copy to clipboard
</Button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

5
packages/app/src/modules/tools/modules/tools.modules.ts
View file

@ -5,12 +5,13 @@ export default defineNuxtModule({
meta: { meta: {
name: 'tools', name: 'tools',
}, },
setup() { setup(options, nuxt) {
extendPages((pages) => { nuxt.hook('pages:extend', (pages) => {
pages.push(...toolDefinitions.map((tool) => { pages.push(...toolDefinitions.map((tool) => {
return { return {
path: `/${tool.slug}`, path: `/${tool.slug}`,
file: tool.entryFile, file: tool.entryFile,
name: tool.slug,
meta: { meta: {
toolKey: tool.key, toolKey: tool.key,
}, },

12
packages/app/src/modules/ui/components/badge/Badge.vue
View file

@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { type BadgeVariants, badgeVariants } from '.' import { type BadgeVariants, badgeVariants } from '.';
const props = defineProps<{ const props = defineProps<{
variant?: BadgeVariants['variant'] variant?: BadgeVariants['variant'];
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/badge/index.ts
View file

@ -1,6 +1,6 @@
import { cva, type VariantProps } from 'class-variance-authority' import { cva, type VariantProps } from 'class-variance-authority';
export { default as Badge } from './Badge.vue' export { default as Badge } from './Badge.vue';
export const badgeVariants = cva( export const badgeVariants = cva(
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
@ -20,6 +20,6 @@ export const badgeVariants = cva(
variant: 'default', variant: 'default',
}, },
}, },
) );
export type BadgeVariants = VariantProps<typeof badgeVariants> export type BadgeVariants = VariantProps<typeof badgeVariants>;

8
packages/app/src/modules/ui/components/card/Card.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/card/CardContent.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/card/CardDescription.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/card/CardFooter.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/card/CardHeader.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/card/CardTitle.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

12
packages/app/src/modules/ui/components/card/index.ts
View file

@ -1,6 +1,6 @@
export { default as Card } from './Card.vue' export { default as Card } from './Card.vue';
export { default as CardContent } from './CardContent.vue' export { default as CardContent } from './CardContent.vue';
export { default as CardDescription } from './CardDescription.vue' export { default as CardDescription } from './CardDescription.vue';
export { default as CardFooter } from './CardFooter.vue' export { default as CardFooter } from './CardFooter.vue';
export { default as CardHeader } from './CardHeader.vue' export { default as CardHeader } from './CardHeader.vue';
export { default as CardTitle } from './CardTitle.vue' export { default as CardTitle } from './CardTitle.vue';

2
packages/app/src/modules/ui/components/checkbox/index.ts
View file

@ -1 +1 @@
export { default as Checkbox } from './Checkbox.vue' export { default as Checkbox } from './Checkbox.vue';

20
packages/app/src/modules/ui/components/command/Command.vue
View file

@ -1,23 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue' import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue' import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), { const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
open: true, open: true,
modelValue: '', modelValue: '',
}) });
const emits = defineEmits<ComboboxRootEmits>() const emits = defineEmits<ComboboxRootEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

14
packages/app/src/modules/ui/components/command/CommandDialog.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import type { DialogRootEmits, DialogRootProps } from 'radix-vue' import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
import { Dialog, DialogContent } from '@/src/modules/ui/components/dialog' import { Dialog, DialogContent } from '@/src/modules/ui/components/dialog';
import { useForwardPropsEmits } from 'radix-vue' import { useForwardPropsEmits } from 'radix-vue';
import Command from './Command.vue' import Command from './Command.vue';
const props = defineProps<DialogRootProps>() const props = defineProps<DialogRootProps>();
const emits = defineEmits<DialogRootEmits>() const emits = defineEmits<DialogRootEmits>();
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits);
</script> </script>
<template> <template>

16
packages/app/src/modules/ui/components/command/CommandEmpty.vue
View file

@ -1,16 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ComboboxEmptyProps } from 'radix-vue' import type { ComboboxEmptyProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxEmpty } from 'radix-vue' import { ComboboxEmpty } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
</script> </script>
<template> <template>

20
packages/app/src/modules/ui/components/command/CommandGroup.vue
View file

@ -1,19 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ComboboxGroupProps } from 'radix-vue' import type { ComboboxGroupProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxGroup, ComboboxLabel } from 'radix-vue' import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<ComboboxGroupProps & { const props = defineProps<ComboboxGroupProps & {
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
heading?: string heading?: string;
}>() }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
</script> </script>
<template> <template>

20
packages/app/src/modules/ui/components/command/CommandItem.vue
View file

@ -1,19 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue' import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxItem, useForwardPropsEmits } from 'radix-vue' import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<ComboboxItemEmits>() const emits = defineEmits<ComboboxItemEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

20
packages/app/src/modules/ui/components/command/CommandList.vue
View file

@ -1,21 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue' import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxContent, useForwardPropsEmits } from 'radix-vue' import { ComboboxContent, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), { const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
dismissable: false, dismissable: false,
}) });
const emits = defineEmits<ComboboxContentEmits>() const emits = defineEmits<ComboboxContentEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

16
packages/app/src/modules/ui/components/command/CommandSeparator.vue
View file

@ -1,16 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ComboboxSeparatorProps } from 'radix-vue' import type { ComboboxSeparatorProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxSeparator } from 'radix-vue' import { ComboboxSeparator } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/command/CommandShortcut.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

18
packages/app/src/modules/ui/components/command/index.ts
View file

@ -1,9 +1,9 @@
export { default as Command } from './Command.vue' export { default as Command } from './Command.vue';
export { default as CommandDialog } from './CommandDialog.vue' export { default as CommandDialog } from './CommandDialog.vue';
export { default as CommandEmpty } from './CommandEmpty.vue' export { default as CommandEmpty } from './CommandEmpty.vue';
export { default as CommandGroup } from './CommandGroup.vue' export { default as CommandGroup } from './CommandGroup.vue';
export { default as CommandInput } from './CommandInput.vue' export { default as CommandInput } from './CommandInput.vue';
export { default as CommandItem } from './CommandItem.vue' export { default as CommandItem } from './CommandItem.vue';
export { default as CommandList } from './CommandList.vue' export { default as CommandList } from './CommandList.vue';
export { default as CommandSeparator } from './CommandSeparator.vue' export { default as CommandSeparator } from './CommandSeparator.vue';
export { default as CommandShortcut } from './CommandShortcut.vue' export { default as CommandShortcut } from './CommandShortcut.vue';

8
packages/app/src/modules/ui/components/dialog/Dialog.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <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 props = defineProps<DialogRootProps>();
const emits = defineEmits<DialogRootEmits>() const emits = defineEmits<DialogRootEmits>();
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits);
</script> </script>
<template> <template>

4
packages/app/src/modules/ui/components/dialog/DialogClose.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { DialogClose, type DialogCloseProps } from 'radix-vue' import { DialogClose, type DialogCloseProps } from 'radix-vue';
const props = defineProps<DialogCloseProps>() const props = defineProps<DialogCloseProps>();
</script> </script>
<template> <template>

16
packages/app/src/modules/ui/components/dialog/DialogDescription.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue' import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwardedProps = useForwardProps(delegatedProps) const forwardedProps = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

6
packages/app/src/modules/ui/components/dialog/DialogFooter.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ class?: HTMLAttributes['class'] }>() const props = defineProps<{ class?: HTMLAttributes['class'] }>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/dialog/DialogHeader.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

16
packages/app/src/modules/ui/components/dialog/DialogTitle.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue' import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwardedProps = useForwardProps(delegatedProps) const forwardedProps = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

4
packages/app/src/modules/ui/components/dialog/DialogTrigger.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { DialogTrigger, type DialogTriggerProps } from 'radix-vue' import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
const props = defineProps<DialogTriggerProps>() const props = defineProps<DialogTriggerProps>();
</script> </script>
<template> <template>

18
packages/app/src/modules/ui/components/dialog/index.ts
View file

@ -1,9 +1,9 @@
export { default as Dialog } from './Dialog.vue' export { default as Dialog } from './Dialog.vue';
export { default as DialogClose } from './DialogClose.vue' export { default as DialogClose } from './DialogClose.vue';
export { default as DialogContent } from './DialogContent.vue' export { default as DialogContent } from './DialogContent.vue';
export { default as DialogDescription } from './DialogDescription.vue' export { default as DialogDescription } from './DialogDescription.vue';
export { default as DialogFooter } from './DialogFooter.vue' export { default as DialogFooter } from './DialogFooter.vue';
export { default as DialogHeader } from './DialogHeader.vue' export { default as DialogHeader } from './DialogHeader.vue';
export { default as DialogScrollContent } from './DialogScrollContent.vue' export { default as DialogScrollContent } from './DialogScrollContent.vue';
export { default as DialogTitle } from './DialogTitle.vue' export { default as DialogTitle } from './DialogTitle.vue';
export { default as DialogTrigger } from './DialogTrigger.vue' export { default as DialogTrigger } from './DialogTrigger.vue';

8
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenu.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <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 props = defineProps<DropdownMenuRootProps>();
const emits = defineEmits<DropdownMenuRootEmits>() const emits = defineEmits<DropdownMenuRootEmits>();
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits);
</script> </script>
<template> <template>

18
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuCheckboxItem.vue
View file

@ -1,24 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { import {
DropdownMenuCheckboxItem, DropdownMenuCheckboxItem,
type DropdownMenuCheckboxItemEmits, type DropdownMenuCheckboxItemEmits,
type DropdownMenuCheckboxItemProps, type DropdownMenuCheckboxItemProps,
DropdownMenuItemIndicator, DropdownMenuItemIndicator,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<DropdownMenuCheckboxItemEmits>() const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

18
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuContent.vue
View file

@ -1,29 +1,29 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { import {
DropdownMenuContent, DropdownMenuContent,
type DropdownMenuContentEmits, type DropdownMenuContentEmits,
type DropdownMenuContentProps, type DropdownMenuContentProps,
DropdownMenuPortal, DropdownMenuPortal,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = withDefaults( const props = withDefaults(
defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
{ {
sideOffset: 4, sideOffset: 4,
}, },
) );
const emits = defineEmits<DropdownMenuContentEmits>() const emits = defineEmits<DropdownMenuContentEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

4
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuGroup.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue' import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue';
const props = defineProps<DropdownMenuGroupProps>() const props = defineProps<DropdownMenuGroupProps>();
</script> </script>
<template> <template>

16
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuItem.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue' import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwardedProps = useForwardProps(delegatedProps) const forwardedProps = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

16
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuLabel.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue' import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>() const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwardedProps = useForwardProps(delegatedProps) const forwardedProps = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuRadioGroup.vue
View file

@ -4,12 +4,12 @@ import {
type DropdownMenuRadioGroupEmits, type DropdownMenuRadioGroupEmits,
type DropdownMenuRadioGroupProps, type DropdownMenuRadioGroupProps,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue';
const props = defineProps<DropdownMenuRadioGroupProps>() const props = defineProps<DropdownMenuRadioGroupProps>();
const emits = defineEmits<DropdownMenuRadioGroupEmits>() const emits = defineEmits<DropdownMenuRadioGroupEmits>();
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits);
</script> </script>
<template> <template>

16
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSeparator.vue
View file

@ -1,20 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { import {
DropdownMenuSeparator, DropdownMenuSeparator,
type DropdownMenuSeparatorProps, type DropdownMenuSeparatorProps,
} from 'radix-vue' } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DropdownMenuSeparatorProps & { const props = defineProps<DropdownMenuSeparatorProps & {
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuShortcut.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSub.vue
View file

@ -4,12 +4,12 @@ import {
type DropdownMenuSubEmits, type DropdownMenuSubEmits,
type DropdownMenuSubProps, type DropdownMenuSubProps,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue';
const props = defineProps<DropdownMenuSubProps>() const props = defineProps<DropdownMenuSubProps>();
const emits = defineEmits<DropdownMenuSubEmits>() const emits = defineEmits<DropdownMenuSubEmits>();
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits);
</script> </script>
<template> <template>

18
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSubContent.vue
View file

@ -1,23 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { import {
DropdownMenuSubContent, DropdownMenuSubContent,
type DropdownMenuSubContentEmits, type DropdownMenuSubContentEmits,
type DropdownMenuSubContentProps, type DropdownMenuSubContentProps,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<DropdownMenuSubContentEmits>() const emits = defineEmits<DropdownMenuSubContentEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

6
packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuTrigger.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue' import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue';
const props = defineProps<DropdownMenuTriggerProps>() const props = defineProps<DropdownMenuTriggerProps>();
const forwardedProps = useForwardProps(props) const forwardedProps = useForwardProps(props);
</script> </script>
<template> <template>

30
packages/app/src/modules/ui/components/dropdown-menu/index.ts
View file

@ -1,16 +1,16 @@
export { default as DropdownMenu } from './DropdownMenu.vue' export { default as DropdownMenu } from './DropdownMenu.vue';
export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue' export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
export { default as DropdownMenuContent } from './DropdownMenuContent.vue' export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue' export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
export { default as DropdownMenuItem } from './DropdownMenuItem.vue' export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue' export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue' export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue' export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue' export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue' export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
export { default as DropdownMenuSub } from './DropdownMenuSub.vue' export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue' export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue' export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue' export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
export { DropdownMenuPortal } from 'radix-vue' export { DropdownMenuPortal } from 'radix-vue';

20
packages/app/src/modules/ui/components/number-field/NumberField.vue
View file

@ -1,19 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue' import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue' import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<NumberFieldRootEmits>() const emits = defineEmits<NumberFieldRootEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/number-field/NumberFieldContent.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

20
packages/app/src/modules/ui/components/number-field/NumberFieldDecrement.vue
View file

@ -1,19 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import type { NumberFieldDecrementProps } from 'radix-vue' import type { NumberFieldDecrementProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { Minus } from 'lucide-vue-next' import { Minus } from 'lucide-vue-next';
import { NumberFieldDecrement, useForwardProps } from 'radix-vue' import { NumberFieldDecrement, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardProps(delegatedProps) const forwarded = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

20
packages/app/src/modules/ui/components/number-field/NumberFieldIncrement.vue
View file

@ -1,19 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import type { NumberFieldIncrementProps } from 'radix-vue' import type { NumberFieldIncrementProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { Plus } from 'lucide-vue-next' import { Plus } from 'lucide-vue-next';
import { NumberFieldIncrement, useForwardProps } from 'radix-vue' import { NumberFieldIncrement, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardProps(delegatedProps) const forwarded = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

10
packages/app/src/modules/ui/components/number-field/NumberFieldInput.vue
View file

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { NumberFieldInput } from 'radix-vue' import { NumberFieldInput } from 'radix-vue';
const props = defineProps<{ const props = defineProps<{
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
}>() }>();
</script> </script>
<template> <template>

10
packages/app/src/modules/ui/components/number-field/index.ts
View file

@ -1,5 +1,5 @@
export { default as NumberField } from './NumberField.vue' export { default as NumberField } from './NumberField.vue';
export { default as NumberFieldContent } from './NumberFieldContent.vue' export { default as NumberFieldContent } from './NumberFieldContent.vue';
export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue' export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue' export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
export { default as NumberFieldInput } from './NumberFieldInput.vue' export { default as NumberFieldInput } from './NumberFieldInput.vue';

10
packages/app/src/modules/ui/components/select/Select.vue
View file

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SelectRootEmits, SelectRootProps } from 'radix-vue' import type { SelectRootEmits, SelectRootProps } from 'radix-vue';
import { SelectRoot, useForwardPropsEmits } from 'radix-vue' import { SelectRoot, useForwardPropsEmits } from 'radix-vue';
const props = defineProps<SelectRootProps>() const props = defineProps<SelectRootProps>();
const emits = defineEmits<SelectRootEmits>() const emits = defineEmits<SelectRootEmits>();
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits);
</script> </script>
<template> <template>

22
packages/app/src/modules/ui/components/select/SelectContent.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { import {
SelectContent, SelectContent,
type SelectContentEmits, type SelectContentEmits,
@ -7,29 +7,29 @@ import {
SelectPortal, SelectPortal,
SelectViewport, SelectViewport,
useForwardPropsEmits, useForwardPropsEmits,
} from 'radix-vue' } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
import { SelectScrollDownButton, SelectScrollUpButton } from '.' import { SelectScrollDownButton, SelectScrollUpButton } from '.';
defineOptions({ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) });
const props = withDefaults( const props = withDefaults(
defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
{ {
position: 'popper', position: 'popper',
}, },
) );
const emits = defineEmits<SelectContentEmits>() const emits = defineEmits<SelectContentEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

14
packages/app/src/modules/ui/components/select/SelectGroup.vue
View file

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { SelectGroup, type SelectGroupProps } from 'radix-vue' import { SelectGroup, type SelectGroupProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
</script> </script>
<template> <template>

18
packages/app/src/modules/ui/components/select/SelectItem.vue
View file

@ -1,24 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { CheckIcon } from '@radix-icons/vue' import { CheckIcon } from '@radix-icons/vue';
import { import {
SelectItem, SelectItem,
SelectItemIndicator, SelectItemIndicator,
type SelectItemProps, type SelectItemProps,
SelectItemText, SelectItemText,
useForwardProps, useForwardProps,
} from 'radix-vue' } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwardedProps = useForwardProps(delegatedProps) const forwardedProps = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

4
packages/app/src/modules/ui/components/select/SelectItemText.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { SelectItemText, type SelectItemTextProps } from 'radix-vue' import { SelectItemText, type SelectItemTextProps } from 'radix-vue';
const props = defineProps<SelectItemTextProps>() const props = defineProps<SelectItemTextProps>();
</script> </script>
<template> <template>

8
packages/app/src/modules/ui/components/select/SelectLabel.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { SelectLabel, type SelectLabelProps } from 'radix-vue' import { SelectLabel, type SelectLabelProps } from 'radix-vue';
const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>();
</script> </script>
<template> <template>

18
packages/app/src/modules/ui/components/select/SelectScrollDownButton.vue
View file

@ -1,18 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ChevronDownIcon } from '@radix-icons/vue' import { ChevronDownIcon } from '@radix-icons/vue';
import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue' import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwardedProps = useForwardProps(delegatedProps) const forwardedProps = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

18
packages/app/src/modules/ui/components/select/SelectScrollUpButton.vue
View file

@ -1,18 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ChevronUpIcon } from '@radix-icons/vue' import { ChevronUpIcon } from '@radix-icons/vue';
import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue' import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwardedProps = useForwardProps(delegatedProps) const forwardedProps = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

14
packages/app/src/modules/ui/components/select/SelectSeparator.vue
View file

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue' import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
</script> </script>
<template> <template>

4
packages/app/src/modules/ui/components/select/SelectValue.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { SelectValue, type SelectValueProps } from 'radix-vue' import { SelectValue, type SelectValueProps } from 'radix-vue';
const props = defineProps<SelectValueProps>() const props = defineProps<SelectValueProps>();
</script> </script>
<template> <template>

22
packages/app/src/modules/ui/components/select/index.ts
View file

@ -1,11 +1,11 @@
export { default as Select } from './Select.vue' export { default as Select } from './Select.vue';
export { default as SelectContent } from './SelectContent.vue' export { default as SelectContent } from './SelectContent.vue';
export { default as SelectGroup } from './SelectGroup.vue' export { default as SelectGroup } from './SelectGroup.vue';
export { default as SelectItem } from './SelectItem.vue' export { default as SelectItem } from './SelectItem.vue';
export { default as SelectItemText } from './SelectItemText.vue' export { default as SelectItemText } from './SelectItemText.vue';
export { default as SelectLabel } from './SelectLabel.vue' export { default as SelectLabel } from './SelectLabel.vue';
export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue' export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue' export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
export { default as SelectSeparator } from './SelectSeparator.vue' export { default as SelectSeparator } from './SelectSeparator.vue';
export { default as SelectTrigger } from './SelectTrigger.vue' export { default as SelectTrigger } from './SelectTrigger.vue';
export { default as SelectValue } from './SelectValue.vue' export { default as SelectValue } from './SelectValue.vue';

8
packages/app/src/modules/ui/components/sheet/Sheet.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts"> <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 props = defineProps<DialogRootProps>();
const emits = defineEmits<DialogRootEmits>() const emits = defineEmits<DialogRootEmits>();
const forwarded = useForwardPropsEmits(props, emits) const forwarded = useForwardPropsEmits(props, emits);
</script> </script>
<template> <template>

4
packages/app/src/modules/ui/components/sheet/SheetClose.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { DialogClose, type DialogCloseProps } from 'radix-vue' import { DialogClose, type DialogCloseProps } from 'radix-vue';
const props = defineProps<DialogCloseProps>() const props = defineProps<DialogCloseProps>();
</script> </script>
<template> <template>

14
packages/app/src/modules/ui/components/sheet/SheetDescription.vue
View file

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { DialogDescription, type DialogDescriptionProps } from 'radix-vue' import { DialogDescription, type DialogDescriptionProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
</script> </script>
<template> <template>

6
packages/app/src/modules/ui/components/sheet/SheetFooter.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ class?: HTMLAttributes['class'] }>() const props = defineProps<{ class?: HTMLAttributes['class'] }>();
</script> </script>
<template> <template>

6
packages/app/src/modules/ui/components/sheet/SheetHeader.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{ class?: HTMLAttributes['class'] }>() const props = defineProps<{ class?: HTMLAttributes['class'] }>();
</script> </script>
<template> <template>

14
packages/app/src/modules/ui/components/sheet/SheetTitle.vue
View file

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { DialogTitle, type DialogTitleProps } from 'radix-vue' import { DialogTitle, type DialogTitleProps } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
</script> </script>
<template> <template>

4
packages/app/src/modules/ui/components/sheet/SheetTrigger.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { DialogTrigger, type DialogTriggerProps } from 'radix-vue' import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
const props = defineProps<DialogTriggerProps>() const props = defineProps<DialogTriggerProps>();
</script> </script>
<template> <template>

22
packages/app/src/modules/ui/components/sheet/index.ts
View file

@ -1,13 +1,13 @@
import { cva, type VariantProps } from 'class-variance-authority' import { cva, type VariantProps } from 'class-variance-authority';
export { default as Sheet } from './Sheet.vue' export { default as Sheet } from './Sheet.vue';
export { default as SheetClose } from './SheetClose.vue' export { default as SheetClose } from './SheetClose.vue';
export { default as SheetContent } from './SheetContent.vue' export { default as SheetContent } from './SheetContent.vue';
export { default as SheetDescription } from './SheetDescription.vue' export { default as SheetDescription } from './SheetDescription.vue';
export { default as SheetFooter } from './SheetFooter.vue' export { default as SheetFooter } from './SheetFooter.vue';
export { default as SheetHeader } from './SheetHeader.vue' export { default as SheetHeader } from './SheetHeader.vue';
export { default as SheetTitle } from './SheetTitle.vue' export { default as SheetTitle } from './SheetTitle.vue';
export { default as SheetTrigger } from './SheetTrigger.vue' export { default as SheetTrigger } from './SheetTrigger.vue';
export const sheetVariants = cva( export const sheetVariants = cva(
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@ -26,6 +26,6 @@ export const sheetVariants = cva(
side: 'right', side: 'right',
}, },
}, },
) );
export type SheetVariants = VariantProps<typeof sheetVariants> export type SheetVariants = VariantProps<typeof sheetVariants>;

20
packages/app/src/modules/ui/components/slider/Slider.vue
View file

@ -1,19 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import type { SliderRootEmits, SliderRootProps } from 'radix-vue' import type { SliderRootEmits, SliderRootProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue' import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue' import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>() const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<SliderRootEmits>() const emits = defineEmits<SliderRootEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>

2
packages/app/src/modules/ui/components/slider/index.ts
View file

@ -1 +1 @@
export { default as Slider } from './Slider.vue' export { default as Slider } from './Slider.vue';

2
packages/app/src/modules/ui/components/textarea/index.ts
View file

@ -1 +1 @@
export { default as Textarea } from './Textarea.vue' export { default as Textarea } from './Textarea.vue';

34
packages/app/src/modules/ui/components/toggle-group/ToggleGroup.vue
View file

@ -1,34 +1,34 @@
<script setup lang="ts"> <script setup lang="ts">
import type { toggleVariants } from '@/src/modules/ui/components/toggle' import type { toggleVariants } from '@/src/modules/ui/components/toggle';
import type { VariantProps } from 'class-variance-authority' import type { VariantProps } from 'class-variance-authority';
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue' import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes, provide } from 'vue' import { computed, type HTMLAttributes, provide } from 'vue';
type ToggleGroupVariants = VariantProps<typeof toggleVariants> type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
const props = defineProps<ToggleGroupRootProps & { const props = defineProps<ToggleGroupRootProps & {
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
variant?: ToggleGroupVariants['variant'] variant?: ToggleGroupVariants['variant'];
size?: ToggleGroupVariants['size'] size?: ToggleGroupVariants['size'];
}>() }>();
const emits = defineEmits<ToggleGroupRootEmits>() const emits = defineEmits<ToggleGroupRootEmits>();
provide('toggleGroup', { provide('toggleGroup', {
variant: props.variant, variant: props.variant,
size: props.size, size: props.size,
}) });
const delegatedProps = computed(() => { const delegatedProps = computed(() => {
const { class: _, ...delegated } = props const { class: _, ...delegated } = props;
return delegated return delegated;
}) });
const forwarded = useForwardPropsEmits(delegatedProps, emits) const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script> </script>
<template> <template>
<ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)"> <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center gap-1', props.class)">
<slot /> <slot />
</ToggleGroupRoot> </ToggleGroupRoot>
</template> </template>

30
packages/app/src/modules/ui/components/toggle-group/ToggleGroupItem.vue
View file

@ -1,26 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VariantProps } from 'class-variance-authority' import type { VariantProps } from 'class-variance-authority';
import { toggleVariants } from '@/src/modules/ui/components/toggle' import { cn } from '@/src/modules/shared/style/cn';
import { cn } from '@/src/modules/shared/style/cn' import { toggleVariants } from '@/src/modules/ui/components/toggle';
import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue' import { omit } from 'lodash-es';
import { computed, type HTMLAttributes, inject } from 'vue' import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue';
import { computed, type HTMLAttributes, inject } from 'vue';
type ToggleGroupVariants = VariantProps<typeof toggleVariants> type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
const props = defineProps<ToggleGroupItemProps & { const props = defineProps<ToggleGroupItemProps & {
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
variant?: ToggleGroupVariants['variant'] variant?: ToggleGroupVariants['variant'];
size?: ToggleGroupVariants['size'] size?: ToggleGroupVariants['size'];
}>() }>();
const context = inject<ToggleGroupVariants>('toggleGroup') const context = inject<ToggleGroupVariants>('toggleGroup');
const delegatedProps = computed(() => { const delegatedProps = computed(() => omit(props, ['class', 'variant', 'size']));
const { class: _, variant, size, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps) const forwardedProps = useForwardProps(delegatedProps);
</script> </script>
<template> <template>

4
packages/app/src/modules/ui/components/toggle-group/index.ts
View file

@ -1,2 +1,2 @@
export { default as ToggleGroup } from './ToggleGroup.vue' export { default as ToggleGroup } from './ToggleGroup.vue';
export { default as ToggleGroupItem } from './ToggleGroupItem.vue' export { default as ToggleGroupItem } from './ToggleGroupItem.vue';

27
packages/app/src/modules/ui/components/toggle/Toggle.vue
View file

@ -1,28 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn' import { cn } from '@/src/modules/shared/style/cn';
import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue' import { omit } from 'lodash-es';
import { computed, type HTMLAttributes } from 'vue' import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue';
import { type ToggleVariants, toggleVariants } from '.' import { computed, type HTMLAttributes } from 'vue';
import { type ToggleVariants, toggleVariants } from '.';
const props = withDefaults(defineProps<ToggleProps & { const props = withDefaults(defineProps<ToggleProps & {
class?: HTMLAttributes['class'] class?: HTMLAttributes['class'];
variant?: ToggleVariants['variant'] variant?: ToggleVariants['variant'];
size?: ToggleVariants['size'] size?: ToggleVariants['size'];
}>(), { }>(), {
variant: 'default', variant: 'default',
size: 'default', size: 'default',
disabled: false, disabled: false,
}) });
const emits = defineEmits<ToggleEmits>() const emits = defineEmits<ToggleEmits>();
const delegatedProps = computed(() => { const delegatedProps = computed(() => omit(props, ['class', 'variant', 'size']));
const { class: _, size, variant, ...delegated } = props
return delegated const forwarded = useForwardPropsEmits(delegatedProps, emits);
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script> </script>
<template> <template>