merge from master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "polaris_version": "9.19.0",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": "Ownego Team",

src/components/ResourceItem/ResourceItem.vue

@@ -34,11 +34,11 @@ li(:class="listItemClassName", :dataHref="dataHref")
       )
       div(:class="containerClassName", :id="id")
         div(
-          v-if="hasSlot(slots.media) || context.selectable",
+          v-if="hasSlot(slots.media) || isSelectable",
           :class="ownedClassName",
         )
           div(
-            v-if="context.selectable",
+            v-if="isSelectable",
             :class="styles.Handle",
             @click="handleLargerSelectionArea",
           )
@@ -52,7 +52,7 @@ li(:class="listItemClassName", :dataHref="dataHref")
                   :label="checkboxAccessibilityLabel",
                   labelHidden,
                   v-model="selected",
-                  :disabled="context.loading",
+                  :disabled="loading",
                 )
           div(
             v-if="hasSlot(slots.media)",
@@ -61,7 +61,7 @@ li(:class="listItemClassName", :dataHref="dataHref")
             slot(name="media")
         div(v-if="hasSlot(slots.default)", :class="styles.Content")
           slot
-        template(v-if="shortcutActions && !context.loading")
+        template(v-if="shortcutActions && !loading")
           div(
             v-if="persistActions",
             :class="styles.Actions",
@@ -107,7 +107,7 @@ li(:class="listItemClassName", :dataHref="dataHref")
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onUpdated, ref, useSlots, watch } from 'vue';
+import { computed, inject, ref, useSlots, watch } from 'vue';
 import { classNames, variationName } from 'polaris/polaris-react/src/utilities/css';
 import { UseI18n } from '@/use';
 import { hasSlot } from '@/utilities/has-slot';
@@ -164,24 +164,33 @@ const i18n = UseI18n();
 const getUniqueCheckboxID = globalIdGeneratorFactory('ResourceListItemCheckbox');
 const getUniqueOverlayID = globalIdGeneratorFactory('ResourceListItemOverlay');
 
-const context = inject('ResourceListContext', {}) as ResourceListContextType;
+const {
+  selectedItems,
+  selectable,
+  selectMode,
+  loading,
+  resourceName,
+  onSelectionChange,
+} = inject('ResourceListContext', {}) as ResourceListContextType;
 
 const actionsMenuVisible = ref(false);
 const focused = ref(false);
 const focusedInner = ref(false);
-const selected = ref(isSelected(props.id, context.selectedItems?.value));
+const selected = ref(isSelected(props.id, selectedItems?.value));
 
 const checkboxId = getUniqueCheckboxID();
 const overlayId = getUniqueOverlayID();
 const node = ref<HTMLDivElement | null>(null);
 const buttonOverlay = ref<HTMLButtonElement | null>(null);
 
+const isSelectable = computed(() => selectable?.value);
+
 const className = computed(() => classNames(
   styles.ResourceItem,
   focused.value && styles.focused,
-  context.selectable?.value && styles.selectable,
+  isSelectable.value && styles.selectable,
   selected.value && styles.selected,
-  context.selectMode?.value && styles.selectMode,
+  selectMode?.value && styles.selectMode,
   props.persistActions && styles.persistActions,
   focusedInner.value && styles.focusedInner,
 ));
@@ -213,17 +222,17 @@ const containerClassName = computed(() => classNames(
     styles[variationName('alignment', props.verticalAlignment)],
 ));
 
-const tabIndex = computed(() => context.loading ? -1 : 0);
+const tabIndex = computed(() => loading ? -1 : 0);
 
 const ariaLabel = computed(() => {
   return props.accessibilityLabel ||
   i18n.translate('Polaris.ResourceList.Item.viewItem', {
-    itemName: props.name || (context.resourceName && context.resourceName.singular) || '',
+    itemName: props.name || (resourceName && resourceName.singular) || '',
   });
 });
 
 watch(
-  () => context.selectedItems?.value,
+  () => selectedItems?.value,
   (newVal, oldVal) => {
     if (newVal !== oldVal) {
       selected.value = isSelected(props.id, newVal);
@@ -277,14 +286,14 @@ const handleSelection = (value: boolean, shiftKey: boolean) => {
     sortOrder,
   } = props;
 
-  if (!id || !context.onSelectionChange) {
+  if (!id || !onSelectionChange) {
     return;
   }
 
   focused.value = value;
   focusedInner.value = value;
 
-  context.onSelectionChange(value, id, sortOrder, shiftKey);
+  onSelectionChange(value, id, sortOrder, shiftKey);
 };
 
 const handleClick = (event: MouseEvent) => {
@@ -294,7 +303,7 @@ const handleClick = (event: MouseEvent) => {
   const { ctrlKey, metaKey } = event;
   const anchor = node.value && node.value.querySelector('a');
 
-  if (context.selectMode) {
+  if (selectMode) {
     handleLargerSelectionArea(event);
     return;
   }
@@ -318,7 +327,7 @@ const handleClick = (event: MouseEvent) => {
 const handleKeyUp = (event: KeyboardEvent) => {
   const { key } = event;
 
-  if (key === 'Enter' && props.url && !context.selectMode) {
+  if (key === 'Enter' && props.url && !selectMode) {
     emits('click', props.id);
   }
 };
@@ -335,11 +344,11 @@ const stopPropagation = (e: Event) => {
   e.stopPropagation();
 };
 
-function isSelected(id: string, selectedItems?: ResourceListSelectedItems) {
+function isSelected(id: string, tmpSelectedItems?: ResourceListSelectedItems) {
   return Boolean(
-    selectedItems &&
-      ((Array.isArray(selectedItems) && selectedItems.includes(id)) ||
-        selectedItems === SELECT_ALL_ITEMS),
+    tmpSelectedItems &&
+      ((Array.isArray(tmpSelectedItems) && tmpSelectedItems.includes(id)) ||
+        tmpSelectedItems === SELECT_ALL_ITEMS),
   );
 }
 </script>

src/components/ResourceList/ResourceList.vue

@@ -224,11 +224,13 @@ const defaultResourceName = {
 const listRef = ref<HTMLUListElement | null>(null);
 const headerRef = ref<HTMLDivElement | null>(null);
 
-const isSelectable = computed(() => Boolean(
-  (props.promotedBulkActions && props.promotedBulkActions.length > 0) ||
-  (props.bulkActions && props.bulkActions.length > 0) ||
-  props.selectable,
-));
+const isSelectable = computed(() => {
+  return Boolean(
+    (props.promotedBulkActions && props.promotedBulkActions.length > 0) ||
+    (props.bulkActions && props.bulkActions.length > 0) ||
+    props.selectable,
+  );
+});
 
 const resourceName = computed(() => props.resourceName
   ? props.resourceName
@@ -650,19 +652,15 @@ const selected = computed<ResourceListSelectedItems>(() => {
   return Object.keys(props.selectedItems).map((key) => props.selectedItems[key]);
 });
 
-const updateProvider = () => {
-  provide<ResourceListContextType>('ResourceListContext', {
-    selectable: isSelectable,
-    selectedItems: selected,
-    selectMode: selectMode,
-    resourceName: props.resourceName,
-    loading: props.loading,
-    onSelectionChange: handleSelectionChange,
-    registerCheckableButtons: handleCheckableButtonRegistration,
-  });
-};
-
-updateProvider();
+provide<ResourceListContextType>('ResourceListContext', {
+  selectable: isSelectable,
+  selectedItems: selected,
+  selectMode: selectMode,
+  resourceName: props.resourceName,
+  loading: props.loading,
+  onSelectionChange: handleSelectionChange,
+  registerCheckableButtons: handleCheckableButtonRegistration,
+});
 </script>
 <style lang="scss">
 @import 'polaris/polaris-react/src/components/ResourceList/ResourceList.scss';

src/components/SkeletonPage/README.stories.mdx

@@ -5,8 +5,6 @@ import { SkeletonPage, Layout, LayoutSection, Card, TextContainer, SkeletonBodyT
 <Meta
   title="Components / Feedback indicators / Skeleton page"
   component={ SkeletonPage }
-  argTypes={{
-  }}
 />
 
 export const Template = (args) => ({
@@ -41,10 +39,10 @@ export const Template = (args) => ({
                 <SkeletonDisplayText size="small" />
                 <SkeletonBodyText :lines="2" />
               </TextContainer>
-            </Card.Section>
+            </CardSection>
             <CardSection>
-              <SkeletonBodyText lines={1} />
-            </Card.Section>
+              <SkeletonBodyText :lines="1" />
+            </CardSection>
           </Card>
           <Card subdued>
             <CardSection>
@@ -100,10 +98,10 @@ Skeleton page is used with other skeleton loading components to provide a low fi
                         <SkeletonDisplayText size="small" />
                         <SkeletonBodyText :lines="2" />
                       </TextContainer>
-                    </Card.Section>
+                    </CardSection>
                     <CardSection>
-                      <SkeletonBodyText lines={1} />
-                    </Card.Section>
+                      <SkeletonBodyText :lines="1" />
+                    </CardSection>
                   </Card>
                   <Card subdued>
                     <CardSection>

src/utilities/resource-list/context.ts

@@ -9,7 +9,7 @@ export interface ResourceListContextType {
     button: CheckboxHandles,
   ): void;
   selectMode?: Ref<boolean>;
-  selectable?: Ref<boolean>;
+  selectable?: ComputedRef<boolean>;
   selectedItems?: ComputedRef<ResourceListSelectedItems>;
   resourceName?: {
     singular: string;

tsconfig.json

@@ -18,7 +18,10 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["node"],
+    "types": [
+      "node",
+      "vite/client"
+    ],
     // "declaration": true,
     // "declarationMap": true,
     // "declarationDir": "dist/types",