diff --git a/.changeset/curvy-squids-doubt.md b/.changeset/curvy-squids-doubt.md new file mode 100644 index 00000000..b67b5956 --- /dev/null +++ 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 new file mode 100644 index 00000000..451f3b84 --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index d3d92c38..d4c8b810 100644 --- 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 \ No newline at end of file +.npmrc +**/static/sw.js \ No newline at end of file diff --git a/.storybook/assets/chakra.png b/.storybook/assets/chakra.png new file mode 100644 index 00000000..35d385d6 Binary files /dev/null and b/.storybook/assets/chakra.png differ diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 26857e3f..ad23fb99 100644 --- 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/package.json b/package.json index 4e839c8b..5ef7dd33 100644 --- 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 index a93cc3f9..a7746822 100644 --- 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 index d4130a74..4ac8ec86 100644 --- 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) + ` + })) + .add('Webpack required image', () => ({ + components: { CImage }, + template: ` + ` })) diff --git a/packages/chakra-ui-core/src/CImage/tests/CImage.test.js b/packages/chakra-ui-core/src/CImage/tests/CImage.test.js index 04836872..e2aaa61e 100644 --- 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: '' }) +it('"srcset" should work and be prioritized over "src" if provided to CImage', async () => { + const { asFragment } = renderComponent({ template: '' }) 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: '' }) + 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 index 0b179b32..f3887799 100644 --- 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`] = ` + + My Image Description + +`; + exports[`should render correctly 1`] = ` `; + +exports[`should use src if srcset provided is undefined 1`] = ` + + My Image Description + +`; diff --git a/website/static/sw.js b/website/static/sw.js deleted file mode 100644 index ea698990..00000000 --- a/website/static/sw.js +++ /dev/null @@ -1 +0,0 @@ -// THIS FILE SHOULD NOT BE VERSION CONTROLLED