Merge remote-tracking branch 'origin/dev'

.eslintignore

@@ -6,3 +6,6 @@ classes/*.json
 src/**/*.stories.mdx
 src/**/*.scss
 src/**/*.css
+package.json
+README.md
+.storybook

.postcssrc.js

@@ -11,7 +11,9 @@ module.exports = {
       getJSON: (cssFileName, json) => {
         let cssName = path.basename(cssFileName, '.vue');
 
-        const pattern = /polaris\-vue\/src\/components\/(.*?)\/components/g;
+        let projectPath = path.basename(__dirname, './');
+
+        const pattern = new RegExp(`${projectPath}/src/components/(.*?)/components`, 'g');
         let parentName = cssFileName.match(pattern);
         if (parentName) {
           parentName = parentName[0].replace(pattern, '$1');

.storybook/stories/GetStarted.stories.mdx

@@ -24,9 +24,9 @@ import { Meta } from '@storybook/addon-docs';
 
 Polaris Vue by Qikify 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).
 
-Polaris Vue by qikify only supports **Vue 3.0.0+**.
+Polaris Vue by qikify only supports **Vue 3.0+**.
 
-**Follow Polaris React version:** [9.0.0](https://github.com/Shopify/polaris-react/releases/tag/v9.0.0) - Release date: *Feb 15th, 2022*.
+**Follow Polaris React version:** [9.2.2](https://github.com/Shopify/polaris-react/releases/tag/v9.2.2) - Release date: *Mar 12th, 2022*.
 
 <br/>
 <br/>

.storybook/stories/PolarisIcons.stories.mdx

@@ -24,7 +24,7 @@ So you don't have to install any additional packages.
 <br/>
 <br/>
 
-## Setup
+### **Setup:**
 
 You have to use `vite-svg-loader` in your project. See [Icon Component](?path=/docs/components-images-and-icons-icon--icon) for more details.
 
@@ -43,7 +43,7 @@ export default defineConfig({
 });
 ```
 
-## Usage
+### **Usage:**
 
 Composition API:
 
@@ -65,16 +65,14 @@ Options API:
 import CirclePlusMinor from '@shopify/polaris-icons/dist/svg/CirclePlusMinor.svg';
 
 export default {
-  data() {
-    return {
-      iconCirclePlusMinor: CirclePlusMinor,
-    };
+  setup() {
+    return { CirclePlusMinor };
   },
 }
 </script>
 
 <template>
-  <Icon :source="iconCirclePlusMinor">
+  <Icon :source="CirclePlusMinor">
 </template>
 ```
 

README.md

@@ -1,11 +1,11 @@
 # Polaris Vue (Support Vue 3.0)
 
-Polaris Vue by qikify only supports **Vue 3.0.0+**.
+Polaris Vue by qikify only supports **Vue 3.0+**.
 
 Polaris Vue by Qikify 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.0.0](https://github.com/Shopify/polaris-react/releases/tag/v9.0.0) - Release date: *Feb 15th, 2022*.
+**Follow Polaris React version:** [9.2.2](https://github.com/Shopify/polaris-react/releases/tag/v9.2.2) - Release date: *Mar 12th, 2022*.
 
 <br/>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qikify/polaris-vue",
-  "version": "0.3.0",
-  "polaris_version": "9.0.0",
+  "version": "0.4.0",
+  "polaris_version": "9.2.2",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": {
     "name": "Qikify"

src/classes/Backdrop.json

@@ -0,0 +1 @@
+{"Backdrop":"Polaris-Backdrop","fade-in":"Polaris-Backdrop__fade--in","transparent":"Polaris-Backdrop--transparent","belowNavigation":"Polaris-Backdrop--belowNavigation"}

src/classes/Collapsible.json

@@ -0,0 +1 @@
+{"Collapsible":"Polaris-Collapsible","isFullyClosed":"Polaris-Collapsible--isFullyClosed","expandOnPrint":"Polaris-Collapsible--expandOnPrint"}

src/classes/Combobox.json

@@ -0,0 +1 @@
+{"Listbox":"Polaris-Combobox__Listbox"}

src/classes/Demo.json

@@ -1 +1 @@
-{}
+{"list":"Polaris-Demo--list","list-enter-active":"Polaris-Demo--listEnterActive","list-leave-active":"Polaris-Demo--listLeaveActive","list-enter-from":"Polaris-Demo--listEnterFrom","list-leave-to":"Polaris-Demo--listLeaveTo"}

src/classes/DescriptionList.json

@@ -0,0 +1 @@
+{"DescriptionList":"Polaris-DescriptionList","Term":"Polaris-DescriptionList__Term","spacingTight":"Polaris-DescriptionList--spacingTight","Description":"Polaris-DescriptionList__Description"}

src/classes/Frame-ContextualSaveBar.json

@@ -0,0 +1 @@
+{"ContextualSaveBar":"Polaris-Frame-ContextualSaveBar","LogoContainer":"Polaris-Frame-ContextualSaveBar__LogoContainer","ContextControl":"Polaris-Frame-ContextualSaveBar__ContextControl","Message":"Polaris-Frame-ContextualSaveBar__Message","Contents":"Polaris-Frame-ContextualSaveBar__Contents","fullWidth":"Polaris-Frame-ContextualSaveBar--fullWidth","ActionContainer":"Polaris-Frame-ContextualSaveBar__ActionContainer","Action":"Polaris-Frame-ContextualSaveBar__Action"}

src/classes/Frame-CssAnimation.json

@@ -0,0 +1 @@
+{"startFade":"Polaris-Frame-CssAnimation--startFade","endFade":"Polaris-Frame-CssAnimation--endFade"}

src/classes/Frame-Loading.json

@@ -0,0 +1 @@
+{"Loading":"Polaris-Frame-Loading","Level":"Polaris-Frame-Loading__Level"}

src/classes/Frame-Toast.json

@@ -0,0 +1 @@
+{"Toast":"Polaris-Frame-Toast","Action":"Polaris-Frame-Toast__Action","error":"Polaris-Frame-Toast--error","CloseButton":"Polaris-Frame-Toast__CloseButton"}

src/classes/Frame-ToastManager.json

@@ -0,0 +1 @@
+{"ToastManager":"Polaris-Frame-ToastManager","ToastWrapper":"Polaris-Frame-ToastManager__ToastWrapper","ToastWrapper-enter":"Polaris-Frame-ToastManager__ToastWrapper--enter","ToastWrapper-exit":"Polaris-Frame-ToastManager__ToastWrapper--exit","ToastWrapper-enter-done":"Polaris-Frame-ToastManager--toastWrapperEnterDone"}

src/classes/Frame.json

@@ -0,0 +1 @@
+{"Frame":"Polaris-Frame","Navigation":"Polaris-Frame__Navigation","hasTopBar":"Polaris-Frame--hasTopBar","Navigation-enter":"Polaris-Frame__Navigation--enter","Navigation-enterActive":"Polaris-Frame__Navigation--enterActive","Navigation-exit":"Polaris-Frame__Navigation--exit","Navigation-exitActive":"Polaris-Frame__Navigation--exitActive","NavigationDismiss":"Polaris-Frame__NavigationDismiss","Navigation-visible":"Polaris-Frame__Navigation--visible","TopBar":"Polaris-Frame__TopBar","ContextualSaveBar":"Polaris-Frame__ContextualSaveBar","Main":"Polaris-Frame__Main","hasNav":"Polaris-Frame--hasNav","Content":"Polaris-Frame__Content","GlobalRibbonContainer":"Polaris-Frame__GlobalRibbonContainer","LoadingBar":"Polaris-Frame__LoadingBar","Skip":"Polaris-Frame__Skip","focused":"Polaris-Frame--focused","pressed":"Polaris-Frame--pressed"}

src/classes/Indicator.json

@@ -0,0 +1 @@
+{"Indicator":"Polaris-Indicator","pulseIndicator":"Polaris-Indicator--pulseIndicator","bounce":"Polaris-Indicator--bounce","pulse":"Polaris-Indicator--pulse"}

src/classes/Label.json

@@ -1 +1 @@
-{"Label":"Polaris-Label","hidden":"Polaris-Label--hidden","Text":"Polaris-Label__Text","RequiredIndicator":"Polaris-Label__RequiredIndicator"}
+{"Label":"Polaris-Label","hidden":"Polaris-Label--hidden","Text":"Polaris-Label__Text","RequiredIndicator":"Polaris-Label__RequiredIndicator"}

src/classes/MessageIndicator.json

@@ -0,0 +1 @@
+{"MessageIndicatorWrapper":"Polaris-MessageIndicator__MessageIndicatorWrapper","MessageIndicator":"Polaris-MessageIndicator"}

src/classes/Modal-CloseButton.json

@@ -0,0 +1 @@
+{"CloseButton":"Polaris-Modal-CloseButton"}

src/classes/Modal-Dialog.json

@@ -0,0 +1 @@
+{"Container":"Polaris-Modal-Dialog__Container","Dialog":"Polaris-Modal-Dialog","Modal":"Polaris-Modal-Dialog__Modal","limitHeight":"Polaris-Modal-Dialog--limitHeight","sizeSmall":"Polaris-Modal-Dialog--sizeSmall","sizeLarge":"Polaris-Modal-Dialog--sizeLarge","animateFadeUp":"Polaris-Modal-Dialog--animateFadeUp","entering":"Polaris-Modal-Dialog--entering","exiting":"Polaris-Modal-Dialog--exiting","exited":"Polaris-Modal-Dialog--exited","entered":"Polaris-Modal-Dialog--entered"}

src/classes/Modal-Footer.json

@@ -0,0 +1 @@
+{"Footer":"Polaris-Modal-Footer","FooterContent":"Polaris-Modal-Footer__FooterContent"}

src/classes/Modal-Header.json

@@ -0,0 +1 @@
+{"Header":"Polaris-Modal-Header","titleHidden":"Polaris-Modal-Header--titleHidden","Title":"Polaris-Modal-Header__Title"}

src/classes/Modal-Section.json

@@ -0,0 +1 @@
+{"Section":"Polaris-Modal-Section","subdued":"Polaris-Modal-Section--subdued","flush":"Polaris-Modal-Section--flush"}

src/classes/Modal.json

@@ -0,0 +1 @@
+{"BodyWrapper":"Polaris-Modal__BodyWrapper","Body":"Polaris-Modal__Body","IFrame":"Polaris-Modal__IFrame","Spinner":"Polaris-Modal__Spinner"}

src/classes/Navigation.json

@@ -0,0 +1 @@
+{"Navigation":"Polaris-Navigation","UserMenu":"Polaris-Navigation__UserMenu","ContextControl":"Polaris-Navigation__ContextControl","PrimaryNavigation":"Polaris-Navigation__PrimaryNavigation","LogoContainer":"Polaris-Navigation__LogoContainer","Logo":"Polaris-Navigation__Logo","LogoLink":"Polaris-Navigation__LogoLink","Item":"Polaris-Navigation__Item","keyFocused":"Polaris-Navigation--keyFocused","Icon-resized":"Polaris-Navigation__Icon--resized","Item-selected":"Polaris-Navigation__Item--selected","Item-disabled":"Polaris-Navigation__Item--disabled","Icon":"Polaris-Navigation__Icon","Badge":"Polaris-Navigation__Badge","subNavigationActive":"Polaris-Navigation--subNavigationActive","Item-child-active":"Polaris-Navigation--itemChildActive","ExternalIcon":"Polaris-Navigation__ExternalIcon","ListItem":"Polaris-Navigation__ListItem","RollupSection":"Polaris-Navigation__RollupSection","SecondaryNavigation":"Polaris-Navigation__SecondaryNavigation","ListItem-hasAction":"Polaris-Navigation__ListItem--hasAction","ItemWrapper":"Polaris-Navigation__ItemWrapper","Text":"Polaris-Navigation__Text","SecondaryAction":"Polaris-Navigation__SecondaryAction","isExpanded":"Polaris-Navigation--isExpanded","List":"Polaris-Navigation__List","SecondaryNavigation-noIcon":"Polaris-Navigation__SecondaryNavigation--noIcon","Section":"Polaris-Navigation__Section","Section-fill":"Polaris-Navigation__Section--fill","Section-withSeparator":"Polaris-Navigation__Section--withSeparator","SectionHeading":"Polaris-Navigation__SectionHeading","Action":"Polaris-Navigation__Action","RollupToggle":"Polaris-Navigation__RollupToggle","Indicator":"Polaris-Navigation__Indicator","fade-in":"Polaris-Navigation__fade--in"}

src/classes/ScrollLock.json

@@ -0,0 +1 @@
+{}

src/classes/Stack.json

@@ -0,0 +1 @@
+{"Stack":"Polaris-Stack","Item":"Polaris-Stack__Item","noWrap":"Polaris-Stack--noWrap","spacingNone":"Polaris-Stack--spacingNone","spacingExtraTight":"Polaris-Stack--spacingExtraTight","spacingTight":"Polaris-Stack--spacingTight","spacingBaseTight":"Polaris-Stack--spacingBaseTight","spacingLoose":"Polaris-Stack--spacingLoose","spacingExtraLoose":"Polaris-Stack--spacingExtraLoose","distributionLeading":"Polaris-Stack--distributionLeading","distributionTrailing":"Polaris-Stack--distributionTrailing","distributionCenter":"Polaris-Stack--distributionCenter","distributionEqualSpacing":"Polaris-Stack--distributionEqualSpacing","distributionFill":"Polaris-Stack--distributionFill","distributionFillEvenly":"Polaris-Stack--distributionFillEvenly","alignmentLeading":"Polaris-Stack--alignmentLeading","alignmentTrailing":"Polaris-Stack--alignmentTrailing","alignmentCenter":"Polaris-Stack--alignmentCenter","alignmentFill":"Polaris-Stack--alignmentFill","alignmentBaseline":"Polaris-Stack--alignmentBaseline","vertical":"Polaris-Stack--vertical","Item-fill":"Polaris-Stack__Item--fill"}

src/classes/TopBar-Menu.json

@@ -0,0 +1 @@
+{"ActivatorWrapper":"Polaris-TopBar-Menu__ActivatorWrapper","Activator":"Polaris-TopBar-Menu__Activator","Section":"Polaris-TopBar-Menu__Section"}

src/classes/TopBar-Message.json

@@ -0,0 +1 @@
+{"Section":"Polaris-Menu-Message__Section"}

src/classes/TopBar-Search.json

@@ -0,0 +1 @@
+{"Search":"Polaris-TopBar-Search","SearchContent":"Polaris-TopBar-Search__SearchContent","visible":"Polaris-TopBar-Search--visible","Results":"Polaris-TopBar-Search__Results"}

src/classes/TopBar-SearchDismissOverlay.json

@@ -0,0 +1 @@
+{"SearchDismissOverlay":"Polaris-TopBar-SearchDismissOverlay","visible":"Polaris-TopBar-SearchDismissOverlay--visible","fade-in":"Polaris-TopBar-SearchDismissOverlay__fade--in"}

src/classes/TopBar-SearchField.json

@@ -0,0 +1 @@
+{"SearchField":"Polaris-TopBar-SearchField","focused":"Polaris-TopBar-SearchField--focused","Input":"Polaris-TopBar-SearchField__Input","Backdrop":"Polaris-TopBar-SearchField__Backdrop","BackdropShowFocusBorder":"Polaris-TopBar-SearchField__BackdropShowFocusBorder","Icon":"Polaris-TopBar-SearchField__Icon","Clear":"Polaris-TopBar-SearchField__Clear","toLightBackground":"Polaris-TopBar-SearchField--toLightBackground"}

src/classes/TopBar-UserMenu.json

@@ -0,0 +1 @@
+{"Details":"Polaris-TopBar-UserMenu__Details","Name":"Polaris-TopBar-UserMenu__Name","Detail":"Polaris-TopBar-UserMenu__Detail"}

src/classes/TopBar.json

@@ -0,0 +1 @@
+{"TopBar":"Polaris-TopBar","LogoDisplayControl":"Polaris-TopBar__LogoDisplayControl","LogoDisplayContainer":"Polaris-TopBar__LogoDisplayContainer","LogoContainer":"Polaris-TopBar__LogoContainer","Logo":"Polaris-TopBar__Logo","LogoLink":"Polaris-TopBar__LogoLink","ContextControl":"Polaris-TopBar__ContextControl","NavigationIcon":"Polaris-TopBar__NavigationIcon","focused":"Polaris-TopBar--focused","IconWrapper":"Polaris-TopBar__IconWrapper","Contents":"Polaris-TopBar__Contents","SearchField":"Polaris-TopBar__SearchField","SecondaryMenu":"Polaris-TopBar__SecondaryMenu"}

src/components/ActionList/components/Item/ContentElement.vue

@@ -36,7 +36,7 @@ import { TextStyle } from '@/components/TextStyle';
 import { Icon } from '@/components/Icon';
 import { Badge } from '@/components/Badge';
 import styles from '@/classes/ActionList.json';
-import type { IconSource } from 'types/type';
+import type { IconSource } from '@/utilities/type';
 
 interface Props {
   id?: string;

src/components/ActionList/components/Item/Item.vue

@@ -48,7 +48,7 @@ import { UnstyledLink } from '@/components/UnstyledLink';
 import styles from '@/classes/ActionList.json';
 import { handleMouseUpByBlurring } from '@/utilities/focus';
 import ContentElement from './ContentElement.vue';
-import type { IconSource } from 'types/type';
+import type { IconSource } from '@/utilities/type';
 
 interface Props {
   id?: string;

src/components/AppProvider/AppProvider.vue

@@ -1,13 +1,17 @@
 <template lang="pug">
 CustomProperties(:color-scheme="colorScheme")
+  EventListener(event="resize", :handler="handleResize")
   slot
   #PolarisPortalsContainer
 </template>
 
 <script setup lang="ts">
 import { provide, ref, onMounted, watch } from 'vue';
+import debounce from 'lodash/debounce';
 import { ScrollLockManager } from 'polaris-react/src/utilities/scroll-lock-manager/scroll-lock-manager';
 import { UniqueIdFactory, globalIdGeneratorFactory } from 'polaris-react/src/utilities/unique-id/unique-id-factory';
+import { navigationBarCollapsed } from 'polaris-react/src/utilities/breakpoints';
+import { EventListener } from '@/components';
 import { PortalManager } from '@/utilities/portal-manager';
 import { FocusManager } from '@/utilities/focus-manager';
 import { CustomProperties } from '../CustomProperties';
@@ -21,13 +25,15 @@ const props = defineProps({
   },
 });
 
-const scrollLockManager = ref(new ScrollLockManager());
+const scrollLockManager = new ScrollLockManager();
 
 const portalManager = new PortalManager();
 
 const uniqueIdFactory = ref(new UniqueIdFactory(globalIdGeneratorFactory));
 
-const focusManager = ref(new FocusManager());
+const focusManager = new FocusManager();
+
+const isNavigationCollapsed = ref(navigationBarCollapsed().matches);
 
 const setBodyStyles = () => {
   // Inlining the following custom properties to maintain backward
@@ -37,6 +43,16 @@ const setBodyStyles = () => {
   document.body.style.color = 'var(--p-text)';
 };
 
+const handleResize = debounce(
+  () => {
+    if (isNavigationCollapsed.value !== navigationBarCollapsed().matches) {
+      isNavigationCollapsed.value = !isNavigationCollapsed.value;
+    }
+  },
+  40,
+  {trailing: true, leading: true, maxWait: 40},
+);
+
 watch(
   () => props.colorScheme,
   (newColorScheme: CustomPropertiesProps['colorScheme'], oldColorScheme: CustomPropertiesProps['colorScheme']) => {
@@ -52,6 +68,7 @@ onMounted(() => {
   }
 });
 
+provide('mediaQueryContext', { isNavigationCollapsed: isNavigationCollapsed.value });
 provide('scrollLockManager', scrollLockManager);
 provide('portalManager', portalManager);
 provide('uniqueIdFactory', uniqueIdFactory.value);

src/components/Avatar/Avatar.vue

@@ -13,8 +13,8 @@ span(
         y="50%",
         :dy="verticalOffset",
         fill="currentColor",
-        fontSize="20",
-        textAnchor="middle",
+        font-size="20",
+        text-anchor="middle",
       ) {{ initials }}
   Image(
     v-if="source && status !== Status.Errored",
@@ -33,8 +33,7 @@ import { classNames, variationName } from 'polaris-react/src/utilities/css';
 import styles from '@/classes/Avatar.json';
 import { styleClass } from './utils';
 import { Image } from '../Image';
-
-type Size = 'extraSmall' | 'small' | 'medium' | 'large';
+import type { Size } from './utils';
 
 enum Status {
   Pending = 'PENDING',

src/components/Avatar/utils.ts

@@ -5,3 +5,23 @@ export function styleClass(name?: string) {
     ? STYLE_CLASSES[name.charCodeAt(0) % STYLE_CLASSES.length]
     : STYLE_CLASSES[0];
 }
+
+export type Size = 'extraSmall' | 'small' | 'medium' | 'large';
+
+export interface AvatarProps {
+  /**
+   * Size of avatar
+   * @default 'medium'
+   */
+  size?: Size;
+  /** The name of the person */
+  name?: string;
+  /** Initials of person to display */
+  initials?: string;
+  /** Whether the avatar is for a customer */
+  customer?: boolean;
+  /** URL of the avatar image which falls back to initials if the image fails to load */
+  source?: string;
+  /** Accessible label for the avatar image */
+  accessibilityLabel?: string;
+}

src/components/Backdrop/Backdrop.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+div(:class="className")
+  ScrollLock
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { classNames } from 'polaris-react/src/utilities/css';
+import styles from '@/classes/Backdrop.json';
+import { ScrollLock } from '../ScrollLock';
+
+interface Props {
+  belowNavigation?: boolean;
+  transparent?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const className = computed(() => {
+  return classNames(
+    styles.Backdrop,
+    props.belowNavigation && styles.belowNavigation,
+    props.transparent && styles.transparent,
+  );
+});
+</script>
+
+<style lang="scss">
+@import 'polaris-react/src/components/Backdrop/Backdrop.scss';
+</style>

src/components/Backdrop/index.ts

@@ -0,0 +1 @@
+export { default as Backdrop } from './Backdrop.vue';

src/components/Badge/utils.ts

@@ -0,0 +1,17 @@
+type Status = 'info' | 'success' | 'attention' | 'warning' | 'critical' | 'new';
+type Progress = 'incomplete' | 'partiallyComplete' | 'complete';
+type Size = 'small' | 'medium';
+
+export interface BadgeProps {
+  /** Colors and labels the badge with the given status. */
+  status?: Status;
+  /** Render a pip showing the progress of a given task. */
+  progress?: Progress;
+  /**
+   * Medium or small size.
+   * @default 'medium'
+   */
+  size?: Size;
+  /** Pass a custom accessibilityLabel */
+  statusAndProgressLabelOverride?: string;
+}

src/components/Button/Button.vue

@@ -56,7 +56,7 @@ import { classNames, variationName } from 'polaris-react/src/utilities/css';
 import CaretDownMinor from '@icons/CaretDownMinor.svg';
 import { handleMouseUpByBlurring } from '@/utilities/focus';
 import { capitalize } from 'lodash';
-import type { IconSource } from 'types/type';
+import type { IconSource } from '@/utilities/type';
 import styles from '@/classes/Button.json';
 import type { ConnectedDisclosure } from './utils';
 import { Popover } from '../Popover';