Skip to content

Commit 7912502

Browse files
teleskop150750teleskop150750
committed
feat(components): [Popper] implements
1 parent 2706547 commit 7912502

39 files changed

+1403
-35
lines changed

‎packages/vue-primitives/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,9 @@
8383
"peerDependencies": {
8484
"@vue/shared": "^3.4.31"
8585
},
86+
"dependencies": {
87+
"@floating-ui/vue": "^1.1.4"
88+
},
8689
"devDependencies": {
8790
"@storybook/addon-essentials": "^8.2.9",
8891
"@storybook/addon-interactions": "^8.2.9",

‎packages/vue-primitives/src/arrow/Arrow.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { PrimitiveProps } from '../primitive/index.ts'
2+
3+
export interface ArrowProps extends PrimitiveProps {
4+
/**
5+
* The width of the arrow in pixels.
6+
*
7+
* @defaultValue 10
8+
*/
9+
width?: number
10+
/**
11+
* The height of the arrow in pixels.
12+
*
13+
* @defaultValue 5
14+
*/
15+
height?: number
16+
}

‎packages/vue-primitives/src/arrow/Arrow.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import { Primitive } from '../primitive/index.ts'
3+
import type { ArrowProps } from './Arrow.ts'
4+
5+
defineOptions({
6+
name: 'Arrow',
7+
})
8+
9+
withDefaults(defineProps<ArrowProps>(), {
10+
as: 'svg',
11+
width: 10,
12+
height: 5,
13+
})
14+
</script>
15+
16+
<template>
17+
<Primitive
18+
:as="as"
19+
:as-child="asChild"
20+
:width="width"
21+
:height="height"
22+
:viewBox="asChild ? undefined : '0 0 30 10'"
23+
:preserveAspectRatio="asChild ? undefined : 'none'"
24+
>
25+
<slot><polygon points="0,0 30,0 15,10" /></slot>
26+
</Primitive>
27+
</template>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as Arrow } from './Arrow.vue'
2+
export { type ArrowProps } from './Arrow.ts'

‎packages/vue-primitives/src/arrow/stories/Arrow.stories.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import CStyled from './Styled.vue'
2+
import CCustomSizes from './CustomSizes.vue'
3+
import CCustomArrow from './CustomArrow.vue'
4+
5+
export default { title: 'Utilities/Arrow' }
6+
7+
export function Styled() {
8+
return CStyled
9+
}
10+
11+
export function CustomSizes() {
12+
return CCustomSizes
13+
}
14+
15+
export function CustomArrow() {
16+
return CCustomArrow
17+
}

‎packages/vue-primitives/src/arrow/stories/CustomArrow.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { Arrow } from '../index.ts'
3+
</script>
4+
5+
<template>
6+
<div>
7+
<Arrow
8+
as-child
9+
>
10+
<div
11+
:style="{
12+
width: '20px',
13+
height: '10px',
14+
borderBottomLeftRadius: '10px',
15+
borderBottomRightRadius: '10px',
16+
backgroundColor: 'tomato',
17+
}"
18+
/>
19+
</Arrow>
20+
</div>
21+
</template>

‎packages/vue-primitives/src/arrow/stories/CustomSizes.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup lang="ts">
2+
import { Arrow } from '../index.ts'
3+
4+
const RECOMMENDED_CSS__ARROW__ROOT = {
5+
// better default alignment
6+
verticalAlign: 'middle',
7+
}
8+
</script>
9+
10+
<template>
11+
<div>
12+
<Arrow
13+
:style="{
14+
...RECOMMENDED_CSS__ARROW__ROOT,
15+
}"
16+
:width="40"
17+
:height="10"
18+
/>
19+
<Arrow
20+
:style="{
21+
...RECOMMENDED_CSS__ARROW__ROOT,
22+
}"
23+
:width="50"
24+
:height="30"
25+
/>
26+
<Arrow
27+
:style="{
28+
...RECOMMENDED_CSS__ARROW__ROOT,
29+
}"
30+
:width="20"
31+
:height="100"
32+
/>
33+
</div>
34+
</template>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
import { Arrow } from '../index.ts'
3+
4+
const RECOMMENDED_CSS__ARROW__ROOT = {
5+
// better default alignment
6+
verticalAlign: 'middle',
7+
}
8+
</script>
9+
10+
<template>
11+
<div>
12+
<Arrow
13+
:style="{
14+
...RECOMMENDED_CSS__ARROW__ROOT,
15+
fill: 'crimson',
16+
}"
17+
:width="20"
18+
:height="10"
19+
/>
20+
</div>
21+
</template>

‎packages/vue-primitives/src/checkbox/BubbleInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ watch(() => props.checked, (checked, prevChecked) => {
4848
:checked="isIndeterminate(checked) ? false : checked"
4949
:style="{
5050
width: `${controlSize?.width || 0}px`,
51-
height: `${controlSize?.width || 0}px`,
51+
height: `${controlSize?.height || 0}px`,
5252
position: 'absolute',
5353
pointerEvents: 'none',
5454
opacity: 0,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export { useControllableState } from './useControllableState.ts'
33
export { useId } from './useId.ts'
44
export { useSize } from './useSize.ts'
55
export { useStateMachine } from './useStateMachine.ts'
6+
export { useRef } from './useRef.ts'

0 commit comments

Comments
 (0)