-
-
Notifications
You must be signed in to change notification settings - Fork 35
/
aspect-ratio.ts
77 lines (69 loc) · 1.78 KB
/
aspect-ratio.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import type { PropType } from 'vue'
import { defineComponent, h, toRef } from 'vue'
import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
import { Primitive, primitiveProps } from '@oku-ui/primitive'
import { useForwardRef } from '@oku-ui/use-composable'
export type AspectRatioNaviteElement = OkuElement<'div'>
export type AspectRatioElement = HTMLDivElement
const NAME = 'OkuAspectRatio'
export interface AspectRatioProps extends PrimitiveProps {
ratio?: number
}
export const aspectRatioProps = {
props: {
ratio: {
type: Number as PropType<number>,
default: 1 / 1,
},
},
emits: {},
}
const aspectRatio = defineComponent({
name: NAME,
inheritAttrs: false,
props: {
...aspectRatioProps.props,
...primitiveProps,
},
setup(props, { attrs, slots }) {
const ratio = toRef(props, 'ratio')
const forwardedRef = useForwardRef()
const originalReturn = () => h(
'div', {
'style': {
position: 'relative',
width: '100%',
paddingBottom: `${100 / ratio.value}%`,
},
'data-oku-aspect-ratio-wrapper': '',
},
[
h(
Primitive.div,
{
asChild: props.asChild,
...attrs,
ref: forwardedRef,
style: {
...attrs.style as any,
position: 'absolute',
top: '0px',
right: '0px',
left: '0px',
bottom: '0px',
},
},
{
default: () => slots.default?.(),
},
),
],
)
return originalReturn
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
export const OkuAspectRatio = aspectRatio as typeof aspectRatio &
(new () => {
$props: AspectRatioNaviteElement
})