@hulkapps/app-manager-vue 1.0.2 → 2.0.2

package/src/components/polaris-vue/src/components/PPage/components/PPageHeader/PPageHeader.vue

@@ -0,0 +1,191 @@
+<template>
+  <div :class="headerClassNames">
+    <div class="Polaris-Page-Header__Row">
+      <div v-if="breadcrumbs.length > 0" class="Polaris-Page-Header__BreadcrumbWrapper">
+        <PBreadcrumbs :breadcrumbs="breadcrumbs"/>
+      </div>
+      <div class="Polaris-Page-Header__TitleWrapper" v-if="hasTitle">
+        <PPageHeaderTitle
+            :title="title"
+            :subtitle="subtitle"
+            :titleMetadata="titleMetadata"
+            :alt="thumbnailAlt"
+            :source="thumbnail">
+          <slot name="titleMetadata" slot="titleMetadata"/>
+        </PPageHeaderTitle>
+      </div>
+      <div class="Polaris-Page-Header__RightAlign">
+        <div class="Polaris-Page-Header__Actions" v-if="hasActions">
+          <PActionMenu :groups="actionGroups" :actions="secondaryActions" v-if="hasActionMenu"
+                       :rollup="isNavigationCollapsed.rollup"/>
+          <div v-if="Object.keys(primaryAction).length > 0 || $slots.hasOwnProperty('primaryAction')"
+               class="Polaris-Page-Header__PrimaryActionWrapper">
+            <slot name="primaryAction">
+              <PButton
+                  v-if="primaryAction"
+                  v-bind="primaryAction"
+                  :primary="primaryAction.primary === undefined ? true : primaryAction.primary"
+                  @click="primaryAction.onAction()">{{ primaryAction.content }}
+              </PButton>
+            </slot>
+          </div>
+          <div
+              class="Polaris-Page-Header__PaginationWrapper"
+              v-if="Object.keys(pagination).length > 0 && !isNavigationCollapsed.rollup">
+            <nav aria-label="Pagination">
+              <PPagination v-bind="pagination" />
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="Polaris-Page-Header__Row"
+         v-if="$slots.hasOwnProperty('additionalNavigation') || avatar || avatarInitials">
+      <div class="Polaris-Page-Header__LeftAlign"></div>
+      <div class="Polaris-Page-Header__RightAlign">
+        <div class="Polaris-Page-Header__AdditionalNavigationWrapper">
+          <div v-if="avatarInitials || avatar">
+            <PAvatar :source="avatar" :initials="avatarInitials"/>
+          </div>
+          <slot name="additionalNavigation"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { classNames } from '../../../../utilities/css';
+import { hasGroupsWithActions } from '../../../../components/PActionMenu/utilities';
+import { PTextStyle } from '../../../../components/PTextStyle';
+import { PBreadcrumbs } from '../../../../components/PBreadcrumbs';
+import { PPagination } from '../../../../components/PPagination';
+import { PActionMenu } from '../../../../components/PActionMenu';
+import { PButton } from '../../../../components/PButton';
+import { PPageHeaderTitle } from '../../../../components/PPage/components/PPageHeaderTitle';
+import { PPopover } from '../../../../components/PPopover';
+import { PActionList } from '../../../../components/PActionList';
+import { PButtonGroup } from '../../../../components/PButtonGroup';
+import { PAvatar } from '../../../../components/PAvatar';
+
+export default {
+    name: 'PPageHeader',
+    components: {
+        PBreadcrumbs, PPagination, PPageHeaderTitle, PActionMenu, PTextStyle, PButton, PPopover, PActionList,
+        PButtonGroup, PAvatar,
+    },
+    props: {
+        title: {
+            type: String,
+        },
+        subtitle: {
+            type: String,
+        },
+        thumbnail: {
+            type: String,
+        },
+        thumbnailAlt: {
+            type: String,
+        },
+        titleMetadata: {
+            type: String,
+        },
+        avatar: {
+            type: String,
+        },
+        avatarInitials: {
+            type: String,
+        },
+        additionalMetaData: {
+            type: String,
+        },
+        titleHidden: {
+            type: Boolean,
+            default: false,
+        },
+        separator: {
+            type: Boolean,
+        },
+        primaryAction: {
+            type: Object,
+            default: () => ({}),
+        },
+        pagination: {
+            type: Object,
+            default: () => ({}),
+        },
+        breadcrumbs: {
+            type: Array,
+            default: () => ([]),
+        },
+        secondaryActions: {
+            type: Array,
+            default: () => ([]),
+        },
+        actionGroups: {
+            type: Array,
+            default: () => ([]),
+        },
+    },
+    data() {
+        return {
+            /**
+             * To Check that view collapsed or not.
+             */
+            isNavigationCollapsed: {
+                rollup: false,
+            },
+            bulkActionsShown: false,
+        };
+    },
+    computed: {
+        headerClassNames() {
+            return classNames(
+                'Polaris-Page-Header',
+                this.titleHidden && 'Polaris-Page-Header--titleHidden',
+                this.separator && 'Polaris-Page-Header--separator',
+                this.hasNavigation && 'Polaris-Page-Header--hasNavigation',
+                this.hasActionMenu && 'Polaris-Page-Header--hasActionMenu',
+                this.title && 'Polaris-Page-Header--mediumTitle',
+                this.isNavigationCollapsed.rollup && 'Polaris-Page-Header--mobileView',
+            );
+        },
+        hasNavigation() {
+
+            return this.breadcrumbs.length > 0 || this.$slots.additionalNavigation || this.pagination;
+        },
+        hasActions() {
+            return this.hasActionMenu ||
+                Object.keys(this.primaryAction).length > 0 ||
+                Object.keys(this.pagination).length > 0 ||
+                this.$props.hasOwnProperty('primaryAction');
+        },
+        hasActionMenu() {
+            return this.secondaryActions.length > 0 || hasGroupsWithActions(this.actionGroups);
+        },
+        hasTitle() {
+            return this.title || this.subtitle || this.titleMetadata || this.thumbnail ||
+                this.$slots.hasOwnProperty('titleMetadata');
+        },
+        hasAvatar() {
+            return this.avatar || this.avatarInitials;
+        },
+    },
+    methods: {
+        useMediaQuery() {
+            if (window.innerWidth <= 768) {
+                this.$set(this.isNavigationCollapsed, 'rollup', true);
+            } else {
+                this.$set(this.isNavigationCollapsed, 'rollup', false);
+            }
+        },
+    },
+    created() {
+        window.addEventListener('resize', this.useMediaQuery);
+        this.useMediaQuery();
+    },
+    destroyed() {
+        window.removeEventListener('resize', this.useMediaQuery);
+    },
+}
+</script>

