fix: duplicate style attributes

jd-solanki · jd-solanki · commit 1676212997aa · 2022-10-25T22:53:36.000+05:30
diff --git a/packages/anu-vue/src/components/alert/AAlert.tsx b/packages/anu-vue/src/components/alert/AAlert.tsx
@@ -73,7 +73,7 @@ export const AAlert = defineComponent({
     }
 
     // TODO: Omit writing `props.modelValue ??` multiple times
-    return () => <div style={{ '--a-spacing': spacing.value / 100 }} class={['a-alert items-start w-full', props.modelValue ?? isAlertVisible.value ? 'flex' : 'hidden', ...classes.value]} style={[...styles.value]}>
+    return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-alert items-start w-full', props.modelValue ?? isAlertVisible.value ? 'flex' : 'hidden', ...classes.value]}>
       {/* ℹ️ We need div as wrapper with span having `vertical-align: text-top` to center the icon with the text */}
       {props.icon ? <div><span class={props.icon}></span></div> : null}
       <div class="flex-grow">{slots.default?.()}</div>
diff --git a/packages/anu-vue/src/components/avatar/AAvatar.tsx b/packages/anu-vue/src/components/avatar/AAvatar.tsx
@@ -35,7 +35,7 @@ export const AAvatar = defineComponent({
       return props.content
     })
 
-    return () => <div style={{ '--a-spacing': spacing.value / 100 }} class={['a-avatar overflow-hidden inline-flex items-center justify-center', ...classes.value]} style={[...styles.value]}>
+    return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-avatar overflow-hidden inline-flex items-center justify-center', ...classes.value]}>
       {
         slots.default
           ? slots.default()
diff --git a/packages/anu-vue/src/components/badge/ABadge.tsx b/packages/anu-vue/src/components/badge/ABadge.tsx
@@ -96,7 +96,7 @@ export const ABadge = defineComponent({
 
     return () => <div class={['a-badge-wrapper relative']}>
       {slots.default?.()}
-      <div {...attrs} style={{ '--a-spacing': spacing.value / 100 }} class={[`a-badge bg-${props.color} absolute`, { 'a-badge-dot': props.dot }, { 'a-badge-bordered': props.bordered }]} style={positionStyles.value}>
+      <div {...attrs} style={[positionStyles.value, { '--a-spacing': spacing.value / 100 }]} class={[`a-badge bg-${props.color} absolute`, { 'a-badge-dot': props.dot }, { 'a-badge-bordered': props.bordered }]}>
         {badgeSlotContent.value}
       </div>
     </div>
diff --git a/packages/anu-vue/src/components/btn/ABtn.tsx b/packages/anu-vue/src/components/btn/ABtn.tsx
@@ -67,7 +67,7 @@ export const ABtn = defineComponent({
     )
 
     // FIX: ABtn gets full width if placed inside flex container
-    return () => <button style={{ '--a-spacing': spacing.value / 100 }} class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]} style={[...styles.value]}>
+    return () => <button style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]}>
       {props.icon ? <i class={props.icon}></i> : null}{slots.default?.()}{props.appendIcon ? <i class={props.appendIcon}></i> : null}
     </button>
   },
diff --git a/packages/anu-vue/src/components/card/ACard.tsx b/packages/anu-vue/src/components/card/ACard.tsx
@@ -48,7 +48,7 @@ export const ACard = defineComponent({
       }
     }
 
-    return () => <div style={{ '--a-spacing': spacing.value / 100 }} class={['a-card overflow-hidden uno-layer-base-bg-[hsl(var(--a-layer))]', ...classes.value]} style={[...styles.value]}>
+    return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-card overflow-hidden uno-layer-base-bg-[hsl(var(--a-layer))]', ...classes.value]}>
       {/* 👉 Image */}
       {props.img ? <img src={props.img} alt="card-img"></img> : null}
 

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export const AAlert = defineComponent({`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	// TODO: Omit writing `props.modelValue ??` multiple times
`76`		`- return () => <div style={{ '--a-spacing': spacing.value / 100 }} class={['a-alert items-start w-full', props.modelValue ?? isAlertVisible.value ? 'flex' : 'hidden', ...classes.value]} style={[...styles.value]}>`
	`76`	`+ return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-alert items-start w-full', props.modelValue ?? isAlertVisible.value ? 'flex' : 'hidden', ...classes.value]}>`
`77`	`77`	{/* ℹ️ We need div as wrapper with span having `vertical-align: text-top` to center the icon with the text */}
`78`	`78`	`{props.icon ? <div><span class={props.icon}></span></div> : null}`
`79`	`79`	`<div class="flex-grow">{slots.default?.()}</div>`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export const AAvatar = defineComponent({`
`35`	`35`	`return props.content`
`36`	`36`	`})`
`37`	`37`
`38`		`- return () => <div style={{ '--a-spacing': spacing.value / 100 }} class={['a-avatar overflow-hidden inline-flex items-center justify-center', ...classes.value]} style={[...styles.value]}>`
	`38`	`+ return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-avatar overflow-hidden inline-flex items-center justify-center', ...classes.value]}>`
`39`	`39`	`{`
`40`	`40`	`slots.default`
`41`	`41`	`? slots.default()`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ export const ABtn = defineComponent({`
`67`	`67`	`)`
`68`	`68`
`69`	`69`	`// FIX: ABtn gets full width if placed inside flex container`
`70`		`- return () => <button style={{ '--a-spacing': spacing.value / 100 }} class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]} style={[...styles.value]}>`
	`70`	`+ return () => <button style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]}>`
`71`	`71`	`{props.icon ? <i class={props.icon}></i> : null}{slots.default?.()}{props.appendIcon ? <i class={props.appendIcon}></i> : null}`
`72`	`72`	`</button>`
`73`	`73`	`},`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ export const ACard = defineComponent({`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`
`51`		`- return () => <div style={{ '--a-spacing': spacing.value / 100 }} class={['a-card overflow-hidden uno-layer-base-bg-[hsl(var(--a-layer))]', ...classes.value]} style={[...styles.value]}>`
	`51`	`+ return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-card overflow-hidden uno-layer-base-bg-[hsl(var(--a-layer))]', ...classes.value]}>`
`52`	`52`	`{/* 👉 Image */}`
`53`	`53`	`{props.img ? <img src={props.img} alt="card-img"></img> : null}`
`54`	`54`