DOCSEARCHbyAlgolia
Submit Docs

TuniaoUI for vue3 uniapp

repository·master·Indexed 18 days ago

https://github.com/chinabugotech/tuniaoui-rc-vue3-uniapp

A comprehensive UI component library designed for the uniapp ecosystem using Vue 3 and TypeScript. It provides a consistent design language and a rich set of components and templates for cross-platform development targeting WeChat Mini Programs, App, and H5.

Tokens
82.1K
Snippets
359
Records
460
Agent score
62%

What's inside @tuniao/tnui-vue3-uniapp

  1. Overview of TuniaoUI vue3 uniapp

    master
    TuniaoUI vue3 uniapp is a UI component library built with uniapp, vue3, and TypeScript. It is designed to accelerate development by providing a wide range of components, including common form elements and information display components. It supports multiple platforms including 微信小程序 (WeChat Mini Programs), APP, and H5.

  2. Validate nested objects and arrays (Deep Rules)

    master

    To validate deep properties, use the fields property within an object or array type rule.

    Object Validation: Assign nested rules to a fields property. If the parent rule is not marked required, deep validation only runs if the field exists on the source.

    Array Validation:

    • Use fields to validate specific indices (e.g., 0, 1, 2).
    • Use defaultField to apply the same rule to every element in the array.

    Example (Deep Object):

    const descriptor = {
  address: {
    type: 'object',
    required: true,
    fields: {
      street: { type: 'string', required: true },
      city: { type: 'string', required: true },
      zip: { type: 'string', required: true, len: 8, message: 'invalid zip' },
    },
  },
  name: { type: 'string', required: true },
};

const validator = new Schema(descriptor);
validator.validate({ address: { street: 'Main St', city: 'NY', zip: '12345678' }, name: 'John' });

  3. Key features of TuniaoUI

    master

    TuniaoUI provides several core capabilities for developers:

    • Layout Elements: Includes basic layout tools like flex, grid, and float.
    • Color System: A complete integrated color system featuring 4 different color depth modes and 4 sets of gradient color schemes.
    • Icons: Over 700 unified style icons. Icons are provided as a separate npm package to allow for easier updates.
    • Components: 60+ selected components for rapid development.
    • Templates: A collection of high-quality, visually striking page templates.
    • Resources: Access to image assets via Yuque.
    • Documentation: Detailed usage documentation to guide implementation.

  4. Understand Lodash module formats

    master

    Lodash provides various builds and module formats to suit different project requirements:

    • Standard builds: lodash (full) and per-method packages.
    • ES6/Modern builds: lodash-es is recommended for smaller bundle sizes in modern environments, often used with babel-plugin-lodash or lodash-webpack-plugin.
    • Functional Programming: lodash/fp provides immutable, auto-curried, iteratee-first, and data-last methods.
    • AMD: lodash-amd for asynchronous module definition.

  5. Customize validation messages

    master

    You can provide custom error messages in several ways:

    1. Per Rule: Assign a message property directly to the rule. { name: { type: 'string', required: true, message: 'Name is required' } }
    2. Global/Schema-level: Use validator.messages(customMessages) to deep merge custom messages with defaults. This is useful for i18n.
    3. In Custom Validators: Access options.messages within your custom validator function to retrieve localized strings.

    Note: Messages can be strings, JSX, or functions (e.g., for vue-i18n).

  8. Configure Internationalization (I18n) in Day.js

    master

    Day.js supports internationalization, but locales are not included in the core bundle to keep the size small. You must load them on demand.

    To use a locale:

    1. Import the specific locale file.
    2. Set the locale globally using dayjs.locale('locale_name') OR use it for a specific instance using .locale('locale_name').
    import 'dayjs/locale/es' // load on demand

// Use Spanish locale globally
dayjs.locale('es') 

// Use Chinese Simplified locale in a specific instance
dayjs('2018-05-05').locale('zh-cn').format()

  11. Extend Day.js functionality with Plugins

    master

    Day.js is a minimalist library. To add new features (like advanced formatting), you must use plugins.

    To use a plugin:

    1. Import the plugin module.
    2. Register it using dayjs.extend(plugin_name).
    import advancedFormat from 'dayjs/plugin/advancedFormat' // load on demand

dayjs.extend(advancedFormat) // use plugin

dayjs().format('Q Do k kk X x') // more available formats

  12. Basic usage of async-validator

    master

    To use async-validator, define a descriptor object containing validation rules for each field. Pass this descriptor to a new Schema instance. You can then call the .validate() method using either a callback function or a Promise-based approach.

    Descriptor Structure

    Each field in the descriptor can define:

    • type: The expected data type (e.g., 'string', 'number').
    • required: A boolean indicating if the field must be present.
    • validator: A synchronous function (rule, value) => boolean or similar to perform custom validation.
    • asyncValidator: An asynchronous function (rule, value) => Promise for validations requiring external checks (like API calls).

    Validation Results

    • Callback Mode: The callback receives (errors, fields). errors is an array of all errors, and fields is an object keyed by field name containing arrays of errors specific to those fields.
    • Promise Mode: The Promise resolves on success. On failure, it rejects with an object containing { errors, fields }.
    import Schema from 'async-validator';

const descriptor = {
  name: {
    type: 'string',
    required: true,
    validator: (rule, value) => value === 'muji',
  },
  age: {
    type: 'number',
    asyncValidator: (rule, value) => {
      return new Promise((resolve, reject) => {
        if (value < 18) {
          reject('too young');
        } else {
          resolve();
        }
      });
    },
  },
};

const validator = new Schema(descriptor);

// Callback Usage
validator.validate({ name: 'muji' }, (errors, fields) => {
  if (errors) {
    // handle errors
    return;
  }
  // validation passed
});

// Promise Usage
validator.validate({ name: 'muji', age: 16 })
  .then(() => {
    // validation passed
  })
  .catch(({ errors, fields }) => {
    // handle errors
  });