feat(components): responsive images with CPicture

closes #12

packages/chusho/src/components/CPicture/CPicture.spec.js

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import CPicture from './CPicture';
+
+describe('CPicture', () => {
+  it('renders with the right attributes', () => {
+    const wrapper = mount(CPicture, {
+      props: {
+        src: '/image.jpg',
+        alt: 'alt',
+      },
+    });
+
+    expect(wrapper.html()).toBe(
+      '<picture><img src="/image.jpg" alt="alt"></picture>'
+    );
+  });
+
+  it('renders an empty alt by default', () => {
+    const wrapper = mount(CPicture, {
+      props: {
+        src: '/image.jpg',
+      },
+    });
+
+    expect(wrapper.html()).toBe(
+      '<picture><img src="/image.jpg" alt=""></picture>'
+    );
+  });
+
+  it('apply config class on img tag', () => {
+    const wrapper = mount(CPicture, {
+      global: {
+        provide: {
+          $chusho: {
+            options: {
+              components: {
+                picture: {
+                  class: 'picture',
+                },
+              },
+            },
+          },
+        },
+      },
+      props: {
+        src: '/image.jpg',
+        class: 'special-picture',
+      },
+    });
+
+    expect(wrapper.find('img').classes()).toEqual([
+      'special-picture',
+      'picture',
+    ]);
+  });
+
+  it('renders given sources', () => {
+    const wrapper = mount(CPicture, {
+      props: {
+        src: '/image.jpg',
+        sources: [
+          {
+            srcset: 'image@2x.webp 2x, image.webp',
+            type: 'image/webp',
+          },
+          {
+            srcset: 'image@2x.jpg 2x, image.jpg',
+            type: 'image/jpeg',
+          },
+        ],
+      },
+    });
+
+    expect(wrapper.html()).toBe(
+      '<picture><source srcset="image@2x.webp 2x, image.webp" type="image/webp"><source srcset="image@2x.jpg 2x, image.jpg" type="image/jpeg"><img src="/image.jpg" alt=""></picture>'
+    );
+  });
+});

packages/chusho/src/components/CPicture/CPicture.ts

@@ -0,0 +1,57 @@
+import {
+  defineComponent,
+  h,
+  inject,
+  mergeProps,
+  PropType,
+  SourceHTMLAttributes,
+} from 'vue';
+
+import { DollarChusho } from '../../types';
+import { generateConfigClass } from '../../utils/components';
+import componentMixin from '../mixins/componentMixin';
+
+export default defineComponent({
+  name: 'CPicture',
+
+  mixins: [componentMixin],
+
+  inheritAttrs: false,
+
+  props: {
+    /**
+     * Default/fallback image URL used in the `src` attribute.
+     */
+    src: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Alternative text description; leave empty if the image is not a key part of the content, otherwise describe what can be seen.
+     */
+    alt: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Generate multiple `source` elements with the given attributes.
+     */
+    sources: {
+      type: Array as PropType<SourceHTMLAttributes[]>,
+      default: () => [],
+    },
+  },
+
+  render() {
+    const pictureConfig = inject<DollarChusho | null>('$chusho', null)?.options
+      ?.components?.picture;
+    const elementProps: Record<string, unknown> = mergeProps(this.$attrs, {
+      src: this.$props.src,
+      alt: this.$props.alt,
+      ...generateConfigClass(pictureConfig?.class, this.$props),
+    });
+    const sources = this.$props.sources.map((source) => h('source', source));
+
+    return h('picture', null, [...sources, h('img', elementProps)]);
+  },
+});

packages/chusho/src/components/CPicture/index.ts

@@ -0,0 +1,3 @@
+import CPicture from './CPicture';
+
+export { CPicture };

packages/chusho/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './CCollapse';
 export * from './CTabs';
 export * from './CDialog';
 export * from './CAlert';
+export * from './CPicture';

