feat(select): Add various slots of AList via defineSlots (jd-sola…

…nki#133)

.vscode/settings.json

@@ -95,4 +95,4 @@
     "unocss.root": "packages/documentation",
     // Extension: Volar
     "volar.vueserver.vitePress.processMdFile": true,
-}
+}

docs/components/Playground.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 </script>
 
 <template>

docs/components/demos/select/DemoSelectSlot.vue

@@ -3,13 +3,12 @@ import { ref } from 'vue'
 
 const selected = ref()
 const frameworks = [
-  { label: 'VueJS', value: 'vue', icon: 'i-logos-vue', brandColor: '#42b883' },
-  { label: 'ReactJS', value: 'react', icon: 'i-logos-react', brandColor: '#00d8ff' },
-  { label: 'AngularJS', value: 'angular', icon: 'i-logos-angular', brandColor: '#b52e31' },
-  { label: 'SolidJS', value: 'solid', icon: 'i-logos-solidjs-icon', brandColor: '#4e84c1' },
-  { label: 'AlpineJS', value: 'alpine', icon: 'i-logos-alpinejs-icon', brandColor: '#2d3441' },
+  { text: 'VueJS', value: 'vue', icon: 'i-logos-vue', style: 'color: #42b883' },
+  { text: 'ReactJS', value: 'react', icon: 'i-logos-react', style: 'color: #00d8ff' },
+  { text: 'AngularJS', value: 'angular', icon: 'i-logos-angular', style: 'color: #b52e31' },
+  { text: 'SolidJS', value: 'solid', icon: 'i-logos-solidjs-icon', style: 'color: #4e84c1' },
+  { text: 'AlpineJS', value: 'alpine', icon: 'i-logos-alpinejs-icon', style: 'color: #77c1d2' },
 ]
-const color = '#fff'
 </script>
 
 <template>

docs/components/ui/form/UIFormValidationZod.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { toFormValidator } from '@vee-validate/zod'
+import { useField, useForm } from 'vee-validate'
+import * as zod from 'zod'
+
+const validationSchema = toFormValidator(
+  zod.object({
+    email: zod.string({ required_error: 'Email is required' }).min(1).email({ message: 'Must be a valid email' }),
+    password: zod.string({ required_error: 'Password is required' }).min(1).min(8, { message: 'Password is too short' }),
+  }),
+)
+
+const { handleSubmit, errors } = useForm({
+  validationSchema,
+})
+
+/*
+    setting `validateOnValueUpdate: false` won't trigger validation on value change
+    Docs: https://vee-validate.logaretm.com/v4/guide/composition-api/validation/#validation-behavior
+*/
+const { value: email } = useField<string>('email', undefined, {
+  validateOnValueUpdate: false,
+})
+const { value: password } = useField<string>('password', undefined, {
+  validateOnValueUpdate: false,
+})
+
+const onSubmit = handleSubmit((values, { resetForm }) => {
+  alert(JSON.stringify(values, null, 2))
+
+  resetForm()
+})
+</script>
+
+<template>
+  <div class="cards-demo-container">
+    <ACard>
+      <div class="a-card-body py-18">
+        <form
+          class="grid-row mx-auto max-w-1/2 grid-flow-rows justify-items-stretch content-center"
+          @submit="onSubmit"
+        >
+          <ATypography
+            :title="['Hello Again!', 'text-2xl']"
+            subtitle="Welcome back, You've been missed"
+            class="mb-4"
+          />
+          <AInput
+            v-model="email"
+            name="email"
+            type="email"
+            label="Email"
+            :error="errors.email"
+          />
+          <AInput
+            v-model="password"
+            name="password"
+            type="password"
+            label="Password"
+            :error="errors.password"
+          />
+          <ABtn>Submit</ABtn>
+        </form>
+      </div>
+    </ACard>
+  </div>
+</template>

docs/package.json

@@ -18,11 +18,13 @@
     "@iconify-json/logos": "^1.1.22",
     "@unocss/preset-icons": "^0.49.4",
     "@unocss/preset-uno": "0.49.4",
+    "@vee-validate/zod": "^4.7.4",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
     "postcss-prefix-selector": "^1.16.0",
     "unocss": "^0.49.4",
