@hulkapps/app-manager-vue 1.0.2 → 2.0.2

package/src/components/polaris-vue/src/components/PButton/components/PUnstyledButton/PUnstyledButton.vue

@@ -0,0 +1,340 @@
+<template>
+    <component
+        :is="(to || href) ? 'PUnstyledLink' : 'button'"
+        :class="className"
+        :id="id"
+        :aria-label="accessibilityLabel"
+        :role="role"
+        @click="$emit('click', $event)"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+
+        :url="href"
+        :to="to"
+        :external="external"
+        :download="download"
+
+        :type="type"
+        :disabled="disabled"
+        :aria-busy="loading ? true : undefined"
+        :aria-controls="ariaControls"
+        :aria-expanded="ariaExpanded"
+        :aria-describedby="ariaDescribedBy"
+        :aria-pressed="pressed"
+        @keydown="$emit('keyDown', $event)"
+        @keyup="$emit('keyup', $event)"
+        @keypress="$emit('keyPress', $event)"
+    >
+        <span class="Polaris-Button__Content">
+            <span v-if="loading" class="Polaris-Button__Spinner">
+                <PSpinner size="small" :color="spinnerColor"/>
+            </span>
+            <span v-if="icon" :class="iconClassName">
+                <PIcon :source="loading ? 'placeholder' : icon"/>
+            </span>
+            <span v-if="!hasNoChildren" :class="childMarkupClassName" :key="disabled ? 'text-disabled' : 'text'">
+                <!-- @slot The content to display content inside the button -->
+                <slot/>
+            </span>
+            <span v-if="disclosure" class="Polaris-Button__Icon">
+                <div :class="disclosureIconClassName">
+                    <PIcon :source="loading ? 'placeholder' : 'CaretDownMinor'"/>
+                </div>
+            </span>
+        </span>
+    </component>
+</template>
+
+<script>
+    import { PIcon } from '../../../../components/PIcon';
+    import { PSpinner } from '../../../../components/PSpinner';
+    import { PUnstyledLink } from '../../../../components/PUnstyledLink';
+    import StringValidator from '../../../../utilities/validators/StringValidator';
+    import { classNames, variationName } from "../../../../utilities/css";
+
+    const Size = ['slim', 'medium', 'large'];
+    const TextAlign = ['left', 'right', 'center', null];
+    const Type = ['submit', 'reset', 'button'];
+    const DEFAULT_SIZE = 'medium';
+
+    export default {
+        name: 'PUnstyledButton',
+        components: {
+            PIcon, PSpinner, PUnstyledLink,
+        },
+        props: {
+            /**
+             * Visually hidden text for screen readers
+             */
+            accessibilityLabel: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Id of the element the button controls
+             */
+            ariaControls: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Indicates the ID of the element that describes the button
+             */
+            ariaDescribedBy: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Tells screen reader the controlled element is expanded
+             */
+            ariaExpanded: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Define aria-controls, aria-haspopup, aria-owns
+             */
+            ariaProps: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Indicates a dangerous or potentially negative action
+             */
+            destructive: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Indicates a dangerous or potentially negative text
+             */
+            destructiveText: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Disables the button, disallowing merchant interaction
+             */
+            disabled: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Displays the button with a disclosure icon.
+             */
+            disclosure: {
+                type: [Boolean, String],
+                default: false,
+            },
+            /**
+             * Tells the browser to download the url instead of opening it. Provides a hint for the downloaded filename
+             * if it is a string value
+             */
+            download: {
+                type: [Boolean, String],
+                default: false,
+            },
+            /**
+             * Forces url to open in a new tab
+             */
+            external: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Allows the button to grow to the width of its container
+             */
+            fullWidth: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * A destination to link to, rendered in the href attribute of a link
+             */
+            href: {
+                type: String,
+                default: undefined,
+            },
+            /**
+             * Icon to display to the left of the button content
+             * for available icon list.
+             */
+            icon: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Check if button is connected or not
+             */
+            isConnectedDisclosure: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * A unique identifier for the button
+             */
+            id: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Replaces button text with a spinner while a background action is being performed
+             */
+            loading: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Makes `plain` and `outline` Button colors
+             * (text, borders, icons) the same as the current text color.
+             *
+             * Also adds an underline to `plain` Buttons
+             */
+            monochrome: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops
+             */
+            outline: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Renders a button that looks like a link
+             */
+            plain: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Renders a button without border
+             */
+            plainAction: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Sets the button in a pressed state
+             */
+            pressed: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Provides extra visual weight and identifies
+             * the primary action in a set of buttons
+             */
+            primary: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Removes underline from button text (including on interaction) when `monochrome` and `plain` are true
+             */
+            removeUnderline: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * A valid WAI-ARIA role to define the semantic value of this element
+             */
+            role: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Changes the size of the button, giving it more or less padding
+             */
+            size: {
+                type: String,
+                default: 'medium',
+                ...StringValidator('size', Size),
+            },
+            /**
+             * Changes the inner text alignment of the button
+             */
+            textAlign: {
+                type: String,
+                default: null,
+                ...StringValidator('textAlign', TextAlign),
+            },
+            /**
+             * VueRouter link | link object
+             */
+            to: {
+                type: [String, Object],
+            },
+            /**
+             * Type of the button
+             */
+            type: {
+                type: String,
+                default: 'button',
+                ...StringValidator('type', Type),
+            },
+            /**
+             * Button content
+             */
+            value: {
+                type: [String, Number, Array],
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Button',
+                    this.primary && 'Polaris-Button--primary',
+                    this.outline && 'Polaris-Button--outline',
+                    this.destructive && 'Polaris-Button--destructive',
+                    !this.destructive && this.destructiveText && 'Polaris-Button--destructiveText',
+                    this.isDisabled && 'Polaris-Button--disabled',
+                    this.loading && 'Polaris-Button--loading',
+                    this.plain && 'Polaris-Button--plain',
+                    this.plainAction && 'Polaris-Button--plainAction',
+                    this.pressed && !this.disabled && !this.href && 'Polaris-Button--pressed',
+                    this.monochrome && 'Polaris-Button--monochrome',
+                    this.size && this.size !== DEFAULT_SIZE && `Polaris-Button--${variationName('size', this.size)}`,
+                    this.textAlign && `Polaris-Button--${variationName('textAlign', this.textAlign)}`,
+                    this.fullWidth && 'Polaris-Button--fullWidth',
+                    this.icon && this.hasNoChildren && 'Polaris-Button--iconOnly',
+                    this.isConnectedDisclosure && 'Polaris-Button--connectedDisclosure',
+                    this.monochrome && 'Polaris-Button--monochrome',
+                );
+            },
+            disclosureIconClassName() {
+                return classNames(
+                    'Polaris-Button__DisclosureIcon',
+                    this.disclosure === 'up' && 'Polaris-Button__DisclosureIconFacingUp',
+                    this.loading && 'Polaris-Button__Hidden',
+                );
+            },
+            childMarkupClassName() {
+                return classNames(
+                    'Polaris-Button__Text',
+                    this.removeUnderline && 'Polaris-Button--removeUnderline',
+                );
+            },
+            isDisabled() {
+                return this.disabled || this.loading;
+            },
+            hasNoChildren() {
+                return (this.$slots.default || []).length === 0;
+            },
+            spinnerColor() {
+                return this.primary || this.destructive ? 'white' : 'inkLightest';
+            },
+            iconClassName() {
+                return classNames(
+                    'Polaris-Button__Icon',
+                    this.loading && 'Polaris-Button--hidden'
+                );
+            },
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,76 @@
+<script>
+    import { classNames } from '../../utilities/css';
+    import ComponentHelpers from '../../ComponentHelpers';
+    import { PButtonGroupItem } from '../../components/PButtonGroup/components/PButtonGroupItem';
+
+    const Spacing = 'extraTight' | 'tight' | 'loose';
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Button group displays multiple related actions stacked or in a horizontal row to help with arrangement
+     *  and spacing.</h4>
+     */
+    export default {
+        name: 'PButtonGroup',
+        components: {
+            PButtonGroupItem,
+        },
+        props: {
+            /**
+             * Remove top left and right border radius
+             */
+            segmented: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Buttons will stretch/shrink to occupy the full width
+             */
+            fullWidth: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Remove top left and right border radius
+             */
+            connectedTop: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Remove top left and right border radius
+             */
+            spacing: {
+                type: [String, Spacing],
+                default: null,
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-ButtonGroup',
+                    this.segmented && 'Polaris-ButtonGroup--segmented',
+                    this.fullWidth && 'Polaris-ButtonGroup--fullWidth',
+                    this.connectedTop && 'Polaris-ButtonGroup--connectedTop',
+                    this.spacing && `Polaris-ButtonGroup--${this.spacing}`,
+                );
+            },
+        },
+        render(createElement) {
+            return createElement('div', {
+                    class: this.className,
+                    attrs: {
+                        'data-buttongroup-segmented': this.segmented,
+                        'data-buttongroup-full-width': this.fullWidth,
+                        'data-buttongroup-connected-top': this.connectedTop,
+                    },
+                },
+                ComponentHelpers.wrapNodesWithComponent(
+                    createElement,
+                    this.$slots.default || [], PButtonGroupItem
+                ),
+            );
+        },
+    }
+</script>

