Skip to content

Commit 65bd2bb

Browse files
productdevbookproductdevbook
committed
feat: plugins
1 parent 227abaf commit 65bd2bb

Some content is hidden

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

55 files changed

+867
-1988
lines changed

‎.docs/.vitepress/config.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export default defineConfig({
113113
{ text: 'Animation/Transition', link: '/guides/animation' },
114114
{ text: 'Composition', link: '/guides/composition' },
115115
{ text: 'Server side rendering', link: '/guides/server-side-rendering' },
116+
{ text: 'Namespaced', link: '/docs/guides/namespaced-components' },
116117
],
117118
},
118119
{
@@ -125,12 +126,12 @@ export default defineConfig({
125126
{ text: 'Avatar', link: '/components/avatar' },
126127
{ text: 'Checkbox', link: '/components/checkbox' },
127128
{ text: 'Collapsible', link: '/components/collapsible' },
128-
{ text: 'Context Menu', link: '/components/context-menu' },
129+
{ text: `Context Menu ${BadgeHTML('New')}`, link: '/components/context-menu' },
129130
{ text: 'Dialog', link: '/components/dialog' },
130-
{ text: 'Dropdown Menu', link: '/components/dropdown-menu' },
131+
{ text: `Dropdown Menu ${BadgeHTML('New')}`, link: '/components/dropdown-menu' },
131132
{ text: 'Hover Card', link: '/components/hover-card' },
132133
{ text: 'Label', link: '/components/label' },
133-
{ text: 'Menubar', link: '/components/menubar' },
134+
{ text: `Menubar ${BadgeHTML('New')}`, link: '/components/menubar' },
134135
// { text: 'Navigation Menu', link: '/components/navigation-menu' },
135136
{ text: 'Popover', link: '/components/popover' },
136137
{ text: 'Progress', link: '/components/progress' },

‎.docs/content/guides/animation.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,8 @@ import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPor
8989
```
9090

9191
::: tip
92-
Futhemore, we discovered that [Motion One](https://motion.dev/vue/quick-start), a Web Animations API based animation library works perfectly with Oku Primitives.
92+
Futhemore, we discovered that [Motion One](https://motion.oku-ui.com), a Web Animations API based animation library works perfectly with Oku Primitives.
9393

94-
Check out this [Stackblitz Demo](https://stackblitz.com/edit/hfxgtx-n6jbjp?file=src%2FApp.vue) 🤩
9594
:::
9695

9796
## Delegating unmounting for JavaScript Animation
@@ -156,5 +155,5 @@ watch(open, () => {
156155
```
157156

158157
::: tip
159-
Check out this [Stackblitz Demo](https://stackblitz.com/edit/macsaz?file=src%2FApp.vue)
158+
Check out this [Stackblitz Demo]()
160159
:::

‎.docs/content/guides/composition.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
---
22

33
title: Composition
4-
description: Use the `asChild` prop to compose Radix's functionality onto alternative element types or your own Vue components.
4+
description: Use the `as` prop to compose Radix's functionality onto alternative element types or your own Vue components.
55
---
66

77
# Composition
88

99
<Description>
10-
Use the `asChild` prop to compose Radix's functionality onto alternative
10+
Use the `as` prop to compose Radix's functionality onto alternative
1111
element types or your own Vue components.
1212
</Description>
1313

14-
All Radix primitive parts that render a DOM element accept an `asChild` prop. When `asChild` is set to `true`, Oku Primitives will not render a default DOM element, instead passing the props and behavior required to make it functional to the first child of the slots.
14+
All Radix primitive parts that render a DOM element accept an `as` prop. When `as` is set to `true`, Oku Primitives will not render a default DOM element, instead passing the props and behavior required to make it functional to the first child of the slots.
1515

1616
## Changing the element type
1717

1818
In the majority of cases you shouldn’t need to modify the element type as Radix has been designed to provide the most appropriate defaults. However, there are cases where it is helpful to do so.
1919

20-
A good example is with `TooltipTrigger`. By default this part is rendered as a `button`, though you may want to add a tooltip to a link (`a` tag) as well. Let's see how you can achieve this using `asChild`:
20+
A good example is with `TooltipTrigger`. By default this part is rendered as a `button`, though you may want to add a tooltip to a link (`a` tag) as well. Let's see how you can achieve this using `as`:
2121

2222
```vue{7}
2323
<script setup lang="ts">
@@ -26,7 +26,7 @@ import { TooltipRoot, TooltipTrigger, TooltipPortal } from "@oku-ui/primitives";
2626
2727
<template>
2828
<TooltipRoot>
29-
<TooltipTrigger asChild>
29+
<TooltipTrigger as="template">
3030
<a href="https://primitives.oku-ui.com/">Oku Primitives</a>
3131
</TooltipTrigger>
3232
<TooltipPortal>…</TooltipPortal>
@@ -40,12 +40,12 @@ In reality, you will rarely modify the underlying DOM element like we've seen ab
4040

4141
## Composing with your own Vue components
4242

43-
This works exactly the same as above, you pass `asChild` to the part and then wrap your own component with it.
43+
This works exactly the same as above, you pass `as` to the part and then wrap your own component with it.
4444
However, there are a few gotchas to be aware of.
4545

4646
## Composing multiple primitives
4747

48-
`asChild` can be used as deeply as you need to. This means it is a great way to compose multiple primitive's behavior together.
48+
`as` can be used as deeply as you need to. This means it is a great way to compose multiple primitive's behavior together.
4949
Here is an example of how you can compose `TooltipTrigger` and `DialogTrigger` together with your own button:
5050

5151
```vue{9,10}
@@ -57,8 +57,8 @@ import MyButton from from "@/components/MyButton.vue"
5757
<template>
5858
<DialogRoot>
5959
<TooltipRoot>
60-
<TooltipTrigger asChild>
61-
<DialogTrigger asChild>
60+
<TooltipTrigger as="template">
61+
<DialogTrigger as="template">
6262
<MyButton>Open dialog</MyButton>
6363
</DialogTrigger>
6464
</TooltipTrigger>

‎.docs/content/guides/namespaced-components.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Namespaced Components
2+
3+
The Oku Primitives design pattern involves creating individual primitives for each component, allowing users to construct or [compose](./composition) components as they wish.
4+
5+
However, importing all the necessary components individually can be cumbersome, and users might occasionally forget to import an important component.
6+
7+
To address this issue, we’ve introduced [Namespaced components](https://vuejs.org/api/sfc-script-setup.html#namespaced-components).
8+
9+
## How to use?
10+
11+
First, you need to import the namespaced components via `@oku-ui/primitives/namespaced` in your Vue component.
12+
13+
```vue line=2
14+
<script setup lang="ts">
15+
import { Dialog, DropdownMenu } from '@oku-ui/primitives/namespaced'
16+
</script>
17+
```
18+
19+
Then, you can use all the relevant components within the namespace.
20+
21+
```vue line=6-17
22+
<script setup lang="ts">
23+
import { Dialog } from '@oku-ui/primitives/namespaced'
24+
</script>
25+
26+
<template>
27+
<Dialog.Root>
28+
<Dialog.Trigger>
29+
Trigger
30+
</Dialog.Trigger>
31+
</Dialog.Root>
32+
33+
<Dialog.Portal>
34+
<Dialog.Overlay />
35+
<Dialog.Content>
36+
…
37+
</Dialog.Content>
38+
</Dialog.Portal>
39+
</template>
40+
```

‎.docs/scripts/autogen.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import fg from 'fast-glob'
77
import MarkdownIt from 'markdown-it'
88
import { babelParse, parse as sfcParse } from 'vue/compiler-sfc'
99
import { createChecker } from 'vue-component-meta'
10-
import { components } from '../../packages/core/constant/components'
10+
import { components } from '../../packages/core/src/constant/components'
1111
import { transformJSDocLinks } from './utils'
1212

1313
// @ts-expect-error ignore

‎.storybook/main.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ const config: StorybookConfig = {
1818
framework: {
1919
name: '@storybook/vue3-vite',
2020
options: {
21-
docgen: {
22-
plugin: 'vue-component-meta',
23-
tsconfig: 'tsconfig.app.json',
24-
},
21+
// TODO: ReferenceError: clamp is not defined
22+
// docgen: {
23+
// plugin: 'vue-component-meta',
24+
// tsconfig: 'tsconfig.app.json',
25+
// },
2526
},
2627
},
2728
docs: {

‎CONTRIBUTING.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ pnpm build core utils # Build only core and utils package (packages/core) check
4949

5050
```shell
5151
pnpm dev
52-
pnpm build # Build all packages with cache (packages/components)
53-
pnpm build:skip # Build without cache (packages/components)
52+
pnpm build # Build all packages with cache (packages)
53+
pnpm build:skip # Build without cache (packages)
5454

55-
pnpm story # Run Storybook and live reload support (packages/vue/src)
55+
pnpm story # Run Storybook and live reload support (packages/core/src)
5656
pnpm build:storybook # Build Storybook
5757

5858
pnpm lint # Run ESLint

‎package.json‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"name": "primitives",
33
"type": "module",
4-
"version": "0.6.1",
54
"packageManager": "[email protected]",
65
"repository": "oku-ui/primitives",
76
"engines": {
@@ -13,14 +12,9 @@
1312
"docs:build": "pnpm --filter docs docs:build",
1413
"nuxt:generate": "pnpm --filter nuxt-app generate",
1514
"build:skip": "pnpm nx run-many -t build --skip-nx-cache",
16-
"oku": "pnpm jiti ./scripts/index.ts",
1715
"story": "pnpm storybook dev -p 6006 --no-open",
1816
"lint": "eslint . --cache",
1917
"lint:fix": "eslint . --fix --cache",
20-
"play:vue": "pnpm clean:dts && pnpm --filter=vue3 p:dev",
21-
"play:nuxt": "pnpm clean:dts && pnpm --filter=nuxt3 p:dev",
22-
"play": "pnpm clean:dts && pnpm --filter='./playground/**' p:dev",
23-
"play:gencomponents": "pnpm jiti ./scripts/playground-generator.ts",
2418
"test": "vitest run",
2519
"test:watch": "vitest --watch",
2620
"test:nuxt": "vitest -c vitest.nuxt.config.ts --coverage",
@@ -30,10 +24,8 @@
3024
"clean": "pnpm nx run-many -t clean",
3125
"clean:node": "rimraf 'packages/**/node_modules' 'playground/**/node_modules' 'node_modules'",
3226
"clean:dist": "rimraf 'packages/**/dist' 'playground/**/dist'",
33-
"clean:dts": "rimraf 'playground/vue3/src/components.d.ts' 'playground/vue3/src/auto-imports.d.ts' 'playground/nuxt3/.nuxt'",
3427
"update:version": "esno scripts/update-version.ts",
3528
"prepare": "npx simple-git-hooks",
36-
"release": "bumpp --commit --push --tag",
3729
"scripts:genpackage": "esno scripts/generateAliasCode.ts"
3830
},
3931
"devDependencies": {
@@ -42,6 +34,7 @@
4234
"@egoist/tailwindcss-icons": "^1.8.1",
4335
"@floating-ui/vue": "^1.1.5",
4436
"@iconify-json/ph": "^1.2.1",
37+
"@oku-ui/primitives": "workspace:^",
4538
"@storybook/addon-essentials": "^8.4.2",
4639
"@storybook/addon-interactions": "^8.4.2",
4740
"@storybook/addon-links": "^8.4.2",
@@ -88,6 +81,11 @@
8881
"vue": "^3.5.12",
8982
"vue-component-meta": "^2.1.10"
9083
},
84+
"pnpm": {
85+
"overrides": {
86+
"@oku-ui/primitives": "workspace:^"
87+
}
88+
},
9189
"simple-git-hooks": {
9290
"pre-commit": "pnpm lint-staged"
9391
},

‎packages/core/index.ts‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎packages/core/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
{
22
"name": "@oku-ui/primitives",
33
"type": "module",
4-
"version": "0.7.0",
4+
"version": "0.7.1-beta.1",
55
"license": "MIT",
66
"funding": "https://github.com/sponsors/productdevbook",
77
"homepage": "https://oku-ui.com/primitives",
88
"repository": {
99
"type": "git",
1010
"url": "git+https://github.com/oku-ui/primitives.git",
11-
"directory": "packages/vue-primitives"
11+
"directory": "packages/core"
1212
},
1313
"bugs": {
1414
"url": "https://github.com/oku-ui/primitives/issues"
1515
},
16+
1617
"exports": {
1718
".": {
1819
"types": "./dist/index.d.ts",
@@ -28,8 +29,8 @@
2829
"typesVersions": {
2930
"*": {
3031
"*": [
31-
"./dist/*",
32-
"./*"
32+
"./dist/*/index.d.ts",
33+
"./dist/index.d.ts"
3334
]
3435
}
3536
},

0 commit comments

Comments
 (0)