buefy 1.0.0 → 1.0.2

package/src/directives/clickOutside.ts

@@ -0,0 +1,113 @@
+import type { Directive } from 'vue'
+
+// msMaxTouchPoints is for IE10 which is no longer supported
+const isTouch =
+  typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0)
+const events = isTouch ? ['touchstart', 'click'] : ['click']
+
+interface EventHandler {
+    event: string
+    handler: (event: Event) => void
+}
+
+interface Instance {
+    el: Element
+    eventHandlers: EventHandler[]
+}
+
+type EventHandlerFn = (event: Event, el: Element) => void
+
+type Middleware = (event: Event, el: Element) => boolean
+
+type EventHandlerOptions = EventHandlerFn | {
+    handler: EventHandlerFn,
+    middleware?: Middleware,
+    events: string[]
+}
+
+const instances: Instance[] = []
+
+function processArgs(bindingValue: EventHandlerOptions) {
+    const isFunction = typeof bindingValue === 'function'
+    if (!isFunction && typeof bindingValue !== 'object') {
+        throw new Error(`v-click-outside: Binding value should be a function or an object, ${typeof bindingValue} given`)
+    }
+
+    return {
+        handler: isFunction ? bindingValue : bindingValue.handler,
+        middleware: (!isFunction && bindingValue.middleware) ||
+            ((isClickOutside) => !!isClickOutside),
+        events: (!isFunction && bindingValue.events) || events
+    }
+}
+
+function onEvent(
+    { el, event, handler, middleware }: {
+        el: Element,
+        event: Event,
+        handler: EventHandlerFn,
+        middleware: Middleware
+    }
+) {
+    const isClickOutside = event.target !== el && !el.contains(event.target as Element)
+
+    if (!isClickOutside || !middleware(event, el)) {
+        return
+    }
+
+    handler(event, el)
+}
+
+function toggleEventListeners<Action extends 'add' | 'remove'>({ eventHandlers }: Instance, action: Action) {
+    eventHandlers!.forEach(({ event, handler }) => {
+        document[`${action}EventListener`](event, handler)
+    })
+}
+
+function beforeMount(el: Element, { value }: { value: EventHandlerOptions }) {
+    const { handler, middleware, events } = processArgs(value)
+
+    const instance = {
+        el,
+        eventHandlers: events.map((eventName) => ({
+            event: eventName,
+            handler: (event: Event) => onEvent({ event, el, handler, middleware })
+        }))
+    }
+
+    toggleEventListeners(instance, 'add')
+
+    instances.push(instance)
+}
+
+function updated(el: Element, { value }: { value: EventHandlerOptions }) {
+    const { handler, middleware, events } = processArgs(value)
+    // `filter` instead of `find` for compat with IE
+    const instance = instances.filter((instance) => instance.el === el)[0]
+
+    toggleEventListeners(instance, 'remove')
+
+    instance.eventHandlers = events.map((eventName) => ({
+        event: eventName,
+        handler: (event) => onEvent({ event, el, handler, middleware })
+    }))
+
+    toggleEventListeners(instance, 'add')
+}
+
+function unmounted(el: Element) {
+    // `filter` instead of `find` for compat with IE
+    const instance = instances.filter((instance) => instance.el === el)[0]
+
+    toggleEventListeners(instance, 'remove')
+
+    // FIXME: remove instance from instances
+}
+
+const directive: Directive<Element, EventHandlerOptions> = {
+    beforeMount,
+    updated,
+    unmounted
+}
+
+export default directive

package/src/directives/trapFocus.ts

