ui-vuivui

Web Component vui vẻ cho các thao tác thường gặp. Mỗi thẻ làm việc thật — chỉ có lớp “da” là trò chơi.

Ném file vào rổ · <vv-basket-upload>

Kéo file từ máy vào thẻ (hoặc bấm nút — trên điện thoại chỉ có cách này) — file thành quả bóng và bay vào rổ.

Thử nghiệm

Âm thanh bật/tắt bằng nút loa trên thẻ. Bật “Giảm chuyển động” trong cài đặt máy để xem chế độ không hoạt hình.

Sự kiện


          

          

            
Cách dùng


import { xhrUploader } from 'ui-vuivui';
const up = document.querySelector('vv-basket-upload');
up.uploader = xhrUploader('/api/upload', { fieldName: 'file' });
up.addEventListener('vv-uploaded', (e) => console.log(e.detail.result));

<vv-basket-upload multiple sound accept="image/*" max-size="10MB">
</vv-basket-upload>

          

        

      

    


    
    

      
Bắn OTP bằng ná · <vv-slingshot-otp>

      
Giữ một số, kéo xuống để căng dây và nhắm — đường chấm xanh là sẽ trúng ô. Chạm nhẹ một số để bắn tự động, hoặc gõ / dán mã.

      

        
        

          

            
Thử nghiệm

            
Mã đúng của máy chủ demo: 

            
Trong app thật, mã được gửi qua SMS/email và chỉ máy chủ biết. Thẻ không bao giờ báo đúng/sai từng chữ số — chỉ kiểm tra cả mã một lần.

            
            
            
            

          

          

            
Sự kiện

            

          

          

            
Cách dùng


import { jsonVerifier } from 'ui-vuivui';
const otp = document.querySelector('vv-slingshot-otp');
// Máy chủ nhận { code } và trả { ok: true|false, message? }
otp.verifier = jsonVerifier('/api/otp/verify');
otp.addEventListener('vv-continue', () => location.href = '/app');

<vv-slingshot-otp length="6" name="Lan" sound></vv-slingshot-otp>

          

        

      

    

    
    

      
Đăng nhập Halloween · <vv-halloween-login>

      
Bấm công tắc ☀/🌙 để sang đêm Halloween. Ban đêm, nút con mắt thành đèn pin: bật lên rồi rê chuột (hoặc chạm) — mật khẩu chỉ đọc được ở chỗ đèn chiếu. Thử chiếu vào bí ngô và con nhện.

      
      

        

          
Thử nghiệm

          
Tài khoản demo: 

          
          
          
          

          
Sự kiện không bao giờ chứa mật khẩu. Form nằm ngoài shadow DOM để trình quản lý mật khẩu nhận ra.

        

        

          

            
Sự kiện

            

          

          

            
Cách dùng


import { jsonAuthenticator } from 'ui-vuivui';
const login = document.querySelector('vv-halloween-login');
// Máy chủ nhận { email, password } → trả { ok, message? }
login.authenticator = jsonAuthenticator('/api/login');
login.addEventListener('vv-login', () => location.href = '/app');

<vv-halloween-login theme="auto" forgot-href="/quen-mat-khau"
  signup-href="/dang-ky" sound></vv-halloween-login>

          

        

      

    

    
    

      
Captcha vui · <vv-fun-captcha>

      
Bấm ô vuông, chơi một trò kéo-thả nhỏ. Trong lúc đó trình duyệt giải một bài toán chống bot (bằng chứng công việc) — máy chủ mới là bên kiểm tra thật. Trò chơi chỉ để vui: chạm nhẹ hoặc nhấn Enter là qua.

      

        

          
Form thử: gửi lời chào

          
Chế độ máy chủ: 

          

            
            
            
          

          

          

        

        

          

            
Thử nghiệm

            
            
            
            

          

          

            
Sự kiện

            

          

          

            
Cách dùng


import { powSolver } from 'ui-vuivui';
document.querySelector('vv-fun-captcha').solver =
  powSolver('/api/pow/challenge');

<form> …
  <vv-fun-captcha name="captcha" required></vv-fun-captcha>
</form>

// Máy chủ (Cloudflare Worker / Node):
import { createPowChallenge, verifyPow } from 'ui-vuivui/server';

          

        

      

    

    
    

      
Máy in tham ăn · <vv-print>

      
Kéo tờ giấy vào miệng máy in (hoặc chạm nhẹ / bấm “In ngay”) → máy nhai rồi nhả trang ra → hộp thoại in của trình duyệt mở. Có thể thả file PDF, ảnh, ghi chú vào máy in.

      

        

          

            
Phiếu bài tập — Toán lớp 3

            
Họ tên: 

            
    
              
  1. 12 + 7 = 
    2. 
              
  2. 45 − 18 = 
    3. 
              
  3. 6 × 8 = 
    4. 
              
  4. 72 : 9 = 
    5. 
            

          

          
        

        

          

            
Thử nghiệm

            
            
            
Trình duyệt luôn hỏi lại bằng hộp thoại in — không trang web nào được tự in im lặng. Thẻ cũng không biết bạn đã bấm In hay Hủy.

          

          

            
Nâng cao: in thẳng qua chương trình trên máy

            
Chạy trên máy tính của bạn (macOS/Linux, cần Node):
node tools/print-agent.mjs --origin 
rồi dán mã bí mật nó in ra. Chỉ in được file (PDF/ảnh/văn bản); in phiếu / cả trang vẫn dùng hộp thoại.

            

              
              
              
            

            
Đang dùng: hộp thoại in của trình duyệt.

          

          

            
Sự kiện

            

          

          

            
Cách dùng


<!-- in một phần trang -->
<vv-print target="#phieu" doc-title="Phiếu bài tập"></vv-print>

<!-- in một tài liệu; cho thả file -->
<vv-print src="/de/toan-3.pdf" accept-files sound></vv-print>

// in thẳng qua chương trình trên máy (chỉ file):
import { agentPrintHandler } from 'ui-vuivui';
el.printHandler = agentPrintHandler({ token: 'mã-bí-mật' });

          

        

      

    

    
    

      
Ném bóng xác nhận · <vv-basket-shot>

      
Một cú ném để xác nhận việc gì đó (vd. trước khi in). Giữ quả bóng, di chuyển tới chỗ đứng hợp lý — đường chấm xanh là sẽ vào — rồi thả tay. Gần quá, xa quá hay ngay dưới rổ đều trượt. Chạm nhẹ hoặc Enter là ném chuẩn.

      

        
        

          

            
Thử nghiệm

            
            

          

          

            
Sự kiện