Skip to content

Commit 6cf77ae

Browse files
jd-solankijd-solanki
authored
feat(select): Add various slots of AList via defineSlots (#133)
1 parent 2361093 commit 6cf77ae

32 files changed

+545
-219
lines changed

‎.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,4 +95,4 @@
9595
"unocss.root": "packages/documentation",
9696
// Extension: Volar
9797
"volar.vueserver.vitePress.processMdFile": true,
98-
}
98+
}

‎docs/components/Playground.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts" setup>
2-
32
</script>
43

54
<template>

‎docs/components/demos/select/DemoSelectSlot.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import { ref } from 'vue'
33
44
const selected = ref()
55
const frameworks = [
6-
{ label: 'VueJS', value: 'vue', icon: 'i-logos-vue', brandColor: '#42b883' },
7-
{ label: 'ReactJS', value: 'react', icon: 'i-logos-react', brandColor: '#00d8ff' },
8-
{ label: 'AngularJS', value: 'angular', icon: 'i-logos-angular', brandColor: '#b52e31' },
9-
{ label: 'SolidJS', value: 'solid', icon: 'i-logos-solidjs-icon', brandColor: '#4e84c1' },
10-
{ label: 'AlpineJS', value: 'alpine', icon: 'i-logos-alpinejs-icon', brandColor: '#2d3441' },
6+
{ text: 'VueJS', value: 'vue', icon: 'i-logos-vue', style: 'color: #42b883' },
7+
{ text: 'ReactJS', value: 'react', icon: 'i-logos-react', style: 'color: #00d8ff' },
8+
{ text: 'AngularJS', value: 'angular', icon: 'i-logos-angular', style: 'color: #b52e31' },
9+
{ text: 'SolidJS', value: 'solid', icon: 'i-logos-solidjs-icon', style: 'color: #4e84c1' },
10+
{ text: 'AlpineJS', value: 'alpine', icon: 'i-logos-alpinejs-icon', style: 'color: #77c1d2' },
1111
]
12-
const color = '#fff'
1312
</script>
1413

1514
<template>

‎docs/components/ui/form/UIFormValidationZod.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script lang="ts" setup>
2+
import { toFormValidator } from '@vee-validate/zod'
3+
import { useField, useForm } from 'vee-validate'
4+
import * as zod from 'zod'
5+
6+
const validationSchema = toFormValidator(
7+
zod.object({
8+
email: zod.string({ required_error: 'Email is required' }).min(1).email({ message: 'Must be a valid email' }),
9+
password: zod.string({ required_error: 'Password is required' }).min(1).min(8, { message: 'Password is too short' }),
10+
}),
11+
)
12+
13+
const { handleSubmit, errors } = useForm({
14+
validationSchema,
15+
})
16+
17+
/*
18+
setting `validateOnValueUpdate: false` won't trigger validation on value change
19+
Docs: https://vee-validate.logaretm.com/v4/guide/composition-api/validation/#validation-behavior
20+
*/
21+
const { value: email } = useField<string>('email', undefined, {
22+
validateOnValueUpdate: false,
23+
})
24+
const { value: password } = useField<string>('password', undefined, {
25+
validateOnValueUpdate: false,
26+
})
27+
28+
const onSubmit = handleSubmit((values, { resetForm }) => {
29+
alert(JSON.stringify(values, null, 2))
30+
31+
resetForm()
32+
})
33+
</script>
34+
35+
<template>
36+
<div class="cards-demo-container">
37+
<ACard>
38+
<div class="a-card-body py-18">
39+
<form
40+
class="grid-row mx-auto max-w-1/2 grid-flow-rows justify-items-stretch content-center"
41+
@submit="onSubmit"
42+
>
43+
<ATypography
44+
:title="['Hello Again!', 'text-2xl']"
45+
subtitle="Welcome back, You've been missed"
46+
class="mb-4"
47+
/>
48+
<AInput
49+
v-model="email"
50+
name="email"
51+
type="email"
52+
label="Email"
53+
:error="errors.email"
54+
/>
55+
<AInput
56+
v-model="password"
57+
name="password"
58+
type="password"
59+
label="Password"
60+
:error="errors.password"
61+
/>
62+
<ABtn>Submit</ABtn>
63+
</form>
64+
</div>
65+
</ACard>
66+
</div>
67+
</template>

