Skip to content
This repository was archived by the owner on Sep 25, 2025. It is now read-only.

Commit 83cd7fc

Browse files
BarbapapazesBarbapapazes
authored
refactor: new portal composable and component config (#185)
1 parent 31a88be commit 83cd7fc

File tree

82 files changed

+4501
-3591
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+4501
-3591
lines changed

‎.playground/package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"@vueuse/integrations": "^12.8.2",
12+
"@vueuse/integrations": "^13.1.0",
1313
"fuse.js": "^7.1.0",
14-
"tailwindcss": "^4.0.17",
14+
"tailwindcss": "^4.1.4",
1515
"vue": "^3.5.13",
1616
"vue-router": "^4.5.0"
1717
},
1818
"devDependencies": {
1919
"@egoist/tailwindcss-icons": "^1.9.0",
20-
"@iconify-json/lucide": "^1.2.32",
21-
"@tailwindcss/vite": "^4.0.17",
22-
"@types/node": "^22.13.13",
20+
"@iconify-json/lucide": "^1.2.38",
21+
"@tailwindcss/vite": "^4.1.4",
22+
"@types/node": "^22.14.1",
2323
"@vitejs/plugin-vue": "^5.2.3",
24-
"typescript": "~5.7.3",
25-
"unplugin-vue-router": "^0.11.2",
26-
"vite": "^6.1.2",
27-
"vue-tsc": "^2.2.8"
24+
"typescript": "~5.8.3",
25+
"unplugin-vue-router": "^0.12.0",
26+
"vite": "^6.3.2",
27+
"vue-tsc": "^2.2.10"
2828
}
2929
}

‎.playground/src/App.vue‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
<script lang="ts" setup>
2+
import App from '@/ui/components/App/App.vue'
23
import Button from '@/ui/components/Button/Button.vue'
3-
import OverlayProvider from '@/ui/components/OverlayProvider/OverlayProvider.vue'
44
import Tooltip from '@/ui/components/Tooltip/Tooltip.vue'
5-
import { TooltipProvider } from 'reka-ui'
65
import { RouterLink } from 'vue-router'
76
import SelectColor from './components/SelectColor.vue'
87
9-
const componentFiles = import.meta.glob('./pages/components/*.vue')
10-
11-
const components = Object.keys(componentFiles)
8+
const components = Object.keys(import.meta.glob('./pages/components/*.vue'))
129
.map(path => ({ name: path.split('/').at(-1)!.replace('.vue', '')!.replace(/-/g, ' '), path: path.split('/').at(-1)!.replace('.vue', '')! }))
1310
</script>
1411

1512
<template>
16-
<TooltipProvider>
13+
<App>
1714
<section class="h-screen w-screen grid grid-cols-9 gap-6 bg-gray-100">
1815
<div class="absolute top-8 left-8">
1916
<SelectColor />
@@ -43,7 +40,5 @@ const components = Object.keys(componentFiles)
4340
</ol>
4441
</div>
4542
</section>
46-
47-
<OverlayProvider />
48-
</TooltipProvider>
43+
</App>
4944
</template>

‎.playground/src/pages/components/button-group.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
<script lang="ts" setup>
2+
import { useColor } from '@/app/composables/useColor'
23
import Button from '@/ui/components/Button/Button.vue'
34
import ButtonGroup from '@/ui/components/ButtonGroup/ButtonGroup.vue'
45
import Input from '@/ui/components/Input/Input.vue'
6+
7+
const { color } = useColor()
58
</script>
69

710
<template>
811
<div class="flex flex-col items-start gap-4">
912
<ButtonGroup size="md">
10-
<Button label="Button 1" />
11-
<Button label="Button 2" variant="soft" />
13+
<Button :color="color" label="Button 1" />
14+
<Button :color="color" label="Button 2" variant="soft" />
1215
</ButtonGroup>
1316

1417
<ButtonGroup size="md" orientation="vertical">
15-
<Button label="Button 1" />
16-
<Button label="Button 2" />
18+
<Button :color="color" label="Button 1" />
19+
<Button :color="color" label="Button 2" />
1720
</ButtonGroup>
1821

1922
<ButtonGroup size="md">
20-
<Input placeholder="Enter a value" />
21-
<Button icon="i-lucide-box" />
23+
<Input :color="color" placeholder="Enter a value" />
24+
<Button :color="color" icon="i-lucide-box" />
2225
</ButtonGroup>
2326
</div>
2427
</template>

‎.playground/src/pages/components/card.vue‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<script setup lang="ts">
2+
import { useColor } from '@/app/composables/useColor'
23
import Button from '@/ui/components/Button/Button.vue'
34
import Card from '@/ui/components/Card/Card.vue'
5+
6+
const { color } = useColor()
47
</script>
58

69
<template>
@@ -16,7 +19,43 @@ import Card from '@/ui/components/Card/Card.vue'
1619
<p>Card body</p>
1720

