@brumaombra/ui-vintage

浅而暗的主题 • 妇女 9个内地 • 妇女 reka UI 上的可访问原始

安装 • 妇女 使用量 • 妇女 显示大小写 • 妇女 构成部分 • 妇女 他们 • 妇女 组件目录 • 妇女 软件

为什么UI Vintage

UI Vintage是一个Nuxt 4模块和组件库,用于仪表板,表格,登陆页,覆盖,以及博客,它们应该看起来和感觉像一个产品. 它会给你一些低级原始(按钮,输入,选择,对话框,分页)和完整的构件(dashboard和落地贝壳,stat卡,数据表,一个完整博客),共享一组主题符号和一个运动词汇.

• 来源出版. 货包装有它的Vue和TypeScript源. 您的 Nuxt app 将它与您的代码一起编译, 所以没有单独的建筑文物 和每一个 Nuxt 集成(NuxtImg, (中文(简体) ), #components继续工作.
• 明确进口. 每一个组成部分都生活在自己的后路,例如: @brumaombra/ui-vintage/button没有什么是自动注册的,所以你的依赖 保持明显的和可动摇的树.
• 默认可访问. 互动原始人建立在 Reka 用户界面,在键盘支持下,重点管理和ARIA接线也包括在内.
• 尊重他人的动机. 泉水是纯净的CSS linear() 放松,每部动画在用户喜欢减少运动时会倒闭.
• 比原始人还要多. 基于承诺的对话和土司,仪表板和落地贝壳,数据表,一个完整的"Nuxt Content"博客,9个地块,以及一个可安装的有离线页面的应用程序.
• 准备好AI编码代理. 生成的组件目录( E)COMPONENTS.md)和代理指令(AGENTS.md货包里面的船.

安装

在已有的 Nuxt 4 app 中安装软件包的对等集成 。 样式表由Tailwind CSS v4所构建,组件使用Vue I18n作为标签,图标出自大相通:

npm install @brumaombra/ui-vintage @nuxt/image @nuxtjs/i18n tailwindcss @tailwindcss/vite @hugeicons/core-free-icons @hugeicons/vue

注册模块 Nuxt I18n 和 Tailwind Vite 插件 nuxt.config数字 :

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
    modules: [
        '@brumaombra/ui-vintage',
        '@nuxtjs/i18n'
    ],

    vite: {
        plugins: [
            tailwindcss()
        ]
    },

    i18n: {
        defaultLocale: 'en',
        locales: [{ code: 'en', language: 'en-US' }]
    }
});

就是这样:模块注入共享样式表,将源添加到 Nuxt 转录中,安装 @nuxt/image 当您的应用程序尚未注册时,将库信件合并到您的 i18n 设置中。 组件调用 useI18n(),所以即使是单语言应用程序也需要i18n设置. 使用博客或内容组件? 安装 @nuxt/content 我也一样.

使用量

使用组件

从他们的公共子路径导入组件 :

<script setup>
import { Button } from '@brumaombra/ui-vintage/button';
import { SingleValueCard } from '@brumaombra/ui-vintage/single-value-card';
import Money03Icon from '@hugeicons/core-free-icons/Money03Icon';
</script>

<template>
    <SingleValueCard label="Revenue" :value="48290" :icon="Money03Icon" :trend="12.4" trend-label="vs last month"
        :format-options="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }" />

    <Button variant="primary">Save changes</Button>
</template>

询问、确认和通知

对话、土司和繁忙的叠加 开始使用,所以你从来不把它们放在布局上:

import { showConfirmDialog } from '@brumaombra/ui-vintage/confirm-dialog';
import { showMessageToast } from '@brumaombra/ui-vintage/message-toast';
import { setBusy } from '@brumaombra/ui-vintage/busy-indicator';

// Resolves true or false with the user's choice
const confirmed = await showConfirmDialog({
    title: 'Delete project?',
    message: 'This action cannot be undone.',
    confirmButtonType: 'red'
});

if (confirmed) {
    // Keep the shared loading overlay visible while the request runs
    setBusy(true, { label: 'Deleting project...' });
    await deleteProject();
    setBusy(false);

    showMessageToast({ type: 'success', title: 'Project deleted', message: 'Everything was removed.' });
}

显示大小写

每个截图都来自 演示应用,每个都遵循您的 GitHub 主题(轻或暗).

按钮 变体、音调、大小、图标按钮和状态	表单 有校验、计数器以及取出日期和时间的字段
数据表 已打入的列、 选择、 动画排序和页码	数量 稳定卡 紧凑的 Stat 条和数数
土司 堆起起的烤面包 在徘徊中被刮去	确认对话框 与 Aync 处理器基于承诺的对话
博客家 装有统计器的英雄头和有特色的旋转木马	博客文章 贴有标签的细节、标签和共享边栏的邮页