‎docs/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@
1818
"@iconify-json/logos": "^1.1.22",
1919
"@unocss/preset-icons": "^0.49.4",
2020
"@unocss/preset-uno": "0.49.4",
21+
"@vee-validate/zod": "^4.7.4",
2122
"markdown-it": "^13.0.1",
2223
"markdown-it-container": "^3.0.0",
2324
"postcss-prefix-selector": "^1.16.0",
2425
"unocss": "^0.49.4",
25-
"vitepress": "1.0.0-alpha.45"
26+
"vitepress": "1.0.0-alpha.45",
27+
"zod": "3.20.4-beta.0"
2628
},
2729
"dependencies": {
2830
"@anu-vue/preset-theme-default": "workspace:*",

‎docs/tsconfig.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@
44
"baseUrl": ".",
55
"resolveJsonModule": true,
66
"esModuleInterop": true,
7-
"types": [
8-
"anu-vue/volar"
9-
],
107
"lib": [
118
"esnext",
129
"dom",
@@ -29,4 +26,4 @@
2926
"**/*.md",
3027
".vitepress/shims.d.ts"
3128
]
32-
}
29+
}

‎docs/ui/form.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,12 @@
1313
:::tip
1414
We are not using `.a-card-spacer` class here because we get spacing between card body via Anu's grid system 😇
1515
:::
16+
17+
<!-- 👉 Form Validation using Zod -->
18+
::::card Form Validation using Zod
19+
20+
:::code UIFormValidationZod
21+
<<< @/components/ui/form/UIFormValidationZod.vue
22+
:::
23+
24+
::::

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@typescript-eslint/parser": "^5.50.0",
2727
"@vue-macros/volar": "^0.8.0",
2828
"bumpp": "^8.2.1",
29+
"concurrently": "^7.6.0",
2930
"defu": "^6.1.2",
3031
"eslint": "^8.33.0",
3132
"eslint-config-airbnb-base": "^15.0.0",

‎packages/anu-vue/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
],
3838
"types": "./dist/types",
3939
"scripts": {
40-
"dev": "pnpm gen-comp-meta && vite build --watch",
40+
"dev": "pnpm gen-comp-meta && concurrently \"vite build --watch\" \"vue-tsc --declaration --emitDeclarationOnly --watch\"",
4141
"gen-comp-meta": "na tsx ../../scripts/gen-component-meta.ts",
4242
"gen-volar": "na tsx ../../scripts/gen-volar.ts",
4343
"build": "pnpm gen-volar && pnpm gen-comp-meta && vite build && vue-tsc --declaration --emitDeclarationOnly",
@@ -78,4 +78,4 @@
7878
"@vueuse/core": "^9.6.0",
7979
"vue-router": "4"
8080
}
81-
}
81+
}

‎packages/anu-vue/src/components/base-input/ABaseInput.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts" setup>
22
import { baseInputProps } from './props'
3+
import type { baseInputSlots } from './slots'
34
import { ALoader } from '@/components/loader'
45
import { useConfigurable } from '@/composables/useConfigurable'
56
import { useSpacing } from '@/composables/useSpacing'
@@ -16,6 +17,8 @@ defineOptions({
1617
name: 'ABaseInput',
1718
})
1819
20+
defineSlots<typeof baseInputSlots>()
21+
1922
const attrs = useAttrs()
2023
2124
const spacing = useSpacing(toRef(props, 'spacing'))

0 commit comments

Comments
 (0)