Chore: v0.8.0

Author: juzser

.storybook/stories/Faqs.stories.mdx

@@ -28,8 +28,21 @@ We will try to fix this issue in the future.
 #### **CSS Variables & Polaris Tokens**
 
 All tokens & variables are following the [Polaris Design Tokens](https://polaris.shopify.com/tokens/all-tokens).
-Feel free to change the variables, based on your project scheme.
 
+<br/>
+
+#### **Volar Support**
+
+If you are using Volar, you can specify global component types by configuring `compilerOptions.types` in `tsconfig.json`.
 
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    // ...
+    "types": ["@ownego/polaris-vue/dist/volar"]
+  }
+}
+```
 
 

.storybook/stories/GetStarted.stories.mdx

@@ -24,7 +24,7 @@ import { Meta } from '@storybook/addon-docs';
 
 Polaris Vue by Ownego is a component library for [Vue 3](https://vuejs.org/) based on [Shopify Polaris style guide](https://polaris.shopify.com/). We try to keep the package light-weight and easy to use (mostly similar with original Polaris Library).
 
-**Follow Polaris React version:** [9.9.0](https://github.com/Shopify/polaris/releases/tag/v9.9.0) - Migrated date: *May 26th, 2022*.
+**Follow Polaris React version:** [9.12.2](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.12.2) - Migrated date: *Jun 3rd, 2022*.
 
 <a href="https://github.com/ownego/polaris-vue"><img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" alt="Github"/></a>
 

README.md

@@ -5,7 +5,7 @@ Polaris Vue by Ownego only supports **Vue 3.0+**.
 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:** [9.9.0](https://github.com/Shopify/polaris/releases/tag/v9.9.0) - Migrated date: *May 26th, 2022*.
+**Follow Polaris React version:** [9.12.2](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.12.2) - Migrated date: *Jun 3rd, 2022*.
 
 <br/>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "0.7.6",
-  "polaris_version": "9.9.0",
+  "version": "0.8.0",
+  "polaris_version": "9.12.2",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": "Ownego Team",
   "keywords": [

src/classes/Avatar.json

@@ -1 +1 @@
-{"Avatar":"Polaris-Avatar","hidden":"Polaris-Avatar--hidden","sizeExtraSmall":"Polaris-Avatar--sizeExtraSmall","sizeSmall":"Polaris-Avatar--sizeSmall","sizeMedium":"Polaris-Avatar--sizeMedium","sizeLarge":"Polaris-Avatar--sizeLarge","styleOne":"Polaris-Avatar--styleOne","styleTwo":"Polaris-Avatar--styleTwo","styleThree":"Polaris-Avatar--styleThree","styleFour":"Polaris-Avatar--styleFour","styleFive":"Polaris-Avatar--styleFive","hasImage":"Polaris-Avatar--hasImage","Image":"Polaris-Avatar__Image","Initials":"Polaris-Avatar__Initials","Svg":"Polaris-Avatar__Svg"}
+{"Avatar":"Polaris-Avatar","hidden":"Polaris-Avatar--hidden","sizeExtraSmall":"Polaris-Avatar--sizeExtraSmall","sizeSmall":"Polaris-Avatar--sizeSmall","sizeMedium":"Polaris-Avatar--sizeMedium","sizeLarge":"Polaris-Avatar--sizeLarge","styleOne":"Polaris-Avatar--styleOne","styleTwo":"Polaris-Avatar--styleTwo","styleThree":"Polaris-Avatar--styleThree","styleFour":"Polaris-Avatar--styleFour","styleFive":"Polaris-Avatar--styleFive","imageHasLoaded":"Polaris-Avatar--imageHasLoaded","Image":"Polaris-Avatar__Image","Initials":"Polaris-Avatar__Initials","Svg":"Polaris-Avatar__Svg"}

src/classes/Image.json

@@ -0,0 +1 @@
+{"Image":"Polaris-Image","isLoading":"Polaris-Image--isLoading"}

src/components/Avatar/Avatar.vue

@@ -18,7 +18,7 @@ span(
       ) {{ initials }}
   Image(
     v-if="source && status !== Status.Errored",
-    :class="styles.Image",
+    :class="imageClassName",
     :source="source",
     alt="",
     role="presentation",
@@ -85,10 +85,14 @@ const className =  computed(() => {
     styles.Avatar,
     size && styles[size],
     !props.customer && styles[style],
-    (hasImage.value || (props.initials && props.initials.length === 0))
-    && status.value !== 'LOADED'
-    && styles.hidden,
-    hasImage.value && styles.hasImage,
+    hasImage.value && status.value === 'LOADED' && styles.imageHasLoaded,
+  );
+});
+
+const imageClassName = computed(() => {
+  return classNames(
+    styles.Image,
+    status.value !== 'LOADED' && styles.hidden,
   );
 });
 

src/components/Button/ButtonMarkup.vue

@@ -66,7 +66,7 @@ const props = defineProps<Props>();
 const attrs = useAttrs();
 
 const listeners = computed(() => {
-  const events = ['blur', 'click', 'focus', 'keydown', 'keypress', 'keyup', 'mouseover', 'touchstart'];
+  const events = ['blur', 'click', 'focus', 'keydown', 'keypress', 'keyup', 'mouseover', 'touchstart', 'pointerdown'];
   const eventBindings: Record<string, unknown> = {};
   for (const event of events) {
     const eventName = `on${capitalize(event)}`;

src/components/Image/Image.vue

@@ -1,19 +1,17 @@
 <template lang="pug">
 img(
-  v-if="finalSourceSet",
-  :src="source",
-  :srcSet="sourceSet",
-  :crossOrigin="crossOrigin",
-)
-img(
-  v-else,
   :src="source",
+  :src-set="finalSourceSet ? finalSourceSet : undefined",
   :crossOrigin="crossOrigin",
+  :class="className",
+  @load="handleLoad",
 )
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onUpdated, ref, watch } from 'vue';
+import { classNames } from 'polaris/polaris-react/src/utilities/css';
+import styles from '@/classes/Image.json';
 
 interface SourceSet {
   source: string;
@@ -29,10 +27,31 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const emits = defineEmits<{
+  (e: 'load'): void;
+}>();
+
+const status = ref('loading');
 
 const finalSourceSet = computed(() => props.sourceSet
   ? props.sourceSet
     .map(({ source: subSource, descriptor }) => `${subSource} ${descriptor}`).join(',')
   : null,
 );
+
+const className = computed(() => {
+  return classNames(
+    styles.Image,
+    status.value === 'loading' && styles.isLoading,
+  );
+});
+
+const handleLoad = () => {
+  status.value = 'loaded';
+  emits('load');
+};
 </script>
+
+<style lang="scss">
+@import 'polaris/polaris-react/src/components/Image/Image.scss';
+</style>

src/components/Modal/Modal.vue

@@ -65,7 +65,7 @@ div
         key="footer",
       )
         slot(name="footer")
-    Backdrop
+    Backdrop(@click="clickOutsideToClose ? emit('close') : null")
 </template>
 
 <script setup lang="ts">
@@ -113,6 +113,8 @@ interface Props {
   primaryAction?: ComplexAction;
   /** Collection of secondary actions */
   secondaryActions?: ComplexAction[];
+  /** Click or tap the area outside to close the modal */
+  clickOutsideToClose?: boolean;
 }
 
 defineProps<Props>();

src/components/Modal/README.stories.mdx

@@ -14,6 +14,11 @@ import {
   title="Components / Overlays / Modal"
   component={Modal}
   argTypes={{
+    colorScheme: {
+      table: {
+        disable: true,
+      },
+    },
     close: {
       description: "Callback when modal is closed",
       control: { disable: true },
@@ -132,6 +137,7 @@ export const scrollExample = (args) => ({
   template: `
     <Modal
       :open="active"
