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-numbers: Include numbers
use-symbols: Include symbols
exclude-similar: Exclude similar characters
length: Length
refresh: Refresh
refresh: Refresh token
quantity: Quantity
format: Format

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

@ -1,23 +1,34 @@
<script setup>
import { Button } from '@/src/modules/ui/components/button';
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();
</script>
<template>
<div class="w-full border-b bg-card">
<div class="max-w-screen-xl mx-auto flex items-center justify-between py-2 px-6">
<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>
<div class="w-full flex items-center justify-between">
<div>
<Button variant="outline" class="sm:pr-12 md:pr-24 text-muted-foreground hidden sm:flex" @click="openCommandPalette">
<Icon name="i-tabler-search" class="mr-2 size-4" />
{{ $t('home.search-tools') }}
</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>
<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" />
<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 size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span class="sr-only">Toggle theme</span>
</Button>
</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 { useToolsStore } from '../../tools/tools.store';
const { tools } = useToolsStore();
const toolStore = useToolsStore();
const localePath = useLocalePath();
</script>
@ -20,7 +20,7 @@ const localePath = useLocalePath();
Home
</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" />
{{ tool.title }}
</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>
<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 />
</div>
</div>
<div class="flex-1 pb-6">
<slot />

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

@ -1,14 +1,6 @@
<script setup>
import { Button } from '@/src/modules/ui/components/button';
import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
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();
import { Button } from '../../ui/components/button';
import { Sheet, SheetContent, SheetTrigger } from '../../ui/components/sheet';
</script>
<template>
@ -31,38 +23,9 @@ const colorMode = useColorMode();
</SheetContent>
</Sheet>
</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>
<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>
<app-header />
</div>
<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>
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 { cn } from '../../shared/style/cn';
import { useToolsStore } from '../../tools/tools.store';
import { CardContent } from '../../ui/components/card';
import Card from '../../ui/components/card/Card.vue';
const { tools } = useToolsStore();

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

