From 007bde69687b5b3139023b721923b0a74df30788 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Burgener?=
Date: Mon, 18 Jan 2021 16:51:12 +0100
Subject: [PATCH] feat: upgrade to support Vue 3 (#114)
Co-authored-by: EGOIST <0x142857@gmail.com>
BREAKING CHANGE:
Require Vue 3
---
.babelrc | 15 +-
README.md | 34 +-
bili.config.js | 9 +
package.json | 26 +-
src/BulletListLoader.js | 32 +-
src/CodeLoader.js | 34 +-
src/ContentLoader.js | 240 +--
src/FacebookLoader.js | 28 +-
src/InstagramLoader.js | 24 +-
src/ListLoader.js | 28 +-
src/index.test.js | 7 -
stories/Storybook.vue | 20 +-
stories/index.js | 8 +-
stories/storybook.js | 35 +-
yarn.lock | 4213 +++++++++++++++++++++++----------------
15 files changed, 2786 insertions(+), 1967 deletions(-)
create mode 100644 bili.config.js
delete mode 100644 src/index.test.js
diff --git a/.babelrc b/.babelrc
index b76bd21..dab4070 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,11 +1,12 @@
{
"presets": [
- ["@babel/preset-env",{
- "modules": false,
- "loose": true
- }]
+ [
+ "@babel/preset-env",
+ {
+ "modules": false,
+ "loose": true
+ }
+ ]
],
- "plugins": [
- "transform-vue-jsx"
- ]
+ "plugins": ["@vue/babel-plugin-jsx"]
}
diff --git a/README.md b/README.md
index 9584fb3..cad5385 100644
--- a/README.md
+++ b/README.md
@@ -20,8 +20,12 @@ This is a Vue port for [react-content-loader](https://github.com/danilowoz/react
## Install
+Note: For Vue 2, use `vue-content-loader@^0.2` instead.
+
```bash
yarn add vue-content-loader
+# For Vue 2
+# yarn add vue-content-loader@^0.2
```
CDN: [UNPKG](https://unpkg.com/vue-content-loader/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-content-loader/) (available as `window.contentLoaders`)
@@ -74,27 +78,25 @@ import {
This is also how [ListLoader](./src/ListLoader.js) is created.
-You can also use the [online tool](http://danilowoz.com/create-vue-content-loader/ ) to create shapes for your custom loader.
+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|`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`||
-|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|
-
+| 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` | |
+| baseUrl | string | empty string | Required if you're using `` in your `