fleet/website/assets/js/components/ajax-button.component.js
Mike McNeil 27eae209fd
Move fleetdm.com into main Fleet repo (#83)
* rename dir

* no need to install website or docs from npm

At some point, would also be nice to be able to exclude assets/ as well, and to only install a pre-built version of Fleet's frontend code

* Bring in fleetdm.com website

From https://github.com/fleetdm/fleetdm.com as of https://github.com/fleetdm/fleetdm.com/releases/tag/v0.0.21

* add procfile for heroku

Using https://github.com/timanovsky/subdir-heroku-buildpack

* avoid getting anybody's hopes up

* Create deploy-fleet-website.yml (#82)

* Create deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* update pjs with SPDX-like license expressions.  also fix repo URL

and remove package lock

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* remove dummy uri

* Dissect deploy script

* Update deploy-fleet-website.yml

* workaround for eslintrc nesting issue

* lint fixes

* forgot the .js

* add per-commit git config

* Update deploy-fleet-website.yml

* might as well remove that

* cleanup

* connect w/ heroku app and have it actually push

* fix bug I introduced in 578a1a01ff

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* the beauty, the glory, of javascript

* GH actions don't like "\n"

* Update deploy-fleet-website.yml

* restore \n chars from 0d45e568f6

hoping I was wrong in 0d45e568f6 but see also https://github.community/t/what-is-the-correct-character-escaping-for-workflow-command-values-e-g-echo-xxxx/118465/5

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* Update deploy-fleet-website.yml

* rename script to prevent duplicate building

* Configure the real website

* clean up

* a test of the deploy workflow

* add handbook to npmignore

* I guess you could call this fixing a typo

* point workflow at master branch

* now clearly bogus: this completely unused version string
2020-12-02 14:48:03 -06:00

69 lines
2.6 KiB
JavaScript

/**
* <ajax-button>
* -----------------------------------------------------------------------------
* A button with a built-in loading spinner.
*
* @type {Component}
*
* @event click [emitted when clicked]
* -----------------------------------------------------------------------------
*/
parasails.registerComponent('ajaxButton', {
// ╔═╗╦═╗╔═╗╔═╗╔═╗
// ╠═╝╠╦╝║ ║╠═╝╚═╗
// ╩ ╩╚═╚═╝╩ ╚═╝
props: [
'syncing'
],
// ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: function (){
return {
//…
};
},
// ╦ ╦╔╦╗╔╦╗╦
// ╠═╣ ║ ║║║║
// ╩ ╩ ╩ ╩ ╩╩═╝
template: `
<button @click="click()" type="submit" class="btn ajax-button" :class="[syncing ? 'syncing' : '']">
<span class="button-text" v-if="!syncing"><slot name="default">Submit</slot></span>
<span class="button-loader clearfix" v-if="syncing">
<slot name="syncing-state">
<span style="top: -4px; font-size: 12px; margin: 0 2px;" class="loading-dot dot1 position-relative"><small><span class="fa fa-circle"></span></small></span>
<span style="top: -4px; font-size: 12px; margin: 0 2px;" class="loading-dot dot2 position-relative"><small><span class="fa fa-circle"></span></small></span>
<span style="top: -4px; font-size: 12px; margin: 0 2px;" class="loading-dot dot3 position-relative"><small><span class="fa fa-circle"></span></small></span>
<span style="top: -4px; font-size: 12px; margin: 0 2px;" class="loading-dot dot4 position-relative"><small><span class="fa fa-circle"></span></small></span>
</slot>
</span>
</button>
`,
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
beforeMount: function() {
//…
},
mounted: async function(){
//…
},
beforeDestroy: function() {
//…
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
click: async function(){
this.$emit('click');
},
}
});