@hulkapps/app-manager-vue 1.0.2 → 2.0.2

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

@@ -0,0 +1,66 @@
+<template>
+    <PPositionedOverlay
+        :id="id"
+        :fullWidth="fullWidth"
+        :active="active"
+        :preferredPosition="preferredPosition"
+        :preferredAlignment="preferredAlignment"
+        :activatorId="activatorId"
+        @scrollout="handleScrollOut"
+    >
+        <template
+            slot="overlay"
+            slot-scope="props"
+        >
+            <slot
+                name="overlay"
+                :data="props"
+            />
+        </template>
+    </PPositionedOverlay>
+</template>
+
+<script>
+    import { PPositionedOverlay } from '../../../../components/PPopover/components/PPositionedOverlay';
+
+    export default {
+        name: 'PPopoverOverlay',
+        components: {
+            PPositionedOverlay,
+        },
+        props: {
+            id: {
+                type: [String, Number],
+            },
+            active: {
+                type: Boolean,
+            },
+            preventAutoFocus: {
+                type: Boolean,
+            },
+            preferredAlignment: {
+                type: String,
+            },
+            preferredPosition: {
+                type: String,
+            },
+            sectioned: {
+                type: Boolean,
+            },
+            fullWidth: {
+                type: Boolean,
+            },
+            activatorId: {
+                type: String,
+            },
+        },
+        methods: {
+            handleScrollOut() {
+                this.$emit('scrollout');
+            }
+        },
+        beforeDestroy() {
+            this.$emit('close');
+        }
+    }
+</script>

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

