Permalink
Browse files

init

  • Loading branch information...
egoist committed Mar 21, 2018
0 parents commit 485ad1d4c4ee56a7830263174493c6f7e8673081
Showing with 10,288 additions and 0 deletions.
  1. +10 −0 .babelrc
  2. +12 −0 .editorconfig
  3. +2 −0 .gitignore
  4. +8 −0 .storybook/config.js
  5. +11 −0 .storybook/poi.config.js
  6. +84 −0 README.md
  7. +24 −0 circle.yml
  8. +55 −0 package.json
  9. +21 −0 src/BulletListLoader.js
  10. +25 −0 src/CodeLoader.js
  11. +112 −0 src/ContentLoader.js
  12. +18 −0 src/FacebookLoader.js
  13. +17 −0 src/InstagramLoader.js
  14. +19 −0 src/ListLoader.js
  15. +6 −0 src/index.js
  16. +7 −0 src/index.test.js
  17. +4 −0 src/uid.js
  18. +125 −0 stories/index.js
  19. +9,728 −0 yarn.lock
@@ -0,0 +1,10 @@
{
"presets": [
["@babel/preset-env", {
"modules": false
}]
],
"plugins": [
"transform-vue-jsx"
]
}
@@ -0,0 +1,12 @@
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
@@ -0,0 +1,2 @@
node_modules
dist
@@ -0,0 +1,8 @@
import { configure } from '@storybook/vue'
function loadStories() {
// You can require as many stories as you need.
require('../stories')
}
configure(loadStories, module)
@@ -0,0 +1,11 @@
// poi.config.js
module.exports = {
// Use your storybook config as entry
entry: '.storybook/config.js',
outDir: '.storybook/dist',
// If you want storybook addons:
// entry: ['.storybook/config.js', '.storybook/addons.js']
plugins: [
require('@poi/plugin-storybook')()
]
}
@@ -0,0 +1,84 @@
# vue-content-loader
[![NPM version](https://img.shields.io/npm/v/vue-content-loader.svg?style=flat)](https://npmjs.com/package/vue-content-loader) [![NPM downloads](https://img.shields.io/npm/dm/vue-content-loader.svg?style=flat)](https://npmjs.com/package/vue-content-loader) [![CircleCI](https://circleci.com/gh/egoist/vue-content-loader/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-content-loader/tree/master)
SVG component to create placeholder loading, like Facebook cards loading.
## Install
```bash
yarn add @rem/vue-content-loader
```
__NOTE: You're installing `@rem/vue-content-loader` instead of `vue-content-loader`.__
CDN: [UNPKG](https://unpkg.com/@rem/vue-content-loader/) | [jsDelivr](https://cdn.jsdelivr.net/npm/@rem/vue-content-loader/) (available as `window.contentLoaders`)
## Usage
```vue
<template>
<content-loader></content-loader>
</template>
<script>
import { ContentLoader } from '@rem/vue-content-loader'
export default {
components: {
ContentLoader
}
}
</script>
```
🔥 [Check out the __storybook__ to see how it rocks!](https://vue-content-loader.egoist.moe)
### Built-in loaders
```js
import {
ContentLoader,
FacebookLoader,
CodeLoader,
BulletListLoader,
InstagramLoader,
ListLoader
} from '@rem/vue-content-loader'
```
`ContentLoader` is a meta loader while other loaders are just higher-order components of it. By default `ContentLoader` only displays a simple rectangle, here's how you can use it to create custom loaders:
```vue
<ContentLoader>
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
<rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
<rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
<rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
<rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
<rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
</ContentLoader>
```
This is also how [ListLoader](./src/ListLoader.js) is created.
## 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 change it for SSR|
|animate|boolean|`true`||
## License
MIT &copy; [EGOIST](https://github.com/egoist)
@@ -0,0 +1,24 @@
version: 2
jobs:
build:
working_directory: ~/repo
docker:
- image: circleci/node:latest
branches:
ignore:
- gh-pages # list of branches to ignore
- /release\/.*/ # or ignore regexes
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "yarn.lock" }}
- run:
name: install dependences
command: yarn install
- save_cache:
key: dependency-cache-{{ checksum "yarn.lock" }}
paths:
- ./node_modules
- run:
name: test
command: yarn run test:cov
@@ -0,0 +1,55 @@
{
"name": "@rem/vue-content-loader",
"version": "0.0.0",
"description": "SVG component to create placeholder loading, like Facebook cards loading.",
"repository": {
"url": "egoist/vue-content-loader",
"type": "git"
},
"publishConfig": {
"access": "public"
},
"main": "dist/vue-content-loader.cjs.js",
"files": [
"dist"
],
"sideEffects": false,
"scripts": {
"prepublishOnly": "npm run build",
"test": "tyu",
"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"
},
"author": {
"name": "EGOIST",
"email": "0x142857@gmail.com"
},
"license": "MIT",
"poi": {
"entry": "example/index.js",
"dist": "example/dist",
"homepage": "./"
},
"bili": {
"format": [
"cjs",
"umd"
],
"name": "vue-content-loader"
},
"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",
"tyu": "^1.0.0",
"vue-test-utils": "^1.0.0-beta.9",
"webpack": "^4.2.0"
},
"dependencies": {
"babel-helper-vue-jsx-merge-props": "^2.0.3"
}
}
@@ -0,0 +1,21 @@
import ContentLoader from './ContentLoader'
export default {
name: 'BulletListLoader',
functional: true,
props: ContentLoader.props,
render(h, { data }) {
return (
<ContentLoader {...data}>
<circle cx="10" cy="20" r="8" />
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="50" r="8" />
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="80" r="8" />
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
<circle cx="10" cy="110" r="8" />
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
</ContentLoader>
)
}
}
@@ -0,0 +1,25 @@
import ContentLoader from './ContentLoader'
export default {
name: 'CodeLoader',
functional: true,
props: ContentLoader.props,
render(h, { data }) {
return (
<ContentLoader {...data}>
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
<rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
</ContentLoader>
)
}
}
@@ -0,0 +1,112 @@
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 (
<svg
{...data}
viewBox={`0 0 ${props.width} ${props.height}`}
version="1.1"
preserveAspectRatio={props.preserveAspectRatio}
>
<rect
style={{ fill: `url(#${idGradient})` }}
clip-path={`url(#${idClip})`}
x="0"
y="0"
width={props.width}
height={props.height}
/>
<defs>
<clipPath id={idClip}>
{children || (
<rect
x="0"
y="0"
rx="5"
ry="5"
width={props.width}
height={props.height}
/>
)}
</clipPath>
<linearGradient id={idGradient}>
<stop offset="0%" stop-color={props.primaryColor}>
{props.animate ? (
<animate
attributeName="offset"
values="-2; 1"
dur={`${props.speed}s`}
repeatCount="indefinite"
/>
) : null}
</stop>
<stop offset="50%" stop-color={props.secondaryColor}>
{props.animate ? (
<animate
attributeName="offset"
values="-1.5; 1.5"
dur={`${props.speed}s`}
repeatCount="indefinite"
/>
) : null}
</stop>
<stop offset="100%" stop-color={props.primaryColor}>
{props.animate ? (
<animate
attributeName="offset"
values="-1; 2"
dur={`${props.speed}s`}
repeatCount="indefinite"
/>
) : null}
</stop>
</linearGradient>
</defs>
</svg>
)
}
}
@@ -0,0 +1,18 @@
import ContentLoader from './ContentLoader'
export default {
name: 'FacebookLoader',
functional: true,
render(h, { data }) {
return (
<ContentLoader {...data}>
<rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
<rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
<rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
<rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" />
<rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" />
<circle cx="30" cy="30" r="30" />
</ContentLoader>
)
}
}
Oops, something went wrong.

0 comments on commit 485ad1d

Please sign in to comment.