Merge pull request #153 from ownego/dev

Update DataTable & IndexTable components

Author: juzser

.storybook/preview.js

@@ -13,6 +13,7 @@ export const parameters = {
       return `${src.replace(pattern, '$1')}`;
     },
     source: {
+      language: 'html',
       state: 'open',
     },
   },

src/classes/DataTable.json

@@ -0,0 +1 @@
+{"DataTable":"Polaris-DataTable","condensed":"Polaris-DataTable--condensed","Navigation":"Polaris-DataTable__Navigation","IncreasedTableDensity":"Polaris-DataTable__IncreasedTableDensity","Pip":"Polaris-DataTable__Pip","Pip-visible":"Polaris-DataTable__Pip--visible","ScrollContainer":"Polaris-DataTable__ScrollContainer","Table":"Polaris-DataTable__Table","TableRow":"Polaris-DataTable__TableRow","Cell":"Polaris-DataTable__Cell","ZebraStripingOnData":"Polaris-DataTable__ZebraStripingOnData","RowCountIsEven":"Polaris-DataTable__RowCountIsEven","ShowTotalsInFooter":"Polaris-DataTable__ShowTotalsInFooter","Cell-firstColumn":"Polaris-DataTable__Cell--firstColumn","Cell-numeric":"Polaris-DataTable__Cell--numeric","Cell-truncated":"Polaris-DataTable__Cell--truncated","Cell-header":"Polaris-DataTable__Cell--header","Cell-sortable":"Polaris-DataTable__Cell--sortable","Heading-left":"Polaris-DataTable__Heading--left","Cell-verticalAlignTop":"Polaris-DataTable__Cell--verticalAlignTop","Cell-verticalAlignBottom":"Polaris-DataTable__Cell--verticalAlignBottom","Cell-verticalAlignMiddle":"Polaris-DataTable__Cell--verticalAlignMiddle","Cell-verticalAlignBaseline":"Polaris-DataTable__Cell--verticalAlignBaseline","hoverable":"Polaris-DataTable--hoverable","Cell-hovered":"Polaris-DataTable__Cell--hovered","Icon":"Polaris-DataTable__Icon","Heading":"Polaris-DataTable__Heading","StickyHeaderEnabled":"Polaris-DataTable__StickyHeaderEnabled","StickyTable":"Polaris-DataTable__StickyTable","Cell-sorted":"Polaris-DataTable__Cell--sorted","Cell-total":"Polaris-DataTable__Cell--total","ShowTotals":"Polaris-DataTable__ShowTotals","Cell-total-footer":"Polaris-DataTable--cellTotalFooter","Footer":"Polaris-DataTable__Footer","StickyTableHeader":"Polaris-DataTable__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-DataTable__StickyTableHeader--isSticky","StickyTableColumnHeader-isScrolling":"Polaris-DataTable__StickyTableColumnHeader--isScrolling","StickyTableHeadingsRow":"Polaris-DataTable__StickyTableHeadingsRow","FixedFirstColumn":"Polaris-DataTable__FixedFirstColumn","separate":"Polaris-DataTable--separate","TooltipContent":"Polaris-DataTable__TooltipContent"}

src/classes/IndexTable-Checkbox.json

@@ -0,0 +1 @@
+{"TableCellContentContainer":"Polaris-IndexTable-Checkbox__TableCellContentContainer","Wrapper":"Polaris-IndexTable-Checkbox__Wrapper","expanded":"Polaris-IndexTable-Checkbox--expanded","condensed":"Polaris-IndexTable-Checkbox--condensed"}

src/classes/IndexTable-ScrollContainer.json

@@ -0,0 +1 @@
+{"ScrollContainer":"Polaris-IndexTable-ScrollContainer"}

src/classes/IndexTable.json

@@ -0,0 +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","TableHeading":"Polaris-IndexTable__TableHeading","TableHeading-flush":"Polaris-IndexTable__TableHeading--flush","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/classes/IndexTableBase.json

