chakra-ui · codebender828 · Jun 14, 2021 · Jun 12, 2021 · Jun 12, 2021 · Jun 12, 2021
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -214,7 +214,9 @@
       "contributions": [
         "code",
         "bug",
-        "ideas"
+        "ideas",
+        "test",
+        "doc"
       ]
     },
     {
@@ -236,6 +238,15 @@
         "doc"
       ]
     },
+    {
+      "login": "MaySoMusician",
+      "name": "MaySoMusician",
+      "avatar_url": "https://avatars.githubusercontent.com/u/34566290?v=4",
+      "profile": "https://github.com/MaySoMusician",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "MWFIAE",
       "name": "Martin",

diff --git a/.changeset/curvy-squids-doubt.md b/.changeset/curvy-squids-doubt.md
@@ -0,0 +1,5 @@
+---
+'@chakra-ui/vue': patch
+---
+
+Fixes CImage src attribute bug
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -0,0 +1,10 @@
+{
+  "installCommand": "csb:install",
+  "buildCommand": "build",
+  "packages": [
+    "packages/chakra-ui-core",
+    "packages/chakra-ui-nuxt"
+  ],
+  "sandboxes": ["chakra-ui-vue-0x-starter-template-2sy0g", "chakra-ui-nuxt-demo-f8tq4"],
+  "node": "14"
+}
diff --git a/.gitignore b/.gitignore
@@ -37,4 +37,5 @@ config/.env
 packages/chakra-ui-nuxt/.github
 packages/chakra-ui-docs/static/sw.js
 website/static/sw.js
-.npmrc
+.npmrc
+**/static/sw.js
diff --git a/.storybook/assets/chakra.png b/.storybook/assets/chakra.png
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -15,6 +15,10 @@ module.exports = async ({ config, mode }) => {
       'sass-loader'
     ],
   });
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    "@/": path.resolve(__dirname, "./"),
+  };
 
   // Return the altered config
   return config;

diff --git a/README.md b/README.md
@@ -218,9 +218,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/odanado"><img src="https://avatars.githubusercontent.com/u/6040962?v=4?s=50" width="50px;" alt=""/><br /><sub><b>odanado</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=odanado" title="Code">💻</a> <a href="#tool-odanado" title="Tools">🔧</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/IHIutch"><img src="https://avatars.githubusercontent.com/u/20825047?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Jonathan Hutchison</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=IHIutch" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/issues?q=author%3AIHIutch" title="Bug reports">🐛</a> <a href="#ideas-IHIutch" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://jt.houk.space/"><img src="https://avatars.githubusercontent.com/u/23695312?v=4?s=50" width="50px;" alt=""/><br /><sub><b>JT Houk</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=HoukasaurusRex" title="Documentation">📖</a> <a href="#platform-HoukasaurusRex" title="Packaging/porting to new platform">📦</a></td>
     <td align="center"><a href="https://github.com/vincentpalma"><img src="https://avatars.githubusercontent.com/u/10133632?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Vincent Palma</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=vincentpalma" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/MaySoMusician"><img src="https://avatars.githubusercontent.com/u/34566290?v=4?s=50" width="50px;" alt=""/><br /><sub><b>MaySoMusician</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=MaySoMusician" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/MWFIAE"><img src="https://avatars.githubusercontent.com/u/6072971?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Martin</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=MWFIAE" title="Code">💻</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=MWFIAE" title="Tests">⚠️</a></td>
   </tr>
 </table>

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   },
   "scripts": {
     "postinstall": "lerna link",
+    "csb:install": "yarn && yarn bootstrap",
     "bootstrap": "lerna bootstrap --use-workspaces",
     "build:dev": "yarn workspace @chakra-ui/vue run rollup --config rollup.dev.config.js",
     "build": "yarn workspace @chakra-ui/vue build",

diff --git a/packages/chakra-ui-core/src/CImage/CImage.js b/packages/chakra-ui-core/src/CImage/CImage.js
@@ -55,8 +55,12 @@ const CImage = {
   methods: {
     loadImage (src, srcset) {
       const image = new window.Image()
-      image.srcset = srcset
-      image.src = src
+      if (srcset) {
+        image.srcset = srcset
+      }
+      if (src) {
+        image.src = src
+      }
 
       image.onload = (event) => {
         this.hasLoaded = true

diff --git a/packages/chakra-ui-core/src/CImage/CImage.stories.js b/packages/chakra-ui-core/src/CImage/CImage.stories.js
@@ -8,7 +8,18 @@ storiesOf('UI | Image', module)
       <CImage
         shadow="sm"
         htmlWidth="100px"
-        src="https://bit.ly/chakra-jonathan-bakebwa"
+        src="https://bit.ly/chakra-jonathan-bakebw3a"
+        srcset="https://bit.ly/chakra-jonathan-bakebwa"
+      />
+    `
+  }))
+  .add('Webpack required image', () => ({
+    components: { CImage },
+    template: `
+      <CImage
+        shadow="sm"
+        htmlWidth="100px"
+        :src="require('@/assets/chakra.png')"
       />
     `
   }))

diff --git a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js
@@ -46,9 +46,18 @@ it('fallback src works', async () => {
   })
 })
 
-it('srcset works', async () => {
-  renderComponent({ template: '<CImage alt="My Image Description" src="LOAD_SUCCESS_SRC" srcset="LOAD_SUCCESS_SRC 400w" />' })
+it('"srcset" should work and be prioritized over "src" if provided to CImage', async () => {
+  const { asFragment } = renderComponent({ template: '<CImage alt="My Image Description" src="LOAD_SUCCESS_SRC" srcset="LOAD_SUCCESS_SRC 400w" />' })
   await wait(() => {
     expect(screen.getByAltText(/My Image Description/i)).toHaveAttribute('srcset', 'LOAD_SUCCESS_SRC 400w')
+    expect(asFragment()).toMatchSnapshot()
+  })
+})
+
+it('should use src if srcset provided is undefined', async () => {
+  const { asFragment } = renderComponent({ template: '<CImage alt="My Image Description" src="LOAD_SUCCESS_SRC" srcset="LOAD_FAILURE_SRC" />' })
+  await wait(() => {
+    expect(screen.getByAltText(/My Image Description/i)).toHaveAttribute('src', 'LOAD_SUCCESS_SRC')
+    expect(asFragment()).toMatchSnapshot()
   })
 })
diff --git a/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap b/packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap
@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"srcset" should work and be prioritized over "src" if provided to CImage 1`] = `
+<DocumentFragment>
+  <img
+    alt="My Image Description"
+    class="css-0"
+    data-chakra-component="CImage"
+    src="LOAD_SUCCESS_SRC"
+    srcset="LOAD_SUCCESS_SRC 400w"
+  />
+</DocumentFragment>
+`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <img
@@ -11,3 +23,15 @@ exports[`should render correctly 1`] = `
   />
 </DocumentFragment>
 `;
+
+exports[`should use src if srcset provided is undefined 1`] = `
+<DocumentFragment>
+  <img
+    alt="My Image Description"
+    class="css-0"
+    data-chakra-component="CImage"
+    src="LOAD_SUCCESS_SRC"
+    srcset="LOAD_FAILURE_SRC"
+  />
+</DocumentFragment>
+`;
diff --git a/website/static/sw.js b/website/static/sw.js