构成部分

每个切入点,按目录分类。 每个名称也是它的导入子路径, 例如 @brumaombra/ui-vintage/data-table。 。 。 .

组件目录

COMPONENTS.md 记录每个入口:其导入行、道具和默认、事件、槽、帮助者和示例。 它来自源和软件包内的船只,所以你的应用程序总是可以读取它安装的版本 node_modules/@brumaombra/ui-vintage/COMPONENTS.md。 。 。 .

使用 AI 编码代理的 UI Vintage

货船 AGENTS.md, 一套短指令, 教编码代理重用 UI Vintage : 在写入 UI 之前读取目录, 选择正确的组件, 遵循库常规, 并检查结果 .

从应用程序自己的指令文件中指向您的代理, 所以它总是读取您安装的版本 :

• 代码、光标、 GitHub 副驾驶、双子座和其他读取工具 AGENTS.md数字 : 将此行添加到 AGENTS.md 在您的应用程序的根 :

  Before writing UI, read and follow node_modules/@brumaombra/ui-vintage/AGENTS.md.
  

• 克劳德代码 : 在您的应用程序中导入 CLAUDE.md数字 :

  @node_modules/@brumaombra/ui-vintage/AGENTS.md
  

说明书和带包的目录更新都一样,所以你再也不用复制了.

他们

键和暗模式

样式表定义了语义符号(background, (中文(简体) ), foreground, (中文(简体) ), card, (中文(简体) ), primary, (中文(简体) ), muted, (中文(简体) ), border,以及更多)用于两个主题. 暗模式遵循 .dark 课开始 <html>· ; ThemeSelector 为你设置,有光线、黑暗和自动模式。 扩展应用程序样式表中现有的 CSS 自定义属性, 而不是创建第二个符号系统 .

全页使用一个字体,即 --font-mono 符号(默认的系统单空),所以 font-mono 元素匹配文本。 在应用程序的任意样式表中设置您自己的一次 :

:root {
    --font-mono: 'JetBrains Mono', monospace;
}

品牌颜色

品牌颜色(按钮,焦点环,所选状态,侧边栏等)出自6个令牌,因此一个app可以在自己的样式表中替换默认的橙色,用于两个主题:

:root {
    --uv-primary-light: #c62d3a;
    --uv-primary-hover-light: #ad2230;
    --uv-primary-foreground-light: #ffffff; /* Text on the brand color */
    --uv-primary-dark: #ef5b67;
    --uv-primary-hover-dark: #f47d86;
    --uv-primary-foreground-dark: #260609;
}

库的默认没有具体性,所以无论风格表的顺序如何,这些都赢得了. 要改变运行时的颜色( 每个客户一个主题, 每个模式, 每个选定项目), 请在以下属性下设置相同的符号 : <html>,例如 :root[data-brand='teal'] { … },并切换属性。 在两个主题的品牌颜色上保持前地可读.

这个 standalone: 变体样式 已安装的应用程序( 从家用屏幕打开, 或从 Play Store 作为信任的网络活动打开) @media (display-mode: standalone),例如 standalone:hidden 在只属于浏览器的页脚上,或 standalone:h-dvh 在屏幕上,必须不滚动。 它不需要脚本,因此页面从不先闪出浏览器.

模块自动注入样式表。 仅当您需要控制加载顺序( 导入获得模块所注入的相同的样式表, 以及应用程序所使用的组件的类别) 时, 才明确导入 :

import '@brumaombra/ui-vintage/style.css';

LandingNavbar, (中文(简体) ), LandingFooter,以及 DashboardShell 接受 app-logo 财务报告和审定财务报表 app-logo-dark,所以你的标志也可以跟随主题.

动议

每个组件都使用相同的小词汇,您的应用程序可以重用:

• 减: ease-spring, (中文(简体) ), ease-bounce, (中文(简体) ), ease-out-expo,以及 ease-snappy。 。 。 .
• 表面 : uv-floating-motion (人口、菜单、工具提示), uv-modal-motion, (中文(简体) ), uv-overlay-motion, (中文(简体) ), uv-collapsible-motion,以及 uv-field (用于输入的重点环和无效状态).
• 动画 : animate-uv-pop, (中文(简体) ), animate-uv-fade-up, (中文(简体) ), animate-uv-shake, (中文(简体) ), animate-uv-shimmer, (中文(简体) ), animate-uv-float, (中文(简体) ), animate-uv-ping-soft, (中文(简体) ), animate-uv-word-in, (中文(简体) ), animate-uv-grow-x,以及 animate-uv-draw。 。 。 .
• 高度 : shadow-elevated-sm 结束 shadow-elevated-xl。 。 。 .

