@hulkapps/app-manager-vue 1.0.1 → 2.0.1

package/src/components/polaris-vue/src/components/PIcon/ShopifyIcons.vue

@@ -0,0 +1,217 @@
+<template>
+    <PFrame>
+        <PTopBar
+            slot="topBar"
+            :searchField="{
+                value: search,
+                placeholder: 'Search',
+                showFocusBorder: true,
+          }"
+            :searchResultsVisible="false"
+            @searchFieldChange="searchIcon"
+            @searchResultsDismiss="handleSearchResultsDismiss"
+        />
+        <div class="shopify-div">
+            <PStack v-if="icons.major.length > 0" vertical spacing="tight">
+                <PStackItem>
+                    <PHeading class="icon-heading">Major Icons</PHeading>
+                </PStackItem>
+                <PStackItem>
+                    <div class="container-div">
+                        <div
+                            v-for="(icon, key) in icons.major"
+                            :key="key"
+                            class="icon-div"
+                            v-p-tooltip.mostSpace='"<PIcon source=\"" + icon + "\" />"'
+                            @mouseover="changeCode(icon)"
+                            @click="copyCode(icon)"
+                        >
+                            <div>
+                                <PIcon v-if="source" :source="source"/>
+                                <PIcon v-else :source="icon" :color="color" :backdrop="backdrop"/>
+                                <div class="icon-text-div">
+                                    {{ icon.replace('Major', '').replace(/([A-Z])/g, ' $1').trim() }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </PStackItem>
+            </PStack>
+            <PStack v-if="icons.minor.length > 0" vertical spacing="tight">
+                <PStackItem>
+                    <PHeading class="icon-heading">Minor Icons</PHeading>
+                </PStackItem>
+                <PStackItem>
+                    <div class="container-div">
+                        <div
+                            v-for="(icon, key) in icons.minor"
+                            :key="key"
+                            class="icon-div"
+                            v-p-tooltip.mostSpace='"<PIcon source=\"" + icon + "\" />"'
+                            @mouseover="changeCode(icon)"
+                            @click="copyCode(icon)"
+                        >
+                            <div>
+                                <PIcon v-if="source" :source="source"/>
+                                <PIcon v-else :source="icon" :color="color" :backdrop="backdrop"/>
+                                <div class="icon-text-div">
+                                    {{ icon.replace('Minor', '').replace(/([A-Z])/g, ' $1').trim() }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </PStackItem>
+            </PStack>
+        </div>
+    </PFrame>
+</template>
+
+<script>
+    import { PFrame } from '../PFrame';
+    import { PTopBar } from '../PTopBar';
+    import { PStack } from '../PStack';
+    import { PStackItem } from '../PStack/components/PStackItem';
+    import { PHeading } from '../PHeading';
+    import { PIcon } from '../PIcon';
+    import * as AllIcon from '../../assets/shopify-polaris-icons';
+
+    export default {
+        name: 'ShopifyIcons',
+        components: {
+            PIcon, PStack, PStackItem, PTopBar, PFrame, PHeading,
+        },
+        props: {
+            color: {
+                type: String,
+                default: null,
+            },
+            backdrop: {
+                type: Boolean,
+            },
+            source: {
+                type: String,
+            },
+        },
+        data() {
+            return {
+                id: '',
+                icons: {
+                    major: [],
+                    minor: [],
+                },
+                iconCode: '',
+                copyText: '',
+                allIcons: {},
+                search: '',
+            };
+        },
+        methods: {
+            searchIcon(value) {
+                if (!value) {
+                    this.allIcons.forEach((icon) => {
+                        if (icon.includes('Major')) {
+                            this.icons.major.push(icon);
+                        } else if (icon.includes('Minor')) {
+                            this.icons.minor.push(icon);
+                        }
+                    });
+                    return this.icons;
+                } else {
+                    this.icons = {
+                        major: [],
+                        minor: [],
+                    };
+                    this.allIcons.forEach((icon) => {
+                        if (icon.toLowerCase().includes(value.toLowerCase()) && icon.includes('Major')) {
+                            this.icons.major.push(icon);
+                        } else if (icon.toLowerCase().includes(value.toLowerCase()) && icon.includes('Minor')) {
+                            this.icons.minor.push(icon);
+                        }
+                    });
+                    return this.icons;
+                }
+            },
+            changeCode(icon) {
+                this.iconCode = icon;
+                this.iconCode = '<PIcon source="' + icon + '" />';
+            },
+            copyCode(icon) {
+                let copy = '';
+                if (this.backdrop) {
+                    copy = navigator.clipboard.writeText(
+                        '<PIcon source="' + icon + '" color="' + this.color + '" backdrop="' + this.backdrop + '" />',
+                    );
+                } else {
+                    if (this.color === null) {
+                        copy = navigator.clipboard.writeText(
+                            '<PIcon source="' + icon + '" />',
+                        );
+                    } else {
+                        copy = navigator.clipboard.writeText(
+                            '<PIcon source="' + icon + '" color="' + this.color + '" />',
+                        );
+                    }
+                }
+                this.copyText = copy ? 'Copied!' : '';
+                this.$pToast.open({
+                    message: this.copyText,
+                    duration: 3000,
+                });
+            },
+            handleSearchResultsDismiss() {
+                this.search = '';
+            },
+        },
+        created() {
+            this.allIcons = Object.keys(AllIcon);
+            this.allIcons.sort();
+            this.allIcons.forEach((icon) => {
+                if (icon.includes('Major')) {
+                    this.icons.major.push(icon);
+                } else if (icon.includes('Minor')) {
+                    this.icons.minor.push(icon);
+                }
+            });
+        },
+    };
+</script>
+
+<style scoped>
+    .shopify-div {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .container-div {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .icon-div {
+        width: 150px;
+        padding: 12px;
+        margin: 10px;
+        text-align: center;
+        position: relative;
+        height: 100px;
+    }
+
+    .icon-div:hover {
+        border-radius: 10px;
+        cursor: pointer;
+        background-color: #FFFFFF;
+        box-shadow: 0 0 11px rgba(33, 33, 33, .2);
+    }
+
+    .icon-text-div {
+        color: #464c54;
+        padding-top: 16px;
+        word-break: break-all;
+        font-size: 14px;
+    }
+
+    .icon-heading {
+        margin: 15px 0 0 15px;
+    }
+</style>

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

@@ -0,0 +1,49 @@
+<template>
+    <img :alt="alt" :src="source" :class="className" />
+</template>
+
+<script>
+    import { classNames } from '../../utilities/css';
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Use image as a visual anchor and identifier for an object. They should be used along with text
+     *  to provide context.</h4>
+     */
+    export default {
+        name: 'PImage',
+        props: {
+          /**
+           * Image source
+           */
+          source: {
+            type: String,
+            default: null
+          },
+
+          /**
+           * Image alt
+           */
+          alt: {
+            type: String,
+            default: null
+          },
+
+          /**
+           * Image class
+           */
+          imgClass: {
+            type: String,
+            default: null
+          }
+        },
+        computed: {
+          className() {
+            return classNames(
+                this.imgClass,
+            );
+          }
+        }
+    }
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+    <div class="Polaris-Layout">
+        <template v-if="sectioned">
+            <PLayoutSection>
+                <!-- @slot The content to display inside the layout -->
+                <slot/>
+            </PLayoutSection>
+        </template>
+        <template v-else>
+            <!-- @slot The content to display inside the layout -->
+            <slot/>
+        </template>
+    </div>
+</template>
+
+<script>
+    import { PLayoutSection } from '../../components/PLayout/components/PLayoutSection';
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">The layout component is used to create the main layout on a page. Layouts sections come in three
+     *  main configurations: one-column, two-column, and annotated. One and two column layouts can be combined in the
+     *  same page. Annotated layouts should be used on their own and only on settings pages.</h4>
+     */
+    export default {
+        name: 'PLayout',
+        components: {
+            PLayoutSection,
+        },
+        props: {
+            /**
+             * Automatically adds sections to layout.
+             */
+            sectioned: {
+                type: Boolean,
+                default: false,
+            },
+        },
+    }
+</script>
+

package/src/components/polaris-vue/src/components/PLayout/components/PLayoutSection/PLayoutSection.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :class="className">
+    <!-- @slot Default -->
+    <slot/>
+  </div>
+</template>
+
+<script>
+import { classNames } from '../../../../utilities/css';
+
+export default {
+    name: 'PLayoutSection',
+    props: {
+        /**
+         * Set it true to make it secondary.
+         */
+        secondary: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Set it true to make it full width.
+         */
+        fullWidth: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Set it true to make it one half.
+         */
+        oneHalf: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Set it true to make it one third.
+         */
+        oneThird: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        className() {
+            return classNames(
+                'Polaris-Layout__Section',
+                this.secondary && 'Polaris-Layout__Section--secondary',
+                this.fullWidth && 'Polaris-Layout__Section--fullWidth',
+                this.oneHalf && 'Polaris-Layout__Section--oneHalf',
+                this.oneThird && 'Polaris-Layout__Section--oneThird',
+            );
+        },
+    },
+}
+</script>

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

@@ -0,0 +1,90 @@
+<template>
+    <PUnstyledLink v-if="url || to" :id="id" :to="to" :url="url" :external="external" :class="className"
+                   v-on="$listeners" data-polaris-unstyled="true">
+        <!-- @slot The content to display inside the link -->
+        <slot/>
+        <span v-if="isStringSlot" class="Polaris-Link__IconLockup">
+            <span class="Polaris-Link__IconLayout">
+                <PIcon source="ExternalSmallMinor"/>
+            </span>
+        </span>
+    </PUnstyledLink>
+    <button v-else type="button" :id="id" :class="className" v-on="$listeners">
+        <!-- @slot The content to display inside the link -->
+        <slot/>
+        <span v-if="isStringSlot" class="Polaris-Link__IconLockup">
+            <span class="Polaris-Link__IconLayout">
+                <PIcon source="ExternalSmallMinor"/>
+            </span>
+        </span>
+    </button>
+</template>
+
+<script>
+    import { classNames } from '../../utilities/css';
+    import { PButton } from '../../components/PButton';
+    import { PUnstyledLink } from '../../components/PUnstyledLink';
+    import { PIcon } from '../../components/PIcon';
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Links take users to another place, and usually appear within or directly following a sentence.</h4>
+     */
+    export default {
+        name: 'PLink',
+        components: {
+            PButton, PUnstyledLink, PIcon,
+        },
+        props: {
+            /**
+             * ID for the link.
+             */
+            id: {
+                type: [String, Number],
+                default: null,
+            },
+            /**
+             * The url to link to.
+             */
+            url: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Set to for router link
+             */
+            to: {
+                type: [String, Object],
+                default: null,
+            },
+            /**
+             * Makes the link open in a new tab.
+             */
+            external: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Makes the link color the same as the current text color and adds an underline.
+             */
+            monochrome: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Link',
+                    this.monochrome && 'Polaris-Link--monochrome',
+                );
+            },
+            isStringSlot() {
+
+                const slots = (this.$slots.default || []);
+                return this.external && slots.length === 1 && slots[0].text;
+            },
+        },
+    }
+</script>

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

@@ -0,0 +1,23 @@
+<script>
+    export default {
+        name: 'POptionalTag',
+        props: {
+            tag: {
+                type: String,
+                required: true,
+            },
+            active: {
+                type: Boolean,
+                required: true,
+            },
+        },
+        render(createElement) {
+            const validSlot = this.$slots.default;
+            const child = validSlot ? validSlot[0] : createElement('div');
+            if (this.active) {
+                return createElement(this.tag, {}, [child]);
+            }
+            return child;
+        },
+    }
+</script>

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

@@ -0,0 +1,136 @@
+<template>
+    <div :class="className">
+        <PPageHeader
+            v-if="hasHeaderContent"
+            :title="title"
+            :breadcrumbs="breadcrumbs"
+            :primaryAction="primaryAction"
+            :secondaryActions="secondaryActions"
+            :actionGroups="actionGroups"
+            :thumbnail="thumbnail"
+            :thumbnailAlt="thumbnailAlt"
+            :pagination="pagination"
+            v-bind="$attrs"
+            v-on="$listeners"
+        >
+            <!-- @slot Use some other component for primary Action -->
+            <slot slot="primaryAction" name="primaryAction"/>
+            <!-- @slot Use some other component for title meta data -->
+            <slot slot="titleMetadata" name="titleMetadata"/>
+            <!-- @slot Use some other component for additional navigation -->
+            <slot slot="additionalNavigation" name="additionalNavigation"/>
+        </PPageHeader>
+        <div class="Polaris-Page__Content">
+            <!-- @slot The contents of the page -->
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { classNames } from '../../utilities/css';
+    import { PPageHeader } from '../../components/PPage/components/PPageHeader';
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Use to build the outer wrapper of a page, including the page title and associated actions.</h4>
+     */
+    export default {
+        name: 'PPage',
+        components: {
+            PPageHeader,
+        },
+        props: {
+            /**
+             * Remove the normal max-width on the page
+             */
+            fullWidth: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Decreases the maximum layout width. Intended for single-column layouts
+             */
+            narrowWidth: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Page title, in large type
+             */
+            title: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Page thumbnail
+             */
+            thumbnail: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Thumbnail alt text
+             */
+            thumbnailAlt: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Primary page-level action
+             */
+            primaryAction: {
+                type: Object,
+                default: () => ({}),
+            },
+            /**
+             * Collection of secondary page-level actions
+             */
+            secondaryActions: {
+                type: Array,
+                default: () => ([]),
+            },
+            /**
+             * Collection of page-level groups of secondary actions
+             */
+            actionGroups: {
+                type: Array,
+                default: () => ([]),
+            },
+            /**
+             * Collection of breadcrumbs
+             */
+            breadcrumbs: {
+                type: Array,
+                default: () => ([]),
+            },
+            /**
+             * Page-level pagination
+             */
+            pagination: {
+                type: Object,
+                default: () => ({}),
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Page',
+                    this.fullWidth && 'Polaris-Page--fullWidth',
+                    this.narrowWidth && 'Polaris-Page--narrowWidth',
+                );
+            },
+            hasHeaderContent() {
+                return (this.title != null && this.title !== '') ||
+                    this.primaryAction != null ||
+                    this.thumbnail ||
+                    (this.secondaryActions != null && this.secondaryActions.length > 0) ||
+                    (this.actionGroups != null && this.actionGroups.length > 0) ||
+                    (this.$slots.hasOwnProperty('primaryAction')) ||
+                    (this.$slots.hasOwnProperty('additionalNavigation')) ||
+                    (this.breadcrumbs != null && this.breadcrumbs.length > 0);
+            },
+        },
+    }
+</script>