@@ -0,0 +1,61 @@
+import type { Directive } from 'vue'
+
+const findFocusable = (element: Element | null | undefined, programmatic = false) => {
+    if (!element) {
+        return null
+    }
+    if (programmatic) {
+        return element.querySelectorAll('*[tabindex="-1"]')
+    }
+    return element.querySelectorAll(`a[href]:not([tabindex="-1"]),
+                                     area[href],
+                                     input:not([disabled]),
+                                     select:not([disabled]),
+                                     textarea:not([disabled]),
+                                     button:not([disabled]),
+                                     iframe,
+                                     object,
+                                     embed,
+                                     *[tabindex]:not([tabindex="-1"]),
+                                     *[contenteditable]`)
+}
+
+let onKeyDown: (event: KeyboardEvent) => void
+
+const beforeMount = (el: HTMLElement, { value = true }) => {
+    if (value) {
+        let focusable = findFocusable(el)
+        let focusableProg = findFocusable(el, true)
+
+        if (focusable && focusable.length > 0) {
+            onKeyDown = (event) => {
+                // Need to get focusable each time since it can change between key events
+                // ex. changing month in a datepicker
+                focusable = findFocusable(el)!
+                focusableProg = findFocusable(el, true)
+                const firstFocusable = focusable[0]
+                const lastFocusable = focusable[focusable.length - 1]
+
+                if (event.target === firstFocusable && event.shiftKey && event.key === 'Tab') {
+                    event.preventDefault();
+                    (lastFocusable! as HTMLElement).focus()
+                } else if ((event.target === lastFocusable || Array.from(focusableProg!).indexOf(event.target as Element) >= 0) && !event.shiftKey && event.key === 'Tab') {
+                    event.preventDefault();
+                    (firstFocusable! as HTMLElement).focus()
+                }
+            }
+            el.addEventListener('keydown', onKeyDown)
+        }
+    }
+}
+
+const unmounted = (el: HTMLElement) => {
+    el.removeEventListener('keydown', onKeyDown)
+}
+
+const directive: Directive<HTMLElement, boolean | undefined> = {
+    beforeMount,
+    unmounted
+}
+
+export default directive

package/src/index.ts

@@ -0,0 +1,43 @@
+import type { App } from 'vue'
+
+import './utils/vue-augmentation'
+import allComponents from './components'
+
+import { merge } from './utils/helpers'
+import config, { setOptions, setVueInstance } from './utils/config'
+import type { BuefyConfig, BuefyConfigOptions } from './utils/config'
+import { registerComponentProgrammatic } from './utils/plugins'
+
+import ConfigComponent from './utils/ConfigComponent'
+
+const Buefy = {
+    install(Vue: App, options: BuefyConfigOptions = {}) {
+        setVueInstance(Vue)
+        // Options
+        setOptions(merge<BuefyConfig>(config, options, true))
+        // Components
+        allComponents.forEach((component) => Vue.use(component))
+        // Config component
+        registerComponentProgrammatic(Vue, 'config', ConfigComponent)
+
+        Vue.config.globalProperties.$buefy.globalNoticeInterval = undefined
+    }
+}
+
+export default Buefy
+
+// export all components as vue plugin
+export * from './components'
+// export programmatic component
+export { DialogProgrammatic } from './components/dialog'
+export { LoadingProgrammatic } from './components/loading'
+export { ModalProgrammatic } from './components/modal'
+export { NotificationProgrammatic } from './components/notification'
+export { SnackbarProgrammatic } from './components/snackbar'
+export { ToastProgrammatic } from './components/toast'
+export { default as ConfigProgrammatic } from './utils/ConfigComponent'
+export { default as Color } from './utils/color'
+// export helpers
+export * from './utils/helpers'
+// exports types in config
+export type * from './utils/config'

package/src/scss/buefy-build.scss

@@ -0,0 +1,6 @@
+@import "../../../../node_modules/bulma/sass/utilities/functions";
+@import "../../../../node_modules/bulma/sass/utilities/initial-variables";
+@import "utils/_all";
+@import "../../../../node_modules/bulma/bulma";
+@import "utils/variables-ext";
+@import "buefy";

package/src/scss/buefy.scss

@@ -0,0 +1,39 @@
+@import "utils/_all";
+
+@import "components/_autocomplete";
+@import "components/_carousel";
+@import "components/_checkbox";
+@import "components/_clockpicker";
+@import "components/_collapse";
+@import "components/colorpicker";
+@import "components/_datepicker";
+@import "components/_dialog";
+@import "components/_dropdown";
+@import "components/_form";
+@import "components/_icon";
+@import "components/_image";
+@import "components/_loading";
+@import "components/_menu";
+@import "components/_message";
+@import "components/_modal";
+@import "components/_navbar";
+@import "components/_notices";
+@import "components/_notification";
+@import "components/_numberinput";
+@import "components/_pagination";
+@import "components/_progress";
+@import "components/_radio";
+@import "components/_rate";
+@import "components/_select";
+@import "components/_skeleton";
+@import "components/_sidebar";
+@import "components/_slider";
+@import "components/_steps";
+@import "components/_switch";
+@import "components/_table";
+@import "components/_tabs";
+@import "components/_tag";
+@import "components/_taginput";
+@import "components/_timepicker";
+@import "components/_tooltip";
+@import "components/_upload";

package/src/scss/components/_autocomplete.scss