1821
<template #footer>
19-
<Button>Button</Button>
22+
<Button :color="color">
23+
Button
24+
</Button>
25+
</template>
26+
</Card>
27+
28+
<Card class="w-96" variant="soft">
29+
<template #header>
30+
<h3 class="flex items-center gap-2 text-lg font-semibold">
31+
<span class="i-lucide-info" />
32+
<span>Card</span>
33+
</h3>
34+
</template>
35+
36+
<p>Card body</p>
37+
38+
<template #footer>
39+
<Button :color="color">
40+
Button
41+
</Button>
42+
</template>
43+
</Card>
44+
45+
<Card class="w-96" variant="subtle">
46+
<template #header>
47+
<h3 class="flex items-center gap-2 text-lg font-semibold">
48+
<span class="i-lucide-info" />
49+
<span>Card</span>
50+
</h3>
51+
</template>
52+
53+
<p>Card body</p>
54+
55+
<template #footer>
56+
<Button :color="color">
57+
Button
58+
</Button>
2059
</template>
2160
</Card>
2261
</div>

‎.playground/src/pages/components/modal.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<script lang="ts" setup>
2+
import { useColor } from '@/app/composables/useColor'
23
import Button from '@/ui/components/Button/Button.vue'
34
import Modal from '@/ui/components/Modal/Modal.vue'
5+
6+
const { color } = useColor()
47
</script>
58

69
<template>
710
<div class="flex flex-col gap-4">
811
<Modal title="This ia a modal">
9-
<Button label="Open" />
12+
<Button :color="color" label="Open" />
1013

1114
<template #body>
1215
<p>This is the body of the modal</p>
1316
</template>
1417
</Modal>
1518

1619
<Modal title="This ia a modal" :content="{ 'aria-describedby': undefined }" prevent-close>
17-
<Button label="Open" />
20+
<Button :color="color" label="Open" />
1821

1922
<template #body>
2023
<p>This is the body of the modal</p>