@@ -0,0 +1,289 @@
+<template>
+    <div
+        :id="id"
+        class="Polaris-PositionedOverlay"
+        :style="containerStyle"
+        v-show="active"
+        ref="overlay">
+        <slot
+            name="overlay"
+            :measuring="measuring"
+            :left="left"
+            :right="right"
+            :desired-height="height"
+            :positioning="positioning"
+            :tip-position="tipPosition"
+        />
+    </div>
+</template>
+
+
+<script>
+    export default {
+        name: 'PPositionedOverlay',
+        props: {
+            id: {
+                type: [String, Number],
+            },
+            active: {
+                type: Boolean,
+            },
+            preferredPosition: {
+                type: String,
+            },
+            preferredAlignment: {
+                type: String, // right, left, center
+            },
+            activatorId: {
+                type: String,
+            },
+            fullWidth: {
+                type: Boolean,
+            },
+            activator: {
+                type: [String, Number, Boolean, Array, Object],
+            },
+            scrollableElement: {
+                type: [String, Number, Boolean, Array, Object],
+            },
+        },
+        data() {
+            return {
+                measuring: true,
+                left: NaN,
+                right: NaN,
+                top: NaN,
+                height: NaN,
+                width: null,
+                positioning: 'below',
+                zIndex: null,
+                outsideScrollableContainer: false,
+                tipPosition: null,
+                overlay: null,
+            };
+        },
+        computed: {
+            containerStyle() {
+                return {
+                    top: this.top == null || isNaN(this.top) ? undefined : this.top + 'px',
+                    left: this.left == null || isNaN(this.left) ? undefined : this.left + 'px',
+                    right: this.right == null || isNaN(this.right) ? undefined : this.right + 'px',
+                    width: this.width ? (typeof this.width === 'number' ? this.width + 'px' : this.width) : undefined,
+                    zIndex: this.zIndex == null ? undefined : this.zIndex,
+                };
+            },
+            scrollableContainer() {
+                const selector = '.Polaris-Scrollable';
+                let closest = null;
+                if (this.activator.closest) {
+                    closest = this.activator.closest(selector);
+                } else {
+                    const matches = document.querySelectorAll(selector);
+                    let i;
+                    let el = this.activator;
+                    do {
+                        el = el.parentElement;
+                        i = matches.length;
+                    } while ((i < 0) && el);
+                    closest = el;
+                }
+
+                return closest || document;
+            },
+        },
+        methods: {
+            handleMeasurement() {
+                const activator = document.getElementById(this.activatorId);
+                if (!activator) {
+                    return;
+                }
+                const activatorRect = activator.getBoundingClientRect();
+
+                const scrollableElement = (!this.scrollableElement || this.scrollableElement === document) ?
+                    document.body : this.scrollableElement;
+                let scrollableContainerRect = scrollableElement.getBoundingClientRect();
+
+                const overlayRect = this.getBoundingClientRect(this.overlay);
+                if (this.fullWidth) {
+                    overlayRect.width = activatorRect.width;
+                }
+
+                if (scrollableElement === document.body) {
+                    scrollableContainerRect = {
+                        height: document.body.scrollHeight,
+                        width: scrollableContainerRect.width,
+                        top: scrollableContainerRect.top,
+                        bottom: scrollableContainerRect.bottom,
+                    };
+                }
+
+                const overlayMargins = this.overlay && this.overlay.firstElementChild
+                    ? this.getMarginsForNode(this.overlay.firstElementChild)
+                    : {activator: 0, container: 0, horizontal: 0};
+
+                const containerRect = {
+                    top: window.scrollY,
+                    left: window.scrollX,
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                };
+
+                const zIndexForLayer = 400;
+                const verticalPosition = this.calculateVerticalPosition(activatorRect,
+                    overlayRect,
+                    overlayMargins,
+                    scrollableContainerRect,
+                    containerRect,
+                    this.preferredPosition);
+                const horizontalPosition = this.calculateHorizontalPosition(
+                    activatorRect,
+                    overlayRect,
+                    containerRect,
+                    overlayMargins,
+                    this.preferredAlignment,
+                );
+                this.measuring = false;
+                // this.left = horizontalPosition;
+                this.left = this.preferredAlignment !== 'right' ? horizontalPosition : undefined;
+                this.right = this.preferredAlignment === 'right' ? horizontalPosition : undefined;
+                this.top = verticalPosition.top;
+                this.height = verticalPosition.height;
+                this.width = this.fullWidth ? 'max-content' : null;
+                this.positioning = verticalPosition.positioning;
+                this.zIndex = zIndexForLayer;
+                this.tipPosition = activatorRect.left + (activatorRect.width / 2) - parseFloat(String(this.left));
+            },
+            getMarginsForNode(node) {
+                const styles = window.getComputedStyle(node);
+                return {
+                    activator: parseFloat(styles.marginTop || ''),
+                    container: parseFloat(styles.marginBottom || ''),
+                    horizontal: parseFloat(styles.marginLeft || ''),
+                };
+            },
+            calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment) {
+                const maximum = containerRect.width - overlayRect.width;
+
+                if (preferredAlignment === 'left') {
+                    return Math.min(
+                        maximum,
+                        Math.max(0, activatorRect.left - overlayMargins.horizontal),
+                    );
+                } else if (preferredAlignment === 'right') {
+                    const activatorRight =
+                        containerRect.width - (activatorRect.left + activatorRect.width);
+
+                    return Math.min(
+                        maximum,
+                        Math.max(0, activatorRight - overlayMargins.horizontal),
+                    );
+                }
+
+                const center = {
+                    x: activatorRect.left + (activatorRect.width / 2),
+                    y: activatorRect.top + (activatorRect.height / 2),
+                };
+                return Math.min(
+                    maximum,
+                    Math.max(0, center.x - overlayRect.width / 2),
+                );
+            },
+            calculateVerticalPosition(activatorRect,
+                                      overlayRect,
+                                      overlayMargins,
+                                      scrollableContainerRect,
+                                      containerRect,
+                                      preferredPosition) {
+                const activatorTop = activatorRect.top;
+                const activatorBottom = activatorTop + activatorRect.height;
+                const spaceAbove = activatorRect.top;
+                const spaceBelow = containerRect.height - activatorRect.top - activatorRect.height;
+
+                const desiredHeight = overlayRect.height;
+                const verticalMargins = overlayMargins.activator + overlayMargins.container;
+                const minimumSpaceToScroll = overlayMargins.container;
+                const distanceToTopScroll = activatorRect.top - Math.max(scrollableContainerRect.top, 0);
+                const distanceToBottomScroll = containerRect.top
+                    + Math.min(containerRect.height, scrollableContainerRect.top + scrollableContainerRect.height)
+                    - (activatorRect.top + activatorRect.height);
+
+                const enoughSpaceFromTopScroll = distanceToTopScroll >= minimumSpaceToScroll;
+                const enoughSpaceFromBottomScroll = distanceToBottomScroll >= minimumSpaceToScroll;
+
+                const heightIfBelow = Math.min(spaceBelow, desiredHeight);
+                const heightIfAbove = Math.min(spaceAbove, desiredHeight);
+
+                const positionIfAbove = {
+                    height: heightIfAbove - verticalMargins,
+                    top: activatorTop + containerRect.top - heightIfAbove,
+                    positioning: 'above',
+                };
+
+                const positionIfBelow = {
+                    height: heightIfBelow - verticalMargins,
+                    top: activatorBottom + containerRect.top,
+                    positioning: 'below',
+                };
+
+                if (preferredPosition === 'above') {
+                    return ((enoughSpaceFromTopScroll ||
+                            (distanceToTopScroll >= distanceToBottomScroll && !enoughSpaceFromBottomScroll)) &&
+                        (spaceAbove > desiredHeight || spaceAbove > spaceBelow))
+                        ? positionIfAbove
+                        : positionIfBelow;
+                }
+
+                if (preferredPosition === 'below') {
+                    return ((enoughSpaceFromBottomScroll ||
+                            (distanceToBottomScroll >= distanceToTopScroll && !enoughSpaceFromTopScroll)) &&
+                        (spaceBelow > desiredHeight || spaceBelow > spaceAbove))
+                        ? positionIfBelow
+                        : positionIfAbove;
+                }
+
+                if (enoughSpaceFromTopScroll && enoughSpaceFromBottomScroll) {
+                    return spaceAbove > spaceBelow
+                        ? positionIfAbove
+                        : positionIfBelow;
+                }
+
+                return distanceToTopScroll > minimumSpaceToScroll
+                    ? positionIfAbove
+                    : positionIfBelow;
+            },
+            getBoundingClientRect(element) {
+                if (!element) {
+                    return {};
+                }
+                const rect = element.getBoundingClientRect();
+                return {
+                    top: rect.top,
+                    right: rect.right,
+                    bottom: rect.bottom,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height,
+                };
+            },
+        },
+        watch: {
+            active: function (val, oldVal) {
+                this.$nextTick(this.handleMeasurement);
+                setTimeout(this.handleMeasurement, 500);
+            },
+        },
+        mounted() {
+            window.addEventListener('resize', this.handleMeasurement);
+            window.addEventListener('scroll', this.handleMeasurement);
+            this.overlay = this.$refs.overlay;
+            this.handleMeasurement();
+        },
+        updated() {
+            this.overlay = this.$refs.overlay;
+        },
+        destroyed() {
+            window.removeEventListener('resize', this.handleMeasurement);
+            window.removeEventListener('scroll', this.handleMeasurement);
+        },
+    }
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <img :src="`data:image/svg+xml;utf8,${spinnerSVG}`" :class="className" alt="">
+</template>
+
+<script>
+import { classNames, variationName } from '../../utilities/css';
+import { encode as encodeSVG } from '../../utilities/svg';
+import { spinnerLarge, spinnerSmall } from './images';
+import StringValidator from '../../utilities/validators/StringValidator';
+
+const Color = ['white', 'teal', 'inkLightest'];
+const Size = ['small', 'large'];
+
+const COLORS_FOR_LARGE_SPINNER = ['teal', 'inkLightest'];
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Spinners are used to notify merchants that their action is being processed. For loading states,
+ *  spinners should only be used for content that can’t be represented with skeleton loading components, like for data
+ *  charts.</h4>
+ */
+export default {
+  name: 'PSpinner',
+  props: {
+    /**
+     * Color for spinner.
+     */
+    color: {
+      type: String,
+      default: 'teal',
+      ...StringValidator('color', Color)
+    },
+    /**
+     * Size of spinner.
+     */
+    size: {
+      type: String,
+      default: 'large',
+      ...StringValidator('size', Size)
+    }
+  },
+  computed: {
+    className() {
+      return classNames(
+          'Polaris-Spinner',
+          this.color && `Polaris-Spinner--${variationName('color', this.color)}`,
+          this.size && `Polaris-Spinner--${variationName('size', this.size)}`,
+      );
+    },
+    spinnerSVG() {
+      const svg = this.size === 'large' ? spinnerLarge : spinnerSmall;
+      if(typeof svg === 'string') {
+        return encodeSVG(svg);
+      }
+    }
+  },
+
+}
+</script>

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