package/src/components/polaris-vue/src/components/PPage/components/PPageHeaderTitle/PPageHeaderTitle.vue

@@ -0,0 +1,63 @@
+<template>
+    <div :class="pageTitleClassName">
+        <div v-if="source">
+            <PThumbnail size="medium" :source="source" :alt="alt"/>
+        </div>
+        <div class="Polaris-Header-Title__TitleAndSubtitleWrapper" v-if="title || subtitle">
+            <div class="Polaris-Header-Title__TitleWithMetadataWrapper">
+                <PDisplayText element="h1" v-html="title" class="Polaris-Header-Title"/>
+                <div class="Polaris-Header-Title__TitleMetadata"
+                     v-if="titleMetadata || $slots.hasOwnProperty('titleMetadata')">
+                    <template v-if="titleMetadata">{{ titleMetadata }}</template>
+                    <slot v-else name="titleMetadata"/>
+                </div>
+            </div>
+            <div v-if="subtitle" class="Polaris-Header-Title__SubTitle">
+                <p>{{ subtitle }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { classNames } from '../../../../utilities/css';
+    import { PDisplayText } from '../../../../components/PDisplayText';
+    import { PTextStyle } from '../../../../components/PTextStyle';
+    import { PThumbnail } from '../../../../components/PThumbnail';
+
+    export default {
+        name: 'PPageHeaderTitle',
+        components: {
+            PDisplayText, PTextStyle, PThumbnail,
+        },
+        props: {
+            title: {
+                type: String,
+            },
+            source: {
+                type: String,
+            },
+            alt: {
+                type: String,
+            },
+            subtitle: {
+                type: String,
+            },
+            titleMetadata: {
+                type: String,
+            },
+        },
+        computed: {
+            pageTitleClassName() {
+                return classNames(
+                    this.source && 'Polaris-Header-Title--hasThumbnail',
+                );
+            },
+        },
+        methods: {
+            hasThumbnailSlot() {
+                return !!this.$slots.thumbnail;
+            },
+        },
+    }
+</script>

package/src/components/polaris-vue/src/components/PPagination/PPagination.vue

@@ -0,0 +1,119 @@
+<template>
+    <nav :class="className">
+        <PUnstyledLink v-if="previousURL" :class="previousClassName" :url="previousURL">
+            <PIcon source="ArrowLeftMinor"/>
+        </PUnstyledLink>
+        <button v-else type="button" :class="previousClassName" :disabled="!hasPrevious" @click="onPrevious()">
+            <PIcon source="ArrowLeftMinor"/>
+        </button>
+        <div v-if="label" class="Polaris-Pagination__Label">
+            <PTextStyle v-if="hasNext && hasPrevious">{{ label }}</PTextStyle>
+            <PTextStyle v-else variation="subdued">{{ label }}</PTextStyle>
+        </div>
+        <PUnstyledLink v-if="nextURL" :class="nextClassName" :url="nextURL">
+            <PIcon source="ArrowRightMinor"/>
+        </PUnstyledLink>
+        <button v-else type="button" :class="nextClassName" :disabled="!hasNext" @click="onNext()">
+            <PIcon source="ArrowRightMinor"/>
+        </button>
+    </nav>
+</template>
+
+<script>
+    import { classNames } from '../../utilities/css';
+    import { PUnstyledLink } from '../../components/PUnstyledLink';
+    import { PIcon } from '../../components/PIcon';
+    import { PTextStyle } from '../../components/PTextStyle';
+
+    export const PPaginationDescriptor = {
+        nextTooltip: String,
+        previousTooltip: String,
+        nextURL: String,
+        previousURL: String,
+        hasNext: Boolean,
+        hasPrevious: Boolean,
+        accessibilityLabel: String,
+
+        onNext: Function,
+        onPrevious: Function,
+    }
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Use pagination to let merchants move through an ordered collection of items that have been split
+     *  into pages. On the web, pagination uses buttons to move back and forth between pages. On iOS and Android,
+     *  pagination uses infinite scrolling.</h4>
+     */
+    export default {
+        name: 'PPagination',
+        components: {
+            PUnstyledLink, PIcon, PTextStyle,
+        },
+        props: {
+            /**
+             * The URL of the next page
+             */
+            nextURL: {
+                type: String,
+            },
+            /**
+             * Keyboard shortcuts for the previous button
+             */
+            previousURL: {
+                type: String,
+            },
+            /**
+             * Text to provide more context in between the arrow buttons
+             */
+            label: {
+                type: String,
+            },
+            /**
+             * Whether there is a next page to show
+             */
+            hasNext: {
+                type: Boolean,
+            },
+            /**
+             * Whether there is a previous page to show
+             */
+            hasPrevious: {
+                type: Boolean,
+            },
+            /**
+             * Callback when previous button is clicked
+             */
+            onPrevious: {
+                type: Function,
+                default: null,
+            },
+            /**
+             * Callback when next button is clicked
+             */
+            onNext: {
+                type: Function,
+                default: null,
+            }
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Pagination',
+                );
+            },
+            previousClassName() {
+                return classNames(
+                    'Polaris-Pagination__Button',
+                    !this.label && 'Polaris-Pagination__PreviousButton',
+                );
+            },
+            nextClassName() {
+                return classNames(
+                    'Polaris-Pagination__Button',
+                    !this.label && 'Polaris-Pagination__NextButton',
+                );
+            },
+        },
+    }
+</script>

