Merge pull request #169 from ownego/dev

Migrate 10.4.1

Author: juzser

.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:** [10.3.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.3.0) - Migrated date: *Sep 20th, 2022*.
+**Follow Polaris React version:** [10.4.1](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.4.1) - Migrated date: *Oct 5th, 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:** [10.3.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.3.0) - Migrated date: *Sep 20th, 2022*.
+**Follow Polaris React version:** [10.4.1](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.4.1) - Migrated date: *Oct 5th, 2022*.
 
 <br/>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "1.1.4",
-  "polaris_version": "10.3.0",
+  "version": "1.1.5",
+  "polaris_version": "10.4.1",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": "Ownego Team",
   "keywords": [

src/classes/IndexTable.json

@@ -1 +1 @@
-{"IndexTable":"Polaris-IndexTable","LoadingContainer-enter":"Polaris-IndexTable__LoadingContainer--enter","LoadingContainer-enter-active":"Polaris-IndexTable--loadingContainerEnterActive","LoadingContainer-exit":"Polaris-IndexTable__LoadingContainer--exit","LoadingContainer-exit-active":"Polaris-IndexTable--loadingContainerExitActive","LoadingPanel":"Polaris-IndexTable__LoadingPanel","LoadingPanelRow":"Polaris-IndexTable__LoadingPanelRow","LoadingPanelText":"Polaris-IndexTable__LoadingPanelText","Table":"Polaris-IndexTable__Table","Table-scrolling":"Polaris-IndexTable__Table--scrolling","TableCell-first":"Polaris-IndexTable__TableCell--first","TableCell":"Polaris-IndexTable__TableCell","TableHeading-first":"Polaris-IndexTable__TableHeading--first","TableHeading-second":"Polaris-IndexTable__TableHeading--second","Table-unselectable":"Polaris-IndexTable__Table--unselectable","TableRow":"Polaris-IndexTable__TableRow","TableRow-unclickable":"Polaris-IndexTable__TableRow--unclickable","statusSuccess":"Polaris-IndexTable--statusSuccess","statusSubdued":"Polaris-IndexTable--statusSubdued","TableRow-hovered":"Polaris-IndexTable__TableRow--hovered","TableRow-selected":"Polaris-IndexTable__TableRow--selected","TableRow-subdued":"Polaris-IndexTable__TableRow--subdued","TableRow-disabled":"Polaris-IndexTable__TableRow--disabled","TableHeading":"Polaris-IndexTable__TableHeading","TableHeading-sortable":"Polaris-IndexTable__TableHeading--sortable","TableHeading-flush":"Polaris-IndexTable__TableHeading--flush","TableHeadingSortButton":"Polaris-IndexTable__TableHeadingSortButton","TableHeadingSortIcon":"Polaris-IndexTable__TableHeadingSortIcon","TableHeadingSortIcon-visible":"Polaris-IndexTable__TableHeadingSortIcon--visible","ColumnHeaderCheckboxWrapper":"Polaris-IndexTable__ColumnHeaderCheckboxWrapper","FirstStickyHeaderElement":"Polaris-IndexTable__FirstStickyHeaderElement","TableHeading-unselectable":"Polaris-IndexTable__TableHeading--unselectable","TableCell-flush":"Polaris-IndexTable__TableCell--flush","Table-sticky-scrolling":"Polaris-IndexTable--tableStickyScrolling","TableHeading-last":"Polaris-IndexTable__TableHeading--last","Table-sticky-last":"Polaris-IndexTable--tableStickyLast","StickyTable":"Polaris-IndexTable__StickyTable","StickyTableHeader":"Polaris-IndexTable__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-IndexTable__StickyTableHeader--isSticky","StickyTableColumnHeader":"Polaris-IndexTable__StickyTableColumnHeader","StickyTableColumnHeader-isScrolling":"Polaris-IndexTable__StickyTableColumnHeader--isScrolling","StickyTableHeadings":"Polaris-IndexTable__StickyTableHeadings","StickyTableHeading-second":"Polaris-IndexTable__StickyTableHeading--second","unselectable":"Polaris-IndexTable--unselectable","StickyTableHeading-second-scrolling":"Polaris-IndexTable--stickyTableHeadingSecondScrolling","ScrollLeft":"Polaris-IndexTable__ScrollLeft","ScrollRight":"Polaris-IndexTable__ScrollRight","ScrollRight-onboarding":"Polaris-IndexTable__ScrollRight--onboarding","BulkActionsWrapper":"Polaris-IndexTable__BulkActionsWrapper","ScrollBarContainer":"Polaris-IndexTable__ScrollBarContainer","scrollBarContainerCondensed":"Polaris-IndexTable--scrollBarContainerCondensed","scrollBarContainerHidden":"Polaris-IndexTable--scrollBarContainerHidden","ScrollBar":"Polaris-IndexTable__ScrollBar","disableTextSelection":"Polaris-IndexTable--disableTextSelection","selectMode":"Polaris-IndexTable--selectMode","EmptySearchResultWrapper":"Polaris-IndexTable__EmptySearchResultWrapper","condensedRow":"Polaris-IndexTable--condensedRow","CondensedList":"Polaris-IndexTable__CondensedList","HeaderWrapper":"Polaris-IndexTable__HeaderWrapper","StickyTable-condensed":"Polaris-IndexTable__StickyTable--condensed","StickyTableHeader-condensed":"Polaris-IndexTable__StickyTableHeader--condensed","ScrollBarContent":"Polaris-IndexTable__ScrollBarContent"}
+{"IndexTable":"Polaris-IndexTable","LoadingContainer-enter":"Polaris-IndexTable__LoadingContainer--enter","LoadingContainer-enter-active":"Polaris-IndexTable--loadingContainerEnterActive","LoadingContainer-exit":"Polaris-IndexTable__LoadingContainer--exit","LoadingContainer-exit-active":"Polaris-IndexTable--loadingContainerExitActive","LoadingPanel":"Polaris-IndexTable__LoadingPanel","LoadingPanelRow":"Polaris-IndexTable__LoadingPanelRow","LoadingPanelText":"Polaris-IndexTable__LoadingPanelText","Table":"Polaris-IndexTable__Table","Table-scrolling":"Polaris-IndexTable__Table--scrolling","TableCell-first":"Polaris-IndexTable__TableCell--first","TableCell":"Polaris-IndexTable__TableCell","TableHeading-first":"Polaris-IndexTable__TableHeading--first","TableHeading-second":"Polaris-IndexTable__TableHeading--second","Table-sticky":"Polaris-IndexTable__Table--sticky","Table-unselectable":"Polaris-IndexTable__Table--unselectable","TableRow":"Polaris-IndexTable__TableRow","TableRow-unclickable":"Polaris-IndexTable__TableRow--unclickable","statusSuccess":"Polaris-IndexTable--statusSuccess","statusSubdued":"Polaris-IndexTable--statusSubdued","TableRow-hovered":"Polaris-IndexTable__TableRow--hovered","TableRow-selected":"Polaris-IndexTable__TableRow--selected","TableRow-subdued":"Polaris-IndexTable__TableRow--subdued","TableRow-disabled":"Polaris-IndexTable__TableRow--disabled","TableHeading":"Polaris-IndexTable__TableHeading","TableHeading-sortable":"Polaris-IndexTable__TableHeading--sortable","TableHeading-flush":"Polaris-IndexTable__TableHeading--flush","TableHeadingSortButton":"Polaris-IndexTable__TableHeadingSortButton","TableHeadingSortIcon":"Polaris-IndexTable__TableHeadingSortIcon","TableHeadingSortIcon-visible":"Polaris-IndexTable__TableHeadingSortIcon--visible","ColumnHeaderCheckboxWrapper":"Polaris-IndexTable__ColumnHeaderCheckboxWrapper","FirstStickyHeaderElement":"Polaris-IndexTable__FirstStickyHeaderElement","TableHeading-unselectable":"Polaris-IndexTable__TableHeading--unselectable","TableCell-flush":"Polaris-IndexTable__TableCell--flush","Table-sticky-scrolling":"Polaris-IndexTable--tableStickyScrolling","TableHeading-last":"Polaris-IndexTable__TableHeading--last","Table-sticky-last":"Polaris-IndexTable--tableStickyLast","StickyTable":"Polaris-IndexTable__StickyTable","StickyTableHeader":"Polaris-IndexTable__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-IndexTable__StickyTableHeader--isSticky","StickyTableColumnHeader":"Polaris-IndexTable__StickyTableColumnHeader","StickyTableColumnHeader-isScrolling":"Polaris-IndexTable__StickyTableColumnHeader--isScrolling","StickyTableHeadings":"Polaris-IndexTable__StickyTableHeadings","StickyTableHeading-second":"Polaris-IndexTable__StickyTableHeading--second","unselectable":"Polaris-IndexTable--unselectable","StickyTableHeading-second-scrolling":"Polaris-IndexTable--stickyTableHeadingSecondScrolling","ScrollLeft":"Polaris-IndexTable__ScrollLeft","ScrollRight":"Polaris-IndexTable__ScrollRight","ScrollRight-onboarding":"Polaris-IndexTable__ScrollRight--onboarding","BulkActionsWrapper":"Polaris-IndexTable__BulkActionsWrapper","ScrollBarContainer":"Polaris-IndexTable__ScrollBarContainer","scrollBarContainerCondensed":"Polaris-IndexTable--scrollBarContainerCondensed","scrollBarContainerHidden":"Polaris-IndexTable--scrollBarContainerHidden","ScrollBar":"Polaris-IndexTable__ScrollBar","disableTextSelection":"Polaris-IndexTable--disableTextSelection","selectMode":"Polaris-IndexTable--selectMode","EmptySearchResultWrapper":"Polaris-IndexTable__EmptySearchResultWrapper","condensedRow":"Polaris-IndexTable--condensedRow","CondensedList":"Polaris-IndexTable__CondensedList","HeaderWrapper":"Polaris-IndexTable__HeaderWrapper","StickyTable-condensed":"Polaris-IndexTable__StickyTable--condensed","StickyTableHeader-condensed":"Polaris-IndexTable__StickyTableHeader--condensed","ScrollBarContent":"Polaris-IndexTable__ScrollBarContent"}

src/components/IndexTable/IndexTableBase.vue

@@ -119,7 +119,7 @@ div(:class="styles.IndexTable")
             div(:class="stickyColumnHeaderClassNames")
               div(
                 :class="styles.TableHeading",
-                :key="headings[0].title",
+                :key="getHeadingKey(headings[0])",
                 :style="stickyColumnHeaderStyle",
                 data-index-table-sticky-heading="true",
               )
@@ -174,7 +174,7 @@ div(:class="styles.IndexTable")
             )
               div(
                 v-for="heading, index in headings",
-                :key="heading.title",
+                :key="getHeadingKey(heading)",
                 :class="stickyHeadingClassName(index)",
                 :style="renderStickyHeading(index)",
                 data-index-table-sticky-heading="true",
@@ -205,7 +205,7 @@ div(:class="styles.IndexTable")
           tr
             template(
               v-for="heading, index in headings",
-              :key="`${heading.title}-${index}`",
+              :key="getHeadingKey(heading)",
             )
               th(
                 v-if="index === 0 && selectable",
@@ -365,6 +365,7 @@ const isSmallScreenSelectable = ref(false);
 const stickyWrapper = ref<HTMLElement | null>(null);
 const hideScrollContainer = ref(false);
 const smallScreen = ref(isBreakpointsXS());
+const canFitStickyColumn = ref(true);
 
 const tableHeadings = ref<HTMLElement[]>([]);
 const stickyTableHeadings = ref<HTMLElement[]>([]);
@@ -384,6 +385,34 @@ const scrollContainerRef = computed(() => {
     && scrollableContainerElement.value.scrollableContainerRef;
 });
 
+const handleCanFitStickyColumn = () => {
+  if (!scrollableContainerElement.value || !tableHeadings.value.length) {
+    return;
+  }
+  const scrollableRect =
+    (scrollableContainerElement.value as any).getBoundingClientRect();
+  const checkboxColumnWidth = selectable
+    ? tableHeadings.value[0].getBoundingClientRect().width
+    : 0;
+  const firstStickyColumnWidth =
+    tableHeadings.value[selectable ? 1 : 0].getBoundingClientRect().width;
+  const lastColumnIsNotTheFirst = selectable
+    ? tableHeadings.value.length > 2
+    : 1;
+  // Don't consider the last column in the calculations if it's not sticky
+  const lastStickyColumnWidth =
+    props.lastColumnSticky && lastColumnIsNotTheFirst
+      ? tableHeadings.value[
+        tableHeadings.value.length - 1
+      ].getBoundingClientRect().width
+      : 0;
+  // Secure some space for the remaining columns to be visible
+  const restOfContentMinWidth = 100;
+
+  canFitStickyColumn.value = scrollableRect.width >
+    firstStickyColumnWidth + checkboxColumnWidth + lastStickyColumnWidth + restOfContentMinWidth;
+};
+
 const tableBodyRef = (node) => {
   if (node !== null && !tableInitialized.value) {
     tableInitialized.value = true;
@@ -517,6 +546,7 @@ const handleResize = () => {
   debounceResizeTableScrollbar();
   handleCanScrollRight();
   handleIsSmallScreen();
+  handleCanFitStickyColumn();
 };
 
 const handleScrollContainerScroll = (canScrollLeft, tmpCanScrollRight) => {
@@ -617,6 +647,11 @@ watch(
   checkIsSmallScreenSelectable,
 );
 
+watch(
+  () => [tableInitialized.value],
+  handleCanFitStickyColumn,
+)
+
 const hasBulkActions = computed(() => Boolean(
   (props.promotedBulkActions && props.promotedBulkActions.length > 0) ||
     (props.bulkActions && props.bulkActions.length > 0),
@@ -739,8 +774,11 @@ const tableClassNames = computed(() => classNames(
   selectMode.value && styles.disableTextSelection,
   selectMode.value && shouldShowBulkActions.value && styles.selectMode,
   !selectable?.value && styles['Table-unselectable'],
-  props.lastColumnSticky && styles['Table-sticky-last'],
-  props.lastColumnSticky && canScrollRight && styles['Table-sticky-scrolling'],
+  canFitStickyColumn.value && props.lastColumnSticky && styles['Table-sticky-last'],
+  canFitStickyColumn.value && styles['Table-sticky'],
+  canFitStickyColumn.value &&
+    props.lastColumnSticky &&
+    canScrollRight.value && styles['Table-sticky-scrolling'],
 ));
 
 const handleSelectModeToggle = (val: boolean) => {
@@ -764,6 +802,18 @@ const headingContentClassName = (heading: IndexTableHeading, index: number) => {
   );
 };
 
+const getHeadingKey = (heading: IndexTableHeading): string => {
+  if (heading.id) {
+    return heading.id;
+  }
+
+  if (typeof heading.title === 'string') {
+    return heading.title;
+  }
+
+  return '';
+}
+
 const stickyPositioningStyle = (index: number) => {
   return selectable?.value !== false &&
   isSecond(index) &&

src/components/Tooltip/Tooltip.vue

@@ -66,6 +66,11 @@ const props = withDefaults(defineProps<Props>(), {
   active: false,
 });
 
+const emits = defineEmits<{
+  (e: 'close'): void;
+  (e: 'open'): void;
+}>();
+
 const active = ref<boolean>(props.active);
 
 const mouseEntered = ref<boolean>(false);
@@ -104,14 +109,17 @@ watch(() => activatorContainer.value, () => {
 
 const handleBlur = () => {
   active.value = false;
+  emits('close');
 }
 
 const handleFocus = () => {
   active.value = true;
+  emits('open');
 }
 
 const handleKeyUp = (event: KeyboardEvent) => {
-  if (event.key !== Key.Escape) {return;}
+  if (event.key !== Key.Escape) { return; }
+  emits('close');
   handleBlur();
 }
 

yarn.lock

@@ -9108,8 +9108,8 @@ pnp-webpack-plugin@1.6.4:
     ts-pnp "^1.1.6"
 
 "polaris@https://github.com/juzser/polaris.git":
-  version "10.3.0"
-  resolved "https://github.com/juzser/polaris.git#e0ac963ffcf7bc30bcb6902f88894de976d0f8db"
+  version "10.4.1"
+  resolved "https://github.com/juzser/polaris.git#998d0ca70f2c4828a05e4f31f84612c0ac09b013"
 
 polished@^4.2.2:
   version "4.2.2"