Merge remote-tracking branch 'origin/master' into docs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "polaris_version": "12.20.0",
   "description": "Shopify Polaris 12 - UI library for Vue 3",
   "author": "Ownego Team",

src/components/Box/Box.vue

@@ -29,7 +29,6 @@ const props = withDefaults(defineProps<BoxProps>(), {
 
 defineSlots<BoxSlots>();
 
-
 const borderStyleValue = computed(() => (props.borderStyle
   ? props.borderStyle
   : props.borderColor ||

src/components/Button/Button.vue

@@ -105,7 +105,7 @@ const commonProps = computed(() => {
     role,
     accessibilityLabel,
     ariaDescribedBy,
-    'data-primary-link': props.dataPrimaryLink,
+    'data-primary-link': props.dataPrimaryLink ? true : undefined,
   };
 });
 const linkProps = computed(() => {
@@ -114,7 +114,7 @@ const linkProps = computed(() => {
   return {
     url,
     external,
-    download,
+    download: download ?? undefined,
   };
 });
 const actionProps = computed(() => {

src/components/IndexTable/components/Row/Row.vue

@@ -17,7 +17,7 @@ component(
 </template>
 
 <script setup lang="ts">
-import { type VNode, ref, computed, provide, onMounted, type Ref, toRef } from 'vue';
+import { type VNode, ref, computed, provide, onMounted, type Ref, toRef, getCurrentInstance } from 'vue';
 import { useToggle } from '@/use/useToggle';
 import { classNames, variationName } from '@/utilities/css';
 import type { VueNode } from '@/utilities/types';
@@ -74,6 +74,8 @@ const emits = defineEmits<RowEvents>();
 const { selectable, selectMode, condensed } = useIndexRowContext();
 const onSelectionChange = useIndexSelectionChangeContext();
 
+const currentInstance = getCurrentInstance();
+
 const {
   value: hovered,
   setTrue: setHoverIn,
@@ -131,7 +133,10 @@ const handleRowClick = (event: MouseEvent) => {
   event.stopPropagation();
   event.preventDefault();
 
-  emits('click');
+  if (currentInstance?.vnode.props?.onClick) {
+    emits('click');
+    return;
+  }
 
   if (primaryLinkElement.value && !selectMode.value) {
     isNavigating.value = true;

src/components/Link/Link.vue

@@ -15,7 +15,7 @@ UnstyledLink(
   :external="external",
   :target="target",
   :aria-label="accessibilityLabel",
-  :data-primary-link="dataPrimaryLink",
+  :data-primary-link="dataPrimaryLink ?? undefined",
   @click="emits('click')",
 )
   slot
@@ -25,7 +25,7 @@ button(
   type="button",
   :class="className",
   :aria-label="accessibilityLabel",
-  :data-primary-link="dataPrimaryLink",
+  :data-primary-link="dataPrimaryLink ?? undefined",
   @click="emits('click')",
 )
   slot

src/components/ResourceItem/ResourceItem.vue

@@ -39,6 +39,7 @@ li(:class="listItemClassName", :dataHref="dataHref")
         padding-inline-end="300",
         padding-block-start="300",
         padding-block-end="300",
+        :zIndex="'var(--pc-resource-item-content-stacking-order)'",
       )
         InlineGrid(:columns="{ xs: '1fr auto' }")
           InlineGrid(

src/components/TextField/TextField.vue

@@ -425,7 +425,6 @@ const handleExpandingResize = (heightValue: number) => {
 
 const handleOnFocus = (e: FocusEvent | MouseEvent) => {
   focus.value = true;
-
   if (props.selectTextOnFocus && !props.suggestion) {
     inputElm.value?.select();
   }
@@ -447,7 +446,7 @@ const input = () => h(props.multiline ? 'textarea' : 'input', {
   disabled: props.disabled,
   readOnly: props.readOnly,
   role: props.role,
-  autoFocus: props.autoFocus,
+  autoFocus: props.autoFocus ? props.autoFocus : undefined,
   value: normalizedValue.value || props.value,
   placeholder: props.placeholder,
   style: style.value,
@@ -523,7 +522,6 @@ function handleClick(e: MouseEvent) {
   ) {
     return;
   }
-
   inputElm.value?.focus();
 }
 

src/components/UnstyledButton/UnstyledButton.vue

@@ -6,7 +6,7 @@ UnstyledLink(
   v-bind="{ ...attrs, ...interactiveProps }",
   :url="url",
   :external="external",
-  :download="download",
+  :download="download ? download : undefined",
   :target="target",
   @click="handleClick",
   v-on="linkListeners",

src/components/UnstyledLink/UnstyledLink.vue

@@ -8,9 +8,9 @@ component(
 a(
   v-else,
   :target="target",
+  v-bind="{ ...attrs, ...linkProps.rest, ...unstyled.props }",
   :href="url"
   :rel="rel",
-  v-bind="{ ...attrs, ...linkProps.rest, ...unstyled.props }",
 )
   slot
 </template>
@@ -33,7 +33,9 @@ const attrs = useAttrs();
 
 const LinkComponent = useLink();
 
-const props = defineProps<UnstyledLinkProps>();
+const props = withDefaults(defineProps<UnstyledLinkProps>(), {
+  download: undefined,
+});
 
 const linkProps = computed(() => {
   const {