验证码组件

packages/components/captcha/index.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="ps-send" :class="[size ? 'ps-send--' + size : '']" @click="onClick" :disabled="isDisabled"
+    <div class="ps-send" :class="{
+        ['ps-send--'+size]: size? true: false,
+        ['ps-send--border']: border
+    }" @click="onClick" :disabled="isDisabled"
         :loading="isLoading" type="button" size="small">
         {{ text }}
     </div>
@@ -20,6 +23,7 @@ const props = withDefaults(
         runText?: string
         loadingText?: string
         resetText?: string
+        border?: boolean
         size?: "small" | "big"
     }>(),
     {
@@ -27,6 +31,7 @@ const props = withDefaults(
         initText: "获取验证码",
         loadingText: "正在发送",
         resetText: "重新获取",
+        border: false,
         duration: 60,
     },
 )

packages/playground/components.d.ts

@@ -5,7 +5,7 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    Panel: typeof import('./src/components/Panel.vue')['default']
     PsCaptcha: typeof import('@princess-ui/components/captcha')['PsCaptcha']
   }
 }

packages/playground/package.json

@@ -17,6 +17,8 @@
     "typescript": "^4.5.4",
     "unplugin-vue-components": "^0.19.5",
     "vite": "^2.9.9",
-    "vue-tsc": "^0.34.7"
+    "vite-plugin-windicss": "^1.8.4",
+    "vue-tsc": "^0.34.7",
+    "windicss": "^3.5.4"
   }
 }

