Merge pull request #214 from TylerAPfledderer/feat/create-c-image

feat(c-image): create image components

Author: codebender828

packages/c-image/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/c-image
+
+Image
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-image
+# or
+npm i @chakra-ui/c-image
+```

packages/c-image/examples/basic.vue

@@ -0,0 +1,18 @@
+<template>
+  <c-image
+    :width="['100px', '200px']"
+    src="http://example.com/non-existent-image.jpg"
+    alt="welcome"
+    :onLoad="basicLoad"
+    :onError="basicError"
+  />
+</template>
+<script setup lang="ts">
+import { CImage } from "../index"
+
+const props = {}
+
+const basicLoad = () => console.log("Loaded basic image")
+
+const basicError = () => console.error("Whoops! It's broken")
+</script>

packages/c-image/examples/bug.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <c-image :src="src" />
+    <button :style="{ background: 'revert', padding: 'revert' }" @click="click">
+      set image
+    </button>
+    <p>src set to Avatar: {{ src }}</p>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue"
+import { CImage } from "../src"
+
+const src = ref("")
+
+const click = () =>
+  (src.value =
+    "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png")
+</script>

packages/c-image/examples/fallback-element.vue

@@ -0,0 +1,8 @@
+<template>
+  <c-image src="https://loremflickr.com/240/240">
+    <div :style="{ width: '240px', height: '240px', background: 'red' }" />
+  </c-image>
+</template>
+<script setup lang="ts">
+import { CImage } from "../index"
+</script>

packages/c-image/examples/fallback-strategy.vue

@@ -0,0 +1,19 @@
+<template>
+  <c-image
+    src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+    w="{240}"
+    h="{240}"
+    fallbackStrategy="onError"
+    fallbackSrc="https://via.placeholder.com/240"
+  />
+  <c-image
+    w="{240}"
+    h="{240}"
+    src="https://bit.ly/dan-abramov"
+    fallbackStrategy="beforeLoadOrError"
+    fallbackSrc="https://via.placeholder.com/240"
+  />
+</template>
+<script setup lang="ts">
+import { CImage } from "../index"
+</script>

packages/c-image/examples/fallbacksrc.vue

@@ -0,0 +1,9 @@
+<template>
+  <c-image
+    src="https://loremflickr.com/240/240"
+    fallbackSrc="https://via.placeholder.com/240"
+  />
+</template>
+<script setup lang="ts">
+import { CImage } from "../index"
+</script>

packages/c-image/examples/with-fit.vue

@@ -0,0 +1,12 @@
+<template>
+  <c-image
+    src="https://loremflickr.com/240/240"
+    fallbackSrc="https://via.placeholder.com/240"
+    fit="cover"
+    htmlWidth="400px"
+    htmlHeight="300px"
+  />
+</template>
+<script setup lang="ts">
+import { CImage } from "../index"
+</script>

packages/c-image/examples/with-native-width.vue

@@ -0,0 +1,16 @@
+<template>
+  <c-image
+    src="https://loremflickr.com/240/240"
+    fallbackSrc="https://via.placeholder.com/240"
+    htmlWidth="300"
+    htmlHeight="300"
+    @load="load"
+  />
+</template>
+<script setup lang="ts">
+import { CImage } from "../index"
+
+const load = () => {
+  console.log("loaded")
+}
+</script>

packages/c-image/examples/with-srcset.vue

@@ -0,0 +1,29 @@
+<template>
+  <c-image
+    ref="firstRef"
+    srcSet="//fake.image/ 1x"
+    :onLoad="firstLog"
+    :onError="firstLog"
+  />
+  <c-img
+    ref="secondRef"
+    srcSet="//lorempixel.com/100/100/ 1x"
+    :onLoad="secondLog"
+    :onError="secondLog"
+  />
+</template>
+<script lang="ts" setup>
+import { ref } from "vue"
+import { CImage, CImg } from "../index"
+
+const firstRef = ref<{ $el: HTMLImageElement } | null>(null)
+const secondRef = ref<{ $el: HTMLImageElement } | null>(null)
+
+const firstLog = (e: any) => {
+  console.log(1, "Image", e.type, firstRef.value?.$el.currentSrc)
+}
+
+const secondLog = (e: any) => {
+  console.log(2, "Img", e.type, secondRef.value?.$el.currentSrc)
+}
+</script>

packages/c-image/index.tsx

@@ -0,0 +1 @@
+export * from './src'