DepartmentPicker.vue

<template>
    <div :class="classes" :style="style">

        <div ref="container" :class="classNames.container">
            <input type="hidden" name="department_id" id="department_id"/>
            <div ref="header" :class="classNames.header">{{ headerText }}</div>

            <div ref="content" :class="classNames.content">
                <py-scroll ref="scroll" :ops="ops">
                    <slot>
                        <template v-for="(department, index) in departments">
                            <a v-if="useLinks"
                               :href="getSelectUrl(department)"
                               :class="getItemClass(department)"
                               :data-slug="department.slug"
                               @click="onDepartmentClick(department, $event)"
                            >{{ department.name }}</a>
                            <div v-else
                                 :class="getItemClass(department)"
                                 :data-slug="department.slug"
                                 @click="onDepartmentClick(department, $event)"
                            >{{ department.name }}
                            </div>

                        </template>
                    </slot>
                </py-scroll>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { component, prop, streams, Styles } from '@pyro/platform';
import Vue                                  from 'vue';
import { Config }                           from 'vuescroll';
import { colors }                           from '@pyro/admin-theme';
import { MessageBox }                       from 'element-ui';
import './departments.scss';

@component()
export default class DepartmentPicker extends Vue {
    $refs: { container: HTMLElement, header: HTMLElement, content: HTMLElement, scroll: Vue };
    @prop.classPrefix('department-picker') classPrefix: string;
    @prop.boolean() modal: boolean;
    @prop.boolean() useLinks: boolean;
    @prop.array() departments: any[];
    @prop.number() current: number;
    @prop.string() selectUrl: string;
    @prop.string() deselectUrl: string;
    @prop.string('Kies uw afdeling') headerText: string;

    get classes() {
        return {
            [ `${this.classPrefix}` ]: true,
        };
    }

    get style(): Styles {
        return {};
    }

    get classNames() {
        return {
            container: `${this.classPrefix}__container`,
            header   : `${this.classPrefix}__header`,
            content  : `${this.classPrefix}__content`,
            item     : `${this.classPrefix}__item`,
        };
    }

    mounted() {
        this.$log('mounted', this);
        this.$log('mounted this.$el.getBoundingClientRect().height', this.$el.getBoundingClientRect().height);
        if ( this.$refs.content.getBoundingClientRect().height < 301 ) {
            // this.ops.bar.disable =true;
        }

    }

    getSelectUrl(department) {
        return this.selectUrl.replace('SLUG', department.slug);
    }

    getItemClass(department) {
        let classes = [ this.classNames.item ];
        this.current && department.id === this.current && classes.push('is-current');
        department.enabled === false && classes.push('is-disabled');
        return classes;
    }


    async onDepartmentClick(department: streams.departments_department.DepartmentsDepartment, $event: MouseEvent) {
        if ( 'href' in $event.target ) {
            return;
        }
        let href = this.getSelectUrl(department);
        if ( !department.enabled ) {
            $event.preventDefault();
            let target = $event.target as HTMLAnchorElement;
            MessageBox.confirm('De afdeling die u heeft geselecteerd is onactief. Dit kan problemen veroorzaken. Weet u het zeker?', 'Afdeling onactief')
                .then(_ => window.location.replace(href))
                .catch(_ => target.blur());

        } else {
            window.location.replace(href);
        }
    }

    ops: Config = {
        bar      : {
            keepShow           : true,
            background         : colors.blueGrey[ '300' ], //'rgba(240, 242, 243, 0.1)',
            specifyBorderRadius: '0',
            disable            : false,
            opacity            : 1,
        },
        rail     : {
            specifyBorderRadius: '0',
            opacity            : 0.1,
            background         : '#FFFFFF',

        },
        vuescroll: {},
        // rail: {
        //     opacity: '0.2',
        //     background: undefined,
        //     border: '1px solid #cecece',
        //     size: '15px'
        // },
        // bar: {
        //     background: '#00ff00',
        //     keepShow: false,
        //     size: '10px',
        //     minSize: 0.2
        // },
        // scrollButton: {
        //     enable: true,
        //     background: '#cecece'
        // },
        // scrollPanel: {
        //     easing: 'easeInQuad',
        //     speed: 800
        // },
        // vuescroll: {
        //     wheelScrollDuration: 0,
        //     wheelDirectionReverse: false
        // }
    };

}
</script>

departments.scss

@import "~@pyro/admin-theme/lib/styling/base";

body {
    min-height : 100vh;
}

#app {
    height : 100%;
}

.c-page-departments {
    height          : inherit;
    background      : $blue-grey-200;

    height          : inherit;
    display         : flex;
    align-items     : center;
    justify-content : center;

    .choose {

    }
}

$department-picker-prefix : #{$prefix}-department-picker;

.#{$department-picker-prefix} {
    min-width : 300px;

    &__container {

        //margin: 150px 0;
    }

    &__header {
        background : $blue-grey-500;
        padding    : 10px;
        color      : $blue-grey-100;
    }

    &__content {
        background : $blue-grey-700;
        height     : 300px;

    }

    &__item {
        background      : $blue-grey-600;
        color           : $blue-grey-200;
        border          : 1px solid lighten($blue-grey-600, 10);
        padding         : 10px;
        margin          : 10px;
        display         : block;
        text-decoration : none;
        cursor          : pointer;

        &:hover {
            background      : $blue-grey-500;
            color           : $blue-grey-200;
            text-decoration : none;
        }

        &.is-current {
            font-weight : bold;
        }

        &.is-disabled {
            text-decoration-line  : line-through;
            background            : transparentize(red, .9); //#ff00001c;
            text-decoration-color : transparentize(white, .8); //#ffffff33;
        }
    }

}