Skip to content

Commit 3513489

Browse files
AndreyYolkinAndreyYolkin
committed
Merge branch 'master' into refactor/ae-keydown-with-registrar
2 parents 1dc6fce + 38fe073 commit 3513489

File tree

235 files changed

+17530
-3387
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

235 files changed

+17530
-3387
lines changed

‎.github/workflows/pkg-pr-new.yml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
name: pkg.pr.new Integration
2+
3+
on:
4+
push:
5+
branches: [master]
6+
tags: ['!**']
7+
pull_request:
8+
types: [opened, synchronize, labeled]
9+
10+
jobs:
11+
build:
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- name: Checkout code
16+
uses: actions/checkout@v4
17+
with:
18+
fetch-depth: 0
19+
20+
- name: Install pnpm
21+
uses: pnpm/action-setup@v4
22+
23+
- name: Set node
24+
uses: actions/setup-node@v4
25+
with:
26+
node-version: lts/*
27+
cache: pnpm
28+
29+
- name: Install
30+
run: pnpm install
31+
32+
- name: Build
33+
run: pnpm build
34+
35+
- name: Release
36+
run: pnpm dlx pkg-pr-new publish --compact --pnpm './packages/*' --only-templates

‎.github/workflows/release.yml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
tags:
6+
- 'v*'
7+
8+
jobs:
9+
release:
10+
permissions:
11+
id-token: write
12+
contents: write
13+
runs-on: ubuntu-latest
14+
steps:
15+
- uses: actions/checkout@v4
16+
with:
17+
fetch-depth: 0
18+
19+
- name: Install pnpm
20+
uses: pnpm/action-setup@v4
21+
22+
- name: Set node
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: lts/*
26+
cache: pnpm
27+
registry-url: 'https://registry.npmjs.org'
28+
29+
- run: pnpm dlx changelogithub
30+
env:
31+
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
32+
33+
- name: Install
34+
run: pnpm install
35+
36+
- name: Build
37+
run: pnpm build
38+
39+
# Ensure npm 11.5.1 or later is installed
40+
- name: Update NPM
41+
run: npm install -g npm@latest
42+
43+
- name: Publish to NPM
44+
run: pnpm -r publish --access public --no-git-checks

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ coverage
1717
/cypress/videos/
1818
/cypress/screenshots/
1919

20+
# local env files
21+
.env.local
22+
.env.*.local
23+
2024
# Editor directories and files
2125
.vscode/*
2226
!.vscode/extensions.json

‎README.md‎

Lines changed: 156 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,174 @@
1-
# vuetify0
1+
<div align="center">
2+
<picture>
3+
<source media="(prefers-color-scheme: dark)" srcset="https://vuetifyjs.b-cdn.net/docs/images/logos/vzero-logo-dark.png">
4+
<img alt="Vuetify One Logo" src="https://vuetifyjs.b-cdn.net/docs/images/logos/vzero-logo-light.png" height="150">
5+
</picture>
6+
</div>
7+
8+
9+
A Vue 3 monorepo providing unstyled components, composables, and utilities as low-level primitives for building modern web applications and design systems.
10+
11+
## 📦 Packages
12+
13+
This monorepo contains two primary packages:
14+
15+
### `@vuetify/v0`
16+
Core foundational components and composables:
17+
18+
**Components:**
19+
- `Atom` - Base element wrapper with renderless capabilities
20+
- `Breakpoints` - Responsive breakpoint utilities
21+
- `Context` - Context injection/provision system
22+
- `Group` - Selection grouping with multiple/single modes
23+
- `Hydration` - Client-side hydration utilities
24+
- `Popover` - CSS anchor-positioned popup components
25+
- `Step` - Step-based navigation system
26+
- `Theme` - Theme management and CSS variable injection
27+
28+
**Composables:**
29+
- `useBreakpoints` - Responsive breakpoint detection
30+
- `createContext` - Type-safe context management
31+
- `useFilter` - Collection filtering utilities
32+
- `useGroup` - Selection group management
33+
- `useHydration` - SSR hydration helpers
34+
- `useKeydown` - Keyboard event handling
35+
- `useLocale` - Internationalization support
36+
- `useRegistry` - Component registration system
37+
- `useStep` - Step navigation logic
38+
- `useTheme` - Theme switching and CSS variable management
39+
- `useTokens` - Design token system
40+
- `toReactive` - Utility for reactive object conversion
41+
42+
### `@vuetify/paper`
43+
Styling and layout primitives:
44+
45+
**Components:**
46+
- `V0Paper` - Base layout component with comprehensive styling props
47+
48+
**Composables:**
49+
- `useBorder` - Border styling utilities
50+
- `useColor` - Color system management
51+
- `useContrast` - Color contrast calculations
52+
- `useDimensions` - Size and spacing utilities
53+
- `useElevation` - Shadow and elevation effects
54+
- `useRounded` - Border radius utilities
55+
- `useSpacing` - Margin and padding utilities
56+
57+
## 🏗️ Architecture
58+
59+
### Design Principles
60+
61+
- **Headless First**: Components provide logic and accessibility without imposed styling
62+
- **Slot-Driven**: Maximum flexibility through comprehensive slot APIs
63+
- **CSS Variables**: All styling configurable via CSS custom properties
64+
- **TypeScript Native**: Full type safety with excellent DX
65+
- **Minimal Dependencies**: Lightweight with only essential dependencies
66+
- **Framework Agnostic**: Core logic usable beyond Vue with adapters
67+
68+
### Component Guidelines
69+
70+
Components in vuetify0 should be:
71+
72+
- **Single-layer**: Not composed of multiple component layers
73+
- **Logic-focused**: Minimal styling, maximum behavioral functionality
74+
- **Prop-driven**: Configurable primarily through props and CSS variables
75+
- **Slot-heavy**: Extensive slot usage for customization
76+
- **CSS Variable-based**: All styling via `--v0-*` custom properties
77+
- **Framework-minimal**: No global state dependencies
78+
- **Interface-based**: External dependencies through clean interfaces
79+
80+
## 🚀 Quick Start
81+
82+
### Installation
83+
84+
```bash
85+
pnpm add @vuetify/v0 @vuetify/paper
86+
```
287

3-
A rewrite of the baseline Vuetify components.
88+
### Basic Setup
89+
90+
```vue
91+
<script setup>
92+
import { Avatar, createThemePlugin } from '@vuetify/v0'
93+
import { V0Paper } from '@vuetify/paper'
94+
95+
// Install theme plugin
96+
app.use(createThemePlugin({
97+
default: 'light',
98+
themes: {
99+
light: {
100+
primary: '#1976d2',
101+
background: '#ffffff'
102+
}
103+
}
104+
}))
105+
</script>
106+
107+
<template>
108+
<V0Paper class="p-4">
109+
<Avatar.Root>
110+
<Avatar.Image src="/avatar.jpg" alt="User" />
111+
<Avatar.Fallback>JD</Avatar.Fallback>
112+
</Avatar.Root>
113+
</V0Paper>
114+
</template>
115+
```
4116

5-
## Components
117+
## 🛠️ Development
6118

7-
Tentative components include:
119+
### Project Setup
8120

9-
- Avatar
10-
- Button
11-
- Chip
12-
- Divider
13-
- Field
14-
- Grid
15-
- Group
16-
- Icon
17-
- Input
18-
- Layout
19-
- List
20-
- Overlay (Popup)
21-
- Progress
22-
- Sheet
23-
- Skeleton
24-
- Slider
25-
- TextInput
26-
- Typography
121+
```bash
122+
pnpm install
123+
```
27124

28-
### What type of component belongs in vuetify0?
125+
### Development Server
29126

30-
vuetify0 is meant to be the baseline building blocks used to build higher order components, including those in the Vuetify library. It is not meant to be a complete set of components, but rather a set of foundational components that can be used to create more complex UI elements.
127+
```bash
128+
pnpm dev # Start playground
129+
pnpm dev:docs # Start documentation
130+
pnpm storybook # Start Storybook
131+
```
31132

32-
Some things to consider when determining if a piece of functionality should be included in vuetify0:
133+
### Building
33134

34-
- Is not composed by more than one layer. e.g. a button is composed of a sheet, typography, and icon;
35-
- Does not contain any complex logic such as filtering, provide / inject, or multiple child components;
36-
- Does not require any global singleton state such as useDisplay or useTheme from Vuetify;
37-
- All SCSS files for components should have variables that reference CSS variables. e.g. $v0-button-color: var(--v0-button-color);
38-
- Does not utilize any CSS utility classes from Vuetify or other libraries. e.g. v-btn, v-sheet, v-icon, etc.
39-
- Does not require the global instantiation of anything beyond what's absolutely necessary
40-
- (Maybe?) CAN have external dependencies but only through an interface that is not coupled to the component itself. e.g. a markdown component that has an interface that allows you to pass the content to your markdown renderer of your choice.
41-
- Is primarily expected to be configured using props or CSS variables
42-
- A heavy focus on slots to maximize flexibility and customization
43-
- TODO...
135+
```bash
136+
pnpm build # Build packages
137+
pnpm build:docs # Build documentation
138+
```
44139

45-
## Customize configuration
140+
### Testing & Quality
46141

47-
See [Vite Configuration Reference](https://vitejs.dev/config/).
142+
```bash
143+
pnpm test # Run tests
144+
pnpm test:ui # Run tests with UI
145+
pnpm coverage # Generate coverage report
146+
pnpm lint # Lint codebase
147+
pnpm type-check # Type checking
148+
```
48149

49-
## Project Setup
150+
## 📚 Resources
50151

51-
```sh
52-
pnpm install
53-
```
152+
- **Playground**: Interactive component testing environment
153+
- **Storybook**: Component documentation and examples
154+
- **Documentation**: Comprehensive guides and API references
54155

55-
### Compile and Hot-Reload for Development
156+
## 🎯 Use Cases
56157

57-
```sh
58-
pnpm dev
59-
```
158+
Perfect for:
159+
- Design system foundations
160+
- Component library base layers
161+
- Headless UI implementations
162+
- Custom styling frameworks
163+
- Accessibility-first applications
60164

61-
### Type-Check, Compile and Minify for Production
165+
## ⚡ Performance
62166

63-
```sh
64-
pnpm build
65-
```
167+
- **Bundle Size**: Minimal footprint with tree-shaking
168+
- **Runtime**: Optimized Vue 3 composition patterns
169+
- **SSR**: Full server-side rendering support
170+
- **Hydration**: Seamless client-side hydration
66171

67-
### Lint with [ESLint](https://eslint.org/)
172+
---
68173

69-
```sh
70-
pnpm lint
71-
```
174+
Built with ❤️ for the Vue ecosystem. Part of the Vuetify family.

‎apps/docs/build/markdown.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import Markdown from 'unplugin-vue-markdown/vite'
2+
import Attrs from 'markdown-it-attrs'
3+
import { fromHighlighter } from '@shikijs/markdown-it/core'
4+
import { createHighlighterCore } from 'shiki/core'
5+
import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
6+
import type { HighlighterGeneric } from 'shiki/types'
7+
8+
export default async function MarkdownPlugin () {
9+
const highlighter = await createHighlighterCore({
10+
themes: [
11+
import('@shikijs/themes/github-light-default'),
12+
import('@shikijs/themes/github-dark-default'),
13+
],
14+
langs: [
15+
import('@shikijs/langs/javascript'),
16+
import('@shikijs/langs/typescript'),
17+
import('@shikijs/langs/bash'),
18+
import('@shikijs/langs/vue'),
19+
import('@shikijs/langs/html'),
20+
import('@shikijs/langs/markdown'),
21+
],
22+
engine: createOnigurumaEngine(() => import('shiki/wasm')),
23+
})
24+
25+
return Markdown({
26+
markdownItOptions: {
27+
html: true,
28+
linkify: true,
29+
typographer: true,
30+
},
31+
markdownItSetup (md) {
32+
md.use(Attrs)
33+
md.use(
34+
fromHighlighter(highlighter as HighlighterGeneric<any, any>, {
35+
themes: {
36+
light: 'github-light-default',
37+
dark: 'github-dark-default',
38+
},
39+
}))
40+
md.renderer.rules.link_open = function (tokens, idx, options, _env, self) {
41+
const token = tokens[idx]
42+
const classIndex = token.attrIndex('class')
43+
if (classIndex < 0) token.attrPush(['class', 'v0-link'])
44+
else if (token.attrs && !/\bv0-link\b/.test(token.attrs[classIndex][1])) token.attrs[classIndex][1] += ' v0-link'
45+
return self.renderToken(tokens, idx, options)
46+
}
47+
},
48+
})
49+
}
50+
51+
export type MarkdownPluginFactory = typeof MarkdownPlugin

‎apps/docs/index.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<link rel="icon" href="/favicon.ico">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
8-
<!-- Add Material Design Icons CDN -->
9-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
10-
11-
<title>Vite App</title>
6+
<title>Vuetify0</title>
7+
<link rel="preconnect" href="https://vuetifyjs.com" crossorigin>
8+
<link
9+
rel="preload"
10+
as="image"
11+
href="https://cdn.vuetifyjs.com/docs/images/logos/vzero-logo-light.png"
12+
imagesizes="100vw"
13+
/>
14+
<link rel="icon" type="image/png" href="/0.png">
1215
</head>
1316
<body>
1417
<div id="app"></div>

0 commit comments

Comments
 (0)