@hulkapps/app-manager-vue 1.0.1 → 2.0.1

package/src/components/polaris-vue/src/components/PDataTable/components/PDataTableCell/PDataTableCell.vue

@@ -0,0 +1,213 @@
+<template>
+    <th v-if="header" data-polaris-header-cell='true' :class="className" :width="width" scope='col'
+        :aria-sort="sortLabel">
+        <template v-if="sortable">
+            <button :class="headerClassName" @click="handleSortChange">
+        <span class="Polaris-DataTable__Icon">
+            <PIcon :source="source"></PIcon>
+        </span>
+                {{ content }}
+            </button>
+        </template>
+        <template v-else>
+            {{ content }}
+        </template>
+    </th>
+    <th v-else-if="firstColumn" scope="row" :class="className">
+        <template v-if="hasAction">
+            <PButton plain v-if="action && action.to" :to="action.to">{{ action.content }}</PButton>
+            <PLink v-if="action && (action.url || action.external)" :url="action.url" :external="action.external"
+                   :monochrome="action.monochrome">{{ action.content ? action.content : action.url }}
+            </PLink>
+            <PBadge v-if="badge" :status="badge.status" :progress="badge.progress">Badge{{ badge.content }}</PBadge>
+            <PToggle v-if="toggle" :checked="toggle.status" :value="toggle.id" @change="toggle.onAction"/>
+        </template>
+        <template v-else>
+            {{ content }}
+        </template>
+    </th>
+    <td v-else :class="className">
+        <template v-if="!hasActions">
+            <template v-if="hasAction">
+                <PButton plain v-if="action && action.to" :to="action.to">{{ action.content }}</PButton>
+                <PLink v-if="action && (action.url || action.external)" :url="action.url" :external="action.external"
+                       :monochrome="action.monochrome">{{ action.content ? action.content : action.url }}
+                </PLink>
+                <PBadge v-if="badge" :status="badge.status" :progress="badge.progress">{{ badge.content }}</PBadge>
+                <PToggle v-if="toggle" :checked="toggle.status" :value="toggle.id" @change="toggle.onAction"/>
+            </template>
+            <template v-else>
+                {{ content }}
+            </template>
+        </template>
+        <template v-else>
+            <PButtonGroup segmented>
+                <PButton v-for="(action, key) in actions" :key="key" v-bind="action" :primary="action.primary"
+                         :destructive="action.destructive" @click="action.onAction(value)">{{ action.content }}
+                </PButton>
+            </PButtonGroup>
+        </template>
+    </td>
+</template>
+<script>
+    import { classNames, variationName } from '../../../../utilities/css';
+    import { PIcon } from '../../../../components/PIcon';
+    import { PButton } from '../../../../components/PButton';
+    import { PButtonGroup } from '../../../../components/PButtonGroup';
+    import { PLink } from '../../../../components/PLink';
+    import { PToggle } from '../../../../components/PToggle';
+    import { PBadge } from '../../../../components/PBadge';
+    import ObjectValidator from '../../../../utilities/validators/ObjectValidator';
+    import StringValidator from '../../../../utilities/validators/StringValidator';
+
+    const SortDirection = ['ascending', 'descending', 'none'];
+    const VerticalAlign = ['top', 'bottom', 'middle', 'baseline'];
+    const Status = ['success', 'info', 'attention', 'warning', 'new', 'critical'];
+    const Progress = ['incomplete', 'partiallyComplete', 'complete'];
+    const Size = ['medium', 'small'];
+
+    const Sort = {
+        value: {
+            type: String,
+            required: true,
+        },
+        direction: {
+            type: String,
+            required: true,
+            expectedValues: SortDirection,
+        },
+    }
+
+    export default {
+        name: 'PDataTableCell',
+        components: {
+            PIcon, PButton, PButtonGroup, PLink, PToggle, PBadge,
+        },
+        props: {
+            content: {
+                type: [String, Number],
+            },
+            contentType: {
+                type: String,
+            },
+            value: {
+                type: [String, Number],
+            },
+            firstColumn: {
+                type: Boolean,
+            },
+            truncate: {
+                type: Boolean,
+            },
+            header: {
+                type: Boolean,
+            },
+            total: {
+                type: Boolean,
+            },
+            sortable: {
+                type: Boolean,
+            },
+            width: {
+                type: [String, Number],
+            },
+            sort: {
+                type: Object,
+                ...ObjectValidator('sort', Sort),
+            },
+            defaultSortDirection: {
+                type: String,
+                default: 'ascending',
+                ...StringValidator('defaultSortDirection', SortDirection),
+            },
+            totalInFooter: {
+                type: Boolean,
+            },
+            verticalAlign: {
+                type: String,
+                default: 'top',
+                ...StringValidator('verticalAlign', VerticalAlign),
+            },
+            actions: {
+                type: Array,
+                default: () => ([]),
+            },
+            action: {
+                type: Object,
+                default: () => ({}),
+            },
+            badge: {
+                type: Object,
+                default: () => ({}),
+            },
+            toggle: {
+                type: Object,
+                default: () => ({}),
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-DataTable__Cell',
+                    this.firstColumn && 'Polaris-DataTable__Cell--firstColumn',
+                    this.firstColumn && this.truncate && 'Polaris-DataTable__Cell--truncated',
+                    this.header && 'Polaris-DataTable__Cell--header',
+                    this.total && 'Polaris-DataTable__Cell--total',
+                    this.totalInFooter && 'Polaris-DataTable--cellTotalFooter',
+                    this.numeric && 'Polaris-DataTable__Cell--numeric',
+                    this.sorted && 'Polaris-DataTable__Cell--sorted ',
+                    this.sortable && 'Polaris-DataTable__Cell--sortable',
+                    this.verticalAlign && `Polaris-DataTable__Cell--${variationName('verticalAlign', this.verticalAlign)}`,
+                );
+            },
+            headerClassName() {
+                return classNames(
+                    'Polaris-DataTable__Heading',
+                    this.contentType === 'text' && 'Polaris-DataTable__Heading--left',
+                );
+            },
+            direction() {
+                return this.sorted && this.sort.direction ? this.sort.direction : this.defaultSortDirection;
+            },
+            source() {
+                return this.direction === 'descending' ? 'CaretDownMinor' : 'CaretUpMinor';
+            },
+            numeric() {
+                return this.contentType === 'numeric';
+            },
+            hasActions() {
+                return this.actions && this.actions.length > 0;
+            },
+            hasAction() {
+
+                return this.action || this.badge || this.toggle;
+            },
+            sorted() {
+                return this.sort && this.sort.value === this.value;
+            },
+            sortLabel() {
+                return this.sort && this.sort.value === this.value ? this.sort.direction : '';
+            },
+        },
+        methods: {
+            handleSortChange() {
+                const direction = this.sort.direction === 'ascending' ? 'descending' : 'ascending';
+                this.$emit('sort-changed', this.value, direction);
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    th:last-child {
+        text-align: right;
+    }
+
+    td:last-child {
+        text-align: right;
+    }
+
+    td:last-child > * {
+        float: right;
+    }
+</style>

package/src/components/polaris-vue/src/components/PDataTable/components/PDataTableCellNew/PDataTableCellNew.vue

@@ -0,0 +1,162 @@
+<template>
+    <th v-if="header" data-polaris-header-cell="true" :class="className" :width="width" scope="col"
+        :aria-sort="sortLabel">
+        <template v-if="sortable">
+            <button :class="headerClassName" @click="handleSortChange">
+        <span class="Polaris-DataTable__Icon">
+          <PIcon :source="source"/>
+        </span>
+                {{ content }}
+            </button>
+        </template>
+        <template v-else>
+            {{ content }}
+        </template>
+    </th>
+    <th v-else-if="firstColumn" scope="row" :class="className">
+        <slot :name="`item.${headerValue}`" :item="headerValue">
+            {{ value }}
+        </slot>
+    </th>
+    <td v-else :class="className">
+        <slot :name="`item.${headerValue}`" :item="headerValue">
+            {{ value }}
+        </slot>
+    </td>
+</template>
+
+<script>
+    import { classNames, variationName } from '../../../../utilities/css';
+    import { PIcon } from '../../../../components/PIcon';
+    import ObjectValidator from '../../../../utilities/validators/ObjectValidator';
+    import StringValidator from '../../../../utilities/validators/StringValidator';
+
+    const SortDirection = ['ascending', 'descending', 'none'];
+    const VerticalAlign = ['top', 'bottom', 'middle', 'baseline'];
+
+    const Sort = {
+        value: {
+            type: String,
+            required: true,
+        },
+        direction: {
+            type: String,
+            required: true,
+            expectedValues: SortDirection,
+        }
+    }
+
+    export default {
+        name: 'PDataTableCellNew',
+        components: {
+            PIcon,
+        },
+        props: {
+            header: {
+                type: Boolean,
+            },
+            content: {
+                type: [String, Number],
+            },
+            value: {
+                type: [String, Number, Boolean, Object, Array],
+            },
+            width: {
+                type: [String, Number],
+            },
+            sort: {
+                type: Object,
+                ...ObjectValidator('sort', Sort),
+            },
+            sortable: {
+                type: Boolean,
+                default: true,
+            },
+            defaultSortDirection: {
+                type: String,
+                default: 'ascending',
+                ...StringValidator('defaultSortDirection', SortDirection),
+            },
+            contentType: {
+                type: String,
+            },
+            firstColumn: {
+                type: Boolean,
+            },
+            truncate: {
+                type: Boolean,
+            },
+            verticalAlign: {
+                type: String,
+                default: 'top',
+                ...StringValidator('verticalAlign', VerticalAlign),
+            },
+            total: {
+                type: Boolean,
+            },
+            totalInFooter: {
+                type: Boolean,
+            },
+            headerValue: {
+                type: String,
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-DataTable__Cell',
+                    this.firstColumn && 'Polaris-DataTable__Cell--firstColumn',
+                    this.firstColumn && this.truncate && 'Polaris-DataTable__Cell--truncated',
+                    this.header && 'Polaris-DataTable__Cell--header',
+                    this.total && 'Polaris-DataTable__Cell--total',
+                    this.totalInFooter && 'Polaris-DataTable--cellTotalFooter',
+                    this.numeric && 'Polaris-DataTable__Cell--numeric',
+                    this.sorted && 'Polaris-DataTable__Cell--sorted ',
+                    this.sortable && 'Polaris-DataTable__Cell--sortable',
+                    this.verticalAlign && `Polaris-DataTable__Cell--${variationName('verticalAlign', this.verticalAlign)}`,
+                );
+            },
+            headerClassName() {
+                return classNames(
+                    'Polaris-DataTable__Heading',
+                    this.contentType === 'text' && 'Polaris-DataTable__Heading--left',
+                );
+            },
+            direction() {
+                return this.sorted && this.sort.direction ? this.sort.direction : this.defaultSortDirection;
+            },
+            source() {
+                return this.direction === 'descending' ? 'CaretDownMinor' : 'CaretUpMinor';
+            },
+            numeric() {
+                return this.contentType === 'numeric';
+            },
+            sorted() {
+                return this.sort && this.sort.value === this.value;
+            },
+            sortLabel() {
+                return this.sort && this.sort.value === this.value ? this.sort.direction : '';
+            },
+        },
+        methods: {
+            handleSortChange() {
+                const direction = this.sort.direction === 'ascending' ? 'descending' : 'ascending';
+                this.$emit('sort-changed', this.value, direction);
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    th:last-child {
+        text-align: right;
+    }
+
+    td:last-child {
+        text-align: right;
+    }
+
+    td:last-child > * {
+        float: right;
+    }
+</style>

package/src/components/polaris-vue/src/components/PDataTable/components/PDataTableCol/PDataTableCol.vue

@@ -0,0 +1,75 @@
+<template>
+    <th v-if="firstColumn" scope="row" :class="className">
+        <slot/>
+    </th>
+    <td v-else :class="className">
+        <slot/>
+    </td>
+</template>
+
+<script>
+    import { classNames, variationName } from '../../../../utilities/css';
+    import StringValidator from '../../../../utilities/validators/StringValidator';
+
+    const VerticalAlign = ['top', 'bottom', 'middle', 'baseline'];
+
+    export default {
+        name: 'PDataTableCol',
+        props: {
+            /**
+             * First Column of a table
+             */
+            firstColumn: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Truncate content in first column instead of wrapping
+             */
+            truncate: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Numeric column of a table
+             */
+            numeric: {
+                type: Boolean,
+                default: false,
+            },
+            /**
+             * Vertical alignment of content in the cells
+             */
+            verticalAlign: {
+                type: String,
+                default: 'top',
+                ...StringValidator('verticalAlign', VerticalAlign),
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-DataTable__Cell',
+                    this.firstColumn && 'Polaris-DataTable__Cell--firstColumn',
+                    this.firstColumn && this.truncate && 'Polaris-DataTable__Cell--truncated',
+                    this.numeric && 'Polaris-DataTable__Cell--numeric',
+                    this.verticalAlign && `Polaris-DataTable__Cell--${variationName('verticalAlign', this.verticalAlign)}`,
+                );
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    th:last-child {
+        text-align: right;
+    }
+
+    td:last-child {
+        text-align: right;
+    }
+
+    td:last-child > * {
+        float: right;
+    }
+</style>

package/src/components/polaris-vue/src/components/PDataTable/components/PDataTableRow/PDataTableRow.vue

@@ -0,0 +1,15 @@
+<template>
+  <tr class="Polaris-DataTable__TableRow">
+    <slot/>
+  </tr>
+</template>
+
+<script>
+  export default {
+      name: 'PDataTableRow',
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <span v-if="element === 'span'">
+    <slot />
+  </span>
+  <component v-else :is="element" :class="className">
+    <!-- @slot Content to display -->
+    <slot />
+  </component>
+</template>
+
+<script>
+import { classNames, variationName } from '../../utilities/css';
+import StringValidator from '../../utilities/validators/StringValidator';
+
+const Size = ['small', 'medium', 'large', 'extraLarge'];
+const HeadingTagName = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span'];
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Display styles make a bold visual statement. Use them to create impact when the main goal is visual
+ *  storytelling. For example, use display text to convince or reassure merchants such as in marketing content or to
+ *  capture attention during onboarding.</h4>
+ */
+
+export default {
+  name: 'PDisplayText',
+  props: {
+    /**
+     * Size of the text
+     */
+    size: {
+      type: String,
+      default: 'medium',
+      ...StringValidator('size', Size)
+    },
+
+    /**
+     * Element of text
+     */
+    element: {
+      type: String,
+      default: 'p',
+      ...StringValidator('element', HeadingTagName)
+    },
+  },
+  computed: {
+    className() {
+      return classNames(
+          'Polaris-DisplayText',
+          this.size && `Polaris-DisplayText--${variationName('size', this.size)}`,
+      );
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,154 @@
+<template>
+  <PCard>
+    <PCardSection>
+      <div :class="className">
+        <div class="Polaris-EmptyState__Section">
+          <div class="Polaris-EmptyState__DetailsContainer">
+            <div class="Polaris-EmptyState__Details">
+              <PTextContainer>
+                <PDisplayText size="small">
+                  <!-- @slot Heading Content -->
+                  <slot name="heading">
+                    {{ heading }}
+                  </slot>
+                </PDisplayText>
+                <div class="Polaris-EmptyState__Content">
+                  <!-- @slot Display the elements inside empty state -->
+                  <slot/>
+                </div>
+              </PTextContainer>
+              <div class="Polaris-EmptyState__Actions" v-if="hasAction">
+                <!-- @slot Actions Content -->
+                <slot name="actions">
+                  <PStack spacing="tight" distribution="center" alignment="center">
+                    <PStackItem v-if="Object.keys(primaryAction).length > 0">
+                      <PButton primary @click="primaryAction.onAction()">{{ primaryAction.content }}</PButton>
+                    </PStackItem>
+                    <PStackItem v-if="Object.keys(secondaryAction).length > 0">
+                      <PButton @click="secondaryAction.onAction()">{{ secondaryAction.content }}</PButton>
+                    </PStackItem>
+                  </PStack>
+                </slot>
+              </div>
+              <div class="Polaris-EmptyState__FooterContent">
+                <!-- @slot Footer Content -->
+                <slot name="footer"/>
+              </div>
+            </div>
+          </div>
+          <div class="Polaris-EmptyState__ImageContainer">
+            <!-- @slot Image Content -->
+            <slot name="image">
+              <PImage :source="image" class="Polaris-EmptyState__Image"/>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </PCardSection>
+  </PCard>
+</template>
+
+<script>
+import { classNames } from '../../utilities/css';
+import { PImage } from '../../components/PImage';
+import { PStack } from '../../components/PStack';
+import { PStackItem } from '../../components/PStack/components/PStackItem';
+import { PDisplayText } from '../../components/PDisplayText';
+import { PTextContainer } from '../../components/PTextContainer';
+import { PCard } from '../../components/PCard';
+import { PCardSection } from '../../components/PCard/components/PCardSection';
+import { PButton } from '../../components/PButton';
+import ObjectValidator from '../../utilities/validators/ObjectValidator';
+import { ComplexAction, DisableableAction, LoadableAction } from '../../types';
+
+/**
+ * <br/>
+ * <h4 style="font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue,
+ *  sans-serif;">Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity
+ *  to provide explanation or guidance to help merchants progress. The empty state component is intended for use when a
+ *  full page in the admin is empty, and not for individual elements or areas in the interface.</h4>
+ */
+export default {
+  name: 'PEmptyState',
+  components: {
+    PImage, PCard, PCardSection, PTextContainer, PDisplayText, PStack, PStackItem, PButton,
+  },
+  props: {
+    /**
+     * The empty state heading
+     */
+    heading: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Whether or not the content should span the full width of its container
+     */
+    fullWidth: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Whether or not to limit the image to the size of its container on large screens
+     */
+    imageContained: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * The path to the image to display.
+     * The image should have ~40px of white space above when empty state is used within a card,
+     * modal, or navigation component
+     */
+    image: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Primary action for empty state
+     */
+    primaryAction: {
+      type: Object,
+      default: () => ({}),
+      ...ObjectValidator('primaryAction', {
+        ...DisableableAction,
+        ...LoadableAction
+      })
+    },
+
+    /**
+     * Secondary action for empty state
+     */
+    secondaryAction: {
+      type: Object,
+      default: () => ({}),
+      ...ObjectValidator('secondaryAction', ComplexAction)
+    }
+  },
+  computed: {
+    className() {
+      return classNames(
+          'Polaris-EmptyState',
+          'Polaris-EmptyState--withinContentContainer',
+          this.fullWidth && 'Polaris-EmptyState--fullWidth',
+          this.imageContained && 'Polaris-EmptyState--imageContained',
+      );
+    },
+    hasAction() {
+      return this.primaryAction || this.secondaryAction;
+    }
+  },
+  methods: {
+    styleClass(name) {
+      if(typeof name === 'string') {
+        const finalStyleClasses = ['one', 'two', 'three', 'four', 'five', 'six'];
+        return name ? finalStyleClasses[name.charCodeAt(0) % finalStyleClasses.length] : finalStyleClasses[0];
+      }
+    }
+  }
+}
+</script>