Fix: import missing components to parent components

Author: juzser

src/components/ActionMenu/components/MenuGroup/MenuGroup.vue

@@ -39,6 +39,7 @@ import type {
   ActionListItemDescriptor,
   ActionListSection,
 } from '@/utilities/types';
+import { ActionList } from '@/components';
 import styles from '@polaris/components/ActionMenu/components/MenuGroup/MenuGroup.module.css';
 import { SecondaryAction } from '../SecondaryAction';
 
@@ -62,7 +63,7 @@ export interface MenuGroupProps {
   /** Whether or not the menu is disable */
   disabled?: boolean;
   /** Collection of sectioned action items */
-  sections?: readonly ActionListSection[];
+  sections?: ActionListSection[];
 }
 
 const props = defineProps<MenuGroupProps>();

src/components/ActionMenu/components/RollupActions/RollupActions.vue

@@ -24,6 +24,7 @@ Popover(
 <script setup lang="ts">
 import { ref } from 'vue';
 import type { ActionListItemDescriptor, ActionListSection } from '@/utilities/types';
+import { Popover, Button, ActionList } from '@/components';
 import MenuHorizontalIcon from '@icons/MenuHorizontalIcon.svg';
 import useI18n from '@/use/useI18n';
 import styles from '@polaris/components/ActionMenu/components/RollupActions/RollupActions.module.css';

src/components/ActionMenu/components/SecondaryAction/SecondaryAction.vue

@@ -33,6 +33,7 @@ import { classNames } from '@/utilities/css';
 import { useHasSlot } from '@/use/useHasSlot';
 import type { VueNode } from '@/utilities/types';
 import type { ButtonProps } from '@/components/Button/types';
+import { Button, Tooltip } from '@/components';
 import styles from '@polaris/components/ActionMenu/components/SecondaryAction/SecondaryAction.module.css';
 
 export interface SecondaryActionProps extends ButtonProps {

src/components/Banner/Banner.vue

@@ -21,6 +21,7 @@ import { computed, ref, provide, getCurrentInstance } from 'vue';
 import { classNames } from '@/utilities/css';
 import type { VueNode } from '@/utilities/types';
 import styles from '@polaris/components/Banner/Banner.module.css';
+import BannerLayout from './components/BannerLayout.vue';
 import type { BannerProps } from './types';
 import useWithinContentContext from './context';
 

src/components/Banner/components/BannerLayout.vue

@@ -47,6 +47,10 @@ template(v-else)
 import { computed, h, getCurrentInstance, resolveComponent } from 'vue';
 import styles from '@polaris/components/Banner/Banner.module.css';
 import useI18n from '@/use/useI18n';
+import { Text } from '@/components';
+import WithinContentContainerBanner from './WithinContentContainerBanner.vue';
+import InlineIconBanner from './InlineIconBanner.vue';
+import DefaultBanner from './DefaultBanner.vue';
 import type { VueNode } from '@/utilities/types';
 import { useHasSlot } from '@/use/useHasSlot';
 import XIcon from '@icons/XIcon.svg';
@@ -96,24 +100,24 @@ const sharedBannerProps = computed(() => {
   }
 });
 
-const bannerTitle = computed(() =>
-  props.title ? () => h(
+const bannerTitle = props.title
+  ? h(
     resolveComponent('Text'),
     { variant: 'headingSm', as: 'h2', breakWord: true },
     () => props.title,
-  ) : null,
-);
+  )
+  : undefined;
 
-const bannerIcon = computed(() =>
-  !props.hideIcon ? () => h(
+const bannerIcon = !props.hideIcon
+  ? h(
     'span',
     { class: styles[bannerColors.value.icon] },
     h(resolveComponent('Icon'), { source: props.icon || bannerAttributes[bannerTone.value].icon, }),
-  ) : null,
-);
+  )
+  : undefined;
 
-const actionButtons = computed(() =>
-  (props.action || props.secondaryAction) ? () => h(
+const actionButtons = (props.action || props.secondaryAction)
+  ? h(
     resolveComponent('ButtonGroup'),
     () => [
       props.action && h(resolveComponent('Button'),
@@ -125,13 +129,13 @@ const actionButtons = computed(() =>
         () => props.secondaryAction?.content,
       ),
     ],
-  ) : null,
-);
+  )
+  : undefined;
 
 const hasDismiss = computed(() => Boolean(currentInstance?.vnode.props?.onDismiss));
 
-const dismissButton = computed(() =>
-  hasDismiss.value ? () => h(
+const dismissButton = hasDismiss.value
+  ? h(
     resolveComponent('Button'),
     {
       variant: 'tertiary',
@@ -143,6 +147,6 @@ const dismissButton = computed(() =>
       onClick: () => emits('dismiss'),
       accessibilityLabel: i18n.translate('Polaris.Banner.dismissButton'),
     },
-  ) : null,
-);
+  )
+  : undefined;
 </script>

src/components/Banner/components/DefaultBanner.vue

@@ -8,15 +8,15 @@ Box(width="100%")
       :borderStartEndRadius="breakpoints.smUp ? '300' : undefined",
       :borderEndStartRadius="!hasContent && breakpoints.smUp ? '300' : undefined",
       :borderEndEndRadius="!hasContent && breakpoints.smUp ? '300' : undefined",
-      :padding="300",
+      padding="300",
     )
       InlineStack(
         align="space-between",
         blockAlign="center",
-        :gap="200",
+        gap="200",
         :wrap="false",
       )
-        InlineStack(:gap="100", :wrap="false")
+        InlineStack(gap="100", :wrap="false")
           template(v-if="bannerIcon")
             component(:is="bannerIcon")
           template(v-if="bannerTitle")
@@ -26,9 +26,9 @@ Box(width="100%")
     Box(
       v-if="Boolean(hasContent)",
       :padding="{ xs: '300', md: '400'}",
-      :paddingBlockStart="300",
+      paddingBlockStart="300",
     )
-      BlockStack(:gap="200")
+      BlockStack(gap="200")
         slot
         template(v-if="actionButtons")
           component(:is="actionButtons")
@@ -37,6 +37,7 @@ Box(width="100%")
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { VueNode } from '@/utilities/types';
+import { Box, BlockStack, InlineStack } from '@/components';
 import { useBreakpoints } from '@/use/useBreakpoints';
 import type { BannerLayoutProps } from '../types';
 
@@ -47,10 +48,10 @@ type DefaultBannerSlots = {
 const slots = defineSlots<DefaultBannerSlots>();
 
 const props = defineProps<BannerLayoutProps & {
-  bannerIcon?: (_: VueNode) => any;
-  bannerTitle?: (_: VueNode) => any;
-  actionButtons?: (_: VueNode) => any;
-  dismissButton?: (_: VueNode) => any;
+  bannerIcon?: VueNode;
+  bannerTitle?: VueNode;
+  actionButtons?: VueNode;
+  dismissButton?: VueNode;
 }>();
 
 const breakpoints = useBreakpoints();

src/components/Banner/components/InlineIconBanner.vue

@@ -2,7 +2,7 @@
 Box(
   width="100%",
   borderRadius="300",
-  :padding="300",
+  padding="300",
 )
   InlineStack(
     align="space-between",
@@ -11,19 +11,19 @@ Box(
   )
     Box(width="100%")
       InlineStack(
-        :gap="200",
+        gap="200",
         :wrap="false",
         :blockAlign="blockAlign",
       )
         div(v-if="bannerIcon", ref="iconNode")
           Box(
             borderRadius="200",
             :background="backgroundColor",
-            :padding="100",
+            padding="100",
           )
             component(:is="bannerIcon")
         Box(ref="contentNode", width="100%")
-          BlockStack(:gap="200")
+          BlockStack(gap="200")
             slot
             template(v-if="actionButtons")
               component(:is="actionButtons")
@@ -37,10 +37,11 @@ Box(
 
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import styles from '@polaris/components/Banner/Banner.module.css';
 import type { VueNode } from '@/utilities/types';
+import { Box, BlockStack, InlineStack } from '@/components';
 import type { BannerLayoutProps } from '../types';
 import type { InlineStackProps } from '../../InlineStack/types';
+import styles from '@polaris/components/Banner/Banner.module.css';
 
 type BannerLayoutSlots = {
   default: (_: VueNode) => any;
@@ -49,9 +50,9 @@ type BannerLayoutSlots = {
 defineSlots<BannerLayoutSlots>();
 
 defineProps<BannerLayoutProps & {
-  bannerIcon?: (_: VueNode) => any;
-  actionButtons?: (_: VueNode) => any;
-  dismissButton?: (_: VueNode) => any;
+  bannerIcon?: VueNode;
+  actionButtons?: VueNode;
+  dismissButton?: VueNode;
 }>();
 
 const blockAlign = ref<InlineStackProps['blockAlign']>('center');

src/components/Banner/components/WithinContentContainerBanner.vue

@@ -3,21 +3,21 @@ Box(
   width="100%",
   borderRadius="200",
   :background="backgroundColor",
-  :padding="200",
+  padding="200",
   :color="textColor",
 )
   InlineStack(
     align="space-between",
     blockAlign="start",
     :wrap="false",
-    :gap="200",
+    gap="200",
   )
-    InlineStack(:gap="150", :wrap="false")
+    InlineStack(gap="150", :wrap="false")
       template(v-if="bannerIcon")
         component(:is="bannerIcon")
       Box(width="100%")
-        BlockStack(:gap="200")
-          BlockStack(:gap="50")
+        BlockStack(gap="200")
+          BlockStack(gap="050")
             template(v-if="bannerTitle")
               component(:is="bannerTitle")
             slot
@@ -28,6 +28,7 @@ Box(
 </template>
 
 <script setup lang="ts">
+import { Box, InlineStack, BlockStack } from '@/components';
 import type { VueNode } from '@/utilities/types';
 import type { BannerLayoutProps } from '../types';
 
@@ -38,9 +39,9 @@ type BannerWithinContentContainerSlots = {
 defineSlots<BannerWithinContentContainerSlots>();
 
 defineProps<BannerLayoutProps & {
-  bannerTitle?: (_: VueNode) => any;
-  bannerIcon?: (_: VueNode) => any;
-  actionButtons?: (_: VueNode) => any;
-  dismissButton?: (_: VueNode) => any;
+  bannerTitle?: VueNode;
+  bannerIcon?: VueNode;
+  actionButtons?: VueNode;
+  dismissButton?: VueNode;
 }>();
 </script>

src/components/Breadcrumbs/Breadcrumbs.vue

@@ -12,6 +12,7 @@ Button(
 <script setup lang="ts">
 import { computed } from 'vue';
 import ArrowLeftIcon from '@icons/ArrowLeftIcon.svg';
+import { Button } from '@/components';
 import type { CallbackAction, LinkAction } from '@/utilities/types';
 import { handleMouseUpByBlurring } from '@/utilities/focus';
 

src/components/Button/Button.vue

@@ -39,7 +39,7 @@ import useI18n from '@/use/useI18n';
 import { useHasSlot } from '@/use/useHasSlot';
 import { useBreakpoints } from '@/use/useBreakpoints';
 import type { ButtonProps } from './types';
-import { Spinner, Icon } from '@/components';
+import { Spinner, Icon, Text } from '@/components';
 import { UnstyledButton } from '../UnstyledButton';
 import SelectIcon from '@icons/SelectIcon.svg';
 import ChevronDownIcon from '@icons/ChevronDownIcon.svg';