@ -1,7 +1,6 @@
<script setup lang="ts">
import { useMagicKeys } from '@vueuse/core';
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';
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,
length = 64,
alphabet,
exclude,
sample = sampleImpl,
}: {
withUppercase?: boolean;
@ -15,6 +16,7 @@ export function createToken({
withSymbols?: boolean;
length?: number;
alphabet?: string;
exclude?: string | string[];
sample?: (str: string) => string;
}) {
const allAlphabet = alphabet ?? [
@ -24,5 +26,8 @@ export function createToken({
withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '',
].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 { useRefreshableState } from '~/src/modules/shared/composables/useRefreshableState';
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 NumberField from '~/src/modules/ui/components/number-field/NumberField.vue';
import NumberFieldContent from '~/src/modules/ui/components/number-field/NumberFieldContent.vue';
@ -19,12 +18,6 @@ definePageMeta({
layout: 'sidenav',
});
const withUppercase = ref(true);
const withLowercase = ref(true);
const withNumbers = ref(true);
const withSymbols = ref(false);
const length = ref(48);
const formats = {
raw: {
label: 'Raw',
@ -35,10 +28,29 @@ const formats = {
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 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() {
return createToken({
withUppercase: withUppercase.value,
@ -46,6 +58,7 @@ function generateToken() {
withNumbers: withNumbers.value,
withSymbols: withSymbols.value,
length: length.value,
exclude: excludeSimilar.value ? similarChars : [],
});
}
@ -69,6 +82,7 @@ watch([
length,
format,
quantity,
excludeSimilar,
], refreshToken);
// const { copy: copyToken } = useCopy({ source: token, notificationText: 'Token copied to clipboard' });
@ -85,10 +99,14 @@ watch([
</p>
</div>
<div class="h-full flex-1 p-6">
<Card class="max-w-[550px] mx-auto p-6 bg-white dark:bg-background shadow-none">
<div class="grid grid-cols-2 gap-4">
<div class="flex gap-2 items-center">
<div class="h-full flex-1 flex flex-col md:flex-row">
<div class="md:max-w-[360px] bg-white dark:bg-background h-full border-b md:border-b-none md:border-r">
<div class="px-6 pt-4 pb-6 ">
<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" />
<label for="use-uppercase">
{{ $t('tools.token-generator.use-uppercase') }}
@ -98,7 +116,7 @@ watch([
</label>
</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" />
<label for="use-lowercase">
{{ $t('tools.token-generator.use-lowercase') }}
@ -108,7 +126,7 @@ watch([
</label>
</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" />
<label for="use-numbers">
{{ $t('tools.token-generator.use-numbers') }}
@ -118,7 +136,7 @@ watch([
</label>
</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" />
<label for="use-symbols">
{{ $t('tools.token-generator.use-symbols') }}
@ -128,8 +146,18 @@ watch([
</label>
</div>
<div class="flex gap-4 items-center">
<label for="length" class="shrink-0">{{ $t('tools.token-generator.length') }}</label>
<div class="flex gap-2 items-center mb-1">
<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">
<NumberFieldContent class="flex-1">
<NumberFieldDecrement />
@ -148,10 +176,17 @@ watch([
/>
</div>
<hr class="my-6">
<hr>
<div class="mb-4 flex items-center gap-4">
<div>{{ $t('tools.token-generator.format') }}</div>
<div class="px-6 pt-4 pb-6 border-b">
<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">
<ToggleGroupItem v-for="({ label }, key) in formats" :key="key" :value="key">
{{ label }}
@ -159,8 +194,10 @@ watch([
</ToggleGroup>
</div>
<div class="mb-4 flex items-center gap-4">
<div>{{ $t('tools.token-generator.quantity') }}</div>
<div class="flex items-center gap-4">
<div class="w-20 shrink-0">
{{ $t('tools.token-generator.quantity') }}
</div>
<NumberField v-model="quantity" :min="1" :max="100">
<NumberFieldContent class="flex-1">
@ -170,13 +207,33 @@ watch([
</NumberFieldContent>
</NumberField>
</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') }}
</Button>
</Card>
<Button variant="secondary">
<Icon name="i-tabler-copy" class="mr-2" />
Copy to clipboard
</Button>
</div>
</div>
</div>
</div>
</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,10 +1,10 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn'
import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
class?: HTMLAttributes['class'];
}>();
</script>
<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 CardContent } from './CardContent.vue'
export { default as CardDescription } from './CardDescription.vue'
export { default as CardFooter } from './CardFooter.vue'
export { default as CardHeader } from './CardHeader.vue'
export { default as CardTitle } from './CardTitle.vue'
export { default as Card } from './Card.vue';
export { default as CardContent } from './CardContent.vue';
export { default as CardDescription } from './CardDescription.vue';
export { default as CardFooter } from './CardFooter.vue';
export { default as CardHeader } from './CardHeader.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">
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
import { cn } from '@/src/modules/shared/style/cn'
import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue';
const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
open: true,
modelValue: '',
})
});
const emits = defineEmits<ComboboxRootEmits>()
const emits = defineEmits<ComboboxRootEmits>();
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>
<template>

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

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

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

@ -1,16 +1,16 @@
<script setup lang="ts">
import type { ComboboxEmptyProps } from 'radix-vue'
import { cn } from '@/src/modules/shared/style/cn'
import { ComboboxEmpty } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import type { ComboboxEmptyProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxEmpty } from 'radix-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 { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
</script>
<template>

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

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

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

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

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

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

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

@ -1,16 +1,16 @@
<script setup lang="ts">
import type { ComboboxSeparatorProps } from 'radix-vue'
import { cn } from '@/src/modules/shared/style/cn'
import { ComboboxSeparator } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import type { ComboboxSeparatorProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn';
import { ComboboxSeparator } from 'radix-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 { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
</script>
<template>

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

@ -1,10 +1,10 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn'
import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
class?: HTMLAttributes['class'];
}>();
</script>
<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 CommandDialog } from './CommandDialog.vue'
export { default as CommandEmpty } from './CommandEmpty.vue'
export { default as CommandGroup } from './CommandGroup.vue'
export { default as CommandInput } from './CommandInput.vue'
export { default as CommandItem } from './CommandItem.vue'
export { default as CommandList } from './CommandList.vue'
export { default as CommandSeparator } from './CommandSeparator.vue'
export { default as CommandShortcut } from './CommandShortcut.vue'
export { default as Command } from './Command.vue';
export { default as CommandDialog } from './CommandDialog.vue';
export { default as CommandEmpty } from './CommandEmpty.vue';
export { default as CommandGroup } from './CommandGroup.vue';
export { default as CommandInput } from './CommandInput.vue';
export { default as CommandItem } from './CommandItem.vue';
export { default as CommandList } from './CommandList.vue';
export { default as CommandSeparator } from './CommandSeparator.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">
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>()
const props = defineProps<DialogRootProps>();
const emits = defineEmits<DialogRootEmits>();
const forwarded = useForwardPropsEmits(props, emits)
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>

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

@ -1,7 +1,7 @@
<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>
<template>

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

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

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
<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>
<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 DialogClose } from './DialogClose.vue'
export { default as DialogContent } from './DialogContent.vue'
export { default as DialogDescription } from './DialogDescription.vue'
export { default as DialogFooter } from './DialogFooter.vue'
export { default as DialogHeader } from './DialogHeader.vue'
export { default as DialogScrollContent } from './DialogScrollContent.vue'
export { default as DialogTitle } from './DialogTitle.vue'
export { default as DialogTrigger } from './DialogTrigger.vue'
export { default as Dialog } from './Dialog.vue';
export { default as DialogClose } from './DialogClose.vue';
export { default as DialogContent } from './DialogContent.vue';
export { default as DialogDescription } from './DialogDescription.vue';
export { default as DialogFooter } from './DialogFooter.vue';
export { default as DialogHeader } from './DialogHeader.vue';
export { default as DialogScrollContent } from './DialogScrollContent.vue';
export { default as DialogTitle } from './DialogTitle.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">
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>()
const props = defineProps<DropdownMenuRootProps>();
const emits = defineEmits<DropdownMenuRootEmits>();
const forwarded = useForwardPropsEmits(props, emits)
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>

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

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

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

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

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

@ -1,7 +1,7 @@
<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>
<template>

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

@ -1,17 +1,17 @@
<script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn'
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn';
import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-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 { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps)
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>

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

@ -1,17 +1,17 @@
<script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn'
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn';
import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-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 { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps)
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>

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

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

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

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

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

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

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

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

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

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

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

@ -1,9 +1,9 @@
<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>
<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 DropdownMenuContent } from './DropdownMenuContent.vue'
export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
export { DropdownMenuPortal } from 'radix-vue'
export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.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">
import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
import { cn } from '@/src/modules/shared/style/cn'
import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn';
import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<NumberFieldRootEmits>()
const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<NumberFieldRootEmits>();
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>
<template>

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

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

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

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

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

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

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

@ -1,11 +1,11 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn'
import { NumberFieldInput } from 'radix-vue'
import type { HTMLAttributes } from 'vue';
import { cn } from '@/src/modules/shared/style/cn';
import { NumberFieldInput } from 'radix-vue';
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
class?: HTMLAttributes['class'];
}>();
</script>
<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 NumberFieldContent } from './NumberFieldContent.vue'
export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
export { default as NumberFieldInput } from './NumberFieldInput.vue'
export { default as NumberField } from './NumberField.vue';
export { default as NumberFieldContent } from './NumberFieldContent.vue';
export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
export { default as NumberFieldIncrement } from './NumberFieldIncrement.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">
import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
import type { SelectRootEmits, SelectRootProps } from 'radix-vue';
import { SelectRoot, useForwardPropsEmits } from 'radix-vue';
const props = defineProps<SelectRootProps>()
const emits = defineEmits<SelectRootEmits>()
const props = defineProps<SelectRootProps>();
const emits = defineEmits<SelectRootEmits>();
const forwarded = useForwardPropsEmits(props, emits)
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>

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

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

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

@ -1,15 +1,15 @@
<script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn'
import { SelectGroup, type SelectGroupProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn';
import { SelectGroup, type SelectGroupProps } from 'radix-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 { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
</script>
<template>

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

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

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

@ -1,7 +1,7 @@
<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>
<template>

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

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

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

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

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

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

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

@ -1,15 +1,15 @@
<script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn'
import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn';
import { SelectSeparator, type SelectSeparatorProps } from 'radix-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 { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
</script>
<template>

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

@ -1,7 +1,7 @@
<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>
<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 SelectContent } from './SelectContent.vue'
export { default as SelectGroup } from './SelectGroup.vue'
export { default as SelectItem } from './SelectItem.vue'
export { default as SelectItemText } from './SelectItemText.vue'
export { default as SelectLabel } from './SelectLabel.vue'
export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
export { default as SelectSeparator } from './SelectSeparator.vue'
export { default as SelectTrigger } from './SelectTrigger.vue'
export { default as SelectValue } from './SelectValue.vue'
export { default as Select } from './Select.vue';
export { default as SelectContent } from './SelectContent.vue';
export { default as SelectGroup } from './SelectGroup.vue';
export { default as SelectItem } from './SelectItem.vue';
export { default as SelectItemText } from './SelectItemText.vue';
export { default as SelectLabel } from './SelectLabel.vue';
export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
export { default as SelectSeparator } from './SelectSeparator.vue';
export { default as SelectTrigger } from './SelectTrigger.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">
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>()
const props = defineProps<DialogRootProps>();
const emits = defineEmits<DialogRootEmits>();
const forwarded = useForwardPropsEmits(props, emits)
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>

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

@ -1,7 +1,7 @@
<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>
<template>

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

@ -1,15 +1,15 @@
<script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn'
import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn';
import { DialogDescription, type DialogDescriptionProps } from 'radix-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 { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
</script>
<template>

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

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

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

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

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

@ -1,15 +1,15 @@
<script setup lang="ts">
import { cn } from '@/src/modules/shared/style/cn'
import { DialogTitle, type DialogTitleProps } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { cn } from '@/src/modules/shared/style/cn';
import { DialogTitle, type DialogTitleProps } from 'radix-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 { class: _, ...delegated } = props
const { class: _, ...delegated } = props;
return delegated
})
return delegated;
});
</script>
<template>

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

@ -1,7 +1,7 @@
<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>
<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 SheetClose } from './SheetClose.vue'
export { default as SheetContent } from './SheetContent.vue'
export { default as SheetDescription } from './SheetDescription.vue'
export { default as SheetFooter } from './SheetFooter.vue'
export { default as SheetHeader } from './SheetHeader.vue'
export { default as SheetTitle } from './SheetTitle.vue'
export { default as SheetTrigger } from './SheetTrigger.vue'
export { default as Sheet } from './Sheet.vue';
export { default as SheetClose } from './SheetClose.vue';
export { default as SheetContent } from './SheetContent.vue';
export { default as SheetDescription } from './SheetDescription.vue';
export { default as SheetFooter } from './SheetFooter.vue';
export { default as SheetHeader } from './SheetHeader.vue';
export { default as SheetTitle } from './SheetTitle.vue';
export { default as SheetTrigger } from './SheetTrigger.vue';
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',
@ -26,6 +26,6 @@ export const sheetVariants = cva(
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">
import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
import { cn } from '@/src/modules/shared/style/cn'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import type { SliderRootEmits, SliderRootProps } from 'radix-vue';
import { cn } from '@/src/modules/shared/style/cn';
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<SliderRootEmits>()
const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<SliderRootEmits>();
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>
<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">
import type { toggleVariants } from '@/src/modules/ui/components/toggle'
import type { VariantProps } from 'class-variance-authority'
import { cn } from '@/src/modules/shared/style/cn'
import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
import { computed, type HTMLAttributes, provide } from 'vue'
import type { toggleVariants } from '@/src/modules/ui/components/toggle';
import type { VariantProps } from 'class-variance-authority';
import { cn } from '@/src/modules/shared/style/cn';
import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes, provide } from 'vue';
type ToggleGroupVariants = VariantProps<typeof toggleVariants>
type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
const props = defineProps<ToggleGroupRootProps & {
class?: HTMLAttributes['class']
variant?: ToggleGroupVariants['variant']
size?: ToggleGroupVariants['size']
}>()
const emits = defineEmits<ToggleGroupRootEmits>()
class?: HTMLAttributes['class'];
variant?: ToggleGroupVariants['variant'];
size?: ToggleGroupVariants['size'];
}>();
const emits = defineEmits<ToggleGroupRootEmits>();
provide('toggleGroup', {
variant: props.variant,
size: props.size,
})
});
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const { class: _, ...delegated } = props;
return delegated;
});
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<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 />
</ToggleGroupRoot>
</template>

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

@ -1,26 +1,24 @@
<script setup lang="ts">
import type { VariantProps } from 'class-variance-authority'
import { toggleVariants } from '@/src/modules/ui/components/toggle'
import { cn } from '@/src/modules/shared/style/cn'
import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
import { computed, type HTMLAttributes, inject } from 'vue'
import type { VariantProps } from 'class-variance-authority';
import { cn } from '@/src/modules/shared/style/cn';
import { toggleVariants } from '@/src/modules/ui/components/toggle';
import { omit } from 'lodash-es';
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 & {
class?: HTMLAttributes['class']
variant?: ToggleGroupVariants['variant']
size?: ToggleGroupVariants['size']
}>()
class?: HTMLAttributes['class'];
variant?: ToggleGroupVariants['variant'];
size?: ToggleGroupVariants['size'];
}>();
const context = inject<ToggleGroupVariants>('toggleGroup')
const context = inject<ToggleGroupVariants>('toggleGroup');
const delegatedProps = computed(() => {
const { class: _, variant, size, ...delegated } = props
return delegated
})
const delegatedProps = computed(() => omit(props, ['class', 'variant', 'size']));
const forwardedProps = useForwardProps(delegatedProps)
const forwardedProps = useForwardProps(delegatedProps);
</script>
<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 ToggleGroupItem } from './ToggleGroupItem.vue'
export { default as ToggleGroup } from './ToggleGroup.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">
import { cn } from '@/src/modules/shared/style/cn'
import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
import { computed, type HTMLAttributes } from 'vue'
import { type ToggleVariants, toggleVariants } from '.'
import { cn } from '@/src/modules/shared/style/cn';
import { omit } from 'lodash-es';
import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue';
import { computed, type HTMLAttributes } from 'vue';
import { type ToggleVariants, toggleVariants } from '.';
const props = withDefaults(defineProps<ToggleProps & {
class?: HTMLAttributes['class']
variant?: ToggleVariants['variant']
size?: ToggleVariants['size']
class?: HTMLAttributes['class'];
variant?: ToggleVariants['variant'];
size?: ToggleVariants['size'];
}>(), {
variant: 'default',
size: 'default',
disabled: false,
})
});
const emits = defineEmits<ToggleEmits>()
const emits = defineEmits<ToggleEmits>();
const delegatedProps = computed(() => {
const { class: _, size, variant, ...delegated } = props
const delegatedProps = computed(() => omit(props, ['class', 'variant', 'size']));
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>