@hulkapps/app-manager-vue 1.0.2 → 2.0.0

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

@@ -0,0 +1,41 @@
+<template>
+    <div class="Polaris-Labelled__Error">
+        <div id="PolarisTextField6Error" class="Polaris-InlineError">
+            <div class="Polaris-InlineError__Icon">
+                <PIcon source="AlertMinor"/>
+            </div>
+            {{ error }}
+        </div>
+    </div>
+</template>
+
+<script>
+    import { PIcon } from '../../components/PIcon';
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Field errors are brief, in-context messages that tell merchants something went wrong with a single
+     *  or group of inputs in a form. Use field errors to help merchants understand why a form input may not be valid and
+     *  how to fix it.</h4>
+     */
+    export default {
+        name: 'PFieldError',
+        components: {
+            PIcon,
+        },
+        props: {
+            /**
+             * Content briefly explaining how to resolve the invalid form field input
+             */
+            error: {
+                type: String,
+                default: null,
+            },
+        },
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,252 @@
+<template>
+    <div>
+        <div class="Polaris-Filters">
+            <div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
+                <div class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right">
+                    <PFilterItemWrapper position="center" v-if="!hideQueryField">
+                        <PTextField
+                            id="Polaris-Input-Filter"
+                            connected
+                            labelHidden
+                            showPrefix
+                            showClearButton
+                            :placeholder="queryPlaceholder || resourceTitle || resource"
+                            @input="handleQueryChange"
+                            @blur="handleQueryBlur"
+                            @focus="handleQueryFocus"
+                            :value="queryValue || inputFilter"
+                            :autoFocus="focused"
+                            :label="queryPlaceholder || resourceTitle || resource"
+                            clearable
+                            :disabled="disabled"
+                            v-on="$listeners"
+                        >
+                            <PIcon source="SearchMinor" slot="prefix"/>
+                        </PTextField>
+                    </PFilterItemWrapper>
+                    <PFilterItemWrapper v-if="$slots.hasOwnProperty('default')" position="right">
+                        <!-- @slot The content to display inline with the controls -->
+                        <slot/>
+                    </PFilterItemWrapper>
+                </div>
+                <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
+                    <!-- @slot Add extra elements -->
+                    <slot name="auxiliaryContainer"/>
+                </div>
+            </div>
+            <div class="Polaris-Filters__TagsContainer" v-if="!hideTags">
+                <PTag v-for="(filter, key) in appliedFilters" :key="key" v-on="$listeners" removable :tag="filter"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { PTextField } from '../../components/PTextField';
+    import { PIcon } from '../../components/PIcon';
+    import { PTag } from '../../components/PTag';
+    import { PFilterItemWrapper } from '../../components/PFilter/components/PFilterItemWrapper';
+    import ObjectValidator from '../../utilities/validators/ObjectValidator';
+    import ArrayValidator from '../../utilities/validators/ArrayValidator';
+
+    const ResourceNameInterface = {
+        singular: {
+            type: String,
+            required: true,
+        },
+        plural: {
+            type: String,
+            required: true,
+        },
+    }
+
+    export const FilterInterface = {
+        /** A unique key used to identify the filter */
+        key: {
+            type: String,
+            required: true,
+        },
+        /** The label for the filter */
+        label: {
+            type: String,
+            required: true,
+        },
+        /** The markup for the given filter */
+        filter: {
+            type: String,
+            required: true,
+        },
+        /** Whether or not the filter should have a shortcut popover displayed */
+        shortcut: Boolean,
+        /** Whether or not the filter is disabled */
+        disabled: Boolean,
+        /**
+         * @default false
+         * Whether or not the clear button is displayed
+         */
+        hideClearButton: Boolean,
+    }
+
+    /**
+     * <br/>
+     * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+     *  sans-serif;">Filter is a composite component that filters the items of a list or table.</h4>
+     */
+    export default {
+        name: 'PFilter',
+        components: {
+            PTextField, PIcon, PTag, PFilterItemWrapper,
+        },
+        props: {
+            /**
+             * Title or placeholder for the element
+             */
+            resourceName: {
+                type: Object,
+                default: () => ({}),
+                ...ObjectValidator('resourceName', ResourceNameInterface),
+            },
+            /**
+             * Title or placeholder for the element. **Deprecated** ResourceTitle will be removed in version 4.0.0
+             */
+            resourceTitle: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Add default value to filter
+             */
+            inputFilter: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Applied filters which are rendered as tags. The remove callback is called with respective key
+             */
+            appliedFilters: {
+                type: Array,
+                default: () => ([]),
+            },
+            /**
+             * Currently entered text in the query field
+             */
+            queryValue: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Placeholder text for the query field
+             */
+            queryPlaceholder: {
+                type: String,
+                default: null,
+            },
+            /**
+             * Whether the query field is focused
+             */
+            focused: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Available filters added to the sheet. Shortcut filters are exposed outside of the sheet.
+             */
+            filters: {
+                type: Array,
+                default: () => ([]),
+                ...ArrayValidator('filters', FilterInterface),
+            },
+            /**
+             * Disable all filters
+             */
+            disabled: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Additional hint text to display below the filters
+             */
+            helpText: {
+                type: String,
+                default: null
+            },
+            /**
+             * Hide tags for applied filters
+             */
+            hideTags: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Hide the query field
+             */
+            hideQueryField: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        data() {
+            return {
+                appliedFiltersCount: this.appliedFilters ? this.appliedFilters.length : 0,
+            };
+        },
+        computed: {
+          prefix() {
+            if(this.resourceName.plural) {
+              return `${this.resourceName.plural.toLowerCase()}`;
+            } else {
+              return this.resourceName.plural;
+            }
+          },
+          resource() {
+            const resourceName = this.resourceName;
+            return resourceName.plural ? 'Filter ' + resourceName.plural.toLowerCase() :
+                (resourceName.singular ? 'Filter ' + resourceName.singular.toLowerCase() : '');
+          },
+        },
+        methods: {
+            handleQueryChange(queryValue) {
+                /**
+                 * Callback when the query field is changed
+                 */
+                this.$emit('queryChange', queryValue);
+            },
+            handleQueryClear() {
+                /**
+                 * Callback when the clear button is triggered
+                 */
+                this.$emit('queryClear');
+            },
+            handleQueryClearAll() {
+                /**
+                 * Callback when the reset all button is pressed
+                 */
+                this.$emit('queryClearAll');
+            },
+            handleQueryBlur() {
+                /**
+                 * Callback when the query field is blurred
+                 */
+                this.$emit('queryBlur');
+            },
+            handleQueryFocus() {
+                /**
+                 * Callback when the query field is focused
+                 */
+                this.$emit('queryFocus');
+            },
+        },
+        mounted() {
+            if (this.resourceTitle != null) {
+                // tslint:disable-next-line:no-console
+                console.error('Deprecation Notice: `resourceTitle` will be removed in version 4.0.0, use `resourceName` ' +
+                    'instead.');
+            }
+
+            if (this.inputFilter != null) {
+                // tslint:disable-next-line:no-console
+                console.error('Deprecation Notice: `inputFilter` will be removed in version 4.0.0, use `queryValue` instead.');
+            }
+        }
+    }
+</script>

package/src/components/polaris-vue/src/components/PFilter/components/PFilterItem/PFilterItem.vue

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

package/src/components/polaris-vue/src/components/PFilter/components/PFilterItemWrapper/PFilterItemWrapper.vue

@@ -0,0 +1,32 @@
+<script>
+    import { classNames } from '../../../../utilities/css';
+    import ComponentHelpers from '../../../../ComponentHelpers';
+    import { PFilterItem } from '../../../../components/PFilter/components/PFilterItem';
+
+    export default {
+        name: 'PFilterItemWrapper',
+        props: {
+            position: {
+                type: String,
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    this.position === 'center' && 'Polaris-Filters-ConnectedFilterControl__CenterContainer',
+                    this.position === 'right' && 'Polaris-Filters-ConnectedFilterControl__RightContainer',
+                );
+            },
+        },
+        render(createElement) {
+            return createElement('div', {
+                    class: this.className,
+                }, ComponentHelpers.wrapNodesWithComponent(
+                    createElement,
+                    this.$slots.default,
+                    PFilterItem
+                ),
+            );
+        },
+    }
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <component :is="element" class="Polaris-Heading">
+    <!-- @slot The content to display inside the heading -->
+    <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;">Headings are used as the titles of each major section of a page in the interface. For example,
+ *  <a href="https://polaris-vue.hulkapps.com/?path=/docs/structure-card--card">card components</a>
+ *  generally use headings as their title.</h4>
+ */
+export default {
+  name: 'PHeading',
+  props: {
+    /**
+     * The element name to use for the heading
+     */
+    element: {
+      type: String,
+      default: 'h2',
+     ...StringValidator('element', HeadingTagName)
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,121 @@
+<template>
+  <span :class="className" :aria-label="accessibilityLabel" @click="handleClick" :style="clickable">
+    <div v-if="sourceType === 'placeholder'" class="Polaris-Icon__Placeholder"/>
+    <img
+        v-else-if="sourceType === 'external'"
+        class="Polaris-Icon__Img"
+        :src="`data:image/svg+xml;utf8,${encodedSource}`"
+        alt=""
+        aria-hidden="true"
+    />
+    <div
+        v-else
+        v-html="enhancedSource"
+    />
+  </span>
+</template>
+
+<script>
+    import { DeprecatedIcons } from './index';
+    import * as Icon from '../../assets/shopify-polaris-icons';
+    import { classNames, variationName } from '../../utilities/css';
+    import { encode as encodeSVG } from '../../utilities/svg';
+    import StringValidator from '../../utilities/validators/StringValidator';
+
+    const Color = ['base', 'subdued', 'critical', 'interactive', 'warning', 'highlight', 'success', 'primary', null, ''];
+
+    export default {
+        name: 'PIcon',
+        props: {
+            /**
+             * Icon to display
+             * @see https://polaris-icons.shopify.com/?icon=AbandonedCartMajor available icon list.
+             */
+            source: {
+                type: String,
+                default: null
+            },
+
+            /**
+             * Icon color
+             */
+            color: {
+                type: String,
+                default: null,
+                ...StringValidator('color', Color),
+            },
+
+            /**
+             * Show a backdrop behind the icon
+             */
+            backdrop: {
+                type: Boolean,
+                default: false
+            },
+
+            /**
+             * Descriptive text to be read to screenreaders
+             */
+            accessibilityLabel: {
+                type: String,
+                default: null
+            }
+        },
+        data() {
+            return {
+                clickable: {}
+            }
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Icon',
+                    this.color && (typeof this.color === 'string') && `Polaris-Icon--${variationName('color', this.color)}`,
+                    this.color && 'Polaris-Icon--applyColor',
+                    this.backdrop && 'Polaris-Icon--hasBackdrop',
+                );
+            },
+            encodedSource() {
+                return encodeSVG(this.source);
+            },
+            sourceType() {
+                if (this.source === 'function' || Object.keys(Icon).filter((icon) => icon === this.source).length > 0) {
+                    return 'function';
+                } else if (this.source === 'placeholder') {
+                    return 'placeholder';
+                } else {
+                    return 'external';
+                }
+            },
+            enhancedSource() {
+                if (DeprecatedIcons.indexOf(this.source) > -1) {
+                    // tslint:disable-next-line:no-console
+                    console.error(this.source + '` this icon has been removed, please use new ' +
+                        'instead of this. Refer this link to get updated icons ' +
+                        'https://polaris-vue.hulkapps.com/?path=/story/images-icons-icon--icon');
+                }
+
+                const sourceIcon = Icon[this.source];
+                if (!sourceIcon) {
+                    return this.source.replace('<svg', '<svg class="Polaris-Icon__Svg"');
+                }
+                return sourceIcon.replace('<svg', '<svg class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"');
+            }
+        },
+        methods: {
+            handleClick() {
+                /**
+                 * Handle click event
+                 */
+                this.$emit('click', event);
+            }
+        },
+        mounted() {
+            if (this.$listeners.click) {
+                this.clickable = {
+                    cursor: 'pointer',
+                };
+            }
+        }
+    }
+</script>