init

Author: egoist

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "modules": false
+    }]
+  ],
+  "plugins": [
+    "transform-vue-jsx"
+  ]
+}

.editorconfig

@@ -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

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.storybook/config.js

@@ -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)

.storybook/poi.config.js

@@ -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')()
+  ]
+}

README.md

@@ -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)

circle.yml

@@ -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

package.json

@@ -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"
+  }
+}

src/BulletListLoader.js

@@ -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>
+    )
+  }
+}

src/CodeLoader.js

@@ -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>
+    )
+  }
+}

src/ContentLoader.js

@@ -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>
+    )
+  }
+}

src/FacebookLoader.js

@@ -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>
+    )
+  }
+}