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>();