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

.env

@@ -1,2 +1,2 @@
 VITE_CLASS_PREFIX=Polaris
-VITE_POLARIS_VERSION=12.19.2
+VITE_POLARIS_VERSION=12.20.0

.github/workflows/deploy.yml

@@ -3,8 +3,6 @@
 name: Deploy documentation
 
 on:
-  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
-  # using the `master` branch as the default branch.
   push:
     branches: [docs]
 

.github/workflows/npm-publish.yml

@@ -11,8 +11,8 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: lts/hydrogen
       - run: yarn
@@ -21,23 +21,24 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+        with:
+          submodules: 'recursive'
+          persist-credentials: false
+      - uses: actions/setup-node@v3
         with:
           node-version: lts/hydrogen
           registry-url: https://registry.npmjs.org/
       - run: yarn --frozen-lockfile
-      - name: Git Submodule Update
-        run: |
-          git submodule update --init --recursive
-          git submodule update --recursive --remote
       - name: Setup submodule
         run: |
           cd polaris
           yarn
           yarn build
           cd ../
-      - run: yarn build
-      - run: yarn publish --access public
+      - name: Build the package
+        run: yarn build
+      - name: Publish to NPM
+        run: yarn publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

README.md

@@ -7,7 +7,7 @@ Polaris Vue by Ownego supports **Vue 3.3+**.
 Polaris Vue based on [Shopify Polaris style guide](https://polaris.shopify.com/), built especially for Vue 3.
 We're trying to make it mostly close with Shopify style guide and get a better performance.
 
-**Follow Polaris React version:** [12.19.2](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4012.19.2)
+**Follow Polaris React version:** [12.20.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4012.20.0)
 
 ---
 

docs/.vitepress/config.mts

@@ -26,6 +26,10 @@ export default defineConfig({
     ['meta', { property: 'og:title', content: 'Shopify Polaris for VueJS 3' }],
     ['meta', { property: 'og:description', content: 'Shopify Polaris UI components for Vue 3, with better performance, small bundle size, 99% matching Shopify Polaris 12. Compatible with Vue 3.3+' }],
     ['meta', { property: 'og:image', content: 'https://github.com/ownego/polaris-vue/blob/master/public/images/ogimg.png?raw=true' }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:title', content: 'Shopify Polaris for VueJS 3' }],
+    ['meta', { name: 'twitter:description', content: 'Shopify Polaris UI components for Vue 3, with better performance, small bundle size, 99% matching Shopify Polaris 12. Compatible with Vue 3.3+' }],
+    ['meta', { name: 'twitter:image', content: 'https://github.com/ownego/polaris-vue/blob/master/public/images/ogimg.png?raw=true' }],
   ],
 
   rewrites: {

docs/.vitepress/theme/components/DoDont.vue

@@ -15,38 +15,40 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useSlots } from 'vue';
+import { ref, useSlots, type VNode } from 'vue';
 
 const slots = useSlots();
 
-const slotContent = slots.default();
+const slotContent = slots.default?.() || [];
 
-const doContent = ref([]);
-const dontContent = ref([]);
+const doContent = ref<VNode[]>([]);
+const dontContent = ref<VNode[]>([]);
 
 let contentWall = 'do';
 
 slotContent.map((s) => {
   if (s.type === 'h4') {
-    if (s.props.id.startsWith('don-t')) {
+    if (s.props?.id.startsWith('don-t')) {
       contentWall = 'dont';
     }
 
-    s.props.class = 'docs-dodont__title';
-    s.props['data-dodont-type'] = contentWall;
+    if (s.props) {
+      s.props.class = 'docs-dodont__title';
+      s.props['data-dodont-type'] = contentWall;
+    }
   }
 
   if (contentWall === 'do') {
     // Put image at beginning of doContent
-    if (s.type === 'p' && s.children[0].type === 'img') {
+    if (s.type === 'p' && s.children?.[0].type === 'img') {
       s.props = { class: 'docs-dodont__image' };
 
       doContent.value.unshift(s);
     } else {
       doContent.value.push(s);
     }
   } else {
-    if (s.type === 'p' && s.children[0].type === 'img') {
+    if (s.type === 'p' && s.children?.[0].type === 'img') {
       s.props = { class: 'docs-dodont__image' };
 
       dontContent.value.unshift(s);

docs/.vitepress/theme/components/EventsTable.vue

@@ -72,13 +72,13 @@ const noMetaContent = computed(() => {
 
 onMounted(async () => {
   if (!props.typeFile) {
-    metaEvents.value = cEvents.value;
+    metaEvents.value = cEvents.value || [];
     return;
   }
 
   const events = await fetchTypes(props.typeFile);
 
-  metaEvents.value = events.members.map((e) => {
+  metaEvents.value = events?.members.map((e) => {
     return {
       name: e.name.replace(/["']/g, ''),
       description: e.description,

docs/.vitepress/theme/components/Lede.vue

@@ -1,10 +1,18 @@
 <template lang="pug">
 .docs-lede
-  .docs-lede-content
-    slot
+  .docs-lede-content(v-html="markdownContent")
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import MarkdownIt from 'markdown-it';
+
+const slots = useSlots();
+const md = new MarkdownIt();
+
+const markdownContent = computed(() => {
+  return md.render(slots.default?.()[0].children as string || '');
+});
 </script>
 
 <style lang="scss">

docs/.vitepress/theme/components/ListComponents.vue

@@ -23,7 +23,7 @@ import { computed, onMounted, ref } from 'vue';
 
 const { frontmatter, theme } = useData();
 
-const data = ref([]);
+const data = ref<Record<string, any>[]>([]);
 
 const sidebar = computed(() => theme.value.sidebar);
 const category = computed(() => frontmatter.value.title);

docs/.vitepress/theme/components/PropsTable.vue

@@ -75,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, ref } from 'vue';
+import { computed, h, ref, type VNode } from 'vue';
 import MarkdownIt from 'markdown-it';
 import { useMeta } from '../use/useMeta';
 import type { ComponentPropsMeta } from '../types';
@@ -115,7 +115,7 @@ const expandType = async (t: string, propName: string) => {
   // Remove [] from type
   const typeName = type.replace(/\[\]/g, '');
 
-  let types = null;
+  let types = {};
 
   try {
     types = await fetchType(typeName, true);
@@ -141,7 +141,7 @@ const expandType = async (t: string, propName: string) => {
   console.log(extraType.value[propName]);
 }
 
-function fetchType(type: string, isExtra?: boolean) {
+function fetchType(type: string, isExtra?: boolean): Record<string, any> {
   const url = isExtra
     ? withBase(`/assets/extra-types/${type}.json`)
     : withBase(`/assets/components-types/${type}.json`);
@@ -177,7 +177,7 @@ const syntaxKindToDeveloperFriendlyString = (
 const typeMarkup = (p: ComponentPropsMeta) => {
   const types = serializeSchema(p.schema);
 
-  const typeEls = [];
+  const typeEls: VNode[] = [];
   let isInGroup = false;
 
   types.map((t, idx) => {

docs/components/AppProvider/Default.vue

@@ -2,7 +2,7 @@
 <AppProvider :i18n="i18n">
   <Page>
     <LegacyCard>
-      <ResourceList show-header>
+      <ResourceList :items="items" show-header>
         <ResourceItem
           v-for="item in items"
           :key="item.id"

docs/components/AppProvider/I18n.vue

@@ -2,7 +2,7 @@
 <AppProvider :i18n="locales">
   <Page>
     <LegacyCard>
-      <ResourceList show-header>
+      <ResourceList :items="items" show-header>
         <ResourceItem
           v-for="item in items"
           :key="item.id"

docs/components/Bleed/Default.vue

@@ -4,13 +4,9 @@
     Content inside a card
   </Text>
   <Bleed margin-inline="400">
-    <div
-      :style="placeHolderStyle"
-    >
+    <div :style="placeHolderStyle">
       <InlineStack gap="400" align="center">
-        <div
-          style="color: var(--p-color-text-info-on-bg-fill)"
-        >
+        <div style="color: var(--p-color-text-info-on-bg-fill)">
           <Text
             as="h2"
             variant="bodyMd"

docs/components/Bleed/PreviewPlaceholder.vue

@@ -1,11 +1,7 @@
 <template>
-<div
-  :style="styles"
->
+<div :style="styles">
   <InlineStack gap="400" align="center">
-    <div
-      style="color: var(--p-color-text-info-on-bg-fill)"
-    >
+    <div style="color: var(--p-color-text-info-on-bg-fill)">
       <Text
         as="h2"
         variant="bodyMd"

docs/components/Bleed/Vertical.vue

@@ -1,13 +1,9 @@
 <template>
 <Card>
   <Bleed marginBlock="800">
-    <div
-      :style="placeHolderStyle"
-    >
+    <div :style="placeHolderStyle">
       <InlineStack gap="400" align="center">
-        <div
-          style="color: var(--p-color-text-info-on-bg-fill)"
-        >
+        <div style="color: var(--p-color-text-info-on-bg-fill)">
           <Text
             as="h2"
             variant="bodyMd"

docs/components/BlockStack/Gap.vue

@@ -1,23 +1,14 @@
 <template>
-<div
-  :style="wrapperStyle"
->
+<div :style="wrapperStyle">
   <BlockStack gap="500">
-    <div
-      :style="innerBlockStackStyle"
-    ></div>
-    <div
-      :style="innerBlockStackStyle"
-    ></div>
-    <div
-      :style="innerBlockStackStyle"
-    ></div>
+    <div :style="innerBlockStackStyle"></div>
+    <div :style="innerBlockStackStyle"></div>
+    <div :style="innerBlockStackStyle"></div>
   </BlockStack>
 </div>
 </template>
 
 <script setup lang="ts">
-
 const wrapperStyle = {
   background: 'var(--p-color-bg-surface-success)',
   height: 'auto',

docs/components/BlockStack/PreviewPlaceholder.vue

@@ -1,11 +1,7 @@
 <template>
-<div
-  :style="wrapperStyle"
->
+<div :style="wrapperStyle">
   <InlineStack align="center">
-    <div
-      style="color: var(--p-color-text-info-on-bg-fill)"
-    >
+    <div style="color: var(--p-color-text-info-on-bg-fill)">
       <Text
         as="h2"
         variant="bodyMd"

docs/components/CalloutCard/README.md

@@ -51,7 +51,7 @@ Some types of props are following the [Polaris Design Tokens](https://polaris.sh
 
 ## Events
 
-<EventsTable typeFile="CalloutCardEmits" />
+<EventsTable />
 
 <div style="font-size: 0.8125rem">
 

docs/components/IndexTable/WithMultipleBulkActions.vue

@@ -108,7 +108,20 @@ const bulkActions = [
     onAction: () => console.log('Todo: implement bulk remove tags'),
   },
   {
-    content: 'Delete orders',
+    title: 'Import',
+    items: [
+      {
+        content: 'Import from PDF',
+        onAction: () => console.log('Todo: implement PDF importing'),
+      },
+      {
+        content: 'Import from CSV',
+        onAction: () => console.log('Todo: implement CSV importing'),
+      },
+    ],
+  },
+  {
+    content: 'Delete customers',
     onAction: () => console.log('Todo: implement bulk delete'),
   },
 ];

docs/components/InlineStack/Gap.vue

@@ -1,9 +1,7 @@
 <template>
 <BlockStack>
   <InlineStack>
-    <div
-      :style="spacingStyleWithMargin"
-    >
+    <div :style="spacingStyleWithMargin">
       <InlineStack gap="400" :wrap="false" block-align="center">
         <Placeholder width="106px" height="36px" />
         <Placeholder width="106px" height="20px" />

docs/components/InlineStack/NonWrapping.vue

@@ -1,5 +1,5 @@
 <template>
-<InlineStack wrap="false">
+<InlineStack :wrap="false">
   <Placeholder width="106px" height="36px" />
   <Placeholder width="106px" height="20px" showBorder />
   <Placeholder width="106px" height="20px" showBorder />

docs/components/InlineStack/PreviewPlaceholder.vue

@@ -1,11 +1,7 @@
 <template>
-<div
-  :style="style"
->
+<div :style="style">
   <InlineStack align="center">
-    <div
-      style="color: var(--p-color-text-info-on-bg-fill)"
-    >
+    <div style="color: var(--p-color-text-info-on-bg-fill)">
       <Text
         as="h2"
         variant="bodyMd"