packages/playground/src/App.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
-
 function send(start: () => void, done: (isDone: boolean) => void) {
     start()
     setTimeout(() => {
@@ -12,23 +8,39 @@ function send(start: () => void, done: (isDone: boolean) => void) {
 </script>
 
 <template>
+    <Panel name="验证码">
+        <div class="bg-white px-10px py-5px rounded-8px flex">
+            <input type="text" class="outline-0 flex-1" placeholder="请输入验证码">
             <ps-captcha @send="send" :duration="5">sada</ps-captcha>
-    <ps-captcha size="small" @send="send" :duration="5">sada</ps-captcha>
+        </div>
-    <ps-captcha size="big" @send="send" :duration="5">sada</ps-captcha>
+    </Panel>
+    <Panel name="带边框的验证码" desc="带了个小边框">
+        <div class="bg-white px-10px py-5px rounded-8px flex">
+            <input type="text" class="outline-0 flex-1" placeholder="请输入验证码">
+            <ps-captcha @send="send" border :duration="5">sada</ps-captcha>
+        </div>
+    </Panel>
 </template>
 
 <style>
-html,body{
+html,
+body {
     margin: 0;
     padding: 0;
 }
+
 #app {
     display: flex;
     justify-content: center;
+    flex-direction: column;
     align-items: center;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     height: 100vh;
 }
+
+.card{
+    margin-bottom: 25px;
+}
 </style>

packages/playground/src/components/HelloWorld.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

packages/playground/src/components/Panel.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="card">
+    <div class="text-left p-15px font-bold flex-shrink-0 bg-light-700">
+      <span class="text-size-16px">
+        {{ name }}
+      </span>
+      <span class="text-size-12px pl-5px text-gray-400 overflow-ellipsis">
+        {{ desc }}
+      </span>
+    </div>
+    <div class="flex-1 p-15px">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+export default defineComponent({
+  props: {
+    name: {
+      type: String as PropType<string>,
+      default: ""
+    },
+    desc: {
+      type: String as PropType<string>,
+      default: ""
+    },
+  }
+})
+</script>
+
+<style scoped>
+.card {
+  @apply bg-light-400 w-680px min-h-150px max-h-350px flex flex-col rounded-15px overflow-hidden;
+}
+</style>

packages/playground/src/main.ts

@@ -1,3 +1,6 @@
+import 'virtual:windi.css'
+import 'virtual:windi-devtools'
+
 import { createApp } from 'vue'
 import App from './App.vue'
 

packages/playground/vite.config.ts

@@ -4,6 +4,7 @@ import Components from 'unplugin-vue-components/vite'
 import * as _ from 'lodash'
 import fs from 'fs-extra'
 import * as path from 'path'
+import WindiCSS from 'vite-plugin-windicss'
 
 function exist(p) {
     return fs.existsSync(
@@ -15,6 +16,7 @@ function exist(p) {
 export default defineConfig({
     plugins: [
         vue(),
+        WindiCSS(),
         Components({
             dts: true,
             resolvers: [

packages/playground/windi.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'windicss/helpers'
+
+export default defineConfig({
+  preflight: false
+})

packages/theme-chalk/src/captcha.scss

@@ -2,12 +2,13 @@
 
 .ps-send {
     user-select: none;
-    color: blue;
     cursor: pointer;
     display: inline-block;
     padding: 4px 10px;
     border-radius: 15px;
-    border: 1px solid blue;
+    &--border {
+        border: 1px solid currentColor;
+    }
     &--small {
         font-size: 14px;
         padding: 2px 6px;

pnpm-lock.yaml

@@ -75,8 +75,10 @@ importers:
       typescript: ^4.5.4
       unplugin-vue-components: ^0.19.5
       vite: ^2.9.9
+      vite-plugin-windicss: ^1.8.4
       vue: ^3.2.25
       vue-tsc: ^0.34.7
+      windicss: ^3.5.4
     dependencies:
       lodash: 4.17.21
       vue: 3.2.36
@@ -86,7 +88,9 @@ importers:
       typescript: 4.6.4
       unplugin-vue-components: 0.19.5_vite@2.9.9+vue@3.2.36
       vite: 2.9.9
+      vite-plugin-windicss: 1.8.4_vite@2.9.9
       vue-tsc: 0.34.16_typescript@4.6.4
+      windicss: 3.5.4
 
   packages/princess-ui:
     specifiers: {}
@@ -494,7 +498,7 @@ packages:
       vite: ^2.5.10
       vue: ^3.2.25
     dependencies:
-      vite: 2.9.9_wcpnhpi5xopjmdpkm2r2ee7ige
+      vite: 2.9.9
       vue: 3.2.36
 
   /@volar/code-gen/0.34.16:
@@ -600,6 +604,30 @@ packages:
   /@vue/shared/3.2.36:
     resolution: {integrity: sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ==}
 
+  /@windicss/config/1.8.4:
+    resolution: {integrity: sha512-i4fFGFfZoRess6WMkauykHC3PFd9xKYVx7lSuLfMK7sgo6x3+l4dY42GbsWMHyLqH1sTMfyt1LgfXSIKYJozSA==}
+    dependencies:
+      debug: 4.3.4
+      jiti: 1.13.0
+      windicss: 3.5.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@windicss/plugin-utils/1.8.4:
+    resolution: {integrity: sha512-DqJVwAfzlgd8nYSNlmhXOey32pI8UwH7QiOWdFS/AR2O/q9oLDGHDn97Its/kZdfoyhi8ylwZNP2Pk0H7cihhQ==}
+    dependencies:
+      '@antfu/utils': 0.5.2
+      '@windicss/config': 1.8.4
+      debug: 4.3.4
+      fast-glob: 3.2.11
+      magic-string: 0.26.2
+      micromatch: 4.0.5
+      windicss: 3.5.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /accepts/1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -2481,6 +2509,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /jiti/1.13.0:
+    resolution: {integrity: sha512-/n9mNxZj/HDSrincJ6RP+L+yXbpnB8FybySBa+IjIaoH9FIxBbrbRT5XUbe8R7zuVM2AQqNMNDDqz0bzx3znOQ==}
+    hasBin: true
+    dev: true
+
   /jju/1.4.0:
     resolution: {integrity: sha1-o6vicYryQaKykE+EpiWXDzia4yo=}
     dev: true
@@ -2541,6 +2574,10 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
+  /kolorist/1.5.1:
+    resolution: {integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==}
+    dev: true
+
   /last-run/1.1.1:
     resolution: {integrity: sha1-RblpQsF7HHnHchmCWbqUO+v4yls=}
     engines: {node: '>= 0.10'}
@@ -4242,6 +4279,20 @@ packages:
       vite: 2.9.9
     dev: true
 
+  /vite-plugin-windicss/1.8.4_vite@2.9.9:
+    resolution: {integrity: sha512-LSZAO8BZn3x406GRbYX5t5ONXXJVdqiQtN1qrznLA/Dy5/NzZVhfcrL6N1qEYYO7HsCDT4pLAjTzObvDnM9Y8A==}
+    peerDependencies:
+      vite: ^2.0.1
+    dependencies:
+      '@windicss/plugin-utils': 1.8.4
+      debug: 4.3.4
+      kolorist: 1.5.1
+      vite: 2.9.9
+      windicss: 3.5.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vite/2.9.9:
     resolution: {integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==}
     engines: {node: '>=12.2.0'}
@@ -4264,7 +4315,6 @@ packages:
       rollup: 2.74.1
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /vite/2.9.9_wcpnhpi5xopjmdpkm2r2ee7ige:
     resolution: {integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==}
@@ -4379,6 +4429,12 @@ packages:
       isexe: 2.0.0
     dev: true
 
+  /windicss/3.5.4:
+    resolution: {integrity: sha512-x2Iu0a69dtNiKHMkR886lx0WKbZI5GqvXyvGBCJ2VA6rcjKYjnzCA/Ljd6hNQBfqlkSum8J+qAVcCfLzQFI4rQ==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    dev: true
+
   /wrap-ansi/2.1.0:
     resolution: {integrity: sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=}
     engines: {node: '>=0.10.0'}