package/src/components/polaris-vue/src/components/PPopover/PPopover.vue

@@ -0,0 +1,298 @@
+<template>
+    <div ref="container" :id="activatorId">
+        <!-- @slot Filter Activator content -->
+        <slot name="activator" :activate="onActivate"></slot>
+
+        <PPopoverOverlay
+            :id="realId+'Overlay'"
+            :active="activeStatus"
+            :activatorId="activatorId"
+            :preferredPosition="preferredPosition"
+            :preferredAlignment="preferredAlignment"
+            :fullWidth="fullWidth"
+            @close="onClose">
+            <template v-slot:overlay="props">
+                <div :class="className" :ref="`content-${id}`">
+                    <div v-if="!props.data.measuring"
+                         :style="{ left: props.data.tipPosition+'px' }"
+                         class="Polaris-Popover__Tip">
+                    </div>
+                    <div class="Polaris-Popover__FocusTracker"
+                         @focus="handleFocusFirstItem"
+                         tabindex="0">
+                    </div>
+                    <div class="Polaris-Popover__Wrapper">
+                        <div :class="contentClassName">
+                            <div class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical"
+                                 data-polaris-scrollable="true">
+                                <!-- @slot Popover Overlay content -->
+                                <slot name="content"></slot>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="Polaris-Popover__FocusTracker"
+                         @focus="handleFocusLastItem"
+                         tabindex="0">
+                    </div>
+                </div>
+            </template>
+        </PPopoverOverlay>
+    </div>
+</template>
+
+
+<script>
+    import { classNames } from '../../utilities/css';
+    import { PPopoverOverlay } from '../../components/PPopover/components/PPopoverOverlay';
+
+    /**
+     * <br/>
+     * <h4 style={{fontFamily: '-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto,
+     * Helvetica Neue, sans-serif'}}>
+     * Popovers are small overlays that open on demand. They let merchants access additional content and actions without
+     * cluttering the page.</h4>
+     */
+    export default {
+        name: 'PPopover',
+        components: {
+            PPopoverOverlay,
+        },
+        props: {
+            /**
+             * Id for the PPopover.
+             */
+            id: {
+                type: [String, Number],
+                required: true,
+            },
+            /**
+             * Show or hide the PPopover.
+             */
+            active: {
+                type: Boolean,
+                required: true,
+            },
+            /**
+             * Preferred Position.
+             */
+            preferredPosition: {
+                type: String,
+                default: 'below',
+            },
+            /**
+             * Preferred Alignment.
+             */
+            preferredAlignment: {
+                type: String,
+                default: 'center',
+            },
+            /**
+             * The element type to wrap the activator with.
+             */
+            activatorWrapper: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Prevent auto focus on the activator.
+             */
+            preventAutoFocus: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Automatically add wrap content in section.
+             */
+            sectioned: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Allow PPopover to stretch to the full width of its activator.
+             */
+            fullWidth: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Allow popover to stretch to fit content vertically.
+             */
+            fullHeight: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Allow popover content to determine the overlay width and height.
+             */
+            fluidContent: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Enable measure.
+             */
+            measuring: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Enable positioning.
+             */
+            positioning: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        data() {
+            return {
+                isAppended: false,
+                activeStatus: this.active,
+                container: HTMLElement,
+            };
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Popover',
+                    this.fullWidth && 'Polaris-Popover--fullWidth',
+                    this.measuring && 'Polaris-Popover--measuring',
+                );
+            },
+            contentClassName() {
+                return classNames(
+                    'Polaris-Popover__Content',
+                    this.fullHeight && 'Polaris-Popover__Content--fullHeight',
+                    this.fluidContent && 'Polaris-Popover__Content--fluidContent',
+                );
+            },
+            realId() {
+                return 'PolarisPopover' + this.id;
+            },
+            activatorId() {
+                return this.realId + 'Activator';
+            },
+        },
+        methods: {
+            findActivator() {
+                return document.getElementById(this.activatorId);
+            },
+            handleKeyPress(e) {
+                if (e.keyCode !== 27) {
+                    return;
+                }
+                if (this.active) {
+                    /** @ignore */
+                    this.$emit('update:active', false);
+                    /**
+                     * Close filter menu when EscapeKey is pressed
+                     */
+                    this.$emit('close', 'EscapeKeypress');
+                }
+            },
+            handlePageClick(e) {
+                const target = e.target;
+                const contentNode = this.$refs['content-' + this.id];
+                if ((contentNode != null && this.nodeContainsDescendant(contentNode, target)) ||
+                    this.nodeContainsDescendant(this.findActivator(), target) || !this.activeStatus) {
+                    return;
+                }
+                if (this.active) {
+                    /**
+                     * Close filter menu when page is clicked
+                     */
+                    this.$emit('close', 'Click');
+                    /** @ignore */
+                    this.$emit('update:active', false);
+                }
+            },
+            nodeContainsDescendant(haystack, needle) {
+                if (haystack === needle) {
+                    return true;
+                }
+                let parent = needle.parentNode;
+                while (parent != null) {
+                    if (parent === haystack) {
+                        return true;
+                    }
+                    parent = parent.parentNode;
+                }
+                return false;
+            },
+            onActivate() {
+                /**
+                 * Activate method
+                 */
+                this.$emit('activate');
+            },
+            handleFocusFirstItem() {
+                this.$emit('close', 'FocusOut');
+                /** @ignore */
+                this.$emit('update:active', false);
+            },
+            handleFocusLastItem() {
+                this.$emit('close', 'FocusOut');
+                /** @ignore */
+                this.$emit('update:active', false);
+            },
+            onClose(event) {
+                this.$emit('close', 'Click');
+                /** @ignore */
+                this.$emit('update:active', false);
+                if (event && event.target) {
+                    const target = event.target;
+                    const contentNode = this.$refs['content-' + this.id];
+                    if (!this.findActivator()) {
+                        const popoverOverlay = document.getElementById(this.realId + 'Overlay');
+                        if (popoverOverlay) {
+                            popoverOverlay.remove();
+                        }
+                    } else {
+                        if ((contentNode != null && this.nodeContainsDescendant(contentNode, target)) ||
+                            this.nodeContainsDescendant(this.findActivator(), target) || !this.active) {
+                            return;
+                        }
+                    }
+                }
+            }
+        },
+        watch: {
+            active(value, oldValue) {
+                this.activeStatus = value;
+                if (value) {
+                    const popoverOverlay = document.getElementById(this.realId + 'Overlay');
+                    if (popoverOverlay) {
+                        const rootElement = document.body;
+                        rootElement.append(popoverOverlay);
+                    }
+                } else {
+                    const popoverOverlay = document.getElementById(this.realId + 'Overlay');
+                    if (popoverOverlay) {
+                        const rootElement = this.$refs.container;
+                        rootElement.append(popoverOverlay);
+                    }
+                }
+            }
+        },
+        mounted() {
+            // if (this.$refs.container['firstElementChild'] !== null) {
+            //     document.getElementById('popover-container').setAttribute('id', this.activatorId);
+            // }
+            window.addEventListener('click', this.handlePageClick);
+            window.addEventListener('touchstart', this.handlePageClick);
+            document.addEventListener('keyup', this.handleKeyPress);
+        },
+        beforeDestroy() {
+            if (this.isAppended) {
+                const popoverOverlay = document.getElementById(this.realId + 'Overlay');
+                if (popoverOverlay) {
+                    popoverOverlay.remove();
+                }
+            }
+        },
+        destroyed() {
+            window.removeEventListener('click', this.handlePageClick);
+            window.removeEventListener('touchstart', this.handlePageClick);
+            window.removeEventListener('keyup', this.handleKeyPress);
+        },
+    }
+</script>