@@ -0,0 +1 @@
+{"IndexTable":"Polaris-IndexTableBase__IndexTable","LoadingContainer-enter":"Polaris-IndexTableBase__LoadingContainer--enter","LoadingContainer-enter-active":"Polaris-IndexTableBase--loadingContainerEnterActive","LoadingContainer-exit":"Polaris-IndexTableBase__LoadingContainer--exit","LoadingContainer-exit-active":"Polaris-IndexTableBase--loadingContainerExitActive","LoadingPanel":"Polaris-IndexTableBase__LoadingPanel","LoadingPanelRow":"Polaris-IndexTableBase__LoadingPanelRow","LoadingPanelText":"Polaris-IndexTableBase__LoadingPanelText","Table":"Polaris-IndexTableBase__Table","Table-scrolling":"Polaris-IndexTableBase__Table--scrolling","TableCell-first":"Polaris-IndexTableBase__TableCell--first","TableCell":"Polaris-IndexTableBase__TableCell","TableHeading-first":"Polaris-IndexTableBase__TableHeading--first","TableHeading-second":"Polaris-IndexTableBase__TableHeading--second","Table-unselectable":"Polaris-IndexTableBase__Table--unselectable","TableRow":"Polaris-IndexTableBase__TableRow","TableRow-unclickable":"Polaris-IndexTableBase__TableRow--unclickable","statusSuccess":"Polaris-IndexTableBase--statusSuccess","statusSubdued":"Polaris-IndexTableBase--statusSubdued","TableRow-hovered":"Polaris-IndexTableBase__TableRow--hovered","TableRow-selected":"Polaris-IndexTableBase__TableRow--selected","TableRow-subdued":"Polaris-IndexTableBase__TableRow--subdued","TableHeading":"Polaris-IndexTableBase__TableHeading","TableHeading-flush":"Polaris-IndexTableBase__TableHeading--flush","ColumnHeaderCheckboxWrapper":"Polaris-IndexTableBase__ColumnHeaderCheckboxWrapper","FirstStickyHeaderElement":"Polaris-IndexTableBase__FirstStickyHeaderElement","TableHeading-unselectable":"Polaris-IndexTableBase__TableHeading--unselectable","TableCell-flush":"Polaris-IndexTableBase__TableCell--flush","Table-sticky-scrolling":"Polaris-IndexTableBase--tableStickyScrolling","TableHeading-last":"Polaris-IndexTableBase__TableHeading--last","Table-sticky-last":"Polaris-IndexTableBase--tableStickyLast","StickyTable":"Polaris-IndexTableBase__StickyTable","StickyTableHeader":"Polaris-IndexTableBase__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-IndexTableBase__StickyTableHeader--isSticky","StickyTableColumnHeader":"Polaris-IndexTableBase__StickyTableColumnHeader","StickyTableColumnHeader-isScrolling":"Polaris-IndexTableBase__StickyTableColumnHeader--isScrolling","StickyTableHeadings":"Polaris-IndexTableBase__StickyTableHeadings","StickyTableHeading-second":"Polaris-IndexTableBase__StickyTableHeading--second","unselectable":"Polaris-IndexTableBase--unselectable","StickyTableHeading-second-scrolling":"Polaris-IndexTableBase--stickyTableHeadingSecondScrolling","ScrollLeft":"Polaris-IndexTableBase__ScrollLeft","ScrollRight":"Polaris-IndexTableBase__ScrollRight","ScrollRight-onboarding":"Polaris-IndexTableBase__ScrollRight--onboarding","BulkActionsWrapper":"Polaris-IndexTableBase__BulkActionsWrapper","ScrollBarContainer":"Polaris-IndexTableBase__ScrollBarContainer","scrollBarContainerCondensed":"Polaris-IndexTableBase--scrollBarContainerCondensed","scrollBarContainerHidden":"Polaris-IndexTableBase--scrollBarContainerHidden","ScrollBar":"Polaris-IndexTableBase__ScrollBar","disableTextSelection":"Polaris-IndexTableBase--disableTextSelection","selectMode":"Polaris-IndexTableBase--selectMode","EmptySearchResultWrapper":"Polaris-IndexTableBase__EmptySearchResultWrapper","condensedRow":"Polaris-IndexTableBase--condensedRow","CondensedList":"Polaris-IndexTableBase__CondensedList","HeaderWrapper":"Polaris-IndexTableBase__HeaderWrapper","StickyTable-condensed":"Polaris-IndexTableBase__StickyTable--condensed","StickyTableHeader-condensed":"Polaris-IndexTableBase__StickyTableHeader--condensed","ScrollBarContent":"Polaris-IndexTableBase__ScrollBarContent"}

src/components/BulkActions/BulkActions.vue

@@ -136,7 +136,7 @@ div(
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { debounce } from 'polaris/polaris-react/src/utilities/debounce';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import { clamp } from 'polaris/polaris-react/src/utilities/clamp';
@@ -350,27 +350,33 @@ const activatorLabel = computed(() => {
 
 const hasActionsPopover = computed(() => actionSections.value || rolledInPromotedActions.value.length > 0 || measuring.value);
 
-watch(
-  () => props.selectMode,
-  () => {
-    // Set time out to make sure all the nodes was rendered
-    setTimeout(() => {
-      if (props.promotedActions && !props.actions && moreActionsNode.value) {
-        addedMoreActionsWidthForMeasuring.value =
-          moreActionsNode.value.getBoundingClientRect().width;
-      }
+const initialRenderer = () => {
+  // Set time out to make sure all the nodes was rendered
+  setTimeout(() => {
+    if (props.promotedActions && !props.actions && moreActionsNode.value) {
+      addedMoreActionsWidthForMeasuring.value =
+        moreActionsNode.value.getBoundingClientRect().width;
+    }
 
-      bulkActionsWidth.value = largeScreenButtonsNode.value
-        ? largeScreenButtonsNode.value.getBoundingClientRect().width -
-          addedMoreActionsWidthForMeasuring.value
-        : 0;
+    bulkActionsWidth.value = largeScreenButtonsNode.value
+      ? largeScreenButtonsNode.value.getBoundingClientRect().width -
+        addedMoreActionsWidthForMeasuring.value
+      : 0;
 
-      if (containerNode.value) {
-        containerWidth.value = containerNode.value.getBoundingClientRect().width;
-        measuring.value = false;
-      }
-    }, 1);
-  },
+    if (containerNode.value) {
+      containerWidth.value = containerNode.value.getBoundingClientRect().width;
+      measuring.value = false;
+    }
+  }, 1);
+};
+
+onMounted(() => {
+  initialRenderer();
+});
+
+watch(
+  () => props.selectMode,
+  initialRenderer,
 );
 
 const onTransitionBeforeEnter = (el: Element) => {

src/components/Checkbox/Checkbox.vue

@@ -96,7 +96,7 @@ const helpTextSlot = computed(() => slots['help-text']?.());
 const { useUniqueId } = UseUniqueId();
 const uniqueId = computed(() => useUniqueId('Checkbox', props.id));
 
-const isIndeterminate = computed(() => props.modelValue === 'indeterminate');
+const isIndeterminate = computed(() => props.modelValue === 'indeterminate' || props.checked === 'indeterminate');
 const isChecked = computed(() => (!isIndeterminate.value && Boolean(props.checked))
     || (typeof props.modelValue === 'boolean' && props.modelValue === true));