Skip to content

Commit 2f53441

Browse files
teleskop150750teleskop150750
committed
feat(components): [HoverCard] implements
1 parent 7dd02fc commit 2f53441

Some content is hidden

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

49 files changed

+1782
-258
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Enter the component you want most in the components, leave the emojis and follow
4242
| [Dialog](https://vue-primitives.netlify.app/?path=/story/components-dialog--styled) | ✓ |
4343
| DropdownMenu | 🚧 |
4444
| Form | 🚧 |
45-
| HoverCard | 🚧 |
45+
| [HoverCard](https://vue-primitives.netlify.app/?path=/story/components-hovercard--chromatic) | ✓ |
4646
| [Label](https://vue-primitives.netlify.app/?path=/story/components-label--styled) | ✓ |
4747
| Menubar | 🚧 |
4848
| NavigationMenu | 🚧 |

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"devDependencies": {
1818
"@antfu/eslint-config": "^3.0.0",
1919
"@teleskop150750/typescript-config": "workspace:*",
20-
"@types/node": "^20.16.2",
20+
"@types/node": "^20.16.3",
2121
"eslint": "npm:eslint-ts-patch@9.4.0-0",
2222
"eslint-ts-patch": "9.4.0-0",
2323
"prettier": "^3.3.3",

‎packages/vue-primitives/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
"@storybook/vue3-vite": "^8.2.9",
100100
"@tsconfig/node20": "^20.1.4",
101101
"@types/jsdom": "^21.1.7",
102-
"@types/node": "^20.16.2",
102+
"@types/node": "^20.16.3",
103103
"@vitejs/plugin-vue": "^5.1.3",
104104
"@vitejs/plugin-vue-jsx": "^4.0.1",
105105
"@vue/test-utils": "^2.4.6",
@@ -109,10 +109,10 @@
109109
"storybook": "^8.2.9",
110110
"unbuild": "^2.0.0",
111111
"vite": "^5.4.2",
112-
"vite-plugin-dts": "^4.0.3",
112+
"vite-plugin-dts": "^4.1.0",
113113
"vite-plugin-externalize-deps": "^0.8.0",
114114
"vitest": "^2.0.5",
115115
"vue": "^3.4.38",
116-
"vue-tsc": "^2.1.2"
116+
"vue-tsc": "2.0.28"
117117
}
118118
}

‎packages/vue-primitives/src/App.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { computed, onMounted, shallowRef } from 'vue'
33
// import Foo from '../src/Foo.vue'
44
// import Primitive from './primitive/Primitive.vue'
55
import { Toggle } from './toggle/index.ts'
6-
import { ToggleGroup, ToggleGroupItem } from './toggle-group/index.ts'
6+
import { ToggleGroupItem, ToggleGroupRoot } from './toggle-group/index.ts'
77
import Accordion from './accordion/AccordionRoot.vue'
88
import AccordionItem from './accordion/AccordionItem.vue'
99
import { AccordionContent, AccordionHeader, AccordionTrigger } from './accordion/index.ts'
@@ -74,14 +74,14 @@ onMounted(() => {
7474
</button>
7575

7676
<div>
77-
<ToggleGroup type="single">
77+
<ToggleGroupRoot type="single">
7878
<ToggleGroupItem value="1">
7979
1
8080
</ToggleGroupItem>
8181
<ToggleGroupItem value="2">
8282
2
8383
</ToggleGroupItem>
84-
</ToggleGroup>
84+
</ToggleGroupRoot>
8585
</div>
8686

8787
<div>

‎packages/vue-primitives/src/checkbox/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export { default as Checkbox } from './CheckboxRoot.vue'
1+
export { default as CheckboxRoot } from './CheckboxRoot.vue'
22
export { default as CheckboxIndicator } from './CheckboxIndicator.vue'

‎packages/vue-primitives/src/checkbox/stories/Animated.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { shallowRef } from 'vue'
3-
import { Checkbox, CheckboxIndicator } from '../index.ts'
3+
import { CheckboxIndicator, CheckboxRoot } from '../index.ts'
44
import './styles.css'
55
66
const checked = shallowRef<boolean | 'indeterminate'>('indeterminate')
@@ -9,9 +9,9 @@ const checked = shallowRef<boolean | 'indeterminate'>('indeterminate')
99
<template>
1010
<div>
1111
<p>
12-
<Checkbox v-model:checked="checked" class="checkbox_rootClass">
12+
<CheckboxRoot v-model:checked="checked" class="checkbox_rootClass">
1313
<CheckboxIndicator class="checkbox_indicatorClass checkbox_animatedIndicatorClass" />
14-
</Checkbox>
14+
</CheckboxRoot>
1515
</p>
1616

1717
<button

‎packages/vue-primitives/src/checkbox/stories/Chromatic.vue

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,71 @@
11
<script setup lang="ts">
2-
import { Checkbox, CheckboxIndicator } from '../index.ts'
2+
import { CheckboxIndicator, CheckboxRoot } from '../index.ts'
33
import './styles.css'
44
</script>
55

66
<template>
77
<div>
88
<h1>Uncontrolled</h1>
99
<h2>Unchecked</h2>
10-
<Checkbox class="checkbox_rootClass">
10+
<CheckboxRoot class="checkbox_rootClass">
1111
<CheckboxIndicator class="checkbox_indicatorClass" />
12-
</Checkbox>
12+
</CheckboxRoot>
1313

1414
<h2>Checked</h2>
15-
<Checkbox class="checkbox_rootClass" default-checked>
15+
<CheckboxRoot class="checkbox_rootClass" default-checked>
1616
<CheckboxIndicator class="checkbox_indicatorClass" />
17-
</Checkbox>
17+
</CheckboxRoot>
1818

1919
<h1>Controlled</h1>
2020
<h2>Unchecked</h2>
21-
<Checkbox class="checkbox_rootClass" :checked="false">
21+
<CheckboxRoot class="checkbox_rootClass" :checked="false">
2222
<CheckboxIndicator class="checkbox_indicatorClass" />
23-
</Checkbox>
23+
</CheckboxRoot>
2424

2525
<h2>Checked</h2>
26-
<Checkbox class="checkbox_rootClass" checked>
26+
<CheckboxRoot class="checkbox_rootClass" checked>
2727
<CheckboxIndicator class="checkbox_indicatorClass" />
28-
</Checkbox>
28+
</CheckboxRoot>
2929

3030
<h1>Indeterminate</h1>
31-
<Checkbox class="checkbox_rootClass" checked="indeterminate">
31+
<CheckboxRoot class="checkbox_rootClass" checked="indeterminate">
3232
<CheckboxIndicator class="checkbox_indicatorClass" />
33-
</Checkbox>
33+
</CheckboxRoot>
3434

3535
<h1>Disabled</h1>
36-
<Checkbox class="checkbox_rootClass" default-checked disabled>
36+
<CheckboxRoot class="checkbox_rootClass" default-checked disabled>
3737
<CheckboxIndicator class="checkbox_indicatorClass" />
38-
</Checkbox>
38+
</CheckboxRoot>
3939

4040
<h1>Force mounted indicator</h1>
41-
<Checkbox class="checkbox_rootClass">
41+
<CheckboxRoot class="checkbox_rootClass">
4242
<CheckboxIndicator class="checkbox_indicatorClass" force-mount :style="{ height: '20px' }" />
43-
</Checkbox>
43+
</CheckboxRoot>
4444

4545
<h1>State attributes</h1>
4646
<h2>Unchecked</h2>
47-
<Checkbox class="checkbox_rootAttrClass">
47+
<CheckboxRoot class="checkbox_rootAttrClass">
4848
<CheckboxIndicator class="checkbox_indicatorAttrClass" />
49-
</Checkbox>
49+
</CheckboxRoot>
5050

5151
<h2>Checked</h2>
52-
<Checkbox class="checkbox_rootAttrClass" default-checked>
52+
<CheckboxRoot class="checkbox_rootAttrClass" default-checked>
5353
<CheckboxIndicator class="checkbox_indicatorAttrClass" />
54-
</Checkbox>
54+
</CheckboxRoot>
5555

5656
<h2>Indeterminate</h2>
57-
<Checkbox class="checkbox_rootAttrClass" checked="indeterminate">
57+
<CheckboxRoot class="checkbox_rootAttrClass" checked="indeterminate">
5858
<CheckboxIndicator class="checkbox_indicatorAttrClass" />
59-
</Checkbox>
59+
</CheckboxRoot>
6060

6161
<h2>Disabled</h2>
62-
<Checkbox class="checkbox_rootAttrClass" default-checked disabled>
62+
<CheckboxRoot class="checkbox_rootAttrClass" default-checked disabled>
6363
<CheckboxIndicator class="checkbox_indicatorAttrClass" />
64-
</Checkbox>
64+
</CheckboxRoot>
6565

6666
<h2>Force mounted indicator</h2>
67-
<Checkbox class="checkbox_rootAttrClass">
67+
<CheckboxRoot class="checkbox_rootAttrClass">
6868
<CheckboxIndicator class="checkbox_indicatorAttrClass" force-mount :style="{ height: '20px' }" />
69-
</Checkbox>
69+
</CheckboxRoot>
7070
</div>
7171
</template>

‎packages/vue-primitives/src/checkbox/stories/Controlled.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { shallowRef } from 'vue'
33
import { Label } from '../../label/index.ts'
4-
import { Checkbox, CheckboxIndicator } from '../index.ts'
4+
import { CheckboxIndicator, CheckboxRoot } from '../index.ts'
55
import './styles.css'
66
77
const checked = shallowRef<boolean | 'indeterminate'>(true)
@@ -11,12 +11,12 @@ const checked = shallowRef<boolean | 'indeterminate'>(true)
1111
<div>
1212
<p>This checkbox is placed adjacent to its label. The state is controlled.</p>
1313
<Label for="randBox">Label</Label>{{ ' ' }}
14-
<Checkbox
14+
<CheckboxRoot
1515
id="randBox"
1616
v-model:checked="checked"
1717
class="checkbox_rootClass"
1818
>
1919
<CheckboxIndicator class="checkbox_indicatorClass" />
20-
</Checkbox>
20+
</CheckboxRoot>
2121
</div>
2222
</template>

‎packages/vue-primitives/src/checkbox/stories/Indeterminate.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { shallowRef } from 'vue'
3-
import { Checkbox, CheckboxIndicator } from '../index.ts'
3+
import { CheckboxIndicator, CheckboxRoot } from '../index.ts'
44
import './styles.css'
55
66
const checked = shallowRef<boolean | 'indeterminate'>('indeterminate')
@@ -13,9 +13,9 @@ function onClick() {
1313
<template>
1414
<div>
1515
<p>
16-
<Checkbox v-model:checked="checked" class="checkbox_rootClass">
16+
<CheckboxRoot v-model:checked="checked" class="checkbox_rootClass">
1717
<CheckboxIndicator class="checkbox_indicatorClass" />
18-
</Checkbox>
18+
</CheckboxRoot>
1919
</p>
2020

2121
<button

‎packages/vue-primitives/src/checkbox/stories/Styled.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { Label } from '../../label/index.ts'
3-
import { Checkbox, CheckboxIndicator } from '../index.ts'
3+
import { CheckboxIndicator, CheckboxRoot } from '../index.ts'
44
import './styles.css'
55
</script>
66

@@ -11,9 +11,9 @@ import './styles.css'
1111
<h1>Custom label</h1>
1212
<Label>
1313
Label{{ ' ' }}
14-
<Checkbox class="checkbox_rootClass">
14+
<CheckboxRoot class="checkbox_rootClass">
1515
<CheckboxIndicator class="checkbox_indicatorClass" />
16-
</Checkbox>
16+
</CheckboxRoot>
1717
</Label>
1818

1919
<br>
@@ -22,9 +22,9 @@ import './styles.css'
2222
<h1>Native label</h1>
2323
<label>
2424
Label{{ ' ' }}
25-
<Checkbox class="checkbox_rootClass">
25+
<CheckboxRoot class="checkbox_rootClass">
2626
<CheckboxIndicator class="checkbox_indicatorClass" />
27-
</Checkbox>
27+
</CheckboxRoot>
2828
</label>
2929

3030
<h1>Native label + native checkbox</h1>
@@ -34,18 +34,18 @@ import './styles.css'
3434

3535
<h1>Custom label + for</h1>
3636
<Label for="one">Label</Label>
37-
<Checkbox id="one" class="checkbox_rootClass">
37+
<CheckboxRoot id="one" class="checkbox_rootClass">
3838
<CheckboxIndicator class="checkbox_indicatorClass" />
39-
</Checkbox>
39+
</CheckboxRoot>
4040

4141
<br>
4242
<br>
4343

4444
<h1>Native label + for</h1>
4545
<label for="two">Label</label>
46-
<Checkbox id="two" class="checkbox_rootClass">
46+
<CheckboxRoot id="two" class="checkbox_rootClass">
4747
<CheckboxIndicator class="checkbox_indicatorClass" />
48-
</Checkbox>
48+
</CheckboxRoot>
4949

5050
<h1>Native label + for + native checkbox</h1>
5151
<label for="three">Label</label>

0 commit comments

Comments
 (0)