@@ -0,0 +1,39 @@
+$dropdown-content-max-height: 200px !default;
+
+.autocomplete {
+    position: relative;
+    .dropdown-menu {
+        display: block;
+        width: 100%;
+        &.is-opened-top {
+            top: auto;
+            bottom: 100%;
+        }
+    }
+    .dropdown-content {
+        overflow: auto;
+        max-height: $dropdown-content-max-height;
+    }
+    .dropdown-item {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &.is-hovered {
+            background: $dropdown-item-hover-background-color;
+            color: $dropdown-item-hover-color;
+        }
+        &.is-disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+    &.is-small {
+        @include control-small;
+    }
+    &.is-medium{
+        @include control-medium;
+    }
+    &.is-large {
+        @include control-large;
+    }
+}

package/src/scss/components/_carousel.scss

@@ -0,0 +1,204 @@
+$carousel-min-height: 120px !default;
+
+$carousel-arrow-background: $scheme-main !default;
+$carousel-arrow-color: $primary !default;
+$carousel-arrow-icon-spaced: 1.5rem !default;
+$carousel-arrow-top: 50% !default;
+
+$carousel-indicator-background: rgba($scheme-invert, 0.50) !default;
+$carousel-indicator-border: $scheme-main !default;
+$carousel-indicator-color: $primary !default;
+$carousel-indicator-spaced: .5rem !default;
+
+$carousel-overlay-background: rgba($scheme-invert, 0.86) !default;
+$carousel-overlay-z: 40 !default;
+
+.carousel {
+    @extend %unselectable;
+    min-height: $carousel-min-height;
+    position: relative;
+    &.is-overlay {
+        background-color: $carousel-overlay-background;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        display: flex;
+        max-height: 100vh;
+        position: fixed;
+        z-index: $carousel-overlay-z;
+        .carousel-item img {
+            cursor: default;
+        }
+        .carousel-indicator.has-background {
+            background: transparent;
+        }
+    }
+    .progress {
+        border-radius: $radius-small;
+        height: 0.25rem;
+        margin-bottom: 0;
+    }
+    .carousel-items {
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        width: 100%;
+        &:hover .carousel-arrow.is-hovered {
+            @include tablet {
+                opacity: 1;
+            }
+        }
+        .carousel-item {
+            flex-shrink: 0;
+            width: 100%;
+        }
+    }
+    .carousel-pause {
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        right: 0.15rem;
+        z-index: 1;
+    }
+    .carousel-indicator {
+        width: 100%;
+        padding: $carousel-indicator-spaced;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &.has-background {
+            background: $carousel-indicator-background;
+        }
+        &.has-custom {
+            flex-wrap: nowrap;
+            justify-content: flex-start;
+            @include overflow-touch;
+            overflow: hidden;
+            overflow-x: auto;
+            &.is-small .indicator-item {
+                flex: 1 0 10%;
+            }
+            &.is-medium .indicator-item {
+                flex: 1 0 16.66667%;
+            }
+        }
+        &.is-inside {
+            position: absolute;
+            &.is-bottom {
+                bottom: 0;
+            }
+            &.is-top {
+                top: 0;
+            }
+        }
+        .indicator-item {
+            &:not(:last-child) {
+                margin-right: $carousel-indicator-spaced;
+            }
+            &.is-active .indicator-style,
+            .indicator-style:hover {
+                background: $carousel-indicator-color;
+                border: 1px solid $carousel-indicator-border;
+            }
+            .indicator-style {
+                display: block;
+                border: 1px solid $carousel-indicator-color;
+                background: $carousel-indicator-border;
+                outline: none;
+                transition: $speed-slow $easing;
+                &.is-boxes {
+                    height: 10px;
+                    width: 10px;
+                }
+                &.is-dots {
+                    border-radius: $radius-rounded;
+                    height: 10px;
+                    width: 10px;
+                }
+                &.is-lines {
+                    height: 5px;
+                    width: 25px;
+                }
+            }
+        }
+    }
+}
+
+.carousel-list {
+    @extend %unselectable;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    &.has-shadow {
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+    }
+    &:hover .carousel-arrow.is-hovered {
+        @include tablet {
+            opacity: 1;
+        }
+    }
+    .carousel-slides {
+        position: relative;
+        display: flex;
+        width: 100%;
+        &:not(.is-dragging) {
+            transition: all $speed-slower ease-out 0s;
+        }
+        &.has-grayscale {
+            .carousel-slide {
+                img {
+                    filter: grayscale(100%);
+                }
+                &.is-active img {
+                    filter: grayscale(0%);
+                }
+            }
+        }
+        &.has-opacity {
+            .carousel-slide {
+                img {
+                    opacity: 0.25
+                }
+                &.is-active img {
+                    opacity: 1
+                }
+            }
+        }
+        .carousel-slide {
+            border: 2px solid transparent;
+            flex-shrink: 0;
+        }
+    }
+}
+
+.carousel-arrow {
+    transition: $speed-slow $easing;
+    &.is-hovered {
+        opacity: 0;
+    }
+    .icon {
+        background: $carousel-arrow-background;
+        color: $carousel-arrow-color;
+        cursor: pointer;
+        border: 1px solid $carousel-arrow-background;
+        border-radius: $radius-rounded;
+        outline: 0;
+        &:hover {
+            border: 1px solid $carousel-arrow-color;
+            opacity: 1;
+        }
+        &.has-icons-left,
+        &.has-icons-right {
+            position: absolute;
+            top: $carousel-arrow-top;
+            transform: translateY(-$carousel-arrow-top);
+            z-index: 1;
+        }
+        &.has-icons-left {
+            left: $carousel-arrow-icon-spaced;
+        }
+        &.has-icons-right {
+            right: $carousel-arrow-icon-spaced;
+        }
+    }
+}

package/src/scss/components/_checkbox.scss

@@ -0,0 +1,106 @@
+$checkbox-active-background-color: $primary !default;
+$checkbox-background-color: transparent !default;
+$checkbox-border-color: $grey !default;
+$checkbox-border-radius: $radius !default;
+$checkbox-border-width: 2px !default;
+$checkbox-checkmark-color: $primary-invert !default;
+$checkbox-size: 1.25em !default;
+$checkbox-colors: $form-colors !default;
+
+.b-checkbox {
+    &.checkbox {
+        @extend %unselectable;
+        outline: none;
+        display: inline-flex;
+        align-items: center;
+        &:not(.button) {
+            margin-right: 0.5em;
+            & + .checkbox:last-child {
+                margin-right: 0;
+            }
+        }
+        input[type=checkbox] {
+            position: absolute;
+            left: 0;
+            opacity: 0;
+            outline: none;
+            z-index: -1;
+            + .check {
+                width: $checkbox-size;
+                height: $checkbox-size;
+                flex-shrink: 0;
+                border-radius: $checkbox-border-radius;
+                border: $checkbox-border-width solid $checkbox-border-color;
+                transition: background $speed-slow $easing;
+                background: $checkbox-background-color
+            }
+            &:checked + .check {
+                background: $checkbox-active-background-color url(checkmark($checkbox-checkmark-color)) no-repeat center center;
+                border-color: $checkbox-active-background-color;
+                @each $name, $pair in $checkbox-colors {
+                    $color: nth($pair, 1);
+                    $color-invert: nth($pair, 2);
+                    &.is-#{$name} {
+                        background: $color url(checkmark($color-invert)) no-repeat center center;
+                        border-color: $color;
+                    }
+                }
+            }
+            &:indeterminate + .check {
+                background: $checkbox-active-background-color url(indeterminate($checkbox-checkmark-color)) no-repeat center center;
+                border-color: $checkbox-active-background-color;
+                @each $name, $pair in $checkbox-colors {
+                    $color: nth($pair, 1);
+                    $color-invert: nth($pair, 2);
+                    &.is-#{$name} {
+                        background: $color url(indeterminate($color-invert)) no-repeat center center;
+                        border-color: $color;
+                    }
+                }
+            }
+            &:focus {
+                + .check {
+                    box-shadow: 0 0 0.5em rgba($grey, 0.8);
+                }
+                &:checked + .check {
+                    box-shadow: 0 0 0.5em rgba($checkbox-active-background-color, 0.8);
+                    @each $name, $pair in $checkbox-colors {
+                        $color: nth($pair, 1);
+                        &.is-#{$name} {
+                            box-shadow: 0 0 0.5em rgba($color, 0.8);
+                        }
+                    }
+                }
+            }
+        }
+        .control-label {
+            padding-left: $control-padding-horizontal;
+        }
+        &.button {
+            display: flex;
+        }
+        &[disabled] {
+            opacity: 0.5;
+        }
+        &:hover {
+            input[type=checkbox]:not(:disabled) + .check {
+                border-color: $checkbox-active-background-color;
+                @each $name, $pair in $checkbox-colors {
+                    $color: nth($pair, 1);
+                    &.is-#{$name} {
+                        border-color: $color;
+                    }
+                }
+            }
+        }
+        &.is-small {
+            @include control-small;
+        }
+        &.is-medium{
+            @include control-medium;
+        }
+        &.is-large {
+            @include control-large;
+        }
+    }
+}