@hulkapps/app-manager-vue 1.0.0 → 2.0.0

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

@@ -0,0 +1,54 @@
+<template>
+    <div :class="className">
+        <div v-if="title || $slots.hasOwnProperty('title')" class="Polaris-Card__SectionHeader">
+            <slot name="title">
+                <PSubheading v-bind="$attrs">
+                    {{ title }}
+                </PSubheading>
+            </slot>
+        </div>
+        <!-- @slot Body of Card section -->
+        <slot/>
+    </div>
+</template>
+
+<script>
+    import { classNames } from '../../../../utilities/css';
+    import { PSubheading } from '../../../../components/PSubheading';
+
+    export default {
+        name: 'PCardSection',
+        components: {
+            PSubheading,
+        },
+        props: {
+            /**
+             * Title content for the card section
+             */
+            title: {
+                type: String,
+            },
+            /**
+             * Title content for the card section
+             */
+            subdued: {
+                type: Boolean,
+            },
+            /**
+             * Card will stretch/shrink to occupy the full width
+             */
+            fullWidth: {
+                type: Boolean,
+            },
+        },
+        computed: {
+            className() {
+                return classNames(
+                    'Polaris-Card__Section',
+                    this.subdued && 'Polaris-Card__Section--subdued',
+                    this.fullWidth && 'Polaris-Card__Section--fullWidth',
+                );
+            },
+        },
+    }
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+  <div class="Polaris-Card__Subsection">
+    <!-- @slot Body of Card subsection -->
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'PCardSubsection',
+}
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="Polaris-Connected">
+    <PConnectedItem
+      v-if="$slots.left || left"
+      position="Left">
+      <slot name="left">{{ left }}</slot>
+    </PConnectedItem>
+
+    <PConnectedItem position="Primary">
+      <slot v-if="!$slots.children">
+        {{ children }}
+      </slot>
+      <slot name="children"></slot>
+    </PConnectedItem>
+
+    <PConnectedItem
+      v-if="$slots.right || right"
+      position="Right">
+      <slot name="right">{{ right }}</slot>
+    </PConnectedItem>
+  </div>
+</template>
+
+<script>
+import { PConnectedItem } from '../../components/PConnected/components/PConnectedItem';
+
+export default {
+  name: 'PConnected',
+  components: {
+    PConnectedItem,
+  },
+  props: {
+    left: {
+      type: String,
+    },
+    right: {
+      type: String,
+    },
+    children: {
+      type: String,
+    },
+  }
+}
+</script>

package/src/components/polaris-vue/src/components/PConnected/components/PConnectedItem/PConnectedItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <div @blur="focused = false"
+       @focus="focused = true"
+       :class="className">
+    <slot v-if="!$slots.children">{{ children }}</slot>
+    <slot name="children"></slot>
+  </div>
+</template>
+
+<script>
+  import { classNames } from '../../../../utilities/css';
+  import StringValidator from '../../../../utilities/validators/StringValidator';
+
+  const Position = ['Left', 'Primary', 'Right'];
+
+  export default {
+    name: 'PConnectedItem',
+    props: {
+      position: {
+        type: String,
+        ...StringValidator('position', Position)
+      },
+      children: {
+        type: String,
+      },
+      focused: {
+        type: Boolean,
+      },
+    },
+    computed: {
+      className() {
+        return classNames(
+            'Polaris-Connected__Item',
+            this.focused && 'Polaris-Connected__Item--focused',
+            this.position === 'Primary' && 'Polaris-Connected__Item--primary',
+            this.position !== 'Primary' && 'Polaris-Connected__Item--connection',
+        );
+      }
+    }
+  }
+</script>