Skip to content

Commit ada932c

Browse files
yaroslav8765yaroslav8765
committed
chore: add new tab for the af-demo
1 parent e862007 commit ada932c

File tree

3 files changed

+616
-301
lines changed

3 files changed

+616
-301
lines changed

‎dev-demo/custom/AfComponents.vue

Lines changed: 331 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,331 @@
1+
<template>
2+
3+
<div class="flex gap-10">
4+
<div class="flex flex-col max-w-[200px] m-10 mt-20 gap-10">
5+
<Checkbox :disabled="false"><p>afdsdfsdfsdgsdgsgdsggdg</p> </Checkbox>
6+
<Button @click="doSmth"
7+
:loader="false" class="w-full">
8+
Your button text
9+
</Button>
10+
11+
<Button @click="doSmth"
12+
:loader="true" class="w-full mt-4">
13+
Your button text
14+
</Button>
15+
16+
<Link to="/login">Go to login</Link>
17+
18+
<LinkButton to="/login">Go to login</LinkButton>
19+
20+
<Select
21+
class="w-full"
22+
:options="[
23+
{label: 'Last 7 days', value: '7'},
24+
{label: 'Last 30 days', value: '30'},
25+
{label: 'Last 90 days', value: '90'},
26+
{label: 'None', value: null}
27+
]"
28+
v-model="selected"
29+
></Select>
30+
31+
<Select
32+
class="w-full"
33+
:options="[
34+
{label: 'Last 7 days', value: '7'},
35+
{label: 'Last 30 days', value: '30'},
36+
{label: 'Last 90 days', value: '90'},
37+
{label: 'None', value: null}
38+
]"
39+
v-model="selected2"
40+
multiple
41+
></Select>
42+
43+
<Select
44+
class="w-full"
45+
:options="[
46+
{label: 'Last 7 days', value: '7', records: 110},
47+
{label: 'Last 30 days', value: '30', records: 320},
48+
{label: 'Last 90 days', value: '90', records: 310},
49+
{label: 'None', value: null}
50+
]"
51+
v-model="selected"
52+
>
53+
<template #item="{option}">
54+
<div>
55+
<span>{{ option.label }}</span>
56+
<span class="ml-2 opacity-50">{{ option.records }} records</span>
57+
</div>
58+
</template>
59+
<template #selected-item="{option}">
60+
<span>{{ option.label }} 💫</span>
61+
</template>
62+
</Select>
63+
64+
<Select
65+
class="w-full"
66+
:options="[
67+
{label: 'Last 7 days', value: '7'},
68+
{label: 'Last 30 days', value: '30'},
69+
{label: 'Last 90 days', value: '90'},
70+
]"
71+
v-model="selected"
72+
>
73+
<template #extra-item>
74+
<LinkButton to="/ranges">Manage ranges</LinkButton>
75+
</template>
76+
77+
</Select>
78+
79+
80+
<Input type="number" class="w-full">
81+
<template #suffix>
82+
USD
83+
</template>
84+
</Input>
85+
86+
<Input type="text" class="w-full">
87+
<template #rightIcon>
88+
<IconSearchOutline class="w-5 h-5 text-lightPrimary dark:text-darkPrimary "/>
89+
</template>
90+
</Input>
91+
92+
<Tooltip>
93+
<a :href="`https://google.com?q=adminforth`" target="_blank" >
94+
<IconCardSearch class="w-5 h-5 me-2"/>
95+
</a>
96+
97+
<template #tooltip>
98+
Search for AdminForth
99+
</template>
100+
</Tooltip>
101+
102+
<VerticalTabs>
103+
<template #tab:Profile>
104+
<IconUserCircleSolid class="w-5 h-5 me-2"/>
105+
Profile
106+
</template>
107+
<template #tab:Dashboard>
108+
<IconGridSolid class="w-5 h-5 me-2"/>
109+
Board
110+
</template>
111+
<template #Profile>
112+
<h3 class="text-lg font-bold text-lightPrimary dark:text-darkPrimary mb-2">Profile Tab</h3>
113+
<p class="mb-2">This is some placeholder content the Profile tab's associated content</p>
114+
</template>
115+
<template #Dashboard>
116+
Dashboard Tab Content
117+
</template>
118+
</VerticalTabs>
119+
120+
<Checkbox v-model="enable">
121+
Enable
122+
</Checkbox>
123+
124+
<Dialog class="w-96">
125+
<template #trigger>
126+
<Button>Dialog Toggle</Button>
127+
</template>
128+
129+
<div class="space-y-4">
130+
<p>This is the first paragraph of dialog content.</p>
131+
<p>And this is the second paragraph.</p>
132+
</div>
133+
</Dialog>
134+
</div>
135+
136+
137+
<div class="flex flex-col gap-10 m-10 mt-20">
138+
139+
<Dialog
140+
class="w-96"
141+
header="Dialog Header"
142+
>
143+
<template #trigger>
144+
<Button>Dialog Toggle</Button>
145+
</template>
146+
147+
<div class="space-y-4">
148+
<p>This is the first paragraph of dialog content.</p>
149+
<p>And this is the second paragraph.</p>
150+
</div>
151+
</Dialog>
152+
153+
<Dropzone
154+
:extensions="['.jpg', '.jpeg', '.png']"
155+
:maxSizeBytes="1024 * 1024 * 2"
156+
:multiple="false"
157+
v-model="files"
158+
/>
159+
160+
<ProgressBar
161+
:currentValue="2600"
162+
:minValue="0"
163+
:maxValue="5000"
164+
/>
165+
166+
<ProgressBar
167+
:currentValue="1070"
168+
:minValue="0"
169+
:maxValue="5000"
170+
:leftLabel="'Level 2'"
171+
:rightLabel="'Level 3'"
172+
:formatter="(value: number) => `${value} points`"
173+
:progressFormatter="(value: number, percentage: number) => `${value} done`"
174+
/>
175+
176+
<div class="flex flex-col gap-2">
177+
<Skeleton class="w-full h-4" />
178+
<Skeleton class="w-full h-2" />
179+
<Skeleton class="w-full h-2" />
180+
<Skeleton class="w-full h-2" />
181+
<Skeleton class="w-full h-2" />
182+
</div>
183+
184+
<Skeleton type="image" class="w-full h-full" />
185+
186+
<Skeleton type="video" class="w-full h-full" />
187+
188+
<Skeleton type="avatar" class="w-20 h-20" />
189+
190+
<Table
191+
class="min-h-[250px]"
192+
:columns="[
193+
{ label: 'Name', fieldName: 'name' },
194+
{ label: 'Age', fieldName: 'age' },
195+
{ label: 'Country', fieldName: 'country' },
196+
]"
197+
:data="[
198+
{ name: 'John', age: 30, country: 'US' },
199+
{ name: 'Rick', age: 25, country: 'CA' },
200+
{ name: 'Alice', age: 35, country: 'UK' },
201+
{ name: 'Colin', age: 40, country: 'AU' },
202+
]"
203+
></Table>
204+
205+
206+
<Table
207+
class="min-h-[262px]"
208+
:columns="[
209+
{ label: 'Name', fieldName: 'name' },
210+
{ label: 'Age', fieldName: 'age' },
211+
{ label: 'Country', fieldName: 'country' },
212+
]"
213+
:data="[
214+
{ name: 'John', age: 30, country: 'US' },
215+
{ name: 'Rick', age: 25, country: 'CA' },
216+
{ name: 'Alice', age: 35, country: 'BR' },
217+
{ name: 'Colin', age: 40, country: 'AU' },
218+
]"
219+
:pageSize="3"
220+
>
221+
</Table>
222+
223+
<Spinner class="w-10 h-10" />
224+
</div>
225+
226+
<div class="flex flex-col gap-10 m-10 mt-20">
227+
<CustomRangePicker
228+
:min="1"
229+
:max="100"
230+
/>
231+
232+
<Toast
233+
:toast="{
234+
id: '1',
235+
variant: 'info',
236+
message: 'This is an info toast',
237+
timeout: 'unlimited'
238+
}"
239+
@close="() => {}"
240+
/>
241+
242+
<Toast
243+
:toast="{
244+
id: '2',
245+
variant: 'danger',
246+
message: 'This is a danger toast',
247+
timeout: 'unlimited'
248+
}"
249+
@close="() => {}"
250+
/>
251+
252+
<Toast
253+
:toast="{
254+
id: '3',
255+
variant: 'warning',
256+
message: 'This is a warning toast',
257+
timeout: 'unlimited'
258+
}"
259+
@close="() => {}"
260+
/>
261+
262+
<Toast
263+
:toast="{
264+
id: '4',
265+
variant: 'success',
266+
message: 'This is a success toast',
267+
timeout: 'unlimited'
268+
}"
269+
@close="() => {}"
270+
/>
271+
272+
<Toast
273+
:toast="{
274+
id: '5',
275+
variant: 'info',
276+
messageHtml: '<b>This is HTML toast</b><br><i>with custom content</i>',
277+
timeout: 'unlimited'
278+
}"
279+
@close="() => {}"
280+
/>
281+
282+
283+
</div>
284+
285+
286+
</div>
287+
288+
</template>
289+
290+
<script setup lang="ts">
291+
import { ref, watch } from 'vue';
292+
import Checkbox from '@/afcl/Checkbox.vue';
293+
import { Button } from '@/afcl'
294+
import { Link } from '@/afcl'
295+
import { LinkButton } from '@/afcl'
296+
import { Select } from '@/afcl'
297+
import { Input } from '@/afcl'
298+
import { Tooltip } from '@/afcl'
299+
import { VerticalTabs } from '@/afcl'
300+
import { IconGridSolid, IconUserCircleSolid } from '@iconify-prerendered/vue-flowbite';
301+
import { Dialog } from '@/afcl';
302+
import { Ref } from 'vue'
303+
import { Dropzone } from '@/afcl'
304+
import { Table } from '@/afcl'
305+
import { ProgressBar } from '@/afcl';
306+
import { Skeleton } from '@/afcl';
307+
import { Spinner } from '@/afcl';
308+
import { IconSearchOutline } from '@iconify-prerendered/vue-flowbite'
309+
import CustomRangePicker from "@/components/CustomRangePicker.vue";
310+
import Toast from '@/components/Toast.vue';
311+
312+
const files: Ref<File[]> = ref([])
313+
314+
watch(files, (files) => {
315+
console.log('files selected', files);
316+
setTimeout(() => {
317+
// clear
318+
files.length = 0;
319+
}, 5000);
320+
})
321+
const enable = ref(false)
322+
const selected = ref(null)
323+
const selected2 = ref([])
324+
325+
326+
327+
function doSmth(){
328+
329+
}
330+
331+
</script>

0 commit comments

Comments
 (0)