├── art
    └── banner.png
├── .gitignore
├── src
    ├── components
    │   ├── optional.vue
    │   ├── link.vue
    │   ├── progress.vue
    │   ├── attribute.vue
    │   ├── clear.vue
    │   ├── sticker.vue
    │   ├── empty.vue
    │   ├── tabs.vue
    │   ├── switch.vue
    │   ├── label.vue
    │   ├── tip.vue
    │   ├── badge.vue
    │   ├── cards.vue
    │   ├── banner.vue
    │   ├── error.vue
    │   ├── confirm.vue
    │   ├── notification.vue
    │   ├── remaining.vue
    │   ├── grid.vue
    │   ├── prompt.vue
    │   ├── modal.vue
    │   ├── metric.vue
    │   ├── dropdown.vue
    │   ├── table.vue
    │   ├── password.vue
    │   ├── textbox.vue
    │   ├── alert.vue
    │   ├── period.vue
    │   ├── menu.vue
    │   ├── tags.vue
    │   ├── search.vue
    │   ├── share.vue
    │   ├── button.vue
    │   ├── paginator.vue
    │   ├── upload.vue
    │   └── datetime.vue
    ├── mixins
    │   ├── Container.js
    │   ├── Utilities.js
    │   ├── Foundation.js
    │   └── Dialog.js
    ├── support
    │   └── vapor.js
    └── framework
    │   └── Dialog.js
├── README.md
├── LICENSE.md
└── package.json


/art/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/caneara/varnish/HEAD/art/banner.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | docs/.vitepress/dist
4 | docs/public/ProximaVara.woff2


--------------------------------------------------------------------------------
/src/components/optional.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <span class="varnish-optional varnish-font bg-gray-200/[.70] dark:bg-gray-600 font-medium text-[10px] text-gray-500 dark:text-gray-300 leading-normal uppercase relative rounded-lg select-none px-[6px]">
 3 |         {{ value }}
 4 |     </span>
 5 | </template>
 6 | 
 7 | <script>
 8 |     export default
 9 |     {
10 |         /**
11 |          * Define the public properties.
12 |          *
13 |          */
14 |         props : {
15 |             'value' : { type : String, default : 'Optional' },
16 |         },
17 |     }
18 | </script>


--------------------------------------------------------------------------------
/src/components/link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <Link rel="noopener"
 3 |           :title="title"
 4 |           :target="target"
 5 |           class="font-sans">
 6 | 
 7 |         <!-- Slot -->
 8 |         <slot></slot>
 9 | 
10 |     </Link>
11 | </template>
12 | 
13 | <script>
14 |     import { Link } from '@inertiajs/vue3';
15 | 
16 |     export default
17 |     {
18 |         /**
19 |          * Define the components.
20 |          *
21 |          */
22 |         components : {
23 |             Link,
24 |         },
25 | 
26 |         /**
27 |          * Define the public properties.
28 |          *
29 |          */
30 |         props : {
31 |             'target' : { type : String, default : '_self' },
32 |             'title'  : { type : String, default : '' },
33 |         },
34 |     }
35 | </script>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <!-- Banner -->
 2 | <p align="center">
 3 |     <a href="https://github.com/caneara/varnish">
 4 |         <img src="art/banner.png" />
 5 |     </a>
 6 | </p>
 7 | 
 8 | <!-- Badges -->
 9 | <p align="center">
10 |     <img src="https://img.shields.io/npm/v/@caneara/varnish.svg" alt="Latest Release" />
11 |     <img src="https://img.shields.io/npm/l/@caneara/varnish.svg" alt="License" />
12 | </p>
13 | 
14 | # Varnish UI
15 | 
16 | This library contains a set of UI components. Originally, these components were part of [Lumeno's](https://github.com/caneara/lumeno) codebase, however they have since been extracted, extended and made available for open-source use.
17 | 
18 | ## Abandoned
19 | 
20 | This package is now abandoned and will not receive further updates. That said, feel free to explore it for educational value.
21 | 
22 | ## License
23 | 
24 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
25 | 


--------------------------------------------------------------------------------
/src/components/progress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="varnish-progress relative">
 3 | 
 4 |         <!-- Bar -->
 5 |         <div class="varnish-progress-bar bg-gray-200 dark:bg-gray-500 w-full h-[8px] overflow-hidden relative rounded-[4px]">
 6 | 
 7 |             <!-- Step -->
 8 |             <div :style="`width: ${Math.round((value / maximum) * 100)}%`"
 9 |                  class="varnish-progress-step bg-sky-600/[.70] dark:bg-sky-400 h-[8px] rounded-[4px] rounded-r-none absolute top-0 left-0 transition-all duration-300">
10 |             </div>
11 | 
12 |         </div>
13 | 
14 |     </div>
15 | </template>
16 | 
17 | <script>
18 |     export default
19 |     {
20 |         /**
21 |          * Define the public properties.
22 |          *
23 |          */
24 |         props : {
25 |             'maximum' : { type : Number, default : 100 },
26 |             'value'   : { type : Number, default : 0 },
27 |         },
28 |     }
29 | </script>


--------------------------------------------------------------------------------
/src/mixins/Container.js:
--------------------------------------------------------------------------------
 1 | export default
 2 | {
 3 |     /**
 4 |      * Execute actions when the component is instantiated.
 5 |      *
 6 |      */
 7 |     created()
 8 |     {
 9 |         document.addEventListener('click', this.pageClicked);
10 |     },
11 | 
12 |     /**
13 |      * Execute actions when the component is unmounted.
14 |      *
15 |      */
16 |     unmounted()
17 |     {
18 |         document.removeEventListener('click', this.pageClicked);
19 |     },
20 | 
21 |     /**
22 |      * Define the supporting methods.
23 |      *
24 |      */
25 |     methods :
26 |     {
27 |         /**
28 |          * Handle a click or tap on the page.
29 |          *
30 |          */
31 |         pageClicked(event)
32 |         {
33 |             let trigger = this.$refs.trigger ? this.$refs.trigger : this.$el;
34 | 
35 |             if (! this.hasUserAttention() || trigger === event.target) return;
36 | 
37 |             trigger.contains(event.target) ? null : this.lostUserAttention();
38 |         },
39 |     }
40 | }


--------------------------------------------------------------------------------
/src/components/attribute.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :dusk="`attribute_${label.replaceAll(' ', '_').toLowerCase()}`"
 3 |          class="border-x md:border-x-0 border-b border-gray-200 first-of-type:border-t
 4 |                 first-of-type:rounded-t last-of-type:rounded-b
 5 |                 grid grid-cols-8 items-start gap-4 md:gap-6
 6 |                 pl-3 pr-5 pt-3 md:pt-5 pb-5 md:px-0">
 7 | 
 8 |         <!-- Label -->
 9 |         <div class="text-gray-500/90 col-span-8 md:col-span-2 lg:col-span-3">
10 |             {{ label }}
11 |         </div>
12 | 
13 |         <!-- Value -->
14 |         <div class="text-right md:text-left text-gray-700 col-span-8 md:col-span-6 lg:col-span-5">
15 |             <slot></slot>
16 |         </div>
17 | 
18 |     </div>
19 | </template>
20 | 
21 | <script>
22 |     export default
23 |     {
24 |         /**
25 |          * Define the public properties.
26 |          *
27 |          */
28 |         props : {
29 |             'label' : { type : String, default : '' },
30 |         },
31 |     }
32 | </script>


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright © Caneara and contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "@caneara/varnish",
 3 |     "author": "Caneara",
 4 |     "version": "5.0.4",
 5 |     "license": "MIT",
 6 |     "description": "A library of UI components built using Vue.js and TailwindCSS.",
 7 |     "repository": {
 8 |         "type": "git",
 9 |         "url": "https://github.com/caneara/varnish.git"
10 |     },
11 |     "keywords": [
12 |         "ui",
13 |         "vue",
14 |         "library",
15 |         "tailwind",
16 |         "component"
17 |     ],
18 |     "files": [
19 |         "src"
20 |     ],
21 |     "scripts": {
22 |         "watch": "vitepress dev docs",
23 |         "build": "vitepress build docs",
24 |         "serve": "vitepress serve docs"
25 |     },
26 |     "dependencies": {
27 |         "@yaireo/tagify": "^4.16.4",
28 |         "luxon": "^3.0.3"
29 |     },
30 |     "devDependencies": {
31 |         "autoprefixer": "^10.4.1",
32 |         "tailwindcss": "^3.1.8",
33 |         "vitepress": "^1.0.0-alpha.15"
34 |     },
35 |     "postcss": {
36 |         "plugins": {
37 |             "autoprefixer": {},
38 |             "tailwindcss": {
39 |                 "config": "docs/.vitepress/tailwind.js"
40 |             }
41 |         }
42 |     }
43 | }


--------------------------------------------------------------------------------
/src/components/clear.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-if="! automated()"
 3 |          style="transition: all 0.4s ease, background-color 0s"
 4 |          :class="(focus && filled) || (hover && filled) ? 'opacity-100 z-[2]' : 'opacity-0 pointer-events-none'"
 5 |          class="varnish-clear varnish-font w-[50px] h-[51px] flex justify-center items-center absolute top-0 right-0 transition duration-300 rounded-r">
 6 | 
 7 |         <!-- Icon -->
 8 |         <i title="Clear this field"
 9 |            @click.stop="$emit('click')"
10 |            class="varnish-icon fas fa-times text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 relative top-[.5px] left-[1.5px] cursor-pointer transition duration-300">
11 |         </i>
12 | 
13 |     </div>
14 | </template>
15 | 
16 | <script>
17 |     import Utilities from '../mixins/Utilities';
18 | 
19 |     export default
20 |     {
21 |         /**
22 |          * Define the mixins.
23 |          *
24 |          */
25 |         mixins : [
26 |             Utilities,
27 |         ],
28 | 
29 |         /**
30 |          * Define the events.
31 |          *
32 |          */
33 |         emits : ['click'],
34 | 
35 |         /**
36 |          * Define the public properties.
37 |          *
38 |          */
39 |         props : {
40 |             'hover'  : { type : Boolean, default : false },
41 |             'filled' : { type : Boolean, default : false },
42 |             'focus'  : { type : Boolean, default : false },
43 |         }
44 |     }
45 | </script>


--------------------------------------------------------------------------------
/src/mixins/Utilities.js:
--------------------------------------------------------------------------------
 1 | export default
 2 | {
 3 |     /**
 4 |      * Define the supporting methods.
 5 |      *
 6 |      */
 7 |     methods :
 8 |     {
 9 |         /**
10 |          * Determine if an automated testing framework is running.
11 |          *
12 |          */
13 |         automated()
14 |         {
15 |             let platforms = ['cypress', 'dusk'];
16 | 
17 |             for (const platform of platforms) {
18 |                 if (document.body.classList.contains(platform)) {
19 |                     return true;
20 |                 }
21 |             }
22 | 
23 |             return false;
24 |         },
25 | 
26 |         /**
27 |          * Determine if the given value is empty.
28 |          *
29 |          */
30 |         blank(value)
31 |         {
32 |             if (Array.isArray(value)) {
33 |                 return value.length === 0;
34 |             }
35 | 
36 |             if (value instanceof Date) {
37 |                 return false;
38 |             }
39 | 
40 |             if (typeof value === 'object' && value !== null) {
41 |                 return Object.keys(value).length === 0 &&
42 |                     Object.getOwnPropertyNames(value).length === 0;
43 |             }
44 | 
45 |             return ['', null, undefined].includes(value);
46 |         },
47 | 
48 |         /**
49 |          * Assign the given value to the clipboard.
50 |          *
51 |          */
52 |         copy(value, closure = null)
53 |         {
54 |             let promise = window.navigator.clipboard.writeText(value);
55 | 
56 |             return closure ? promise.then(() => closure()) : null;
57 |         },
58 |     }
59 | }


--------------------------------------------------------------------------------
/src/components/sticker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="varnish-sticker varnish-font w-full">
 3 | 
 4 |         <!-- Container -->
 5 |         <div class="varnish-container bg-white dark:bg-gray-800 border border-dashed border-gray-400/[.80] dark:border-gray-500/[.80] rounded relative">
 6 | 
 7 |             <!-- Input -->
 8 |             <input :id="name"
 9 |                    type="text"
10 |                    :name="name"
11 |                    :value="value"
12 |                    :readonly="true"
13 |                    class="varnish-content w-full bg-inherit text-[17px] text-gray-900 dark:text-gray-400 text-ellipsis overflow-hidden rounded appearance-none px-3 pt-[25px] pb-[6px]" />
14 | 
15 |             <!-- Label -->
16 |             <v-label :value="label"
17 |                      :focus="false"
18 |                      :filled="! blank(value)">
19 |             </v-label>
20 | 
21 |         </div>
22 | 
23 |     </div>
24 | </template>
25 | 
26 | <script>
27 |     import LabelComponent from './label.vue';
28 |     import Utilities from '../mixins/Utilities';
29 |     import Foundation from '../mixins/Foundation';
30 | 
31 |     export default
32 |     {
33 |         /**
34 |          * Define the mixins.
35 |          *
36 |          */
37 |         mixins : [
38 |             Utilities,
39 |             Foundation,
40 |         ],
41 | 
42 |         /**
43 |          * Define the components.
44 |          *
45 |          */
46 |         components : {
47 |             'v-label' : LabelComponent,
48 |         },
49 | 
50 |         /**
51 |          * Define the public properties.
52 |          *
53 |          */
54 |         props : {
55 |             'value' : { type : String, default : '' },
56 |         },
57 |     }
58 | </script>


--------------------------------------------------------------------------------
/src/components/empty.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-if="visible"
 3 |          class="varnish-empty varnish-font border border-dashed border-gray-300 dark:border-gray-500 w-full flex flex-col justify-center items-center rounded p-8 md:p-12">
 4 | 
 5 |         <!-- Icon -->
 6 |         <i :class="icon"
 7 |            v-if="! blank(icon)"
 8 |            class="varnish-icon text-[40px] text-sky-600/[.60] dark:text-sky-500/[.50] pt-1 mb-7">
 9 |         </i>
10 | 
11 |         <!-- Title -->
12 |         <span class="varnish-title varnish-font-native font-semibold text-[18px] text-gray-800 dark:text-gray-300 -tracking-[.3px] mb-[5px]">
13 |             {{ title }}
14 |         </span>
15 | 
16 |         <!-- Message -->
17 |         <span class="varnish-message text-[16px] text-gray-700 dark:text-gray-400 text-center leading-normal max-w-450px">
18 |             {{ message }}
19 |         </span>
20 | 
21 |         <!-- Action -->
22 |         <span @click="actionCommand()"
23 |               v-if="! blank(actionLabel) && ! blank(actionCommand)"
24 |               class="varnish-action font-semibold text-[13px] text-sky-600 dark:text-sky-400 hover:text-rose-700 dark:hover:text-rose-400 uppercase cursor-pointer transition duration-300 mt-5">
25 | 
26 |             <!-- Text -->
27 |             {{ actionLabel }}
28 | 
29 |         </span>
30 | 
31 |     </div>
32 | </template>
33 | 
34 | <script>
35 |     import Utilities from '../mixins/Utilities';
36 | 
37 |     export default
38 |     {
39 |         /**
40 |          * Define the mixins.
41 |          *
42 |          */
43 |         mixins : [
44 |             Utilities,
45 |         ],
46 | 
47 | 		/**
48 | 		 * Define the public properties.
49 | 		 *
50 | 		 */
51 | 		props : {
52 |             'actionCommand' : { type : Function, default : null },
53 |             'actionLabel'   : { type : String,   default : '' },
54 | 			'icon'          : { type : String,   default : 'fas fa-cubes' },
55 | 			'message'       : { type : String,   default : 'There are no items to display' },
56 | 			'title'         : { type : String,   default : 'Nothing to show' },
57 | 			'visible'       : { type : Boolean,  default : false },
58 | 		},
59 |     }
60 | </script>


--------------------------------------------------------------------------------
/src/components/tabs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="varnish-tabs varnish-font flex items-end overflow-x-auto mb-18">
 3 | 
 4 |         <!-- Tabs -->
 5 |         <div @click="tab.action()"
 6 |              :dusk="`varnish-tab-select-${tab.id}`"
 7 |              v-for="(tab, index) in items.filter(tab => tab?.visible ?? true)"
 8 |              class="varnish-tab group cursor-pointer whitespace-nowrap select-none transition duration-300 relative z-1">
 9 | 
10 |             <!-- Content -->
11 |             <div class="varnish-content flex items-center px-4 py-3 md:mx-1">
12 | 
13 |                 <!-- Icon -->
14 |                 <i :title="tab.label"
15 |                    class="varnish-icon text-[20px] lg:text-[17px] transition duration-300 md:mx-1 lg:ml-0 lg:mr-[14px]"
16 |                    :class="[tab.icon, tab.id === active ? 'text-sky-600 dark:text-sky-500' : 'text-gray-500/[.65] dark:text-gray-400']">
17 |                 </i>
18 | 
19 |                 <!-- Label -->
20 |                 <span v-html="tab.label"
21 |                       class="varnish-label font-medium text-[16px] transition duration-300 hidden lg:inline"
22 |                       :class="tab.id === active ? 'text-sky-600 dark:text-sky-500' : 'text-gray-600 dark:text-gray-400 hidden lg:inline'">
23 |                 </span>
24 | 
25 |             </div>
26 | 
27 |             <!-- Borders -->
28 |             <div class="varnish-border-top group-hover:bg-sky-600/[.80] dark:group-hover:bg-sky-500 w-full h-[1px] transition duration-300 relative z-1"></div>
29 |             <div class="varnish-border-bottom bg-gray-300 dark:bg-gray-500 group-hover:bg-sky-600/[.80] dark:group-hover:bg-sky-500 w-full h-[1px] transition duration-300 relative z-1"></div>
30 | 
31 |         </div>
32 | 
33 |         <!-- Track -->
34 |         <div class="varnish-track bg-gray-300 dark:bg-gray-500 w-full h-[1px] rounded-lg relative z-2"></div>
35 | 
36 | 	</div>
37 | </template>
38 | 
39 | <script>
40 | 	export default
41 |     {
42 | 		/**
43 | 		 * Define the public properties.
44 | 		 *
45 | 		 */
46 | 		props : {
47 | 			'active' : { type : String, default : '' },
48 | 			'items'  : { type : Array,  default : [] },
49 | 		},
50 | 	}
51 | </script>


--------------------------------------------------------------------------------
/src/components/switch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="varnish-switch varnish-font">
 3 | 
 4 |         <!-- Container -->
 5 |         <div class="varnish-container flex justify-between items-center">
 6 | 
 7 |             <!-- Hidden -->
 8 |             <input :id="name"
 9 |                    :name="name"
10 |                    type="hidden"
11 |                    :value="active ? 1 : 0">
12 | 
13 |             <!-- Label -->
14 |             <label class="varnish-label font-semibold text-[13px] text-gray-600/[.65] dark:text-gray-500 uppercase relative mr-5">
15 |                 {{ label }}
16 |             </label>
17 | 
18 |             <!-- Button -->
19 |             <button :dusk="name"
20 |                     :id="`toggle-${name}`"
21 |                     @click.prevent="change(active ? 0 : 1)"
22 |                     class="varnish-toggle w-[60px] h-[31px] relative transition-all duration-200 rounded-full cursor-pointer
23 |                            after:h-[25px] after:w-[25px] after:bg-white dark:after:bg-gray-300 after:absolute after:transition-all after:duration-200 after:top-[3px] after:rounded-full"
24 |                     :class="active ? 'varnish-active after:left-[32px] bg-emerald-600/[.80] dark:bg-emerald-600' : 'after:left-[3px] bg-gray-400/[.40] dark:bg-gray-800'">
25 |             </button>
26 | 
27 |         </div>
28 | 
29 |         <!-- Error -->
30 |         <v-error :value="fault"></v-error>
31 | 
32 |     </div>
33 | </template>
34 | 
35 | <script>
36 |     import ErrorComponent from './error.vue';
37 |     import Foundation from '../mixins/Foundation';
38 | 
39 |     export default
40 |     {
41 |         /**
42 |          * Define the mixins.
43 |          *
44 |          */
45 |         mixins : [
46 |             Foundation,
47 |         ],
48 | 
49 |         /**
50 |          * Define the components.
51 |          *
52 |          */
53 |         components : {
54 |             'v-error' : ErrorComponent,
55 |         },
56 | 
57 |         /**
58 |          * Define the computed properties.
59 |          *
60 |          */
61 |         computed :
62 |         {
63 |             /**
64 |              * Determine if the CheckBox is in an active state.
65 |              *
66 |              */
67 |             active()
68 |             {
69 |                 return ['1', 'true', 'yes', 'on', 1, true].includes(this.modelValue);
70 |             },
71 |         },
72 |     }
73 | </script>


--------------------------------------------------------------------------------
/src/components/label.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <label v-if="! automated()"
 3 |            style="width: calc(100% - 19px)"
 4 |            :class="filled ? small : (focus ? small : large)"
 5 |            class="varnish-label varnish-font bg-white dark:bg-gray-800 text-gray-700/[.90] dark:text-gray-400 flex items-center cursor-text select-none pointer-events-none absolute top-0 left-1">
 6 | 
 7 |         <!-- Icon -->
 8 |         <i :class="icon"
 9 |            v-if="! filled && ! focus && icon"
10 |            class="varnish-icon w-[31px] min-w-[31px] max-w-[31px] text-[15px] text-gray-500/[.40] dark:text-gray-500/[.50] text-center relative top-[.5px] mr-[6px]">
11 |         </i>
12 | 
13 |         <!-- Value -->
14 |         <span class="varnish-value"
15 |               :class="icon ? '' : 'ml-[6px]'">
16 | 
17 |             <!-- Text -->
18 |             {{ value }}
19 | 
20 |         </span>
21 | 
22 |         <!-- Optional -->
23 |         <v-optional :value="optionalText"
24 |                     class="relative top-[1px] ml-3"
25 |                     v-if="optional && ! filled && ! focus">
26 |         </v-optional>
27 | 
28 |     </label>
29 | </template>
30 | 
31 | <script>
32 |     import Utilities from '../mixins/Utilities';
33 |     import OptionalComponent from './optional.vue';
34 | 
35 |     export default
36 |     {
37 |         /**
38 |          * Define the mixins.
39 |          *
40 |          */
41 |         mixins : [
42 |             Utilities,
43 |         ],
44 | 
45 |         /**
46 |          * Define the components.
47 |          *
48 |          */
49 |         components : {
50 |             'v-optional' : OptionalComponent,
51 |         },
52 | 
53 |         /**
54 |          * Define the data model.
55 |          *
56 |          */
57 |         data() { return {
58 |             large : 'text-[16px] pl-[6px] pr-4 pt-[18px]',
59 |             small : 'text-[13px] pl-2 pr-3 pt-[8px] pb-[5px]',
60 |         }},
61 | 
62 |         /**
63 |          * Define the public properties.
64 |          *
65 |          */
66 |         props : {
67 |             'filled'       : { type : Boolean, default : false },
68 |             'focus'        : { type : Boolean, default : false },
69 |             'icon'         : { type : String,  default : 'fas fa-terminal' },
70 |             'optional'     : { type : Boolean, default : false },
71 |             'optionalText' : { type : String,  default : 'Optional' },
72 |             'value'        : { type : String,  default : 'Label' },
73 |         },
74 |     }
75 | </script>


--------------------------------------------------------------------------------
/src/components/tip.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <v-modal :dismiss="false"
 3 |              :visible="visible"
 4 |              class="varnish-tip">
 5 | 
 6 |         <!-- Container -->
 7 |         <div class="flex flex-col md:flex-row md:-m-6 md:-mb-7">
 8 | 
 9 |             <!-- Circle -->