当用户喜欢减少运动时,所有持续时间都会倒闭. 尾风 v4 动画 scale, (中文(简体) ), rotate,以及 translate 作为独立的属性,故命名它们(不是 transform在自定义过渡中.

本地化

库字符串位于 uiVintage 名称空间,有英文、意大利文、法文、西班牙文、德文、葡萄牙文、中文、日文和俄文。 与 @nuxtjs/i18n 或 Vue I18n 配置,运行时插件将它们合并到您现有的作曲中,而不替换您的消息.

可安装应用程序

设定 uiVintage: { pwa: { name: 'Acme' } } 使应用程序可以安装,配备一个服务员,一个离线页面,每个语言的列表,推出通知,以及Android应用程序(信任的网络活动),没有额外的依赖性. 见 docs/pwa.md 每一个选项.

如何运作

模块注册时:

1. 喷出 src/styles.css 进入应用程序一次,只有 Tailwind 扫描应用程序使用的库文件(见下文).
2. 添加已发布的内容 src/ nuxt 转录目录.
3. 安装 @nuxt/image 当应用程序尚未注册时.
4. 注册库 i18n 插件,当 Vue I18n 出现时,该插件将本地语区消息合并.
5. 在iPhone和iPad上,添加 maximum-scale=1 因此Safari不会在一字段被点击时放大页面(人们仍然可以按到缩放)。 球场保持大小在每个设备上.
6. 与 pwa 设定,将服务工人和离线页写成建筑物的静态文件,并登记工人的生产.

只有应用程序所用的类

每一个构件,模块都遵循应用程序 @brumaombra/ui-vintage/... 通过库导入,并告诉Tailwind只扫描它接触到的文件,这在使用CSS的应用程序上将CSS削减了12%至59%. 仅发现从公共子路径的字面输入; 设置 uiVintage: { scanAllComponents: true } 以扫描整个库(例如,在调试缺失的类时)。 下方的文件 src/components/ 是实施细节,可能在不同版本之间有所改变.

软件

demo-app/ 是一个文档风格的 Nuxt 4 app , 显示每个组件的活预览和可复制代码标签, 概览页面上的活小程序, 与 Nuxt Content 构建的完整博客, 以及命令调色板(Ctrl/⌘ + K)跳入任意一行. 它从包里导入 file:..,因此它运行着与发布到npm相同的源.

它需要24.21节点或更新. Nuxt 内容使用内置 node:sqlite 模块而不是本地的 SQLite 构建.

# Install and start the demo
npm --prefix demo-app install
npm --prefix demo-app run dev

# Production build
npm --prefix demo-app run build

发展

没有构建步骤:已发布的文件是 module.mjs, (中文(简体) ), src/, (中文(简体) ), COMPONENTS.md,以及 AGENTS.md。在打开拉动请求前,检查发布工作流程运行情况:

# Type-check the published TypeScript and Vue source
npm run typecheck

# Run the tests (unit tests in Node, component tests inside the demo Nuxt app)
npm test

# Regenerate the component catalog after changing a public API
npm run docs:components

# Fail when COMPONENTS.md is out of date
npm run docs:components:check

新的切入点需要导出到 package.json 说明和类别 scripts/components-meta.mjs;目录生成器失败,直到他们有一个。 释放过程如下: .claude/skills/publish-npm/SKILL.md。 。 。 .

所需资源

• Nuxt 4和Vue 3.5或更新.
• 尾风 CSS v4 与 @tailwindcss/vite 登记在册 vite.plugins。 。 。 .
• @hugeicons/core-free-icons 4.3 或更新 @hugeicons/vue 1(您通过给 :icon 道具, 以及组件制造的道具。 将每个图标从自己的模块中导入,如上的例子: 包管使构造剖析出整个图标集.
• @nuxtjs/i18n 10(组件调用) useI18n(),每个链接都使 NuxtLinkLocale) (中文(简体) ).
• @nuxt/image 2用于图像组件(模块在需要时安装).
• @nuxt/content 3,仅限 blog 财务报告和审定财务报表 content 组件.

解决问题

• 组件无法解决 Nuxt 导入 : 检查应用程序运行 Nuxt 4 和 @brumaombra/ui-vintage 注册于 nuxt.config。 。 。 .
• 样式缺失 : 一次注册模块,添加 tailwindcss() 从 @tailwindcss/vite 改为 vite.plugins,然后在更改后重新启动 dev 服务器 nuxt.config。 。 。 .
• NuxtImg 无法使用 : 安装 @nuxt/image,或让模块在设置时安装.
• useI18n 错误、 缺少翻译或 NuxtLinkLocale 未解决 : 注册 @nuxtjs/i18n;组件需要它的作曲和链接组件,而库信息被合并到其中.
• 导入失败 : 使用来自 package.json,例如 @brumaombra/ui-vintage/button从来没有内部 src/ 路径.

许可证

麻省理工学院 毛罗·布朗比利亚