Skip to content

Commit 6ee5785

Browse files
teleskop150750teleskop150750
committed
feat: toast
1 parent 8093f5f commit 6ee5785

File tree

10 files changed

+7977
-2103
lines changed

10 files changed

+7977
-2103
lines changed

‎packages/vue-primitives/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,5 @@ coverage
2828
*.sw?
2929

3030
*.tsbuildinfo
31+
32+
*storybook.log

‎packages/vue-primitives/.storybook/main.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { dirname, join } from 'node:path'
2+
import type { StorybookConfig } from '@storybook/vue3-vite'
3+
4+
/**
5+
* This function is used to resolve the absolute path of a package.
6+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
7+
*/
8+
function getAbsolutePath(value) {
9+
return dirname(require.resolve(join(value, 'package.json')))
10+
}
11+
12+
/** @type { import('@storybook/vue3-vite').StorybookConfig } */
13+
const config: StorybookConfig = {
14+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
15+
addons: [
16+
getAbsolutePath('@storybook/addon-links'),
17+
getAbsolutePath('@storybook/addon-essentials'),
18+
getAbsolutePath('@chromatic-com/storybook'),
19+
getAbsolutePath('@storybook/addon-interactions'),
20+
],
21+
framework: {
22+
name: getAbsolutePath('@storybook/vue3-vite') as any,
23+
options: {},
24+
},
25+
}
26+
27+
export default config

‎packages/vue-primitives/.storybook/preview.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Preview } from '@storybook/vue3'
2+
3+
const preview: Preview = {
4+
parameters: {
5+
controls: {
6+
matchers: {
7+
color: /(background|color)$/i,
8+
date: /Date$/i,
9+
},
10+
},
11+
},
12+
}
13+
14+
export default preview

‎packages/vue-primitives/package.json‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,19 @@
1313
"preview": "vite preview",
1414
"test:unit": "vitest",
1515
"build-only": "vite build",
16-
"type-check": "vue-tsc --build --force"
16+
"type-check": "vue-tsc --build --force",
17+
"storybook": "storybook dev -p 6006",
18+
"build-storybook": "storybook build"
1719
},
1820
"devDependencies": {
21+
"@chromatic-com/storybook": "^1.5.0",
22+
"@storybook/addon-essentials": "^8.1.6",
23+
"@storybook/addon-interactions": "^8.1.6",
24+
"@storybook/addon-links": "^8.1.6",
25+
"@storybook/blocks": "^8.1.6",
26+
"@storybook/test": "^8.1.6",
27+
"@storybook/vue3": "^8.1.6",
28+
"@storybook/vue3-vite": "^8.1.6",
1929
"@tsconfig/node20": "^20.1.4",
2030
"@types/jsdom": "^21.1.7",
2131
"@types/node": "^20.14.2",
@@ -26,6 +36,7 @@
2636
"@vueuse/core": "^10.10.0",
2737
"jsdom": "^24.1.0",
2838
"npm-run-all2": "^6.2.0",
39+
"storybook": "^8.1.6",
2940
"vite": "^5.2.13",
3041
"vitest": "^1.6.0",
3142
"vue": "^3.4.27",

packages/vue-primitives/src/toggle-group/ToggleGroupt.ts renamed to packages/vue-primitives/src/toggle-group/ToggleGroup.ts

File renamed without changes.

packages/vue-primitives/src/toggle-group/ToggleGroupt.vue renamed to packages/vue-primitives/src/toggle-group/ToggleGroup.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Primitive } from '../primitive/index.ts'
33
import { useControllableState } from '../utils/useControllableState.ts'
44
import { composeEventHandlers } from '../utils/composeEventHandlers.ts'
5-
import type { ToggleEmits, ToggleProps } from './Toggle.ts'
5+
import type { ToggleEmits, ToggleProps } from './ToggleGroup.ts'
66
77
defineOptions({
88
name: 'Toggle',

‎packages/vue-primitives/src/toggle/Toggle.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ const onClick = composeEventHandlers((e: Event) => {
3636
type="button"
3737
:aria-pressed="pressed"
3838
:data-state="pressed ? 'on' : 'off'"
39-
:data-disabled="$attrs.disabled ? '' : undefined"
39+
:data-disabled="disabled ? '' : undefined"
4040
@click="onClick"
4141
>
42-
<slot :pressed="pressed" />
42+
<slot />
4343
</Primitive>
4444
</template>

‎packages/vue-primitives/src/toggle/stories/Toggle.stories.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import './style.css'
2+
import { defineComponent, shallowRef } from 'vue'
3+
import Toggle from '../Toggle.vue'
4+
5+
export default { title: 'Components/Toggle' }
6+
7+
export const Styled = () => <Toggle class="root">Toggle</Toggle>
8+
9+
export function Controlled() {
10+
return defineComponent({
11+
setup() {
12+
const pressed = shallowRef(false)
13+
return () => <Toggle class="root" v-model={pressed.value}>Toggle</Toggle>
14+
},
15+
})
16+
}
17+
18+
export function Chromatic() {
19+
return (
20+
<>
21+
<h1>Uncontrolled</h1>
22+
<h2>Off</h2>
23+
<Toggle class="root">Toggle</Toggle>
24+
25+
<h2>On</h2>
26+
<Toggle class="root" defaultPressed>
27+
Toggle
28+
</Toggle>
29+
30+
<h1>Controlled</h1>
31+
<h2>Off</h2>
32+
<Toggle class="root" pressed={false}>
33+
Toggle
34+
</Toggle>
35+
36+
<h2>On</h2>
37+
<Toggle class="root" pressed>
38+
Toggle
39+
</Toggle>
40+
41+
<h1>Disabled</h1>
42+
<Toggle class="root" disabled>
43+
Toggle
44+
</Toggle>
45+
46+
<h1>State attributes</h1>
47+
<Toggle class="rootAttr">Toggle</Toggle>
48+
<Toggle class="rootAttr" disabled>
49+
Toggle
50+
</Toggle>
51+
</>
52+
)
53+
}
54+
55+
Chromatic.parameters = { chromatic: { disable: false } }

‎packages/vue-primitives/src/toggle/stories/style.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.root {
2+
padding: 6px;
3+
line-height: 1;
4+
border: none;
5+
font-family: 'sans-serif';
6+
font-weight: bold;
7+
8+
&:focus {
9+
outline: none;
10+
box-shadow: 0 0 0 2px black;
11+
}
12+
13+
&[data-disabled] {
14+
opacity: 0.5;
15+
}
16+
17+
&[data-state="off"] {
18+
background-color: red;
19+
color: white;
20+
}
21+
22+
&[data-state="on"] {
23+
background-color: green;
24+
color: white;
25+
}
26+
}
27+
28+
.rootAttr {
29+
background-color: rgba(0, 0, 255, 0.3);
30+
border: 2px solid blue;
31+
padding: 10px;
32+
33+
&:disabled {
34+
opacity: 0.5;
35+
}
36+
37+
&[data-disabled] {
38+
border-style: dashed;
39+
}
40+
}

0 commit comments

Comments
 (0)