Skip to content

Instantly share code, notes, and snippets.

View dobromir-hristov's full-sized avatar
💭
Vue dev

Dobromir Hristov dobromir-hristov

💭
Vue dev
View GitHub Profile
{
"screens": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px"
},
"fontFamily": {
"display": [
"Gilroy",
@dobromir-hristov
dobromir-hristov / input.scss
Created October 7, 2020 16:34
Generated by SassMeister.com.
$is-target-ide: true;
$app-mode: if($is-target-ide, ide, default);
$base-colors: (
glyph-gray: (
light: pink,
dark: purple
),
glyph-gray-secondary: (
light: rgb(110, 110, 115),
@dobromir-hristov
dobromir-hristov / input.scss
Last active October 7, 2020 15:57
Generated by SassMeister.com.
$base-colors: (
glyph-gray: (
light: pink,
dark: purple
),
glyph-gray-secondary: (
light: rgb(110, 110, 115),
dark: rgb(134, 134, 139)
),
);
@dobromir-hristov
dobromir-hristov / input.scss
Created October 7, 2020 12:40
Generated by SassMeister.com.
$component-colors: (
links-item-border: (
default: links-item-border-default,
ide: links-item-border-ide
),
link-item-bg: (
default: (
light: link-item-bg-default-light,
dark: link-item-bg-default-dark,
),
@dobromir-hristov
dobromir-hristov / Layout.js
Created August 1, 2019 08:02
Vuejs layout component
import Vue from 'vue'
/**
* Renderless component that loads a layout component and emits the appropriate event, for the App.vue to render it.
* @module Layout
* @see module:App to see how it is implemented.
* @see "/layouts" for all possible layouts to load
*/
export default {
name: 'Layout',
@dobromir-hristov
dobromir-hristov / use-promise-awaiting-component.html
Created January 27, 2019 09:41
Using the promise awaiting component
<!-- Standard usage -->
<VButton @click.prevent="clickReturningPromise">Click me</VButton>
<!-- Overriding the loading state -->
<VButton
:loading="loading"
@click="clickWithoutPromise"
>
My loading state is passed as a prop
</VButton>
@dobromir-hristov
dobromir-hristov / template.html
Created January 27, 2019 09:34
Template for the self promise awaiting button
<button
v-on="listeners"
:class="computedClasses"
:disabled="loadingState"
class="button is-primary"
>
<slot name="loading" v-if="loadingState">Loading...</slot>
<slot name="success" v-else-if="isSuccess">Sucess!</slot>
<slot name="error" v-else-if="hasError">Errored</slot>
<slot v-else />
@dobromir-hristov
dobromir-hristov / resetDelayed.js
Created January 27, 2019 09:29
the resetDelayed method on the auto awiating promises button
resetDelayed(property) {
// if loading prop is passed, dont set the internal states
if(this.$options.propsData.hasOwnProperty('loading')) {
return
}
this[property] = true;
setTimeout(() => {
this[property] = false;
}, this.time);
@dobromir-hristov
dobromir-hristov / handleClick.js
Created January 27, 2019 09:19
The handleClick method on the promise awaiting button
methods: {
async handleClick(event) {
try {
// set the internal loading state
this.isLoading = true;
// call the parent click listener and await it
// Using Async/Await lets us await even none promises
// pass the event so modifiers can work
await this.$listeners.click(event);
// set the isSuccess state and revert it back after this.time period
@dobromir-hristov
dobromir-hristov / return-promise-method.js
Last active January 27, 2019 10:17
Button that awaits promises automatically
export default {
data:() => ({ posts: [] }),
methods: {
onClick(){
// return a promise from an api service
return this.$api.get('posts')
.then(r => {
this.posts = r.data
})
.catch(error => {