package/src/components/polaris-vue/src/components/PButtonGroup/components/PButtonGroupItem/PButtonGroupItem.vue

@@ -0,0 +1,11 @@
+<template functional>
+    <div class="Polaris-ButtonGroup__Item">
+        <slot/>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PButtonGroupItem',
+    }
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+    <p class="Polaris-Caption" :id="id">
+        <!-- @slot Add content to use as a graph label or timestamp -->
+        <slot/>
+    </p>
+</template>
+
+<script>
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Caption text size is smaller than the recommended size for general reading. On web, it should be
+     *  used only in a graph or as a timestamp for a list item. On Android and iOS, it can also be used as help text or
+     *  as other kinds of secondary text for list items.</h4>
+     */
+    export default {
+      name: 'PCaption',
+      props: {
+        /**
+         * Id for the element
+         */
+        id: {
+          type: [String, Number],
+          default: null
+        }
+      },
+    }
+</script>

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

@@ -0,0 +1,118 @@
+<template>
+    <div :class="className">
+        <template
+            v-if="$slots.hasOwnProperty('title') || title || $slots.hasOwnProperty('short_description') || shortDescription">
+            <PCardHeader :actions="actions">
+                <!-- @slot Title content for the card -->
+                <slot slot="title" name="title" v-if="$slots.hasOwnProperty('title') || title">
+                    <PHeading>{{ title }}</PHeading>
+                </slot>
+                <!-- @slot Short Description content for the card -->
+                <slot slot="short_description" name="short_description"
+                      v-if="$slots.hasOwnProperty('short_description') || shortDescription">
+                    <PCaption>{{ shortDescription }}</PCaption>
+                </slot>
+                <template slot="children" v-if="$slots.hasOwnProperty('children')">
+                    <!-- @slot Inner content of the card -->
+                    <slot name="children"/>
+                </template>
+            </PCardHeader>
+        </template>
+
+        <template v-if="$slots.hasOwnProperty('default')">
+            <template v-if="sectioned">
+                <PCardSection>
+                    <!-- @slot Body content for the card -->
+                    <slot name="default"/>
+                </PCardSection>
+            </template>
+            <template v-else>
+                <!-- @slot Body content for the card -->
+                <slot name="default"/>
+            </template>
+        </template>
+        <div v-else>
+            <slot/>
+        </div>
+
+        <template v-if="$slots.hasOwnProperty('footer')">
+            <PCardFooter>
+                <!-- @slot Footer content for the card -->
+                <slot name="footer"/>
+            </PCardFooter>
+        </template>
+    </div>
+</template>
+
+<script>
+    import { classNames } from '../../utilities/css';
+    import { PCardHeader } from '../../components/PCard/components/PCardHeader';
+    import { PCardSection } from '../../components/PCard/components/PCardSection';
+    import { PCardFooter } from '../../components/PCard/components/PCardFooter';
+    import { PHeading } from '../../components/PHeading';
+    import { PCaption } from '../../components/PCaption';
+    import { PButtonGroup } from '../../components/PButtonGroup';
+    import { PLink } from '../../components/PLink';
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Cards are used to group similar concepts and tasks together to make Shopify easier for merchants to
+     *  scan, read, and get things done.</h4>
+     */
+    export default {
+        name: 'PCard',
+        components: {
+            PCardFooter, PCardHeader, PCardSection, PHeading, PCaption, PButtonGroup, PLink,
+        },
+        props: {
+            /**
+             * Title content for the card. **Deprecated** Actions will be removed on future releases,
+             * use PCardHeader instead props.
+             */
+            title: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Card description. **Deprecated** ShortDescription will be removed on future releases,
+             * use PCardHeader instead props.
+             */
+            shortDescription: {
+                type: String,
+                default: null,
+            },
+            /**
+             * A less prominent card
+             */
+            subdued: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Auto wrap content in section
+             */
+            sectioned: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Actions for Header. **Deprecated** Actions will be removed on future releases,
+             * use PCardHeader instead props.
+             */
+            actions: {
+                type: [Array, String],
+                default: null,
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Card',
+                    this.subdued && 'Polaris-Card__Section--subdued',
+                );
+            },
+        },
+    }
+</script>
+

