tiny-vue/examples/sites/demos/pc/webdoc/aui-adapter-en.md

Adapter AUI

Dependency mapping table

Currently, TinyVue is compatible with AUI. You only need to replace the package name and configure the style theme to get a consistent experience with AUI. The following is the mapping relationship between TinyVue packages and AUI packages.

TinyVue package	AUI package
@opentiny/vue	@aurora/vue
@opentiny/vue-renderless	@aurora/renderless
@opentiny/vue-theme	@aurora/theme
@opentiny/vue-theme-saas	@aurora/theme-sass
@opentiny/vue-icon	@aurora/vue-icon
@opentiny/vue-icon-saas	@aurora/vue-icon-saas

Using Saas themes

background

• With the prosperity of the application ecology, especially the mobile application ecology, and the development of diversified device ecology, ‘multi-terminal’ and ‘multi-theme’ are put on the agenda;
• The theme solution launched by the original AUI is too bloated (users need to set a bunch of cssvar variables to customize the theme, because the colors are not unified, and the threshold for configuring multiple themes is relatively high). Later, it will be based on [tailwindcss](https:// github.com/tailwindlabs/tailwindcss) Collect theme variables (simplifying developer configuration) and engineer them to make it easier to customize multiple themes. Currently, there is a relatively mature theme solution in the industry daisyui.

In view of the above reasons, the SaaS theme is launched. If you want to experience the SaaS theme, you can make packaging configuration changes according to the following documents:

method one

Option 1 requires additional installation of the following dependencies:

• @opentiny/vue-theme-saas Theme will make minor adjustments to existing component styles without affecting the original DOM structure and API.
• @opentiny/vue-icon-saas is an icon component matching the SaaS theme style.
• @opentiny/vue-design-saas is the design specification configuration matching the theme style of SaaS.

1. Install the SaaS theme package:

yarn add @opentiny/vue-theme-saas @opentiny/vue-icon-saas @opentiny/vue-design-saas
# Or npm install @opentiny/vue-theme-saas @opentiny/vue-icon-saas @opentiny/vue-design-saas

2. Switch to the SaaS theme package:

// (webpack) vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('@opentiny/vue-theme', '@opentiny/vue-theme-saas')
    config.resolve.alias.set('@opentiny/vue-icon', '@opentiny/vue-icon-saas')
  }
}

// (vite) vite.config.js
export default defineConfig({
  resolve: {
    alias: {
      '@opentiny/vue-theme': '@opentiny/vue-theme-saas',
      '@opentiny/vue-icon': '@opentiny/vue-icon-saas'
    }
  }
})

3. Switch to Saas design specification configuration:

<script setup>
  import { ConfigProvider } from '@opentiny/vue'
  import designSaasConfig from '@opentiny/vue-design-saas'
</script>

<template>
  <!-- Inject saas design specification configuration -->
  <config-provider :design="designSaasConfig">
    <my-app></my-app>
  </config-provider>
</template>

Method Two

Method 2 requires additional installation of the following dependencies:

• @opentiny/vue-theme-saas Theme will make minor adjustments to existing component styles without affecting the original DOM structure and API.
• @opentiny/vue-icon-saas is an icon component matching the SaaS theme style.
• @opentiny/vue-common-saas is an adaptation layer matching the SaaS theme style, and is inlined with the @opentiny/vue-design-saas of method 1.

1. Install the SaaS theme package:

yarn add @opentiny/vue-theme-saas @opentiny/vue-icon-saas @opentiny/vue-common-saas
# Or npm install @opentiny/vue-theme-saas @opentiny/vue-icon-saas @opentiny/vue-common-saas

2. Switch to the SaaS theme package:

// (webpack) vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('@opentiny/vue-theme', '@opentiny/vue-theme-saas')
    config.resolve.alias.set('@opentiny/vue-icon', '@opentiny/vue-icon-saas')
    config.resolve.alias.set('@opentiny/vue-common', '@opentiny/vue-common-saas')
  }
}

// (vite) vite.config.js
export default defineConfig({
  resolve: {
    alias: {
      '@opentiny/vue-theme': '@opentiny/vue-theme-saas',
      '@opentiny/vue-icon': '@opentiny/vue-icon-saas',
      '@opentiny/vue-common': '@opentiny/vue-common-saas'
    }
  }
})

Multi-mode introduction

TinyVue provides PC and Mobile component libraries. The two component libraries rely on the same external dependency @opentiny/vue. The component with the same name switches the component mode through tiny_mode. For SaaS business scenarios, TinyVue provides multi-terminal components based on tailwind. Based on TinyVue, a new multi-terminal mode is added to support business switching of components with the same name. By default, the component with the same name is desktop mode, that is, PC component.

Pattern classification

The AUI component library provides three component modes: desktop mode, mobile mode, multi-terminal mode

Mode	Mode introduction	Mode configuration
Desktop mode	Pure PC	pc
mobile mode	pure mobile	mobile
Multi-terminal mode	Multi-terminal consistency	mobile-first

Mode switch

AUI component mode setting priority

Single component switching > Mode transparent transmission > Global switching > Component default mode

Single component switching

You can configure the tiny_mode attribute on the component tag, specify the component mode, and the corresponding template will be selected for rendering:

• Desktop mode: pc
• Mobile mode: mobile
• Multi-terminal mode: mobile-first

Reference examples are as follows:

<tiny-button tiny_mode="mobile-first">Default button</tiny-button>

Global switch

By setting tiny_mode globally on Vue's prototype, you can specify the default mode for all components with the same name. After importing the Vue dependency in the project entry src/main.js file, add the following configuration:

// Vue 2.0
Vue.prototype.tiny_mode = { value: 'mobile-first' }

// Vue 3.0
app.config.globalProperties.tiny_mode = { value: 'mobile-first' }

Mode transparent transmission

If you want to switch modes in some areas of the page, such as card-level control, You can add the tiny_mode_root attribute to the outer AUI component to transparently transmit the tiny_mode configuration of the current AUI component to all child AUI components. The reference demo example is as follows:

<template>
  <div>
    <tiny-layout>
      <tiny-row tiny_mode="pc" tiny_mode_root>
        <tiny-button>PC button</tiny-button>
        <tiny-button type="primary" native-type="submit">Primary button</tiny-button>
        <tiny-button type="success">Success button</tiny-button>
        <tiny-button type="info">Information button</tiny-button>
        <tiny-button type="warning">Warning button</tiny-button>
        <tiny-button type="danger">Danger button</tiny-button>
      </tiny-row>
      <tiny-row tiny_mode="mobile-first" tiny_mode_root>
        <tiny-button>Multi-terminal button</tiny-button>
        <tiny-button type="primary" native-type="submit">Primary button</tiny-button>
        <tiny-button type="success">Success button</tiny-button>
        <tiny-button type="info">Information button</tiny-button>
        <tiny-button type="warning">Warning button</tiny-button>
        <tiny-button type="danger">Danger button</tiny-button>
      </tiny-row>
    </tiny-layout>
  </div>
</template>

<script>
  import { Button, Layout, Row } from '@opentiny/vue'

  export default {
    components: {
      TinyButton: Button,
      TinyLayout: Layout,
      TinyRow: Row
    }
  }
</script>