10 |             <div class="varnish-circle bg-purple-500/[.30] dark:bg-purple-600/[.50] h-[60px] w-[60px] min-w-[60px] flex justify-center items-center mx-auto md:mx-0 rounded-full">
11 |                 <i class="varnish-icon fas fa-info text-[30px] text-purple-600 dark:text-purple-400 relative left-[0.5px] -top-[1px]"></i>
12 |             </div>
13 | 
14 |             <!-- Content -->
15 |             <div class="w-full mt-6 md:ml-7 md:mt-0">
16 | 
17 |                 <!-- Information -->
18 |                 <div v-html="message"
19 |                      class="varnish-message text-[17px] text-gray-600 dark:text-gray-400 text-center md:text-left leading-[1.6rem] md:mr-7 mb-8">
20 |                 </div>
21 | 
22 |                 <!-- Actions -->
23 |                 <div class="varnish-actions flex flex-col-reverse md:flex-row justify-end gap-x-4">
24 |                     <v-button color="blue"
25 |                               label="Close"
26 |                               mode="outline"
27 |                               id="dialog_tip_close"
28 |                               @click="$emit('close')">
29 |                     </v-button>
30 |                 </div>
31 | 
32 |             </div>
33 | 
34 |         </div>
35 | 
36 |     </v-modal>
37 | </template>
38 | 
39 | <script>
40 |     import ModalComponent from './modal.vue';
41 |     import ButtonComponent from './button.vue';
42 |     import Utilities from '../mixins/Utilities';
43 | 
44 |     export default
45 |     {
46 |         /**
47 |          * Define the mixins.
48 |          *
49 |          */
50 |         mixins : [
51 |             Utilities,
52 |         ],
53 | 
54 |         /**
55 |          * Define the components.
56 |          *
57 |          */
58 |         components : {
59 |             'v-button' : ButtonComponent,
60 |             'v-modal'  : ModalComponent,
61 |         },
62 | 
63 |         /**
64 |          * Define the events.
65 |          *
66 |          */
67 |         emits : ['close'],
68 | 
69 |         /**
70 |          * Define the public properties.
71 |          *
72 |          */
73 |         props : {
74 |             'message' : { type : String,  default : '' },
75 | 			'visible' : { type : Boolean, default : false },
76 |         },
77 |     }
78 | </script>


--------------------------------------------------------------------------------
/src/mixins/Foundation.js:
--------------------------------------------------------------------------------
 1 | export default
 2 | {
 3 |     /**
 4 |      * Define the data model.
 5 |      *
 6 |      */
 7 |     data() { return {
 8 |         fault : this.error,
 9 |         focus : false,
10 |         hover : false,
11 |     }},
12 | 
13 |     /**
14 |      * Define the events.
15 |      *
16 |      */
17 |     emits : ['change', 'update:modelValue'],
18 | 
19 |     /**
20 |      * Define the public properties.
21 |      *
22 |      */
23 |     props : {
24 |         'autocomplete' : { type : String,                           default : 'off' },
25 |         'error'        : { type : String,                           default : '' },
26 |         'icon'         : { type : String,                           default : '' },
27 |         'id'           : { type : String,                           default : '' },
28 |         'label'        : { type : String,                           default : 'Label' },
29 |         'modelValue'   : { type : [String, Number, Boolean, Array], default : '' },
30 |         'optional'     : { type : Boolean,                          default : false },
31 |         'optionalText' : { type : String,                           default : 'Optional' },
32 |         'placeholder'  : { type : String,                           default : '' },
33 |     },
34 | 
35 |     /**
36 |      * Define the computed properties.
37 |      *
38 |      */
39 |     computed :
40 |     {
41 |         /**
42 |          * Create a unique identifier for the component.
43 |          *
44 |          */
45 |         name()
46 |         {
47 |             if (this.id) return this.id;
48 | 
49 |             if (this.label) return this.label.toLowerCase().replaceAll(' ', '_');
50 | 
51 |             return `id-${parseInt(performance.now())}`;
52 |         },
53 |     },
54 | 
55 |     /**
56 |      * Define the watch methods.
57 |      *
58 |      */
59 |     watch :
60 |     {
61 |         /**
62 |          * Watch the 'error' property.
63 |          *
64 |          */
65 |         error : function(current, previous)
66 |         {
67 |             return this.fault = current;
68 |         }
69 |     },
70 | 
71 |     /**
72 |      * Define the supporting methods.
73 |      *
74 |      */
75 |     methods :
76 |     {
77 |         /**
78 |          * Set the component's value.
79 |          *
80 |          */
81 |         change(payload = undefined)
82 |         {
83 |             this.fault = '';
84 | 
85 |             if (payload === undefined) return;
86 | 
87 |             this.$emit('change', payload);
88 |             this.$emit('update:modelValue', payload);
89 |         }
90 |     }
91 | }


--------------------------------------------------------------------------------
/src/components/badge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :title="tooltip"
 3 |          v-if="! blank(value)"
 4 |          class="varnish-badge varnish-font">
 5 | 
 6 |         <!-- Content -->
 7 |         <div :class="[modes[mode][color], uppercase ? 'uppercase' : '']"
 8 |              class="varnish-content inline-block rounded-full font-semibold text-[12px] tracking-[.1px] select-none whitespace-nowrap px-[10px] pt-1 pb-1">
 9 | 
10 |             <!-- Text -->
11 |             {{ value }}
12 | 
13 |         </div>
14 | 
15 |     </div>
16 | </template>
17 | 
18 | <script>
19 |     import Utilities from '../mixins/Utilities';
20 | 
21 |     export default
22 |     {
23 |         /**
24 |          * Define the mixins.
25 |          *
26 |          */
27 |         mixins : [
28 |             Utilities,
29 |         ],
30 | 
31 |         /**
32 |          * Define the data model.
33 |          *
34 |          */
35 |         data() { return {
36 |             modes : {
37 |                 opaque : {
38 |                     blue   : 'bg-sky-500/[.15] dark:bg-sky-700 text-sky-700/[.80] dark:text-sky-200',
39 |                     green  : 'bg-emerald-500/[.15] dark:bg-emerald-700 text-emerald-700/[.80] dark:text-emerald-200',
40 |                     gray   : 'bg-gray-500/[.10] dark:bg-gray-700 text-gray-700/[.80] dark:text-gray-200',
41 |                     purple : 'bg-purple-500/[.15] dark:bg-purple-700 text-purple-900/70 dark:text-purple-200',
42 |                     red    : 'bg-red-500/[.15] dark:bg-red-700 text-red-800/[.80] dark:text-red-200',
43 |                     yellow : 'bg-yellow-500/[.15] dark:bg-yellow-600 text-yellow-700/[.80] dark:text-yellow-100',
44 |                 },
45 |                 transparent : {
46 |                     blue   : 'bg-transparent text-sky-600 dark:text-sky-400',
47 |                     green  : 'bg-transparent text-emerald-600 dark:text-emerald-400',
48 |                     gray   : 'bg-transparent text-gray-500 dark:text-gray-400',
49 |                     purple : 'bg-transparent text-purple-600 dark:text-purple-400',
50 |                     red    : 'bg-transparent text-red-600 dark:text-red-400',
51 |                     yellow : 'bg-transparent text-yellow-600 dark:text-yellow-400',
52 |                 }
53 |             }
54 |         }},
55 | 
56 |         /**
57 |          * Define the public properties.
58 |          *
59 |          */
60 |         props : {
61 |             'color'     : { type : String,  default : 'blue' },
62 |             'mode'      : { type : String,  default : 'opaque' },
63 |             'tooltip'   : { type : String,  default : '' },
64 |             'uppercase' : { type : Boolean, default : true },
65 |             'value'     : { type : String,  default : '' },
66 |         },
67 |     }
68 | </script>


--------------------------------------------------------------------------------
/src/support/vapor.js:
--------------------------------------------------------------------------------
 1 | export default class Vapor
 2 | {
 3 |     /**
 4 |      * Retrieve a signed storage link to upload with.
 5 |      *
 6 |      */
 7 |     static async requestSignedUrl(file, options = {})
 8 |     {
 9 |         return JSON.parse(await function() {
10 |             return new Promise(function(resolve) {
11 |                 let request = new XMLHttpRequest();
12 | 
13 |                 request.open('POST', '/vapor/signed-storage-url');
14 |                 request.onload = () => resolve(request.response);
15 | 
16 |                 request.setRequestHeader('Content-Type', 'application/json');
17 |                 request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
18 |                 request.setRequestHeader('X-CSRF-TOKEN', window.app.config.globalProperties.$page.props.csrf);
19 | 
20 |                 request.send(JSON.stringify({
21 |                     bucket       : options.bucket || '',
22 |                     content_type : options.contentType || file.type,
23 |                     expires      : options.expires || '',
24 |                     visibility   : options.visibility || 'public-read',
25 |                 }));
26 |             });
27 |         }());
28 |     }
29 | 
30 |     /**
31 |      * Send the given file using the given signed storage url.
32 |      *
33 |      */
34 |     static async sendFile(url, file, options = {}, headers = {})
35 |     {
36 |         return await function() {
37 |             return new Promise(function(resolve) {
38 |                 let request = new XMLHttpRequest();
39 | 
40 |                 request.open('PUT', url);
41 |                 request.onload = () => resolve(request.response);
42 | 
43 |                 if (options.progress) {
44 |                     request.upload.onprogress = (e) => options.progress(
45 |                         Math.ceil((e.loaded / e.total) * 100)
46 |                     );
47 |                 }
48 | 
49 |                 for (const header in headers) {
50 |                     request.setRequestHeader(header, headers[header]);
51 |                 }
52 | 
53 |                 request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
54 |                 request.setRequestHeader('Content-Type', options.contentType || file.type);
55 |                 request.setRequestHeader('X-CSRF-TOKEN', window.app.config.globalProperties.$page.props.csrf);
56 | 
57 |                 request.send(file);
58 |             });
59 |         }();
60 |     }
61 | 
62 |     /**
63 |      * Store a file in S3 and return its UUID, key, and other information.
64 |      *
65 |      */
66 |     static async store(file, options = {})
67 |     {
68 |         let response = await this.requestSignedUrl(file, options);
69 | 
70 |         if ('Host' in response.headers) delete response.headers['Host'];
71 |         if ('Content-Type' in response.headers) delete response.headers['Content-Type'];
72 | 
73 |         await this.sendFile(response.url, file, options, response.headers);
74 | 
75 |         if (file.name) response.extension = file.name.split('.').pop();
76 | 
77 |         return response;
78 |     }
79 | }


--------------------------------------------------------------------------------
/src/components/cards.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="varnish-cards varnish-font">
 3 | 
 4 |         <!-- Input -->
 5 |         <input :name="id"
 6 |                type="hidden"
 7 |                :value="selected">
 8 | 
 9 |         <!-- Grid -->
10 |         <div :class="layout"
11 |              class="varnish-items grid gap-4">
12 | 
13 |             <!-- Item -->
14 |             <div :key="item.id"
15 |                  v-for="item in items"
16 |                  @click="$emit('change', item.id)"
17 |                  :dusk="`varnish-card-${id}-${item.id}`"
18 |                  class="varnish-item border flex flex-col items-start rounded cursor-pointer relative transition duration-300 p-5 pb-4"
19 |                  :class="selected === item.id ? 'bg-sky-100/[.20] dark:bg-sky-700/[.20] border-sky-700/[.40] dark:border-sky-600' : 'border-gray-300 dark:border-gray-600'">
20 | 
21 |                 <!-- Title -->
22 |                 <h6 class="varnish-header varnish-font-native text-[16px] flex items-center mb-4">
23 | 
24 |                     <!-- Icon -->
25 |                     <span class="varnish-icon text-gray-400 mr-3">
26 |                         <i class="fas"
27 |                            :class="item.icon">
28 |                         </i>
29 |                     </span>
30 | 
31 |                     <!-- Text -->
32 |                     <span class="varnish-label">
33 |                         {{ item.label }}
34 |                     </span>
35 | 
36 |                 </h6>
37 | 
38 |                 <!-- Summary -->
39 |                 <span class="varnish-summary text-[15.5px] text-gray-500/[.90] dark:text-gray-400 text-left leading-normal">
40 |                     {{ item.summary }}
41 |                 </span>
42 | 
43 |                 <!-- Check -->
44 |                 <i :class="selected === item.id ? 'opacity-100' : 'opacity-0'"
45 |                    class="varnish-check fas fa-check-circle text-sky-600 dark:text-sky-500 transition duration-300 absolute top-4 right-[14px]">
46 |                 </i>
47 | 
48 |             </div>
49 | 
50 |         </div>
51 | 
52 |         <!-- Error -->
53 |         <v-error :value="error"></v-error>
54 | 
55 |     </div>
56 | </template>
57 | 
58 | <script>
59 |     import ErrorComponent from './error.vue';
60 | 
61 |     export default
62 |     {
63 |         /**
64 |          * Define the components.
65 |          *
66 |          */
67 |         components : {
68 |             'v-error' : ErrorComponent,
69 |         },
70 | 
71 |         /**
72 |          * Define the events.
73 |          *
74 |          */
75 |         emits : ['change'],
76 | 
77 |         /**
78 |          * Define the public properties.
79 |          *
80 |          */
81 |         props : {
82 |             'error'    : { type : String,           default : '' },
83 |             'id'       : { type : String,           default : '' },
84 |             'items'    : { type : Array,            default : [] },
85 |             'layout'   : { type : String,           default : 'grid-cols-1' },
86 |             'selected' : { type : [Number, String], default : 0 },
87 |         },
88 |     }
89 | </script>


--------------------------------------------------------------------------------
/src/components/banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-if="display"
 3 |          class="varnish-banner varnish-font">
 4 | 
 5 |         <!-- Container -->
 6 |         <div :class="[colors[color], `varnish-${color}`]"
 7 |              class="varnish-container bg-gradient-to-br flex flex-col rounded-lg relative overflow-hidden p-8">
 8 | 
 9 |             <!-- Icon -->
10 |             <i :class="icon"
11 |                class="varnish-icon text-white text-[185px] hidden md:inline opacity-[.07] absolute -bottom-2 -right-[56px] -rotate-[32deg]">
12 |             </i>
13 | 
14 |             <!-- Title -->
15 |             <span class="varnish-title font-bold text-[22px] text-white mb-4">
16 |                 {{ title }}
17 |             </span>
18 | 
19 |             <!-- Message -->
20 |             <span class="varnish-message text-[17px] text-gray-200 leading-normal break-words md:pr-[130px]">
21 |                 {{ message }}
22 |             </span>
23 | 
24 |             <!-- Dismiss -->
25 |             <i v-if="dismiss"
26 |                @click="hide()"
27 |                title="Hide this banner"
28 |                class="varnish-dismiss fas fa-times text-gray-300 hover:text-white absolute top-3 right-3 transition duration-300 cursor-pointer">
29 |             </i>
30 | 
31 |         </div>
32 | 
33 |     </div>
34 | </template>
35 | 
36 | <script>
37 |     export default
38 |     {
39 |         /**
40 |          * Define the data model.
41 |          *
42 |          */
43 |         data() { return {
44 |             display : true,
45 |             colors : {
46 |                 blue   : 'from-sky-600 to-indigo-800',
47 |                 green  : 'from-emerald-600 to-green-800',
48 |                 orange : 'from-yellow-600 to-orange-700',
49 |                 red    : 'from-rose-500 to-red-700',
50 |             }
51 |         }},
52 | 
53 |         /**
54 |          * Define the public properties.
55 |          *
56 |          */
57 |         props : {
58 |             'color'   : { type : String,  default : 'blue' },
59 |             'dismiss' : { type : Boolean, default : false },
60 |             'icon'    : { type : String,  default : '' },
61 |             'id'      : { type : String,  default : '' },
62 |             'message' : { type : String,  default : '' },
63 |             'title'   : { type : String,  default : '' },
64 |         },
65 | 
66 |         /**
67 |          * Execute actions when the component is instantiated.
68 |          *
69 |          */
70 |         created()
71 |         {
72 |             this.display = ! localStorage.getItem(`varnish_hide_banner_${this.id}`);
73 |         },
74 | 
75 |         /**
76 |          * Define the supporting methods.
77 |          *
78 |          */
79 |         methods :
80 |         {
81 |             /**
82 |              * Dismiss the banner from appearing again.
83 |              *
84 |              */
85 |             hide()
86 |             {
87 |                 if (! this.dismiss) return;
88 | 
89 |                 this.display = false;
90 | 
91 |                 localStorage.setItem(`varnish_hide_banner_${this.id}`, 1);
92 |             }
93 |         },
94 |     }
95 | </script>


--------------------------------------------------------------------------------
/src/components/error.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <label v-html="content"
  3 |            v-if="! blank(value)"
  4 |            class="varnish-error varnish-font block font-sans font-semibold text-[13px] text-red-700 dark:text-red-300 text-right uppercase tracking-[.2px] my-2">
  5 |     </label>
  6 | </template>
  7 | 
  8 | <script>
  9 |     import Utilities from '../mixins/Utilities';
 10 | 
 11 |     export default
 12 |     {
 13 |         /**
 14 |          * Define the mixins.
 15 |          *
 16 |          */
 17 |         mixins : [
 18 |             Utilities,
 19 |         ],
 20 | 
 21 |         /**
 22 |          * Define the public properties.
 23 |          *
 24 |          */
 25 |         props : {
 26 |             'beforeScroll' : { type : Function, default : null },
 27 |             'scrollDelay'  : { type : Number,   default : 0 },
 28 |             'value'        : { type : String,   default : '' },
 29 |         },
 30 | 
 31 |         /**
 32 |          * Define the computed properties.
 33 |          *
 34 |          */
 35 |         computed :
 36 |         {
 37 |             /**
 38 |              * Eliminate any script injection and respect line breaks.
 39 |              *
 40 |              */
 41 |             content()
 42 |             {
 43 |                 return this.value
 44 |                            .replaceAll(/</g, '&lt;')
 45 |                            .replaceAll(/>/g, '&gt;')
 46 |                            .replaceAll("\n", '<br />');
 47 |             },
 48 |         },
 49 | 
 50 |         /**
 51 |          * Define the watch methods.
 52 |          *
 53 |          */
 54 |         watch :
 55 |         {
 56 |             /**
 57 |              * Watch the 'value' property.
 58 |              *
 59 |              */
 60 |             value : function(current, previous)
 61 |             {
 62 |                 if (this.blank(current)) return;
 63 | 
 64 |                 this.$nextTick(() => this.handleRevisedContent());
 65 |             }
 66 |         },
 67 | 
 68 | 		/**
 69 | 		 * Define the supporting methods.
 70 | 		 *
 71 | 		 */
 72 | 		methods :
 73 |         {
 74 |             /**
 75 |              * Respond to the component's text being changed.
 76 |              *
 77 |              */
 78 |             handleRevisedContent()
 79 |             {
 80 |                 if (! this.isFirstErrorOnPage()) return;
 81 | 
 82 |                 if (this.beforeScroll !== null) this.beforeScroll();
 83 | 
 84 |                 setTimeout(() => this.scrollToInstance(), this.scrollDelay);
 85 |             },
 86 | 
 87 |             /**
 88 |              * Determine whether the component is the first of its type on the page.
 89 |              *
 90 |              */
 91 |             isFirstErrorOnPage()
 92 |             {
 93 |                 return document.querySelector('.varnish-error').isSameNode(this.$el);
 94 |             },
 95 | 
 96 |             /**
 97 |              * Adjust the browser's viewport so the component is visible.
 98 |              *
 99 |              */
100 |             scrollToInstance()
101 |             {
102 |                 this.$el.scrollIntoView({
103 |                     behavior : 'smooth',
104 |                     block    : 'center',
105 |                 });
106 |             },
107 |         }
108 |     }
109 | </script>


--------------------------------------------------------------------------------
/src/components/confirm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <v-modal :dismiss="false"
 3 |              :visible="visible"
 4 |              class="varnish-confirm">
 5 | 
 6 |         <!-- Container -->
 7 |         <div class="flex flex-col md:flex-row md:-m-6 md:-ml-7 md:-mb-7">
 8 | 
 9 |             <!-- Circle -->
10 |             <div class="varnish-circle bg-yellow-500/[.30] dark:bg-yellow-800/[.50] h-[60px] w-[60px] min-w-[60px] flex justify-center items-center mx-auto rounded-full">
11 |                 <i class="varnish-icon fas fa-exclamation text-[30px] text-yellow-600"></i>
12 |             </div>
13 | 
14 |             <!-- Content -->
15 |             <div class="w-full mt-6 md:ml-7 md:mt-0">
16 | 
17 |                 <!-- Title -->
18 |                 <div class="varnish-font-native varnish-title font-semibold text-[21px] text-gray-900 dark:text-white text-center md:text-left leading-snug mb-3">
19 |                     {{ title }}
20 |                 </div>
21 | 
22 |                 <!-- Information -->
23 |                 <div class="varnish-summary text-[17px] text-gray-500 dark:text-gray-400 text-center md:text-left leading-[1.6rem] mb-8">
24 |                     {{ summary }}
25 |                 </div>
26 | 
27 |                 <!-- Actions -->
28 |                 <div class="varnish-actions flex flex-col-reverse md:flex-row justify-end gap-x-4">
29 | 
30 |                     <!-- Cancel -->
31 |                     <v-button mode="link"
32 |                               color="gray"
33 |                               label="Cancel"
34 |                               class="mt-1 md:mt-0"
35 |                               @click="$emit('cancel')"
36 |                               id="dialog_confirm_cancel">
37 |                     </v-button>
38 | 
39 |                     <!-- Continue -->
40 |                     <v-button color="blue"
41 |                               mode="outline"
42 |                               label="Continue"
43 |                               @click="$emit('continue')"
44 |                               id="dialog_confirm_continue">
45 |                     </v-button>
46 | 
47 |                 </div>
48 | 
49 |             </div>
50 | 
51 |         </div>
52 | 
53 |     </v-modal>
54 | </template>
55 | 
56 | <script>
57 |     import ModalComponent from './modal.vue';
58 |     import ButtonComponent from './button.vue';
59 |     import Utilities from '../mixins/Utilities';
60 | 
61 |     export default
62 |     {
63 |         /**
64 |          * Define the mixins.
65 |          *
66 |          */
67 |         mixins : [
68 |             Utilities,
69 |         ],
70 | 
71 |         /**
72 |          * Define the components.
73 |          *
74 |          */
75 |         components : {
76 |             'v-button' : ButtonComponent,
77 |             'v-modal'  : ModalComponent,
78 |         },
79 | 
80 |         /**
81 |          * Define the events.
82 |          *
83 |          */
84 |         emits : ['cancel', 'continue'],
85 | 
86 |         /**
87 |          * Define the public properties.
88 |          *
89 |          */
90 |         props : {
91 |             'summary' : { type : String,  default : 'Note that in most cases, this action is not reversible. If you need some help, then please contact support.' },
92 |             'title'   : { type : String,  default : 'Are you sure you wish to proceed?' },
93 | 			'visible' : { type : Boolean, default : false },
94 |         },
95 |     }
96 | </script>


--------------------------------------------------------------------------------
/src/components/notification.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <Transition enter-to-class="translate-x-0"
 3 |                 leave-from-class="translate-x-0"
 4 |                 enter-active-class="transition duration-500"
 5 |                 leave-active-class="transition duration-700"
 6 |                 leave-to-class="translate-x-[350px] md:translate-x-[450px]"
 7 |                 enter-from-class="translate-x-[350px] md:translate-x-[450px]">
 8 | 
 9 |         <!-- Notification -->