‎.playground/src/pages/components/overlay-provider.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
<script lang="ts" setup>
2+
import { useColor } from '@/app/composables/useColor'
23
import Button from '@/ui/components/Button/Button.vue'
34
import Modal from '@/ui/components/Modal/Modal.vue'
45
import { useOverlay } from '@/ui/composables/useOverlay'
56
7+
const { color } = useColor()
8+
69
const overlay = useOverlay()
710
8-
const modal = overlay.create(Modal)
11+
const modal = overlay.create(Modal, {
12+
props: {
13+
title: 'This is a modal',
14+
description: 'This is the description of the modal',
15+
},
16+
destroyOnClose: true,
17+
})
918
1019
function openOverlay() {
1120
modal.open()
@@ -14,6 +23,6 @@ function openOverlay() {
1423

1524
<template>
1625
<div>
17-
<Button label="Open Overlay" @click="openOverlay" />
26+
<Button :color="color" label="Open Overlay" @click="openOverlay" />
1827
</div>
1928
</template>

‎.playground/src/pages/components/pagination.vue‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
<script setup lang="ts">
2+
import { useColor } from '@/app/composables/useColor'
23
import Pagination from '@/ui/components/Pagination/Pagination.vue'
34
import { ref } from 'vue'
45
6+
const { color } = useColor()
7+
58
const page = ref(5)
69
</script>
710

811
<template>
912
<div class="flex flex-col items-start gap-4">
10-
<Pagination v-model:page="page" :total="100" />
11-
<Pagination v-model:page="page" :sibling-count="1" :total="100" />
12-
<Pagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
13-
<Pagination v-model:page="page" :show-controls="false" show-edges :total="100" />
14-
<Pagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
15-
<Pagination v-model:page="page" active-color="neutral" :total="100" />
16-
<Pagination v-model:page="page" :total="100" disabled />
13+
<Pagination v-model:page="page" :color="color" :active-color="color" :total="100" />
14+
<Pagination v-model:page="page" :color="color" :active-color="color" :sibling-count="1" :total="100" />
15+
<Pagination v-model:page="page" :color="color" :active-color="color" show-edges :sibling-count="1" :total="100" />
16+
<Pagination v-model:page="page" :color="color" :active-color="color" :show-controls="false" show-edges :total="100" />
17+
<Pagination v-model:page="page" :color="color" :active-color="color" variant="subtle" :total="100" />
18+
<Pagination v-model:page="page" :color="color" :active-color="color" :total="100" />
19+
<Pagination v-model:page="page" :color="color" :active-color="color" :total="100" disabled />
1720
</div>
1821
</template>

‎.playground/src/pages/components/popover.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<script lang="ts" setup>
2+
import { useColor } from '@/app/composables/useColor'
23
import Button from '@/ui/components/Button/Button.vue'
34
import Popover from '@/ui/components/Popover/Popover.vue'
5+
6+
const { color } = useColor()
47
</script>
58

69
<template>
710
<div class="flex flex-col gap-4">
811
<Popover>
9-
<Button label="Click me" />
12+
<Button :color="color" label="Click me" />
1013

1114
<template #content>
1215
<p class="p-2">
@@ -16,7 +19,7 @@ import Popover from '@/ui/components/Popover/Popover.vue'
1619
</Popover>
1720

1821
<Popover mode="hover">
19-
<Button label="Click me" />
22+
<Button :color="color" label="Click me" />
2023

2124
<template #content>
2225
<p class="p-2">

‎.playground/src/pages/components/slideover.vue‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,39 @@
11
<script lang="ts" setup>
2+
import { useColor } from '@/app/composables/useColor'
23
import Button from '@/ui/components/Button/Button.vue'
34
import Slideover from '@/ui/components/Slideover/Slideover.vue'
45
import { ref } from 'vue'
56
7+
const { color } = useColor()
8+
69
const open = ref(false)
710
</script>
811

912
<template>
1013
<div class="flex flex-col gap-4">
1114
<Slideover title="Top" description="This is a top slideover" side="top">
12-
<Button label="Open Top" />
15+
<Button :color="color" label="Open Top" />
1316
<template #body>
1417
<div class="h-48 bg-green-500/10" />
1518
</template>
1619
</Slideover>
1720

1821
<Slideover title="Right" description="This is a right slideover" side="right">
19-
<Button label="Open Right" />
22+
<Button :color="color" label="Open Right" />
2023
<template #body>
2124
<div class="h-full bg-green-500/10" />
2225
</template>
2326
</Slideover>
2427

2528
<Slideover title="Bottom" description="This is a bottom slideover" side="bottom">
26-
<Button label="Open Bottom" />
29+
<Button :color="color" label="Open Bottom" />
2730
<template #body>
2831
<div class="h-48 bg-green-500/10" />
2932
</template>
3033
</Slideover>
3134

3235
<Slideover title="Left" description="This is a left slideover" side="left">
33-
<Button label="Open Left" />
36+
<Button :color="color" label="Open Left" />
3437
<template #body>
3538
<div class="h-full bg-green-500/10" />
3639
</template>
@@ -41,34 +44,34 @@ const open = ref(false)
4144
<div class="h-full bg-green-500/10" />
4245
</template>
4346
</Slideover>
44-
<Button label="Open with v-model" @click="open = true" />
47+
<Button :color="color" label="Open with v-model" @click="open = true" />
4548

4649
<Slideover title="Slideover without overlay" :overlay="false">
47-
<Button label="Without overlay" />
50+
<Button :color="color" label="Without overlay" />
4851
<template #body>
4952
<div class="h-full bg-green-500/10" />
5053
</template>
5154
</Slideover>
5255

5356
<Slideover title="Prevent close" prevent-close>
54-
<Button label="Prevent close" />
57+
<Button :color="color" label="Prevent close" />
5558
<template #body>
5659
<div class="h-full bg-green-500/10" />
5760
</template>
5861
</Slideover>
5962

6063
<Slideover title="Custom close button">
61-
<Button label="Custom close button" />
64+
<Button :color="color" label="Custom close button" />
6265
<template #body>
6366
<div class="h-full bg-green-500/10" />
6467
</template>
6568
<template #close="{ ui }">
66-
<Button square label="🐯" :class="ui.close({ class: 'bg-green-500/20' })" />
69+
<Button :color="color" square label="🐯" :class="ui.close({ class: 'bg-green-500/20' })" />
6770
</template>
6871
</Slideover>
6972

7073
<Slideover title="Without close button" :close="false">
71-
<Button label="Without close button" />
74+
<Button :color="color" label="Without close button" />
7275
<template #body>
7376
<div class="h-full bg-green-500/10" />
7477
</template>

‎.playground/src/pages/components/toast.vue‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
<script setup lang="ts">
33
import { useColor } from '@/app/composables/useColor'
44
import Button from '@/ui/components/Button/Button.vue'
5-
import Switch from '@/ui/components/Switch/Switch.vue'
6-
import Toast from '@/ui/components/Toast/Toast.vue'
7-
import Toaster from '@/ui/components/Toaster/Toaster.vue'
85
import { useToast } from '@/ui/composables/useToast'
96
import { computed, ref } from 'vue'
107
@@ -135,8 +132,6 @@ function removeToast() {
135132
136133
remove(last.value.id)
137134
}
138-
139-
const expand = ref(false)
140135
</script>
141136

142137
<template>
@@ -145,12 +140,4 @@ const expand = ref(false)
145140
<Button :color="color" label="Update last" @click="updateToast" />
146141
<Button :color="color" label="Remove last" @click="removeToast" />
147142
</div>
148-
149-
<div class="mt-4">
150-
<Switch v-model="expand" label="Expand" />
151-
</div>
152-
153-
<Toaster :expand="expand">
154-
<Toast title="Toast title" :close="false" />
155-
</Toaster>
156143
</template>

0 commit comments

Comments
 (0)