├── .gitignore ├── .nolluprc.js ├── README.md ├── api ├── netlify-ssr.js └── vercel-ssr │ ├── build.js │ ├── index.js │ └── package.json ├── assets ├── 404.svg ├── __app.html ├── bootstrap.css ├── bootstrap.js ├── city.json ├── customers.json ├── datatables.css ├── favicon.ico ├── favicon.png ├── feather.js ├── global.css ├── images │ └── touch-icons │ │ ├── logo-192.png │ │ └── logo-800.png ├── manifest.json ├── robots.txt └── vendor.css ├── debug.log ├── netlify.toml ├── package.json ├── pnpm-lock.yaml ├── postcss.config.js ├── rollup.config.js ├── sandbox.config.json ├── src ├── App.svelte ├── main.js ├── pages │ ├── _fallback.svelte │ ├── _layout.svelte │ ├── aku.svelte │ ├── example │ │ ├── _reset.svelte │ │ ├── dashboard.svelte │ │ ├── data.json.js │ │ └── index.svelte │ ├── hai │ │ └── [nama].svelte │ ├── index.svelte │ └── zero │ │ ├── Datatable.svelte │ │ └── index.svelte ├── sw.js ├── themes │ └── voler │ │ └── datatable.svelte └── tools │ ├── Loading.svelte │ ├── Spinner.svelte │ ├── acak.js │ ├── atas.js │ ├── datatable │ ├── columns.js │ ├── config.js │ ├── datatable.js │ ├── date.js │ ├── helpers.js │ ├── index.js │ ├── rows.js │ ├── style.css │ └── table.js │ ├── perfect-scrollbar.js │ ├── slug.js │ ├── store.js │ └── tanggal.js ├── vercel.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules/ 2 | /dist/ 3 | .DS_Store 4 | **/.history 5 | src/tmp/ 6 | .routify 7 | .netlify 8 | assets/build 9 | .vercel 10 | -------------------------------------------------------------------------------- /.nolluprc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | hot: true, 3 | contentBase: 'assets', 4 | publicPath: 'build', 5 | historyApiFallback: '__app.html', 6 | port: 5000 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte Garuda 2 | 3 | Svelte starter template with HMR, code splitting, datatable & modular ui-kit 4 | 5 | 6 | 7 | [![All Contributors](https://img.shields.io/badge/all_contributors-1-green.svg?style=flat-square)](#contributors-) 8 | ![GitHub last commit](https://img.shields.io/github/last-commit/zuramai/voler.svg) 9 | ![GitHub repo size in bytes](https://img.shields.io/github/repo-size/badges/shields.svg) 10 | [![License](https://img.shields.io/github/license/zuramai/voler.svg)](LICENSE) 11 | ![npm version](https://badge.fury.io/js/yarn.svg) 12 | 13 | 14 | # Instalation 15 | 16 | ```bash 17 | npx degit sveltegaruda/template my-project 18 | cd my-project 19 | npm i 20 | ``` 21 | 22 | # Folder structure 23 | 24 | | Description | Folder | 25 | |---|---| 26 | | File Svelte | src/pages | 27 | | Static files | public | 28 | | Output | hasil | 29 | 30 | # Feature 31 | 32 | ## Code splitting 33 | 34 | Execute command below 35 | 36 | ```bash 37 | npm run build 38 | ``` 39 | 40 | ## File based routed 41 | 42 | Using Routify. 43 | 44 | ## Hot module reload 45 | 46 | The state is not reset when we develop the application. Just run: 47 | 48 | ```bash 49 | npm run dev 50 | ``` 51 | 52 | ## Bootstrap 53 | 54 | Bootstrap ready. 55 | 56 | ## SEO 57 | 58 | Content of `public/index.html`: 59 | 60 | ```html 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | ``` 95 | 96 | We just need to adjust the title tag, meta description and image. 97 | 98 | ## Loader 99 | 100 | How to use: 101 | 102 | ```javascript 103 | import {isLoading} from '@/store' 104 | $isLoading = true // untuk mengaktifkan loader 105 | $isLoading = false // untuk mematikan loader 106 | ``` 107 | 108 | It must be placed on folder `halaman`. 109 | 110 | ## Absolute path 111 | 112 | Example: 113 | 114 | ```javascript 115 | import {nama} from '@/data/nama' 116 | ``` 117 | 118 | However, it can also be a relative path like: 119 | 120 | ```javascript 121 | import {nama} from '../../../nama' 122 | ``` 123 | 124 | ## Datetime 125 | 126 | Get the latest date with format such as 2020-08-17 00:19:45 127 | 128 | Example: 129 | 130 | ```html 131 | 134 |

{tanggal()}

135 | ``` 136 | 137 | ## Datatable 138 | ```html 139 | // file: src/pages/danang/index.svelte 140 | 153 | 154 | . 155 | . 156 | . 157 |

158 | 159 |

160 | ``` 161 | 162 | ```html 163 | // file: src/pages/danang/data.json.js 164 | const data = [[ 165 | "Hedwig F. Nguyen", 166 | "Manager", 167 | "Arcu Vel Foundation" 168 | ], 169 | [ 170 | "Genevieve U. Watts", 171 | "Manager", 172 | "Eget Incorporated" 173 | ]]; 174 | export default data; 175 | ``` 176 | 177 | ## Demo 178 | You can open the demo here 179 | 180 | ## Contributing 181 | 182 | - Fork it ( https://github.com/sveltegaruda/template/fork ) 183 | - Create your feature branch (`git checkout -b my-new-feature`) 184 | - Commit your changes (`git commit -am 'Add some feature'`) 185 | - Push to the branch (`git push origin my-new-feature`) 186 | - Create a new Pull Request 187 | 188 | 189 | # Translation ? 190 | 191 | We are open for contribution. For example, just want to translate into Japanese, then create a file `README-jp.md` which contains the translation of this README in Japanese. -------------------------------------------------------------------------------- /api/netlify-ssr.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const { tossr } = require('tossr') 3 | 4 | const script = fs.readFileSync(require.resolve('../public/build/bundle.js'), 'utf8') 5 | const template = fs.readFileSync(require.resolve('../public/__app.html'), 'utf8') 6 | 7 | exports.handler = async (event, context) => { 8 | const body = await tossr(template, script, event.path) 9 | return { statusCode: 200, body: body + '\n' } 10 | } -------------------------------------------------------------------------------- /api/vercel-ssr/build.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | const { existsSync } = require('fs') 3 | const { execSync } = require('child_process') 4 | const { rollup } = require('rollup') 5 | 6 | const shouldBuildSpa = process.env.NOW_GITHUB_DEPLOYMENT || process.env.NOW_BUILDER 7 | const script = resolve(__dirname, '../../dist/build/main.js') 8 | const bundlePath = resolve(__dirname, '../../dist/build/bundle.js') 9 | 10 | build() 11 | 12 | 13 | async function build() { 14 | if (shouldBuildSpa) 15 | execSync('npm install && npm run build:app', { cwd: resolve('..', '..'), stdio: 'inherit' }) 16 | else 17 | await waitForAppToExist() 18 | 19 | buildSSRBundle() 20 | } 21 | 22 | async function waitForAppToExist() { 23 | while (!existsSync(script)) { 24 | console.log(`checking if "${script}" exists`) 25 | await new Promise(r => setTimeout(r, 2000)) 26 | } 27 | console.log(`found "${script}"`) 28 | } 29 | 30 | async function buildSSRBundle() { 31 | const bundle = await rollup({ 32 | input: script, 33 | inlineDynamicImports: true, 34 | }) 35 | await bundle.write({ format: 'umd', file: bundlePath, name: 'roxi-ssr' }) 36 | } 37 | -------------------------------------------------------------------------------- /api/vercel-ssr/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const { tossr } = require('tossr') 3 | 4 | const script = fs.readFileSync(require.resolve('../../dist/build/bundle.js'), 'utf8') 5 | const template = fs.readFileSync(require.resolve('../../dist/__app.html'), 'utf8') 6 | 7 | module.exports = async (req, res) => { 8 | const html = await tossr(template, script, req.url, {}) 9 | res.send(html + '\n') 10 | } 11 | 12 | -------------------------------------------------------------------------------- /api/vercel-ssr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "vercel-build": "node ./build.js" 4 | }, 5 | "devDependencies": { 6 | "rollup": "^2.28.2" 7 | } 8 | } -------------------------------------------------------------------------------- /assets/404.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/__app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /assets/customers.json: -------------------------------------------------------------------------------- 1 | { 2 | "data": [ 3 | { 4 | "id": 1, 5 | "name": "Sastro", 6 | "position": "Office Boy", 7 | "company": "Ubuntu" 8 | }, 9 | { 10 | "id": 2, 11 | "name": "Suroto", 12 | "position": "Front Office", 13 | "company": "Microsoft" 14 | }, 15 | { 16 | "id": 3, 17 | "name": "Sujiwo", 18 | "position": "Sales Promotion", 19 | "company": "Fedora" 20 | }, 21 | { 22 | "id": 4, 23 | "name": "Tedjo", 24 | "position": "Sales Promotion", 25 | "company": "Microsoft" 26 | }, 27 | { 28 | "id": 5, 29 | "name": "Marwoto", 30 | "position": "Sales Promotion", 31 | "company": "Copiy" 32 | }, 33 | { 34 | "id": 6, 35 | "name": "Sukmo", 36 | "position": "Office Boy", 37 | "company": "Microsoft" 38 | }, 39 | { 40 | "id": 7, 41 | "name": "Suroto", 42 | "position": "Security", 43 | "company": "Manjaro" 44 | }, 45 | { 46 | "id": 8, 47 | "name": "Kroto", 48 | "position": "Security", 49 | "company": "Ubuntu" 50 | }, 51 | { 52 | "id": 9, 53 | "name": "Sujiwo", 54 | "position": "Office Boy", 55 | "company": "Linux Mint" 56 | }, 57 | { 58 | "id": 10, 59 | "name": "Wardoyo", 60 | "position": "Front Office", 61 | "company": "Manjaro" 62 | }, 63 | { 64 | "id": 11, 65 | "name": "Sujiwo", 66 | "position": "Security", 67 | "company": "Fedora" 68 | }, 69 | { 70 | "id": 12, 71 | "name": "Tedjo", 72 | "position": "Security", 73 | "company": "Microsoft" 74 | }, 75 | { 76 | "id": 13, 77 | "name": "Kroto", 78 | "position": "Office Boy", 79 | "company": "Copiy" 80 | }, 81 | { 82 | "id": 14, 83 | "name": "Tedjo", 84 | "position": "Office Boy", 85 | "company": "Lokopedia" 86 | }, 87 | { 88 | "id": 15, 89 | "name": "Markonah", 90 | "position": "Security", 91 | "company": "Linux Mint" 92 | }, 93 | { 94 | "id": 16, 95 | "name": "Marwoto", 96 | "position": "Office Boy", 97 | "company": "Bukataplak" 98 | } 99 | ] 100 | } -------------------------------------------------------------------------------- /assets/datatables.css: -------------------------------------------------------------------------------- 1 | .dataTable-wrapper.no-header .dataTable-container { 2 | border-top: 1px solid #d9d9d9; 3 | } 4 | 5 | .dataTable-wrapper.no-footer .dataTable-container { 6 | /* border-bottom: 1px solid #d9d9d9; */ 7 | border-bottom: none; 8 | } 9 | 10 | .dataTable-top, 11 | .dataTable-bottom { 12 | padding: 8px 10px; 13 | } 14 | 15 | .dataTable-top > div:first-child, 16 | .dataTable-bottom > div:first-child { 17 | float: left; 18 | } 19 | 20 | .dataTable-top > div:last-child, 21 | .dataTable-bottom > div:last-child { 22 | float: right; 23 | } 24 | 25 | .dataTable-selector { 26 | padding: 8px; 27 | border: solid 1px #eee; 28 | } 29 | 30 | .dataTable-input { 31 | padding: 6px 12px; 32 | } 33 | 34 | .dataTable-info { 35 | margin: 7px 0; 36 | } 37 | 38 | /* PAGER */ 39 | 40 | .dataTable-pagination ul { 41 | margin: 0; 42 | padding-left: 0; 43 | } 44 | 45 | .dataTable-pagination li { 46 | list-style: none; 47 | float: left; 48 | } 49 | 50 | .dataTable-pagination a { 51 | border: 1px solid transparent; 52 | float: left; 53 | margin-left: 2px; 54 | padding: 6px 12px; 55 | position: relative; 56 | text-decoration: none; 57 | color: #333; 58 | } 59 | 60 | .dataTable-pagination a:hover { 61 | background-color: #d9d9d9; 62 | } 63 | 64 | .dataTable-pagination .active a, 65 | .dataTable-pagination .active a:focus, 66 | .dataTable-pagination .active a:hover { 67 | /* background-color: #d9d9d9; */ 68 | border-color: #5a8dee; 69 | background-color: #5a8dee; 70 | box-shadow: 0 2px 5px rgba(90, 141, 238, 0.3); 71 | color: whitesmoke; 72 | cursor: default; 73 | } 74 | 75 | .dataTable-pagination .ellipsis a, 76 | .dataTable-pagination .disabled a, 77 | .dataTable-pagination .disabled a:focus, 78 | .dataTable-pagination .disabled a:hover { 79 | cursor: not-allowed; 80 | } 81 | 82 | .dataTable-pagination .disabled a, 83 | .dataTable-pagination .disabled a:focus, 84 | .dataTable-pagination .disabled a:hover { 85 | cursor: not-allowed; 86 | opacity: 0.4; 87 | } 88 | 89 | .dataTable-pagination .pager a { 90 | font-weight: bold; 91 | } 92 | 93 | /* TABLE */ 94 | 95 | .dataTable-table { 96 | max-width: 100%; 97 | width: 100%; 98 | border-spacing: 0; 99 | border-collapse: separate; 100 | } 101 | 102 | .dataTable-table > tbody > tr > td, 103 | .dataTable-table > tbody > tr > th, 104 | .dataTable-table > tfoot > tr > td, 105 | .dataTable-table > tfoot > tr > th, 106 | .dataTable-table > thead > tr > td, 107 | .dataTable-table > thead > tr > th { 108 | vertical-align: top; 109 | padding: 8px 10px; 110 | } 111 | 112 | .dataTable-table > thead > tr > th { 113 | vertical-align: bottom; 114 | text-align: left; 115 | border-bottom: 1px solid #d9d9d9; 116 | } 117 | 118 | .dataTable-table > tfoot > tr > th { 119 | vertical-align: bottom; 120 | text-align: left; 121 | border-top: 1px solid #d9d9d9; 122 | } 123 | 124 | .dataTable-table th { 125 | vertical-align: bottom; 126 | text-align: left; 127 | } 128 | 129 | .dataTable-table th a { 130 | text-decoration: none; 131 | color: inherit; 132 | } 133 | 134 | .dataTable-sorter { 135 | display: inline-block; 136 | height: 100%; 137 | position: relative; 138 | width: 100%; 139 | } 140 | 141 | .dataTable-sorter::before, 142 | .dataTable-sorter::after { 143 | content: ''; 144 | height: 0; 145 | width: 0; 146 | position: absolute; 147 | right: 4px; 148 | border-left: 4px solid transparent; 149 | border-right: 4px solid transparent; 150 | opacity: 0.2; 151 | } 152 | 153 | .dataTable-sorter::before { 154 | border-top: 4px solid #000; 155 | bottom: 0px; 156 | } 157 | 158 | .dataTable-sorter::after { 159 | border-bottom: 4px solid #000; 160 | border-top: 4px solid transparent; 161 | top: 0px; 162 | } 163 | 164 | .asc .dataTable-sorter::after, 165 | .desc .dataTable-sorter::before { 166 | opacity: 0.6; 167 | } 168 | 169 | .dataTables-empty { 170 | text-align: center; 171 | } 172 | 173 | .dataTable-top::after, 174 | .dataTable-bottom::after { 175 | clear: both; 176 | content: ' '; 177 | display: table; 178 | } 179 | 180 | @media screen and (max-width: 576px) { 181 | .dataTable-pagination { 182 | display: flex; 183 | width: 100%; 184 | overflow: auto; 185 | } 186 | .dataTable-pagination li { 187 | float: initial; 188 | flex-grow: 1; 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltegaruda/template/b69a6942a216df7c204cffbb80c701863b59b676/assets/favicon.ico -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltegaruda/template/b69a6942a216df7c204cffbb80c701863b59b676/assets/favicon.png -------------------------------------------------------------------------------- /assets/global.css: -------------------------------------------------------------------------------- 1 | /* purgecss start ignore */ 2 | 3 | @import './vendor.css'; 4 | 5 | body { 6 | word-wrap: break-word; 7 | } 8 | img { 9 | max-width: 100%; 10 | } 11 | 12 | /** 13 | * Voler 14 | * 15 | * Voler is a clean & modern HTML5 admin template based on Bootstrap 5 16 | * Voler will make it easier for you to create your own admin interface. 17 | * 18 | * @package Voler 19 | * @version 0.1 20 | * @author Ahmad Saugi 21 | * @url https://github.com/zuramai/voler 22 | * 23 | */ 24 | /** 25 | * TABLE OF CONTENTS 26 | * 27 | * 1. Variables 28 | * 2. Bootstrap Override 29 | * 2.1 Alert 30 | * 2.2 Avatar 31 | * 2.3 Badge 32 | * 2.4 Buttons 33 | * 2.5 Breadcrumb 34 | * 2.6 Carousel 35 | * 2.7 Divider 36 | * 2.8 Dropdowns 37 | * 2.9 Forms 38 | * 2.10 Modal 39 | * 2.11 Sidebar 40 | * 2.12 Card 41 | * 2.13 Navs 42 | * 2.14 Navbar 43 | * 2.15 Pagination 44 | * 2.16 Table 45 | * 2.17 Progress 46 | * 4. Pages 47 | * 4.1 Auth 48 | * 4.2 Error 49 | * 5. Utilities 50 | */ 51 | /** 1. Variables **/ 52 | /** 53 | * VARIABLE - TABLE OF CONTENTS 54 | * 55 | * 1. Theme Colors 56 | * 2. Bootstrap Override 57 | * 2.4 Alert 58 | * 2.11 Badge 59 | * 2.12 Button 60 | * 2.14 Breadcrumb 61 | * 2.1 Card 62 | * 2.2 Form 63 | * 2.3 List 64 | * 2.5 Progress 65 | * 2.6 Table 66 | * 2.7 Tooltip 67 | * 2.8 Modal 68 | * 2.9 Nav 69 | * 2.10 Pagination 70 | * 2.13 Media 71 | * 2.15 Accordion 72 | * 2.16 Popover 73 | * 2.17 Grid 74 | * 2.18 Navbar 75 | * 2.19 Dropdown 76 | * 2.20 Tab 77 | * 2.21 Progressbar 78 | * 2.22 Jumbotron 79 | * 2.23 Carousel 80 | * 5. Utilities 81 | * 6. Responsive 82 | */ 83 | .color-primary { 84 | color: #5a8dee; 85 | } 86 | 87 | .color-secondary { 88 | color: #475f7b; 89 | } 90 | 91 | .color-success { 92 | color: #39da8a; 93 | } 94 | 95 | .color-danger { 96 | color: #ff5b5c; 97 | } 98 | 99 | .color-warning { 100 | color: #fdac41; 101 | } 102 | 103 | .color-info { 104 | color: #00cfdd; 105 | } 106 | 107 | .color-dark { 108 | color: #222f3e; 109 | } 110 | 111 | .color-light { 112 | color: #a3afbd; 113 | } 114 | 115 | .color-link { 116 | color: #2178d1; 117 | } 118 | 119 | body { 120 | font-family: 'Raleway'; 121 | } 122 | 123 | #app { 124 | position: relative; 125 | } 126 | 127 | #main { 128 | margin-left: 260px; 129 | background-color: #f7faff; 130 | min-height: 100vh; 131 | transition: margin-left 0.6s ease-out; 132 | } 133 | #main .main-content { 134 | padding: 2rem 1.5rem; 135 | } 136 | #main .main-content .page-title h3 { 137 | font-size: 2rem; 138 | } 139 | #main .main-content .text-subtitle { 140 | font-size: 0.9rem; 141 | } 142 | 143 | .breadcrumb-header .breadcrumb { 144 | justify-content: flex-end; 145 | } 146 | 147 | .alert.alert-dismissible .close:focus, 148 | .custom-switch .custom-control-label:focus, 149 | .dropdown .dropdown-toggle:focus, 150 | .dropleft .dropdown-toggle:focus, 151 | .dropright .dropdown-toggle:focus, 152 | .dropup .dropdown-toggle:focus, 153 | .list-group button.list-group-item:focus, 154 | .modal .modal-content .modal-header .close:active, 155 | .modal .modal-content .modal-header .close:focus, 156 | .modal .modal-content .modal-header .close:hover, 157 | .navbar-components-wrapper 158 | .navbar 159 | .navbar-container.navbar-dark 160 | .navbar-toggler:focus, 161 | .navbar-components-wrapper 162 | .navbar 163 | .navbar-container.navbar-light 164 | .navbar-toggler:focus, 165 | .toast .toast-header .close:active, 166 | .toast .toast-header .close:focus, 167 | a:focus { 168 | outline: 0; 169 | } 170 | 171 | section .section-title:after { 172 | width: 70px; 173 | height: 2px; 174 | content: ''; 175 | margin: 0.6rem 0 1rem; 176 | background-color: #5a8dee; 177 | display: block; 178 | } 179 | 180 | a { 181 | text-decoration: none; 182 | outline: 0; 183 | } 184 | 185 | button { 186 | outline: 0; 187 | } 188 | 189 | svg.feather, 190 | i { 191 | font-size: 14px; 192 | height: 1rem; 193 | } 194 | 195 | footer { 196 | padding: 1rem 1.5rem; 197 | } 198 | 199 | @media screen and (max-width: 767px) { 200 | #main { 201 | margin-left: 0; 202 | } 203 | 204 | .breadcrumb-header .breadcrumb { 205 | justify-content: flex-start; 206 | padding: 0; 207 | font-size: 0.8rem; 208 | } 209 | } 210 | /** 2.1 Alert **/ 211 | .alert { 212 | border: none; 213 | } 214 | .alert p { 215 | margin-bottom: 0; 216 | } 217 | .alert button.close { 218 | padding: 0.75rem; 219 | line-height: 0.75; 220 | } 221 | .alert .alert-heading { 222 | margin-left: 0.4rem; 223 | } 224 | .alert .alert-heading + p { 225 | margin-left: 0.4rem; 226 | } 227 | 228 | .alert-primary { 229 | background-color: #029eff; 230 | color: #fff; 231 | box-shadow: 1px 2px 9px rgba(2, 158, 255, 0.3); 232 | } 233 | .alert-primary a { 234 | color: #fff; 235 | } 236 | 237 | .alert-secondary { 238 | background-color: #ebeef3; 239 | color: #383d41; 240 | box-shadow: 1px 2px 9px rgba(235, 238, 243, 0.3); 241 | } 242 | .alert-secondary a { 243 | color: #fff; 244 | } 245 | 246 | .alert-success { 247 | background-color: #39da8a; 248 | color: #fff; 249 | box-shadow: 1px 2px 9px rgba(57, 218, 138, 0.3); 250 | } 251 | .alert-success a { 252 | color: #fff; 253 | } 254 | 255 | .alert-warning { 256 | background-color: #fdd347; 257 | color: #fff; 258 | box-shadow: 1px 2px 9px rgba(253, 211, 71, 0.3); 259 | } 260 | .alert-warning a { 261 | color: #fff; 262 | } 263 | 264 | .alert-danger { 265 | background-color: #f55260; 266 | color: #fff; 267 | box-shadow: 1px 2px 9px rgba(245, 82, 96, 0.3); 268 | } 269 | .alert-danger a { 270 | color: #fff; 271 | } 272 | 273 | .alert-dark { 274 | background-color: #454546; 275 | color: #fff; 276 | box-shadow: 1px 2px 9px rgba(69, 69, 70, 0.3); 277 | } 278 | .alert-dark a { 279 | color: #fff; 280 | } 281 | 282 | .alert-light { 283 | background-color: #fefefe; 284 | color: #818182; 285 | box-shadow: 1px 2px 9px rgba(254, 254, 254, 0.3); 286 | } 287 | .alert-light a { 288 | color: #fff; 289 | } 290 | 291 | .alert-info { 292 | background-color: #56b6f7; 293 | color: #fff; 294 | box-shadow: 1px 2px 9px rgba(86, 182, 247, 0.3); 295 | } 296 | .alert-info a { 297 | color: #fff; 298 | } 299 | 300 | .alert-light-primary { 301 | background-color: #e2ecff; 302 | } 303 | 304 | .alert-light-secondary { 305 | background-color: #e6eaee; 306 | } 307 | 308 | .alert-light-success { 309 | background-color: #d2ffe8; 310 | } 311 | 312 | .alert-light-danger { 313 | background-color: #ffdede; 314 | } 315 | 316 | .alert-light-warning { 317 | background-color: #ffeed9; 318 | } 319 | 320 | .alert-light-info { 321 | background-color: #ccf5f8; 322 | } 323 | 324 | /** 2.2 Avatar **/ 325 | .avatar { 326 | display: inline-flex; 327 | border-radius: 50%; 328 | text-align: center; 329 | vertical-align: middle; 330 | position: relative; 331 | } 332 | .avatar .avatar-content { 333 | width: 32px; 334 | height: 32px; 335 | color: #fff; 336 | display: flex; 337 | justify-content: center; 338 | align-items: center; 339 | font-size: 0.875rem; 340 | } 341 | .avatar .avatar-content svg, 342 | .avatar .avatar-content i { 343 | color: #fff; 344 | font-size: 1rem; 345 | height: 1rem; 346 | } 347 | .avatar img { 348 | width: 32px; 349 | height: 32px; 350 | border-radius: 50%; 351 | } 352 | .avatar .avatar-status { 353 | width: 0.7rem; 354 | height: 0.7rem; 355 | position: absolute; 356 | border-radius: 50%; 357 | border: 1px solid #fff; 358 | bottom: 0; 359 | right: 0; 360 | } 361 | .avatar.avatar-sm .avatar-content, 362 | .avatar.avatar-sm img { 363 | width: 24px; 364 | height: 24px; 365 | font-size: 0.8rem; 366 | } 367 | .avatar.avatar-lg .avatar-content, 368 | .avatar.avatar-lg img { 369 | width: 48px; 370 | height: 48px; 371 | font-size: 1.2rem; 372 | } 373 | .avatar.avatar-xl .avatar-content, 374 | .avatar.avatar-xl img { 375 | width: 60px; 376 | height: 60px; 377 | font-size: 1.4rem; 378 | } 379 | 380 | /** 2.3 Badge **/ 381 | .btn .badge { 382 | border-radius: 50%; 383 | margin-left: 5px; 384 | } 385 | .btn .badge.bg-transparent { 386 | background-color: rgba(255, 255, 255, 0.25) !important; 387 | color: #fff; 388 | } 389 | 390 | /** 2.4 Buttons **/ 391 | .btn i, 392 | .btn svg { 393 | width: 16px; 394 | height: 16px; 395 | } 396 | .btn.icon { 397 | padding: 0.4rem 0.6rem; 398 | } 399 | .btn.icon svg { 400 | width: 16px; 401 | height: 16px; 402 | } 403 | .btn.icon.icon-left svg { 404 | margin-right: 3px; 405 | } 406 | .btn.icon.icon-right svg { 407 | margin-left: 3px; 408 | } 409 | .btn.btn-outline-white { 410 | color: #fff; 411 | border-color: #fff; 412 | } 413 | .btn.btn-outline-white:hover { 414 | color: #333; 415 | background-color: #fff; 416 | } 417 | .btn.btn-primary { 418 | color: #fff; 419 | } 420 | .btn.btn-secondary { 421 | color: #fff; 422 | } 423 | .btn.btn-success { 424 | color: #fff; 425 | } 426 | .btn.btn-danger { 427 | color: #fff; 428 | } 429 | .btn.btn-warning { 430 | color: #fff; 431 | } 432 | .btn.btn-info { 433 | color: #fff; 434 | } 435 | .btn.btn-dark { 436 | color: #fff; 437 | } 438 | .btn.btn-light { 439 | color: #fff; 440 | } 441 | .btn.btn-link { 442 | color: #fff; 443 | } 444 | 445 | .btn-group:not(.dropdown) .btn:not([class*='btn-']) { 446 | border: 1px solid #dfe3e7; 447 | } 448 | .btn-group > .btn { 449 | border-radius: 0.267rem; 450 | } 451 | .buttons .btn { 452 | margin: 0 10px 10px 0; 453 | } 454 | 455 | /** 2.5 Breadcrumb **/ 456 | .breadcrumb.breadcrumb-right { 457 | justify-content: flex-end; 458 | margin-top: 1rem; 459 | } 460 | .breadcrumb.breadcrumb-center { 461 | justify-content: center; 462 | margin-top: 1rem; 463 | } 464 | 465 | /** 2.6 Carousel **/ 466 | .carousel-inner { 467 | border-radius: 0.7rem; 468 | box-shadow: 0 5px 10px #adb5bd; 469 | } 470 | 471 | .carousel-caption h5 { 472 | color: #fff; 473 | } 474 | 475 | /** 2.7 Divider **/ 476 | .divider { 477 | display: block; 478 | text-align: center; 479 | overflow: hidden; 480 | margin: 1rem 0; 481 | } 482 | .divider .divider-text { 483 | position: relative; 484 | display: inline-block; 485 | padding: 0 1rem; 486 | background-color: #fff; 487 | } 488 | .divider .divider-text:before, 489 | .divider .divider-text:after { 490 | content: ''; 491 | position: absolute; 492 | top: 50%; 493 | width: 9999px; 494 | border-top: 1px solid #dfe3e7; 495 | } 496 | .divider .divider-text:before { 497 | right: 100%; 498 | } 499 | .divider .divider-text:after { 500 | left: 100%; 501 | } 502 | .divider.divider-left .divider-text { 503 | left: 0; 504 | float: left; 505 | padding-left: 0; 506 | } 507 | .divider.divider-left-center .divider-text { 508 | left: -25%; 509 | } 510 | .divider.divider-right-center .divider-text { 511 | left: 25%; 512 | } 513 | .divider.divider-right .divider-text { 514 | float: right; 515 | padding-right: 0; 516 | } 517 | 518 | /** 2.8 Dropdowns **/ 519 | .dropdown-toggle:after { 520 | color: #fff; 521 | } 522 | 523 | .dropdown-menu-large { 524 | min-width: 16rem; 525 | } 526 | 527 | /** 2.9 Forms **/ 528 | .form-group { 529 | margin-bottom: 0.7rem; 530 | } 531 | .form-group label { 532 | font-size: 0.755rem; 533 | text-transform: uppercase; 534 | color: rgba(35, 28, 99, 0.7); 535 | font-weight: 500; 536 | } 537 | .form-group small { 538 | font-size: 0.7rem; 539 | } 540 | .form-group.with-title { 541 | position: relative; 542 | } 543 | .form-group.with-title label { 544 | position: absolute; 545 | top: 0; 546 | left: 0; 547 | padding: 5px; 548 | font-size: 0.6rem; 549 | background-color: #e9ecef; 550 | width: 100%; 551 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 552 | } 553 | .form-group.with-title .form-control, 554 | .form-group.with-title dataTable-input { 555 | padding-top: 2rem; 556 | } 557 | .form-group.with-title .form-control:focus ~ label, 558 | .form-group.with-title dataTable-input:focus ~ label { 559 | border-left: 1px solid #5a8dee; 560 | border-top: 1px solid #5a8dee; 561 | border-right: 1px solid #5a8dee; 562 | } 563 | .form-group[class*='has-icon-'].has-icon-left .form-control { 564 | padding-left: 2.5rem; 565 | } 566 | .form-group[class*='has-icon-'].has-icon-left .form-control-icon { 567 | left: 0; 568 | } 569 | .form-group[class*='has-icon-'].has-icon-right .form-control { 570 | padding-right: 2.5rem; 571 | } 572 | .form-group[class*='has-icon-'].has-icon-right .form-control-icon { 573 | right: 0; 574 | } 575 | .form-group[class*='has-icon-'] .form-control:focus ~ .form-control-icon i, 576 | .form-group[class*='has-icon-'] .form-control:focus ~ .form-control-icon svg { 577 | color: #5a8dee; 578 | } 579 | .form-group[class*='has-icon-'] .form-control-icon { 580 | position: absolute; 581 | top: 50%; 582 | transform: translateY(-50%); 583 | padding: 0 0.6rem; 584 | } 585 | .form-group[class*='has-icon-'] .form-control-icon i, 586 | .form-group[class*='has-icon-'] .form-control-icon svg { 587 | width: 1.2rem; 588 | } 589 | 590 | .form-check .form-check-input[class*='bg-'] { 591 | border: 0; 592 | } 593 | .form-check .form-check-input:focus { 594 | box-shadow: none; 595 | } 596 | .form-check .form-check-input.form-check-primary { 597 | background-color: #5a8dee; 598 | border-color: #5a8dee; 599 | } 600 | .form-check .form-check-input.form-check-primary:not(:checked) { 601 | background-color: transparent; 602 | border: 1px solid #ced4da; 603 | } 604 | .form-check .form-check-input.form-check-primary.form-check-glow { 605 | box-shadow: 0 0 5px #88adf3; 606 | } 607 | .form-check .form-check-input.form-check-primary.form-check-glow:not(:checked) { 608 | box-shadow: none; 609 | } 610 | .form-check .form-check-input.form-check-secondary { 611 | background-color: #475f7b; 612 | border-color: #475f7b; 613 | } 614 | .form-check .form-check-input.form-check-secondary:not(:checked) { 615 | background-color: transparent; 616 | border: 1px solid #ced4da; 617 | } 618 | .form-check .form-check-input.form-check-secondary.form-check-glow { 619 | box-shadow: 0 0 5px #5a789b; 620 | } 621 | .form-check 622 | .form-check-input.form-check-secondary.form-check-glow:not(:checked) { 623 | box-shadow: none; 624 | } 625 | .form-check .form-check-input.form-check-success { 626 | background-color: #39da8a; 627 | border-color: #39da8a; 628 | } 629 | .form-check .form-check-input.form-check-success:not(:checked) { 630 | background-color: transparent; 631 | border: 1px solid #ced4da; 632 | } 633 | .form-check .form-check-input.form-check-success.form-check-glow { 634 | box-shadow: 0 0 5px #64e2a3; 635 | } 636 | .form-check .form-check-input.form-check-success.form-check-glow:not(:checked) { 637 | box-shadow: none; 638 | } 639 | .form-check .form-check-input.form-check-danger { 640 | background-color: #ff5b5c; 641 | border-color: #ff5b5c; 642 | } 643 | .form-check .form-check-input.form-check-danger:not(:checked) { 644 | background-color: transparent; 645 | border: 1px solid #ced4da; 646 | } 647 | .form-check .form-check-input.form-check-danger.form-check-glow { 648 | box-shadow: 0 0 5px #ff8e8f; 649 | } 650 | .form-check .form-check-input.form-check-danger.form-check-glow:not(:checked) { 651 | box-shadow: none; 652 | } 653 | .form-check .form-check-input.form-check-warning { 654 | background-color: #fdac41; 655 | border-color: #fdac41; 656 | } 657 | .form-check .form-check-input.form-check-warning:not(:checked) { 658 | background-color: transparent; 659 | border: 1px solid #ced4da; 660 | } 661 | .form-check .form-check-input.form-check-warning.form-check-glow { 662 | box-shadow: 0 0 5px #fec273; 663 | } 664 | .form-check .form-check-input.form-check-warning.form-check-glow:not(:checked) { 665 | box-shadow: none; 666 | } 667 | .form-check .form-check-input.form-check-info { 668 | background-color: #00cfdd; 669 | border-color: #00cfdd; 670 | } 671 | .form-check .form-check-input.form-check-info:not(:checked) { 672 | background-color: transparent; 673 | border: 1px solid #ced4da; 674 | } 675 | .form-check .form-check-input.form-check-info.form-check-glow { 676 | box-shadow: 0 0 5px #11f0ff; 677 | } 678 | .form-check .form-check-input.form-check-info.form-check-glow:not(:checked) { 679 | box-shadow: none; 680 | } 681 | .form-check .form-check-input.form-check-dark { 682 | background-color: #222f3e; 683 | border-color: #222f3e; 684 | } 685 | .form-check .form-check-input.form-check-dark:not(:checked) { 686 | background-color: transparent; 687 | border: 1px solid #ced4da; 688 | } 689 | .form-check .form-check-input.form-check-dark.form-check-glow { 690 | box-shadow: 0 0 5px #34485f; 691 | } 692 | .form-check .form-check-input.form-check-dark.form-check-glow:not(:checked) { 693 | box-shadow: none; 694 | } 695 | .form-check .form-check-input.form-check-light { 696 | background-color: #a3afbd; 697 | border-color: #a3afbd; 698 | } 699 | .form-check .form-check-input.form-check-light:not(:checked) { 700 | background-color: transparent; 701 | border: 1px solid #ced4da; 702 | } 703 | .form-check .form-check-input.form-check-light.form-check-glow { 704 | box-shadow: 0 0 5px #c1c9d2; 705 | } 706 | .form-check .form-check-input.form-check-light.form-check-glow:not(:checked) { 707 | box-shadow: none; 708 | } 709 | .form-check .form-check-input.form-check-link { 710 | background-color: #2178d1; 711 | border-color: #2178d1; 712 | } 713 | .form-check .form-check-input.form-check-link:not(:checked) { 714 | background-color: transparent; 715 | border: 1px solid #ced4da; 716 | } 717 | .form-check .form-check-input.form-check-link.form-check-glow { 718 | box-shadow: 0 0 5px #4492e1; 719 | } 720 | .form-check .form-check-input.form-check-link.form-check-glow:not(:checked) { 721 | box-shadow: none; 722 | } 723 | .form-check.form-check-sm .form-check-input { 724 | width: 0.9rem; 725 | height: 0.9rem; 726 | margin-top: 0.3em; 727 | } 728 | .form-check.form-check-sm label { 729 | font-size: 0.7rem; 730 | } 731 | .form-check.form-check-primary .form-check-input { 732 | background-color: #5a8dee; 733 | border-color: #5a8dee; 734 | } 735 | .form-check.form-check-secondary .form-check-input { 736 | background-color: #475f7b; 737 | border-color: #475f7b; 738 | } 739 | .form-check.form-check-success .form-check-input { 740 | background-color: #39da8a; 741 | border-color: #39da8a; 742 | } 743 | .form-check.form-check-danger .form-check-input { 744 | background-color: #ff5b5c; 745 | border-color: #ff5b5c; 746 | } 747 | .form-check.form-check-warning .form-check-input { 748 | background-color: #fdac41; 749 | border-color: #fdac41; 750 | } 751 | .form-check.form-check-info .form-check-input { 752 | background-color: #00cfdd; 753 | border-color: #00cfdd; 754 | } 755 | .form-check.form-check-dark .form-check-input { 756 | background-color: #222f3e; 757 | border-color: #222f3e; 758 | } 759 | .form-check.form-check-light .form-check-input { 760 | background-color: #a3afbd; 761 | border-color: #a3afbd; 762 | } 763 | .form-check.form-check-link .form-check-input { 764 | background-color: #2178d1; 765 | border-color: #2178d1; 766 | } 767 | 768 | .dataTable-input { 769 | min-height: calc(1.5em + 0.934rem + 2px); 770 | padding: 0.467rem 0.6rem; 771 | font-size: 0.9025rem; 772 | font-weight: 400; 773 | line-height: 1.5; 774 | color: #555252; 775 | background-color: white; 776 | background-clip: padding-box; 777 | border: 1px solid #dfe3e7; 778 | -webkit-appearance: none; 779 | -moz-appearance: none; 780 | appearance: none; 781 | border-radius: 0.25rem; 782 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 783 | } 784 | .dataTable-input:focus { 785 | color: #555252; 786 | background-color: white; 787 | border-color: #5a8dee; 788 | outline: 0; 789 | box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1); 790 | } 791 | 792 | /** 2.10 Modal **/ 793 | .modal .modal-content { 794 | box-shadow: -8px 12px 18px 0 rgba(25, 42, 70, 0.13); 795 | border: none; 796 | } 797 | .modal .modal-full { 798 | max-width: 94%; 799 | } 800 | .modal .white { 801 | color: white; 802 | } 803 | .modal .modal-header { 804 | display: flex; 805 | justify-content: space-between; 806 | align-items: center; 807 | } 808 | .modal .modal-header .modal-title { 809 | font-size: 1.1rem; 810 | } 811 | .modal .modal-header .close { 812 | padding: 7px 10px; 813 | border-radius: 50%; 814 | } 815 | .modal .modal-header .close:hover { 816 | background: #dee2e6; 817 | } 818 | .modal .modal-header i, 819 | .modal .modal-header svg { 820 | font-size: 12px; 821 | height: 12px; 822 | width: 12px; 823 | } 824 | .modal .modal-footer { 825 | padding: 1rem 2rem; 826 | } 827 | .modal.modal-borderless .modal-header { 828 | border-bottom: 0; 829 | } 830 | .modal.modal-borderless .modal-footer { 831 | border-top: 0; 832 | } 833 | 834 | /** 2.11 Sidebar **/ 835 | #sidebar.active .sidebar-wrapper { 836 | left: 0; 837 | } 838 | #sidebar:not(.active) ~ #main { 839 | margin-left: 0; 840 | } 841 | 842 | .sidebar-wrapper { 843 | width: 260px; 844 | height: 100vh; 845 | position: fixed; 846 | top: 0; 847 | z-index: 10; 848 | background-color: #fff; 849 | bottom: 0; 850 | border-right: 1px solid #eee; 851 | box-shadow: 0 0 10px #ececec; 852 | left: -260px; 853 | transition: left 0.6s ease-out; 854 | } 855 | .sidebar-wrapper .sidebar-header { 856 | padding: 2rem 2rem 1rem; 857 | font-size: 2rem; 858 | font-weight: bold; 859 | } 860 | .sidebar-wrapper .sidebar-header img { 861 | height: 2.5rem; 862 | } 863 | .sidebar-wrapper .sidebar-toggler.x { 864 | position: absolute; 865 | right: 0; 866 | top: 0.5rem; 867 | display: none; 868 | } 869 | .sidebar-wrapper .menu { 870 | padding-left: 0; 871 | margin-top: 2rem; 872 | } 873 | .sidebar-wrapper .menu .sidebar-title { 874 | padding: 1.5rem 1.8rem 0.5rem; 875 | font-size: 0.8rem; 876 | font-weight: 600; 877 | color: #888; 878 | text-transform: uppercase; 879 | } 880 | .sidebar-wrapper .menu .sidebar-link { 881 | display: block; 882 | padding: 0.7rem 1.5rem; 883 | font-size: 0.85rem; 884 | display: flex; 885 | align-items: center; 886 | transition: all 0.5s; 887 | } 888 | .sidebar-wrapper .menu .sidebar-link:hover span { 889 | opacity: 1; 890 | } 891 | .sidebar-wrapper .menu .sidebar-link > span { 892 | color: #053382; 893 | font-weight: 500; 894 | margin-left: 1rem; 895 | opacity: 0.8; 896 | } 897 | .sidebar-wrapper .menu .sidebar-item { 898 | list-style: none; 899 | margin-top: 0.5rem; 900 | position: relative; 901 | } 902 | .sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link:after { 903 | content: url('data:image/svg+xml,'); 904 | position: absolute; 905 | color: #ccc; 906 | right: 15px; 907 | top: 12px; 908 | display: block; 909 | } 910 | .sidebar-wrapper .menu .sidebar-item.active .sidebar-link { 911 | background-color: #e8f3ff; 912 | } 913 | .sidebar-wrapper .menu .sidebar-item.active .sidebar-link:before { 914 | content: ''; 915 | position: absolute; 916 | left: 0; 917 | height: 100%; 918 | top: 0; 919 | bottom: 0; 920 | background-color: rgba(46, 170, 244, 0.5); 921 | width: 5px; 922 | } 923 | .sidebar-wrapper .menu .submenu { 924 | list-style: none; 925 | max-height: 0; 926 | transition: max-height 0.5s ease-out; 927 | overflow: hidden; 928 | } 929 | .sidebar-wrapper .menu .submenu.active { 930 | max-height: 500px; 931 | } 932 | .sidebar-wrapper .menu .submenu li a { 933 | padding: 0.7rem 3rem; 934 | display: block; 935 | color: #676767; 936 | font-size: 0.75rem; 937 | font-weight: 500; 938 | letter-spacing: 0.5px; 939 | transition: all 0.2s; 940 | } 941 | .sidebar-wrapper .menu .submenu li a:hover { 942 | margin-left: 0.3rem; 943 | } 944 | 945 | @media screen and (max-width: 767px) { 946 | .sidebar-wrapper { 947 | left: -270px; 948 | } 949 | .sidebar-wrapper .sidebar-toggler.x { 950 | display: block; 951 | } 952 | } 953 | /** 2.12 Card **/ 954 | .card { 955 | box-shadow: -8px 12px 18px 0 rgba(25, 42, 70, 0.13); 956 | margin-bottom: 2.2rem; 957 | } 958 | .card.card-statistic { 959 | box-shadow: 1px 2px 5px rgba(47, 170, 244, 0.5); 960 | background: linear-gradient(to bottom, #25a6f1, #54b9ff); 961 | border: none; 962 | } 963 | .card.card-statistic .card-title { 964 | text-transform: uppercase; 965 | color: #fff; 966 | letter-spacing: 0.8px; 967 | font-weight: 400; 968 | font-size: 1.3rem; 969 | margin-bottom: 0; 970 | margin-top: 5px; 971 | } 972 | .card.card-statistic .card-right p { 973 | font-size: 1.5rem; 974 | color: #fff; 975 | margin-bottom: 0; 976 | } 977 | .card.card-statistic .card-right span.green { 978 | color: #6fff6f; 979 | } 980 | .card.card-statistic .card-right span.red { 981 | color: #ff7979; 982 | } 983 | .card.card-statistic .chart-wrapper { 984 | height: 100px; 985 | } 986 | .card .card-header { 987 | border: none; 988 | } 989 | .card .card-header h4 { 990 | font-size: 1.2rem; 991 | } 992 | .card .card-header ~ .card-body { 993 | padding-top: 0; 994 | } 995 | .card .card-content { 996 | position: relative; 997 | } 998 | .card .card-title { 999 | font-size: 1.2rem; 1000 | } 1001 | .card .card-body { 1002 | padding: 1.4rem 1.7rem; 1003 | } 1004 | .card .card-heading { 1005 | color: #555; 1006 | font-size: 1.5rem; 1007 | } 1008 | .card .card-img-overlay { 1009 | background-color: rgba(0, 0, 0, 0.6); 1010 | } 1011 | .card .card-img-overlay p { 1012 | color: #eee; 1013 | } 1014 | .card .card-img-overlay .card-title { 1015 | color: #fff; 1016 | } 1017 | 1018 | .pricing .card { 1019 | box-shadow: none; 1020 | margin-bottom: 0; 1021 | border-right: 1px solid #e9ecef; 1022 | box-shadow: 0 10px 10px #e9ecef; 1023 | margin-bottom: 0.5rem; 1024 | } 1025 | .pricing h1 { 1026 | text-align: center; 1027 | font-size: 4rem; 1028 | margin-bottom: 3rem; 1029 | } 1030 | .pricing .card-header .card-title { 1031 | font-size: 2rem !important; 1032 | margin-bottom: 0; 1033 | } 1034 | .pricing .card-header p { 1035 | font-size: 0.8rem; 1036 | } 1037 | .pricing ul li { 1038 | list-style: none; 1039 | margin-bottom: 0.5rem; 1040 | } 1041 | .pricing ul li i, 1042 | .pricing ul li svg { 1043 | width: 1rem; 1044 | color: #39da8a; 1045 | font-size: 1rem; 1046 | margin-right: 7px; 1047 | } 1048 | .pricing .card-highlighted { 1049 | background-color: #5a8dee; 1050 | padding-top: 20px; 1051 | padding-bottom: 20px; 1052 | } 1053 | .pricing .card-highlighted .card-header, 1054 | .pricing .card-highlighted .card-body { 1055 | background-color: #5a8dee; 1056 | color: #fff; 1057 | } 1058 | .pricing .card-highlighted ul li { 1059 | color: #fff; 1060 | } 1061 | .pricing .card-highlighted ul li i, 1062 | .pricing .card-highlighted ul li svg { 1063 | color: tint-color(#28a745, 2); 1064 | } 1065 | .pricing .card-highlighted .card-footer { 1066 | background-color: #5a8dee; 1067 | } 1068 | .pricing .card-highlighted .card-title { 1069 | color: #fff; 1070 | font-size: 1.8rem; 1071 | } 1072 | 1073 | /** 2.13 Navs **/ 1074 | .nav-pills .nav-link.active { 1075 | box-shadow: 0 2px 10px rgba(90, 141, 238, 0.5); 1076 | } 1077 | 1078 | .nav-tabs { 1079 | border: none; 1080 | } 1081 | .nav-tabs .nav-link { 1082 | border: none; 1083 | } 1084 | .nav-tabs .nav-link:hover { 1085 | border: none; 1086 | text-shadow: 0 0 2px rgba(90, 141, 238, 0.3); 1087 | } 1088 | .nav-tabs .nav-link.active { 1089 | border: none; 1090 | position: relative; 1091 | color: #5a8dee; 1092 | } 1093 | .nav-tabs .nav-link.active:after { 1094 | content: ''; 1095 | width: 100%; 1096 | position: absolute; 1097 | bottom: 0; 1098 | height: 2px; 1099 | background-color: #5a8dee; 1100 | left: 0; 1101 | box-shadow: 0 2px 5px rgba(90, 141, 238, 0.5); 1102 | } 1103 | 1104 | /** 2.14 Navbar **/ 1105 | .navbar { 1106 | height: 70px; 1107 | padding: 1.5rem; 1108 | } 1109 | .navbar .nav-link-user img { 1110 | width: 30px; 1111 | } 1112 | .navbar.navbar-header li { 1113 | display: flex; 1114 | align-items: center; 1115 | } 1116 | .navbar.navbar-header li.nav-icon { 1117 | margin-right: 0.4rem; 1118 | } 1119 | .navbar.navbar-header li.nav-icon .nav-link { 1120 | display: block; 1121 | padding: 0.4rem; 1122 | border-radius: 50%; 1123 | } 1124 | .navbar.navbar-header li.nav-icon .nav-link:hover { 1125 | background-color: #e9ecef; 1126 | } 1127 | .navbar.navbar-header .dropdown > a { 1128 | color: #6c757d; 1129 | font-weight: 600; 1130 | } 1131 | .navbar.navbar-header .dropdown > a svg { 1132 | height: 24px; 1133 | width: 24px; 1134 | } 1135 | .navbar.navbar-header .dropdown > a:after { 1136 | display: none; 1137 | } 1138 | 1139 | /** 2.15 Pagination **/ 1140 | .pagination.pagination-primary .page-item.active .page-link { 1141 | background-color: #5a8dee; 1142 | border-color: #5a8dee; 1143 | box-shadow: 0 2px 5px rgba(90, 141, 238, 0.3); 1144 | } 1145 | .pagination.pagination-secondary .page-item.active .page-link { 1146 | background-color: #475f7b; 1147 | border-color: #475f7b; 1148 | box-shadow: 0 2px 5px rgba(71, 95, 123, 0.3); 1149 | } 1150 | .pagination.pagination-success .page-item.active .page-link { 1151 | background-color: #39da8a; 1152 | border-color: #39da8a; 1153 | box-shadow: 0 2px 5px rgba(57, 218, 138, 0.3); 1154 | } 1155 | .pagination.pagination-danger .page-item.active .page-link { 1156 | background-color: #ff5b5c; 1157 | border-color: #ff5b5c; 1158 | box-shadow: 0 2px 5px rgba(255, 91, 92, 0.3); 1159 | } 1160 | .pagination.pagination-warning .page-item.active .page-link { 1161 | background-color: #fdac41; 1162 | border-color: #fdac41; 1163 | box-shadow: 0 2px 5px rgba(253, 172, 65, 0.3); 1164 | } 1165 | .pagination.pagination-info .page-item.active .page-link { 1166 | background-color: #00cfdd; 1167 | border-color: #00cfdd; 1168 | box-shadow: 0 2px 5px rgba(0, 207, 221, 0.3); 1169 | } 1170 | .pagination.pagination-dark .page-item.active .page-link { 1171 | background-color: #222f3e; 1172 | border-color: #222f3e; 1173 | box-shadow: 0 2px 5px rgba(34, 47, 62, 0.3); 1174 | } 1175 | .pagination.pagination-light .page-item.active .page-link { 1176 | background-color: #a3afbd; 1177 | border-color: #a3afbd; 1178 | box-shadow: 0 2px 5px rgba(163, 175, 189, 0.3); 1179 | } 1180 | .pagination.pagination-link .page-item.active .page-link { 1181 | background-color: #2178d1; 1182 | border-color: #2178d1; 1183 | box-shadow: 0 2px 5px rgba(33, 120, 209, 0.3); 1184 | } 1185 | 1186 | .page-item:not(.active) .page-link:hover { 1187 | color: #000; 1188 | } 1189 | .page-item i, 1190 | .page-item svg { 1191 | font-size: 13px; 1192 | width: 13px; 1193 | height: 13px; 1194 | } 1195 | .page-item .page-link { 1196 | font-size: 0.875rem; 1197 | } 1198 | .page-item .page-link:focus { 1199 | box-shadow: none; 1200 | } 1201 | .page-item:first-child { 1202 | margin-right: 0.4rem; 1203 | } 1204 | .page-item:last-child { 1205 | margin-left: 0.4rem; 1206 | } 1207 | 1208 | /** 2.16 Table **/ 1209 | .table td, 1210 | .dataTable-table td, 1211 | .table thead th, 1212 | .dataTable-table thead th { 1213 | vertical-align: middle; 1214 | } 1215 | 1216 | .table thead th, 1217 | .dataTable-table thead th { 1218 | border-bottom: 2px solid #475f7b; 1219 | } 1220 | 1221 | .dataTable-container { 1222 | overflow-x: auto; 1223 | } 1224 | 1225 | /** 2.17 Progress **/ 1226 | .progress.progress-primary { 1227 | overflow: visible; 1228 | } 1229 | .progress.progress-primary .progress-bar { 1230 | background-color: #5a8dee; 1231 | border-radius: 1rem; 1232 | box-shadow: 0px 2px 3px rgba(90, 141, 238, 0.8); 1233 | } 1234 | .progress.progress-secondary { 1235 | overflow: visible; 1236 | } 1237 | .progress.progress-secondary .progress-bar { 1238 | background-color: #475f7b; 1239 | border-radius: 1rem; 1240 | box-shadow: 0px 2px 3px rgba(71, 95, 123, 0.8); 1241 | } 1242 | .progress.progress-success { 1243 | overflow: visible; 1244 | } 1245 | .progress.progress-success .progress-bar { 1246 | background-color: #39da8a; 1247 | border-radius: 1rem; 1248 | box-shadow: 0px 2px 3px rgba(57, 218, 138, 0.8); 1249 | } 1250 | .progress.progress-danger { 1251 | overflow: visible; 1252 | } 1253 | .progress.progress-danger .progress-bar { 1254 | background-color: #ff5b5c; 1255 | border-radius: 1rem; 1256 | box-shadow: 0px 2px 3px rgba(255, 91, 92, 0.8); 1257 | } 1258 | .progress.progress-warning { 1259 | overflow: visible; 1260 | } 1261 | .progress.progress-warning .progress-bar { 1262 | background-color: #fdac41; 1263 | border-radius: 1rem; 1264 | box-shadow: 0px 2px 3px rgba(253, 172, 65, 0.8); 1265 | } 1266 | .progress.progress-info { 1267 | overflow: visible; 1268 | } 1269 | .progress.progress-info .progress-bar { 1270 | background-color: #00cfdd; 1271 | border-radius: 1rem; 1272 | box-shadow: 0px 2px 3px rgba(0, 207, 221, 0.8); 1273 | } 1274 | .progress.progress-dark { 1275 | overflow: visible; 1276 | } 1277 | .progress.progress-dark .progress-bar { 1278 | background-color: #222f3e; 1279 | border-radius: 1rem; 1280 | box-shadow: 0px 2px 3px rgba(34, 47, 62, 0.8); 1281 | } 1282 | .progress.progress-light { 1283 | overflow: visible; 1284 | } 1285 | .progress.progress-light .progress-bar { 1286 | background-color: #a3afbd; 1287 | border-radius: 1rem; 1288 | box-shadow: 0px 2px 3px rgba(163, 175, 189, 0.8); 1289 | } 1290 | .progress.progress-link { 1291 | overflow: visible; 1292 | } 1293 | .progress.progress-link .progress-bar { 1294 | background-color: #2178d1; 1295 | border-radius: 1rem; 1296 | box-shadow: 0px 2px 3px rgba(33, 120, 209, 0.8); 1297 | } 1298 | .progress.progress-sm { 1299 | height: 0.4rem; 1300 | } 1301 | .progress.progress-lg { 1302 | height: 0.8rem; 1303 | } 1304 | .progress .progress-bar { 1305 | position: relative; 1306 | overflow: visible; 1307 | } 1308 | .progress .progress-bar.progress-label:before { 1309 | content: attr(aria-valuenow) '%'; 1310 | position: absolute; 1311 | right: 0; 1312 | top: -1.3rem; 1313 | color: #495057; 1314 | font-size: 0.8rem; 1315 | } 1316 | 1317 | /** 3.1 Chat **/ 1318 | .chat { 1319 | border-radius: 5px; 1320 | } 1321 | .chat.chat-left .chat-message { 1322 | background: #5a8dee !important; 1323 | float: left !important; 1324 | color: #fff; 1325 | } 1326 | .chat .chat-message { 1327 | text-align: left !important; 1328 | float: right !important; 1329 | margin: 0.2rem 0 1.8rem 0.2rem !important; 1330 | color: #525361; 1331 | background-color: #fafbfb !important; 1332 | box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3) !important; 1333 | padding: 0.75rem 1rem !important; 1334 | position: relative !important; 1335 | max-width: calc(100% - 5rem) !important; 1336 | clear: both !important; 1337 | word-break: break-word !important; 1338 | border-radius: 0.267rem !important; 1339 | } 1340 | 1341 | /** 3.1 Todo **/ 1342 | .widget-todo-list-wrapper { 1343 | padding: 0; 1344 | margin: 0; 1345 | } 1346 | .widget-todo-list-wrapper .widget-todo-item { 1347 | padding: 0.8rem 2rem 0.8rem 0.8rem; 1348 | list-style: none; 1349 | } 1350 | .widget-todo-list-wrapper .widget-todo-item:hover { 1351 | background-color: #f8f9fa; 1352 | } 1353 | .widget-todo-list-wrapper .widget-todo-item .checkbox { 1354 | margin-left: 1rem; 1355 | } 1356 | .widget-todo-list-wrapper .widget-todo-item i, 1357 | .widget-todo-list-wrapper .widget-todo-item svg { 1358 | font-size: 12px; 1359 | cursor: move; 1360 | height: 1rem; 1361 | } 1362 | 1363 | /** 4.1 Auth Pages **/ 1364 | #auth { 1365 | background: #6c757d; 1366 | min-height: 100vh; 1367 | padding-top: 100px; 1368 | background-image: url(../images/background/auth.jpg); 1369 | } 1370 | #auth .card { 1371 | box-shadow: 0 5px 15px rgba(36, 104, 146, 0.6); 1372 | border: none; 1373 | } 1374 | 1375 | /** 4.1 Error Pages **/ 1376 | #error { 1377 | height: 100vh; 1378 | width: 100%; 1379 | background-color: #e9ecef; 1380 | } 1381 | #error .error-title { 1382 | font-size: 10rem; 1383 | } 1384 | 1385 | /** 5. Utilities **/ 1386 | .text-xxs { 1387 | font-size: 0.65rem; 1388 | } 1389 | 1390 | .text-xs { 1391 | font-size: 0.75rem; 1392 | } 1393 | 1394 | .text-sm { 1395 | font-size: 0.85rem; 1396 | } 1397 | 1398 | .font-bold { 1399 | font-weight: 800; 1400 | } 1401 | 1402 | .font-semibold { 1403 | font-weight: 600; 1404 | } 1405 | 1406 | .pt-32 { 1407 | padding-top: 6rem; 1408 | } 1409 | 1410 | .ml-50 { 1411 | margin-left: 0.5rem; 1412 | } 1413 | 1414 | .w-0 { 1415 | width: 0; 1416 | } 1417 | 1418 | .w-1 { 1419 | width: 0.25rem; 1420 | } 1421 | 1422 | .w-2 { 1423 | width: 0.5rem; 1424 | } 1425 | 1426 | .w-3 { 1427 | width: 0.75rem; 1428 | } 1429 | 1430 | .w-4 { 1431 | width: 1rem; 1432 | } 1433 | 1434 | .w-5 { 1435 | width: 1.25rem; 1436 | } 1437 | 1438 | .w-10 { 1439 | width: 2.25rem; 1440 | } 1441 | 1442 | .h-0 { 1443 | height: 0; 1444 | } 1445 | 1446 | .h-1 { 1447 | height: 0.25rem; 1448 | } 1449 | 1450 | .h-2 { 1451 | height: 0.5rem; 1452 | } 1453 | 1454 | .h-3 { 1455 | height: 0.75rem; 1456 | } 1457 | 1458 | .h-4 { 1459 | height: 1rem; 1460 | } 1461 | 1462 | .h-5 { 1463 | height: 1.25rem; 1464 | } 1465 | 1466 | .h-10 { 1467 | height: 2.25rem; 1468 | } 1469 | 1470 | .rounded-none { 1471 | border-radius: 0; 1472 | } 1473 | 1474 | .round { 1475 | border-radius: 1.5rem; 1476 | } 1477 | 1478 | .rounded-full { 1479 | border-radius: 50%; 1480 | } 1481 | 1482 | .square { 1483 | border-radius: 0; 1484 | } 1485 | 1486 | .text-red { 1487 | color: #ff6384; 1488 | } 1489 | 1490 | .bg-red { 1491 | background-color: #ff6384 !important; 1492 | } 1493 | 1494 | .text-orange { 1495 | color: #ff9f40; 1496 | } 1497 | 1498 | .bg-orange { 1499 | background-color: #ff9f40 !important; 1500 | } 1501 | 1502 | .text-yellow { 1503 | color: #ffcd56; 1504 | } 1505 | 1506 | .bg-yellow { 1507 | background-color: #ffcd56 !important; 1508 | } 1509 | 1510 | .text-green { 1511 | color: #4bc0c0; 1512 | } 1513 | 1514 | .bg-green { 1515 | background-color: #4bc0c0 !important; 1516 | } 1517 | 1518 | .text-info { 1519 | color: #41b1f9; 1520 | } 1521 | 1522 | .bg-info { 1523 | background-color: #41b1f9 !important; 1524 | } 1525 | 1526 | .text-blue { 1527 | color: #3245d1; 1528 | } 1529 | 1530 | .bg-blue { 1531 | background-color: #3245d1 !important; 1532 | } 1533 | 1534 | .text-purple { 1535 | color: #9966ff; 1536 | } 1537 | 1538 | .bg-purple { 1539 | background-color: #9966ff !important; 1540 | } 1541 | 1542 | .text-grey { 1543 | color: #ebeff6; 1544 | } 1545 | 1546 | .bg-grey { 1547 | background-color: #ebeff6 !important; 1548 | } 1549 | 1550 | .text-gray-700 { 1551 | color: #4a5568; 1552 | } 1553 | 1554 | .bg-gray-700 { 1555 | background-color: #4a5568 !important; 1556 | } 1557 | 1558 | /* purgecss end ignore */ 1559 | -------------------------------------------------------------------------------- /assets/images/touch-icons/logo-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltegaruda/template/b69a6942a216df7c204cffbb80c701863b59b676/assets/images/touch-icons/logo-192.png -------------------------------------------------------------------------------- /assets/images/touch-icons/logo-800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltegaruda/template/b69a6942a216df7c204cffbb80c701863b59b676/assets/images/touch-icons/logo-800.png -------------------------------------------------------------------------------- /assets/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "background_color": "#ffffff", 3 | "theme_color": "#E938C2", 4 | "name": "Routify app", 5 | "short_name": "Routify app", 6 | "start_url": "/", 7 | "display": "standalone", 8 | "icons": [ 9 | { 10 | "src": "/images/touch-icons/logo-192.png", 11 | "sizes": "192x192", 12 | "type": "image/png" 13 | }, 14 | { 15 | "src": "/images/touch-icons/logo-800.png", 16 | "sizes": "800x800", 17 | "type": "image/png" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /assets/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /assets/vendor.css: -------------------------------------------------------------------------------- 1 | @import './bootstrap.css'; 2 | @import '../node_modules/perfect-scrollbar/css/perfect-scrollbar.css'; 3 | @import './datatables.css'; 4 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [1112/073828.385:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | [1112/120009.181:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 3 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | 2 | [build] 3 | publish = "public/" 4 | functions = "api/" 5 | ignore = "git diff --quiet HEAD^ HEAD ../../" 6 | 7 | [[redirects]] 8 | # SSR and SPA 9 | from = "/*" 10 | to = "/.netlify/functions/ssr" 11 | status = 200 12 | 13 | # SPA only 14 | # from = "/*" 15 | # to = "/__app.html" 16 | # status = 200 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "@comments scripts": { 5 | "dev": "develop with blazing fast rebuilds", 6 | "dev:features": "develop with features like SSR and serviceworker enabled", 7 | "build": "run build scripts below", 8 | "build:app": "build single page application (SPA)", 9 | "build:static": "Generate static pages", 10 | "serve": "serve content in 'dist' folder", 11 | "rollup": "run the rollup bundler", 12 | "nollup": "run the nollup no-bundler", 13 | "routify": "run routify" 14 | }, 15 | "scripts": { 16 | "dev": "run-p routify nollup", 17 | "dev:ssr": "run-p routify rollup", 18 | "build": "run-s build:*", 19 | "build:app": "routify -b && rollup -c", 20 | "build:static": "spank", 21 | "serve": "spassr --ssr", 22 | "rollup": "rollup -cw", 23 | "nollup": "nollup -c", 24 | "routify": "routify" 25 | }, 26 | "devDependencies": { 27 | "@fullhuman/postcss-purgecss": "^3.0.0", 28 | "@rollup/plugin-commonjs": "^15.0.0", 29 | "@rollup/plugin-node-resolve": "^10.0.0", 30 | "@roxi/routify": "^2.5.1-next-major", 31 | "cross-env": "^7.0.2", 32 | "fs-extra": "^9.0.1", 33 | "nollup": "^0.13.13", 34 | "npm-run-all": "^4.1.5", 35 | "postcss": "^8.1.4", 36 | "postcss-import": "^13.0.0", 37 | "postcss-import-url": "^5.1.0", 38 | "postcss-load-config": "^3.0.0", 39 | "postcss-preset-env": "^6.7.0", 40 | "purgecss": "^3.0.0", 41 | "rollup": "^2.33.1", 42 | "rollup-plugin-hot": "^0.1.1", 43 | "rollup-plugin-livereload": "^2.0.0", 44 | "rollup-plugin-svelte": "^6.1.0", 45 | "rollup-plugin-svelte-hot": "^0.11.1", 46 | "rollup-plugin-terser": "^7.0.2", 47 | "rollup-plugin-workbox": "^5.2.1", 48 | "spank": "^1.4.0", 49 | "spassr": "^2.1.6", 50 | "svelte": "^3.29.4", 51 | "svelte-preprocess": "^4.5.2", 52 | "tossr": "^1.3.1" 53 | }, 54 | "routify": { 55 | "extensions": "svelte,html,svx,md" 56 | }, 57 | "spassr": { 58 | "assetsDir": [ 59 | "dist", 60 | "assets" 61 | ], 62 | "script": "dist/build/main.js", 63 | "ssrOptions": { 64 | "inlineDynamicImports": true 65 | } 66 | }, 67 | "spank": { 68 | "blacklist": [ 69 | "/example/modal/basic/4" 70 | ] 71 | }, 72 | "dependencies": { 73 | "dayjs": "^1.9.6", 74 | "feather-icons": "^4.28.0", 75 | "perfect-scrollbar": "^1.5.0" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const production = !process.env.ROLLUP_WATCH; 2 | 3 | module.exports = { 4 | plugins: [ 5 | require('postcss-import'), 6 | require('postcss-import-url'), 7 | production && 8 | require('@fullhuman/postcss-purgecss')({ 9 | content: ['./src/**/*.svelte', './assets/__app.html'], 10 | whitelist: ['svg:not(:root).svg-inline--fa'], 11 | whitelistPatterns: [/svelte-/, /^fa-/, /^svg-inline--fa/], 12 | whitelistPatternsChildren: [/^token/, /^pre/, /^code/], 13 | defaultExtractor: (content) => { 14 | const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g); 15 | const matchedTokens = []; 16 | let match = regExp.exec(content); 17 | while (match) { 18 | if (match[0].startsWith('class:')) { 19 | matchedTokens.push(match[0].substring(6)); 20 | } else { 21 | matchedTokens.push(match[0]); 22 | } 23 | match = regExp.exec(content); 24 | } 25 | return matchedTokens; 26 | }, 27 | }), 28 | require('postcss-preset-env')({ stage: 1 }), 29 | ], 30 | }; 31 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte-hot'; 2 | import Hmr from 'rollup-plugin-hot'; 3 | import resolve from '@rollup/plugin-node-resolve'; 4 | import commonjs from '@rollup/plugin-commonjs'; 5 | import livereload from 'rollup-plugin-livereload'; 6 | import { terser } from 'rollup-plugin-terser'; 7 | import { copySync, removeSync } from 'fs-extra'; 8 | import { spassr } from 'spassr'; 9 | import getConfig from '@roxi/routify/lib/utils/config'; 10 | import autoPreprocess from 'svelte-preprocess'; 11 | import { injectManifest } from 'rollup-plugin-workbox'; 12 | 13 | const { distDir } = getConfig(); // use Routify's distDir for SSOT 14 | const assetsDir = 'assets'; 15 | const buildDir = `dist/build`; 16 | const isNollup = !!process.env.NOLLUP; 17 | const production = !process.env.ROLLUP_WATCH; 18 | 19 | // clear previous builds 20 | removeSync(distDir); 21 | removeSync(buildDir); 22 | 23 | const serve = () => ({ 24 | writeBundle: async () => { 25 | const options = { 26 | assetsDir: [assetsDir, distDir], 27 | entrypoint: `${assetsDir}/__app.html`, 28 | script: `${buildDir}/main.js`, 29 | }; 30 | spassr({ ...options, port: 5000 }); 31 | spassr({ 32 | ...options, 33 | ssr: true, 34 | port: 5005, 35 | ssrOptions: { inlineDynamicImports: true, dev: true }, 36 | }); 37 | }, 38 | }); 39 | const copyToDist = () => ({ 40 | writeBundle() { 41 | copySync(assetsDir, distDir); 42 | }, 43 | }); 44 | 45 | export default { 46 | preserveEntrySignatures: false, 47 | input: [`src/main.js`], 48 | output: { 49 | sourcemap: true, 50 | format: 'esm', 51 | dir: buildDir, 52 | }, 53 | plugins: [ 54 | svelte({ 55 | dev: !production, // run-time checks 56 | // Extract component CSS — better performance 57 | css: (css) => css.write(`bundle.css`), 58 | hot: isNollup, 59 | preprocess: [ 60 | autoPreprocess({ 61 | postcss: { 62 | configFilePath: './postcss.config.js', 63 | }, 64 | defaults: { style: 'postcss' }, 65 | }), 66 | ], 67 | }), 68 | 69 | // resolve matching modules from current working directory 70 | resolve({ 71 | browser: true, 72 | dedupe: (importee) => !!importee.match(/svelte(\/|$)/), 73 | }), 74 | commonjs(), 75 | 76 | production && terser(), 77 | !production && !isNollup && serve(), 78 | !production && !isNollup && livereload(distDir), // refresh entire window when code is updated 79 | !production && isNollup && Hmr({ inMemory: true, public: assetsDir }), // refresh only updated code 80 | { 81 | // provide node environment on the client 82 | transform: (code) => ({ 83 | code: code.replace('process.env.NODE_ENV', `"${process.env.NODE_ENV}"`), 84 | map: { mappings: '' }, 85 | }), 86 | }, 87 | injectManifest({ 88 | globDirectory: assetsDir, 89 | globPatterns: ['**/*.{js,css,svg}', '__app.html'], 90 | swSrc: `src/sw.js`, 91 | swDest: `dist/serviceworker.js`, 92 | maximumFileSizeToCacheInBytes: 10000000, // 10 MB, 93 | mode: 'production', 94 | }), 95 | production && copyToDist(), 96 | ], 97 | watch: { 98 | clearScreen: false, 99 | buildDelay: 100, 100 | }, 101 | }; 102 | -------------------------------------------------------------------------------- /sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "container": { 3 | "port": 5000 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import '../assets/bootstrap'; 2 | import feather from 'feather-icons'; 3 | import HMR from '@roxi/routify/hmr'; 4 | import App from './App.svelte'; 5 | 6 | window.feather = feather; 7 | 8 | const app = HMR(App, { target: document.body }, 'routify-app'); 9 | 10 | export default app; 11 | 12 | /** Service worker. Uncomment to use service worker */ 13 | 14 | // if ('serviceWorker' in navigator) { 15 | // addEventListener('app-loaded', () => { 16 | // window.requestIdleCallback(() => 17 | // import('workbox-window').then(async ({ Workbox }) => { 18 | // const wb = new Workbox('/serviceworker.js') 19 | // const registration = await wb.register() 20 | // wb.addEventListener('installed', () => (console.log('installed service worker'))) 21 | // wb.addEventListener('externalinstalled', () => (console.log('installed service worker'))) 22 | // }) 23 | // ) 24 | // }) 25 | // } 26 | -------------------------------------------------------------------------------- /src/pages/_fallback.svelte: -------------------------------------------------------------------------------- 1 |

2 |

404

3 |

Sorry, we couldn't find the page you are looking for

4 |

5 | 6 | 9 | -------------------------------------------------------------------------------- /src/pages/_layout.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 35 | 36 | 62 |

63 |

64 | 65 |

66 | 76 | 77 | 107 |

108 |

109 | 110 |

111 | 112 |

113 | -------------------------------------------------------------------------------- /src/pages/aku.svelte: -------------------------------------------------------------------------------- 1 |

Ini aku...

-------------------------------------------------------------------------------- /src/pages/example/_reset.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

12 |

13 | 41 |

42 |
43 |
44 | 45 | 47 | 57 |
58 |
59 |
60 | 61 | 65 |
66 | 67 | 82 | 83 |
84 |
Hi, Gaez
85 | 86 |
87 | 88 | 89 | Account 90 | 91 | 92 | Messages 93 | 94 | 95 | Settings 96 |
97 | 98 | 99 | Logout 100 |
101 |
102 |
103 |
104 |
105 | 106 |
107 | 108 |
109 | 110 |
111 |
112 |
113 |
2020 © Voler
114 |
115 |
116 |
117 | Crafted with 118 | 119 | by 120 | Ahmad Saugi, modified by 121 | Danang Ponorogo 122 |
123 |
124 |
125 |
126 |
127 |

128 | -------------------------------------------------------------------------------- /src/pages/example/dashboard.svelte: -------------------------------------------------------------------------------- 1 |
2 |
Dashboard
3 |
4 | A good dashboard to display your statistics 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
BALANCE
15 |
16 |
$50
17 |
18 |
19 |
20 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
Revenue
34 |
35 |
$532,2
36 |
37 |
38 |
39 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
ORDERS
53 |
54 |
1,544
55 |
56 |
57 |
58 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
Sales Today
72 |
73 |
423
74 |
75 |
76 |
77 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
Sales
91 |
92 |
93 |
94 |
95 |
96 |
$21,102
97 |
98 | 101 | +19% 102 | than last month 103 |
104 |
105 |
107 |
Last Month 110 |
111 |
113 |
Current Month 116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
127 |
Orders Today
128 |
129 |
130 |
131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 212 | 213 | 214 |
Name Email Phone City Status
Graiden vehicula.aliquet@semconsequat.co.uk 076 4820 8838 Offenburg 149 | Active 151 |
Dale fringilla.euismod.enim@quam.ca 0500 527693 New Quay 159 | Active 161 |
Nathaniel mi.Duis@diam.edu (012165) 76278 Grumo Appula 169 | Inactive 171 |
Darius velit@nec.com 0309 690 7871 Ways 179 | Active 181 |
Ganteng velit@nec.com 0309 690 7871 Ways 189 | Active 191 |
Oleg rhoncus.id@Aliquamauctorvelit.net 0500 441046 Rossignol 199 | Active 201 |
Kermit diam.Sed.diam@anteVivamusnon.org (01653) 27844 Patna 209 | Active 211 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
Your Earnings
223 |
224 |
225 |
226 |
227 |
From last month
228 |
+$2,134
229 |
230 |
231 |
232 |
233 |
235 |
236 | Progress 238 |
239 |
240 |
241 | 242 | 243 | 244 | 255 | 256 | 257 | 258 | 259 | 270 | 271 | 272 | 273 | 274 | 285 | 286 | 287 | 288 | 289 | 300 | 301 | 302 | 303 | 304 | 315 | 316 | 317 |
UI Design 245 |
246 |
253 |
254 |
60%
VueJS 260 |
261 |
268 |
269 |
30%
Laravel 275 |
276 |
283 |
284 |
50%
ReactJS 290 |
291 |
298 |
299 |
80%
Go 305 |
306 |
313 |
314 |
65%
318 |
319 |
320 |
321 |
322 |
323 | -------------------------------------------------------------------------------- /src/pages/example/data.json.js: -------------------------------------------------------------------------------- 1 | const data = [ 2 | [11, 'Hedwig F. Nguyen', 'Manager', 'Arcu Vel Foundation'], 3 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 4 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 5 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 6 | [ 7 | 15, 8 | 'Vielka Q. Chapman', 9 | 'Manager', 10 | 'Velit Pellentesque Ultricies Institute', 11 | ], 12 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 13 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 14 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 15 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 16 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 17 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 18 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 19 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 20 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 21 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 22 | [ 23 | 15, 24 | 'Vielka Q. Chapman', 25 | 'Manager', 26 | 'Velit Pellentesque Ultricies Institute', 27 | ], 28 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 29 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 30 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 31 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 32 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 33 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 34 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 35 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 36 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 37 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 38 | [ 39 | 15, 40 | 'Vielka Q. Chapman', 41 | 'Manager', 42 | 'Velit Pellentesque Ultricies Institute', 43 | ], 44 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 45 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 46 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 47 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 48 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 49 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 50 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 51 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 52 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 53 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 54 | [ 55 | 15, 56 | 'Vielka Q. Chapman', 57 | 'Manager', 58 | 'Velit Pellentesque Ultricies Institute', 59 | ], 60 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 61 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 62 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 63 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 64 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 65 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 66 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 67 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 68 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 69 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 70 | [ 71 | 15, 72 | 'Vielka Q. Chapman', 73 | 'Manager', 74 | 'Velit Pellentesque Ultricies Institute', 75 | ], 76 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 77 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 78 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 79 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 80 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 81 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 82 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 83 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 84 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 85 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 86 | [ 87 | 15, 88 | 'Vielka Q. Chapman', 89 | 'Manager', 90 | 'Velit Pellentesque Ultricies Institute', 91 | ], 92 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 93 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 94 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 95 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 96 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 97 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 98 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 99 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 100 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 101 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 102 | [ 103 | 15, 104 | 'Vielka Q. Chapman', 105 | 'Manager', 106 | 'Velit Pellentesque Ultricies Institute', 107 | ], 108 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 109 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 110 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 111 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 112 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 113 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 114 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 115 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 116 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 117 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 118 | [ 119 | 15, 120 | 'Vielka Q. Chapman', 121 | 'Manager', 122 | 'Velit Pellentesque Ultricies Institute', 123 | ], 124 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 125 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 126 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 127 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 128 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 129 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 130 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 131 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 132 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 133 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 134 | [ 135 | 15, 136 | 'Vielka Q. Chapman', 137 | 'Manager', 138 | 'Velit Pellentesque Ultricies Institute', 139 | ], 140 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 141 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 142 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 143 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 144 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 145 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 146 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 147 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 148 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 149 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 150 | [ 151 | 15, 152 | 'Vielka Q. Chapman', 153 | 'Manager', 154 | 'Velit Pellentesque Ultricies Institute', 155 | ], 156 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 157 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 158 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 159 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 160 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 161 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 162 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 163 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 164 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 165 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 166 | [ 167 | 15, 168 | 'Vielka Q. Chapman', 169 | 'Manager', 170 | 'Velit Pellentesque Ultricies Institute', 171 | ], 172 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 173 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 174 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 175 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 176 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 177 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 178 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 179 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 180 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 181 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 182 | [ 183 | 15, 184 | 'Vielka Q. Chapman', 185 | 'Manager', 186 | 'Velit Pellentesque Ultricies Institute', 187 | ], 188 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 189 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 190 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 191 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 192 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 193 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 194 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 195 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 196 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 197 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 198 | [ 199 | 15, 200 | 'Vielka Q. Chapman', 201 | 'Manager', 202 | 'Velit Pellentesque Ultricies Institute', 203 | ], 204 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 205 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 206 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 207 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 208 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 209 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 210 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 211 | [12, 'Genevieve U. Watts', 'Manager', 'Eget Incorporated'], 212 | [13, 'Kyra S. Baldwin', 'Manager', 'Lorem Vitae Limited'], 213 | [14, 'Stephen V. Hill', 'Manager', 'Eget Mollis Institute'], 214 | [ 215 | 15, 216 | 'Vielka Q. Chapman', 217 | 'Manager', 218 | 'Velit Pellentesque Ultricies Institute', 219 | ], 220 | [16, 'Ocean W. Curtis', 'Manager', 'Eu Ltd'], 221 | [17, 'Kato F. Tucker', 'Manager', 'Vel Lectus Limited'], 222 | [18, 'Robin J. Wise', 'Manager', 'Curabitur Dictum PC'], 223 | [19, 'Uriel H. Guerrero', 'Assistant', 'Mauris Inc.'], 224 | [20, 'Yasir W. Benson', 'Assistant', 'At Incorporated'], 225 | [21, 'Shafira U. French', 'Assistant', 'Nisi Magna Incorporated'], 226 | [22, 'Casey E. Hood', 'Assistant', 'Lorem Vitae Odio Consulting'], 227 | [23, 'Caleb X. Finch', 'Assistant', 'Elit Associates'], 228 | ]; 229 | 230 | export default data; 231 | -------------------------------------------------------------------------------- /src/pages/example/index.svelte: -------------------------------------------------------------------------------- 1 | 36 | 37 |
38 |
39 |
40 |
Datatable
41 |
42 | We use 'simple-datatables' made by @fiduswriter. You can check the full 43 | documentation 44 | here. 46 |
47 |
48 |
49 |
50 |
51 |
52 | 53 | Beranda 54 |
55 |
Customer
56 |
57 |
58 |
59 |
60 |
61 |
62 | {#await dataJson} 63 |
64 | Loading... 65 |
66 | {:then data} 67 | 68 | {:catch error} 69 |
{error.message}
70 | {/await} 71 |
72 | -------------------------------------------------------------------------------- /src/pages/hai/[nama].svelte: -------------------------------------------------------------------------------- 1 | 4 |
Hai {nama}
-------------------------------------------------------------------------------- /src/pages/index.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
Svelte Garuda template
8 |
9 | Use this template as a way to quickly start any new svelte project. 10 |
11 |
Hello World!
12 |
{$angka}
13 |
14 | -------------------------------------------------------------------------------- /src/pages/zero/Datatable.svelte: -------------------------------------------------------------------------------- 1 | 182 | 183 | 185 | 186 |
188 |
189 |
190 | 191 | 204 | entries per page 205 | 206 |
207 | 208 |
209 | e.key === 'Enter' && handleDatas(limit)} 215 | on:keydown={(e) => e.key === 'Escape' && (search = '') && handleDatas(limit)} /> 216 |
217 |
218 | 219 |
220 | 221 | 222 | 223 | 226 | 227 | {#each config.coloumns as coloumn} 228 | 234 | {:else} 235 | 236 | {/each} 237 | 238 | 244 | 245 | 246 | 247 | {#each datakeys as _, ia} 248 | 249 | 252 | {#each config.coloumns as _, ib} 253 | 258 | {/each} 259 | 273 | 274 | {/each} 275 | 276 |
224 | # 225 | 229 | handleSort(coloumn.toLowerCase(), (sortby = !sortby))}>{coloumn.replace('_', ' ')} 233 | Data tidak ada! 239 | handleSort(false)}>Action 243 |
250 | {pagging + 1 > 1 ? ((nextnumber = pagging * limit), (nextnumber = nextnumber + (ia + 1)), nextnumber) : ia + 1} 251 | 254 | {#each datas2[[ib]] as _, ic} 255 | {ia === ic ? datas2[ib][ia] : ''} 256 | {/each} 257 | 260 | handleAction(config.store, { 263 | name: 'edit', 264 | payload: datakeys[ia], 265 | })}>Edit 266 | handleAction(config.store, { 269 | name: 'delete', 270 | payload: datakeys[ia], 271 | })}>Delete 272 |
277 |
278 | 279 |
280 |
281 | Showing 282 | {pagging + 1 > 1 ? pagging * limit + 1 : 1} 283 | to 284 | {pagging + 1 > 1 ? ((pagging + 1) * limit > rows.length ? rows.length : (pagging + 1) * limit) : limit} 285 | of 286 | {rows.length} 287 | entries 288 |
289 | 290 |
291 |
292 | handlePagging(pagging - 1)}>‹ 296 |
297 | 298 | {#each Array(paggings) as _, i} 299 |
300 | handlePagging(i)}>{i + 1} 304 |
305 | {/each} 306 | 307 |
308 | handlePagging(pagging + 1)}>› 312 |
313 |
314 |
315 |
316 | -------------------------------------------------------------------------------- /src/pages/zero/index.svelte: -------------------------------------------------------------------------------- 1 | 75 | 76 | 85 | 86 | {#if configCustomer.isRender} 87 | 88 | {/if} 89 | separasi 90 | {#if configCity.isRender} 91 | 92 | {/if} 93 | -------------------------------------------------------------------------------- /src/sw.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import { registerRoute, setDefaultHandler, setCatchHandler } from 'workbox-routing'; 4 | import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'; 5 | import { skipWaiting, clientsClaim } from 'workbox-core'; 6 | import { precacheAndRoute, matchPrecache } from 'workbox-precaching'; 7 | import { ExpirationPlugin } from 'workbox-expiration'; 8 | import { RoutifyPlugin, freshCacheData } from '@roxi/routify/workbox-plugin' 9 | 10 | 11 | 12 | /********** 13 | * CONFIG * 14 | **********/ 15 | 16 | const entrypointUrl = '__app.html' // entrypoint 17 | const fallbackImage = '404.svg' 18 | const files = self.__WB_MANIFEST // files matching globDirectory and globPattern in rollup.config.js 19 | 20 | const externalAssetsConfig = () => ({ 21 | cacheName: 'external', 22 | plugins: [ 23 | RoutifyPlugin({ 24 | validFor: 60 // cache is considered fresh for n seconds. 25 | }), 26 | new ExpirationPlugin({ 27 | maxEntries: 50, // last used entries will be purged when we hit this limit 28 | purgeOnQuotaError: true // purge external assets on quota error 29 | })] 30 | }) 31 | 32 | 33 | 34 | 35 | /************** 36 | * INITIALIZE * 37 | **************/ 38 | 39 | /** 40 | * precache all files 41 | * remember to precache __app.html and 404.svg if caching of all files is disabled 42 | */ 43 | precacheAndRoute(files) 44 | 45 | /** precache only fallback files */ 46 | // precacheAndRoute(files.filter(file => 47 | // ['__app.html', '404.svg'] 48 | // .includes(file.url) 49 | // )) 50 | 51 | skipWaiting() // auto update service workers across all tabs when new release is available 52 | clientsClaim() // take control of client without having to wait for refresh 53 | 54 | /** 55 | * manually upgrade service worker by sending a SKIP_WAITING message. 56 | * (remember to disable skipWaiting() above) 57 | */ 58 | // addEventListener('message', event => { if (event.data && event.data.type === 'SKIP_WAITING') skipWaiting(); }); 59 | 60 | 61 | 62 | /********** 63 | * ROUTES * 64 | **********/ 65 | 66 | // serve local pages from the SPA entry point (__app.html) 67 | registerRoute(isLocalPage, matchPrecache(entrypointUrl)) 68 | 69 | // serve local assets from cache first 70 | registerRoute(isLocalAsset, new CacheFirst()) 71 | 72 | // serve external assets from cache if they're fresh 73 | registerRoute(hasFreshCache, new CacheFirst(externalAssetsConfig())) 74 | 75 | // serve external pages and assets 76 | setDefaultHandler(new NetworkFirst(externalAssetsConfig())); 77 | 78 | // serve a fallback for 404s if possible or respond with an error 79 | setCatchHandler(async ({ event }) => { 80 | switch (event.request.destination) { 81 | case 'document': 82 | return await matchPrecache(entrypointUrl) 83 | case 'image': 84 | return await matchPrecache(fallbackImage) 85 | default: 86 | return Response.error(); 87 | } 88 | }) 89 | 90 | 91 | 92 | /********** 93 | * CONDITIONS * 94 | **********/ 95 | 96 | function isLocalAsset({ url, request }) { return url.host === self.location.host && request.destination != 'document' } 97 | function isLocalPage({ url, request }) { return url.host === self.location.host && request.destination === 'document' } 98 | function hasFreshCache(event) { return !!freshCacheData(event) } 99 | 100 | /** Example condition */ 101 | function hasWitheringCache(event) { 102 | const cache = freshCacheData(event) 103 | if (cache) { 104 | const { cachedAt, validFor, validLeft, validUntil } = cache 105 | // return true if half the fresh time has passed 106 | return validFor / 2 > validFor - validLeft 107 | } 108 | } -------------------------------------------------------------------------------- /src/themes/voler/datatable.svelte: -------------------------------------------------------------------------------- 1 | 54 | 55 | 71 | 72 |
73 |
{data.title}
74 |
75 |
76 | Add New 77 | Data 78 |
79 | 80 | 81 | 82 | {#each data.header as d} 83 | 84 | {:else} 85 | 86 | {/each} 87 | 88 | 89 | 90 | 91 | {#each json as d, i} 92 | 93 | 94 | {#each d as v} 95 | 96 | {/each} 97 | 101 | 102 | {:else} 103 | 104 | 105 | 106 | {/each} 107 | 108 |
{d} Data tidak ada! Action
{i + 1} {v} 98 | Edit 99 | Delete 100 |
Data tidak ada!
109 |
110 |
111 | -------------------------------------------------------------------------------- /src/tools/Loading.svelte: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | -------------------------------------------------------------------------------- /src/tools/Spinner.svelte: -------------------------------------------------------------------------------- 1 |
2 | Loading... 3 |
4 | -------------------------------------------------------------------------------- /src/tools/acak.js: -------------------------------------------------------------------------------- 1 | export function acak(array) { 2 | var currentIndex = array.length, temporaryValue, randomIndex; 3 | 4 | // While there remain elements to shuffle... 5 | while (0 !== currentIndex) { 6 | 7 | // Pick a remaining element... 8 | randomIndex = Math.floor(Math.random() * currentIndex); 9 | currentIndex -= 1; 10 | 11 | // And swap it with the current element. 12 | temporaryValue = array[currentIndex]; 13 | array[currentIndex] = array[randomIndex]; 14 | array[randomIndex] = temporaryValue; 15 | } 16 | 17 | return array; 18 | } 19 | -------------------------------------------------------------------------------- /src/tools/atas.js: -------------------------------------------------------------------------------- 1 | export const atas = () => { 2 | window.scrollTo({ 3 | top: 0, 4 | left: 0, 5 | behavior: 'smooth' 6 | }) 7 | } 8 | -------------------------------------------------------------------------------- /src/tools/datatable/columns.js: -------------------------------------------------------------------------------- 1 | import {sortItems} from "./helpers" 2 | 3 | /** 4 | * Columns API 5 | * @param {Object} instance DataTable instance 6 | * @param {Mixed} columns Column index or array of column indexes 7 | */ 8 | export class Columns { 9 | constructor(dt) { 10 | this.dt = dt 11 | return this 12 | } 13 | 14 | /** 15 | * Swap two columns 16 | * @return {Void} 17 | */ 18 | swap(columns) { 19 | if (columns.length && columns.length === 2) { 20 | const cols = [] 21 | 22 | // Get the current column indexes 23 | this.dt.headings.forEach((h, i) => { 24 | cols.push(i) 25 | }) 26 | 27 | const x = columns[0] 28 | const y = columns[1] 29 | const b = cols[y] 30 | cols[y] = cols[x] 31 | cols[x] = b 32 | 33 | this.order(cols) 34 | } 35 | } 36 | 37 | /** 38 | * Reorder the columns 39 | * @return {Array} columns Array of ordered column indexes 40 | */ 41 | order(columns) { 42 | let a 43 | let b 44 | let c 45 | let d 46 | let h 47 | let s 48 | let cell 49 | 50 | const temp = [ 51 | [], 52 | [], 53 | [], 54 | [] 55 | ] 56 | 57 | const dt = this.dt 58 | 59 | // Order the headings 60 | columns.forEach((column, x) => { 61 | h = dt.headings[column] 62 | s = h.getAttribute("data-sortable") !== "false" 63 | a = h.cloneNode(true) 64 | a.originalCellIndex = x 65 | a.sortable = s 66 | 67 | temp[0].push(a) 68 | 69 | if (!dt.hiddenColumns.includes(column)) { 70 | b = h.cloneNode(true) 71 | b.originalCellIndex = x 72 | b.sortable = s 73 | 74 | temp[1].push(b) 75 | } 76 | }) 77 | 78 | // Order the row cells 79 | dt.data.forEach((row, i) => { 80 | c = row.cloneNode(false) 81 | d = row.cloneNode(false) 82 | 83 | c.dataIndex = d.dataIndex = i 84 | 85 | if (row.searchIndex !== null && row.searchIndex !== undefined) { 86 | c.searchIndex = d.searchIndex = row.searchIndex 87 | } 88 | 89 | // Append the cell to the fragment in the correct order 90 | columns.forEach(column => { 91 | cell = row.cells[column].cloneNode(true) 92 | cell.data = row.cells[column].data 93 | c.appendChild(cell) 94 | 95 | if (!dt.hiddenColumns.includes(column)) { 96 | cell = row.cells[column].cloneNode(true) 97 | cell.data = row.cells[column].data 98 | d.appendChild(cell) 99 | } 100 | }) 101 | 102 | temp[2].push(c) 103 | temp[3].push(d) 104 | }) 105 | 106 | dt.headings = temp[0] 107 | dt.activeHeadings = temp[1] 108 | 109 | dt.data = temp[2] 110 | dt.activeRows = temp[3] 111 | 112 | // Update 113 | dt.update() 114 | } 115 | 116 | /** 117 | * Hide columns 118 | * @return {Void} 119 | */ 120 | hide(columns) { 121 | if (columns.length) { 122 | const dt = this.dt 123 | 124 | columns.forEach(column => { 125 | if (!dt.hiddenColumns.includes(column)) { 126 | dt.hiddenColumns.push(column) 127 | } 128 | }) 129 | 130 | this.rebuild() 131 | } 132 | } 133 | 134 | /** 135 | * Show columns 136 | * @return {Void} 137 | */ 138 | show(columns) { 139 | if (columns.length) { 140 | let index 141 | const dt = this.dt 142 | 143 | columns.forEach(column => { 144 | index = dt.hiddenColumns.indexOf(column) 145 | if (index > -1) { 146 | dt.hiddenColumns.splice(index, 1) 147 | } 148 | }) 149 | 150 | this.rebuild() 151 | } 152 | } 153 | 154 | /** 155 | * Check column(s) visibility 156 | * @return {Boolean} 157 | */ 158 | visible(columns) { 159 | let cols 160 | const dt = this.dt 161 | 162 | columns = columns || dt.headings.map(th => th.originalCellIndex) 163 | 164 | if (!isNaN(columns)) { 165 | cols = !dt.hiddenColumns.includes(columns) 166 | } else if (Array.isArray(columns)) { 167 | cols = [] 168 | columns.forEach(column => { 169 | cols.push(!dt.hiddenColumns.includes(column)) 170 | }) 171 | } 172 | 173 | return cols 174 | } 175 | 176 | /** 177 | * Add a new column 178 | * @param {Object} data 179 | */ 180 | add(data) { 181 | let td 182 | const th = document.createElement("th") 183 | 184 | if (!this.dt.headings.length) { 185 | this.dt.insert({ 186 | headings: [data.heading], 187 | data: data.data.map(i => [i]) 188 | }) 189 | this.rebuild() 190 | return 191 | } 192 | 193 | if (!this.dt.hiddenHeader) { 194 | if (data.heading.nodeName) { 195 | th.appendChild(data.heading) 196 | } else { 197 | th.innerHTML = data.heading 198 | } 199 | } else { 200 | th.innerHTML = "" 201 | } 202 | 203 | this.dt.headings.push(th) 204 | 205 | this.dt.data.forEach((row, i) => { 206 | if (data.data[i]) { 207 | td = document.createElement("td") 208 | 209 | if (data.data[i].nodeName) { 210 | td.appendChild(data.data[i]) 211 | } else { 212 | td.innerHTML = data.data[i] 213 | } 214 | 215 | td.data = td.innerHTML 216 | 217 | if (data.render) { 218 | td.innerHTML = data.render.call(this, td.data, td, row) 219 | } 220 | 221 | row.appendChild(td) 222 | } 223 | }) 224 | 225 | if (data.type) { 226 | th.setAttribute("data-type", data.type) 227 | } 228 | if (data.format) { 229 | th.setAttribute("data-format", data.format) 230 | } 231 | 232 | if (data.hasOwnProperty("sortable")) { 233 | th.sortable = data.sortable 234 | th.setAttribute("data-sortable", data.sortable === true ? "true" : "false") 235 | } 236 | 237 | this.rebuild() 238 | 239 | this.dt.renderHeader() 240 | } 241 | 242 | /** 243 | * Remove column(s) 244 | * @param {Array|Number} select 245 | * @return {Void} 246 | */ 247 | remove(select) { 248 | if (Array.isArray(select)) { 249 | // Remove in reverse otherwise the indexes will be incorrect 250 | select.sort((a, b) => b - a) 251 | select.forEach(column => this.remove(column)) 252 | } else { 253 | this.dt.headings.splice(select, 1) 254 | 255 | this.dt.data.forEach(row => { 256 | row.removeChild(row.cells[select]) 257 | }) 258 | } 259 | 260 | this.rebuild() 261 | } 262 | 263 | /** 264 | * Filter by column 265 | * @param {int} column - The column no. 266 | * @param {string} dir - asc or desc 267 | * @filter {array} filter - optional parameter with a list of strings 268 | * @return {void} 269 | */ 270 | filter(column, dir, init, terms) { 271 | const dt = this.dt 272 | 273 | // Creates a internal state that manages filters if there are none 274 | if ( !dt.filterState ) { 275 | dt.filterState = { 276 | originalData: dt.data 277 | } 278 | } 279 | 280 | // If that column is was not filtered yet, we need to create its state 281 | if ( !dt.filterState[column] ) { 282 | 283 | // append a filter that selects all rows, 'resetting' the filter 284 | const filters = [...terms, () => true] 285 | 286 | dt.filterState[column] = ( 287 | function() { 288 | let i = 0; 289 | return () => filters[i++ % (filters.length)] 290 | }() 291 | ) 292 | } 293 | 294 | // Apply the filter and rebuild table 295 | const rowFilter = dt.filterState[column]() // fetches next filter 296 | const filteredRows = Array.from(dt.filterState.originalData).filter(tr => { 297 | const cell = tr.cells[column] 298 | const content = cell.hasAttribute('data-content') ? cell.getAttribute('data-content') : cell.innerText 299 | 300 | // If the filter is a function, call it, if it is a string, compare it 301 | return (typeof rowFilter) === 'function' ? rowFilter(content) : content === rowFilter; 302 | }) 303 | 304 | dt.data = filteredRows 305 | this.rebuild() 306 | dt.update() 307 | if (!init) { 308 | dt.emit("datatable.sort", column, dir) 309 | } 310 | } 311 | 312 | /** 313 | * Sort by column 314 | * @param {int} column - The column no. 315 | * @param {string} dir - asc or desc 316 | * @return {void} 317 | */ 318 | sort(column, dir, init) { 319 | const dt = this.dt 320 | 321 | // Check column is present 322 | if (dt.hasHeadings && (column < 0 || column > dt.headings.length)) { 323 | return false 324 | } 325 | 326 | //If there is a filter for this column, apply it instead of sorting 327 | const filterTerms = dt.options.filters && 328 | dt.options.filters[dt.headings[column].textContent] 329 | if ( filterTerms && filterTerms.length !== 0 ) { 330 | this.filter(column, dir, init, filterTerms) 331 | return; 332 | } 333 | 334 | dt.sorting = true 335 | 336 | if (!init) { 337 | dt.emit("datatable.sorting", column, dir) 338 | } 339 | 340 | let rows = dt.data 341 | const alpha = [] 342 | const numeric = [] 343 | let a = 0 344 | let n = 0 345 | const th = dt.headings[column] 346 | 347 | const waitFor = [] 348 | 349 | // Check for date format 350 | if (th.getAttribute("data-type") === "date") { 351 | let format = false 352 | const formatted = th.hasAttribute("data-format") 353 | 354 | if (formatted) { 355 | format = th.getAttribute("data-format") 356 | } 357 | waitFor.push(import("./date").then(({parseDate}) => date => parseDate(date, format))) 358 | } 359 | 360 | Promise.all(waitFor).then(importedFunctions => { 361 | const parseFunction = importedFunctions[0] // only defined if date 362 | Array.from(rows).forEach(tr => { 363 | const cell = tr.cells[column] 364 | const content = cell.hasAttribute('data-content') ? cell.getAttribute('data-content') : cell.innerText 365 | let num 366 | if (parseFunction) { 367 | num = parseFunction(content) 368 | } else if (typeof content==="string") { 369 | num = content.replace(/(\$|,|\s|%)/g, "") 370 | } else { 371 | num = content 372 | } 373 | 374 | if (parseFloat(num) == num) { 375 | numeric[n++] = { 376 | value: Number(num), 377 | row: tr 378 | } 379 | } else { 380 | alpha[a++] = { 381 | value: typeof content==="string" ? content.toLowerCase() : content, 382 | row: tr 383 | } 384 | } 385 | }) 386 | 387 | /* Sort according to direction (ascending or descending) */ 388 | if (!dir) { 389 | if (th.classList.contains("asc")) { 390 | dir = "desc" 391 | } else { 392 | dir = "asc" 393 | } 394 | } 395 | let top 396 | let btm 397 | if (dir == "desc") { 398 | top = sortItems(alpha, -1) 399 | btm = sortItems(numeric, -1) 400 | th.classList.remove("asc") 401 | th.classList.add("desc") 402 | } else { 403 | top = sortItems(numeric, 1) 404 | btm = sortItems(alpha, 1) 405 | th.classList.remove("desc") 406 | th.classList.add("asc") 407 | } 408 | 409 | /* Clear asc/desc class names from the last sorted column's th if it isn't the same as the one that was just clicked */ 410 | if (dt.lastTh && th != dt.lastTh) { 411 | dt.lastTh.classList.remove("desc") 412 | dt.lastTh.classList.remove("asc") 413 | } 414 | 415 | dt.lastTh = th 416 | 417 | /* Reorder the table */ 418 | rows = top.concat(btm) 419 | 420 | dt.data = [] 421 | const indexes = [] 422 | 423 | rows.forEach((v, i) => { 424 | dt.data.push(v.row) 425 | 426 | if (v.row.searchIndex !== null && v.row.searchIndex !== undefined) { 427 | indexes.push(i) 428 | } 429 | }) 430 | 431 | dt.searchData = indexes 432 | 433 | this.rebuild() 434 | 435 | dt.update() 436 | 437 | if (!init) { 438 | dt.emit("datatable.sort", column, dir) 439 | } 440 | }) 441 | } 442 | 443 | /** 444 | * Rebuild the columns 445 | * @return {Void} 446 | */ 447 | rebuild() { 448 | let a 449 | let b 450 | let c 451 | let d 452 | const dt = this.dt 453 | const temp = [] 454 | 455 | dt.activeRows = [] 456 | dt.activeHeadings = [] 457 | 458 | dt.headings.forEach((th, i) => { 459 | th.originalCellIndex = i 460 | th.sortable = th.getAttribute("data-sortable") !== "false" 461 | if (!dt.hiddenColumns.includes(i)) { 462 | dt.activeHeadings.push(th) 463 | } 464 | }) 465 | 466 | // Loop over the rows and reorder the cells 467 | dt.data.forEach((row, i) => { 468 | a = row.cloneNode(false) 469 | b = row.cloneNode(false) 470 | 471 | a.dataIndex = b.dataIndex = i 472 | 473 | if (row.searchIndex !== null && row.searchIndex !== undefined) { 474 | a.searchIndex = b.searchIndex = row.searchIndex 475 | } 476 | 477 | // Append the cell to the fragment in the correct order 478 | Array.from(row.cells).forEach(cell => { 479 | c = cell.cloneNode(true) 480 | c.data = cell.data 481 | a.appendChild(c) 482 | 483 | if (!dt.hiddenColumns.includes(c.cellIndex)) { 484 | d = c.cloneNode(true) 485 | d.data = c.data 486 | b.appendChild(d) 487 | } 488 | }) 489 | 490 | // Append the fragment with the ordered cells 491 | temp.push(a) 492 | dt.activeRows.push(b) 493 | }) 494 | 495 | dt.data = temp 496 | 497 | dt.update() 498 | } 499 | } 500 | -------------------------------------------------------------------------------- /src/tools/datatable/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Default configuration 3 | * @typ {Object} 4 | */ 5 | export const defaultConfig = { 6 | sortable: true, 7 | searchable: true, 8 | 9 | // Pagination 10 | paging: true, 11 | perPage: 10, 12 | perPageSelect: [5, 10, 15, 20, 25], 13 | nextPrev: true, 14 | firstLast: false, 15 | prevText: "‹", 16 | nextText: "›", 17 | firstText: "«", 18 | lastText: "»", 19 | ellipsisText: "…", 20 | ascText: "▴", 21 | descText: "▾", 22 | truncatePager: true, 23 | pagerDelta: 2, 24 | 25 | scrollY: "", 26 | 27 | fixedColumns: true, 28 | fixedHeight: false, 29 | 30 | header: true, 31 | footer: false, 32 | 33 | // Customise the display text 34 | labels: { 35 | placeholder: "Search...", // The search input placeholder 36 | perPage: "{select} entries per page", // per-page dropdown label 37 | noRows: "No entries found", // Message shown when there are no search results 38 | info: "Showing {start} to {end} of {rows} entries" // 39 | }, 40 | 41 | // Customise the layout 42 | layout: { 43 | top: "{select}{search}", 44 | bottom: "{info}{pager}" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/tools/datatable/datatable.js: -------------------------------------------------------------------------------- 1 | import { Rows } from "./rows" 2 | import { Columns } from "./columns" 3 | import { dataToTable } from "./table" 4 | import { defaultConfig } from "./config" 5 | import { 6 | isObject, 7 | isJson, 8 | createElement, 9 | flush, 10 | button, 11 | truncate 12 | } from "./helpers" 13 | 14 | 15 | export class DataTable { 16 | constructor(table, options = {}) { 17 | this.initialized = false 18 | 19 | // user options 20 | this.options = { 21 | ...defaultConfig, 22 | ...options, 23 | layout: { 24 | ...defaultConfig.layout, 25 | ...options.layout 26 | }, 27 | labels: { 28 | ...defaultConfig.labels, 29 | ...options.labels 30 | } 31 | } 32 | 33 | if (typeof table === "string") { 34 | table = document.querySelector(table) 35 | } 36 | 37 | this.initialLayout = table.innerHTML 38 | this.initialSortable = this.options.sortable 39 | 40 | // Disable manual sorting if no header is present (#4) 41 | if (!this.options.header) { 42 | this.options.sortable = false 43 | } 44 | 45 | if (table.tHead === null) { 46 | if (!this.options.data || 47 | (this.options.data && !this.options.data.headings) 48 | ) { 49 | this.options.sortable = false 50 | } 51 | } 52 | 53 | if (table.tBodies.length && !table.tBodies[0].rows.length) { 54 | if (this.options.data) { 55 | if (!this.options.data.data) { 56 | throw new Error( 57 | "You seem to be using the data option, but you've not defined any rows." 58 | ) 59 | } 60 | } 61 | } 62 | 63 | this.table = table 64 | 65 | this.init() 66 | } 67 | 68 | /** 69 | * Add custom property or method to extend DataTable 70 | * @param {String} prop - Method name or property 71 | * @param {Mixed} val - Function or property value 72 | * @return {Void} 73 | */ 74 | static extend(prop, val) { 75 | if (typeof val === "function") { 76 | DataTable.prototype[prop] = val 77 | } else { 78 | DataTable[prop] = val 79 | } 80 | } 81 | 82 | /** 83 | * Initialize the instance 84 | * @param {Object} options 85 | * @return {Void} 86 | */ 87 | init(options) { 88 | if (this.initialized || this.table.classList.contains("dataTable-table")) { 89 | return false 90 | } 91 | 92 | Object.assign(this.options, options || {}) 93 | 94 | this.currentPage = 1 95 | this.onFirstPage = true 96 | 97 | this.hiddenColumns = [] 98 | this.columnRenderers = [] 99 | this.selectedColumns = [] 100 | 101 | this.render() 102 | 103 | setTimeout(() => { 104 | this.emit("datatable.init") 105 | this.initialized = true 106 | 107 | if (this.options.plugins) { 108 | Object.entries(this.options.plugins).forEach(([plugin, options]) => { 109 | if (this[plugin] && typeof this[plugin] === "function") { 110 | this[plugin] = this[plugin](options, { createElement }) 111 | 112 | // Init plugin 113 | if (options.enabled && this[plugin].init && typeof this[plugin].init === "function") { 114 | this[plugin].init() 115 | } 116 | } 117 | }) 118 | } 119 | }, 10) 120 | } 121 | 122 | /** 123 | * Render the instance 124 | * @param {String} type 125 | * @return {Void} 126 | */ 127 | render(type) { 128 | if (type) { 129 | switch (type) { 130 | case "page": 131 | this.renderPage() 132 | break 133 | case "pager": 134 | this.renderPager() 135 | break 136 | case "header": 137 | this.renderHeader() 138 | break 139 | } 140 | 141 | return false 142 | } 143 | 144 | const options = this.options 145 | let template = "" 146 | 147 | // Convert data to HTML 148 | if (options.data) { 149 | dataToTable.call(this) 150 | } 151 | 152 | if (options.ajax) { 153 | const ajax = options.ajax 154 | const xhr = new XMLHttpRequest() 155 | 156 | const xhrProgress = e => { 157 | this.emit("datatable.ajax.progress", e, xhr) 158 | } 159 | 160 | const xhrLoad = e => { 161 | if (xhr.readyState === 4) { 162 | this.emit("datatable.ajax.loaded", e, xhr) 163 | 164 | if (xhr.status === 200) { 165 | const obj = {} 166 | obj.data = ajax.load ? ajax.load.call(this, xhr) : xhr.responseText 167 | 168 | obj.type = "json" 169 | 170 | if (ajax.content && ajax.content.type) { 171 | obj.type = ajax.content.type 172 | 173 | Object.assign(obj, ajax.content) 174 | } 175 | 176 | this.import(obj) 177 | 178 | this.setColumns(true) 179 | 180 | this.emit("datatable.ajax.success", e, xhr) 181 | } else { 182 | this.emit("datatable.ajax.error", e, xhr) 183 | } 184 | } 185 | } 186 | 187 | const xhrFailed = e => { 188 | this.emit("datatable.ajax.error", e, xhr) 189 | } 190 | 191 | const xhrCancelled = e => { 192 | this.emit("datatable.ajax.abort", e, xhr) 193 | } 194 | 195 | xhr.addEventListener("progress", xhrProgress, false) 196 | xhr.addEventListener("load", xhrLoad, false) 197 | xhr.addEventListener("error", xhrFailed, false) 198 | xhr.addEventListener("abort", xhrCancelled, false) 199 | 200 | this.emit("datatable.ajax.loading", xhr) 201 | 202 | xhr.open("GET", typeof ajax === "string" ? options.ajax : options.ajax.url) 203 | xhr.send() 204 | } 205 | 206 | // Store references 207 | this.body = this.table.tBodies[0] 208 | this.head = this.table.tHead 209 | this.foot = this.table.tFoot 210 | 211 | if (!this.body) { 212 | this.body = createElement("tbody") 213 | 214 | this.table.appendChild(this.body) 215 | } 216 | 217 | this.hasRows = this.body.rows.length > 0 218 | 219 | // Make a tHead if there isn't one (fixes #8) 220 | if (!this.head) { 221 | const h = createElement("thead") 222 | const t = createElement("tr") 223 | 224 | if (this.hasRows) { 225 | Array.from(this.body.rows[0].cells).forEach(() => { 226 | t.appendChild(createElement("th")) 227 | }) 228 | 229 | h.appendChild(t) 230 | } 231 | 232 | this.head = h 233 | 234 | this.table.insertBefore(this.head, this.body) 235 | 236 | this.hiddenHeader = !options.ajax 237 | } 238 | 239 | this.headings = [] 240 | this.hasHeadings = this.head.rows.length > 0 241 | 242 | if (this.hasHeadings) { 243 | this.header = this.head.rows[0] 244 | this.headings = [].slice.call(this.header.cells) 245 | } 246 | 247 | // Header 248 | if (!options.header) { 249 | if (this.head) { 250 | this.table.removeChild(this.table.tHead) 251 | } 252 | } 253 | 254 | // Footer 255 | if (options.footer) { 256 | if (this.head && !this.foot) { 257 | this.foot = createElement("tfoot", { 258 | html: this.head.innerHTML 259 | }) 260 | this.table.appendChild(this.foot) 261 | } 262 | } else { 263 | if (this.foot) { 264 | this.table.removeChild(this.table.tFoot) 265 | } 266 | } 267 | 268 | // Build 269 | this.wrapper = createElement("div", { 270 | class: "dataTable-wrapper dataTable-loading" 271 | }) 272 | 273 | // Template for custom layouts 274 | template += "
" 275 | template += options.layout.top 276 | template += "
" 277 | if (options.scrollY.length) { 278 | template += `
` 279 | } else { 280 | template += "
" 281 | } 282 | template += "
" 283 | template += options.layout.bottom 284 | template += "
" 285 | 286 | // Info placement 287 | template = template.replace("{info}", options.paging ? "
" : "") 288 | 289 | // Per Page Select 290 | if (options.paging && options.perPageSelect) { 291 | let wrap = "
" 292 | wrap += options.labels.perPage 293 | wrap += "
" 294 | 295 | // Create the select 296 | const select = createElement("select", { 297 | class: "dataTable-selector" 298 | }) 299 | 300 | // Create the options 301 | options.perPageSelect.forEach(val => { 302 | const selected = val === options.perPage 303 | const option = new Option(val, val, selected, selected) 304 | select.add(option) 305 | }) 306 | 307 | // Custom label 308 | wrap = wrap.replace("{select}", select.outerHTML) 309 | 310 | // Selector placement 311 | template = template.replace("{select}", wrap) 312 | } else { 313 | template = template.replace("{select}", "") 314 | } 315 | 316 | // Searchable 317 | if (options.searchable) { 318 | const form = 319 | `
` 320 | 321 | // Search input placement 322 | template = template.replace("{search}", form) 323 | } else { 324 | template = template.replace("{search}", "") 325 | } 326 | 327 | if (this.hasHeadings) { 328 | // Sortable 329 | this.render("header") 330 | } 331 | 332 | // Add table class 333 | this.table.classList.add("dataTable-table") 334 | 335 | // Paginator 336 | const w = createElement("div", { 337 | class: "dataTable-pagination" 338 | }) 339 | const paginator = createElement("ul") 340 | w.appendChild(paginator) 341 | 342 | // Pager(s) placement 343 | template = template.replace(/\{pager\}/g, w.outerHTML) 344 | this.wrapper.innerHTML = template 345 | 346 | this.container = this.wrapper.querySelector(".dataTable-container") 347 | 348 | this.pagers = this.wrapper.querySelectorAll(".dataTable-pagination") 349 | 350 | this.label = this.wrapper.querySelector(".dataTable-info") 351 | 352 | // Insert in to DOM tree 353 | this.table.parentNode.replaceChild(this.wrapper, this.table) 354 | this.container.appendChild(this.table) 355 | 356 | // Store the table dimensions 357 | this.rect = this.table.getBoundingClientRect() 358 | 359 | // Convert rows to array for processing 360 | this.data = Array.from(this.body.rows) 361 | this.activeRows = this.data.slice() 362 | this.activeHeadings = this.headings.slice() 363 | 364 | // Update 365 | this.update() 366 | 367 | if (!options.ajax) { 368 | this.setColumns() 369 | } 370 | 371 | // Fix height 372 | this.fixHeight() 373 | 374 | // Fix columns 375 | this.fixColumns() 376 | 377 | // Class names 378 | if (!options.header) { 379 | this.wrapper.classList.add("no-header") 380 | } 381 | 382 | if (!options.footer) { 383 | this.wrapper.classList.add("no-footer") 384 | } 385 | 386 | if (options.sortable) { 387 | this.wrapper.classList.add("sortable") 388 | } 389 | 390 | if (options.searchable) { 391 | this.wrapper.classList.add("searchable") 392 | } 393 | 394 | if (options.fixedHeight) { 395 | this.wrapper.classList.add("fixed-height") 396 | } 397 | 398 | if (options.fixedColumns) { 399 | this.wrapper.classList.add("fixed-columns") 400 | } 401 | 402 | this.bindEvents() 403 | } 404 | 405 | /** 406 | * Render the page 407 | * @return {Void} 408 | */ 409 | renderPage() { 410 | if (this.hasHeadings) { 411 | flush(this.header) 412 | 413 | this.activeHeadings.forEach(th => this.header.appendChild(th)) 414 | } 415 | 416 | 417 | if (this.hasRows && this.totalPages) { 418 | if (this.currentPage > this.totalPages) { 419 | this.currentPage = 1 420 | } 421 | 422 | // Use a fragment to limit touching the DOM 423 | const index = this.currentPage - 1 424 | 425 | const frag = document.createDocumentFragment() 426 | this.pages[index].forEach(row => frag.appendChild(this.rows().render(row))) 427 | 428 | this.clear(frag) 429 | 430 | this.onFirstPage = this.currentPage === 1 431 | this.onLastPage = this.currentPage === this.lastPage 432 | } else { 433 | this.setMessage(this.options.labels.noRows) 434 | } 435 | 436 | // Update the info 437 | let current = 0 438 | 439 | let f = 0 440 | let t = 0 441 | let items 442 | 443 | if (this.totalPages) { 444 | current = this.currentPage - 1 445 | f = current * this.options.perPage 446 | t = f + this.pages[current].length 447 | f = f + 1 448 | items = this.searching ? this.searchData.length : this.data.length 449 | } 450 | 451 | if (this.label && this.options.labels.info.length) { 452 | // CUSTOM LABELS 453 | const string = this.options.labels.info 454 | .replace("{start}", f) 455 | .replace("{end}", t) 456 | .replace("{page}", this.currentPage) 457 | .replace("{pages}", this.totalPages) 458 | .replace("{rows}", items) 459 | 460 | this.label.innerHTML = items ? string : "" 461 | } 462 | 463 | if (this.currentPage == 1) { 464 | this.fixHeight() 465 | } 466 | } 467 | 468 | /** 469 | * Render the pager(s) 470 | * @return {Void} 471 | */ 472 | renderPager() { 473 | flush(this.pagers) 474 | 475 | if (this.totalPages > 1) { 476 | const c = "pager" 477 | const frag = document.createDocumentFragment() 478 | const prev = this.onFirstPage ? 1 : this.currentPage - 1 479 | const next = this.onLastPage ? this.totalPages : this.currentPage + 1 480 | 481 | // first button 482 | if (this.options.firstLast) { 483 | frag.appendChild(button(c, 1, this.options.firstText)) 484 | } 485 | 486 | // prev button 487 | if (this.options.nextPrev) { 488 | frag.appendChild(button(c, prev, this.options.prevText)) 489 | } 490 | 491 | let pager = this.links 492 | 493 | // truncate the links 494 | if (this.options.truncatePager) { 495 | pager = truncate( 496 | this.links, 497 | this.currentPage, 498 | this.pages.length, 499 | this.options.pagerDelta, 500 | this.options.ellipsisText 501 | ) 502 | } 503 | 504 | // active page link 505 | this.links[this.currentPage - 1].classList.add("active") 506 | 507 | // append the links 508 | pager.forEach(p => { 509 | p.classList.remove("active") 510 | frag.appendChild(p) 511 | }) 512 | 513 | this.links[this.currentPage - 1].classList.add("active") 514 | 515 | // next button 516 | if (this.options.nextPrev) { 517 | frag.appendChild(button(c, next, this.options.nextText)) 518 | } 519 | 520 | // first button 521 | if (this.options.firstLast) { 522 | frag.appendChild(button(c, this.totalPages, this.options.lastText)) 523 | } 524 | 525 | // We may have more than one pager 526 | this.pagers.forEach(pager => { 527 | pager.appendChild(frag.cloneNode(true)) 528 | }) 529 | } 530 | } 531 | 532 | /** 533 | * Render the header 534 | * @return {Void} 535 | */ 536 | renderHeader() { 537 | this.labels = [] 538 | 539 | if (this.headings && this.headings.length) { 540 | this.headings.forEach((th, i) => { 541 | 542 | this.labels[i] = th.textContent 543 | 544 | if (th.firstElementChild && th.firstElementChild.classList.contains("dataTable-sorter")) { 545 | th.innerHTML = th.firstElementChild.innerHTML 546 | } 547 | 548 | th.sortable = th.getAttribute("data-sortable") !== "false" 549 | 550 | th.originalCellIndex = i 551 | if (this.options.sortable && th.sortable) { 552 | const link = createElement("a", { 553 | href: "#", 554 | class: "dataTable-sorter", 555 | html: th.innerHTML 556 | }) 557 | 558 | th.innerHTML = "" 559 | th.setAttribute("data-sortable", "") 560 | th.appendChild(link) 561 | } 562 | }) 563 | } 564 | 565 | this.fixColumns() 566 | } 567 | 568 | /** 569 | * Bind event listeners 570 | * @return {[type]} [description] 571 | */ 572 | bindEvents() { 573 | const options = this.options 574 | // Per page selector 575 | if (options.perPageSelect) { 576 | const selector = this.wrapper.querySelector(".dataTable-selector") 577 | if (selector) { 578 | // Change per page 579 | selector.addEventListener("change", () => { 580 | options.perPage = parseInt(selector.value, 10) 581 | this.update() 582 | 583 | this.fixHeight() 584 | 585 | this.emit("datatable.perpage", options.perPage) 586 | }, false) 587 | } 588 | } 589 | 590 | // Search input 591 | if (options.searchable) { 592 | this.input = this.wrapper.querySelector(".dataTable-input") 593 | if (this.input) { 594 | this.input.addEventListener("keyup", () => this.search(this.input.value), false) 595 | } 596 | } 597 | 598 | // Pager(s) / sorting 599 | this.wrapper.addEventListener("click", e => { 600 | const t = e.target.closest('a') 601 | // console.log(t); 602 | if (t != null) { 603 | if (t.nodeName.toLowerCase() === "a") { 604 | if (t.hasAttribute("data-page")) { 605 | this.page(t.getAttribute("data-page")) 606 | e.preventDefault() 607 | } else if ( 608 | options.sortable && 609 | t.classList.contains("dataTable-sorter") && 610 | t.parentNode.getAttribute("data-sortable") != "false" 611 | ) { 612 | this.columns().sort(this.headings.indexOf(t.parentNode)) 613 | e.preventDefault() 614 | } 615 | } 616 | } 617 | }, false) 618 | 619 | window.addEventListener("resize", () => { 620 | this.rect = this.container.getBoundingClientRect() 621 | this.fixColumns() 622 | }) 623 | } 624 | 625 | /** 626 | * Set up columns 627 | * @return {[type]} [description] 628 | */ 629 | setColumns(ajax) { 630 | 631 | if (!ajax) { 632 | this.data.forEach(row => { 633 | Array.from(row.cells).forEach(cell => { 634 | cell.data = cell.innerHTML 635 | }) 636 | }) 637 | } 638 | 639 | // Check for the columns option 640 | if (this.options.columns && this.headings.length) { 641 | 642 | this.options.columns.forEach(data => { 643 | 644 | // convert single column selection to array 645 | if (!Array.isArray(data.select)) { 646 | data.select = [data.select] 647 | } 648 | 649 | if (data.hasOwnProperty("render") && typeof data.render === "function") { 650 | this.selectedColumns = this.selectedColumns.concat(data.select) 651 | 652 | this.columnRenderers.push({ 653 | columns: data.select, 654 | renderer: data.render 655 | }) 656 | } 657 | 658 | // Add the data attributes to the th elements 659 | data.select.forEach(column => { 660 | const th = this.headings[column] 661 | if (data.type) { 662 | th.setAttribute("data-type", data.type) 663 | } 664 | if (data.format) { 665 | th.setAttribute("data-format", data.format) 666 | } 667 | if (data.hasOwnProperty("sortable")) { 668 | th.setAttribute("data-sortable", data.sortable) 669 | } 670 | 671 | if (data.hasOwnProperty("hidden")) { 672 | if (data.hidden !== false) { 673 | this.columns().hide([column]) 674 | } 675 | } 676 | 677 | if (data.hasOwnProperty("sort") && data.select.length === 1) { 678 | this.columns().sort(data.select[0], data.sort, true) 679 | } 680 | }) 681 | }) 682 | } 683 | 684 | if (this.hasRows) { 685 | this.data.forEach((row, i) => { 686 | row.dataIndex = i 687 | Array.from(row.cells).forEach(cell => { 688 | cell.data = cell.innerHTML 689 | }) 690 | }) 691 | 692 | if (this.selectedColumns.length) { 693 | this.data.forEach(row => { 694 | Array.from(row.cells).forEach((cell, i) => { 695 | if (this.selectedColumns.includes(i)) { 696 | this.columnRenderers.forEach(options => { 697 | if (options.columns.includes(i)) { 698 | cell.innerHTML = options.renderer.call(this, cell.data, cell, row) 699 | } 700 | }) 701 | } 702 | }) 703 | }) 704 | } 705 | 706 | this.columns().rebuild() 707 | } 708 | 709 | this.render("header") 710 | } 711 | 712 | /** 713 | * Destroy the instance 714 | * @return {void} 715 | */ 716 | destroy() { 717 | this.table.innerHTML = this.initialLayout 718 | 719 | // Remove the className 720 | this.table.classList.remove("dataTable-table") 721 | 722 | // Remove the containers 723 | this.wrapper.parentNode.replaceChild(this.table, this.wrapper) 724 | 725 | this.initialized = false 726 | } 727 | 728 | /** 729 | * Update the instance 730 | * @return {Void} 731 | */ 732 | update() { 733 | this.wrapper.classList.remove("dataTable-empty") 734 | 735 | this.paginate(this) 736 | this.render("page") 737 | 738 | this.links = [] 739 | 740 | let i = this.pages.length 741 | while (i--) { 742 | const num = i + 1 743 | this.links[i] = button(i === 0 ? "active" : "", num, num) 744 | } 745 | 746 | this.sorting = false 747 | 748 | this.render("pager") 749 | 750 | this.rows().update() 751 | 752 | this.emit("datatable.update") 753 | } 754 | 755 | /** 756 | * Sort rows into pages 757 | * @return {Number} 758 | */ 759 | paginate() { 760 | const perPage = this.options.perPage 761 | let rows = this.activeRows 762 | 763 | if (this.searching) { 764 | rows = [] 765 | 766 | this.searchData.forEach(index => rows.push(this.activeRows[index])) 767 | } 768 | 769 | if (this.options.paging) { 770 | // Check for hidden columns 771 | this.pages = rows 772 | .map((tr, i) => i % perPage === 0 ? rows.slice(i, i + perPage) : null) 773 | .filter(page => page) 774 | } else { 775 | this.pages = [rows] 776 | } 777 | 778 | this.totalPages = this.lastPage = this.pages.length 779 | 780 | return this.totalPages 781 | } 782 | 783 | /** 784 | * Fix column widths 785 | * @return {Void} 786 | */ 787 | fixColumns() { 788 | 789 | if ((this.options.scrollY.length || this.options.fixedColumns) && this.activeHeadings && this.activeHeadings.length) { 790 | let cells 791 | let hd = false 792 | this.columnWidths = [] 793 | 794 | // If we have headings we need only set the widths on them 795 | // otherwise we need a temp header and the widths need applying to all cells 796 | if (this.table.tHead) { 797 | 798 | if (this.options.scrollY.length) { 799 | hd = createElement("thead") 800 | hd.appendChild(createElement("tr")) 801 | hd.style.height = '0px' 802 | if (this.headerTable) { 803 | // move real header back into place 804 | this.table.tHead = this.headerTable.tHead 805 | } 806 | } 807 | 808 | // Reset widths 809 | this.activeHeadings.forEach(cell => { 810 | cell.style.width = "" 811 | }) 812 | 813 | this.activeHeadings.forEach((cell, i) => { 814 | const ow = cell.offsetWidth 815 | const w = ow / this.rect.width * 100 816 | cell.style.width = `${w}%` 817 | this.columnWidths[i] = ow 818 | if (this.options.scrollY.length) { 819 | const th = createElement("th") 820 | hd.firstElementChild.appendChild(th) 821 | th.style.width = `${w}%` 822 | th.style.paddingTop = "0" 823 | th.style.paddingBottom = "0" 824 | th.style.border = "0" 825 | } 826 | }) 827 | 828 | if (this.options.scrollY.length) { 829 | const container = this.table.parentElement 830 | if (!this.headerTable) { 831 | this.headerTable = createElement("table", { 832 | class: "dataTable-table" 833 | }) 834 | const headercontainer = createElement("div", { 835 | class: "dataTable-headercontainer" 836 | }) 837 | headercontainer.appendChild(this.headerTable) 838 | container.parentElement.insertBefore(headercontainer, container) 839 | } 840 | const thd = this.table.tHead 841 | this.table.replaceChild(hd, thd) 842 | this.headerTable.tHead = thd 843 | 844 | // Compensate for scrollbars. 845 | this.headerTable.parentElement.style.paddingRight = `${this.headerTable.clientWidth - 846 | this.table.clientWidth + 847 | parseInt( 848 | this.headerTable.parentElement.style.paddingRight || 849 | '0', 850 | 10 851 | ) 852 | }px` 853 | 854 | if (container.scrollHeight > container.clientHeight) { 855 | // scrollbars on one page means scrollbars on all pages. 856 | container.style.overflowY = 'scroll' 857 | } 858 | } 859 | 860 | } else { 861 | cells = [] 862 | 863 | // Make temperary headings 864 | hd = createElement("thead") 865 | const r = createElement("tr") 866 | Array.from(this.table.tBodies[0].rows[0].cells).forEach(() => { 867 | const th = createElement("th") 868 | r.appendChild(th) 869 | cells.push(th) 870 | }) 871 | 872 | hd.appendChild(r) 873 | this.table.insertBefore(hd, this.body) 874 | 875 | const widths = [] 876 | cells.forEach((cell, i) => { 877 | const ow = cell.offsetWidth 878 | const w = ow / this.rect.width * 100 879 | widths.push(w) 880 | this.columnWidths[i] = ow 881 | }) 882 | 883 | this.data.forEach(row => { 884 | Array.from(row.cells).forEach((cell, i) => { 885 | if (this.columns(cell.cellIndex).visible()) 886 | cell.style.width = `${widths[i]}%` 887 | }) 888 | }) 889 | 890 | // Discard the temp header 891 | this.table.removeChild(hd) 892 | } 893 | } 894 | } 895 | 896 | /** 897 | * Fix the container height 898 | * @return {Void} 899 | */ 900 | fixHeight() { 901 | if (this.options.fixedHeight) { 902 | this.container.style.height = null 903 | this.rect = this.container.getBoundingClientRect() 904 | this.container.style.height = `${this.rect.height}px` 905 | } 906 | } 907 | 908 | /** 909 | * Perform a search of the data set 910 | * @param {string} query 911 | * @return {void} 912 | */ 913 | search(query) { 914 | if (!this.hasRows) return false 915 | 916 | query = query.toLowerCase() 917 | 918 | this.currentPage = 1 919 | this.searching = true 920 | this.searchData = [] 921 | 922 | if (!query.length) { 923 | this.searching = false 924 | this.update() 925 | this.emit("datatable.search", query, this.searchData) 926 | this.wrapper.classList.remove("search-results") 927 | return false 928 | } 929 | 930 | this.clear() 931 | 932 | this.data.forEach((row, idx) => { 933 | const inArray = this.searchData.includes(row) 934 | 935 | // https://github.com/Mobius1/Vanilla-DataTables/issues/12 936 | const doesQueryMatch = query.split(" ").reduce((bool, word) => { 937 | let includes = false 938 | let cell = null 939 | let content = null 940 | 941 | for (let x = 0; x < row.cells.length; x++) { 942 | cell = row.cells[x] 943 | content = cell.hasAttribute('data-content') ? cell.getAttribute('data-content') : cell.textContent 944 | 945 | if ( 946 | content.toLowerCase().includes(word) && 947 | this.columns(cell.cellIndex).visible() 948 | ) { 949 | includes = true 950 | break 951 | } 952 | } 953 | 954 | return bool && includes 955 | }, true) 956 | 957 | if (doesQueryMatch && !inArray) { 958 | row.searchIndex = idx 959 | this.searchData.push(idx) 960 | } else { 961 | row.searchIndex = null 962 | } 963 | }) 964 | 965 | this.wrapper.classList.add("search-results") 966 | 967 | if (!this.searchData.length) { 968 | this.wrapper.classList.remove("search-results") 969 | 970 | this.setMessage(this.options.labels.noRows) 971 | } else { 972 | this.update() 973 | } 974 | 975 | this.emit("datatable.search", query, this.searchData) 976 | } 977 | 978 | /** 979 | * Change page 980 | * @param {int} page 981 | * @return {void} 982 | */ 983 | page(page) { 984 | // We don't want to load the current page again. 985 | if (page == this.currentPage) { 986 | return false 987 | } 988 | 989 | if (!isNaN(page)) { 990 | this.currentPage = parseInt(page, 10) 991 | } 992 | 993 | if (page > this.pages.length || page < 0) { 994 | return false 995 | } 996 | 997 | this.render("page") 998 | this.render("pager") 999 | 1000 | this.emit("datatable.page", page) 1001 | } 1002 | 1003 | /** 1004 | * Sort by column 1005 | * @param {int} column - The column no. 1006 | * @param {string} direction - asc or desc 1007 | * @return {void} 1008 | */ 1009 | sortColumn(column, direction) { 1010 | // Use columns API until sortColumn method is removed 1011 | this.columns().sort(column, direction) 1012 | } 1013 | 1014 | /** 1015 | * Add new row data 1016 | * @param {object} data 1017 | */ 1018 | insert(data) { 1019 | let rows = [] 1020 | if (isObject(data)) { 1021 | if (data.headings) { 1022 | if (!this.hasHeadings && !this.hasRows) { 1023 | const tr = createElement("tr") 1024 | data.headings.forEach(heading => { 1025 | const th = createElement("th", { 1026 | html: heading 1027 | }) 1028 | 1029 | tr.appendChild(th) 1030 | }) 1031 | this.head.appendChild(tr) 1032 | 1033 | this.header = tr 1034 | this.headings = [].slice.call(tr.cells) 1035 | this.hasHeadings = true 1036 | 1037 | // Re-enable sorting if it was disabled due 1038 | // to missing header 1039 | this.options.sortable = this.initialSortable 1040 | 1041 | // Allow sorting on new header 1042 | this.render("header") 1043 | 1044 | // Activate newly added headings 1045 | this.activeHeadings = this.headings.slice() 1046 | } 1047 | } 1048 | 1049 | if (data.data && Array.isArray(data.data)) { 1050 | rows = data.data 1051 | } 1052 | } else if (Array.isArray(data)) { 1053 | data.forEach(row => { 1054 | const r = [] 1055 | Object.entries(row).forEach(([heading, cell]) => { 1056 | 1057 | const index = this.labels.indexOf(heading) 1058 | 1059 | if (index > -1) { 1060 | r[index] = cell 1061 | } 1062 | }) 1063 | rows.push(r) 1064 | }) 1065 | } 1066 | 1067 | if (rows.length) { 1068 | this.rows().add(rows) 1069 | 1070 | this.hasRows = true 1071 | } 1072 | 1073 | this.update() 1074 | this.setColumns() 1075 | this.fixColumns() 1076 | } 1077 | 1078 | /** 1079 | * Refresh the instance 1080 | * @return {void} 1081 | */ 1082 | refresh() { 1083 | if (this.options.searchable) { 1084 | this.input.value = "" 1085 | this.searching = false 1086 | } 1087 | this.currentPage = 1 1088 | this.onFirstPage = true 1089 | this.update() 1090 | 1091 | this.emit("datatable.refresh") 1092 | } 1093 | 1094 | /** 1095 | * Truncate the table 1096 | * @param {mixes} html - HTML string or HTMLElement 1097 | * @return {void} 1098 | */ 1099 | clear(html) { 1100 | if (this.body) { 1101 | flush(this.body) 1102 | } 1103 | 1104 | let parent = this.body 1105 | if (!this.body) { 1106 | parent = this.table 1107 | } 1108 | 1109 | if (html) { 1110 | if (typeof html === "string") { 1111 | const frag = document.createDocumentFragment() 1112 | frag.innerHTML = html 1113 | } 1114 | 1115 | parent.appendChild(html) 1116 | } 1117 | } 1118 | 1119 | /** 1120 | * Export table to various formats (csv, txt or sql) 1121 | * @param {Object} userOptions User options 1122 | * @return {Boolean} 1123 | */ 1124 | export(userOptions) { 1125 | if (!this.hasHeadings && !this.hasRows) return false 1126 | 1127 | const headers = this.activeHeadings 1128 | let rows = [] 1129 | const arr = [] 1130 | let i 1131 | let x 1132 | let str 1133 | let link 1134 | 1135 | const defaults = { 1136 | download: true, 1137 | skipColumn: [], 1138 | 1139 | // csv 1140 | lineDelimiter: "\n", 1141 | columnDelimiter: ",", 1142 | 1143 | // sql 1144 | tableName: "myTable", 1145 | 1146 | // json 1147 | replacer: null, 1148 | space: 4 1149 | } 1150 | 1151 | // Check for the options object 1152 | if (!isObject(userOptions)) { 1153 | return false 1154 | } 1155 | 1156 | const options = { 1157 | ...defaults, 1158 | ...userOptions 1159 | } 1160 | 1161 | if (options.type) { 1162 | if (options.type === "txt" || options.type === "csv") { 1163 | // Include headings 1164 | rows[0] = this.header 1165 | } 1166 | 1167 | // Selection or whole table 1168 | if (options.selection) { 1169 | // Page number 1170 | if (!isNaN(options.selection)) { 1171 | rows = rows.concat(this.pages[options.selection - 1]) 1172 | } else if (Array.isArray(options.selection)) { 1173 | // Array of page numbers 1174 | for (i = 0; i < options.selection.length; i++) { 1175 | rows = rows.concat(this.pages[options.selection[i] - 1]) 1176 | } 1177 | } 1178 | } else { 1179 | rows = rows.concat(this.activeRows) 1180 | } 1181 | 1182 | // Only proceed if we have data 1183 | if (rows.length) { 1184 | if (options.type === "txt" || options.type === "csv") { 1185 | str = "" 1186 | 1187 | for (i = 0; i < rows.length; i++) { 1188 | for (x = 0; x < rows[i].cells.length; x++) { 1189 | // Check for column skip and visibility 1190 | if ( 1191 | !options.skipColumn.includes(headers[x].originalCellIndex) && 1192 | this.columns(headers[x].originalCellIndex).visible() 1193 | ) { 1194 | let text = rows[i].cells[x].textContent 1195 | text = text.trim() 1196 | text = text.replace(/\s{2,}/g, ' ') 1197 | text = text.replace(/\n/g, ' ') 1198 | text = text.replace(/"/g, '""') 1199 | //have to manually encode "#" as encodeURI leaves it as is. 1200 | text = text.replace(/#/g, "%23") 1201 | if (text.includes(",")) 1202 | text = `"${text}"` 1203 | 1204 | 1205 | str += text + options.columnDelimiter 1206 | } 1207 | } 1208 | // Remove trailing column delimiter 1209 | str = str.trim().substring(0, str.length - 1) 1210 | 1211 | // Apply line delimiter 1212 | str += options.lineDelimiter 1213 | } 1214 | 1215 | // Remove trailing line delimiter 1216 | str = str.trim().substring(0, str.length - 1) 1217 | 1218 | if (options.download) { 1219 | str = `data:text/csv;charset=utf-8,${str}` 1220 | } 1221 | } else if (options.type === "sql") { 1222 | // Begin INSERT statement 1223 | str = `INSERT INTO \`${options.tableName}\` (` 1224 | 1225 | // Convert table headings to column names 1226 | for (i = 0; i < headers.length; i++) { 1227 | // Check for column skip and column visibility 1228 | if ( 1229 | !options.skipColumn.includes(headers[i].originalCellIndex) && 1230 | this.columns(headers[i].originalCellIndex).visible() 1231 | ) { 1232 | str += `\`${headers[i].textContent}\`,` 1233 | } 1234 | } 1235 | 1236 | // Remove trailing comma 1237 | str = str.trim().substring(0, str.length - 1) 1238 | 1239 | // Begin VALUES 1240 | str += ") VALUES " 1241 | 1242 | // Iterate rows and convert cell data to column values 1243 | for (i = 0; i < rows.length; i++) { 1244 | str += "(" 1245 | 1246 | for (x = 0; x < rows[i].cells.length; x++) { 1247 | // Check for column skip and column visibility 1248 | if ( 1249 | !options.skipColumn.includes(headers[x].originalCellIndex) && 1250 | this.columns(headers[x].originalCellIndex).visible() 1251 | ) { 1252 | str += `"${rows[i].cells[x].textContent}",` 1253 | } 1254 | } 1255 | 1256 | // Remove trailing comma 1257 | str = str.trim().substring(0, str.length - 1) 1258 | 1259 | // end VALUES 1260 | str += ")," 1261 | } 1262 | 1263 | // Remove trailing comma 1264 | str = str.trim().substring(0, str.length - 1) 1265 | 1266 | // Add trailing colon 1267 | str += ";" 1268 | 1269 | if (options.download) { 1270 | str = `data:application/sql;charset=utf-8,${str}` 1271 | } 1272 | } else if (options.type === "json") { 1273 | // Iterate rows 1274 | for (x = 0; x < rows.length; x++) { 1275 | arr[x] = arr[x] || {} 1276 | // Iterate columns 1277 | for (i = 0; i < headers.length; i++) { 1278 | // Check for column skip and column visibility 1279 | if ( 1280 | !options.skipColumn.includes(headers[i].originalCellIndex) && 1281 | this.columns(headers[i].originalCellIndex).visible() 1282 | ) { 1283 | arr[x][headers[i].textContent] = rows[x].cells[i].textContent 1284 | } 1285 | } 1286 | } 1287 | 1288 | // Convert the array of objects to JSON string 1289 | str = JSON.stringify(arr, options.replacer, options.space) 1290 | 1291 | if (options.download) { 1292 | str = `data:application/json;charset=utf-8,${str}` 1293 | } 1294 | } 1295 | 1296 | // Download 1297 | if (options.download) { 1298 | // Filename 1299 | options.filename = options.filename || "datatable_export" 1300 | options.filename += `.${options.type}` 1301 | 1302 | str = encodeURI(str) 1303 | 1304 | // Create a link to trigger the download 1305 | link = document.createElement("a") 1306 | link.href = str 1307 | link.download = options.filename 1308 | 1309 | // Append the link 1310 | document.body.appendChild(link) 1311 | 1312 | // Trigger the download 1313 | link.click() 1314 | 1315 | // Remove the link 1316 | document.body.removeChild(link) 1317 | } 1318 | 1319 | return str 1320 | } 1321 | } 1322 | 1323 | return false 1324 | } 1325 | 1326 | /** 1327 | * Import data to the table 1328 | * @param {Object} userOptions User options 1329 | * @return {Boolean} 1330 | */ 1331 | import(userOptions) { 1332 | let obj = false 1333 | const defaults = { 1334 | // csv 1335 | lineDelimiter: "\n", 1336 | columnDelimiter: "," 1337 | } 1338 | 1339 | // Check for the options object 1340 | if (!isObject(userOptions)) { 1341 | return false 1342 | } 1343 | 1344 | const options = { 1345 | ...defaults, 1346 | ...userOptions 1347 | } 1348 | 1349 | if (options.data.length || isObject(options.data)) { 1350 | // Import CSV 1351 | if (options.type === "csv") { 1352 | obj = { 1353 | data: [] 1354 | } 1355 | 1356 | // Split the string into rows 1357 | const rows = options.data.split(options.lineDelimiter) 1358 | 1359 | if (rows.length) { 1360 | 1361 | if (options.headings) { 1362 | obj.headings = rows[0].split(options.columnDelimiter) 1363 | 1364 | rows.shift() 1365 | } 1366 | 1367 | rows.forEach((row, i) => { 1368 | obj.data[i] = [] 1369 | 1370 | // Split the rows into values 1371 | const values = row.split(options.columnDelimiter) 1372 | 1373 | if (values.length) { 1374 | values.forEach(value => { 1375 | obj.data[i].push(value) 1376 | }) 1377 | } 1378 | }) 1379 | } 1380 | } else if (options.type === "json") { 1381 | const json = isJson(options.data) 1382 | 1383 | // Valid JSON string 1384 | if (json) { 1385 | obj = { 1386 | headings: [], 1387 | data: [] 1388 | } 1389 | 1390 | json.forEach((data, i) => { 1391 | obj.data[i] = [] 1392 | Object.entries(data).forEach(([column, value]) => { 1393 | if (!obj.headings.includes(column)) { 1394 | obj.headings.push(column) 1395 | } 1396 | 1397 | obj.data[i].push(value) 1398 | }) 1399 | }) 1400 | } else { 1401 | // console.warn("That's not valid JSON!") 1402 | } 1403 | } 1404 | 1405 | if (isObject(options.data)) { 1406 | obj = options.data 1407 | } 1408 | 1409 | if (obj) { 1410 | // Add the rows 1411 | this.insert(obj) 1412 | } 1413 | } 1414 | 1415 | return false 1416 | } 1417 | 1418 | /** 1419 | * Print the table 1420 | * @return {void} 1421 | */ 1422 | print() { 1423 | const headings = this.activeHeadings 1424 | const rows = this.activeRows 1425 | const table = createElement("table") 1426 | const thead = createElement("thead") 1427 | const tbody = createElement("tbody") 1428 | 1429 | const tr = createElement("tr") 1430 | headings.forEach(th => { 1431 | tr.appendChild( 1432 | createElement("th", { 1433 | html: th.textContent 1434 | }) 1435 | ) 1436 | }) 1437 | 1438 | thead.appendChild(tr) 1439 | 1440 | rows.forEach(row => { 1441 | const tr = createElement("tr") 1442 | Array.from(row.cells).forEach(cell => { 1443 | tr.appendChild( 1444 | createElement("td", { 1445 | html: cell.textContent 1446 | }) 1447 | ) 1448 | }) 1449 | tbody.appendChild(tr) 1450 | }) 1451 | 1452 | table.appendChild(thead) 1453 | table.appendChild(tbody) 1454 | 1455 | // Open new window 1456 | const w = window.open() 1457 | 1458 | // Append the table to the body 1459 | w.document.body.appendChild(table) 1460 | 1461 | // Print 1462 | w.print() 1463 | } 1464 | 1465 | /** 1466 | * Show a message in the table 1467 | * @param {string} message 1468 | */ 1469 | setMessage(message) { 1470 | let colspan = 1 1471 | 1472 | if (this.hasRows) { 1473 | colspan = this.data[0].cells.length 1474 | } else if (this.activeHeadings.length) { 1475 | colspan = this.activeHeadings.length 1476 | } 1477 | 1478 | this.wrapper.classList.add("dataTable-empty") 1479 | 1480 | if (this.label) { 1481 | this.label.innerHTML = "" 1482 | } 1483 | this.totalPages = 0 1484 | this.render("pager") 1485 | 1486 | this.clear( 1487 | createElement("tr", { 1488 | html: `${message}` 1489 | }) 1490 | ) 1491 | } 1492 | 1493 | /** 1494 | * Columns API access 1495 | * @return {Object} new Columns instance 1496 | */ 1497 | columns(columns) { 1498 | return new Columns(this, columns) 1499 | } 1500 | 1501 | /** 1502 | * Rows API access 1503 | * @return {Object} new Rows instance 1504 | */ 1505 | rows(rows) { 1506 | return new Rows(this, rows) 1507 | } 1508 | 1509 | /** 1510 | * Add custom event listener 1511 | * @param {String} event 1512 | * @param {Function} callback 1513 | * @return {Void} 1514 | */ 1515 | on(event, callback) { 1516 | this.events = this.events || {} 1517 | this.events[event] = this.events[event] || [] 1518 | this.events[event].push(callback) 1519 | } 1520 | 1521 | /** 1522 | * Remove custom event listener 1523 | * @param {String} event 1524 | * @param {Function} callback 1525 | * @return {Void} 1526 | */ 1527 | off(event, callback) { 1528 | this.events = this.events || {} 1529 | if (event in this.events === false) return 1530 | this.events[event].splice(this.events[event].indexOf(callback), 1) 1531 | } 1532 | 1533 | /** 1534 | * Fire custom event 1535 | * @param {String} event 1536 | * @return {Void} 1537 | */ 1538 | emit(event) { 1539 | this.events = this.events || {} 1540 | if (event in this.events === false) return 1541 | for (let i = 0; i < this.events[event].length; i++) { 1542 | this.events[event][i].apply(this, Array.prototype.slice.call(arguments, 1)) 1543 | } 1544 | } 1545 | } 1546 | -------------------------------------------------------------------------------- /src/tools/datatable/date.js: -------------------------------------------------------------------------------- 1 | import dayjs from "dayjs" 2 | import customParseFormat from "dayjs/plugin/customParseFormat" 3 | 4 | dayjs.extend(customParseFormat) 5 | 6 | /** 7 | * Use dayjs to parse cell contents for sorting 8 | * @param {String} content The datetime string to parse 9 | * @param {String} format The format for dayjs to use 10 | * @return {String|Boolean} Datatime string or false 11 | */ 12 | export const parseDate = (content, format) => { 13 | let date = false 14 | 15 | // Converting to YYYYMMDD ensures we can accurately sort the column numerically 16 | 17 | if (format) { 18 | switch (format) { 19 | case "ISO_8601": 20 | // ISO8601 is already lexiographically sorted, so we can just sort it as a string. 21 | date = content 22 | break 23 | case "RFC_2822": 24 | date = dayjs(content, "ddd, MM MMM YYYY HH:mm:ss ZZ").format("YYYYMMDD") 25 | break 26 | case "MYSQL": 27 | date = dayjs(content, "YYYY-MM-DD hh:mm:ss").format("YYYYMMDD") 28 | break 29 | case "UNIX": 30 | date = dayjs(content).unix() 31 | break 32 | // User defined format using the data-format attribute or columns[n].format option 33 | default: 34 | date = dayjs(content, format).format("YYYYMMDD") 35 | break 36 | } 37 | } 38 | 39 | return date 40 | } 41 | -------------------------------------------------------------------------------- /src/tools/datatable/helpers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Check is item is object 3 | * @return {Boolean} 4 | */ 5 | export const isObject = val => Object.prototype.toString.call(val) === "[object Object]" 6 | 7 | /** 8 | * Check for valid JSON string 9 | * @param {String} str 10 | * @return {Boolean|Array|Object} 11 | */ 12 | export const isJson = str => { 13 | let t = !1 14 | try { 15 | t = JSON.parse(str) 16 | } catch (e) { 17 | return !1 18 | } 19 | return !(null === t || (!Array.isArray(t) && !isObject(t))) && t 20 | } 21 | 22 | /** 23 | * Create DOM element node 24 | * @param {String} nodeName nodeName 25 | * @param {Object} attrs properties and attributes 26 | * @return {Object} 27 | */ 28 | export const createElement = (nodeName, attrs) => { 29 | const dom = document.createElement(nodeName) 30 | if (attrs && "object" == typeof attrs) { 31 | for (const attr in attrs) { 32 | if ("html" === attr) { 33 | dom.innerHTML = attrs[attr] 34 | } else { 35 | dom.setAttribute(attr, attrs[attr]) 36 | } 37 | } 38 | } 39 | return dom 40 | } 41 | 42 | export const flush = el => { 43 | if (el instanceof NodeList) { 44 | el.forEach(e => flush(e)) 45 | } else { 46 | el.innerHTML = "" 47 | } 48 | } 49 | 50 | /** 51 | * Create button helper 52 | * @param {String} class 53 | * @param {Number} page 54 | * @param {String} text 55 | * @return {Object} 56 | */ 57 | export const button = (className, page, text) => createElement( 58 | "li", 59 | { 60 | class: className, 61 | html: `${text}` 62 | } 63 | ) 64 | 65 | /** 66 | * Bubble sort algorithm 67 | */ 68 | export const sortItems = (a, b) => { 69 | let c 70 | let d 71 | if (1 === b) { 72 | c = 0 73 | d = a.length 74 | } else { 75 | if (b === -1) { 76 | c = a.length - 1 77 | d = -1 78 | } 79 | } 80 | for (let e = !0; e;) { 81 | e = !1 82 | for (let f = c; f != d; f += b) { 83 | if (a[f + b] && a[f].value > a[f + b].value) { 84 | const g = a[f] 85 | const h = a[f + b] 86 | const i = g 87 | a[f] = h 88 | a[f + b] = i 89 | e = !0 90 | } 91 | } 92 | } 93 | return a 94 | } 95 | 96 | /** 97 | * Pager truncation algorithm 98 | */ 99 | export const truncate = (a, b, c, d, ellipsis) => { 100 | d = d || 2 101 | let j 102 | const e = 0 * d 103 | let f = b - d 104 | let g = b + d 105 | const h = [] 106 | const i = [] 107 | if (b < 4 - d + e) { 108 | g = 3 + e 109 | } else if (b > c - (3 - d + e)) { 110 | f = c - (2 + e) 111 | } 112 | for (let k = 1; k <= c; k++) { 113 | if (1 == k || k == c || (k >= f && k <= g)) { 114 | const l = a[k - 1] 115 | l.classList.remove("active") 116 | h.push(l) 117 | } 118 | } 119 | h.forEach(c => { 120 | const d = c.children[0].getAttribute("data-page") 121 | if (j) { 122 | const e = j.children[0].getAttribute("data-page") 123 | if (d - e == 2) i.push(a[e]) 124 | else if (d - e != 1) { 125 | const f = createElement("li", { 126 | class: "ellipsis", 127 | html: `${ellipsis}` 128 | }) 129 | i.push(f) 130 | } 131 | } 132 | i.push(c) 133 | j = c 134 | }) 135 | 136 | return i 137 | } 138 | -------------------------------------------------------------------------------- /src/tools/datatable/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * Vanilla-DataTables 4 | * Copyright (c) 2015-2017 Karl Saunders (http://mobius.ovh) 5 | * Licensed under MIT (http://www.opensource.org/licenses/mit-license.php) 6 | * 7 | * Version: 1.6.14 8 | * 9 | */ 10 | 11 | export {DataTable} from "./datatable" 12 | -------------------------------------------------------------------------------- /src/tools/datatable/rows.js: -------------------------------------------------------------------------------- 1 | import {createElement} from "./helpers" 2 | /** 3 | * Rows API 4 | * @param {Object} instance DataTable instance 5 | * @param {Array} rows 6 | */ 7 | export class Rows { 8 | constructor(dt, rows) { 9 | this.dt = dt 10 | this.rows = rows 11 | 12 | return this 13 | } 14 | 15 | /** 16 | * Build a new row 17 | * @param {Array} row 18 | * @return {HTMLElement} 19 | */ 20 | build(row) { 21 | const tr = createElement("tr") 22 | 23 | let headings = this.dt.headings 24 | 25 | if (!headings.length) { 26 | headings = row.map(() => "") 27 | } 28 | 29 | headings.forEach((h, i) => { 30 | const td = createElement("td") 31 | 32 | // Fixes #29 33 | if (!row[i] || !row[i].length) { 34 | row[i] = "" 35 | } 36 | 37 | td.innerHTML = row[i] 38 | 39 | td.data = row[i] 40 | 41 | tr.appendChild(td) 42 | }) 43 | 44 | return tr 45 | } 46 | 47 | render(row) { 48 | return row 49 | } 50 | 51 | /** 52 | * Add new row 53 | * @param {Array} select 54 | */ 55 | add(data) { 56 | if (Array.isArray(data)) { 57 | const dt = this.dt 58 | // Check for multiple rows 59 | if (Array.isArray(data[0])) { 60 | data.forEach(row => { 61 | dt.data.push(this.build(row)) 62 | }) 63 | } else { 64 | dt.data.push(this.build(data)) 65 | } 66 | 67 | // We may have added data to an empty table 68 | if ( dt.data.length ) { 69 | dt.hasRows = true 70 | } 71 | 72 | 73 | this.update() 74 | 75 | dt.columns().rebuild() 76 | } 77 | 78 | } 79 | 80 | /** 81 | * Remove row(s) 82 | * @param {Array|Number} select 83 | * @return {Void} 84 | */ 85 | remove(select) { 86 | const dt = this.dt 87 | 88 | if (Array.isArray(select)) { 89 | // Remove in reverse otherwise the indexes will be incorrect 90 | select.sort((a, b) => b - a) 91 | 92 | select.forEach(row => { 93 | dt.data.splice(row, 1) 94 | }) 95 | } else if (select == 'all') { 96 | dt.data = []; 97 | } else { 98 | dt.data.splice(select, 1) 99 | } 100 | 101 | // We may have emptied the table 102 | if ( !dt.data.length ) { 103 | dt.hasRows = false 104 | } 105 | 106 | this.update() 107 | dt.columns().rebuild() 108 | } 109 | 110 | /** 111 | * Update row indexes 112 | * @return {Void} 113 | */ 114 | update() { 115 | this.dt.data.forEach((row, i) => { 116 | row.dataIndex = i 117 | }) 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /src/tools/datatable/style.css: -------------------------------------------------------------------------------- 1 | .dataTable-wrapper.no-header .dataTable-container { 2 | border-top: 1px solid #d9d9d9; 3 | } 4 | 5 | .dataTable-wrapper.no-footer .dataTable-container { 6 | border-bottom: 1px solid #d9d9d9; 7 | } 8 | 9 | .dataTable-top, 10 | .dataTable-bottom { 11 | padding: 8px 10px; 12 | } 13 | 14 | .dataTable-top > div:first-child, 15 | .dataTable-bottom > div:first-child { 16 | float: left; 17 | } 18 | 19 | .dataTable-top > div:last-child, 20 | .dataTable-bottom > div:last-child { 21 | float: right; 22 | } 23 | 24 | .dataTable-selector { 25 | padding: 6px; 26 | } 27 | 28 | .dataTable-input { 29 | padding: 6px 12px; 30 | } 31 | 32 | .dataTable-info { 33 | margin: 7px 0; 34 | } 35 | 36 | /* PAGER */ 37 | .dataTable-pagination ul { 38 | margin: 0; 39 | padding-left: 0; 40 | } 41 | 42 | .dataTable-pagination li { 43 | list-style: none; 44 | float: left; 45 | } 46 | 47 | .dataTable-pagination a { 48 | border: 1px solid transparent; 49 | float: left; 50 | margin-left: 2px; 51 | padding: 6px 12px; 52 | position: relative; 53 | text-decoration: none; 54 | color: #333; 55 | } 56 | 57 | .dataTable-pagination a:hover { 58 | background-color: #d9d9d9; 59 | } 60 | 61 | .dataTable-pagination .active a, 62 | .dataTable-pagination .active a:focus, 63 | .dataTable-pagination .active a:hover { 64 | background-color: #d9d9d9; 65 | cursor: default; 66 | } 67 | 68 | .dataTable-pagination .ellipsis a, 69 | .dataTable-pagination .disabled a, 70 | .dataTable-pagination .disabled a:focus, 71 | .dataTable-pagination .disabled a:hover { 72 | cursor: not-allowed; 73 | } 74 | 75 | .dataTable-pagination .disabled a, 76 | .dataTable-pagination .disabled a:focus, 77 | .dataTable-pagination .disabled a:hover { 78 | cursor: not-allowed; 79 | opacity: 0.4; 80 | } 81 | 82 | .dataTable-pagination .pager a { 83 | font-weight: bold; 84 | } 85 | 86 | /* TABLE */ 87 | .dataTable-table { 88 | max-width: 100%; 89 | width: 100%; 90 | border-spacing: 0; 91 | border-collapse: separate; 92 | } 93 | 94 | .dataTable-table > tbody > tr > td, 95 | .dataTable-table > tbody > tr > th, 96 | .dataTable-table > tfoot > tr > td, 97 | .dataTable-table > tfoot > tr > th, 98 | .dataTable-table > thead > tr > td, 99 | .dataTable-table > thead > tr > th { 100 | vertical-align: top; 101 | padding: 8px 10px; 102 | } 103 | 104 | .dataTable-table > thead > tr > th { 105 | vertical-align: bottom; 106 | text-align: left; 107 | border-bottom: 1px solid #d9d9d9; 108 | } 109 | 110 | .dataTable-table > tfoot > tr > th { 111 | vertical-align: bottom; 112 | text-align: left; 113 | border-top: 1px solid #d9d9d9; 114 | } 115 | 116 | .dataTable-table th { 117 | vertical-align: bottom; 118 | text-align: left; 119 | } 120 | 121 | .dataTable-table th a { 122 | text-decoration: none; 123 | color: inherit; 124 | } 125 | 126 | .dataTable-sorter { 127 | display: inline-block; 128 | height: 100%; 129 | position: relative; 130 | width: 100%; 131 | } 132 | 133 | .dataTable-sorter::before, 134 | .dataTable-sorter::after { 135 | content: ""; 136 | height: 0; 137 | width: 0; 138 | position: absolute; 139 | right: 4px; 140 | border-left: 4px solid transparent; 141 | border-right: 4px solid transparent; 142 | opacity: 0.2; 143 | } 144 | 145 | .dataTable-sorter::before { 146 | border-top: 4px solid #000; 147 | bottom: 0px; 148 | } 149 | 150 | .dataTable-sorter::after { 151 | border-bottom: 4px solid #000; 152 | border-top: 4px solid transparent; 153 | top: 0px; 154 | } 155 | 156 | .asc .dataTable-sorter::after, 157 | .desc .dataTable-sorter::before { 158 | opacity: 0.6; 159 | } 160 | 161 | .dataTables-empty { 162 | text-align: center; 163 | } 164 | 165 | .dataTable-top::after, .dataTable-bottom::after { 166 | clear: both; 167 | content: " "; 168 | display: table; 169 | } 170 | 171 | @media screen and (max-width:576px) { 172 | .dataTable-pagination li { 173 | float:initial 174 | } 175 | } -------------------------------------------------------------------------------- /src/tools/datatable/table.js: -------------------------------------------------------------------------------- 1 | import {createElement} from "./helpers" 2 | 3 | /** 4 | * Parse data to HTML table 5 | */ 6 | export const dataToTable = function (data) { 7 | let thead = false 8 | let tbody = false 9 | 10 | data = data || this.options.data 11 | 12 | if (data.headings) { 13 | thead = createElement("thead") 14 | const tr = createElement("tr") 15 | data.headings.forEach(col => { 16 | const td = createElement("th", { 17 | html: col 18 | }) 19 | tr.appendChild(td) 20 | }) 21 | 22 | thead.appendChild(tr) 23 | } 24 | 25 | if (data.data && data.data.length) { 26 | tbody = createElement("tbody") 27 | data.data.forEach(rows => { 28 | if (data.headings) { 29 | if (data.headings.length !== rows.length) { 30 | throw new Error( 31 | "The number of rows do not match the number of headings." 32 | ) 33 | } 34 | } 35 | const tr = createElement("tr") 36 | rows.forEach(value => { 37 | const td = createElement("td", { 38 | html: value 39 | }) 40 | tr.appendChild(td) 41 | }) 42 | tbody.appendChild(tr) 43 | }) 44 | } 45 | 46 | if (thead) { 47 | if (this.table.tHead !== null) { 48 | this.table.removeChild(this.table.tHead) 49 | } 50 | this.table.appendChild(thead) 51 | } 52 | 53 | if (tbody) { 54 | if (this.table.tBodies.length) { 55 | this.table.removeChild(this.table.tBodies[0]) 56 | } 57 | this.table.appendChild(tbody) 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/tools/perfect-scrollbar.js: -------------------------------------------------------------------------------- 1 | export function goPerfect() { 2 | 3 | (function (modules) { 4 | // webpackBootstrap 5 | // The module cache 6 | var installedModules = {}; 7 | 8 | // The require function 9 | function __webpack_require__(moduleId) { 10 | // Check if module is in cache 11 | if (installedModules[moduleId]) { 12 | return installedModules[moduleId].exports; 13 | } 14 | // Create a new module (and put it into the cache) 15 | var module = (installedModules[moduleId] = { 16 | i: moduleId, 17 | l: false, 18 | exports: {}, 19 | }); 20 | 21 | // Execute the module function 22 | modules[moduleId].call( 23 | module.exports, 24 | module, 25 | module.exports, 26 | __webpack_require__ 27 | ); 28 | 29 | // Flag the module as loaded 30 | module.l = true; 31 | 32 | // Return the exports of the module 33 | return module.exports; 34 | } 35 | 36 | // expose the modules object (__webpack_modules__) 37 | __webpack_require__.m = modules; 38 | 39 | // expose the module cache 40 | __webpack_require__.c = installedModules; 41 | 42 | // define getter function for harmony exports 43 | __webpack_require__.d = function (exports, name, getter) { 44 | if (!__webpack_require__.o(exports, name)) { 45 | Object.defineProperty(exports, name, { 46 | enumerable: true, 47 | get: getter, 48 | }); 49 | } 50 | }; 51 | 52 | // define __esModule on exports 53 | __webpack_require__.r = function (exports) { 54 | if (typeof Symbol !== "undefined" && Symbol.toStringTag) { 55 | Object.defineProperty(exports, Symbol.toStringTag, { 56 | value: "Module", 57 | }); 58 | } 59 | Object.defineProperty(exports, "__esModule", { value: true }); 60 | }; 61 | 62 | // create a fake namespace object 63 | // mode & 1: value is a module id, require it 64 | // mode & 2: merge all properties of value into the ns 65 | // mode & 4: return value when already ns object 66 | // mode & 8|1: behave like require 67 | __webpack_require__.t = function (value, mode) { 68 | if (mode & 1) value = __webpack_require__(value); 69 | if (mode & 8) return value; 70 | if ( 71 | mode & 4 && 72 | typeof value === "object" && 73 | value && 74 | value.__esModule 75 | ) 76 | return value; 77 | var ns = Object.create(null); 78 | __webpack_require__.r(ns); 79 | Object.defineProperty(ns, "default", { 80 | enumerable: true, 81 | value: value, 82 | }); 83 | if (mode & 2 && typeof value != "string") 84 | for (var key in value) 85 | __webpack_require__.d( 86 | ns, 87 | key, 88 | function (key) { 89 | return value[key]; 90 | }.bind(null, key) 91 | ); 92 | return ns; 93 | }; 94 | 95 | // getDefaultExport function for compatibility with non-harmony modules 96 | __webpack_require__.n = function (module) { 97 | var getter = 98 | module && module.__esModule 99 | ? function getDefault() { 100 | return module["default"]; 101 | } 102 | : function getModuleExports() { 103 | return module; 104 | }; 105 | __webpack_require__.d(getter, "a", getter); 106 | return getter; 107 | }; 108 | 109 | // Object.prototype.hasOwnProperty.call 110 | __webpack_require__.o = function (object, property) { 111 | return Object.prototype.hasOwnProperty.call(object, property); 112 | }; 113 | 114 | // __webpack_public_path__ 115 | __webpack_require__.p = "/"; 116 | 117 | // Load entry module and return exports 118 | return __webpack_require__((__webpack_require__.s = 1)); 119 | })( 120 | /************************************************************************/ 121 | { 122 | "./src/assets/js/main.js": 123 | /*!*******************************!*\ 124 | !*** ./src/assets/js/main.js ***! 125 | \*******************************/ 126 | /*! no static exports found */ 127 | function (module, exports) { 128 | // Dropdown Sidebar Menu 129 | var sidebarItems = document.querySelectorAll( 130 | ".sidebar-item.has-sub" 131 | ); 132 | 133 | var _loop = function _loop() { 134 | var sidebarItem = sidebarItems[i]; 135 | sidebarItems[i] 136 | .querySelector(".sidebar-link") 137 | .addEventListener("click", function (e) { 138 | e.preventDefault(); 139 | var submenu = sidebarItem.querySelector( 140 | ".submenu" 141 | ); 142 | if (submenu.classList.contains("active")) 143 | submenu.classList.remove("active"); 144 | else submenu.classList.add("active"); 145 | }); 146 | }; 147 | 148 | for (var i = 0; i < sidebarItems.length; i++) { 149 | _loop(); 150 | } // Navbar Toggler 151 | 152 | var sidebarToggler = document.querySelectorAll( 153 | ".sidebar-toggler" 154 | ); 155 | 156 | for (var i = 0; i < sidebarToggler.length; i++) { 157 | var toggler = sidebarToggler[i]; 158 | toggler.addEventListener("click", function () { 159 | var sidebar = document.getElementById( 160 | "sidebar" 161 | ); 162 | if (sidebar.classList.contains("active")) 163 | sidebar.classList.remove("active"); 164 | else sidebar.classList.add("active"); 165 | }); 166 | } // Perfect Scrollbar INit 167 | 168 | if (typeof PerfectScrollbar == "function") { 169 | var container = document.querySelector( 170 | ".sidebar-wrapper" 171 | ); 172 | var ps = new PerfectScrollbar(container); 173 | } 174 | 175 | window.onload = function () { 176 | var w = window.innerWidth; 177 | 178 | if (w < 768) { 179 | //console.log("widthnya ", w); 180 | document 181 | .getElementById("sidebar") 182 | .classList.remove("active"); 183 | } 184 | }; 185 | 186 | feather.replace(); 187 | }, 188 | 189 | 1: 190 | /*!*************************************!*\ 191 | !*** multi ./src/assets/js/main.js ***! 192 | \*************************************/ 193 | /*! no static exports found */ 194 | function (module, exports, __webpack_require__) { 195 | module.exports = __webpack_require__( 196 | /*! D:\Programmer\Code\HTML_CSS\Voler\src\assets\js\main.js */ "./src/assets/js/main.js" 197 | ); 198 | }, 199 | } 200 | ); 201 | } -------------------------------------------------------------------------------- /src/tools/slug.js: -------------------------------------------------------------------------------- 1 | export function slug (str) { 2 | str = str.replace(/^\s+|\s+$/g, ''); // trim 3 | str = str.toLowerCase(); 4 | 5 | // remove accents, swap ñ for n, etc 6 | var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; 7 | var to = "aaaaeeeeiiiioooouuuunc------"; 8 | for (var i=0, l=from.length ; i { 2 | const dt = new Date(); 3 | return `${dt.getFullYear().toString().padStart(4,'0')}-${(dt.getMonth()+1).toString().padStart(2,'0')}-${dt.getDate().toString().padStart(2,'0')} ${dt.getHours().toString().padStart(2,'0')}:${dt.getMinutes().toString().padStart(2,'0')}:${dt.getSeconds().toString().padStart(2,'0')}` 4 | } 5 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "functions": { 4 | "api/vercel-ssr/index.js": { 5 | "includeFiles": "dist/**" 6 | } 7 | }, 8 | "routes": [ 9 | { 10 | "handle": "filesystem" 11 | }, 12 | { 13 | "src": "/.*", 14 | "dest": "/api/vercel-ssr/index.js" 15 | } 16 | ] 17 | } 18 | --------------------------------------------------------------------------------

Name	Email	Phone	City	Status
Graiden	vehicula.aliquet@semconsequat.co.uk	076 4820 8838	Offenburg	149 \| Active 151 \|
Dale	fringilla.euismod.enim@quam.ca	0500 527693	New Quay	159 \| Active 161 \|
Nathaniel	mi.Duis@diam.edu	(012165) 76278	Grumo Appula	169 \| Inactive 171 \|
Darius	velit@nec.com	0309 690 7871	Ways	179 \| Active 181 \|
Ganteng	velit@nec.com	0309 690 7871	Ways	189 \| Active 191 \|
Oleg	rhoncus.id@Aliquamauctorvelit.net	0500 441046	Rossignol	199 \| Active 201 \|
Kermit	diam.Sed.diam@anteVivamusnon.org	(01653) 27844	Patna	209 \| Active 211 \|

UI Design	245 \| 246 \| 253 \| 254 \|	60%
VueJS	260 \| 261 \| 268 \| 269 \|	30%
Laravel	275 \| 276 \| 283 \| 284 \|	50%
ReactJS	290 \| 291 \| 298 \| 299 \|	80%
Go	305 \| 306 \| 313 \| 314 \|	65%

404

Dashboard

BALANCE

Revenue

ORDERS

Sales Today

Sales

$21,102

Orders Today

Your Earnings

From last month

+$2,134

236 | Progress 238 |

Datatable

Svelte Garuda template