10 |         <div v-if="show"
11 |              class="varnish-notification varnish-font min-w-[250px] max-w-[350px] fixed top-[74px] right-0 z-[1002]">
12 | 
13 |             <!-- Container -->
14 |             <div ref="container"
15 |                  class="varnish-container bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 flex items-center shadow-sm rounded-lg relative z-[30] pl-[15px] pr-6 py-3 mr-[18px]">
16 | 
17 |                 <!-- Icon -->
18 |                 <div class="varnish-icon opacity-70 mr-3 relative top-[.5px] flex self-stretch">
19 | 
20 |                     <!-- SVG -->
21 |                     <svg width="24"
22 |                         height="24"
23 |                         style="fill: none"
24 |                         viewBox="0 0 24 24"
25 |                         class="varnish-svg"
26 |                         stroke="currentColor"
27 |                         :class="(types[type].class || '')">
28 | 
29 |                         <!-- Graphic -->
30 |                         <path stroke-width="2"
31 |                             :d="types[type].svg || ''"
32 |                             stroke-linecap="round"
33 |                             stroke-linejoin="round" />
34 | 
35 |                     </svg>
36 | 
37 |                 </div>
38 | 
39 |                 <!-- Message -->
40 |                 <span v-html="message"
41 |                     class="varnish-message text-[16px] text-gray-800 dark:text-gray-300 leading-normal break-words relative top-[.5px]">
42 |                 </span>
43 | 
44 |             </div>
45 | 
46 |         </div>
47 | 
48 |     </Transition>
49 | </template>
50 | 
51 | <script>
52 |     export default
53 |     {
54 |         /**
55 |          * Define the data model.
56 |          *
57 |          */
58 |         data() { return {
59 |             show : this.visible,
60 |             types : {
61 |                 info    : { class : 'text-blue-700 dark:text-blue-400',   svg : 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
62 |                 error   : { class : 'text-red-700 dark:text-red-400',     svg : 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z' },
63 |                 success : { class : 'text-green-700 dark:text-green-400', svg : 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' },
64 |             },
65 |         }},
66 | 
67 |         /**
68 |          * Define the public properties.
69 |          *
70 |          */
71 |         props : {
72 |             'message' : { type : String,  default : '' },
73 |             'type'    : { type : String,  default : 'success' },
74 |             'visible' : { type : Boolean, default : false },
75 |         },
76 | 
77 |         /**
78 |          * Execute actions when the component is mounted to the DOM.
79 |          *
80 |          */
81 |         mounted()
82 |         {
83 |             setTimeout(() => this.show = true, 50);
84 |             setTimeout(() => this.show = false, 3000);
85 |         },
86 |     }
87 | </script>


--------------------------------------------------------------------------------
/src/components/remaining.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-remaining varnish-font flex items-center justify-center rounded-full relative left-[2px]">
  3 | 
  4 |         <!-- Ring -->
  5 |         <svg class="varnish-ring w-[30px] h-[30px]">
  6 | 
  7 |             <!-- Track -->
  8 |             <circle r="12"
  9 |                     cx="15"
 10 |                     cy="15"
 11 |                     stroke-width="2"
 12 |                     fill="transparent"
 13 |                     stroke="currentColor"
 14 |                     class="varnish-track text-gray-300 dark:text-gray-600">
 15 |             </circle>
 16 | 
 17 |             <!-- Indicator -->
 18 |             <circle r="12"
 19 |                     cx="15"
 20 |                     cy="15"
 21 |                     stroke-width="2"
 22 |                     fill="transparent"
 23 |                     stroke="currentColor"
 24 |                     class="varnish-indicator"
 25 |                     transform="rotate(-90 15 15)"
 26 |                     :stroke-dasharray="(12 * 2) * Math.PI"
 27 |                     :stroke-dashoffset="((100 - percentage) / 100) * ((12 * 2) * Math.PI)"
 28 |                     :class="percentage <= 75 ? colors.green : (percentage <= 90 ? colors.yellow : colors.red)">
 29 |             </circle>
 30 | 
 31 |         </svg>
 32 | 
 33 |         <!-- Figure -->
 34 |         <span class="varnish-figure font-semibold text-[12px] absolute"
 35 |               :class="percentage <= 75 ? colors.green : (percentage <= 90 ? colors.yellow : colors.red)">
 36 | 
 37 |             <!-- Text -->
 38 |             {{ figure }}
 39 | 
 40 |         </span>
 41 | 
 42 |     </div>
 43 | </template>
 44 | 
 45 | <script>
 46 |     export default
 47 |     {
 48 |         /**
 49 |          * Define the data model.
 50 |          *
 51 |          */
 52 |         data() { return {
 53 |             colors : {
 54 |                 green  : 'varnish-green text-green-600 dark:text-green-500',
 55 |                 yellow : 'varnish-yellow text-yellow-600 dark:text-yellow-500',
 56 |                 red    : 'varnish-red text-red-600 dark:text-red-500',
 57 |             }
 58 |         }},
 59 | 
 60 |         /**
 61 |          * Define the public properties.
 62 |          *
 63 |          */
 64 |         props : {
 65 |             'maximum' : { type : Number, default : 100 },
 66 |             'value'   : { type : Number, default : 0 },
 67 |         },
 68 | 
 69 |         /**
 70 |          * Define the computed properties.
 71 |          *
 72 |          */
 73 |         computed :
 74 |         {
 75 |             /**
 76 |              * Determine the appropriate label to display as an indicator.
 77 |              *
 78 |              */
 79 |             figure()
 80 |             {
 81 |                 if ((this.maximum - this.value) >= 0) {
 82 |                     return (this.maximum - this.value) > 99 ? '' : this.maximum - this.value;
 83 |                 }
 84 | 
 85 |                 return `${(this.maximum - this.value) <= -10 ? '!' : this.maximum - this.value}`;
 86 |             },
 87 | 
 88 |             /**
 89 |              * Calculate the current percentage to use for the ring.
 90 |              *
 91 |              */
 92 |             percentage()
 93 |             {
 94 |                 let value = parseInt((this.value / this.maximum) * 100);
 95 | 
 96 |                 return value >= 100 ? 100 : value;
 97 |             },
 98 |         },
 99 |     }
100 | </script>


--------------------------------------------------------------------------------
/src/components/grid.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-grid">
  3 | 
  4 |         <!-- Paginator -->
  5 |         <v-paginator class="mb-4"
  6 |                      v-if="toolbar"
  7 |                      :source="source"
  8 |                      :download="download"
  9 |                      :reset="!! System.Browser.queryString('search')"
 10 |                      :search="() => search = (search !== null) ? ! search : (System.Browser.queryString('search') ? false : true)">
 11 |         </v-paginator>
 12 | 
 13 |         <!-- Search -->
 14 |         <v-search class="lg:mb-4"
 15 |                   :source="source"
 16 |                   @closed="search = false"
 17 |                   style="border-width: 1px; border-radius: 0.25rem"
 18 |                   v-if="search ? true : (search === null ? System.Browser.queryString('search') : false)">
 19 |         </v-search>
 20 | 
 21 |         <!-- Content -->
 22 |         <div :class="layout"
 23 |              class="grid grid-cols-1 gap-4 mt-4">
 24 | 
 25 |             <!-- Item -->
 26 |             <div :key="row[rowKey]"
 27 |                  v-for="row in source.data.rows ?? []"
 28 |                  :dusk="`varnish-grid-item-${row[rowKey]}`"
 29 |                  :class="blank(action) ? '' : 'cursor-pointer'"
 30 |                  @click="! blank(action) && ! $event.target.parentNode.classList.contains('varnish-trigger') ? action(row) : null">
 31 | 
 32 |                 <!-- Slot -->
 33 |                 <slot :item="row"></slot>
 34 | 
 35 |             </div>
 36 | 
 37 |         </div>
 38 | 
 39 |         <!-- Empty -->
 40 |         <v-empty :message="emptyMessage"
 41 |                  :actionLabel="emptyLabel"
 42 |                  :actionCommand="emptyAction"
 43 |                  :visible="! (source.data.rows ?? []).length">
 44 |         </v-empty>
 45 | 
 46 |         <!-- Paginator -->
 47 |         <v-paginator v-if="toolbar"
 48 |                      :source="source">
 49 |         </v-paginator>
 50 | 
 51 |     </div>
 52 | </template>
 53 | 
 54 | <script>
 55 |     import EmptyComponent from './empty.vue';
 56 |     import SearchComponent from './search.vue';
 57 |     import Utilities from '../mixins/Utilities';
 58 |     import PaginatorComponent from './paginator.vue';
 59 | 
 60 |     export default
 61 |     {
 62 |         /**
 63 |          * Define the mixins.
 64 |          *
 65 |          */
 66 |         mixins : [
 67 |             Utilities,
 68 |         ],
 69 | 
 70 |         /**
 71 |          * Define the components.
 72 |          *
 73 |          */
 74 |         components : {
 75 |             'v-empty'     : EmptyComponent,
 76 |             'v-paginator' : PaginatorComponent,
 77 |             'v-search'    : SearchComponent,
 78 |         },
 79 | 
 80 |         /**
 81 |          * Define the data model.
 82 |          *
 83 |          */
 84 |         data() { return {
 85 |             search : null,
 86 |         }},
 87 | 
 88 |         /**
 89 |          * Define the public properties.
 90 |          *
 91 |          */
 92 |         props : {
 93 |             'action'       : { type : Function, default : null },
 94 |             'download'     : { type : Function, default : null },
 95 |             'emptyAction'  : { type : Function, default : null },
 96 |             'emptyLabel'   : { type : String,   default : 'Create one now' },
 97 |             'emptyMessage' : { type : String,   default : '' },
 98 |             'layout'       : { type : String,   default : 'md:grid-cols-2' },
 99 |             'rowKey'       : { type : String,   default : 'id' },
100 |             'source'       : { type : Object,   default : {} },
101 |             'toolbar'      : { type : Boolean,  default : true },
102 |         },
103 |     }
104 | </script>


--------------------------------------------------------------------------------
/src/components/prompt.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-modal :dismiss="false"
  3 |              :visible="visible"
  4 |              class="varnish-prompt">
  5 | 
  6 |         <!-- Circle -->
  7 |         <div class="varnish-circle bg-purple-500/[.20] dark:bg-purple-600/[.30] h-[60px] w-[60px] flex justify-center items-center rounded-full mx-auto mb-6">
  8 |             <i class="varnish-icon fas fa-comment-dots text-[30px] text-purple-700/[.40] dark:text-purple-500"></i>
  9 |         </div>
 10 | 
 11 |         <!-- Title -->
 12 |         <div class="varnish-font-native varnish-title font-bold text-[21px] text-gray-900 dark:text-white text-center leading-snug mb-4">
 13 |             {{ title }}
 14 |         </div>
 15 | 
 16 |         <!-- Information -->
 17 |         <div class="varnish-summary text-[17px] text-gray-500 dark:text-gray-400 text-center leading-[1.6rem] md:px-6 mb-8">
 18 |             {{ summary }}
 19 |         </div>
 20 | 
 21 |         <!-- Input -->
 22 |         <v-textbox class="mb-4"
 23 |                    :label="label"
 24 |                    :lines="lines"
 25 |                    v-model="content"
 26 |                    :maxLength="maxLength"
 27 |                    icon="fas fa-signature"
 28 |                    @return="$emit('continue', content)">
 29 |         </v-textbox>
 30 | 
 31 |         <!-- Actions -->
 32 |         <div class="varnish-actions flex flex-col-reverse md:flex-row justify-end gap-x-4">
 33 | 
 34 |             <!-- Cancel -->
 35 |             <v-button mode="link"
 36 |                       color="gray"
 37 |                       label="Cancel"
 38 |                       class="mt-1 md:mt-0"
 39 |                       @click="$emit('cancel')">
 40 |             </v-button>
 41 | 
 42 |             <!-- Continue -->
 43 |             <v-button color="blue"
 44 |                       mode="outline"
 45 |                       label="Continue"
 46 |                       @click="$emit('continue', content)">
 47 |             </v-button>
 48 | 
 49 |         </div>
 50 | 
 51 |     </v-modal>
 52 | </template>
 53 | 
 54 | <script>
 55 |     import ModalComponent from './modal.vue';
 56 |     import ButtonComponent from './button.vue';
 57 |     import Utilities from '../mixins/Utilities';
 58 |     import TextBoxComponent from './textbox.vue';
 59 | 
 60 |     export default
 61 |     {
 62 |         /**
 63 |          * Define the mixins.
 64 |          *
 65 |          */
 66 |         mixins : [
 67 |             Utilities,
 68 |         ],
 69 | 
 70 |         /**
 71 |          * Define the components.
 72 |          *
 73 |          */
 74 |         components : {
 75 |             'v-button'  : ButtonComponent,
 76 |             'v-modal'   : ModalComponent,
 77 |             'v-textbox' : TextBoxComponent,
 78 |         },
 79 | 
 80 |         /**
 81 |          * Define the data model.
 82 |          *
 83 |          */
 84 |         data() {
 85 |             return {
 86 |                 content : this.fallback,
 87 |             }
 88 |         },
 89 | 
 90 |         /**
 91 |          * Define the events.
 92 |          *
 93 |          */
 94 |         emits : ['cancel', 'continue'],
 95 | 
 96 |         /**
 97 |          * Define the public properties.
 98 |          *
 99 |          */
100 |         props : {
101 |             'fallback'  : { type : String,  default : '' },
102 |             'label'     : { type : String,  default : 'Your response' },
103 |             'lines'     : { type : Number,  default : 1 },
104 |             'maxLength' : { type : Number,  default : null },
105 |             'summary'   : { type : String,  default : 'In order to proceed, some input is required. Please enter it below, then press continue, or press cancel.' },
106 |             'title'     : { type : String,  default : 'Awaiting your response...' },
107 | 			'visible'   : { type : Boolean, default : false },
108 |         },
109 |     }
110 | </script>


--------------------------------------------------------------------------------
/src/components/modal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="varnish-modal varnish-font w-full h-full hidden fixed top-0 left-0 z-[1001] overflow-x-hidden overflow-y-auto transition duration-200">
  3 | 
  4 | 		<!-- Background -->
  5 | 		<div ref="background"
  6 | 			 @click="dismiss ? close() : null"
  7 |              class="varnish-background bg-black/[.60] dark:bg-gray-800 opacity-0 fixed inset-0 z-[1000] transition duration-200">
  8 | 		</div>
  9 | 
 10 | 		<!-- Container -->
 11 |         <div class="varnish-container flex min-h-screen items-center py-14">
 12 | 
 13 |             <!-- Content -->
 14 |             <div ref="content"
 15 |                  class="varnish-content relative z-[1001] w-full md:max-w-[600px] md:rounded-lg transition duration-200 scale-110 mx-auto">
 16 | 
 17 |                 <!-- Slot -->
 18 |                 <div class="varnish-slot bg-white dark:bg-gray-700 md:rounded-lg p-10 md:p-20">
 19 |                     <slot></slot>
 20 |                 </div>
 21 | 
 22 |             </div>
 23 | 
 24 |         </div>
 25 | 
 26 |         <!-- Close -->
 27 |         <i ref="close"
 28 |            v-if="dismiss"
 29 |            @click="close()"
 30 |            dusk="modal-close"
 31 |            title="Close the popup"
 32 |            class="varnish-close fas fa-times text-[20px] text-gray-400 dark:text-gray-600 hover:text-gray-900 dark:hover:text-gray-400 transition duration-200 cursor-pointer opacity-0 absolute z-[1001] top-[14px] right-[14px]">
 33 |         </i>
 34 | 
 35 | 	</div>
 36 | </template>
 37 | 
 38 | <script>
 39 | 	export default
 40 |     {
 41 |         /**
 42 |          * Define the events.
 43 |          *
 44 |          */
 45 |         emits : ['closed'],
 46 | 
 47 | 		/**
 48 | 		 * Define the public properties.
 49 | 		 *
 50 | 		 */
 51 | 		props: {
 52 |             'dismiss' : { type : Boolean, default : true },
 53 | 			'visible' : { type : Boolean, default : false },
 54 | 		},
 55 | 
 56 |         /**
 57 |          * Define the watch methods.
 58 |          *
 59 |          */
 60 |         watch :
 61 |         {
 62 |             /**
 63 |              * Watch the 'visible' property.
 64 |              *
 65 |              */
 66 |             visible : function(current, previous)
 67 |             {
 68 |                 return current ? this.open() : this.close();
 69 |             }
 70 |         },
 71 | 
 72 | 		/**
 73 | 		 * Execute actions when the component is mounted to the DOM.
 74 | 		 *
 75 | 		 */
 76 | 		mounted()
 77 | 		{
 78 | 			if (this.visible) {
 79 |                 this.open();
 80 |             }
 81 | 		},
 82 | 
 83 | 		/**
 84 | 		 * Execute actions when the component is unmounted from the DOM.
 85 | 		 *
 86 | 		 */
 87 | 		unmounted()
 88 | 		{
 89 |             document.body.style.overflow = 'visible';
 90 | 		},
 91 | 
 92 | 		/**
 93 | 		 * Define the supporting methods.
 94 | 		 *
 95 | 		 */
 96 | 		methods:
 97 |         {
 98 | 			/**
 99 | 			 * Close the modal window.
100 | 			 *
101 | 			 */
102 | 			close()
103 | 			{
104 | 				document.body.style.overflow = 'visible';
105 | 
106 | 				this.$refs.content.style.opacity   = 0;
107 |                 this.$refs.content.style.transform = 'scale(1.1)';
108 | 
109 |                 if (this.$refs['close'] ?? null) {
110 | 				    setTimeout(() => this.$refs.close.style.opacity = 0, 100);
111 |                 }
112 | 
113 | 				setTimeout(() => this.$refs.background.style.opacity = 0, 100);
114 | 				setTimeout(() => this.$el.classList.add('hidden'), 600);
115 | 				setTimeout(() => this.$emit('closed'), 650);
116 | 			},
117 | 
118 | 			/**
119 | 			 * Open the modal window.
120 | 			 *
121 | 			 */
122 | 			open()
123 | 			{
124 | 				document.body.style.overflow = 'hidden';
125 | 
126 | 				this.$el.classList.remove('hidden');
127 | 
128 | 				this.$refs.content.style.opacity   = 0;
129 | 				this.$refs.content.style.transform = '';
130 | 
131 |                 if (this.$refs['close'] ?? null) {
132 | 				    setTimeout(() => this.$refs.close.style.opacity = 1, 50);
133 |                 }
134 | 
135 | 				setTimeout(() => this.$el.scrollTop = 0, 50);
136 |                 setTimeout(() => this.$refs.background.style.opacity = 1, 50);
137 | 				setTimeout(() => this.$refs.content.style.opacity = 1, 50);
138 | 				setTimeout(() => this.$refs.content.style.transform = 'scale(1)', 50);
139 | 			},
140 | 		}
141 | 	}
142 | </script>


--------------------------------------------------------------------------------
/src/components/metric.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :id="id"
  3 |          :dusk="id"
  4 |          class="varnish-metric varnish-font bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 w-full flex flex-col rounded-lg p-6 md:p-8">
  5 | 
  6 |         <!-- Label -->
  7 |         <span class="varnish-label font-medium text-[13px] text-gray-500/[.85] dark:text-gray-500 uppercase mb-4">
  8 |             {{ label }}
  9 |         </span>
 10 | 
 11 |         <!-- Summary -->
 12 |         <div class="varnish-summary flex items-center">
 13 | 
 14 |             <!-- Current -->
 15 |             <span class="varnish-current font-semibold text-[35px] text-gray-700 dark:text-gray-300 mr-6">
 16 |                 {{ formatted }}
 17 |             </span>
 18 | 
 19 |             <!-- Performance -->
 20 |             <div class="varnish-performance flex flex-col">
 21 | 
 22 |                 <!-- Direction -->
 23 |                 <div class="varnish-direction flex items-center font-semibold">
 24 |                     <div :class="trends[direction].color"
 25 |                          class="flex items-center gap-2 rounded-full px-2 py-[3px]">
 26 | 
 27 |                         <!-- Icon -->
 28 |                         <i :class="trends[direction].icon"
 29 |                            class="varnish-icon fas text-[13px]">
 30 |                         </i>
 31 | 
 32 |                         <!-- Percentage -->
 33 |                         <span class="varnish-percentage text-[13px] whitespace-nowrap">
 34 |                             {{ Math.abs(percentage) > 999 ? '999' : Math.abs(percentage) }}%
 35 |                         </span>
 36 | 
 37 |                     </div>
 38 |                 </div>
 39 | 
 40 |                 <!-- Period -->
 41 |                 <span class="varnish-period font-medium text-[13px] text-gray-500/[.70] dark:text-gray-500 pl-[2px] pt-[5px]">
 42 |                     vs. {{ period }}
 43 |                 </span>
 44 | 
 45 |             </div>
 46 | 
 47 |         </div>
 48 | 
 49 |     </div>
 50 | </template>
 51 | 
 52 | <script>
 53 |     export default
 54 |     {
 55 |         /**
 56 |          * Define the data model.
 57 |          *
 58 |          */
 59 |         data() { return {
 60 |             trends : {
 61 |                 down : {
 62 |                     color : 'bg-rose-50 text-rose-600/[.90] dark:bg-rose-500/[.50] dark:text-rose-100',
 63 |                     icon  : 'fa-arrow-trend-down',
 64 |                 },
 65 |                 same : {
 66 |                     color : 'bg-sky-50 text-sky-500 dark:bg-sky-500/[.40] dark:text-sky-100',
 67 |                     icon  : 'fa-arrows-rotate',
 68 |                 },
 69 |                 up : {
 70 |                     color : 'bg-emerald-50 text-emerald-600/[.90] dark:bg-emerald-500/[.40] dark:text-emerald-100',
 71 |                     icon  : 'fa-arrow-trend-up',
 72 |                 },
 73 |             }
 74 |         }},
 75 | 
 76 |         /**
 77 |          * Define the public properties.
 78 |          *
 79 |          */
 80 |         props : {
 81 |             'id'       : { type : String, default : '' },
 82 |             'currency' : { type : String, default : 'USD' },
 83 |             'current'  : { type : Number, default : 0 },
 84 |             'label'    : { type : String, default : 'Label' },
 85 |             'locale'   : { type : String, default : 'en-US' },
 86 |             'period'   : { type : String, default : '' },
 87 |             'previous' : { type : Number, default : 0 },
 88 |             'type'     : { type : String, default : 'integer' },
 89 |         },
 90 | 
 91 |         /**
 92 |          * Define the computed properties.
 93 |          *
 94 |          */
 95 |         computed :
 96 |         {
 97 |             /**
 98 |              * Determine if the current figure is up, down or the same as the previous period.
 99 |              *
100 |              */
101 |             direction()
102 |             {
103 |                 return this.percentage === 0 ? 'same' : (this.percentage > 0 ? 'up' : 'down');
104 |             },
105 | 
106 |             /**
107 |              * Format the current figure accordingly.
108 |              *
109 |              */
110 |             formatted()
111 |             {
112 |                 let options = {
113 |                     compactDisplay : 'short',
114 |                     notation       : 'compact',
115 |                 };
116 | 
117 |                 if (this.type === 'financial') {
118 |                     options.currency = this.currency;
119 |                     options.style    = 'currency';
120 |                 }
121 | 
122 |                 return new Intl.NumberFormat(this.locale, options).format(this.current);
123 |             },
124 | 
125 |             /**
126 |              * Calculate the difference between the current and previous values.
127 |              *
128 |              */
129 |             percentage()
130 |             {
131 |                 return ((this.current - this.previous) / this.previous) * 100;
132 |             },
133 |         },
134 |     }
135 | </script>


--------------------------------------------------------------------------------
/src/framework/Dialog.js:
--------------------------------------------------------------------------------
  1 | import { createApp } from 'vue';
  2 | import TipComponent from '../components/tip.vue';
  3 | import ShareComponent from '../components/share.vue';
  4 | import PromptComponent from '../components/prompt.vue';
  5 | import ConfirmComponent from '../components/confirm.vue';
  6 | import NotificationComponent from '../components/notification.vue';
  7 | 
  8 | export default class Dialog
  9 | {
 10 |     /**
 11 |      * Insert a blank container into the DOM.
 12 |      *
 13 |      */
 14 |     static #createDialogElement()
 15 |     {
 16 |         let div = document.createElement('div');
 17 | 
 18 |         div.id = `dialog-${parseInt(window.performance.now())}`;
 19 | 
 20 |         document.body.appendChild(div);
 21 | 
 22 |         return { container : null, id : div.id };
 23 |     }
 24 | 
 25 |     /**
 26 |      * Remove the open dialog from the viewport.
 27 |      *
 28 |      */
 29 |     static #closeDialog(element)
 30 |     {
 31 |         element.container._container._vnode.component.props.visible = false;
 32 | 
 33 |         setTimeout(() => {
 34 |             element.container.unmount();
 35 | 
 36 |             element.container = undefined;
 37 | 
 38 |             document.body.removeChild(document.getElementById(element.id));
 39 |         }, 300);
 40 |     }
 41 | 
 42 |     /**
 43 |      * Request that the user confirm a particular action.
 44 |      *
 45 |      */
 46 |     static confirm(title = null, summary = null)
 47 |     {
 48 |         let element = Dialog.#createDialogElement();
 49 | 
 50 |         return new Promise((resolve, reject) =>
 51 |         {
 52 |             element.container = createApp(ConfirmComponent, {
 53 |                 summary : summary ?? 'Note that in most cases, this action is not reversible. If you need some help, then please contact support.',
 54 |                 title   : title ?? 'Are you sure you wish to proceed?',
 55 |                 visible : true,
 56 |                 onCancel : () => {
 57 |                     resolve(false);
 58 | 
 59 |                     Dialog.#closeDialog(element);
 60 |                 },
 61 |                 onContinue : () => {
 62 |                     resolve(true);
 63 | 
 64 |                     Dialog.#closeDialog(element);
 65 |                 },
 66 |             });
 67 | 
 68 |             element.container.mount(`#${element.id}`);
 69 |         });
 70 |     }
 71 | 
 72 |     /**
 73 |      * Advise the user that something has happened.
 74 |      *
 75 |      */
 76 |     static notification(type, message)
 77 |     {
 78 |         let element = Dialog.#createDialogElement();
 79 | 
 80 |         element.container = createApp(NotificationComponent, {
 81 |             message : message,
 82 |             type    : type,
 83 |         });
 84 | 
 85 |         element.container.mount(`#${element.id}`);
 86 | 
 87 |         setTimeout(() => Dialog.#closeDialog(element), 3500);
 88 |     }
 89 | 
 90 |     /**
 91 |      * Request that the user provide some feedback.
 92 |      *
 93 |      */
 94 |     static prompt(title = null, summary = null, label = null, fallback = '', lines = 1, maxLength = null)
 95 |     {
 96 |         let element = Dialog.#createDialogElement();
 97 | 
 98 |         return new Promise((resolve, reject) =>
 99 |         {
100 |             element.container = createApp(PromptComponent, {
101 |                 fallback  : fallback,
102 |                 label     : label ?? 'Your response',
103 |                 lines     : lines,
104 |                 maxLength : maxLength,
105 |                 summary   : summary ?? 'In order to proceed, some input is required. Please enter it below, then press continue, or press cancel.',
106 |                 title     : title ?? 'Awaiting your response...',
107 |                 visible   : true,
108 |                 onCancel : () => {
109 |                     resolve(fallback);
110 | 
111 |                     Dialog.#closeDialog(element);
112 |                 },
113 |                 onContinue : (event) => {
114 |                     resolve(['', null, undefined].includes(event) ? fallback : event);
115 | 
116 |                     Dialog.#closeDialog(element);
117 |                 },
118 |             });
119 | 
120 |             element.container.mount(`#${element.id}`);
121 |         });
122 |     }
123 | 
124 |     /**
125 |      * Allow the user to share the given link.
126 |      *
127 |      */
128 |     static share(url)
129 |     {
130 |         let element = Dialog.#createDialogElement();
131 | 
132 |         element.container = createApp(ShareComponent, {
133 |             url     : url,
134 |             visible : true,
135 |         });
136 | 
137 |         element.container.mount(`#${element.id}`);
138 |     }
139 | 
140 |     /**
141 |      * Display some information to the user.
142 |      *
143 |      */
144 |     static tip(message = '')
145 |     {
146 |         let element = Dialog.#createDialogElement();
147 | 
148 |         element.container = createApp(TipComponent, {
149 |             message : message,
150 |             visible : true,
151 |             onClose : () => Dialog.#closeDialog(element),
152 |         });
153 | 
154 |         element.container.mount(`#${element.id}`);
155 |     }
156 | }


--------------------------------------------------------------------------------
/src/components/dropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="varnish-dropdown varnish-font w-full">
  3 | 
  4 |         <!-- Container -->
  5 |         <div @mouseover="hover = true"
  6 |              @mouseout="hover = false"
  7 |              class="varnish-container bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded relative transition duration-300">
  8 | 
  9 | 			<!-- Input -->
 10 | 			<select :id="name"
 11 |                     ref="input"
 12 | 					:name="name"
 13 | 					:value="modelValue"
 14 |                     @focus="focus = true"
 15 |                     @focusout="focus = false"
 16 | 					@change="change($event.target.value)"
 17 |                     :class="blank(modelValue) ? '' : 'pt-[24px] pb-[7px]'"
 18 | 					style="line-height: 1.3; padding-right: 50px; -webkit-padding-end: 50px !important"
 19 | 					class="varnish-input w-full h-[51px] bg-inherit text-[17px] text-gray-900 dark:text-gray-400 align-middle text-ellipsis overflow-hidden rounded appearance-none cursor-pointer pl-3">
 20 | 
 21 | 				<!-- Items -->
 22 | 				<option v-for="item in items"
 23 |                         :value="item[itemValueKey]"
 24 |                         :selected="modelValue === item[itemValueKey] ? 'selected' : ''">
 25 | 
 26 |                     <!-- Text -->
 27 |                     {{ item[itemTextKey] }}
 28 | 
 29 | 				</option>
 30 | 
 31 | 			</select>
 32 | 
 33 |             <!-- Label -->
 34 |             <v-label :icon="icon"
 35 |                      :value="label"
 36 |                      :optional="optional"
 37 |                      :optionalText="optionalText"
 38 |                      :focus="! blank(modelValue)"
 39 |                      :filled="! blank(modelValue)">
 40 |             </v-label>
 41 | 
 42 | 			<!-- Caret -->
 43 | 			<i :class="blank(modelValue) || (! blank(modelValue) && ! hover) ? 'opacity-100' : 'opacity-0'"
 44 |                class="varnish-caret fas fa-caret-down text-gray-400 dark:text-gray-500 cursor-pointer pointer-events-none absolute top-[18px] right-[19px]">
 45 |             </i>
 46 | 
 47 |             <!-- Clear -->
 48 |             <v-clear :focus="focus"
 49 |                      :hover="hover"
 50 |                      @click="change('')"
 51 |                      :filled="! blank(modelValue)">
 52 |             </v-clear>
 53 | 
 54 |         </div>
 55 | 
 56 |         <!-- Error -->
 57 |         <v-error :value="fault"></v-error>
 58 | 
 59 |     </div>
 60 | </template>
 61 | 
 62 | <script>
 63 |     import ClearComponent from './clear.vue';
 64 |     import ErrorComponent from './error.vue';
 65 |     import LabelComponent from './label.vue';
 66 |     import Utilities from '../mixins/Utilities';
 67 |     import Foundation from '../mixins/Foundation';
 68 | 
 69 |     export default
 70 |     {
 71 |         /**
 72 |          * Define the mixins.
 73 |          *
 74 |          */
 75 |         mixins : [
 76 |             Utilities,
 77 |             Foundation,
 78 |         ],
 79 | 
 80 |         /**
 81 |          * Define the components.
 82 |          *
 83 |          */
 84 |         components : {
 85 |             'v-clear' : ClearComponent,
 86 |             'v-error' : ErrorComponent,
 87 |             'v-label' : LabelComponent,
 88 |         },
 89 | 
 90 |         /**
 91 |          * Define the events.
 92 |          *
 93 |          */
 94 |         emits : ['change'],
 95 | 
 96 | 		/**
 97 | 		 * Define the public properties.
 98 | 		 *
 99 | 		 */
100 | 		props : {
101 | 			'items'        : { type : [Array, Object], default : [] },
102 | 			'itemTextKey'  : { type : String,          default : '' },
103 | 			'itemValueKey' : { type : String,          default : '' },
104 | 		},
105 | 
106 |         /**
107 |          * Execute actions when the component is mounted to the DOM.
108 |          *
109 |          */
110 |         mounted()
111 |         {
112 |             if (typeof this.modelValue === 'boolean') {
113 |                 this.$emit('update:modelValue', this.modelValue ? 1 : 0);
114 |             }
115 | 
116 |             let selected = this.items.find(item => item[this.itemValueKey] === this.modelValue);
117 | 
118 |             if (selected === undefined || [null, undefined].includes(this.modelValue)) {
119 |                 this.change('');
120 | 
121 |                 return this.$refs.input.selectedIndex = -1;
122 |             }
123 | 
124 |             if (this.modelValue.toString() === '') {
125 |                 this.$refs.input.selectedIndex = -1;
126 |             }
127 |         },
128 | 
129 | 		/**
130 | 		 * Define the supporting methods.
131 | 		 *
132 | 		 */
133 | 		methods :
134 |         {
135 | 			/**
136 | 			 * Set the component's value.
137 | 			 *
138 | 			 */
139 | 			change(payload = undefined)
140 | 			{
141 |                 this.$refs.input.blur();
142 | 
143 | 				this.fault = '';
144 | 
145 |                 if (payload === undefined) return;
146 | 
147 |                 if (! ['', null].includes(payload) && ! isNaN(payload)) {
148 |                     payload = Number(payload);
149 |                 }
150 | 
151 |                 this.$emit('update:modelValue', payload);
152 | 
153 |                 this.$emit('change', {
154 |                     text  : this.$refs.input[this.$refs.input.selectedIndex]?.text ?? '',
155 |                     value : payload,
156 |                 });
157 | 			},
158 | 		}
159 | 	}
160 | </script>


--------------------------------------------------------------------------------
/src/components/table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-table">
  3 | 
  4 |         <!-- Paginator -->
  5 |         <v-paginator class="mb-4"
  6 |                      v-if="toolbar"
  7 |                      :source="source"
  8 |                      :download="download"
  9 |                      :reset="!! System.Browser.queryString('search')"
 10 |                      :search="() => search = (search !== null) ? ! search : (System.Browser.queryString('search') ? false : true)">
 11 |         </v-paginator>
 12 | 
 13 |         <!-- Content -->
 14 |         <div class="lg:border border-gray-300/[.70] rounded">
 15 | 
 16 |             <!-- Table -->
 17 |             <table>
 18 | 
 19 |                 <!-- Head -->
 20 |                 <thead>
 21 |                     <tr>
 22 | 
 23 |                         <!-- Columns -->
 24 |                         <th v-for="column in source.data.columns"
 25 |                             :class="column.align ? column.align : 'text-center first-of-type:text-left'">
 26 | 
 27 |                             <!-- Column -->
 28 |                             {{ (column?.desktop ?? true) ? column.label : '' }}
 29 | 
 30 |                         </th>
 31 | 
 32 |                     </tr>
 33 |                 </thead>
 34 | 
 35 |                 <!-- Body -->
 36 |                 <tbody>
 37 | 
 38 |                     <!-- Search Row -->
 39 |                     <tr class="search"
 40 |                         v-if="search ? true : (search === null ? System.Browser.queryString('search') : false)">
 41 | 
 42 |                         <!-- Cell -->
 43 |                         <td :colspan="source.data.columns.length">
 44 |                             <v-search :source="source"
 45 |                                       @closed="search = false">
 46 |                             </v-search>
 47 |                         </td>
 48 | 
 49 |                     </tr>
 50 | 
 51 |                     <!-- Content Row -->
 52 |                     <tr :key="row[rowKey]"
 53 |                         v-for="row in source.data.rows ?? []"
 54 |                         :dusk="`varnish-table-row-${row[rowKey]}`"
 55 |                         :class="blank(action) ? '' : 'cursor-pointer'"
 56 |                         @click="! blank(action) && ! $event.target.parentNode.classList.contains('varnish-trigger') ? action(row) : null">
 57 | 
 58 |                         <!-- Cell -->
 59 |                         <td :data-title="column.label"
 60 |                             v-for="column in source.data.columns"
 61 |                             :class="[
 62 |                                 column.styles,
 63 |                                 column.align ? column.align : 'text-right lg:text-center first-of-type:lg:text-left',
 64 |                                 column.label === 'Actions' ? 'lg:w-[90px] lg:min-w-[90px] lg:max-w-[90px] lg:pr-0' : 'lg:max-w-[250px]',
 65 |                             ]">
 66 | 
 67 |                             <!-- Slot -->
 68 |                             <slot :item="row"
 69 |                                   :name="column.label.toLowerCase().replaceAll(' ', '')">
 70 |                             </slot>
 71 | 
 72 |                         </td>
 73 | 
 74 |                     </tr>
 75 | 
 76 |                 </tbody>
 77 | 
 78 |             </table>
 79 | 
 80 |             <!-- Empty -->
 81 |             <v-empty class="lg:border-0"
 82 |                      :message="emptyMessage"
 83 |                      :actionLabel="emptyLabel"
 84 |                      :actionCommand="emptyAction"
 85 |                      :visible="! (source.data.rows ?? []).length">
 86 |             </v-empty>
 87 | 
 88 |         </div>
 89 | 
 90 |         <!-- Paginator -->
 91 |         <v-paginator v-if="toolbar"
 92 |                      :source="source">
 93 |         </v-paginator>
 94 | 
 95 |     </div>
 96 | </template>
 97 | 
 98 | <script>
 99 |     import EmptyComponent from './empty.vue';
100 |     import SearchComponent from './search.vue';
101 |     import Utilities from '../mixins/Utilities';
102 |     import PaginatorComponent from './paginator.vue';
103 | 
104 |     export default
105 |     {
106 |         /**
107 |          * Define the mixins.
108 |          *
109 |          */
110 |         mixins : [
111 |             Utilities,
112 |         ],
113 | 
114 |         /**
115 |          * Define the components.
116 |          *
117 |          */
118 |         components : {
119 |             'v-empty'     : EmptyComponent,
120 |             'v-paginator' : PaginatorComponent,
121 |             'v-search'    : SearchComponent,
122 |         },
123 | 
124 |         /**
125 |          * Define the data model.
126 |          *
127 |          */
128 |         data() { return {
129 |             search : null,
130 |         }},
131 | 
132 |         /**
133 |          * Define the public properties.
134 |          *
135 |          */
136 |         props : {
137 |             'action'       : { type : Function, default : null },
138 |             'download'     : { type : Function, default : null },
139 |             'emptyAction'  : { type : Function, default : null },
140 |             'emptyLabel'   : { type : String,   default : 'Create one now' },
141 |             'emptyMessage' : { type : String,   default : '' },
142 |             'rowKey'       : { type : String,   default : 'id' },
143 |             'source'       : { type : Object,   default : {} },
144 |             'toolbar'      : { type : Boolean,  default : true },
145 |         },
146 |     }
147 | </script>


--------------------------------------------------------------------------------
/src/components/password.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-password varnish-font w-full min-w-[250px]">
  3 | 
  4 |         <!-- Container -->
  5 |         <div @mouseover="hover = true"
  6 |              @mouseout="hover = false"
  7 |              class="varnish-container bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded relative transition duration-300">
  8 | 
  9 |             <!-- Input -->
 10 |             <input :id="name"
 11 |                    :name="name"
 12 |                    :dusk="name"
 13 |                    type="password"
 14 |                    :value="modelValue"
 15 |                    @focus="focus = true"
 16 |                    @focusout="focus = false"
 17 |                    :placeholder="placeholder"
 18 |                    :autocomplete="autocomplete"
 19 |                    @input="change($event.target.value)"
 20 |                    :class="hover || focus ? 'pr-[50px]' : 'pr-3'"
 21 |                    class="varnish-input w-full bg-inherit font-medium text-[17px] text-gray-900 dark:text-gray-400 text-ellipsis overflow-hidden rounded appearance-none pl-3 pt-[25px] pb-[6px]" />
 22 | 
 23 |             <!-- Label -->
 24 |             <v-label :icon="icon"
 25 |                      :value="label"
 26 |                      :focus="focus"
 27 |                      :optional="false"
 28 |                      :filled="! blank(modelValue)">
 29 |             </v-label>
 30 | 
 31 |             <!-- Clear -->
 32 |             <v-clear :focus="focus"
 33 |                      :hover="hover"
 34 |                      @click="clear()"
 35 |                      :filled="! blank(modelValue)">
 36 |             </v-clear>
 37 | 
 38 | 			<!-- Generate -->
 39 |             <div v-if="generate && ! automated()"
 40 |                  style="transition: all 0.4s ease, background-color 0s"
 41 |                  class="varnish-generate w-[50px] h-[51px] flex justify-center items-center absolute top-0 right-0 rounded-r"
 42 |                  :class="(focus && blank(modelValue)) || (hover && blank(modelValue)) ? 'opacity-100 z-[2]' : 'opacity-0 pointer-events-none'">
 43 | 
 44 |                 <!-- Icon -->
 45 |                 <i title="Generate a random password"
 46 |                    @click.stop="createRandomPassword()"
 47 |                    class="varnish-icon fas fa-plus text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 relative top-[.5px] left-[1.5px] cursor-pointer transition duration-300">
 48 |                 </i>
 49 | 
 50 |             </div>
 51 | 
 52 |         </div>
 53 | 
 54 |         <!-- Generated -->
 55 |         <div v-if="! blank(password)"
 56 |              class="varnish-generated font-semibold text-[14px] text-purple-700 dark:text-purple-300 mt-2">
 57 | 
 58 |             <!-- Text -->
 59 |             <span class="text-gray-700 dark:text-gray-300 mr-[2px]">
 60 |                 Password:
 61 |             </span>
 62 | 
 63 |             <!-- Password -->
 64 |             {{ password }}
 65 | 
 66 |         </div>
 67 | 
 68 |         <!-- Error -->
 69 |         <v-error :value="fault"></v-error>
 70 | 
 71 |     </div>
 72 | </template>
 73 | 
 74 | <script>
 75 |     import ClearComponent from './clear.vue';
 76 |     import ErrorComponent from './error.vue';
 77 |     import LabelComponent from './label.vue';
 78 |     import Utilities from '../mixins/Utilities';
 79 |     import Foundation from '../mixins/Foundation';
 80 | 
 81 |     export default
 82 |     {
 83 |         /**
 84 |          * Define the mixins.
 85 |          *
 86 |          */
 87 |         mixins : [
 88 |             Utilities,
 89 |             Foundation,
 90 |         ],
 91 | 
 92 |         /**
 93 |          * Define the components.
 94 |          *
 95 |          */
 96 |         components : {
 97 |             'v-clear' : ClearComponent,
 98 |             'v-error' : ErrorComponent,
 99 |             'v-label' : LabelComponent,
100 |         },
101 | 
102 |         /**
103 |          * Define the data model.
104 |          *
105 |          */
106 |         data() { return {
107 |             characters : ['abcdefghijklm', '0123456789', '!@%^&*_-+=', 'NOPQRSTUVWXYZ'],
108 |             password   : '',
109 |         }},
110 | 
111 |         /**
112 |          * Define the public properties.
113 |          *
114 |          */
115 |         props : {
116 |             'generate' : { type : Boolean, default : true },
117 |         },
118 | 
119 |         /**
120 |          * Define the supporting methods.
121 |          *
122 |          */
123 |         methods :
124 |         {
125 |             /**
126 |              * Reset the component's value.
127 |              *
128 |              */
129 |             clear()
130 |             {
131 |                 this.password = '';
132 | 
133 |                 this.change('');
134 |             },
135 | 
136 |             /**
137 |              * Generate a pseudo-random password.
138 |              *
139 |              */
140 |             createRandomPassword()
141 |             {
142 |                 this.clear();
143 | 
144 |                 this.characters.forEach(type => {
145 |                     for (var i = 0; i < 5; i++) {
146 |                         this.password += type.charAt(Math.floor(Math.random() * type.length));
147 |                     }
148 |                 });
149 | 
150 |                 this.password = [...this.password].sort(() => Math.random() - 0.5).join('');
151 | 
152 |                 this.change(this.password);
153 |             },
154 |         },
155 |     }
156 | </script>


--------------------------------------------------------------------------------
/src/components/textbox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-textbox varnish-font w-full min-w-[250px]">
  3 | 
  4 |         <!-- Container -->
  5 |         <div @mouseover="hover = true"
  6 |              @mouseout="hover = false"
  7 |              class="varnish-container bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded relative transition duration-300">
  8 | 
  9 |             <!-- Input -->
 10 |             <input :id="name"
 11 |                    :name="name"
 12 |                    :type="type"
 13 |                    :dusk="name"
 14 |                    v-if="lines === 1"
 15 |                    :value="modelValue"
 16 |                    @focus="focus = true"
 17 |                    :maxLength="maxLength"
 18 |                    @focusout="focus = false"
 19 |                    :placeholder="placeholder"
 20 |                    @input="change($event.target.value)"
 21 |                    @keydown="interceptKeystroke($event)"
 22 |                    :readonly="readOnly ? 'readonly' : false"
 23 |                    :class="hover || focus ? 'pr-[50px]' : 'pr-3'"
 24 |                    :list="blank(items) ? null : `${name}_datalist`"
 25 |                    :autocomplete="blank(items) ? autocomplete : 'off'"
 26 |                    class="varnish-control varnish-input w-full bg-inherit text-[17px] text-gray-900 dark:text-gray-400 text-ellipsis overflow-hidden rounded appearance-none pl-3 pt-[25px] pb-[6px]" />
 27 | 
 28 |             <!-- Textarea -->
 29 |             <textarea :id="name"
 30 |                       :name="name"
 31 |                       :dusk="name"
 32 |                       :rows="lines"
 33 |                       v-if="lines !== 1"
 34 |                       :value="modelValue"
 35 |                       @focus="focus = true"
 36 |                       :maxLength="maxLength"
 37 |                       @focusout="focus = false"
 38 |                       :placeholder="placeholder"
 39 |                       :autocomplete="autocomplete"
 40 |                       @input="change($event.target.value)"
 41 |                       @keydown="interceptKeystroke($event)"
 42 |                       class="varnish-control varnish-textarea w-full bg-inherit text-gray-900 dark:text-gray-400 leading-[24px] rounded appearance-none resize-none pl-3 pr-11 pt-[25px]">
 43 |             </textarea>
 44 | 
 45 |             <!-- Label -->
 46 |             <v-label :icon="icon"
 47 |                      :value="label"
 48 |                      :optional="optional"
 49 |                      :optionalText="optionalText"
 50 |                      :filled="! blank(modelValue)"
 51 |                      :focus="readOnly ? false : focus">
 52 |             </v-label>
 53 | 
 54 |             <!-- Clear -->
 55 |             <v-clear :focus="focus"
 56 |                      :hover="hover"
 57 |                      @click="change('')"
 58 |                      :filled="! blank(modelValue)">
 59 |             </v-clear>
 60 | 
 61 |             <!-- Options -->
 62 |             <datalist v-if="! blank(items)"
 63 |                       :id="`${name}_datalist`">
 64 | 
 65 |                 <!-- Option -->
 66 |                 <option v-for="item in items">
 67 |                     {{ item[itemValueKey] }}
 68 |                 </option>
 69 | 
 70 |             </datalist>
 71 | 
 72 |         </div>
 73 | 
 74 |         <!-- Error -->
 75 |         <v-error :value="fault"></v-error>
 76 | 
 77 |     </div>
 78 | </template>
 79 | 
 80 | <script>
 81 |     import ClearComponent from './clear.vue';
 82 |     import ErrorComponent from './error.vue';
 83 |     import LabelComponent from './label.vue';
 84 |     import Utilities from '../mixins/Utilities';
 85 |     import Foundation from '../mixins/Foundation';
 86 | 
 87 |     export default
 88 |     {
 89 |         /**
 90 |          * Define the mixins.
 91 |          *
 92 |          */
 93 |         mixins : [
 94 |             Utilities,
 95 |             Foundation,
 96 |         ],
 97 | 
 98 |         /**
 99 |          * Define the components.
100 |          *
101 |          */
102 |         components : {
103 |             'v-clear' : ClearComponent,
104 |             'v-error' : ErrorComponent,
105 |             'v-label' : LabelComponent,
106 |         },
107 | 
108 |         /**
109 |          * Define the events.
110 |          *
111 |          */
112 |         emits : ['return'],
113 | 
114 |         /**
115 |          * Define the public properties.
116 |          *
117 |          */
118 |         props : {
119 | 			'items'        : { type : [Array, Object], default : [] },
120 | 			'itemValueKey' : { type : String,          default : '' },
121 |             'lines'        : { type : Number,          default : 1 },
122 |             'maxLength'    : { type : Number,          default : null },
123 |             'readOnly'     : { type : Boolean,         default : false },
124 |             'type'         : { type : String,          default : 'text' },
125 |         },
126 | 
127 |         /**
128 |          * Define the supporting methods.
129 |          *
130 |          */
131 |         methods :
132 |         {
133 |             /**
134 |              * Intercept certain keyboard events and handle them accordingly.
135 |              *
136 |              */
137 |             interceptKeystroke(event)
138 |             {
139 |                 if (event.key === 'Enter' && event.shiftKey) {
140 |                     return 13;
141 |                 }
142 | 
143 |                 if (event.key === 'Enter' && ! event.shiftKey) {
144 |                     event.preventDefault();
145 | 
146 |                     return this.$emit('return');
147 |                 }
148 |             },
149 |         }
150 |     }
151 | </script>


--------------------------------------------------------------------------------
/src/components/alert.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-if="display"
  3 |          class="varnish-alert varnish-font relative rounded-md"
  4 |          :class="[types[type].background, title ? 'py-6' : 'py-5', title ? '' : types[type].border]">
  5 | 
  6 |         <!-- Content -->
  7 |         <div v-if="title"
  8 |              class="varnish-header flex items-center text-gray-600 leading-normal px-6 mb-4">
  9 | 
 10 |             <!-- Icon -->
 11 |             <i :class="types[type].icon"
 12 |                class="varnish-icon fas text-[18px] relative top-[0.5px] mr-3">
 13 |             </i>
 14 | 
 15 |             <!-- Title -->
 16 |             <h6 :class="types[type].title"
 17 |                 class="varnish-title varnish-font-native text-[16px] mb-0">
 18 | 
 19 |                 <!-- Text -->
 20 |                 {{ title }}
 21 | 
 22 |             </h6>
 23 | 
 24 |         </div>
 25 | 
 26 |         <!-- Content -->
 27 |         <div class="varnish-content text-left leading-normal -mb-[2px]"
 28 |              :class="[types[type].content, title ? 'px-6' : 'flex items-center px-5']">
 29 | 
 30 |             <!-- Icon -->
 31 |             <i v-if="! title"
 32 |                :class="types[type].icon"
 33 |                class="varnish-icon fas text-[21px] relative mr-4">
 34 |             </i>
 35 | 
 36 |             <!-- Slot -->
 37 |             <div class="varnish-slot">
 38 |                 <slot></slot>
 39 |             </div>
 40 | 
 41 |         </div>
 42 | 
 43 |         <!-- Dismiss -->
 44 |         <i v-if="dismiss"
 45 |            @click="hide()"
 46 |            title="Hide this notice"
 47 |            class="varnish-dismiss fas fa-times text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 absolute top-3 right-3 transition duration-300 cursor-pointer">
 48 |         </i>
 49 | 
 50 |     </div>
 51 | </template>
 52 | 
 53 | <script>
 54 |     export default
 55 |     {
 56 |         /**
 57 |          * Define the data model.
 58 |          *
 59 |          */
 60 |         data() { return {
 61 |             display : true,
 62 | 
 63 |             types : {
 64 |                 danger : {
 65 |                     background : 'bg-red-500/[.12] dark:bg-red-700/[.40]',
 66 |                     border     : 'border border-red-600/[.40] dark:border-none',
 67 |                     content    : 'text-gray-600/[.90] dark:text-gray-400',
 68 |                     icon       : 'fa-circle-exclamation text-red-600/80 dark:text-red-500',
 69 |                     title      : 'text-gray-800 dark:text-gray-300',
 70 |                 },
 71 |                 info : {
 72 |                     background : 'bg-sky-500/10 dark:bg-sky-700/[.40]',
 73 |                     border     : 'border border-sky-600/[.40] dark:border-none',
 74 |                     content    : 'text-gray-600/[.90] dark:text-gray-400',
 75 |                     icon       : 'fa-circle-info text-sky-600/80 dark:text-sky-500',
 76 |                     title      : 'text-gray-800 dark:text-gray-300',
 77 |                 },
 78 |                 question : {
 79 |                     background : 'bg-purple-500/[.12] dark:bg-purple-700/[.40]',
 80 |                     border     : 'border border-purple-700/[.30] dark:border-none',
 81 |                     content    : 'text-gray-600/[.90] dark:text-gray-400',
 82 |                     icon       : 'fa-question-circle text-purple-600/80 dark:text-purple-500',
 83 |                     title      : 'text-gray-800 dark:text-gray-300',
 84 |                 },
 85 |                 success : {
 86 |                     background : 'bg-emerald-500/[.12] dark:bg-emerald-700/[.40]',
 87 |                     border     : 'border border-emerald-600/[.40] dark:border-none',
 88 |                     content    : 'text-gray-600/[.90] dark:text-gray-400',
 89 |                     icon       : 'fa-check-circle text-emerald-600/80 dark:text-emerald-500',
 90 |                     title      : 'text-gray-800 dark:text-gray-300',
 91 |                 },
 92 |                 warning : {
 93 |                     background : 'bg-orange-100/60 dark:bg-orange-700/[.40]',
 94 |                     border     : 'border border-yellow-600/[.40] dark:border-none',
 95 |                     content    : 'text-gray-600/[.90] dark:text-gray-400',
 96 |                     icon       : 'fa-triangle-exclamation text-yellow-600/80 dark:text-yellow-500',
 97 |                     title      : 'text-gray-800 dark:text-gray-300',
 98 |                 },
 99 |             },
100 |         }},
101 | 
102 |         /**
103 |          * Define the public properties.
104 |          *
105 |          */
106 |         props : {
107 |             'dismiss' : { type : Boolean, default : false },
108 |             'id'      : { type : String,  default : '' },
109 |             'title'   : { type : String,  default : '' },
110 |             'type'    : { type : String,  default : 'info' },
111 |         },
112 | 
113 |         /**
114 |          * Execute actions when the component is instantiated.
115 |          *
116 |          */
117 |         created()
118 |         {
119 |             this.display = ! localStorage.getItem(`varnish_hide_alert_${this.id}`);
120 |         },
121 | 
122 |         /**
123 |          * Define the supporting methods.
124 |          *
125 |          */
126 |         methods :
127 |         {
128 |             /**
129 |              * Dismiss the notice from appearing again.
130 |              *
131 |              */
132 |             hide()
133 |             {
134 |                 if (! this.dismiss) return;
135 | 
136 |                 this.display = false;
137 | 
138 |                 localStorage.setItem(`varnish_hide_alert_${this.id}`, 1);
139 |             }
140 |         },
141 |     }
142 | </script>


--------------------------------------------------------------------------------
/src/mixins/Dialog.js:
--------------------------------------------------------------------------------
  1 | import { createApp } from 'vue';
  2 | import TipComponent from '../components/tip.vue';
  3 | import ShareComponent from '../components/share.vue';
  4 | import PromptComponent from '../components/prompt.vue';
  5 | import ConfirmComponent from '../components/confirm.vue';
  6 | import NotificationComponent from '../components/notification.vue';
  7 | 
  8 | export default
  9 | {
 10 |     /**
 11 |      * Define the components.
 12 |      *
 13 |      */
 14 |     components : {
 15 |         'v-confirm'       : ConfirmComponent,
 16 |         'v-notification'  : NotificationComponent,
 17 |         'v-prompt'        : PromptComponent,
 18 |         'v-share'         : ShareComponent,
 19 |         'v-tip'           : TipComponent,
 20 |     },
 21 | 
 22 |     /**
 23 |      * Define the data model.
 24 |      *
 25 |      */
 26 |     data() {
 27 |         return {
 28 |             dialogs : [],
 29 |         }
 30 |     },
 31 | 
 32 |     /**
 33 |      * Define the supporting methods.
 34 |      *
 35 |      */
 36 |     methods :
 37 |     {
 38 |         /**
 39 |          * Insert a blank container into the DOM.
 40 |          *
 41 |          */
 42 |         createDialogElement()
 43 |         {
 44 |             let div = document.createElement('div');
 45 | 
 46 |             div.id = `dialog-${parseInt(performance.now())}`;
 47 | 
 48 |             document.body.appendChild(div);
 49 | 
 50 |             this.dialogs.push({ container : null, id : div.id })
 51 | 
 52 |             return this.dialogs.slice(-1)[0];
 53 |         },
 54 | 
 55 |         /**
 56 |          * Remove the open dialog from the viewport.
 57 |          *
 58 |          */
 59 |         closeDialog(dialog)
 60 |         {
 61 |             dialog.container._container._vnode.component.props.visible = false;
 62 | 
 63 |             setTimeout(() => {
 64 |                 dialog.container.unmount();
 65 | 
 66 |                 dialog.container = undefined;
 67 | 
 68 |                 document.body.removeChild(document.getElementById(dialog.id));
 69 |             }, 300);
 70 |         },
 71 | 
 72 |         /**
 73 |          * Request that the user confirm a particular action.
 74 |          *
 75 |          */
 76 |         confirm(title = null, summary = null)
 77 |         {
 78 |             let dialog = this.createDialogElement();
 79 | 
 80 |             return new Promise((resolve, reject) =>
 81 |             {
 82 |                 dialog.container = createApp(ConfirmComponent, {
 83 |                     summary : summary ?? 'Note that in most cases, this action is not reversible. If you need some help, then please contact support.',
 84 |                     title   : title ?? 'Are you sure you wish to proceed?',
 85 |                     visible : true,
 86 |                     onCancel : () => {
 87 |                         resolve(false);
 88 | 
 89 |                         this.closeDialog(dialog);
 90 |                     },
 91 |                     onContinue : () => {
 92 |                         resolve(true);
 93 | 
 94 |                         this.closeDialog(dialog);
 95 |                     },
 96 |                 });
 97 | 
 98 |                 dialog.container.mount(`#${dialog.id}`);
 99 |             });
100 |         },
101 | 
102 |         /**
103 |          * Advise the user that something has happened.
104 |          *
105 |          */
106 |         notify(type, message)
107 |         {
108 |             let dialog = this.createDialogElement();
109 | 
110 |             dialog.container = createApp(NotificationComponent, {
111 |                 message : message,
112 |                 type    : type,
113 |             });
114 | 
115 |             dialog.container.mount(`#${dialog.id}`);
116 | 
117 |             setTimeout(() => this.closeDialog(dialog), 3500);
118 |         },
119 | 
120 |         /**
121 |          * Request that the user provide some feedback.
122 |          *
123 |          */
124 |         prompt(title = null, summary = null, label = null, fallback = '', lines = 1, maxLength = null)
125 |         {
126 |             let dialog = this.createDialogElement();
127 | 
128 |             return new Promise((resolve, reject) =>
129 |             {
130 |                 dialog.container = createApp(PromptComponent, {
131 |                     fallback  : fallback,
132 |                     label     : label ?? 'Your response',
133 |                     lines     : lines,
134 |                     maxLength : maxLength,
135 |                     summary   : summary ?? 'In order to proceed, some input is required. Please enter it below, then press continue, or press cancel.',
136 |                     title     : title ?? 'Awaiting your response...',
137 |                     visible   : true,
138 |                     onCancel : () => {
139 |                         resolve(fallback);
140 | 
141 |                         this.closeDialog(dialog);
142 |                     },
143 |                     onContinue : (event) => {
144 |                         resolve(['', null, undefined].includes(event) ? fallback : event);
145 | 
146 |                         this.closeDialog(dialog);
147 |                     },
148 |                 });
149 | 
150 |                 dialog.container.mount(`#${dialog.id}`);
151 |             });
152 |         },
153 | 
154 |         /**
155 |          * Allow the user to share the given link.
156 |          *
157 |          */
158 |         share(url)
159 |         {
160 |             let dialog = this.createDialogElement();
161 | 
162 |             dialog.container = createApp(ShareComponent, {
163 |                 url     : url,
164 |                 visible : true,
165 |             });
166 | 
167 |             dialog.container.mount(`#${dialog.id}`);
168 |         },
169 | 
170 |         /**
171 |          * Display some information to the user.
172 |          *
173 |          */
174 |         tip(message = '')
175 |         {
176 |             let dialog = this.createDialogElement();
177 | 
178 |             dialog.container = createApp(TipComponent, {
179 |                 message : message,
180 |                 visible : true,
181 |                 onClose : () => this.closeDialog(dialog),
182 |             });
183 | 
184 |             dialog.container.mount(`#${dialog.id}`);
185 |         },
186 |     }
187 | }


--------------------------------------------------------------------------------
/src/components/period.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-period varnish-font">
  3 | 
  4 |         <!-- Hidden -->
  5 |         <input :id="name"
  6 |                :name="name"
  7 |                type="hidden"
  8 |                :value="modelValue">
  9 | 
 10 |         <!-- TextBox -->
 11 |         <v-textbox :icon="icon"
 12 |                    :label="label"
 13 |                    :readOnly="true"
 14 |                    @change="clear()"
 15 |                    :optional="optional"
 16 |                    :modelValue="format"
 17 |                    :id="`${name}_text_box`"
 18 |                    :dusk="`${name}_text_box`"
 19 |                    :optionalText="optionalText"
 20 |                    @click="() => { to = ''; show_from_calendar = true }">
 21 |         </v-textbox>
 22 | 
 23 |         <!-- From -->
 24 |         <v-datetime type="date"
 25 |                     v-model="from"
 26 |                     :locale="locale"
 27 |                     :minDate="minDate"
 28 |                     :maxDate="maxDate"
 29 |                     :hideTextbox="true"
 30 |                     :showCalendar="show_from_calendar"
 31 |                     @lostFocus="show_from_calendar = false"
 32 |                     @change="() => { show_from_calendar = false; show_to_calendar = true }">
 33 |         </v-datetime>
 34 | 
 35 |         <!-- To -->
 36 |         <v-datetime type="date"
 37 |                     v-model="to"
 38 |                     :minDate="from"
 39 |                     :locale="locale"
 40 |                     :startDate="from"
 41 |                     :maxDate="maxDate"
 42 |                     :hideTextbox="true"
 43 |                     :showCalendar="show_to_calendar"
 44 |                     @change="show_to_calendar = false"
 45 |                     @lostFocus="show_to_calendar = false">
 46 |         </v-datetime>
 47 | 
 48 |         <!-- Error -->
 49 |         <v-error :value="fault"></v-error>
 50 | 
 51 |     </div>
 52 | </template>
 53 | 
 54 | <script>
 55 |     import { DateTime } from 'luxon';
 56 |     import ErrorComponent from './error.vue';
 57 |     import Utilities from '../mixins/Utilities';
 58 |     import TextBoxComponent from './textbox.vue';
 59 |     import Foundation from '../mixins/Foundation';
 60 |     import DateTimeComponent from './datetime.vue';
 61 | 
 62 |     export default
 63 |     {
 64 |         /**
 65 |          * Define the mixins.
 66 |          *
 67 |          */
 68 |         mixins : [
 69 |             Utilities,
 70 |             Foundation,
 71 |         ],
 72 | 
 73 |         /**
 74 |          * Define the components.
 75 |          *
 76 |          */
 77 |         components : {
 78 |             'v-datetime' : DateTimeComponent,
 79 |             'v-error'    : ErrorComponent,
 80 |             'v-textbox'  : TextBoxComponent,
 81 |         },
 82 | 
 83 |         /**
 84 |          * Define the data model.
 85 |          *
 86 |          */
 87 |         data() { return {
 88 |             to   : '',
 89 |             from : '',
 90 | 
 91 |             show_to_calendar   : false,
 92 |             show_from_calendar : false,
 93 |         }},
 94 | 
 95 |         /**
 96 |          * Define the public properties.
 97 |          *
 98 |          */
 99 |         props : {
100 |             'locale'  : { type : String, default : 'en-US' },
101 |             'maxDate' : { type : String, default : '2100-12-31' },
102 |             'minDate' : { type : String, default : '1900-01-01' },
103 |         },
104 | 
105 |         /**
106 |          * Define the computed properties.
107 |          *
108 |          */
109 |         computed :
110 |         {
111 |             /**
112 |              * Render the component's value in a human-readable format.
113 |              *
114 |              */
115 |             format()
116 |             {
117 |                 let result = '';
118 | 
119 |                 if (! this.blank(this.from)) {
120 |                     result += `${DateTime.fromISO(this.from, { locale : this.locale }).toLocaleString(DateTime.DATE_MED)} - `;
121 |                 }
122 | 
123 |                 if (! this.blank(this.to)) {
124 |                     result += DateTime.fromISO(this.to, { locale : this.locale }).toLocaleString(DateTime.DATE_MED);
125 |                 }
126 | 
127 |                 return result;
128 |             },
129 |         },
130 | 
131 |         /**
132 |          * Define the watch methods.
133 |          *
134 |          */
135 |         watch :
136 |         {
137 |             /**
138 |              * Watch the 'from' property.
139 |              *
140 |              */
141 |             from : function(current, previous)
142 |             {
143 |                 if (this.blank(this.from) && this.blank(this.to)) {
144 |                     return this.change('');
145 |                 }
146 | 
147 |                 this.change(`${this.from}|${this.to}`)
148 |             },
149 | 
150 |             /**
151 |              * Watch the 'modelValue' property.
152 |              *
153 |              */
154 |             modelValue : function(current, previous)
155 |             {
156 |                 if (this.blank(current)) return;
157 | 
158 |                 this.from = current.split('|')[0];
159 |                 this.to = current.split('|')[1];
160 |             },
161 | 
162 |             /**
163 |              * Watch the 'to' property.
164 |              *
165 |              */
166 |             to : function(current, previous)
167 |             {
168 |                 if (this.blank(this.from) && this.blank(this.to)) {
169 |                     return this.change('');
170 |                 }
171 | 
172 |                 this.change(`${this.from}|${this.to}`)
173 |             },
174 |         },
175 | 
176 |         /**
177 |          * Execute actions when the component is instantiated.
178 |          *
179 |          */
180 |         created()
181 |         {
182 |             if (this.blank(this.modelValue)) return;
183 | 
184 |             this.from = this.modelValue.split('|')[0];
185 |             this.to = this.modelValue.split('|')[1];
186 |         },
187 | 
188 | 		/**
189 | 		 * Define the supporting methods.
190 | 		 *
191 | 		 */
192 | 		methods :
193 |         {
194 |             /**
195 |              * Reset the component to a blank state.
196 |              *
197 |              */
198 |             clear()
199 |             {
200 |                 this.to   = '';
201 |                 this.from = '';
202 | 
203 |                 this.show_from_calendar = false;
204 |                 this.show_to_calendar   = false;
205 | 
206 |                 this.change('');
207 |             },
208 |         }
209 |     }
210 | </script>


--------------------------------------------------------------------------------
/src/components/menu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-menu varnish-font items-center ml-3 flex relative">
  3 | 
  4 |         <!-- Trigger -->
  5 |         <div ref="trigger"
  6 |              @click="open = ! open"
  7 |              :dusk="`menu-${id.toLowerCase()}`"
  8 |              class="varnish-trigger text-[13px] text-gray-500 hover:text-gray-800 dark:hover:text-white uppercase whitespace-nowrap select-none cursor-pointer transition duration-300 relative top-[1px]">
  9 | 
 10 |             <!-- Icon -->
 11 |             <i class="varnish-icon fas fa-ellipsis-h text-[17px]"></i>
 12 | 
 13 |         </div>
 14 | 
 15 |         <!-- Drawer -->
 16 |         <div :class="[position, open ? 'opacity-100 scale-100 pointer-events-auto z-[20]' : 'opacity-0 scale-90 pointer-events-none -z-[1]']"
 17 |              class="varnish-drawer bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 flex flex-col transition-all duration-300 rounded absolute py-[6px]">
 18 | 
 19 |             <!-- Slot -->
 20 |             <div class="varnish-item"
 21 |                  v-for="item in (items.filter(item => item.show).length ? items : empty)">
 22 | 
 23 |                 <!-- Link -->
 24 |                 <span v-if="item.show && item.type === 'link'"
 25 |                       @click.stop="open = false; item['action']()"
 26 |                       :dusk="`menu-${id.toLowerCase()}-${item.id}`"
 27 |                       class="varnish-link hover:bg-gray-200/[.75] dark:hover:bg-gray-600 text-[16px] text-gray-700/[.85] hover:text-gray-700 flex items-center select-none whitespace-nowrap cursor-pointer transition duration-300 pl-3 pr-6 py-[10px]">
 28 | 
 29 |                     <!-- Icon -->
 30 |                     <i :class="item.icon"
 31 |                        v-if="! blank(item.icon)"
 32 |                        class="varnish-icon fa-fw text-[17px] text-gray-400 dark:text-gray-400/[.70] relative top-[.5px] mr-[10px]">
 33 |                     </i>
 34 | 
 35 |                     <!-- Text -->
 36 |                     <span class="varnish-label text-gray-700 dark:text-gray-300">
 37 |                         {{ item.label }}
 38 |                     </span>
 39 | 
 40 |                 </span>
 41 | 
 42 |                 <!-- Separator -->
 43 |                 <div v-if="item.show && item.type === 'separator'"
 44 |                      class="varnish-separator border-t border-gray-200 dark:border-gray-600 my-[6px]">
 45 |                 </div>
 46 | 
 47 |                 <!-- Empty -->
 48 |                 <div v-if="item.show && item.type === 'empty'"
 49 |                      class="varnish-empty text-[13px] text-gray-600/[.65] uppercase select-none whitespace-nowrap cursor-pointer px-6 pt-2 pb-[5px]">
 50 | 
 51 |                     <!-- Text -->
 52 |                     {{ emptyText }}
 53 | 
 54 |                 </div>
 55 | 
 56 |             </div>
 57 | 
 58 |         </div>
 59 | 
 60 |     </div>
 61 | </template>
 62 | 
 63 | <script>
 64 |     import Container from '../mixins/Container';
 65 |     import Utilities from '../mixins/Utilities';
 66 | 
 67 |     export default
 68 |     {
 69 |         /**
 70 |          * Define the mixins.
 71 |          *
 72 |          */
 73 |         mixins : [
 74 |             Container,
 75 |             Utilities,
 76 |         ],
 77 | 
 78 |         /**
 79 |          * Define the data model.
 80 |          *
 81 |          */
 82 |         data() { return {
 83 |             empty    : [{ type : 'empty', show : true }],
 84 |             open     : false,
 85 |             position : '',
 86 |         }},
 87 | 
 88 |         /**
 89 |          * Define the public properties.
 90 |          *
 91 |          */
 92 |         props : {
 93 |             'emptyText' : { type : String, default : 'No Options Available' },
 94 |             'id'        : { type : String, default : 'Menu' },
 95 |             'items'     : { type : Array,  default : [] },
 96 |         },
 97 | 
 98 |         /**
 99 |          * Execute actions when the component is mounted to the DOM.
100 |          *
101 |          */
102 |         mounted()
103 |         {
104 |             this.setOrientation();
105 |         },
106 | 
107 |         /**
108 |          * Define the watch methods.
109 |          *
110 |          */
111 |         watch :
112 |         {
113 |             /**
114 |              * Watch the 'items' data attribute.
115 |              *
116 |              */
117 |             items : function(current, previous)
118 |             {
119 |                 this.setOrientation();
120 |             }
121 |         },
122 | 
123 |         /**
124 |          * Define the supporting methods.
125 |          *
126 |          */
127 |         methods :
128 |         {
129 | 	    	/**
130 | 	    	 * Determine if the component currently has the user's attention.
131 | 	    	 *
132 | 	    	 */
133 | 	    	hasUserAttention()
134 | 	    	{
135 |                 return this.open;
136 | 	    	},
137 | 
138 | 	    	/**
139 | 	    	 * Respond to the component losing the user's attention.
140 | 	    	 *
141 | 	    	 */
142 | 	    	lostUserAttention()
143 | 	    	{
144 |                 this.open = false;
145 | 	    	},
146 | 
147 |             /**
148 |              * Determine if the menu is too close to the bottom of the page.
149 |              *
150 |              */
151 |             nearBottom()
152 |             {
153 |                 let vertical = this.rectangle().bottom + (window.pageYOffset || document.body.scrollTop);
154 | 
155 |                 return (document.body.scrollHeight - vertical - (this.items.length * 30)) <= 10;
156 |             },
157 | 
158 |             /**
159 |              * Determine if the menu is too close to the left of the page.
160 |              *
161 |              */
162 |             nearLeft()
163 |             {
164 |                 return (this.rectangle().left + (window.pageXOffset || document.body.scrollLeft)) <= 150;
165 |             },
166 | 
167 |             /**
168 |              * Retrieve the bounding rectangle for the trigger.
169 |              *
170 |              */
171 |             rectangle()
172 |             {
173 |                 return this.$refs.trigger.getBoundingClientRect();
174 |             },
175 | 
176 |             /**
177 |              * Assign the direction that the menu should expand to.
178 |              *
179 |              */
180 |             setOrientation()
181 |             {
182 |                 if (this.nearLeft() && this.nearBottom()) {
183 |                     this.position = 'origin-bottom-left left-0 bottom-8';
184 |                 } else if (this.nearLeft()) {
185 |                     this.position = 'origin-top-left left-0 top-8';
186 |                 } else if (this.nearBottom()) {
187 |                     this.position = 'origin-bottom-right -right-3 bottom-8';
188 |                 } else {
189 |                     this.position = 'origin-top-right -right-3 top-8';
190 |                 }
191 |             },
192 |         }
193 |     }
194 | </script>


--------------------------------------------------------------------------------
/src/components/tags.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-tags varnish-font w-full">
  3 | 
  4 |         <!-- Container -->
  5 |         <div :dusk="name"
  6 |              class="varnish-container bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 w-full min-h-[52px] flex items-start rounded relative transition duration-300">
  7 | 
  8 |             <!-- Input -->
  9 |             <input type="text"
 10 |                    ref="input"
 11 |                    :placeholder="label"
 12 |                    @change="process($event.target.value)"
 13 |                    class="varnish-input bg-inherit font-medium text-[17px] text-gray-900 dark:text-gray-400 rounded appearance-none" />
 14 | 
 15 |             <!-- Optional -->
 16 |             <v-optional :value="optionalText"
 17 |                         class="-ml-[20px] mt-[19.5px]"
 18 |                         v-if="optional && blank(modelValue)">
 19 |             </v-optional>
 20 | 
 21 |         </div>
 22 | 
 23 |         <!-- Error -->
 24 |         <v-error :value="fault"></v-error>
 25 | 
 26 |     </div>
 27 | </template>
 28 | 
 29 | <script>
 30 |     import Tagify from '@yaireo/tagify';
 31 |     import '@yaireo/tagify/dist/tagify.css';
 32 |     import ErrorComponent from './error.vue';
 33 |     import Utilities from '../mixins/Utilities';
 34 |     import Foundation from '../mixins/Foundation';
 35 |     import OptionalComponent from './optional.vue';
 36 | 
 37 |     export default
 38 |     {
 39 |         /**
 40 |          * Define the mixins.
 41 |          *
 42 |          */
 43 |         mixins : [
 44 |             Utilities,
 45 |             Foundation,
 46 |         ],
 47 | 
 48 |         /**
 49 |          * Define the components.
 50 |          *
 51 |          */
 52 |         components : {
 53 |             'v-error'    : ErrorComponent,
 54 |             'v-optional' : OptionalComponent,
 55 |         },
 56 | 
 57 |         /**
 58 |          * Define the data model.
 59 |          *
 60 |          */
 61 |         data() { return {
 62 |             tagify : null,
 63 |         }},
 64 | 
 65 |         /**
 66 |          * Define the public properties.
 67 |          *
 68 |          */
 69 |         props : {
 70 |             'characters' : { type : Number, default : 20 },
 71 |             'limit'      : { type : Number, default : 4 },
 72 |         },
 73 | 
 74 | 		/**
 75 | 		 * Execute actions when the component is mounted to the DOM.
 76 | 		 *
 77 | 		 */
 78 | 		mounted()
 79 | 		{
 80 |             this.tagify = new Tagify(this.$refs.input, {
 81 |                 pattern      : `/^.{0,${this.characters}}$/`,
 82 |                 maxTags      : this.limit,
 83 |                 transformTag : (tag) => this.transform(tag),
 84 |             });
 85 | 
 86 |             this.format(this.modelValue);
 87 | 		},
 88 | 
 89 | 		/**
 90 | 		 * Define the supporting methods.
 91 | 		 *
 92 | 		 */
 93 | 		methods:
 94 |         {
 95 |             /**
 96 |              * Convert the given input source into tags.
 97 |              *
 98 |              */
 99 |             format(source)
100 |             {
101 |                 this.tagify.removeAllTags();
102 | 
103 |                 this.tagify.addTags(source.filter(item => item));
104 |             },
105 | 
106 |             /**
107 |              * Prepare the tags for two-way data binding.
108 |              *
109 |              */
110 |             process(tags)
111 |             {
112 |                 tags = this.blank(tags) ? [] : JSON.parse(tags);
113 | 
114 |                 this.change(tags.map(item => item.value));
115 |             },
116 | 
117 |             /**
118 |              * Enforce the character limit for each tag.
119 |              *
120 |              */
121 |             transform(tag)
122 |             {
123 |                 if (tag.value.length >= this.characters) {
124 |                     tag.value = tag.value.slice(0, this.characters);
125 |                 }
126 | 
127 |                 return tag;
128 |             }
129 |         },
130 |     }
131 | </script>
132 | 
133 | <style>
134 |     .varnish-tags .varnish-container .varnish-optional { @apply top-[1px] }
135 |     .varnish-tags .varnish-container .varnish-input.tagify { @apply border-none pb-3 }
136 |     .varnish-tags .varnish-container .varnish-input.tagify.tagify--focus + input + .varnish-optional { @apply hidden }
137 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__input { @apply font-normal relative top-[6px] left-[6px] }
138 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__input:before { @apply font-normal text-gray-600 dark:text-gray-400 top-[7px] pl-[28px] }
139 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__input:after { @apply inline font-bold text-[14px] text-gray-700/[.80] dark:text-gray-300 absolute left-[10px] top-[8px] ; font-family: 'Font Awesome 6 Free'; content: '\f02c' }
140 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag { @apply bg-sky-600/[.10] hover:bg-sky-600/[.10] dark:bg-sky-400/[.50] dark:hover:bg-sky-400/[.50] rounded top-[6px] left-[6px] m-[5px] px-1 }
141 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag div:before { @apply shadow-none }
142 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag:hover div:before { @apply shadow-none }
143 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag .tagify__tag__removeBtn { @apply bg-transparent relative top-[.5px] }
144 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag .tagify__tag__removeBtn:after { @apply text-gray-700 dark:text-gray-400 }
145 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag .tagify__tag__removeBtn:hover { @apply bg-transparent }
146 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag .tagify__tag__removeBtn:hover:after { @apply text-red-700 }
147 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag .tagify__tag__removeBtn:hover + div:before { box-shadow: 0 0 #0000 !important }
148 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag .tagify__tag__removeBtn:hover + div > span.tagify__tag-text { @apply opacity-100 }
149 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag .tagify__tag-text { @apply font-normal text-[16px] text-gray-700 dark:text-gray-300 overflow-visible relative -top-[.5px] }
150 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag + .tagify__input { @apply relative top-[6px] left-[6px] }
151 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag + .tagify__input:before { @apply hidden }
152 |     .varnish-tags .varnish-container .varnish-input.tagify .tagify__tag + .tagify__input:after { @apply hidden }
153 |     .varnish-tags .varnish-container .varnish-input.tagify.tagify--focus .tagify__input:before { @apply hidden }
154 |     .varnish-tags .varnish-container .varnish-input.tagify.tagify--focus .tagify__input:after { @apply hidden }
155 | </style>


--------------------------------------------------------------------------------
/src/components/search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-search bg-gray-50/[.50] border border-gray-200 lg:border-0 rounded lg:rounded-none w-full p-5 mb-4 lg:mb-0">
  3 | 
  4 |         <!-- Grid -->
  5 |         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  6 | 
  7 |             <!-- Controls -->
  8 |             <div :key="field.id"
  9 |                  v-for="field in source.search.filtering">
 10 | 
 11 |                 <!-- TextBox -->
 12 |                 <v-textbox :icon="field.icon"
 13 |                            :label="field.label"
 14 |                            :title="field.label"
 15 |                            v-model="form[field.id]"
 16 |                            :error="form.errors[field.id]"
 17 |                            :id="`search_${field.label.toLowerCase().replaceAll(' ', '_')}`"
 18 |                            v-if="! System.Is.array(field.control) && field.control === 'TextBox'">
 19 |                 </v-textbox>
 20 | 
 21 |                 <!-- DropDown -->
 22 |                 <v-dropdown itemValueKey="id"
 23 |                             :icon="field.icon"
 24 |                             itemTextKey="label"
 25 |                             :label="field.label"
 26 |                             :title="field.label"
 27 |                             v-model="form[field.id]"
 28 |                             :error="form.errors[field.id]"
 29 |                             :items="System.Page.property(field.control[1])"
 30 |                             :id="`search_${field.label.toLowerCase().replaceAll(' ', '_')}`"
 31 |                             v-if="System.Is.array(field.control) && field.control[0] === 'DropDown'">
 32 |                 </v-dropdown>
 33 | 
 34 |                 <!-- Date -->
 35 |                 <v-datetime type="date"
 36 |                             :icon="field.icon"
 37 |                             :label="field.label"
 38 |                             :title="field.label"
 39 |                             v-model="form[field.id]"
 40 |                             :error="form.errors[field.id]"
 41 |                             :id="`search_${field.label.toLowerCase().replaceAll(' ', '_')}`"
 42 |                             v-if="! System.Is.array(field.control) && field.control === 'Date'">
 43 |                 </v-datetime>
 44 | 
 45 |                 <!-- Period -->
 46 |                 <v-period :icon="field.icon"
 47 |                           :label="field.label"
 48 |                           :title="field.label"
 49 |                           v-model="form[field.id]"
 50 |                           :error="form.errors[field.id]"
 51 |                           :id="`search_${field.label.toLowerCase().replaceAll(' ', '_')}`"
 52 |                           v-if="! System.Is.array(field.control) && field.control === 'Period'">
 53 |                 </v-period>
 54 | 
 55 |             </div>
 56 | 
 57 |             <!-- Ordering -->
 58 |             <v-dropdown label="Order by"
 59 |             			title="Order by"
 60 |                         itemValueKey="id"
 61 |                         itemTextKey="label"
 62 |                         icon="fas fa-arrow-down-a-z"
 63 |                         :items="source.search.ordering"
 64 |                         v-if="source.search.ordering.length"
 65 |                         v-model="form[source.search.order_key]"
 66 |                         :id="`search_${source.search.order_key}`"
 67 |                         :error="form.errors[source.search.order_key]">
 68 |             </v-dropdown>
 69 | 
 70 |             <!-- Actions -->
 71 |             <div class="flex flex-col-reverse md:flex-row md:items-start md:justify-end md:mb-0"
 72 |                  :class="(source.search.filtering.length + (source.search.ordering.length ? 1 : 0)) % 2 === 0 ? 'md:col-span-2' : 'md:col-span-1'">
 73 | 
 74 |                 <!-- Reset -->
 75 |                 <v-button mode="link"
 76 |                           color="gray"
 77 |                           label="Reset"
 78 |                           id="reset-search"
 79 |                           v-if="isBeingUsed()"
 80 |                           class="mt-2 -mb-2 md:mt-0 md:mb-0 md:mr-4"
 81 |                           @click="System.Form.submit(System.Form.create(), url(), 'get', { preserveScroll : true }, true)">
 82 |                 </v-button>
 83 | 
 84 |                 <!-- Search -->
 85 |                 <v-button label="Search"
 86 |                           mode="outline"
 87 |                           id="run-search"
 88 |                           :processing="form.processing"
 89 |                           @click="System.Form.submit(form, url(), 'get', { preserveScroll : true }, true)">
 90 |                 </v-button>
 91 | 
 92 |             </div>
 93 | 
 94 |         </div>
 95 | 
 96 |     </div>
 97 | </template>
 98 | 
 99 | <script>
100 |     import ButtonComponent from './button.vue';
101 |     import PeriodComponent from './period.vue';
102 |     import TextBoxComponent from './textbox.vue';
103 |     import DateTimeComponent from './datetime.vue';
104 |     import DropDownComponent from './dropdown.vue';
105 | 
106 |     export default
107 |     {
108 |         /**
109 |          * Define the components.
110 |          *
111 |          */
112 |         components : {
113 |             'v-button'   : ButtonComponent,
114 |             'v-datetime' : DateTimeComponent,
115 |             'v-dropdown' : DropDownComponent,
116 |             'v-period'   : PeriodComponent,
117 |             'v-textbox'  : TextBoxComponent,
118 |         },
119 | 
120 |         /**
121 |          * Define the events.
122 |          *
123 |          */
124 |         emits : ['closed'],
125 | 
126 |         /**
127 |          * Define the data model.
128 |          *
129 |          */
130 |         data() { return {
131 |             form : { },
132 |         }},
133 | 
134 |         /**
135 |          * Define the public properties.
136 |          *
137 |          */
138 |         props : {
139 |             'source' : { type : Object, default : {} },
140 |         },
141 | 
142 |         /**
143 |          * Execute actions when the component is created.
144 |          *
145 |          */
146 |         created()
147 |         {
148 |             let attributes = { search : true };
149 | 
150 |             attributes[this.source.search.order_key] = System.Browser.queryString(this.source.search.order_key)
151 |                 ? parseInt(System.Browser.queryString(this.source.search.order_key))
152 |                 : '';
153 | 
154 |             this.source.search.filtering.forEach(field => {
155 |                 attributes[field.id] = System.Is.array(field.control) && field.control[0] === 'DropDown'
156 |                     ? parseInt(System.Browser.queryString(field.id))
157 |                     : System.Browser.queryString(field.id);
158 |             });
159 | 
160 |             this.form = System.Form.create(attributes);
161 |         },
162 | 
163 |         /**
164 |          * Define the supporting methods.
165 |          *
166 |          */
167 |         methods :
168 |         {
169 |             /**
170 |              * Determine if the page is using the search form.
171 |              *
172 |              */
173 |             isBeingUsed()
174 |             {
175 |                 if (System.Browser.queryString(this.source.search.order_key)) {
176 |                     return true;
177 |                 }
178 | 
179 |                 return !! this.source.search.filtering
180 |                     .map(field => System.Browser.queryString(field.id))
181 |                     .filter(field => field)
182 |                     .length;
183 |             },
184 | 
185 |             /**
186 |              * Generate the URL to send the request to.
187 |              *
188 |              */
189 |             url()
190 |             {
191 |                 return `${window.location.origin}${window.location.pathname}`
192 |             },
193 |         },
194 |     }
195 | </script>


--------------------------------------------------------------------------------
/src/components/share.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <v-modal :visible="visible"
  3 |              class="varnish-share"
  4 |              @closed="$emit('closed')">
  5 | 
  6 |         <!-- Circle -->
  7 |         <div class="varnish-circle bg-emerald-500/[.20] dark:bg-emerald-600/[.30] h-[60px] w-[60px] flex justify-center items-center rounded-full mx-auto mb-6">
  8 |             <i class="varnish-icon fas fa-share text-[30px] text-emerald-700/[.60] dark:text-emerald-600"></i>
  9 |         </div>
 10 | 
 11 |         <!-- Title -->
 12 |         <div class="varnish-font-native varnish-header font-bold text-[21px] text-gray-900 dark:text-white text-center leading-snug mb-4">
 13 |             Share a link with others
 14 |         </div>
 15 | 
 16 |         <!-- Information -->
 17 |         <div class="varnish-summary text-[17px] text-gray-500 dark:text-gray-400 text-center leading-[1.6rem] max-w-[475px] mb-8">
 18 |             Select one of the platforms to share the link on.
 19 |             You can also send the link via email, or
 20 |             copy it to the clipboard.
 21 |         </div>
 22 | 
 23 |         <!-- Platforms -->
 24 |         <div class="varnish-platforms grid grid-cols-1 md:grid-cols-2 gap-3">
 25 | 
 26 |             <!-- Twitter -->
 27 |             <div @click="visit(`https://twitter.com/intent/tweet?url=${url}`)"
 28 |                  class="varnish-twitter bg-white dark:bg-gray-600 hover:bg-orange-100/[.25] dark:hover:bg-orange-100 border border-gray-300 dark:border-gray-600 flex items-center transition duration-300 rounded-md cursor-pointer group px-6 py-3">
 29 | 
 30 |                 <!-- Icon -->
 31 |                 <i class="varnish-icon w-[31px] min-w-[31px] max-w-[31px] fa-fw fab fa-twitter text-[18px] text-sky-500 -ml-4"></i>
 32 | 
 33 |                 <!-- Text -->
 34 |                 <span class="varnish-text font-medium text-[15px] text-gray-700 dark:text-gray-300 dark:group-hover:text-gray-700 ml-[5px]">
 35 |                     Share on Twitter
 36 |                 </span>
 37 | 
 38 |             </div>
 39 | 
 40 |             <!-- Facebook -->
 41 |             <div @click="visit(`https://www.facebook.com/sharer/sharer.php?u=${url}`)"
 42 |                  class="varnish-facebook bg-white dark:bg-gray-600 hover:bg-orange-100/[.25] dark:hover:bg-orange-100 border border-gray-300 dark:border-gray-600 flex items-center transition duration-300 rounded-md cursor-pointer group px-6 py-3">
 43 | 
 44 |                 <!-- Icon -->
 45 |                 <i class="varnish-icon w-[31px] min-w-[31px] max-w-[31px] fa-fw fab fa-facebook text-[18px] text-blue-800/[.80] dark:text-blue-500 -ml-4"></i>
 46 | 
 47 |                 <!-- Text -->
 48 |                 <span class="varnish-text font-medium text-[15px] text-gray-700 dark:text-gray-300 dark:group-hover:text-gray-700 ml-[5px]">
 49 |                     Share on Facebook
 50 |                 </span>
 51 | 
 52 |             </div>
 53 | 
 54 |             <!-- Reddit -->
 55 |             <div @click="visit(`https://reddit.com/submit?url=${url}`)"
 56 |                  class="varnish-reddit bg-white dark:bg-gray-600 hover:bg-orange-100/[.25] dark:hover:bg-orange-100 border border-gray-300 dark:border-gray-600 flex items-center transition duration-300 rounded-md cursor-pointer group px-6 py-3">
 57 | 
 58 |                 <!-- Icon -->
 59 |                 <i class="varnish-icon w-[31px] min-w-[31px] max-w-[31px] fa-fw fab fa-reddit-alien text-[18px] text-red-700/[.80] dark:text-red-400 -ml-4"></i>
 60 | 
 61 |                 <!-- Text -->
 62 |                 <span class="varnish-text font-medium text-[15px] text-gray-700 dark:text-gray-300 dark:group-hover:text-gray-700 ml-[5px]">
 63 |                     Share on Reddit
 64 |                 </span>
 65 | 
 66 |             </div>
 67 | 
 68 |             <!-- LinkedIn -->
 69 |             <div @click="visit(`https://www.linkedin.com/shareArticle?mini=true&url=${url}`)"
 70 |                  class="varnish-linkedIn bg-white dark:bg-gray-600 hover:bg-orange-100/[.25] dark:hover:bg-orange-100 border border-gray-300 dark:border-gray-600 flex items-center transition duration-300 rounded-md cursor-pointer group px-6 py-3">
 71 | 
 72 |                 <!-- Icon -->
 73 |                 <i class="varnish-icon w-[31px] min-w-[31px] max-w-[31px] fa-fw fab fa-linkedin text-[18px] text-blue-800/[.80] dark:text-blue-500 -ml-4"></i>
 74 | 
 75 |                 <!-- Text -->
 76 |                 <span class="varnish-text font-medium text-[15px] text-gray-700 dark:text-gray-300 dark:group-hover:text-gray-700 ml-[5px]">
 77 |                     Share on LinkedIn
 78 |                 </span>
 79 | 
 80 |             </div>
 81 | 
 82 |             <!-- Email -->
 83 |             <div @click="email()"
 84 |                  class="varnish-email bg-white dark:bg-gray-600 hover:bg-orange-100/[.25] dark:hover:bg-orange-100 border border-gray-300 dark:border-gray-600 flex items-center transition duration-300 rounded-md cursor-pointer group px-6 py-3">
 85 | 
 86 |                 <!-- Icon -->
 87 |                 <i class="varnish-icon w-[31px] min-w-[31px] max-w-[31px] fa-fw fas fa-envelope text-16px text-emerald-600/[.80] dark:text-emerald-500 relative top-1px -ml-4"></i>
 88 | 
 89 |                 <!-- Text -->
 90 |                 <span class="varnish-text font-medium text-[15px] text-gray-700 dark:text-gray-300 dark:group-hover:text-gray-700 ml-[5px]">
 91 |                     Send via email
 92 |                 </span>
 93 | 
 94 |             </div>
 95 | 
 96 |             <!-- Copy -->
 97 |             <div @click.stop="() => copy(url, () => $refs.copy_text.innerHTML = 'Copied!')"
 98 |                  class="varnish-copy bg-white dark:bg-gray-600 hover:bg-orange-100/[.25] dark:hover:bg-orange-100 border border-gray-300 dark:border-gray-600 flex items-center transition duration-300 rounded-md cursor-pointer group px-6 py-3">
 99 | 
100 |                 <!-- Icon -->
101 |                 <i class="varnish-icon w-[31px] min-w-[31px] max-w-[31px] fa-fw fas fa-link text-14px text-gray-500 dark:text-gray-400 relative top-1px -ml-4"></i>
102 | 
103 |                 <!-- Text -->
104 |                 <span ref="copy_text"
105 |                       class="varnish-text font-medium text-[15px] text-gray-600 dark:text-gray-300 dark:group-hover:text-gray-700 ml-[5px]">
106 | 
107 |                     <!-- Text -->
108 |                     Copy to clipboard
109 | 
110 |                 </span>
111 | 
112 |             </div>
113 | 
114 |         </div>
115 | 
116 |     </v-modal>
117 | </template>
118 | 
119 | <script>
120 |     import ModalComponent from './modal.vue';
121 |     import Utilities from '../mixins/Utilities';
122 | 
123 |     export default
124 |     {
125 |         /**
126 |          * Define the mixins.
127 |          *
128 |          */
129 |         mixins : [
130 |             Utilities,
131 |         ],
132 | 
133 |         /**
134 |          * Define the components.
135 |          *
136 |          */
137 |         components : {
138 |             'v-modal' : ModalComponent,
139 |         },
140 | 
141 |         /**
142 |          * Define the events.
143 |          *
144 |          */
145 |         emits : ['closed'],
146 | 
147 |         /**
148 |          * Define the public properties.
149 |          *
150 |          */
151 |         props : {
152 |             'url'     : { type : String,  default : '' },
153 | 			'visible' : { type : Boolean, default : false },
154 |         },
155 | 
156 | 		/**
157 | 		 * Define the supporting methods.
158 | 		 *
159 | 		 */
160 | 		methods:
161 |         {
162 | 			/**
163 | 			 * Send the url via email.
164 | 			 *
165 | 			 */
166 | 			email()
167 | 			{
168 |                 window.location.href = `mailto:?body=${this.url}`;
169 | 			},
170 | 
171 | 			/**
172 | 			 * Share the url on the given platform.
173 | 			 *
174 | 			 */
175 | 			visit(platform)
176 | 			{
177 |                 let popup = window.open('', '_blank', 'width=550,height=420');
178 | 
179 |                 popup.opener = null;
180 | 
181 |                 popup.location = platform;
182 | 			},
183 |         }
184 |     }
185 | </script>


--------------------------------------------------------------------------------
/src/components/button.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <button ref="btn"
  3 |             :id="name"
  4 |             :dusk="name"
  5 |             @click.prevent="simple ? $refs.simple.click() : execute()"
  6 |             :class="[theme.join(' '), mode === 'link' ? '' : 'min-w-[100px]', $attrs?.class ?? '']"
  7 |             class="varnish-button varnish-font w-full md:w-auto min-h-[35px] border border-solid flex items-center justify-center relative rounded transition-all duration-300 cursor-pointer">
  8 | 
  9 |         <!-- Label -->
 10 |         <div :class="processing ? 'text-transparent hidden' : ''"
 11 |              class="varnish-label flex items-center text-[13px] whitespace-nowrap select-none px-5">
 12 | 
 13 |             <!-- Icon -->
 14 |             <i v-if="icon"
 15 |                :class="icon"
 16 |                class="varnish-icon mr-3 opacity-50">
 17 |             </i>
 18 | 
 19 |             <!-- Text -->
 20 |             <span class="varnish-text font-semibold uppercase tracking-[.1px]">
 21 |                 {{ label }}
 22 |             </span>
 23 | 
 24 |         </div>
 25 | 
 26 |         <!-- Animation -->
 27 |         <div style="animation: varnish-button-spin 750ms infinite linear"
 28 |              :class="[processing ? '' : 'hidden', modes[mode][color].spinner]"
 29 |              class="varnish-spinner h-[15px] w-[15px] rounded-full border-2 border-r-transparent border-t-transparent">
 30 |         </div>
 31 | 
 32 |     </button>
 33 |     <button ref="simple"
 34 |             class="hidden">
 35 |     </button>
 36 | </template>
 37 | 
 38 | <script>
 39 |     import Foundation from '../mixins/Foundation';
 40 | 
 41 |     export default
 42 |     {
 43 |         /**
 44 |          * Define the mixins.
 45 |          *
 46 |          */
 47 |         mixins : [
 48 |             Foundation,
 49 |         ],
 50 | 
 51 |         /**
 52 |          * Define the data model.
 53 |          *
 54 |          */
 55 |         data() { return {
 56 |             modes : {
 57 |                 link : {
 58 |                     blue   : { button : 'border-transparent text-sky-600 hover:text-sky-800',       spinner : 'border-l-sky-600 border-b-sky-600' },
 59 |                     gray   : { button : 'border-transparent text-gray-500 hover:text-gray-700',     spinner : 'border-l-gray-500 border-b-gray-500' },
 60 |                     green  : { button : 'border-transparent text-green-700 hover:text-green-900',   spinner : 'border-l-green-700 border-b-green-700' },
 61 |                     orange : { button : 'border-transparent text-orange-600 hover:text-orange-800', spinner : 'border-l-orange-600 border-b-orange-600' },
 62 |                     purple : { button : 'border-transparent text-purple-600 hover:text-purple-800', spinner : 'border-l-purple-600 border-b-purple-600' },
 63 |                     red    : { button : 'border-transparent text-red-700 hover:text-red-900',       spinner : 'border-l-red-700 border-b-red-700' },
 64 |                     teal   : { button : 'border-transparent text-teal-600 hover:text-teal-800',     spinner : 'border-l-teal-600 border-b-teal-600' },
 65 |                 },
 66 |                 opaque : {
 67 |                     blue   : { button : 'border-transparent bg-sky-600 hover:bg-sky-700 text-white',       spinner : 'border-l-white border-b-white' },
 68 |                     gray   : { button : 'border-transparent bg-gray-500 hover:bg-gray-600 text-white',     spinner : 'border-l-white border-b-white' },
 69 |                     green  : { button : 'border-transparent bg-green-700 hover:bg-green-800 text-white',   spinner : 'border-l-white border-b-white' },
 70 |                     orange : { button : 'border-transparent bg-orange-600 hover:bg-orange-700 text-white', spinner : 'border-l-white border-b-white' },
 71 |                     purple : { button : 'border-transparent bg-purple-600 hover:bg-purple-700 text-white', spinner : 'border-l-white border-b-white' },
 72 |                     red    : { button : 'border-transparent bg-red-700 hover:bg-red-800 text-white',       spinner : 'border-l-white border-b-white' },
 73 |                     teal   : { button : 'border-transparent bg-teal-600 hover:bg-teal-700 text-white',     spinner : 'border-l-white border-b-white' },
 74 |                 },
 75 |                 outline : {
 76 |                     blue   : { button : 'border-sky-600 hover:bg-sky-600 text-sky-600 hover:text-white',          spinner : 'border-l-sky-600 border-b-sky-600' },
 77 |                     gray   : { button : 'border-gray-400 hover:bg-gray-400 text-gray-500 hover:text-white',       spinner : 'border-l-gray-500 border-b-gray-500' },
 78 |                     green  : { button : 'border-green-700 hover:bg-green-700 text-green-700 hover:text-white',    spinner : 'border-l-green-700 border-b-green-700' },
 79 |                     orange : { button : 'border-orange-600 hover:bg-orange-600 text-orange-600 hover:text-white', spinner : 'border-l-orange-600 border-b-orange-600' },
 80 |                     purple : { button : 'border-purple-600 hover:bg-purple-600 text-purple-600 hover:text-white', spinner : 'border-l-purple-600 border-b-purple-600' },
 81 |                     red    : { button : 'border-red-700 hover:bg-red-700 text-red-700 hover:text-white',          spinner : 'border-l-red-700 border-b-red-700' },
 82 |                     teal   : { button : 'border-teal-600 hover:bg-teal-600 text-teal-600 hover:text-white',       spinner : 'border-l-teal-600 border-b-teal-600' },
 83 |                 }
 84 |             }
 85 |         }},
 86 | 
 87 |         /**
 88 |          * Define the events.
 89 |          *
 90 |          */
 91 |         emits : ['click'],
 92 | 
 93 |         /**
 94 |          * Define the public properties.
 95 |          *
 96 |          */
 97 |         props : {
 98 |             'color'      : { type : String,  default : 'blue' },
 99 |             'disabled'   : { type : Boolean, default : false },
100 |             'mode'       : { type : String,  default : 'opaque' },
101 |             'processing' : { type : Boolean, default : false },
102 |             'simple'     : { type : Boolean, default : false },
103 |         },
104 | 
105 |         /**
106 |          * Define the computed properties.
107 |          *
108 |          */
109 |         computed :
110 |         {
111 |             /**
112 |              * Determine the appropriate styles for the component.
113 |              *
114 |              */
115 |             theme()
116 |             {
117 |                 let regex = this.disabled || this.processing ? /hover:(bg|text)-(white|.+-.{3})/gm : '';
118 | 
119 |                 return [
120 |                     this.modes[this.mode][this.color].button.replace(regex, ''),
121 |                     this.disabled   ? 'opacity-[.20] cursor-not-allowed'          : '',
122 |                     this.processing ? 'transition-none cursor-wait opacity-60' : '',
123 |                 ];
124 |             }
125 |         },
126 | 
127 |         /**
128 |          * Define the watch methods.
129 |          *
130 |          */
131 |         watch :
132 |         {
133 |             /**
134 |              * Watch the 'processing' data attribute.
135 |              *
136 |              */
137 |             processing : function(current, previous)
138 |             {
139 |                 this.$refs.btn.style.width = current ? `${this.$refs.btn.offsetWidth}px` : '';
140 |             }
141 |         },
142 | 
143 |         /**
144 |          * Define the supporting methods.
145 |          *
146 |          */
147 |         methods :
148 |         {
149 |             /**
150 |              * Respond to the button being clicked.
151 |              *
152 |              */
153 |             execute()
154 |             {
155 |                 if (! this.disabled && ! this.processing) {
156 |                     this.$emit('click');
157 |                 }
158 |             }
159 |         }
160 |     }
161 | </script>
162 | 
163 | <style>
164 |     @keyframes varnish-button-spin {
165 |         0%   { transform: rotate(0deg) }
166 |         100% { transform: rotate(359deg) }
167 |     }
168 | </style>


--------------------------------------------------------------------------------
/src/components/paginator.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex justify-between items-center mt-4">
  3 | 
  4 |         <!-- Summary -->
  5 |         <span class="text-[12px] text-gray-500/[.80] dark:text-gray-500 uppercase relative top-[1px]">
  6 | 
  7 |             <!-- Text -->
  8 |             <span>
  9 |                 Page
 10 |             </span>
 11 | 
 12 |             <!-- Current -->
 13 |             <span class="font-medium text-gray-700 dark:text-gray-400 mx-[1px]">
 14 |                 {{ trim(source.pagination?.current_page ?? '1') }},
 15 |             </span>
 16 | 
 17 |             <!-- Text -->
 18 |             <span class="ml-1">
 19 |                 Items
 20 |             </span>
 21 | 
 22 |             <!-- From -->
 23 |             <span class="font-medium text-gray-700 dark:text-gray-400 ml-[1px]">
 24 |                 {{ trim(source.pagination?.from ?? '0') }}
 25 |             </span>
 26 | 
 27 |             <!-- Divider -->
 28 |             <span class="-mx-[1px]">
 29 |                 -
 30 |             </span>
 31 | 
 32 |             <!-- To -->
 33 |             <span class="font-medium text-gray-700 dark:text-gray-400 ml-[1px]">
 34 |                 {{ trim(source.pagination?.to ?? '0') }}
 35 |                 {{ source.type === 'LengthAwarePaginator' ? ',' : '' }}
 36 |             </span>
 37 | 
 38 |             <!-- Total -->
 39 |             <span v-if="source.type === 'LengthAwarePaginator'"
 40 |                   class="block md:inline mt-[6px] md:ml-1 md:mt-0">
 41 | 
 42 |                 <!-- Text -->
 43 |                 <span>
 44 |                     Total
 45 |                 </span>
 46 | 
 47 |                 <!-- Value -->
 48 |                 <span class="font-medium text-gray-700 dark:text-gray-400 ml-[1px]">
 49 |                     {{ trim(source.pagination?.total ?? '0') }}
 50 |                 </span>
 51 | 
 52 |             </span>
 53 | 
 54 |         </span>
 55 | 
 56 |         <!-- Actions -->
 57 |         <div class="flex justify-end rounded">
 58 | 
 59 |             <!-- Reset -->
 60 |             <div v-if="reset"
 61 |                  title="Clear search filters"
 62 |                  dusk="varnish_paginator_button_reset"
 63 |                  @click="System.Form.submit(System.Form.create(), resetUrl(), 'get', { preserveScroll : true }, true)"
 64 |                  class="bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover-bg-gray-600 border border-r-0 border-gray-300 dark:border-gray-500 rounded-l cursor-pointer group transition duration-300 px-[13px] py-2">
 65 | 
 66 |                 <!-- Link -->
 67 |                 <i class="fas fa-times text-[14px] text-gray-800/[.50] dark:text-gray-500"></i>
 68 | 
 69 |             </div>
 70 | 
 71 |             <!-- Search -->
 72 |             <div v-if="search"
 73 |                  title="Search"
 74 |                  @click="search()"
 75 |                  :class="reset ? '' : 'rounded-l'"
 76 |                  dusk="varnish_paginator_button_search"
 77 |                  class="bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover-bg-gray-600 border border-r-0 border-gray-300 dark:border-gray-500 cursor-pointer group transition duration-300 px-3 py-2">
 78 | 
 79 |                 <!-- Link -->
 80 |                 <i class="fas fa-search text-[14px] text-gray-800/[.50] dark:text-gray-500"></i>
 81 | 
 82 |             </div>
 83 | 
 84 |             <!-- Download -->
 85 |             <div v-if="download"
 86 |                  title="Download"
 87 |                  @click="download()"
 88 |                  :class="search ? '' : 'rounded-l'"
 89 |                  dusk="varnish_paginator_button_download"
 90 |                  class="bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover-bg-gray-600 border border-r-0 border-gray-300 dark:border-gray-500 cursor-pointer group transition duration-300 px-3 py-2">
 91 | 
 92 |                 <!-- Link -->
 93 |                 <i class="fas fa-download text-[14px] text-gray-800/[.50] dark:text-gray-500"></i>
 94 | 
 95 |             </div>
 96 | 
 97 |             <!-- Previous Page (Disabled) -->
 98 |             <div :class="search ? '' : 'rounded-l'"
 99 |                  v-if="blank(source.pagination.prev_page_url)"
100 |                  class="border border-r-0 border-gray-300 dark:border-gray-500 select-none cursor-not-allowed px-3 py-2">
101 | 
102 |                 <!-- Arrow -->
103 |                 <i class="fas fa-arrow-left text-[14px] text-gray-300 dark:text-gray-800"></i>
104 | 
105 |             </div>
106 | 
107 |             <!-- Previous Page (Enabled) -->
108 |             <div title="Previous Page"
109 |                  :class="search ? '' : 'rounded-l'"
110 |                  v-if="source.pagination.prev_page_url"
111 |                  @click="goToPage(url(source.pagination.prev_page_url), { preserveScroll : true })"
112 |                  class="bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover-bg-gray-600 border border-r-0 border-gray-300 dark:border-gray-500 cursor-pointer group transition duration-300 px-3 py-2">
113 | 
114 |                 <!-- Link -->
115 |                 <i class="fas fa-arrow-left text-[14px] text-gray-800/[.50] dark:text-gray-500"></i>
116 | 
117 |             </div>
118 | 
119 |             <!-- Next Page (Enabled) -->
120 |             <div title="Next Page"
121 |                  v-if="source.pagination.next_page_url"
122 |                  @click="goToPage(url(source.pagination.next_page_url), { preserveScroll : true })"
123 |                  class="bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover-bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-r cursor-pointer group transition duration-300 px-3 py-2">
124 | 
125 |                 <!-- Link -->
126 |                 <i class="fas fa-arrow-right text-[14px] text-gray-800/[.50] dark:text-gray-500"></i>
127 | 
128 |             </div>
129 | 
130 |             <!-- Next Page (Disabled) -->
131 |             <div v-if="blank(source.pagination.next_page_url)"
132 |                  class="border border-gray-300 rounded-r select-none cursor-not-allowed px-3 py-2">
133 | 
134 |                 <!-- Arrow -->
135 |                 <i class="fas fa-arrow-right text-[14px] text-gray-300 dark:text-gray-800"></i>
136 | 
137 |             </div>
138 | 
139 |         </div>
140 | 
141 |     </div>
142 | </template>
143 | 
144 | <script>
145 |     import Utilities from '../mixins/Utilities';
146 | 
147 |     export default
148 |     {
149 |         /**
150 |          * Define the mixins.
151 |          *
152 |          */
153 |         mixins : [
154 |             Utilities,
155 |         ],
156 | 
157 |         /**
158 |          * Define the public properties.
159 |          *
160 |          */
161 |         props : {
162 |             'download' : { type : Function, default : null },
163 |             'reset'    : { type : Boolean,  default : false },
164 |             'search'   : { type : Function, default : null },
165 |             'source'   : { type : Object,   default : {} },
166 |         },
167 | 
168 |         /**
169 |          * Define the supporting methods.
170 |          *
171 |          */
172 |         methods :
173 |         {
174 |             /**
175 |              * Redirect the user to a different page.
176 |              *
177 |              */
178 |             goToPage(url, options)
179 |             {
180 |                 window.app.config.globalProperties.$inertia.visit(url, options);
181 |             },
182 | 
183 |             /**
184 |              * Generate the URL to send the request to.
185 |              *
186 |              */
187 |             resetUrl()
188 |             {
189 |                 return `${window.location.origin}${window.location.pathname}`
190 |             },
191 | 
192 |             /**
193 |              * Remove extraneous content from the given value.
194 |              *
195 |              */
196 |             trim(value)
197 |             {
198 |                 return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
199 |             },
200 | 
201 |             /**
202 |              * Generate a URL using the given link.
203 |              *
204 |              */
205 |             url(link)
206 |             {
207 |                 let pair = link.split('?')[1].split('=');
208 | 
209 |                 let query = System.Browser.queryString();
210 | 
211 |                 query.set(pair[0], pair[1]);
212 | 
213 |                 return `${link.split('?')[0]}?${query.toString()}`;
214 |             },
215 |         },
216 |     }
217 | </script>


--------------------------------------------------------------------------------
/src/components/upload.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-upload varnish-font relative">
  3 | 
  4 |         <!-- Hidden -->
  5 |         <input type="hidden"
  6 |                :value="modelValue"
  7 |                :id="`${name}_file_value`"
  8 |                :name="`${name}_file_value`" />
  9 | 
 10 |         <!-- Input -->
 11 |         <input :id="name"
 12 |                ref="file"
 13 |                type="file"
 14 |                :name="name"
 15 |                :dusk="name"
 16 | 			   :accept="types"
 17 |                @change="upload()"
 18 |                :class="automated() ? '' : 'hidden'" />
 19 | 
 20 |         <!-- Button -->
 21 |         <label v-if="format === 'button'"
 22 |                @click="disabled || display ? null : selectNew()"
 23 |                class="font-semibold text-[13px] uppercase flex justify-center items-center select-none transition duration-300"
 24 |                :class="disabled || display ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed' : 'text-sky-600 dark:text-sky-500 hover:text-rose-700 dark:hover:text-rose-400 cursor-pointer'">
 25 | 
 26 |             <!-- Value -->
 27 |             {{ label }}
 28 | 
 29 |         </label>
 30 | 
 31 |         <!-- Field -->
 32 |         <div v-if="format === 'field'"
 33 |              @mouseover="hover = true"
 34 |              @mouseout="hover = false"
 35 |              class="varnish-container bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded relative overflow-hidden transition duration-300">
 36 | 
 37 | 			<!-- File Name -->
 38 | 			<input readonly
 39 |                    type="text"
 40 | 				   :value="display"
 41 |                    :id="`${name}_file_name`"
 42 |                    :name="`${name}_file_name`"
 43 |                    :class="hover || focus ? 'pr-[50px]' : 'pr-3'"
 44 | 				   @click="disabled || display ? null : selectNew()"
 45 | 				   class="bg-inherit text-gray-900 dark:text-gray-400 w-full text-ellipsis overflow-hidden rounded appearance-none cursor-pointer pl-3 pt-[25px] pb-[7px]" />
 46 | 
 47 |             <!-- Label -->
 48 |             <v-label :icon="icon"
 49 |                      :value="label"
 50 |                      :focus="focus"
 51 |                      :optional="optional"
 52 |                      :filled="! blank(display)">
 53 |             </v-label>
 54 | 
 55 |             <!-- Clear -->
 56 |             <v-clear :focus="focus"
 57 |                      :hover="hover"
 58 |                      @click="reset()"
 59 |                      :filled="! blank(display)">
 60 |             </v-clear>
 61 | 
 62 |         </div>
 63 | 
 64 |         <!-- Drag and Drop -->
 65 |         <div @dragover.prevent
 66 |              v-if="format === 'drag'"
 67 |              @click="disabled || display ? null : selectNew()"
 68 |              @drop.prevent="disabled || display ? null : uploadMany($event.dataTransfer.files)"
 69 |              class="bg-gray-50/[.60] border-[1.5px] border-dashed border-gray-300 flex flex-col justify-center items-center rounded-md cursor-pointer p-14 pb-11">
 70 | 
 71 |             <!-- Icon -->
 72 |             <i class="fas text-[35px] text-gray-400/[.80] mb-5"
 73 |                :class="display ? 'fa-cog fa-spin' : 'fa-file-upload'">
 74 |             </i>
 75 | 
 76 |             <!-- Instructions -->
 77 |             <div class="text-gray-600/[.90] text-center leading-normal max-w-[230px]">
 78 | 
 79 |                 <!-- Uploading -->
 80 |                 <span v-if="display">
 81 |                     The selected {{ multiple ? 'file(s) are' : 'file is now'}} being uploaded. Just one moment&hellip;
 82 |                 </span>
 83 | 
 84 |                 <!-- Waiting -->
 85 |                 <span v-if="! display">
 86 |                     Drag and drop {{ multiple ? 'file(s)' : 'a file'}} to upload, or click here to select one.
 87 |                 </span>
 88 | 
 89 |             </div>
 90 | 
 91 |         </div>
 92 | 
 93 |         <!-- Progress -->
 94 |         <v-progress class="mt-4"
 95 |                     :value="current"
 96 |                     v-if="format !== 'button' && current !== 0">
 97 |         </v-progress>
 98 | 
 99 |         <!-- Error -->
100 |         <v-error :value="fault"></v-error>
101 | 
102 |     </div>
103 | </template>
104 | 
105 | <script>
106 |     import Vapor from '../support/vapor';
107 |     import ClearComponent from './clear.vue';
108 |     import ErrorComponent from './error.vue';
109 |     import LabelComponent from './label.vue';
110 |     import Utilities from '../mixins/Utilities';
111 |     import Foundation from '../mixins/Foundation';
112 |     import ProgressBarComponent from './progress.vue';
113 | 
114 |     export default
115 |     {
116 |         /**
117 |          * Define the mixins.
118 |          *
119 |          */
120 |         mixins : [
121 |             Utilities,
122 |             Foundation,
123 |         ],
124 | 
125 |         /**
126 |          * Define the components.
127 |          *
128 |          */
129 |         components : {
130 |             'v-clear'    : ClearComponent,
131 |             'v-error'    : ErrorComponent,
132 |             'v-label'    : LabelComponent,
133 |             'v-progress' : ProgressBarComponent,
134 |         },
135 | 
136 |         /**
137 |          * Define the data model.
138 |          *
139 |          */
140 |         data() { return {
141 |             display : '',
142 |             current : 0,
143 |         }},
144 | 
145 |         /**
146 |          * Define the events.
147 |          *
148 |          */
149 |         emits : ['reset', 'uploading', 'uploaded'],
150 | 
151 |         /**
152 |          * Define the public properties.
153 |          *
154 |          */
155 |         props : {
156 |             'disabled' : { type : Boolean, default : false },
157 |             'format'   : { type : String,  default : 'field' },
158 |             'multiple' : { type : Boolean, default : false },
159 |             'size'     : { type : Number,  default : 1048576 },
160 |             'types'    : { type : String,  default : 'image/png, image/jpeg' },
161 |         },
162 | 
163 |         /**
164 |          * Define the supporting methods.
165 |          *
166 |          */
167 |         methods :
168 |         {
169 |             /**
170 |              * Update the user interface after completion.
171 |              *
172 |              */
173 |             finish()
174 |             {
175 |                 this.current = 0;
176 | 
177 |                 this.$refs.file.value = null;
178 |             },
179 | 
180 |             /**
181 |              * Clear the state of the component.
182 |              *
183 |              */
184 |             reset(error = '')
185 |             {
186 |                 this.display = '';
187 | 
188 |                 this.fault = error;
189 | 
190 |                 this.$emit('reset');
191 | 
192 |                 this.finish();
193 |             },
194 | 
195 |             /**
196 |              * Remove the selected file and allow for the selection of a new one.
197 |              *
198 |              */
199 |             selectNew()
200 |             {
201 |                 this.reset();
202 | 
203 |                 this.$refs.file.click();
204 |             },
205 | 
206 |             /**
207 |              * Stream the chosen file to the server.
208 |              *
209 |              */
210 |             async upload(file = null)
211 |             {
212 |                 file = file ?? this.$refs.file.files[0];
213 | 
214 | 				if (file.size > this.size) {
215 |                     return this.reset(`The file must be less than ${this.size / 1048576} MB.`);
216 | 				}
217 | 
218 | 				if (this.types !== '*' && ! this.types.replaceAll(' ', '').split(',').includes(file.type.toLowerCase())) {
219 |                     return this.reset('The file must be in the correct format.');
220 | 				}
221 | 
222 |                 this.fault   = '';
223 |                 this.display = file.name;
224 | 
225 |                 this.$emit('uploading', file);
226 | 
227 |                 await Vapor.store(file, { progress : progress => this.current = Math.round(progress) })
228 |                      .then(response => { this.$emit('uploaded', { uuid : response.uuid, file : file }); this.finish() });
229 |             },
230 | 
231 |             /**
232 |              * Stream one or more files to the server.
233 |              *
234 |              */
235 |             async uploadMany(files)
236 |             {
237 |                 if (! this.multiple) {
238 |                     return await this.upload(files[0]);
239 |                 }
240 | 
241 |                 for (const file of files) {
242 |                     await this.upload(file);
243 |                 }
244 |             },
245 |         }
246 |     }
247 | </script>


--------------------------------------------------------------------------------
/src/components/datetime.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="varnish-datetime varnish-font">
  3 | 
  4 |         <!-- Hidden -->
  5 |         <input :id="name"
  6 |                :name="name"
  7 |                type="hidden"
  8 |                :value="modelValue">
  9 | 
 10 |         <!-- TextBox -->
 11 |         <v-textbox :icon="icon"
 12 |                    :label="label"
 13 |                    :readOnly="true"
 14 |                    @change="clear()"
 15 |                    :optional="optional"
 16 |                    :modelValue="format"
 17 |                    :id="`${name}_text_box`"
 18 |                    @click="showSelectors()"
 19 |                    :dusk="`${name}_text_box`"
 20 |                    :optionalText="optionalText"
 21 |                    :class="hideTextbox ? 'hidden' : ''">
 22 |         </v-textbox>
 23 | 
 24 |         <!-- Container -->
 25 |         <div v-if="selectors.date || selectors.time"
 26 |              class="varnish-container bg-white dark:bg-gray-800 border-l border-r border-b border-gray-300 dark:border-gray-700 rounded-b relative -top-[3px] pt-[3px]">
 27 | 
 28 |             <!-- Divider -->
 29 |             <div class="varnish-divider w-full h-[1px] border-t border-gray-300 dark:border-gray-700"></div>
 30 | 
 31 |             <!-- Date Selector -->
 32 |             <div v-if="selectors.date"
 33 |                  class="varnish-selector-date bg-gray-100/[.25] dark:bg-gray-800 p-6 pt-5">
 34 | 
 35 |                 <!-- Head -->
 36 |                 <div class="varnish-header flex items-center mb-4">
 37 | 
 38 |                     <!-- Back -->
 39 |                     <i title="Go to previous month"
 40 |                        @click="goToPreviousMonth()"
 41 |                        class="varnish-caret-left fas fa-caret-left text-gray-400 hover:text-gray-600 dark:text-gray-600 dark:hover:text-gray-400 transition duration-300 cursor-pointer">
 42 |                     </i>
 43 | 
 44 |                     <!-- Month & Year -->
 45 |                     <div class="varnish-selector-month-year flex justify-center flex-1">
 46 | 
 47 |                         <!-- Month -->
 48 |                         <select :id="`${name}_select_month`"
 49 |                                 :name="`${name}_select_month`"
 50 |                                 :dusk="`${name}_select_month`"
 51 |                                 @change="calendar = calendar.set({ month : $event.target.value })"
 52 |                                 class="varnish-selector-month appearance-none bg-inherit font-semibold text-[15px] text-gray-800 dark:text-gray-300/[.80] leading-normal pr-[2px]">
 53 | 
 54 |                             <!-- Options -->
 55 |                             <option :key="index"
 56 |                                     :value="index"
 57 |                                     v-for="(month, index) in months"
 58 |                                     :selected="index === calendar.month">
 59 | 
 60 |                                 <!-- Text -->
 61 |                                 {{ months[index - 1] }}
 62 | 
 63 |                             </option>
 64 | 
 65 |                         </select>
 66 | 
 67 |                         <!-- Year -->
 68 |                         <select :id="`${name}_select_year`"
 69 |                                 :name="`${name}_select_year`"
 70 |                                 :dusk="`${name}_select_year`"
 71 |                                 @change="calendar = calendar.set({ year : $event.target.value })"
 72 |                                 class="varnish-selector-year appearance-none bg-inherit font-semibold text-[15px] text-gray-800 dark:text-gray-300/[.80] leading-normal">
 73 | 
 74 |                             <!-- Options -->
 75 |                             <option :key="year"
 76 |                                     :value="year"
 77 |                                     v-for="year in years"
 78 |                                     :selected="year === calendar.year">
 79 | 
 80 |                                 <!-- Text -->
 81 |                                 {{ year }}
 82 | 
 83 |                             </option>
 84 | 
 85 |                         </select>
 86 | 
 87 |                     </div>
 88 | 
 89 |                     <!-- Forward -->
 90 |                     <i title="Go to next month"
 91 |                        @click="goToNextMonth()"
 92 |                        class="varnish-caret-right fas fa-caret-right text-gray-400 hover:text-gray-600 dark:text-gray-600 dark:hover:text-gray-400 transition duration-300 cursor-pointer">
 93 |                     </i>
 94 | 
 95 |                 </div>
 96 | 
 97 |                 <!-- Week -->
 98 |                 <div class="varnish-week grid grid-cols-7 -mx-[10px]">
 99 | 
100 |                     <!-- Day -->
101 |                     <span :key="day"
102 |                           v-for="day in week"
103 |                           class="varnish-week-day text-[12px] text-gray-500/[.80] dark:text-gray-400/[.80] text-center">
104 | 
105 |                         <!-- Text -->
106 |                         {{ day }}
107 | 
108 |                     </span>
109 | 
110 |                 </div>
111 | 
112 |                 <!-- Days -->
113 |                 <div class="varnish-days grid grid-cols-7 gap-y-4 pt-4 -mx-[10px]">
114 | 
115 |                     <!-- Day -->
116 |                     <div v-for="day in daysInMonth"
117 |                          @click="selectDate(day.date)"
118 |                          class="varnish-day flex justify-center"
119 |                          :dusk="`${name}_select_day_${day.ordinal}`"
120 |                          :class="day.enabled ? 'text-gray-700 dark:text-gray-400 cursor-pointer group' : 'text-gray-300 dark:text-gray-700 pointer-events-none'">
121 | 
122 |                         <!-- Ordinal -->
123 |                         <div class="varnish-ordinal h-[28px] w-[28px] text-[15px] text-center rounded-full pt-[6px] pb-[4px]"
124 |                              :class="[
125 |                                 day.today ? 'font-semibold text-sky-600 dark:text-sky-400' : '',
126 |                                 day.selected ? 'bg-emerald-600/[.30] dark:bg-emerald-600/[.60] dark:text-gray-300' : 'group-hover:bg-emerald-600/[.30] dark:group-hover:bg-emerald-600/[.60] dark:group-hover:text-gray-300'
127 |                             ]">
128 | 
129 |                             <!-- Text -->
130 |                             {{ day.ordinal }}
131 | 
132 |                         </div>
133 | 
134 |                     </div>
135 | 
136 |                 </div>
137 | 
138 |             </div>
139 | 
140 |             <!-- Divider -->
141 |             <div v-if="selectors.date && selectors.time"
142 |                  class="varnish-divider w-full h-[1px] border-t border-gray-300 dark:border-gray-700"></div>
143 | 
144 |             <!-- Time Selector -->
145 |             <div v-if="selectors.time"
146 |                  class="varnish-selector-time flex flex-col justify-between items-center bg-gray-100/[.25] dark:bg-gray-800 p-6 pb-[18px]">
147 | 
148 |                 <!-- Time Zone -->
149 |                 <div :title="`UTC ${calendar.toFormat('Z')}`"
150 |                      class="varnish-zone font-medium basis-full text-[13px] text-gray-500 dark:text-gray-400/[.80] truncate mb-1">
151 | 
152 |                     <!-- Text -->
153 |                     {{ calendar.toFormat('ZZZZZ') }}
154 | 
155 |                 </div>
156 | 
157 |                 <!-- Hour, Minute, Seconds -->
158 |                 <div class="varnish-selector-minute-hour-second flex items-center">
159 | 
160 |                     <!-- Hour -->
161 |                     <select ref="selector_hour"
162 |                             @change="selectTime()"
163 |                             :id="`${name}_select_hour`"
164 |                             :name="`${name}_select_hour`"
165 |                             :dusk="`${name}_select_hour`"
166 |                             class="varnish-selector-hour appearance-none bg-inherit font-medium text-[15px] text-gray-800 dark:text-gray-300 leading-normal pr-[6px]">
167 | 
168 |                         <!-- Options -->
169 |                         <option :key="hour"
170 |                                 :value="hour"
171 |                                 v-for="hour in hours"
172 |                                 :selected="hour === calendar.hour.toString().padStart(2, '0')">
173 | 
174 |                             <!-- Text -->
175 |                             {{ hour }}
176 | 
177 |                         </option>
178 | 
179 |                     </select>
180 | 
181 |                     <!-- Separator -->
182 |                     <span class="varnish-separator relative -top-[1px] -ml-[3px] mr-[3px]">
183 |                         :
184 |                     </span>
185 | 
186 |                     <!-- Minute -->
187 |                     <select ref="selector_minute"
188 |                             @change="selectTime()"
189 |                             :id="`${name}_select_minute`"
190 |                             :name="`${name}_select_minute`"
191 |                             :dusk="`${name}_select_minute`"
192 |                             class="varnish-selector-minute appearance-none bg-inherit font-medium text-[15px] text-gray-800 dark:text-gray-300 leading-normal">
193 | 
194 |                         <!-- Options -->
195 |                         <option :key="minute"
196 |                                 :value="minute"
197 |                                 v-for="minute in minutes"
198 |                                 :selected="minute === calendar.minute.toString().padStart(2, '0')">
199 | 
200 |                             <!-- Text -->
201 |                             {{ minute }}
202 | 
203 |                         </option>
204 | 
205 |                     </select>
206 | 
207 |                     <!-- Separator -->
208 |                     <span v-if="showSeconds"
209 |                           class="varnish-separator relative -top-[1px] ml-[2px] mr-[3px]">
210 | 
211 |                         <!-- Text -->
212 |                         :
213 | 
214 |                     </span>
215 | 
216 |                     <!-- Second -->
217 |                     <select v-if="showSeconds"
218 |                             ref="selector_second"
219 |                             @change="selectTime()"
220 |                             :id="`${name}_select_second`"
221 |                             :name="`${name}_select_second`"
222 |                             :dusk="`${name}_select_second`"
223 |                             class="varnish-selector-second appearance-none bg-inherit font-medium text-[15px] text-gray-800 dark:text-gray-300 leading-normal">
224 | 
225 |                         <!-- Options -->
226 |                         <option :key="second"
227 |                                 :value="second"
228 |                                 v-for="second in seconds"
229 |                                 :selected="second === calendar.second.toString().padStart(2, '0')">
230 | 
231 |                             <!-- Text -->
232 |                             {{ second }}
233 | 
234 |                         </option>
235 | 
236 |                     </select>
237 | 
238 |                     <!-- Meridiem -->
239 |                     <span v-if="meridiem"
240 |                         class="varnish-meridiem text-[14px] text-gray-400 dark:text-gray-400/[.60] ml-2">
241 | 
242 |                         <!-- Text -->
243 |                         {{ value.toFormat('a').toLowerCase() }}
244 | 
245 |                     </span>
246 | 
247 |                 </div>
248 | 
249 |             </div>
250 | 
251 |         </div>
252 | 
253 |         <!-- Error -->
254 |         <v-error :value="fault"></v-error>
255 | 
256 |     </div>
257 | </template>
258 | 
259 | <script>
260 |     import ErrorComponent from './error.vue';
261 |     import { DateTime, Interval } from 'luxon';
262 |     import Container from '../mixins/Container';
263 |     import Utilities from '../mixins/Utilities';
264 |     import TextBoxComponent from './textbox.vue';
265 |     import Foundation from '../mixins/Foundation';
266 | 
267 |     export default
268 |     {
269 |         /**
270 |          * Define the mixins.
271 |          *
272 |          */
273 |         mixins : [
274 |             Container,
275 |             Utilities,
276 |             Foundation,
277 |         ],
278 | 
279 |         /**
280 |          * Define the components.
281 |          *
282 |          */
283 |         components : {
284 |             'v-error'   : ErrorComponent,
285 |             'v-textbox' : TextBoxComponent,
286 |         },
287 | 
288 |         /**
289 |          * Define the events.
290 |          *
291 |          */
292 |         emits : ['lostFocus'],
293 | 
294 |         /**
295 |          * Define the data model.
296 |          *
297 |          */
298 |         data() { return {
299 |             attention : false,
300 |             calendar  : null,
301 |             hours     : Array(24).fill('').map((v, i) => `${i}`.padStart(2, '0')),
302 |             limits    : { minimum : DateTime.fromISO(this.minDate), maximum : DateTime.fromISO(this.maxDate) },
303 |             minutes   : Array(60).fill('').map((v, i) => `${i}`.padStart(2, '0')),
304 |             months    : Array(12).fill('').map((v, i) => new Intl.DateTimeFormat(this.locale, { month: 'short' }).format(new Date(Date.UTC(2021, (i)%12, 20)))),
305 |             seconds   : Array(60).fill('').map((v, i) => `${i}`.padStart(2, '0')),
306 |             selectors : { date : false, time : false },
307 |             value     : null,
308 |             week      : Array(7).fill('').map((v, i) => new Intl.DateTimeFormat(this.locale, { weekday: 'short' }).format(new Date(Date.UTC(2021, 5, i)))),
309 |         }},
310 | 
311 |         /**
312 |          * Define the public properties.
313 |          *
314 |          */
315 |         props : {
316 |             'hideTextbox'  : { type : Boolean, default : false },
317 |             'locale'       : { type : String,  default : 'en-US' },
318 |             'maxDate'      : { type : String,  default : '2100-12-31' },
319 |             'meridiem'     : { type : Boolean, default : false },
320 |             'minDate'      : { type : String,  default : '1900-01-01' },
321 |             'showCalendar' : { type : Boolean, default : false },
322 |             'showSeconds'  : { type : Boolean, default : false },
323 |             'startDate'    : { type : String,  default : '' },
324 |             'type'         : { type : String,  default : 'date' },
325 |         },
326 | 
327 |         /**
328 |          * Define the computed properties.
329 |          *
330 |          */
331 |         computed :
332 |         {
333 |             /**
334 |              * Retrieve each of the days in the calendar month.
335 |              *
336 |              */
337 |             daysInMonth()
338 |             {
339 |                 let days = [];
340 | 
341 |                 for (let ordinal = this.calendar.startOf('month').weekday; ordinal > 1; ordinal--) {
342 |                     days.push({
343 |                         date     : null,
344 |                         enabled  : false,
345 |                         ordinal  : this.calendar.startOf('month').minus({ days : ordinal - 1 }).day,
346 |                         selected : false,
347 |                         today    : false,
348 |                     });
349 |                 }
350 | 
351 |                 for (let ordinal = 1; ordinal <= this.calendar.daysInMonth; ordinal++) {
352 |                     days.push({
353 |                         date     : this.calendar.set({ day : ordinal }).toISODate(),
354 |                         enabled  : this.withinLimits(this.calendar.set({ day : ordinal })),
355 |                         ordinal  : ordinal,
356 |                         selected : this.value.toISODate() === this.calendar.set({ day : ordinal }).toISODate(),
357 |                         today    : DateTime.now().setLocale(this.locale).toISODate() === this.calendar.set({ day : ordinal }).toISODate(),
358 |                     });
359 |                 }
360 | 
361 |                 return days;
362 |             },
363 | 
364 |             /**
365 |              * Render the component's value in a human-readable format.
366 |              *
367 |              */
368 |             format()
369 |             {
370 |                 let preset = this.showSeconds ? DateTime.TIME_24_WITH_SECONDS : DateTime.TIME_24_SIMPLE;
371 | 
372 |                 if (this.blank(this.modelValue)) {
373 |                     return '';
374 |                 }
375 | 
376 |                 if (this.type === 'date') {
377 |                     return this.value.toLocaleString(DateTime.DATE_MED);
378 |                 }
379 | 
380 |                 if (this.type === 'time') {
381 |                     return this.value.toLocaleString(preset);
382 |                 }
383 | 
384 |                 if (this.type === 'datetime') {
385 |                     return this.value.toLocaleString(DateTime.DATE_MED) + ' - ' +
386 |                         this.value.toLocaleString(preset) +
387 |                         (this.meridiem ? ` (${this.value.toFormat('a').toLowerCase()})` : '');
388 |                 }
389 | 
390 |                 throw 'Unknown type format';
391 |             },
392 | 
393 |             /**
394 |              * Determine the range of years that are permitted.
395 |              *
396 |              */
397 |             years()
398 |             {
399 |                 let range = Array(this.limits.maximum.year - this.limits.minimum.year + 1);
400 | 
401 |                 return range.fill('').map((v, i) => this.limits.maximum.year - i).reverse();
402 |             },
403 |         },
404 | 
405 |         /**
406 |          * Define the watch methods.
407 |          *
408 |          */
409 |         watch :
410 |         {
411 |             /**
412 |              * Watch the 'maxDate' property.
413 |              *
414 |              */
415 |             maxDate : function(current, previous)
416 |             {
417 |                 this.limits.maximum = DateTime.fromISO(current, { locale : this.locale });
418 |             },
419 | 
420 |             /**
421 |              * Watch the 'minDate' property.
422 |              *
423 |              */
424 |             minDate : function(current, previous)
425 |             {
426 |                 this.limits.minimum = DateTime.fromISO(current, { locale : this.locale });
427 |             },
428 | 
429 |             /**
430 |              * Watch the 'modelValue' property.
431 |              *
432 |              */
433 |             modelValue : function(current, previous)
434 |             {
435 |                 this.value = this.blank(current) ? null : DateTime.fromISO(current, { locale : this.locale });
436 |             },
437 | 
438 |             /**
439 |              * Watch the 'showCalendar' property.
440 |              *
441 |              */
442 |             showCalendar : function(current, previous)
443 |             {
444 |                 if (! current) return this.lostUserAttention();
445 | 
446 |                 this.attention = true;
447 | 
448 |                 this.showSelectors();
449 |             },
450 |         },
451 | 
452 |         /**
453 |          * Execute actions when the component is instantiated.
454 |          *
455 |          */
456 |         created()
457 |         {
458 |             if (this.blank(this.modelValue)) return;
459 | 
460 |             this.value = DateTime.fromISO(this.modelValue, { locale : this.locale });
461 |         },
462 | 
463 | 		/**
464 | 		 * Define the supporting methods.
465 | 		 *
466 | 		 */
467 | 		methods :
468 |         {
469 |             /**
470 |              * Reset the component to a blank state.
471 |              *
472 |              */
473 |             clear()
474 |             {
475 |                 this.lostUserAttention();
476 | 
477 |                 this.change('');
478 |             },
479 | 
480 |             /**
481 |              * Adjust the calendar so that it shows the given month.
482 |              *
483 |              */
484 |             goToMonth(month)
485 |             {
486 |                 if (this.withinLimits(month)) {
487 |                     this.calendar = month;
488 |                 }
489 |             },
490 | 
491 |             /**
492 |              * Adjust the calendar so that it shows the next month.
493 |              *
494 |              */
495 |             goToNextMonth()
496 |             {
497 |                 this.goToMonth(this.calendar.plus({ months : 1 }));
498 |             },
499 | 
500 |             /**
501 |              * Adjust the calendar so that it shows the previous month.
502 |              *
503 |              */
504 |             goToPreviousMonth()
505 |             {
506 |                 this.goToMonth(this.calendar.minus({ months : 1 }));
507 |             },
508 | 
509 | 	    	/**
510 | 	    	 * Determine if the component currently has the user's attention.
511 | 	    	 *
512 | 	    	 */
513 | 	    	hasUserAttention()
514 | 	    	{
515 |                 return this.selectors.date || this.selectors.time;
516 | 	    	},
517 | 
518 | 	    	/**
519 | 	    	 * Respond to the component losing the user's attention.
520 | 	    	 *
521 | 	    	 */
522 | 	    	lostUserAttention()
523 | 	    	{
524 |                 if (this.attention) {
525 |                     return this.attention = false;
526 |                 }
527 | 
528 |                 this.selectors.date = false;
529 |                 this.selectors.time = false;
530 | 
531 |                 this.$emit('lostFocus');
532 | 	    	},
533 | 
534 |             /**
535 |              * Respond to the selection of a revised date.
536 |              *
537 |              */
538 |             selectDate(date)
539 |             {
540 |                 if (this.type === 'date') {
541 |                     return this.change(date);
542 |                 }
543 | 
544 |                 this.selectTime(DateTime.fromISO(date));
545 |             },
546 | 
547 |             /**
548 |              * Respond to the selection of a revised time.
549 |              *
550 |              */
551 |             selectTime(date = null)
552 |             {
553 |                 let changes = {
554 |                     hours   : this.$refs.selector_hour.value,
555 |                     minutes : this.$refs.selector_minute.value,
556 |                 };
557 | 
558 |                 if (this.showSeconds) {
559 |                     changes.seconds = this.$refs.selector_second.value;
560 |                 }
561 | 
562 |                 date = (date ?? this.value).set(changes).startOf('second').setZone('UTC');
563 | 
564 |                 this.change(this.type === 'time' ? date.toISOTime() : date.toISO());
565 |             },
566 | 
567 |             /**
568 |              * Display the date and / or time selector for the user.
569 |              *
570 |              */
571 |             showSelectors()
572 |             {
573 |                 if (this.blank(this.value)) {
574 |                     if (this.startDate) {
575 |                         this.value = DateTime.fromISO(this.startDate).startOf('day').setLocale(this.locale);
576 |                     } else {
577 |                         this.value = DateTime.now().startOf('day').setLocale(this.locale);
578 |                     }
579 |                 }
580 | 
581 |                 this.calendar = this.value;
582 | 
583 |                 if (['date', 'datetime'].includes(this.type)) {
584 |                     this.selectors.date = true;
585 |                 }
586 | 
587 |                 if (['time', 'datetime'].includes(this.type)) {
588 |                     this.selectors.time = true;
589 |                 }
590 |             },
591 | 
592 |             /**
593 |              * Determine if the given date falls between the minimum and maximum.
594 |              *
595 |              */
596 |             withinLimits(date)
597 |             {
598 |                 let range = Interval.fromDateTimes(this.limits.minimum, this.limits.maximum);
599 | 
600 |                 return range.contains(date);
601 |             },
602 |         }
603 |     }
604 | </script>
605 | 


--------------------------------------------------------------------------------