@@ -0,0 +1,84 @@
+<template>
+    <div :class="className">
+        <!-- @slot Elements to display inside stack -->
+        <slot/>
+    </div>
+</template>
+<script>
+    import { classNames, variationName } from '../../utilities/css';
+
+    /**
+     * @requires PStackItem
+     */
+    import { PStackItem } from './components/PStackItem';
+    import StringValidator from '../../utilities/validators/StringValidator';
+
+    const Spacing = ['extraTight', 'tight', 'loose', 'extraLoose', 'none'];
+    const Alignment = ['leading', 'trailing', 'center', 'fill', 'baseline'];
+    const Distribution = ['equalSpacing', 'leading', 'trailing', 'center', 'fill', 'fillEvenly'];
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Use to lay out a horizontal row of components or to achieve no-fuss vertical centering. A stack is made
+     *  of flexible items that wrap each of the stack’s children. Options provide control of the wrapping, spacing, and
+     *  relative size of the items in the stack.</h4>
+     */
+    export default {
+        name: 'PStack',
+        components: {
+            PStackItem,
+        },
+        props: {
+            /**
+             * Set it true of you need items in vertical.
+             */
+            vertical: {
+                type: Boolean,
+            },
+            /**
+             * Set it true for Word-Wrap.
+             */
+            wrap: {
+                type: Boolean,
+                default: true,
+            },
+            /**
+             * Space between two items.
+             */
+            spacing: {
+                type: String,
+                default: null,
+                ...StringValidator('spacing', Spacing),
+            },
+            /**
+             * Distribution of free space among items.
+             */
+            distribution: {
+                type: String,
+                default: null,
+                ...StringValidator('distribution', Distribution),
+            },
+            /**
+             * Alignment of items.
+             */
+            alignment: {
+                type: String,
+                default: null,
+                ...StringValidator('alignment', Alignment),
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Stack',
+                    this.vertical && 'Polaris-Stack--vertical',
+                    this.spacing && `Polaris-Stack--${variationName('spacing', this.spacing)}`,
+                    this.distribution && `Polaris-Stack--${variationName('distribution', this.distribution)}`,
+                    this.alignment && `Polaris-Stack--${variationName('alignment', this.alignment)}`,
+                    !this.wrap && 'Polaris-Stack--noWrap',
+                );
+            },
+        },
+    }
+</script>

