vue-element-loading

[ { "path": ".babelrc", "content": "{\n \"presets\": [\n [\"@babel/env\", { \"modules\": false }]\n ]\n}\n" }, { "path": ".gitignore", "content": ".DS_Store\nnode_modules/\ndist/\nlib/\nnpm-debug.log\nyarn-error.log\n.npmignore\n.editorconfig\n\n# Editor directories and files\n.idea\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n\nyarn.lock\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 Pongsatorn\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE. \n" }, { "path": "README.md", "content": "# ⛔️ DEPRECATED This repo has not been maintained\n\n

\n $\"NPM$ \n $\"NPM$ \n $\"License\"$ \n $\"Build$ \n

\n\n# vue-element-loading\n\n⏳ Loading inside a container or full screen for Vue.js\n\n# 👀 Document & Demo Page\n\n- [Docs & Live demo](https://biigpongsatorn.github.io/#/vue-element-loading)\n- [Fully feature live demo](https://vue-element-loading.netlify.com/)\n\n# 💻 Install\n\n```sh\nnpm install --save vue-element-loading\n```\n\nor\n\n```sh\nyarn add vue-element-loading\n```\n\n# 🖥 Install (Vue 3)\n\n```sh\nnpm install --save vue-element-loading@next\n```\n\nor\n\n```sh\nyarn add vue-element-loading@next\n```\n\n# 🕹 Usage\n\n```javascript\nimport Vue from \"vue\";\nimport VueElementLoading from \"vue-element-loading\";\n\nVue.component(\"VueElementLoading\", VueElementLoading);\n```\n\nor\n\n```javascript\nimport VueElementLoading from \"vue-element-loading\";\n\nexport default {\n components: {\n VueElementLoading\n }\n};\n```\n\n# 🔎 Example\n\n## Inside container\n\n```html\n

\n \n \n This is my content.\n \n

\n```\n\n## Full screen\n\n```html\n\n \n\n```\n\n## Adjust Spinner Color\n\nUse the `color` parameter to set the color of the displayed spinner (does not affect custom spinner images).\n\n```html\n

\n \n \n This is my content.\n \n

\n```\n\n## Set text\n\nUse the `text` parameter to set the text which will appear below loader.\n\n```html\n

\n \n \n This is my content.\n \n

\n```\n\n## Set text style\n\nUse the `textStyle` parameter to set the style of text( you need to pass css-in-js way using camelCase exp. fontSize, backgroundColor etc).\n\n```html\n

\n \n \n This is my content.\n \n

\n```\n\n## Adjust Spinner Size\n\nUse the `size` parameter to set the size of the displayed spinner (does not affect custom spinner images).\n\n```html\n

\n \n \n This is my content.\n \n

\n```\n\n## Adjust Spinner Animation Speed\n\nUse the `duration` parameter to set the animation loop duration in seconds (does not affect custom spinner images).\n\n```html\n

\n \n \n This is my content.\n \n

\n```\n\n## Customize loader\n\n```html\n

\n \n

\n \n

\n```\n\n# 🌀 Spinner\n\n

\n\n[See full document here.](https://biigpongsatorn.github.io/#/vue-element-loading)\n\n# ⚙️ Props\n\n| Props | Type | Default | Description |\n| ---------------- | :--------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------- |\n| active | Boolean | - | Status for show/hide loading |\n| spinner | String | spinner | Spinner icon name: `spinner`, `mini-spinner`, `ring`, `line-wave`, `line-scale`, `line-down`, `bar-fade`, `bar-fade-scale` |\n| color | String | #000 | Color of spinner icon |\n| background-color | String | rgba(255, 255, 255, .9) | Background color of spinner icon (for overlay) |\n| size | String | \"40\" | The size to display the spinner in pixels (**NOTE:** this will not affect custom spinner images) |\n| duration | String | \"0.6\" | The duration of one 'loop' of the spinner animation, in seconds (**NOTE:** this will not affect custom spinner images) |\n| delay | Number \\| String | 0 | The minimum appearing duration of loading in seconds |\n| is-full-screen | Boolean | false | Loader will overlay the full page |\n| text | String | - | Text will appear below loader |\n| text-style | Object | {} | Change style of the text below loader |\n\n# 🤝 Contributing\n\n1. Fork this repository.\n2. Create new branch with feature name.\n3. Run `npm install` and `npm run dev`.\n4. Create your feature.\n5. Commit and set commit message with feature name.\n6. Push your code to your fork repository.\n7. Create pull request. 🙂\n\n# ⭐️ Support\n\nIf you like this project, You can support me with starring ⭐ this repository.\n\n# 📄 License\n\n[MIT](LICENSE)\n\nDeveloped with ❤️ and ☕️\n" }, { "path": "bili.config.js", "content": "const vue = require('rollup-plugin-vue');\n\nmodule.exports = {\n banner: true,\n format: ['umd-min'],\n css: true,\n plugins: [\n vue({ css: true })\n ],\n outDir: 'lib'\n};\n" }, { "path": "example/App.vue", "content": "\n\n\n\n\n" }, { "path": "example/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n el: '#app',\n render: function (h) { return h(App) }\n})\n" }, { "path": "index.html", "content": "\n\n \n \n vue-element-loading\n \n \n

\n \n \n\n" }, { "path": "package.json", "content": "{\n \"name\": \"vue-element-loading\",\n \"description\": \"Loading inside a container or full screen for Vue.js\",\n \"version\": \"2.0.2\",\n \"author\": \"biig_pongsatorn \",\n \"license\": \"MIT\",\n \"main\": \"lib/vue-element-loading.min.js\",\n \"files\": [\n \"lib\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/biigpongsatorn/vue-element-loading.git\"\n },\n \"scripts\": {\n \"dev\": \"cross-env NODE_ENV=development webpack-dev-server --mode development --open --hot\",\n \"build:lib\": \"rm -rf ./lib && bili src/index.vue\",\n \"build:example\": \"rm -rf ./dist && cross-env NODE_ENV=production webpack --mode production --progress --hide-modules\",\n \"prepublish\": \"npm run build:lib\"\n },\n \"dependencies\": {\n \"vue\": \"^2.5.22\"\n },\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"not ie <= 8\"\n ],\n \"devDependencies\": {\n \"@babel/core\": \"^7.2.2\",\n \"@babel/preset-env\": \"^7.2.3\",\n \"babel-loader\": \"^8.0.5\",\n \"bili\": \"^3.4.2\",\n \"cross-env\": \"^5.2.0\",\n \"css-loader\": \"^2.1.0\",\n \"file-loader\": \"^3.0.1\",\n \"rollup-plugin-vue\": \"^4.6.1\",\n \"uglifyjs-webpack-plugin\": \"^2.1.1\",\n \"vue-loader\": \"^15.5.1\",\n \"vue-template-compiler\": \"^2.5.22\",\n \"webpack\": \"^4.28.4\",\n \"webpack-cli\": \"^3.2.1\",\n \"webpack-dev-server\": \">=3.1.11\"\n }\n}\n" }, { "path": "src/index.vue", "content": "\n\n\n\n\n\n\n" }, { "path": "src/loaders/bar-fade-scale.vue", "content": "\n\n\n" }, { "path": "src/loaders/bar-fade.vue", "content": "\n\n\n" }, { "path": "src/loaders/index.js", "content": "import Spinner from './spinner.vue'\nimport Ring from './ring.vue'\nimport MiniSpinner from './mini-spinner.vue'\nimport LineWave from './line-wave.vue'\nimport LineScale from './line-scale.vue'\nimport LineDown from './line-down.vue'\nimport BarFade from './bar-fade.vue'\nimport BarFadeScale from './bar-fade-scale.vue'\n\nexport default {\n Spinner,\n Ring,\n MiniSpinner,\n LineWave,\n LineScale,\n LineDown,\n BarFade,\n BarFadeScale\n}\n" }, { "path": "src/loaders/line-down.vue", "content": "\n\n\n" }, { "path": "src/loaders/line-scale.vue", "content": "\n\n\n" }, { "path": "src/loaders/line-wave.vue", "content": "\n\n\n" }, { "path": "src/loaders/mini-spinner.vue", "content": "\n\n\n" }, { "path": "src/loaders/ring.vue", "content": "\n\n\n" }, { "path": "src/loaders/spinner.vue", "content": "\n\n\n" }, { "path": "webpack.config.js", "content": "const path = require('path');\nconst webpack = require('webpack');\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\nmodule.exports = {\n entry: './example/main.js',\n output: {\n path: path.resolve(__dirname, './dist'),\n publicPath: '/dist',\n filename: 'build.js'\n },\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n 'vue-style-loader',\n 'css-loader'\n ],\n },\n {\n test: /\\.vue$/,\n loader: 'vue-loader',\n options: {\n loaders: {\n }\n // other vue-loader options go here\n }\n },\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n exclude: /node_modules/\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n loader: 'file-loader',\n options: {\n name: '[name].[ext]?[hash]'\n }\n }\n ]\n },\n resolve: {\n alias: {\n 'vue$': 'vue/dist/vue.esm.js'\n },\n extensions: ['*', '.js', '.vue', '.json']\n },\n optimization: {\n minimizer: [\n new UglifyJsPlugin({\n sourceMap: true,\n parallel: 4,\n uglifyOptions: {\n warnings: false,\n compress: {\n warnings: false\n },\n },\n })\n ]\n },\n plugins: [\n new VueLoaderPlugin(),\n ],\n devServer: {\n historyApiFallback: true,\n noInfo: true,\n overlay: true\n },\n performance: {\n hints: false\n },\n devtool: '#eval-source-map'\n};\n\nif (process.env.NODE_ENV === 'production') {\n module.exports.devtool = '#source-map';\n // http://vue-loader.vuejs.org/en/workflow/production.html\n module.exports.plugins = (module.exports.plugins || []).concat([\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: '\"production\"'\n }\n }),\n new webpack.LoaderOptionsPlugin({\n minimize: true\n })\n ]);\n}\n" } ]