packages/chusho/src/types/index.ts

@@ -57,6 +57,9 @@ interface ComponentsOptions {
   collapseContent?: ComponentCommonOptions & {
     transition?: BaseTransitionProps;
   };
+  picture?: {
+    class?: VueClassBinding | ClassGenerator;
+  };
 }
 
 export interface ChushoOptions {

packages/docs/.vuepress/config.js

@@ -41,6 +41,7 @@ module.exports = {
             'components/button.md',
             'components/dialog.md',
             'components/icon.md',
+            'components/picture.md',
             'components/tabs.md',
             'components/collapse.md',
           ],

packages/docs/guide/components/picture.md

@@ -0,0 +1,56 @@
+# Picture
+
+Easily generate responsive images.
+
+## Config
+
+### class
+
+Classes applied to the component `img` element, except when the prop `bare` is set to `true`. See [styling components](/guide/styling-components/).
+
+-   **type:** `Array<String | Object> | Object | String | (props: Object) => {}`
+-   **default:** `null`
+
+#### Example
+
+```js
+class: 'img-responsive'
+```
+
+## API
+
+<Docgen :components="['CPicture']" />
+
+## Examples
+
+### Simplest
+
+```vue
+<CPicture src="/path/to/image.jpg" />
+```
+
+### With sources
+
+```vue
+<CPicture
+    :src="src"
+    :sources="[
+        {
+            srcset: '/path/to/image@2x.webp 2x, /path/to/image.webp',
+            type: 'image/webp',
+        },
+        {
+            srcset: '/path/to/image@2x.jpg 2x, /path/to/image.jpg',
+            type: 'image/jpeg',
+        },
+    ]"
+/>
+```
+
+### With additional attributes
+
+Attributes are not applied to the `picture` element but to the `img` element.
+
+```vue
+<CPicture src="/path/to/image.jpg" alt="Description" loading="lazy" />
+```

packages/playground/chusho.config.js

@@ -33,6 +33,9 @@ export default {
       height: 48,
       class: 'inline-block align-middle pointer-events-none fill-current',
     },
+    picture: {
+      class: 'picture',
+    },
     tabs: {
       class: 'tabs',
     },

packages/playground/src/components/examples/components/picture/Default.vue

@@ -0,0 +1,15 @@
+<template>
+  <CPicture :src="src" class="img-responsive" />
+</template>
+
+<script>
+import jpg from '../../../../assets/images/building.jpg';
+
+export default {
+  data() {
+    return {
+      src: jpg,
+    };
+  },
+};
+</script>

packages/playground/src/components/examples/components/picture/WithSources.vue

@@ -0,0 +1,35 @@
+<template>
+  <CPicture
+    :sources="sources"
+    :src="src"
+    alt="Sky view from the middle of a C shaped building."
+    width="825"
+    height="550"
+    loading="lazy"
+  />
+</template>
+
+<script>
+import jpg from '../../../../assets/images/building.jpg';
+import webp from '../../../../assets/images/building.webp';
+import jpg2x from '../../../../assets/images/building@2x.jpg';
+import webp2x from '../../../../assets/images/building@2x.webp';
+
+export default {
+  data() {
+    return {
+      src: jpg,
+      sources: [
+        {
+          srcset: `${webp2x} 2x, ${webp}`,
+          type: 'image/webp',
+        },
+        {
+          srcset: `${jpg2x} 2x, ${jpg}`,
+          type: 'image/jpeg',
+        },
+      ],
+    };
+  },
+};
+</script>

packages/playground/src/components/examples/routes.json

@@ -131,6 +131,19 @@
             "component": "Controlled"
           }
         ]
+      },
+      "picture": {
+        "label": "Picture",
+        "variants": [
+          {
+            "label": "Default",
+            "component": "Default"
+          },
+          {
+            "label": "With Sources",
+            "component": "WithSources"
+          }
+        ]
       }
     }
   },