@ptengine/ui-vue

@ptengine/ui 的 Vue 3 包装层。由构建自动生成，不手写 —— src/components.ts 是 Stencil 的 Vue output target 在 pnpm build 时产出的。

安装

npm i @ptengine/ui-vue

样式表

不用手动引：第一个组件连上页面时，会把设计变量（ptengine-ui.css 的内容）自动挂到 document 上。

服务端渲染的项目建议手动引一次，否则 JS 到达之前首屏没有样式、会闪一下。引了的话自动注入会跳过。 放在 main.ts 里（Nuxt 见下面的 Nuxt 一节），并把 @ptengine/ui 装成直接依赖（npm i @ptengine/ui，pnpm 下间接依赖找不到）：

import '@ptengine/ui/dist/ptengine-ui/ptengine-ui.css';

用法

<script setup lang="ts">
import { PtButton, PtInput } from '@ptengine/ui-vue';

const value = ref('');
</script>

<template>
  <PtInput v-model="value" />
  <PtButton variant="brand">提交</PtButton>
</template>

表单类组件已配好 v-model：文本控件绑 value，勾选类绑 checked， 切换按钮（PtToggle）绑 pressed，折叠面板（PtCollapsible）绑 open， 出口都是内核的 ptChange 事件。

事件在模板里写成短横线形式：@pt-change、@pt-close。

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@ptengine/ui/dist/ptengine-ui/ptengine-ui.css'],
  build: { transpile: ['@ptengine/ui-vue', '@ptengine/ui'] }
});

服务端渲染开箱可用，组件在服务端就渲染成 HTML。

轻提示（toast）

命令式的 toast() 从 @ptengine/ui/toast 导入。 <PtToaster /> 挂在根组件末尾一次即可；不挂也能用， toast() 会在 <body> 末尾建一个：

import { PtToaster } from '@ptengine/ui-vue';
import { toast } from '@ptengine/ui/toast';

// App.vue 里：<PtToaster position="top-center" rich-colors />
toast.success('已保存');

版本

与 @ptengine/ui 锁步发版、共用一个版本号。要求 Vue ≥ 3.4。