Varlet UI Vue3 组件库 3.6 发布 | 支持 Zod 验证、新增多个组件

写在前面

同学们大家好，首先感谢大家的支持和鼓励，社区同学们的支持和鼓励是我们做开源的最大动力。自上一次发布 Varlet UI^[1] 的相关更新信息又过了半年的时间了，这半年期间 Varlet UI 在社区同学的努力下已经从 v3.2 跨越到了 v3.6。以下列举了近期主要的功能特性变更。组件库更详细的介绍请参考官方文档^[2] 或 Github仓库^[3].

Zod 验证支持

Zod^[4] 是一个用于验证和解析 TypeScript 对象的库，它允许开发者定义数据模式（schemas）并对数据进行类型安全的验证。相比其他类似的验证库，Zod 的主要特点是与 TypeScript 深度集成，能够确保数据结构符合预期的类型，同时简化了错误处理和数据转换的过程，Varlet UI 的表单验证对其做了支持，使表单验证变的更加容易。

<script setup> 
import { ref } from 'vue' 
import { z } from 'zod' 

const user = ref({ 
  name: '', 
  email: '', 
  password: '', 
  repeatPassword: '' 
}) 

function handleSubmit(valid) { 
  console.log(valid) 
} 
</script>

<template> 
  <var-form @submit="handleSubmit"> 
    <var-space direction="column" size="large"> 
      <var-input 
        placeholder="Name" 
        :rules="z.string().min(1, 'Name required')" 
        v-model="user.name" 
      /> 
      
      <var-input 
        placeholder="Email" 
        :rules="z.string().email('Email format error')" 
        v-model="user.email" 
      /> 
      
      <var-input 
        type="password" 
        placeholder="Password" 
        :rules="z.string().min(6, 'Password must be at least 6 characters')" 
        v-model="user.password" 
      /> 
      
      <var-input 
        type="password" 
        placeholder="Confirmation Password" 
        :rules="[
          z.string().min(6, 'Confirmation password must be at least 6 characters'), 
          v => v === user.password || 'Does not match password'
        ]" 
        v-model="user.repeatPassword" 
      /> 
      
      <var-button type="primary" native-type="submit">Submit</var-button> 
    </var-space> 
  </var-form> 
</template>

原子化 CSS 支持

为了与原子化 CSS 框架更好的集成使用，我们提供了常见的 CSS 原子化框架预设，这使访问组件库的基础样式变量更加容易，并且一致化了页面响应式断点。

<template> 
  <div class="text-on-primary bg-primary text-md">hello</div> 
  <div class="text-on-primary-container bg-primary-container text-lg">world</div> 
  <div class="bg-primary sm:bg-info md:bg-warning lg:bg-danger xl:bg-success">
    varlet
  </div> 
</template>

我们同时也支持了 hsl 变量，这使得调整颜色的透明度变得更加容易。

<template> 
  <div class="bg-hsl-primary/50 text-hsl-text/70">
    hello
  </div>
</template>

Unocss 集成

# npm 
npm i @varlet/preset-unocss -D 
# yarn 
yarn add @varlet/preset-unocss -D 
# pnpm 
pnpm add @varlet/preset-unocss -D

// uno.config.ts 
import { defineConfig, presetUno } from 'unocss' 
import { presetVarlet } from '@varlet/preset-unocss' 

export default defineConfig({ 
  presets: [presetUno(), presetVarlet()] 
})

Tailwindcss 集成

# npm 
npm i @varlet/preset-tailwindcss -D 
# yarn 
yarn add @varlet/preset-tailwindcss -D 
# pnpm 
pnpm add @varlet/preset-tailwindcss -D

// tailwind.config.js 
import { presetVarlet } from '@varlet/preset-tailwindcss' 

export default { 
  content: [ 
    './index.html', 
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ], 
  presets: [presetVarlet()] 
}

组件变更

Switch 新的变体

Varlet UI Vue3 组件库 3.6 发布 | 支持 Zod 验证、新增多个组件 — image.png

新组件 AutoComplete

用于输入框自动完成功能。

新组件 Code

代码块组件，用于代码着色

新组件 Alert

用于提示信息

Options API 支持

我们为大多数的组件支持了 Options 配置使用的方式，以简化组件使用。

<script setup> 
import { ref } from 'vue' 

const value = ref([]) 
const options = ref([ 
  { label: '吃饭', value: 0 }, 
  { label: '睡觉', value: 1 }, 
  { label: '游戏', value: 2, disabled: true }, 
]) 
</script> 

<template> 
  <var-checkbox-group v-model="value" :options="options" /> 
  <div>当前的值: {{ value }}</div> 
</template>