Merge remote-tracking branch 'origin/master' into docs

.github/workflows/npm-publish.yml

@@ -12,10 +12,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3 # docs https://pnpm.io/continuous-integration#github-actions
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: lts/iron
@@ -33,6 +29,10 @@ jobs:
         with:
           node-version: lts/iron
           registry-url: https://registry.npmjs.org/
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3 # docs https://pnpm.io/continuous-integration#github-actions
+        with:
+          version: 8
       - run: yarn
       - name: Setup submodule
         run: |

docs/.vitepress/theme/use/useMeta.ts

@@ -85,8 +85,6 @@ export function useMeta(ignoreFetch = false) {
 
       // String
       if (types[0].startsWith('string')) {
-        console.log(types[0]);
-
         return [types[0]];
       }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "polaris_version": "13.5.0",
   "description": "Shopify Polaris 12 - UI library for Vue 3",
   "author": "Ownego Team",
@@ -53,7 +53,7 @@
     "@shopify/polaris-tokens": "^9.1.0",
     "@shopify/postcss-plugin": "^5.0.2",
     "@types/node": "^20.10.4",
-    "@vitejs/plugin-vue": "^5.0.2",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vue/language-plugin-pug": "^2.0.21",
     "change-case": "^5.3.0",
     "eslint": "^8.54.0",
@@ -74,16 +74,16 @@
     "sass": "^1.69.5",
     "typescript": "^5.3.3",
     "url": "^0.11.3",
-    "vite": "^5.0.10",
+    "vite": "^5.3.1",
     "vite-plugin-chunk-split": "^0.5.0",
-    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-dts": "^3.9.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-replace": "^0.1.1",
     "vitepress": "^1.0.2",
     "vue": "^3.4.19",
     "vue-component-meta": "^1.8.27",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.21"
   },
   "peerDependencies": {
     "vue": "^3.3"

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

@@ -44,9 +44,13 @@ template(v-else)
 </template>
 
 <script setup lang="ts">
-import { computed, h, getCurrentInstance, resolveComponent } from 'vue';
+import { computed, h, getCurrentInstance } from 'vue';
 import styles from '@polaris/components/Banner/Banner.module.css';
 import useI18n from '@/use/useI18n';
+import { Text, Icon, ButtonGroup, Button } 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,53 +100,53 @@ const sharedBannerProps = computed(() => {
   }
 });
 
-const bannerTitle = computed(() =>
-  props.title ? () => h(
-    resolveComponent('Text'),
+const bannerTitle = props.title
+  ? h(
+    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,
-);
+    h(Icon, { source: props.icon || bannerAttributes[bannerTone.value].icon, }),
+  )
+  : undefined;
 
-const actionButtons = computed(() =>
-  (props.action || props.secondaryAction) ? () => h(
-    resolveComponent('ButtonGroup'),
+const actionButtons = (props.action || props.secondaryAction)
+  ? h(
+    ButtonGroup,
     () => [
-      props.action && h(resolveComponent('Button'),
-        { onClick: props.action.onAction, props: { ...props.action } },
+      props.action && h(Button,
+        { onClick: props.action?.onAction, props: { ...props.action } },
         () => props.action?.content,
       ),
-      props.secondaryAction && h(resolveComponent('Button'),
+      props.secondaryAction && h(Button,
         { onClick: props.secondaryAction.onAction, props: { ...props.secondaryAction } },
         () => props.secondaryAction?.content,
       ),
     ],
-  ) : null,
-);
+  )
+  : undefined;
 
 const hasDismiss = computed(() => Boolean(currentInstance?.vnode.props?.onDismiss));
 
-const dismissButton = computed(() =>
-  hasDismiss.value ? () => h(
-    resolveComponent('Button'),
+const dismissButton = hasDismiss.value
+  ? h(
+    Button,
     {
       variant: 'tertiary',
       icon: h(
         'span',
         { class: styles[isInlineIconBanner.value ? 'icon-secondary' : bannerColors.value.icon] },
-        h(resolveComponent('Icon'), { source: XIcon }),
+        h(Icon, { source: XIcon }),
       ),
       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';

src/components/CalloutCard/CalloutCard.vue

@@ -39,6 +39,16 @@ LegacyCard
 <script setup lang="ts">
 import { computed, getCurrentInstance, useSlots } from 'vue';
 import type { VueNode, IconableAction } from '@/utilities/types';
+import {
+  LegacyCard,
+  Button,
+  LegacyCardSection,
+  BlockStack,
+  ButtonGroup,
+  ButtonFrom,
+  Image,
+  Text,
+} from '@/components';
 import { classNames } from '@/utilities/css';
 import { useHasSlot } from '@/use/useHasSlot';
 import type { ButtonProps } from '@/components/Button/types';