Vue 核心

Vue 3. 基本UI组件.

* 特性

• 树摇:只导入您使用的东西。 导入单个组件不会捆绑图书馆的其余部分.
• 易控: 默认样式使用零特异性(:where())),所以你自己的CSS总是获胜.

* 安装

npm install @digitalwalletcorp/vue-core @digitalwalletcorp/vue-svg-icons
# or
yarn add @digitalwalletcorp/vue-core @digitalwalletcorp/vue-svg-icons

所需经费

• Vue 3.5.29+ (英语): 道具与 Vue 键入 ClassValue,自Vue 3.5.29起出口.
• @ 数码walletcorp/vue- svg- icons 1. 15.3+: 用于组件中的图标.

使用量

使用组件有三种方式.

1. 单独进口部件

<script setup lang="ts">
import { CopyButton } from '@digitalwalletcorp/vue-core';
</script>

<template>
  <CopyButton value="Order #12345" />
</template>

2. 在全球登记所有组成部分(Vue)

// main.ts
import { createApp } from 'vue';
import { registerComponents } from '@digitalwalletcorp/vue-core/register';
import App from './App.vue';

const app = createApp(App);
registerComponents(app);
app.mount('#app');

3. 全球登记册组成部分(纳克特)

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@digitalwalletcorp/vue-core/nuxt']
});

QQ 类型

每个组件的道具、事件和槽作为命名类型导出 <Component>Props, (中文(简体) ), <Component>Emits 财务报告和审定财务报表 <Component>Slots,例如 ModalDialogProps 财务报告和审定财务报表 ModalDialogEmits。 。 。 . 将组件包裹在自己的组件中时使用.

<script setup lang="ts">
import { ModalDialog } from '@digitalwalletcorp/vue-core';
import type { ModalDialogProps } from '@digitalwalletcorp/vue-core';

const props = defineProps<ModalDialogProps>();
</script>

<template>
  <ModalDialog v-bind="props" class="app-dialog" />
</template>

QQ 样式表

导入样式表以确保默认对齐和图标样式.

• 阴: 导入您的条目文件 .

// main.ts
import '@digitalwalletcorp/vue-core/style.css';
import '@digitalwalletcorp/vue-svg-icons/style.css'; // Required for components using icons from vue-svg-icons

• 数值 : 添加到您的配置数组中 .

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@digitalwalletcorp/vue-core/style.css',
    '@digitalwalletcorp/vue-svg-icons/style.css' // Required for components using icons from vue-svg-icons
  ]
});

XQ 图标样式

诸如: AccordionFieldset 依赖 @digitalwalletcorp/vue-svg-icons (中文(简体) )。导入其样式表可确保图标与文本保持一致.

• 大小

文本周围的空格,如垫子、空白和边距,设置在 em,这样它们就可以跟随您的应用程序的字体大小. 默认是 em 在字体大小为 12px。 。 。 . 线条元素(边框、轮廓、阴影)和非文本组件大小设置在 px。 。 。 .

适应您的应用程序

QQ 暗模式和主题支持

组件会自动适应您的应用程序的色彩策略( 在本地支持光和暗模式) .

• 跟随OS设置 : 添加 :root { color-scheme: light dark; } 您的全球CSS.
• 自定义主题切换 : 改变CSS color-scheme 属性在 :root 或母容器(例如, color-scheme: dark) (中文(简体) ). 这些组件将自动切换.
• 无主题切换 : 添加 :root { color-scheme: light; } 到您的全局CSS,组件以光模式显示.

⚠️ 声明 color-scheme 即使你不切换主题 此库使用 CSS light-dark() 函数用于主题。 一些构建工具,当优化旧浏览器时,需要 color-scheme 声明以正确处理这些样式。 没有它,默认样式(如背景和边框)可能在生产建设中缺失,即使它们在开发服务器上出现正确. 为了防止这种情况,请声明 color-scheme 在您的全球CSS.

自定义样式( E)--dwui-* 变量)

默认样式使用 CSS 变量(--dwui-*)和零特性选择器(:where()),使其易于被推翻. 每个组件的变量列于其文档中. 文档/dwui-变量.css 列出所有带有默认值,按它们所适用的组件分组。 将您想要更改的行复制为自己的 dwui-variables.css。 。 。 .

以下默认样式不使用 :where()。要推翻它们,请使用更具体的CSS规则.

我们建议建立一个 dwui-variables.css 将您的应用程序设计符号映射到库中的文件 --dwui-* 变量,然后在库样式表后导入。 如果你同时使用 vue-forms 财务报告和审定财务报表 vue-core,可以使用单曲 dwui-variables.css 用于两个库的文件,因为它们共享常见变量,如用于焦点环的变量.

/* dwui-variables.css */
:root {
  --dwui-background-tab-header: var(--app-tab-header-background);
  --dwui-color-text-tab-header: var(--app-tab-header-text);
  --dwui-background-tab-header-selected: var(--app-tab-header-selected-background);
  --dwui-color-text-tab-header-selected: var(--app-tab-header-selected-text);
}

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@digitalwalletcorp/vue-core/style.css',
    '@digitalwalletcorp/vue-svg-icons/style.css',
    '@/assets/css/default.css', // your global CSS
    '@/assets/css/dwui-variables.css'
  ]
});

QQ 全应用程序选项VueCore(中文(简体) )

每个页面上相同的设置,例如: DataTable 或小吃栏上的时间段,可以对整个应用程序设定一次,而不是传递给每个组件. 安装 VueCore 插件为 app.use 把选择权交给它. 一个道具胜过全应用程序的值,如果没有两者之一,则使用库的默认值.

// Vue: main.ts
import { VueCore } from '@digitalwalletcorp/vue-core';

app.use(VueCore, {
  dataTable: {
    labels: { totalCount: 'Total', totalUnit: 'records', noData: 'No data' },
    sortMode: 'page'
  }
});

// Nuxt: plugins/vue-core.ts
import { VueCore } from '@digitalwalletcorp/vue-core';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueCore, {
    dataTable: {
      labels: { totalCount: 'Total', totalUnit: 'records', noData: 'No data' },
      sortMode: 'page'
    },
    snackbar: {
      // The timezone the user selected. A ref or a function is read each time a snackbar is shown.
      timezone: () => userSession.timezone
    }
  });
});

安装 VueCore 还连接从代码显示的对话框、窗口和小吃栏到您的应用程序,所以插件和 provided 值,如i18n或内部的商店. 仅需此选项即可安装 .

要设定只用于部分应用程序的选项, provide 他们与 vueCoreOptionsKey 包含在以上组件中.

QQ 帮助函数

对话框,小吃栏和浮动窗口从代码中显示,这样您就可以从点击处理器或商店动作中调用它们,而不将组件放入模板.

import { showConfirmationDialog, showSnackbar } from '@digitalwalletcorp/vue-core';

const onClickDelete = async () => {
  const result = await showConfirmationDialog('Do you want to delete this item?', { title: 'Delete item' });
  if (result === 'yes') {
    await deleteItem();
    showSnackbar('The item has been deleted.', { duration: 5000 });
  }
};

帮助您执行组件的函数,例如等待元素出现或找到第一个聚焦的字段,列在 组件助手。 。 。 .

许多组件和助手函数接受文本标签为 LabelText,这是 string 函数 () => string。 。 。 . 通过一个函数,可以提供动态文本,以更新应用程序的语境,例如在使用i18n库时. 见 标签助手 更多细节.

组件

许可证

这个项目根据麻省理工学院的许可证获得许可。 见 自由主义 详细文件.