package/src/components/polaris-vue/src/components/PStack/components/PStackItem/PStackItem.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="className" v-bind:style="style">
+    <!-- @slot Elements to display inside stack item -->
+    <slot/>
+  </div>
+</template>
+
+<script>
+import { classNames } from '../../../../utilities/css';
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">The stack component will treat multiple elements wrapped in a stack item component as one item. By
+ *  default, each individual element is treated as one stack item. Use the fill prop on a single stack item component to
+ *  make it fill the rest of the available horizontal space.</h4>
+ */
+export default {
+    name: 'PStackItem',
+    props: {
+        /**
+         * Fill the available horizontal space in the stack with the item.
+         */
+        fill: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Width of Item.
+         */
+        width: {
+            type: [String, Number],
+        }
+    },
+    computed: {
+        className() {
+            return classNames(
+                'Polaris-Stack__Item',
+                this.fill && 'Polaris-Stack__Item--fill',
+            );
+        },
+        style() {
+            if (this.width) {
+                return {width: /^\d+$/.test(this.width) ? this.width + 'px' : this.width};
+            } else { return null; }
+        },
+    },
+}
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <component :is="element" :class="className">
+    <!-- @slot Text to display in subheading -->
+    <slot/>
+  </component>
+</template>
+
+<script>
+import StringValidator from '../../utilities/validators/StringValidator';
+
+const HeadingTagName = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Subheadings are used for the title of any sub-sections in top-level page sections.</h4>
+ */
+export default {
+  name: 'PSubheading',
+  props: {
+    /**
+     * Element for heading.
+     */
+    element: {
+      type: String,
+      default: 'h3',
+      ...StringValidator('element', HeadingTagName)
+    }
+  },
+  computed: {
+    className() {
+      return 'Polaris-Subheading';
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,89 @@
+<template>
+    <span :class="className">
+        <span :title="tag.value" class="Polaris-Tag__TagText">{{tag.value}}</span>
+        <button
+            v-if="removable"
+            type="button"
+            class="Polaris-Tag__Button"
+            :aria-label="`Remove ${tag.value}`"
+            @click="handleRemove"
+        >
+            <PIcon source="CancelSmallMinor" />
+        </button>
+    </span>
+</template>
+
+<script>
+import { classNames } from '../../utilities/css';
+import { PIcon } from '../../components/PIcon';
+import ObjectValidator from '../../utilities/validators/ObjectValidator';
+import StringValidator from "../../utilities/validators/StringValidator";
+
+const TagInterface = {
+    value: {
+        type: [String, Number],
+        required: true,
+    },
+    key: {
+        type: [String, Number],
+        required: true,
+    },
+};
+
+const Size = ['small', 'medium', null, ''];
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Tags represent a set of interactive, merchant-supplied keywords that help label, organize, and
+ *  categorize objects. Tags can be added or removed from an object by merchants.</h4>
+ */
+export default {
+    name: 'PTag',
+    components: {
+        PIcon,
+    },
+    props: {
+        /**
+         * Tag object.
+         */
+        tag: {
+            type: Object,
+            default: () => ({}),
+            ...ObjectValidator('tag', TagInterface),
+        },
+        /**
+         * Set true if you want to make it removable.
+         */
+        removable: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Changes the size of the tag
+         */
+        size: {
+            type: String,
+            default: 'medium',
+            ...StringValidator('size', Size),
+        },
+    },
+    computed: {
+        className() {
+            return classNames(
+                'Polaris-Tag',
+                this.removable && `Polaris-Tag--removable`,
+                this.size === 'small' && 'Polaris-Tag--small',
+            );
+        },
+    },
+    methods: {
+        handleRemove() {
+            /**
+             * Method to remove tag
+             */
+            this.$emit('remove-tag', this.tag.key);
+        },
+    },
+}
+</script>