@voicenter-team/voicenter-ui-plus 0.0.1

package/src/components/VcModal/VcModal.vue

@@ -0,0 +1,384 @@
+<template>
+    <Teleport
+        :to="appendTarget"
+        :disabled="appendDisabled"
+    >
+        <div
+            v-if="containerVisible"
+            :ref="maskRef"
+            :class="maskClass"
+            class="vc-dialog-mask"
+            @click.stop.self="onMaskClick"
+        >
+            <transition
+                name="vc-dialog"
+                appear
+                @before-enter="onBeforeEnter"
+                @enter="onEnter"
+                @after-enter="onEnterCancelled"
+                @before-leave="onBeforeLeave"
+                @leave="onLeave"
+                @after-leave="onAfterLeave"
+            >
+                <div
+                    v-if="visible"
+                    :ref="containerRef"
+                    :class="dialogClass"
+                    :aria-labelledby="ariaLabelledById"
+                    :style="{
+                        width: modalWidth,
+                        maxWidth: modalMaxWidth
+                    }"
+                    aria-modal="true"
+                    role="dialog"
+                >
+                    <div class="vc-dialog-header">
+                        <slot name="header">
+                            <div
+                                v-if="header"
+                                :id="ariaLabelledById"
+                                class="vc-dialog-title"
+                            >
+                                {{ header }}
+                            </div>
+                        </slot>
+                        <div class="vc-dialog-header-icons">
+                            <button
+                                v-if="maximizable"
+                                class="vc-dialog-header-icon vc-dialog-header-maximize vc-link mx-3"
+                                :aria-label="ariaCloseLabel"
+                                type="button"
+                                tabindex="-1"
+                                @click="maximize"
+                            >
+                                <span class="vc-dialog-header-maximize-icon vc-icon-fullscreen" />
+                            </button>
+                            <button
+                                v-if="closable"
+                                class="vc-dialog-header-icon vc-dialog-header-close vc-link"
+                                :aria-label="ariaCloseLabel"
+                                type="button"
+                                tabindex="-1"
+                                @click="close"
+                            >
+                                <span class="vc-dialog-header-close-icon vc-icon-close" />
+                            </button>
+                        </div>
+                    </div>
+                    <div
+                        :class="contentStyleClass"
+                        :style="contentStyle"
+                    >
+                        <slot />
+                    </div>
+                    <div
+                        v-if="footer || $slots.footer"
+                        class="vc-dialog-footer"
+                    >
+                        <slot name="footer">
+                            {{ footer }}
+                        </slot>
+                    </div>
+                </div>
+            </transition>
+        </div>
+    </Teleport>
+</template>
+
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { defineComponent, PropType } from 'vue'
+import { DialogBreakpoints, DialogPositionType } from './VcModal.types'
+import UniqueComponentId from '@/utils/UniqueComponentId'
+import ZIndexUtils from '@/utils/ZIndexUtils'
+import DomHandler from '@/utils/DomHandler'
+import { convertToUnit } from '@/utils/helpers'
+import appendTo from '@/mixins/common/appendTo.mixin'
+
+export default defineComponent({
+    name: 'VcModal',
+    mixins: [appendTo],
+    inheritAttrs: false,
+    props: {
+        maximizable: {
+            type: Boolean,
+            default: false
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        position: {
+            type: String as PropType<DialogPositionType>,
+            default: 'center'
+        },
+        header: {
+            type: String,
+            default: ''
+        },
+        footer: {
+            type: String,
+            default: ''
+        },
+        ariaCloseLabel: {
+            type: String,
+            default: 'close'
+        },
+        closable: {
+            type: Boolean,
+            default: true
+        },
+        closeOnEscape: {
+            type: Boolean,
+            default: true
+        },
+        contentClass: {
+            type: String,
+            default: ''
+        },
+        contentStyle: {
+            type: [String, Object],
+            default: null
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        dismissableMask: {
+            type: Boolean,
+            default: true
+        },
+        breakpoints: {
+            type: Object as PropType<DialogBreakpoints> | undefined,
+            default: undefined
+        },
+        width: {
+            type: String,
+            default: '60vw'
+        },
+        maxWidth: {
+            type: String,
+            default: '100%'
+        }
+    },
+    emits: ['show', 'hide', 'unmaximize', 'maximize', 'close'],
+    data () {
+        return {
+            containerVisible: this.visible,
+            maximized: false,
+            mask: null as HTMLElement | null,
+            container: null as HTMLElement | null,
+            styleElement: null as HTMLStyleElement | null,
+            documentKeydownListener: null as any,
+            autoZIndex: true
+        }
+    },
+    computed: {
+        maskClass (): string[] {
+            return [
+                'vc-component-overlay vc-component-overlay-enter',
+                this.getPositionClass()
+            ]
+        },
+        dialogClass () {
+            return ['vc-dialog vc-dialog-component', {
+                'vc-dialog-maximized': this.maximizable && this.maximized
+            }]
+        },
+        ariaLabelledById (): string {
+            return this.header != null ? this.ariaId + '_header' : 'ariaLabelledId'
+        },
+        ariaId (): string {
+            return UniqueComponentId()
+        },
+        contentStyleClass () {
+            return ['vc-dialog-content', this.contentClass, { 'vc-dialog-no-footer': !this.footer && !this.$slots.footer }]
+        },
+        attributeSelector (): string {
+            return UniqueComponentId()
+        },
+        modalWidth (): string | undefined {
+            return convertToUnit(this.width)
+        },
+        modalMaxWidth (): string | undefined {
+            return convertToUnit(this.maxWidth)
+        }
+    },
+    beforeUnmount (): void {
+        this.unbindGlobalListeners() // keydown
+        this.destroyStyle()
+        this.mask = null
+        if (this.container && this.autoZIndex) {
+            ZIndexUtils.clear(this.container)
+        }
+        this.container = null
+    },
+    updated (): void {
+        if (this.visible) {
+            this.containerVisible = this.visible
+        }
+    },
+    mounted (): void {
+        if (this.breakpoints) {
+            this.createStyle()
+        }
+    },
+    methods: {
+        destroyStyle (): void {
+            if (this.styleElement) {
+                document.head.removeChild(this.styleElement)
+                this.styleElement = null
+            }
+        },
+        /**
+     * Create responsive width (for breakpoints prop)
+     */
+        createStyle (): void {
+            if (!this.styleElement && this.breakpoints) {
+                this.styleElement = document.createElement('style')
+                this.styleElement.type = 'text/css'
+                document.head.appendChild(this.styleElement)
+                let innerHTML = ''
+                for (const breakpoint in this.breakpoints) {
+                    innerHTML += `
+                        @media screen and (max-width: ${breakpoint}) {
+                            .vc-dialog[${this.attributeSelector}] {
+                                width: ${this.breakpoints[breakpoint]} !important;
+                            }
+                        }
+                    `
+                }
+                this.styleElement.innerHTML = innerHTML
+            }
+        },
+        onMaskClick (event: Event): void {
+            if (this.dismissableMask && this.closable && this.mask === event.target) {
+                this.close()
+            }
+        },
+        getPositionClass (): string {
+            const positions = ['left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right']
+            const pos = positions.find(item => item === this.position)
+            return pos ? `vc-dialog-${pos}` : ''
+        },
+        onBeforeEnter (el: HTMLElement | Element): void {
+            if (this.autoZIndex) {
+                ZIndexUtils.set(el as HTMLElement)
+            }
+            el.setAttribute(this.attributeSelector, '')
+            ZIndexUtils.setModal(this.ariaId)
+        },
+        onEnter (): void {
+            if (!this.mask || !this.container) {
+                return
+            }
+            this.mask.style.overflowY = 'hidden'
+            this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1)
+            this.$emit('show')
+            this.focus()
+            this.enableDocumentSettings()
+            this.bindGlobalListeners()
+        },
+        onEnterCancelled () {
+            this.$nextTick(() => {
+                if (!this.mask || !this.container) {
+                    return
+                }
+                this.mask.style.overflowY = 'auto'
+            })
+        },
+        bindGlobalListeners (): void {
+            if (this.closable && this.closeOnEscape) {
+                this.bindDocumentKeyDownListener()
+            }
+        },
+        onKeyDown (event: KeyboardEvent): void {
+            const lastModal = ZIndexUtils.lastModal()
+            if (event.code === 'Escape' && lastModal === this.ariaId) {
+                this.close()
+            }
+        },
+        bindDocumentKeyDownListener (): void {
+            if (!this.documentKeydownListener) {
+                this.documentKeydownListener = this.onKeyDown.bind(this)
+                document.addEventListener('keydown', this.documentKeydownListener)
+            }
+        },
+        enableDocumentSettings (): void {
+            const size = ZIndexUtils.countModals()
+            if (size > 1) {
+                return
+            }
+            DomHandler.addClass(document.body, 'overflow-hidden')
+        },
+        onBeforeLeave (): void {
+            if (this.mask) {
+                this.mask.style.overflowY = 'hidden'
+            }
+            DomHandler.addClass(this.mask, 'vc-component-overlay-leave')
+        },
+        onLeave (): void {
+            this.$emit('hide')
+        },
+        onAfterLeave (el: HTMLElement | Element): void {
+            if (this.autoZIndex) {
+                ZIndexUtils.clear(el as HTMLElement)
+            }
+            ZIndexUtils.removeModal(this.ariaId)
+            this.containerVisible = false
+            this.maximized = false
+            this.unbindDocumentState()
+            this.unbindGlobalListeners()
+        },
+        unbindGlobalListeners (): void {
+            this.unbindDocumentKeyDownListener()
+        },
+        unbindDocumentKeyDownListener (): void {
+            if (this.documentKeydownListener) {
+                document.removeEventListener('keydown', this.documentKeydownListener)
+                this.documentKeydownListener = null
+            }
+        },
+        unbindDocumentState (): void {
+            const size = ZIndexUtils.countModals()
+            if (size > 0) {
+                return
+            }
+            DomHandler.removeClass(document.body, 'overflow-hidden')
+        },
+        containerRef (el: HTMLElement): string {
+            this.container = el
+            return 'containerRef'
+        },
+        focus () {
+            if (!this.container) {
+                return
+            }
+            const focusTarget = this.container.querySelector('[autofocus]') as HTMLElement
+            if (focusTarget) {
+                focusTarget.focus()
+            }
+        },
+        maskRef (el: HTMLElement): string {
+            this.mask = el
+            return 'maskRef'
+        },
+        close (): void {
+            this.$emit('close', false)
+        },
+        maximize (event: Event): void {
+            if (this.maximized) {
+                this.maximized = false
+                this.$emit('unmaximize', event)
+            } else {
+                this.maximized = true
+                this.$emit('maximize', event)
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+@import "VcModal";
+</style>

package/src/components/VcNotification/VcNotification.vue

@@ -0,0 +1,302 @@
+<template>
+    <Teleport to="body">
+        <div
+            ref="container"
+            :class="containerClass"
+            v-bind="$attrs"
+        >
+            <transition-group
+                name="vc-toast-message"
+                tag="div"
+                @enter="onEnter"
+                @after-leave="onLeave"
+            >
+                <VcNotificationMessage
+                    v-for="msg of messages"
+                    :key="msg.id"
+                    :message="msg"
+                    @close="remove($event)"
+                />
+            </transition-group>
+        </div>
+    </Teleport>
+</template>
+
+<script lang="ts">
+
+import { defineComponent, PropType } from 'vue'
+import { ToastPositionType, ToastMessageOptions } from './VcNotification.types'
+import UniqueComponentId from '@/utils/UniqueComponentId'
+import ZIndexUtils from '@/utils/ZIndexUtils'
+import ToastEventBus from '@/utils/ToastEventBus'
+import VcNotificationMessage from '@/components/VcNotification/VcNotificationMessage.vue'
+
+const BASE_Z_INDEX = 3000
+
+export default defineComponent({
+    name: 'VcNotification',
+    components: { VcNotificationMessage },
+    inheritAttrs: false,
+    props: {
+        position: {
+            type: String as PropType<ToastPositionType>,
+            default: 'top-right'
+        },
+        group: {
+            type: String,
+            default: undefined
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: BASE_Z_INDEX
+        }
+    },
+    data () {
+        return {
+            messages: [] as ToastMessageOptions[],
+            messageIdx: 0,
+            styleElement: null,
+            customPosition: ''
+        }
+    },
+    computed: {
+        containerClass (): string[] {
+            const position = this.customPosition || this.position
+            return [
+                'vc-toast vc-toast-component vc-toast-' + position
+            ]
+        },
+        attributeSelector (): string {
+            return UniqueComponentId('vc-toast-id_')
+        }
+    },
+    mounted () {
+        ToastEventBus.on('add', this.onAdd)
+        ToastEventBus.on('remove-group', this.onRemoveGroup)
+        ToastEventBus.on('remove-all-groups', this.onRemoveAllGroups)
+    },
+    beforeUnmount () {
+        const container = this.$refs.container as HTMLElement
+        if (container && this.autoZIndex) {
+            ZIndexUtils.clear(container)
+        }
+        ToastEventBus.off('add', this.onAdd)
+        ToastEventBus.off('remove-group', this.onRemoveGroup)
+        ToastEventBus.off('remove-all-groups', this.onRemoveAllGroups)
+    },
+    methods: {
+        add (message: ToastMessageOptions) {
+            if (message.id == null) {
+                message.id = this.messageIdx++
+            }
+            this.messages = [...this.messages, message]
+        },
+        remove (message: ToastMessageOptions) {
+            let index = -1
+            for (let i = 0; i < this.messages.length; i++) {
+                if (this.messages[i] === message) {
+                    index = i
+                    break
+                }
+            }
+            this.messages.splice(index, 1)
+        },
+        onAdd (message: ToastMessageOptions) {
+            if (message.position) {
+                this.customPosition = message.position
+            }
+            // eslint-disable-next-line eqeqeq
+            if (this.group == message.group) {
+                this.add(message)
+            }
+        },
+        onRemoveGroup (group: string) {
+            if (this.group === group) {
+                this.messages = []
+            }
+        },
+        onRemoveAllGroups () {
+            this.messages = []
+        },
+        onEnter () {
+            const container = this.$refs.container as HTMLElement
+            if (!container) {
+                return
+            }
+            container.setAttribute(this.attributeSelector, '')
+            if (this.autoZIndex) {
+                ZIndexUtils.set(container)
+            }
+        },
+        onLeave () {
+            const container = this.$refs.container as HTMLElement
+            if (!container) {
+                return
+            }
+            if (container && this.autoZIndex && !this.messages.length) {
+                ZIndexUtils.clear(container)
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+$toastWidth: 27rem;
+.vc-toast {
+  @apply fixed box-border text-white;
+  width: $toastWidth;
+  max-width: calc(100% - 2.5rem);
+  /* Positions */
+  &.vc-toast-top-right {
+    @apply top-5 right-5;
+  }
+  &.vc-toast-top-left {
+    @apply top-5 left-5;
+  }
+  &.vc-toast-bottom-left {
+    @apply bottom-5 left-5;
+  }
+  &.vc-toast-bottom-right {
+    @apply bottom-5 right-5;
+  }
+  &.vc-toast-top-center {
+    @apply top-5;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.vc-toast-bottom-center {
+    @apply bottom-5;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.vc-toast-center {
+    left: 50%;
+    top: 50%;
+    min-width: 20vw;
+    transform: translate(-50%, -50%);
+  }
+
+  /* Message */
+  .vc-toast-message {
+    @apply shadow-card bg-white opacity-90 hover:opacity-100;
+    margin: 0 0 1rem 0;
+    border-radius: 0 6px 6px 0;
+    transition: all .3s ease;
+
+    .vc-toast-message-content {
+      @apply flex items-start p-4;
+      border-width: 0 0 0 4px;
+      border-color: currentColor;
+    }
+    .vc-toast-message-text {
+      @apply text-default-text pl-4;
+      flex: 1 1 auto;
+      .vc-toast-summary {
+        @apply font-bold text-base mb-2;
+      }
+      .vc-toast-detail {
+        @apply font-medium text-sm;
+        line-height: 145%;
+      }
+    }
+    .vc-toast-message-icon {
+      @apply self-center flex-shrink-0 text-current;
+    }
+    .vc-toast-icon-close {
+      @apply
+      flex
+      items-center
+      justify-center
+      overflow-hidden
+      relative
+      cursor-pointer
+      flex-shrink-0
+      text-secondary-actions;
+      transition: all .3s ease;
+      &:hover {
+        @apply text-active-elements--focus;
+      }
+      &:active {
+        @apply text-active-elements--pressed;
+      }
+    }
+
+    &.vc-toast-message-info {
+      @apply text-primary-actions;
+    }
+    &.vc-toast-message-warn {
+      @apply text-warning;
+    }
+    &.vc-toast-message-error {
+      @apply text-error;
+    }
+    &.vc-toast-message-success {
+      @apply text-success;
+    }
+  }
+}
+
+/* Animations */
+.vc-toast-message-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+.vc-toast-top-left, .vc-toast-bottom-left {
+  .vc-toast-message-enter-from {
+    transform: translateX(-100%);
+  }
+}
+.vc-toast-top-right, .vc-toast-bottom-right {
+  .vc-toast-message-enter-from {
+    transform: translateX(100%);
+  }
+}
+.vc-toast-top-center {
+  .vc-toast-message-enter-from {
+    transform: translateY(-32px);
+  }
+}
+.vc-toast-bottom-center, .vc-toast-center {
+  .vc-toast-message-enter-from {
+    transform: translateY(32px);
+  }
+}
+
+.vc-toast-message-leave-from {
+  max-height: 1000px;
+}
+.vc-toast .vc-toast-message.vc-toast-message-leave-to {
+  max-height: 0;
+  opacity: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  transform: translateY(-32px);
+}
+.vc-toast-message-enter-active {
+  -webkit-transition: transform .3s, opacity .3s;
+  transition: transform .3s, opacity .3s;
+}
+.vc-toast-message-leave-active {
+  -webkit-transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
+  transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
+}
+
+[dir='rtl'] {
+  .vc-toast {
+    .vc-toast-message {
+      border-radius: 6px 0 0 6px;
+      .vc-toast-message-content {
+        border-width: 0 4px 0 0;
+      }
+      .vc-toast-message-text {
+        @apply pl-1 pr-4;
+      }
+    }
+  }
+}
+</style>