-    "vitepress": "1.0.0-alpha.45"
+    "vitepress": "1.0.0-alpha.45",
+    "zod": "3.20.4-beta.0"
   },
   "dependencies": {
     "@anu-vue/preset-theme-default": "workspace:*",

docs/tsconfig.json

@@ -4,9 +4,6 @@
         "baseUrl": ".",
         "resolveJsonModule": true,
         "esModuleInterop": true,
-        "types": [
-            "anu-vue/volar"
-        ],
         "lib": [
             "esnext",
             "dom",
@@ -29,4 +26,4 @@
         "**/*.md",
         ".vitepress/shims.d.ts"
     ]
-}
+}

docs/ui/form.md

@@ -13,3 +13,12 @@
 :::tip
 We are not using `.a-card-spacer` class here because we get spacing between card body via Anu's grid system 😇
 :::
+
+<!-- 👉 Form Validation using Zod -->
+::::card Form Validation using Zod
+
+:::code UIFormValidationZod
+<<< @/components/ui/form/UIFormValidationZod.vue
+:::
+
+::::

package.json

@@ -26,6 +26,7 @@
     "@typescript-eslint/parser": "^5.50.0",
     "@vue-macros/volar": "^0.8.0",
     "bumpp": "^8.2.1",
+    "concurrently": "^7.6.0",
     "defu": "^6.1.2",
     "eslint": "^8.33.0",
     "eslint-config-airbnb-base": "^15.0.0",

packages/anu-vue/package.json

@@ -37,7 +37,7 @@
   ],
   "types": "./dist/types",
   "scripts": {
-    "dev": "pnpm gen-comp-meta && vite build --watch",
+    "dev": "pnpm gen-comp-meta && concurrently \"vite build --watch\" \"vue-tsc --declaration --emitDeclarationOnly --watch\"",
     "gen-comp-meta": "na tsx ../../scripts/gen-component-meta.ts",
     "gen-volar": "na tsx ../../scripts/gen-volar.ts",
     "build": "pnpm gen-volar && pnpm gen-comp-meta && vite build && vue-tsc --declaration --emitDeclarationOnly",
@@ -78,4 +78,4 @@
     "@vueuse/core": "^9.6.0",
     "vue-router": "4"
   }
-}
+}

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { baseInputProps } from './props'
+import type { baseInputSlots } from './slots'
 import { ALoader } from '@/components/loader'
 import { useConfigurable } from '@/composables/useConfigurable'
 import { useSpacing } from '@/composables/useSpacing'
@@ -16,6 +17,8 @@ defineOptions({
   name: 'ABaseInput',
 })
 
+defineSlots<typeof baseInputSlots>()
+
 const attrs = useAttrs()
 
 const spacing = useSpacing(toRef(props, 'spacing'))

packages/anu-vue/src/components/base-input/index.ts

@@ -1,2 +1,3 @@
 export { default as ABaseInput } from './ABaseInput.vue'
 export * from './props'
+export * from './slots'

packages/anu-vue/src/components/base-input/slots.ts

@@ -0,0 +1,14 @@
+export const baseInputSlots = {
+  'label': {},
+  'prepend': {},
+  'prepend-inner': {},
+  'append-inner': {},
+  'append': {},
+  'bottom': {},
+  'default': {
+    id: String() as string | undefined,
+    readonly: Boolean(),
+    disabled: Boolean(),
+    class: Object as any,
+  },
+}

packages/anu-vue/src/components/card/ACard.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { ATypography } from '../typography'
 import { cardProps } from './props'
+import type { cardSlots } from './slots'
+import { cardTypographySlots } from './slots'
 import { ALoader } from '@/components/loader'
 import { isTypographyUsed } from '@/components/typography/utils'
 import { ConfigurableValue, useConfigurable } from '@/composables/useConfigurable'
@@ -13,6 +15,8 @@ defineOptions({
   name: 'ACard',
 })
 
+defineSlots<typeof cardSlots>()
+
 const slots = useSlots()
 
 const spacing = useSpacing(toRef(props, 'spacing'))
@@ -73,7 +77,7 @@ else
       >
         <!-- ℹ️ Recursively pass down slots to child -->
         <template
-          v-for="name in Object.keys($slots).filter(slotName => slotName !== 'default')"
+          v-for="name in Object.keys(cardTypographySlots)"
           #[name]="slotProps"
         >
           <!-- ℹ️ v-if condition will omit passing slots. Here, we don't want to pass default slot. -->

packages/anu-vue/src/components/card/index.ts

@@ -1,2 +1,3 @@
 export { default as ACard } from './ACard.vue'
 export * from './props'
+export * from './slots'

packages/anu-vue/src/components/card/slots.ts

