Fix: page sub components condition to fit with Shopify examples

juzser · juzser · commit 98651e948613 · 2022-03-31T23:44:56.000+07:00
diff --git a/src/components/ActionMenu/ActionMenu.vue b/src/components/ActionMenu/ActionMenu.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 div(
-  v-if="actions && groups && actions.length && groups.length",
+  v-if="(actions && actions.length) || (groups && groups.length)",
   :class="actionMenuClassNames",
 )
   RollupActions(
diff --git a/src/components/ActionMenu/components/MenuGroup/MenuGroup.vue b/src/components/ActionMenu/components/MenuGroup/MenuGroup.vue
@@ -8,7 +8,7 @@ Popover(
 )
   template(#activator)
     SecondaryAction(
-      disclosure,
+      :disclosure="true",
       :icon="icon",
       :accessibilityLabel="accessibilityLabel",
       @click="handleOpen",
diff --git a/src/components/ActionMenu/components/RollupActions/RollupActions.vue b/src/components/ActionMenu/components/RollupActions/RollupActions.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 Popover(
-  v-if="items?.length && sections?.length",
+  v-if="items?.length || sections?.length",
   :active="rollupOpen",
   preferredAlignment="right",
   @close="toggleRollupOpen",
diff --git a/src/components/Page/components/Header/Header.vue b/src/components/Page/components/Header/Header.vue
@@ -11,17 +11,17 @@ HeaderWrapper(v-bind="props")
     ActionMenu(v-bind="actionMenuProps")
       slot(name="secondaryActions")
     PrimaryAction(
-      v-if="!isNavigationCollapsed && !conditionDesktopCompact",
+      v-if="(slots.primaryAction || props.primaryAction) && !isNavigationCollapsed && !conditionDesktopCompact",
       v-bind="primaryActionProps",
     )
       slot(name="primaryAction")
 
   template(#slot4, v-if="conditionSlot4")
     PrimaryAction(
-      v-if="isNavigationCollapsed || conditionDesktopCompact",
+      v-if="(slots.primaryAction || props.primaryAction) && (isNavigationCollapsed || conditionDesktopCompact)",
       v-bind="primaryActionProps",
     )
-      slot(name="primaryAction", v-if="slots.primaryAction")
+      slot(name="primaryAction")
     Pagination(
       v-if="!isNavigationCollapsed && !conditionDesktopCompact",
       :pagination="pagination",
@@ -110,8 +110,8 @@ const additionalMetadataProps = computed(() => {
 
 const conditionMobileCompact = computed(() => {
   return isNavigationCollapsed
-    && (props.breadcrumbs && props.breadcrumbs.length > 0)
-    && props.title != null
+    && (!props.breadcrumbs || !props.breadcrumbs.length)
+    && props.title
     && props.title.length <= REALLY_SHORT_TITLE
 });
 
diff --git a/src/components/Page/components/Header/HeaderWrapper.vue b/src/components/Page/components/Header/HeaderWrapper.vue
@@ -1,20 +1,25 @@
 <template lang="pug">
 div(:class="headerClassNames")
-  template(v-if="slots.slot1 || slots.slot2 || slots.slot3 || slots.slot4")
+  template(v-if="hasSlot1 || hasSlot2 || hasSlot3 || hasSlot4")
     div(:class="styles.Row")
       slot(name="slot1")
       slot(name="slot2")
-      template(v-if="slots.slot3 || slots.slot4")
+      template(v-if="hasSlot3 || hasSlot4")
         div(:class="styles.RightAlign")
-          div(v-if="slots.slot3", :class="styles.Actions")
+          div(
+            v-if="hasSlot3 && hasSlot4",
+            :class="styles.Actions"
+          )
             slot(name="slot3")
-          div(v-if="slots.slot4", :class="styles.Actions")
             slot(name="slot4")
-  template(v-if="slots.slot5 || slots.slot6")
+          template(v-else)
+            slot(name="slot3")
+            slot(name="slot4")
+  template(v-if="hasSlot5 || hasSlot6")
     div(:class="styles.Row")
       div(:class="styles.LeftAlign")
         slot(name="slot5")
-      template(v-if="slots.slot6")
+      template(v-if="hasSlot6")
         div(:class="styles.RightAlign")
           slot(name="slot6")
 </template>
@@ -30,6 +35,7 @@ import type { MenuActionDescriptor } from '@/utilities/interface';
 import type { MenuGroupDescriptor } from '@/components/ActionMenu/components/MenuGroup/utils';
 import { UseMediaQuery } from '@/utilities/media-query';
 import type { ActionMenuProps } from '@/components/ActionMenu/utils';
+import hasSlot from '@/utilities/has-slot';
 
 const LONG_TITLE = 34;
 
@@ -101,17 +107,43 @@ const hasActionMenuMarkup = computed(() => {
   || hasGroupsWithActions(props.actionGroups))
 });
 
-const headerClassNames = classNames(
-  styles.Header,
-  isSingleRow.value && styles.isSingleRow,
-  props.titleHidden && styles.titleHidden,
-  hasNavigationMarkup.value && styles.hasNavigation,
-  hasActionMenuMarkup.value && styles.hasActionMenu,
-  isNavigationCollapsed && styles.mobileView,
-  (!props.breadcrumbs || !props.breadcrumbs.length) && styles.noBreadcrumbs,
-  props.title && props.title.length < LONG_TITLE && styles.mediumTitle,
-  props.title && props.title.length > LONG_TITLE && styles.longTitle,
-);
+const headerClassNames = computed(() => {
+  return classNames(
+    styles.Header,
+    isSingleRow.value && styles.isSingleRow,
+    props.titleHidden && styles.titleHidden,
+    hasNavigationMarkup.value && styles.hasNavigation,
+    hasActionMenuMarkup.value && styles.hasActionMenu,
+    isNavigationCollapsed && styles.mobileView,
+    (!props.breadcrumbs || !props.breadcrumbs.length) && styles.noBreadcrumbs,
+    props.title && props.title.length < LONG_TITLE && styles.mediumTitle,
+    props.title && props.title.length > LONG_TITLE && styles.longTitle,
+  );
+});
+
+const hasSlot1 = computed(() => {
+  return hasSlot(slots.slot1);
+});
+
+const hasSlot2 = computed(() => {
+  return hasSlot(slots.slot2);
+});
+
+const hasSlot3 = computed(() => {
+  return hasSlot(slots.slot3);
+});
+
+const hasSlot4 = computed(() => {
+  return hasSlot(slots.slot4);
+});
+
+const hasSlot5 = computed(() => {
+  return hasSlot(slots.slot5);
+});
+
+const hasSlot6 = computed(() => {
+  return hasSlot(slots.slot6);
+});
 
 function hasGroupsWithActions(groups: ActionMenuProps['groups'] = []) {
   return groups.length === 0
diff --git a/src/components/Page/components/Header/children/ActionMenu.vue b/src/components/Page/components/Header/children/ActionMenu.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-slot(v-if="hasSlot")
+slot(v-if="hasSlot(slots.default)")
 ActionMenu(
   v-else-if="(secondaryActions && secondaryActions.length > 0) || hasGroupsWithActions(actionGroups)",
   :actions="secondaryActions",
@@ -16,6 +16,7 @@ import type { MenuActionDescriptor } from '@/utilities/interface';
 import type { ActionMenuProps } from '@/components/ActionMenu/utils';
 import type { MenuGroupDescriptor } from '@/components/ActionMenu/components/MenuGroup/utils';
 import { UseMediaQuery } from '@/utilities/media-query';
+import hasSlot from '@/utilities/has-slot';
 
 const props = defineProps<{
   title?: string;
@@ -28,16 +29,6 @@ const slots = useSlots();
 const { useMediaQuery } = UseMediaQuery();
 const { isNavigationCollapsed } = useMediaQuery();
 
-const hasSlot = computed(() => {
-  if (slots.default && slots.default()[0].children) {
-    if (typeof slots.default()[0].children === 'string') {
-      return slots.default()[0].children !== 'v-if';
-    }
-    return Array.isArray(slots.default()[0].children) && (slots.default()[0].children as []).length > 0;
-  }
-  return true;
-});
-
 function hasGroupsWithActions(groups: ActionMenuProps['groups'] = []) {
   return groups.length === 0
     ? false
diff --git a/src/components/Page/components/Header/children/PrimaryAction.vue b/src/components/Page/components/Header/children/PrimaryAction.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 div(:class="styles.PrimaryActionWrapper")
-  slot(v-if="hasSlot")
+  slot(v-if="hasSlot(slots.default)")
   ButtonFrom(
     v-else,
     :action="iconOnly",
@@ -17,6 +17,7 @@ import { ButtonFrom } from '@/components/Button';
 import styles from '@/classes/Page-Header.json';
 import { UseMediaQuery } from '@/utilities/media-query';
 import type { IconSource } from '@/utilities/type';
+import hasSlot from '@/utilities/has-slot';
 
 interface PrimaryActionProps {
   id?: string;
@@ -48,16 +49,6 @@ const iconOnly = computed(() => {
   return shouldShowIconOnly(isNavigationCollapsed, props);
 });
 
-const hasSlot = computed(() => {
-  if (slots.default && slots.default()[0].children) {
-    if (typeof slots.default()[0].children === 'string') {
-      return slots.default()[0].children !== 'v-if';
-    }
-    return Array.isArray(slots.default()[0].children) && (slots.default()[0].children as []).length > 0;
-  }
-  return true;
-});
-
 function shouldShowIconOnly(
   isMobile: boolean,
   action: PrimaryActionProps,
diff --git a/src/utilities/has-slot.ts b/src/utilities/has-slot.ts
@@ -0,0 +1,15 @@
+import type { Slot } from 'vue';
+
+export default function hasSlot(slot?: Slot) {
+  if (slot && slot()[0].children) {
+    if (typeof slot()[0].children === 'string') {
+      return slot()[0].children !== 'v-if';
+    }
+
+    if (Array.isArray(slot()[0].children)) {
+      return (slot()[0].children as []).length > 0;
+    }
+  }
+
+  return true;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<template lang="pug">`
`2`	`2`	`div(`
`3`		`- v-if="actions && groups && actions.length && groups.length",`
	`3`	`+ v-if="(actions && actions.length) \|\| (groups && groups.length)",`
`4`	`4`	`:class="actionMenuClassNames",`
`5`	`5`	`)`
`6`	`6`	`RollupActions(`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ Popover(`
`8`	`8`	`)`
`9`	`9`	`template(#activator)`
`10`	`10`	`SecondaryAction(`
`11`		`- disclosure,`
	`11`	`+ :disclosure="true",`
`12`	`12`	`:icon="icon",`
`13`	`13`	`:accessibilityLabel="accessibilityLabel",`
`14`	`14`	`@click="handleOpen",`