+      :clickOutsideToClose="true"
       :primary-action="{ content:'Close', onAction: toggle }"
       @close="toggle"
       @scrolled-to-bottom="handleScrolledToBottom"
@@ -168,6 +174,7 @@ scrollExample.parameters = {
           <Modal
             :open="active"
             :primary-action="{ content:'Close', onAction: toggle }"
+            :clickOutsideToClose="true"
             @close="toggle"
             @scrolled-to-bottom="handleScrolledToBottom"
           >

src/components/PageActions/README.stories.mdx

@@ -13,11 +13,23 @@ import { PageActions } from '@/polaris-vue';
       },
     },
     primaryAction: {
-      table: { type: { summary: 'DisableableAction && LoadableAction' } },
+      description: 'The primary action for the page',
+      table: {
+        category: 'props',
+        type: { summary: 'DisableableAction && LoadableAction' }
+      },
       control: {
         disable: true,
       },
     },
+    slotPrimaryAction: {
+      name: 'primaryAction',
+      description: 'The primary action for the page. This slot will override the primaryAction prop',
+      table: {
+        category: 'slots',
+        type: { summary: null },
+      },
+    }
   }}
 />
 
@@ -68,3 +80,43 @@ Page actions let merchants take key actions at the bottom of specific pages in t
 </Canvas>
 
 <ArgsTable story="Page actions" />
+
+---
+
+<br/>
+
+### **DisableableAction & LoadableAction**
+
+| Prop             | Type                          | Description     |
+| ---------------- | ----------------------------- | --------------- |
+| id?              | String       | A unique identifier for the action. |
+| content?         | String       | Content the action displays. |
+| accessibilityLabel?  | String  | Visually hidden text for screen readers. |
+| url?             | String       | A destination to link to, rendered in the action. |
+| external?        | String       | Forces url to open in a new tab. |
+| disabled?        | Boolean      | Whether or not the action is disabled. |
+| loading?         | Boolean      | Should a spinner be displayed. |
+| onAction?()      | void         | Callback when an action takes place. |
+| onMouseEnter?()  | void         | Callback when mouse enter. |
+| onTouchStart?()  | void         | Callback when element is touched. |
+
+<br/>
+
+### **ComplexAction types**
+
+| Prop             | Type                          | Description     |
+| ---------------- | ----------------------------- | --------------- |
+| id?              | String       | A unique identifier for the action. |
+| content?         | String       | Content the action displays. |
+| accessibilityLabel?  | String  | Visually hidden text for screen readers. |
+| url?             | String       | A destination to link to, rendered in the action. |
+| external?        | String       | Forces url to open in a new tab. |
+| destructive?     | Boolean      | Destructive action. |
+| disabled?        | Boolean      | Whether or not the action is disabled. |
+| icon?            | IconSource   | Source of the icon. |
+| loading?         | Boolean      | Should a spinner be displayed. |
+| outline?         | Boolean      | Should action be displayed as an outlined button. |
+| plain?           | Boolean      | Should action be displayed as a plain link. |
+| onAction?()      | void         | Callback when an action takes place. |
+| onMouseEnter?()  | void         | Callback when mouse enter. |
+| onTouchStart?()  | void         | Callback when element is touched. |