package/src/components/polaris-vue/src/components/PCard/components/PCardFooter/PCardFooter.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="Polaris-Card__Footer">
+        <slot/>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'PCardFooter',
+    }
+</script>

package/src/components/polaris-vue/src/components/PCard/components/PCardHeader/PCardHeader.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="Polaris-Card__Header">
+        <PStack alignment="baseline">
+            <PStackItem fill>
+                <slot name="title">
+                    <PHeading>{{ title }}</PHeading>
+                </slot>
+            </PStackItem>
+            <PStackItem>
+                <PButtonGroup v-if="actions" connectedTop>
+                    <component
+                        v-for="(action, key) in actions" :key="key"
+                        :is="(action.to ? 'PLink' : 'PButton')"
+                        plain
+                        :href="action.url ? action.url : null"
+                        :to="action.to ? action.to : null"
+                        v-on="action.onAction ? { click: action.onAction } : {}"
+                    >
+                        {{ action.content }}
+                    </component>
+                </PButtonGroup>
+            </PStackItem>
+            <PStackItem v-if="$slots.hasOwnProperty('children')">
+                <slot name="children"/>
+            </PStackItem>
+        </PStack>
+        <PStack>
+            <PStackItem>
+        <span class="Polaris-Card__TagLine">
+            <template>
+              <slot name="short_description">
+                {{ shortDescription }}
+              </slot>
+            </template>
+        </span>
+            </PStackItem>
+        </PStack>
+    </div>
+</template>
+
+<script>
+    import { PStack } from '../../../../components/PStack';
+    import { PStackItem } from '../../../../components/PStack/components/PStackItem';
+    import { PHeading } from '../../../../components/PHeading';
+    import { PButtonGroup } from '../../../../components/PButtonGroup';
+    import { PButton } from '../../../../components/PButton';
+    import { PLink } from '../../../../components/PLink';
+
+    export default {
+        name: 'PCardHeader',
+        components: {
+            PStack, PStackItem, PHeading, PButtonGroup, PButton, PLink,
+        },
+        props: {
+            title: {
+                type: String,
+                default: null,
+            },
+            shortDescription: {
+                type: String,
+                default: null,
+            },
+            actions: {
+                type: [Array, String],
+                default: null,
+            },
+        },
+    }
+</script>