feat: aspect-ratio

teleskop150750 · teleskop150750 · commit d4f97a884898 · 2024-06-15T22:11:35.000+03:00
diff --git a/packages/vue-primitives/src/aspect-ratio/AspectRatio.ts b/packages/vue-primitives/src/aspect-ratio/AspectRatio.ts
@@ -0,0 +1,5 @@
+import type { PrimitiveProps } from '~/primitive/index.ts'
+
+export interface AspectRatioProps extends PrimitiveProps {
+  ratio?: number
+}
diff --git a/packages/vue-primitives/src/aspect-ratio/AspectRatio.vue b/packages/vue-primitives/src/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import type { AspectRatioProps } from './AspectRatio.ts'
+import { Primitive } from '~/primitive/index.ts'
+
+defineOptions({
+  name: 'AspectRatio',
+  inheritAttrs: false,
+})
+
+withDefaults(defineProps<AspectRatioProps>(), {
+  ratio: 1,
+})
+
+const elRef = shallowRef<HTMLElement>()
+
+defineExpose({
+  $el: elRef,
+})
+</script>
+
+<template>
+  <div
+    :style="{
+      // ensures inner element is contained
+      position: 'relative',
+      // ensures padding bottom trick maths works
+      width: '100%',
+      paddingBottom: `${100 / ratio}%`,
+    }"
+    data-radix-aspect-ratio-wrapper=""
+  >
+    <Primitive
+      :ref="(el: any) => {
+        elRef = (el?.$el ?? el) || undefined
+      }"
+      :as="as"
+      :as-child="asChild"
+      v-bind="$attrs"
+      :style="{
+        // ensures children expand in ratio
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      }"
+    >
+      <slot />
+    </Primitive>
+  </div>
+</template>
diff --git a/packages/vue-primitives/src/aspect-ratio/index.ts b/packages/vue-primitives/src/aspect-ratio/index.ts
@@ -0,0 +1,2 @@
+export { default as AspectRatio } from './AspectRatio.vue'
+export type { AspectRatioProps } from './AspectRatio.ts'
diff --git a/packages/vue-primitives/src/aspect-ratio/stories/AspectRatio.stories.tsx b/packages/vue-primitives/src/aspect-ratio/stories/AspectRatio.stories.tsx
@@ -0,0 +1,71 @@
+import { AspectRatio } from '../index.ts'
+import './styles.css'
+
+export default { title: 'Components/AspectRatio' }
+
+const image = (
+  <img
+    src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&auto=format&fit=crop&w=400&q=80"
+    alt="A house in a forest"
+    style={{ objectFit: 'cover', width: '100%', height: '100%' }}
+  />
+)
+
+export function Styled() {
+  return (
+    <div style={{ width: '500px' }}>
+      <AspectRatio class="asperRation__root">
+        <h1>Default ratio (1/1)</h1>
+      </AspectRatio>
+    </div>
+  )
+}
+
+export function CustomRatios() {
+  return (
+    <div style={{ display: 'flex', gap: '20px' }}>
+      <div style={{ width: '200px' }}>
+        <AspectRatio ratio={1 / 2}>{image}</AspectRatio>
+      </div>
+      <div style={{ width: '200px' }}>
+        <AspectRatio>{image}</AspectRatio>
+      </div>
+      <div style={{ width: '200px' }}>
+        <AspectRatio ratio={16 / 9}>{image}</AspectRatio>
+      </div>
+      <div style={{ width: '200px' }}>
+        <AspectRatio ratio={2 / 1}>{image}</AspectRatio>
+      </div>
+    </div>
+  )
+}
+
+export function Chromatic() {
+  return (
+    <>
+      <h1>Default ratio</h1>
+      <div style={{ width: '300px' }}>
+        <AspectRatio class="asperRation__root">
+          <p>Default ratio (1/1)</p>
+        </AspectRatio>
+      </div>
+
+      <h1>Custom ratios</h1>
+      <div style={{ display: 'flex', gap: '20px' }}>
+        <div style={{ width: '200px' }}>
+          <AspectRatio ratio={1 / 2}>{image}</AspectRatio>
+        </div>
+        <div style={{ width: '200px' }}>
+          <AspectRatio>{image}</AspectRatio>
+        </div>
+        <div style={{ width: '200px' }}>
+          <AspectRatio ratio={16 / 9}>{image}</AspectRatio>
+        </div>
+        <div style={{ width: '200px' }}>
+          <AspectRatio ratio={2 / 1}>{image}</AspectRatio>
+        </div>
+      </div>
+    </>
+  )
+}
+Chromatic.parameters = { chromatic: { disable: false } }
diff --git a/packages/vue-primitives/src/aspect-ratio/stories/styles.css b/packages/vue-primitives/src/aspect-ratio/stories/styles.css
@@ -0,0 +1,7 @@
+.asperRation__root{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: red;
+  color: white;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default as AspectRatio } from './AspectRatio.vue'`
	`2`	`+export type { AspectRatioProps } from './AspectRatio.ts'`