@@ -0,0 +1,14 @@
+import { typographySlots } from '@/components/typography/slots'
+import { removeKeys } from '@/utils/helpers'
+
+// TODO: Fix type
+
+export const cardOwnSlots = {
+  default: {},
+} as const
+export const cardTypographySlots = removeKeys(typographySlots, ['default'])
+
+export const cardSlots = {
+  ...cardOwnSlots,
+  ...cardTypographySlots,
+} as const

packages/anu-vue/src/components/list-item/AListItem.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { listItemProps } from './props'
+import type { listItemSlots } from './slots'
 import { AAvatar } from '@/components/avatar'
 import { ATypography } from '@/components/typography'
 import { ConfigurableValue, useConfigurable } from '@/composables/useConfigurable'
@@ -18,6 +19,8 @@ defineOptions({
   name: 'AListItem',
 })
 
+defineSlots<typeof listItemSlots>()
+
 const { getLayerClasses } = useLayer()
 
 // TODO: Might need to handle `undefined` as value of `_titleProp`
@@ -48,44 +51,59 @@ const { styles, classes } = getLayerClasses(
         : '',
     ]"
   >
-    <!-- 👉 Slot: prepend -->
-    <slot name="prepend">
-      <i
-        v-if="props.icon && !props.iconAppend"
-        class="text-xl"
-        :class="props.icon"
-        @click="$emit('click:icon')"
-      />
-      <AAvatar
-        v-if="props.avatarProps && !props.avatarAppend"
-        v-bind="props.avatarProps"
-        @click="$emit('click:avatar')"
-      />
-    </slot>
-
-    <!-- 👉 Slot: prepend -->
-    <slot name="item">
-      <ATypography
-        class="flex-grow"
-        :subtitle="props.subtitle"
-        :text="props.text"
-        :title="props.title ? Object.values(_titleProp) as ConfigurableValue : undefined"
-      />
-    </slot>
-
-    <!-- 👉 Slot: append -->
-    <slot name="append">
-      <i
-        v-if="props.icon && props.iconAppend"
-        class="text-xl"
-        :class="props.icon"
-        @click="$emit('click:iconAppend')"
-      />
-      <AAvatar
-        v-if="props.avatarProps && props.avatarAppend"
-        v-bind="props.avatarProps"
-        @click="$emit('click:avatarAppend')"
-      />
+    <slot
+      :item="props"
+      :attrs="$attrs"
+    >
+      <!-- 👉 Slot: prepend -->
+      <slot
+        name="prepend"
+        :item="props"
+        :attrs="$attrs"
+      >
+        <i
+          v-if="props.icon && !props.iconAppend"
+          class="text-xl"
+          :class="props.icon"
+          @click="$emit('click:icon')"
+        />
+        <AAvatar
+          v-if="props.avatarProps && !props.avatarAppend"
+          v-bind="props.avatarProps"
+          @click="$emit('click:avatar')"
+        />
+      </slot>
+      <!-- 👉 Slot: default slot -->
+      <slot
+        name="item"
+        :item="props"
+        :attrs="$attrs"
+      >
+        <ATypography
+          class="flex-grow"
+          :subtitle="props.subtitle"
+          :text="props.text"
+          :title="props.title ? Object.values(_titleProp) as ConfigurableValue : undefined"
+        />
+      </slot>
+      <!-- 👉 Slot: append -->
+      <slot
+        name="append"
+        :item="props"
+        :attrs="$attrs"
+      >
+        <i
+          v-if="props.icon && props.iconAppend"
+          class="text-xl"
+          :class="props.icon"
+          @click="$emit('click:iconAppend')"
+        />
+        <AAvatar
+          v-if="props.avatarProps && props.avatarAppend"
+          v-bind="props.avatarProps"
+          @click="$emit('click:avatarAppend')"
+        />
+      </slot>
     </slot>
   </li>
 </template>

packages/anu-vue/src/components/list-item/slots.ts

@@ -0,0 +1,20 @@
+import type { ListItemProps } from './props'
+
+export const listItemSlots = {
+  default: {
+    item: Object as unknown as ListItemProps,
+    attrs: Object,
+  },
+  prepend: {
+    item: Object as unknown as ListItemProps,
+    attrs: Object as unknown,
+  },
+  item: {
+    item: Object as unknown as ListItemProps,
+    attrs: Object as unknown,
+  },
+  append: {
+    item: Object as unknown as ListItemProps,
+    attrs: Object as unknown,
+  },
+} as const