+
@@ -74,23 +84,48 @@ import {
This is also how [ListLoader](./src/ListLoader.js) is created.
-You can also use the [online tool](http://danilowoz.com/create-react-content-loader/) to create shapes for your custom loader, it's made for [react-content-loader](https://github.com/danilowoz/react-content-loader) but the JSX it generates can be used in Vue templates or Vue JSX as well.
+You can also use the [online tool](http://danilowoz.com/create-vue-content-loader/) to create shapes for your custom loader.
## API
### Props
+| Prop | Type | Default | Description |
+| ------------------- | -------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| width | number, string | | SVG width in pixels without unit |
+| height | number, string | | SVG height in pixels without unit |
+| viewBox | string | `'0 0 ${width ?? 400} ${height ?? 130}'` | See [SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute |
+| preserveAspectRatio | string | `'xMidYMid meet'` | See [SVG preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) attribute |
+| speed | number | `2` | Animation speed |
+| primaryColor | string | `'#f9f9f9'` | Background color |
+| secondaryColor | string | `'#ecebeb'` | Highlight color |
+| uniqueKey | string | `randomId()` | Unique ID, you need to make it consistent for SSR |
+| animate | boolean | `true` | |
+| baseUrl | string | empty string | Required if you're using `` in your ``. Defaults to an empty string. This prop is common used as: `` which will fill the SVG attribute with the relative path. Related [#14](https://github.com/egoist/vue-content-loader/issues/14). |
+| primaryOpacity | number | `1` | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
+| secondaryOpacity | number | `1` | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
+
+## Examples
+
+### Responsiveness
+
+To create a responsive loader that will follow its parent container width, use only the `viewBox` attribute to set the ratio:
+
+```vue
+
+
+
+```
+
+To create a loader with fixed dimensions, use `width` and `height` attributes:
+
+```vue
+
+
+
+```
-|Prop|Type|Default|Description|
-|---|---|---|---|
-|width|number|`400`||
-|height|number|`130`||
-|speed|number|`2`||
-|preserveAspectRatio|string|`'xMidYMid meet'`||
-|primaryColor|string|`'#f9f9f9'`||
-|secondaryColor|string|`'#ecebeb'`||
-|uniqueKey|string|`randomId()`|Unique ID, you need to make it consistent for SSR|
-|animate|boolean|`true`||
+Note: the exact behavior might be different depending on the CSS you apply to SVG elements.
## Credits
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..881ae96
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ // Jest tests are run in Node and it requires commonjs modules
+ modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
+ loose: true,
+ },
+ ],
+ ],
+ plugins: ['@vue/babel-plugin-jsx'],
+}
diff --git a/bili.config.js b/bili.config.js
new file mode 100644
index 0000000..26389cd
--- /dev/null
+++ b/bili.config.js
@@ -0,0 +1,10 @@
+/** @type {import('bili').Config} */
+module.exports = {
+ externals: ['vue'],
+ input: 'src/index.ts',
+ output: {
+ format: ['cjs', 'es', 'umd', 'umd-min'],
+ fileName: 'vue-content-loader.[format][min][ext]',
+ moduleName: 'contentLoaders',
+ },
+}
diff --git a/circle.yml b/circle.yml
index b36cc08..a00152f 100644
--- a/circle.yml
+++ b/circle.yml
@@ -3,7 +3,7 @@ jobs:
build:
working_directory: ~/repo
docker:
- - image: circleci/node:latest
+ - image: cimg/node:lts
branches:
ignore:
- gh-pages # list of branches to ignore
@@ -22,3 +22,6 @@ jobs:
- run:
name: test
command: yarn run test
+ - run:
+ name: release
+ command: npx semantic-release
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..4d6ba94
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ testEnvironment: 'jsdom',
+ transform: {
+ '\\.[jt]sx?$': 'babel-jest',
+ },
+}
diff --git a/package.json b/package.json
index 54e2928..1fc9b32 100644
--- a/package.json
+++ b/package.json
@@ -8,41 +8,48 @@
},
"main": "dist/vue-content-loader.cjs.js",
"module": "dist/vue-content-loader.es.js",
- "cdn": "dist/vue-content-loader.min.js",
- "unpkg": "dist/vue-content-loader.min.js",
- "jsdelivr": "dist/vue-content-loader.min.js",
+ "cdn": "dist/vue-content-loader.umd.min.js",
+ "unpkg": "dist/vue-content-loader.umd.min.js",
+ "jsdelivr": "dist/vue-content-loader.umd.min.js",
"files": [
"dist"
],
+ "types": "dist/index.d.ts",
"sideEffects": false,
"scripts": {
"prepublishOnly": "npm run build",
- "test": "echo fine",
- "build": "bili --format cjs,es,umd,umd-min --module-name contentLoaders",
- "storybook": "poi --config .storybook/poi.config.js",
- "build:storybook": "poi build --config .storybook/poi.config.js"
+ "test": "jest",
+ "test:dev": "jest --watch",
+ "build": "bili",
+ "storybook": "poi -so --config stories/poi.config.js",
+ "build:storybook": "poi --prod --config stories/poi.config.js",
+ "format": "prettier -w ."
},
"author": {
"name": "EGOIST",
"email": "0x142857@gmail.com"
},
"license": "MIT",
- "poi": {
- "entry": "example/index.js",
- "dist": "example/dist",
- "homepage": "./"
- },
"devDependencies": {
- "@poi/plugin-storybook": "^10.0.0-beta.2",
- "@storybook/vue": "^3.3.15",
- "babel-plugin-transform-vue-jsx": "^4",
- "bili": "^3.0.12",
- "mini-css-extract-plugin": "^0.2.0",
- "poi": "^10.0.0-beta.6",
- "vue-test-utils": "^1.0.0-beta.9",
- "webpack": "^4.2.0"
+ "@babel/core": "7.18.5",
+ "@babel/preset-env": "7.18.2",
+ "@types/poi": "12.5.5",
+ "@vue/babel-plugin-jsx": "1.1.1",
+ "@vue/compiler-sfc": "3.2.37",
+ "@vue/test-utils": "2.0.1",
+ "babel-jest": "27.5.1",
+ "bili": "5.0.5",
+ "jest": "27.5.1",
+ "poi": "12.10.3",
+ "prettier": "2.7.1",
+ "regenerator-runtime": "0.13.9",
+ "rollup-plugin-typescript2": "0.32.1",
+ "typescript": "4.7.4",
+ "vue": "3.2.37",
+ "vue-loader": "17.0.0",
+ "vue-router": "4.0.16"
},
- "dependencies": {
- "babel-helper-vue-jsx-merge-props": "^2.0.3"
+ "peerDependencies": {
+ "vue": "^3"
}
}
diff --git a/renovate.json b/renovate.json
new file mode 100644
index 0000000..08ba8c0
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,18 @@
+{
+ "extends": ["config:base"],
+ "packageRules": [
+ {
+ "matchPackagePatterns": ["*"],
+ "matchUpdateTypes": ["minor", "patch"],
+ "groupName": "all non-major dependencies",
+ "groupSlug": "all-minor-patch",
+ "automerge": true,
+ "labels": ["dependencies"]
+ },
+ {
+ "matchPackagePatterns": ["*"],
+ "matchUpdateTypes": ["major"],
+ "labels": ["dependencies", "breaking"]
+ }
+ ]
+}
diff --git a/src/BulletListLoader.js b/src/BulletListLoader.js
deleted file mode 100644
index 2bcb3d3..0000000
--- a/src/BulletListLoader.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import ContentLoader from './ContentLoader'
-
-export default {
- name: 'BulletListLoader',
- functional: true,
- render(h, { data }) {
- return (
-
-
-
-
-
-
-
-
-
-
- )
- }
-}
diff --git a/src/BulletListLoader.tsx b/src/BulletListLoader.tsx
new file mode 100644
index 0000000..7bf10dd
--- /dev/null
+++ b/src/BulletListLoader.tsx
@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue'
+import ContentLoader from './ContentLoader'
+
+const BulletListLoader = defineComponent((props, { attrs }) => {
+ return () => (
+
+
+
+
+
+
+
+
+
+
+ )
+})
+
+export default BulletListLoader
diff --git a/src/CodeLoader.js b/src/CodeLoader.js
deleted file mode 100644
index cd1a69c..0000000
--- a/src/CodeLoader.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import ContentLoader from './ContentLoader'
-
-export default {
- name: 'CodeLoader',
- functional: true,
- render(h, { data }) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
-}
diff --git a/src/CodeLoader.tsx b/src/CodeLoader.tsx
new file mode 100644
index 0000000..164ddf8
--- /dev/null
+++ b/src/CodeLoader.tsx
@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue'
+import ContentLoader from './ContentLoader'
+
+const CodeLoader = defineComponent((props, { attrs }) => {
+ return () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+})
+
+export default CodeLoader
diff --git a/src/ContentLoader.js b/src/ContentLoader.js
deleted file mode 100644
index 2136075..0000000
--- a/src/ContentLoader.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import uid from './uid'
-
-export default {
- name: 'ContentLoader',
-
- functional: true,
-
- props: {
- width: {
- type: Number,
- default: 400
- },
- height: {
- type: Number,
- default: 130
- },
- speed: {
- type: Number,
- default: 2
- },
- preserveAspectRatio: {
- type: String,
- default: 'xMidYMid meet'
- },
- primaryColor: {
- type: String,
- default: '#f9f9f9'
- },
- secondaryColor: {
- type: String,
- default: '#ecebeb'
- },
- uniqueKey: {
- type: String
- },
- animate: {
- type: Boolean,
- default: true
- }
- },
-
- render(h, { props, data, children }) {
- const idClip = props.uniqueKey ? `${props.uniqueKey}-idClip` : uid()
- const idGradient = props.uniqueKey ? `${props.uniqueKey}-idGradient` : uid()
-
- return (
-
- )
- }
-}
diff --git a/src/ContentLoader.spec.js b/src/ContentLoader.spec.js
new file mode 100644
index 0000000..520382c
--- /dev/null
+++ b/src/ContentLoader.spec.js
@@ -0,0 +1,221 @@
+import 'regenerator-runtime/runtime'
+import { mount } from '@vue/test-utils'
+
+import ContentLoader from './ContentLoader'
+
+describe('ContentLoader', () => {
+ it('has default values for props', () => {
+ const wrapper = mount(ContentLoader)
+
+ expect(wrapper.vm.width).toBe(undefined)
+ expect(wrapper.vm.height).toBe(undefined)
+ expect(wrapper.vm.speed).toBe(2)
+ expect(wrapper.vm.preserveAspectRatio).toBe('xMidYMid meet')
+ expect(wrapper.vm.baseUrl).toBe('')
+ expect(wrapper.vm.primaryColor).toBe('#f9f9f9')
+ expect(wrapper.vm.secondaryColor).toBe('#ecebeb')
+ expect(wrapper.vm.primaryOpacity).toBe(1)
+ expect(wrapper.vm.secondaryOpacity).toBe(1)
+ expect(wrapper.vm.uniqueKey).toBe(undefined)
+ expect(wrapper.vm.animate).toBe(true)
+ })
+
+ it('has viewbox, version and aspect ratio attributes on svg element', () => {
+ const wrapper = mount(ContentLoader, {
+ props: {
+ width: 300,
+ height: 200,
+ preserveAspectRatio: 'xMaxYMid slice',
+ },
+ })
+
+ expect(wrapper.find('svg').attributes()).toEqual({
+ width: '300',
+ height: '200',
+ preserveAspectRatio: 'xMaxYMid slice',
+ version: '1.1',
+ viewBox: '0 0 300 200',
+ })
+ })
+
+ it('has viewbox, version and aspect ratio attributes on svg element', () => {
+ const wrapper = mount(ContentLoader, {
+ props: {
+ width: 300,
+ height: 200,
+ preserveAspectRatio: 'xMaxYMid slice',
+ },
+ })
+
+ expect(wrapper.find('svg').attributes()).toEqual({
+ width: '300',
+ height: '200',
+ preserveAspectRatio: 'xMaxYMid slice',
+ version: '1.1',
+ viewBox: '0 0 300 200',
+ })
+ })
+
+ it('draws a rect filled by the gradient and clipped by the shapes', () => {
+ const wrapper = mount(ContentLoader)
+
+ expect(wrapper.find('rect').attributes()).toEqual({
+ style: `fill: url(#${wrapper.vm.idGradient});`,
+ 'clip-path': `url(#${wrapper.vm.idClip})`,
+ x: '0',
+ y: '0',
+ width: '100%',
+ height: '100%',
+ })
+ })
+
+ it('draws a clipPath with a unique ID', () => {
+ const wrapper = mount(ContentLoader)
+
+ expect(wrapper.find('defs clipPath').attributes()).toEqual({
+ id: wrapper.vm.idClip,
+ })
+ })
+
+ it('draws a linear gradient with a unique ID', () => {
+ const wrapper = mount(ContentLoader)
+
+ expect(wrapper.find('defs linearGradient').attributes()).toEqual({
+ id: wrapper.vm.idGradient,
+ })
+ })
+
+ it('draws a linear gradient with 3 stops', () => {
+ const wrapper = mount(ContentLoader)
+ const stops = wrapper.findAll('defs linearGradient stop')
+
+ expect(stops.length).toBe(3)
+ expect(stops[0].attributes()).toEqual({
+ offset: '0%',
+ 'stop-color': '#f9f9f9',
+ 'stop-opacity': '1',
+ })
+ expect(stops[1].attributes()).toEqual({
+ offset: '50%',
+ 'stop-color': '#ecebeb',
+ 'stop-opacity': '1',
+ })
+ expect(stops[2].attributes()).toEqual({
+ offset: '100%',
+ 'stop-color': '#f9f9f9',
+ 'stop-opacity': '1',
+ })
+ })
+
+ it('animates the gradient by default using given speed', () => {
+ const wrapper = mount(ContentLoader)
+ const animations = wrapper.findAll('defs linearGradient animate')
+
+ expect(animations.length).toBe(3)
+ expect(animations[0].attributes()).toEqual({
+ attributeName: 'offset',
+ values: '-2; 1',
+ dur: '2s',
+ repeatCount: 'indefinite',
+ })
+ expect(animations[1].attributes()).toEqual({
+ attributeName: 'offset',
+ values: '-1.5; 1.5',
+ dur: '2s',
+ repeatCount: 'indefinite',
+ })
+ expect(animations[2].attributes()).toEqual({
+ attributeName: 'offset',
+ values: '-1; 2',
+ dur: '2s',
+ repeatCount: 'indefinite',
+ })
+ })
+
+ it('does not animate if animate prop is false', () => {
+ const wrapper = mount(ContentLoader, {
+ props: {
+ animate: false,
+ },
+ })
+
+ expect(wrapper.findAll('defs linearGradient animate').length).toBe(0)
+ })
+
+ it('has a default element to clip with', () => {
+ const wrapper = mount(ContentLoader)
+
+ expect(wrapper.find('defs clipPath rect').attributes()).toEqual({
+ x: '0',
+ y: '0',
+ rx: '5',
+ ry: '5',
+ width: '100%',
+ height: '100%',
+ })
+ })
+
+ it('outputs the default slot within the clipPath', () => {
+ const wrapper = mount(ContentLoader, {
+ slots: {
+ default: '',
+ },
+ })
+
+ expect(wrapper.find('defs clipPath circle').html()).toEqual(
+ ''
+ )
+ })
+
+ it('use the baseUrl to link the gradient & clip path', () => {
+ const wrapper = mount(ContentLoader, {
+ props: {
+ baseUrl: '/path',
+ },
+ })
+
+ expect(wrapper.find('rect').attributes()).toMatchObject({
+ style: `fill: url(http://github.com/path#${wrapper.vm.idGradient});`,
+ 'clip-path': `url(http://github.com/path#${wrapper.vm.idClip})`,
+ })
+ })
+
+ it('use the uniqueKey to generate static IDs', () => {
+ const wrapper = mount(ContentLoader, {
+ props: {
+ uniqueKey: 'unique',
+ },
+ })
+
+ expect(wrapper.vm.idClip).toEqual('unique-idClip')
+ expect(wrapper.vm.idGradient).toEqual('unique-idGradient')
+ })
+
+ it('apply extra attributes on the root element', () => {
+ const wrapper = mount(ContentLoader, {
+ props: {
+ class: 'loader',
+ id: 'loader',
+ },
+ })
+
+ expect(wrapper.find('svg').classes()).toEqual(['loader'])
+ expect(wrapper.find('svg').attributes()).toMatchObject({ id: 'loader' })
+ })
+
+ it('updates the computedViewBox when props change', async () => {
+ const wrapper = mount(ContentLoader, {
+ props: {
+ viewBox: '0 0 100 100',
+ },
+ })
+
+ expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 100 100')
+
+ await wrapper.setProps({ viewBox: '0 0 200 200' })
+ expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 200 200')
+
+ await wrapper.setProps({ viewBox: null, width: 50, height: 100 })
+ expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 50 100')
+ })
+})
diff --git a/src/ContentLoader.tsx b/src/ContentLoader.tsx
new file mode 100644
index 0000000..e018a53
--- /dev/null
+++ b/src/ContentLoader.tsx
@@ -0,0 +1,149 @@
+import { defineComponent, computed } from 'vue'
+import uid from './uid'
+
+export default defineComponent({
+ name: 'ContentLoader',
+
+ props: {
+ width: {
+ type: [Number, String],
+ },
+ height: {
+ type: [Number, String],
+ },
+ viewBox: {
+ type: String,
+ },
+ preserveAspectRatio: {
+ type: String,
+ default: 'xMidYMid meet',
+ },
+ speed: {
+ type: Number,
+ default: 2,
+ },
+ baseUrl: {
+ type: String,
+ default: '',
+ },
+ primaryColor: {
+ type: String,
+ default: '#f9f9f9',
+ },
+ secondaryColor: {
+ type: String,
+ default: '#ecebeb',
+ },
+ primaryOpacity: {
+ type: Number,
+ default: 1,
+ },
+ secondaryOpacity: {
+ type: Number,
+ default: 1,
+ },
+ uniqueKey: {
+ type: String,
+ },
+ animate: {
+ type: Boolean,
+ default: true,
+ },
+ },
+
+ setup(props) {
+ const idClip = computed(() =>
+ props.uniqueKey ? `${props.uniqueKey}-idClip` : uid()
+ )
+ const idGradient = computed(() =>
+ props.uniqueKey ? `${props.uniqueKey}-idGradient` : uid()
+ )
+ const width = computed(() => props.width ?? 400)
+ const height = computed(() => props.height ?? 130)
+ const computedViewBox = computed(
+ () => props.viewBox ?? `0 0 ${width.value} ${height.value}`
+ )
+
+ return {
+ idClip,
+ idGradient,
+ computedViewBox,
+ }
+ },
+
+ render() {
+ return (
+
+ )
+ },
+})
diff --git a/src/FacebookLoader.js b/src/FacebookLoader.js
deleted file mode 100644
index 0d0f62e..0000000
--- a/src/FacebookLoader.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import ContentLoader from './ContentLoader'
-
-export default {
- name: 'FacebookLoader',
- functional: true,
- render(h, { data }) {
- return (
-
-
-
-
-
-
-
-
- )
- }
-}
diff --git a/src/FacebookLoader.tsx b/src/FacebookLoader.tsx
new file mode 100644
index 0000000..39a5885
--- /dev/null
+++ b/src/FacebookLoader.tsx
@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+import ContentLoader from './ContentLoader'
+
+const FacebookLoader = defineComponent((props, { attrs }) => {
+ return () => (
+
+
+
+
+
+
+
+
+ )
+})
+
+export default FacebookLoader
diff --git a/src/InstagramLoader.js b/src/InstagramLoader.js
deleted file mode 100644
index 46b461d..0000000
--- a/src/InstagramLoader.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import ContentLoader from './ContentLoader'
-
-export default {
- name: 'InstagramLoader',
- functional: true,
- render(h, { data }) {
- return (
-
-
-
-
-
-
-
- )
- }
-}
diff --git a/src/InstagramLoader.tsx b/src/InstagramLoader.tsx
new file mode 100644
index 0000000..6ccd206
--- /dev/null
+++ b/src/InstagramLoader.tsx
@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue'
+import ContentLoader from './ContentLoader'
+
+const InstagramLoader = defineComponent((props, { attrs }) => {
+ return () => (
+
+
+
+
+
+
+
+ )
+})
+
+export default InstagramLoader
diff --git a/src/ListLoader.js b/src/ListLoader.js
deleted file mode 100644
index a2ebc10..0000000
--- a/src/ListLoader.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import ContentLoader from './ContentLoader'
-
-export default {
- name: 'ListLoader',
- functional: true,
- render(h, { data }) {
- return (
-
-
-
-
-
-
-
-
- )
- }
-}
diff --git a/src/ListLoader.tsx b/src/ListLoader.tsx
new file mode 100644
index 0000000..2f349ef
--- /dev/null
+++ b/src/ListLoader.tsx
@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+import ContentLoader from './ContentLoader'
+
+const ListLoader = defineComponent((props, { attrs }) => {
+ return () => (
+
+
+
+
+
+
+
+
+ )
+})
+
+export default ListLoader
diff --git a/src/__snapshots__/index.spec.js.snap b/src/__snapshots__/index.spec.js.snap
new file mode 100644
index 0000000..821ccdc
--- /dev/null
+++ b/src/__snapshots__/index.spec.js.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulletListLoader renders its shapes 1`] = `
+Array [
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+]
+`;
+
+exports[`CodeLoader renders its shapes 1`] = `
+Array [
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+]
+`;
+
+exports[`FacebookLoader renders its shapes 1`] = `
+Array [
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+]
+`;
+
+exports[`InstagramLoader renders its shapes 1`] = `
+Array [
+ "",
+ "",
+ "",
+ "",
+]
+`;
+
+exports[`ListLoader renders its shapes 1`] = `
+Array [
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+]
+`;
diff --git a/src/index.spec.js b/src/index.spec.js
new file mode 100644
index 0000000..473c9bb
--- /dev/null
+++ b/src/index.spec.js
@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+
+import BulletListLoader from './BulletListLoader'
+import CodeLoader from './CodeLoader'
+import FacebookLoader from './FacebookLoader'
+import ListLoader from './ListLoader'
+import InstagramLoader from './InstagramLoader'
+
+describe.each([
+ ['BulletListLoader', BulletListLoader],
+ ['CodeLoader', CodeLoader],
+ ['FacebookLoader', FacebookLoader],
+ ['ListLoader', ListLoader],
+ ['InstagramLoader', InstagramLoader],
+])('%s', (name, component) => {
+ it('renders its shapes', () => {
+ const wrapper = mount(component)
+
+ expect(
+ wrapper.findAll('clipPath > *').map((c) => c.html())
+ ).toMatchSnapshot()
+ })
+
+ it('forwards attributes to ContentLoader', () => {
+ const wrapper = mount(component, {
+ props: {
+ id: 'loader',
+ class: 'loader',
+ },
+ })
+
+ expect(wrapper.attributes()).toMatchObject({
+ id: 'loader',
+ class: 'loader',
+ })
+ })
+})
diff --git a/src/index.test.js b/src/index.test.js
deleted file mode 100644
index db58479..0000000
--- a/src/index.test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { mount } from 'vue-test-utils'
-import ContentLoader from './'
-
-test('it works', () => {
- const wrapper = mount(ContentLoader)
- expect(wrapper.isVueInstance()).toBe(true)
-})
diff --git a/src/index.js b/src/index.ts
similarity index 100%
rename from src/index.js
rename to src/index.ts
diff --git a/src/uid.js b/src/uid.js
deleted file mode 100644
index f9a4a3b..0000000
--- a/src/uid.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default () =>
- Math.random()
- .toString(36)
- .substring(2)
diff --git a/src/uid.ts b/src/uid.ts
new file mode 100644
index 0000000..17bad20
--- /dev/null
+++ b/src/uid.ts
@@ -0,0 +1 @@
+export default () => Math.random().toString(36).substring(2)
diff --git a/stories/Storybook.vue b/stories/Storybook.vue
new file mode 100644
index 0000000..1e85ee4
--- /dev/null
+++ b/stories/Storybook.vue
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
diff --git a/stories/index.js b/stories/index.js
index 52dd20c..0b6b89d 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -1,18 +1,22 @@
-import { storiesOf } from '@storybook/vue'
+import { createStorybook } from './storybook'
import {
ContentLoader,
FacebookLoader,
CodeLoader,
BulletListLoader,
InstagramLoader,
- ListLoader
+ ListLoader,
} from '../src'
const Container = {
functional: true,
- render(h, { children }) {
- return {children}
- }
+ render() {
+ return (
+
+ {this.$slots.default()}
+
+ )
+ },
}
const MyLoader = {
@@ -29,97 +33,156 @@ const MyLoader = {
)
- }
+ },
}
-storiesOf('ContentLoader', module)
- .add('facebook style', () => ({
- render() {
- return (
-