Skip to content

Commit 0b6cb81

Browse files
jd-solankijd-solanki
committed
fix(--a-spacing): properly inherit spacing by removing useSpacing
1 parent d9f3763 commit 0b6cb81

File tree

16 files changed

+17
-94
lines changed

16 files changed

+17
-94
lines changed

‎docs/components/demos/list/DemoListSlots.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,9 @@ const items = [
2323
<template #append="{ index }">
2424
<ABtn
2525
variant="outline"
26-
class="text-sm opacity-35 min-h-[24px]"
26+
class="text-sm opacity-35 min-h-[24px] [--a-spacing:.5]"
2727
color="default"
2828
:states="false"
29-
:spacing="50"
3029
>
3130
&#8984; {{ index + 1 }}
3231
</ABtn>

‎docs/guide/features/spacing.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22

33
There might be cases where using component libraries introduces several restrictions. Assume you want to reduce the overall spacing of the button but don't want to reduce the font size of it. With other frameworks, you have to manually adjust the padding, margin, height, etc to get the desired result.
44

5-
However, Anu provides `spacing` prop to adjust the spacing of any component that supports this feature.
5+
However, Anu provides `--a-spacing` CSS variable to adjust the spacing of any component that supports this feature.
66

7-
<ABtn :spacing="80" variant="outline">Button</ABtn>
7+
You can use `spacing-<number>` class to add/update `--a-spacing` CSS variable.
8+
9+
<ABtn class="spacing-80" variant="outline">Button</ABtn>
810

911
```vue{3}
10-
<template
12+
<template>
1113
<ABtn
12-
:spacing="80"
14+
class="spacing-80"
1315
variant="outline"
1416
>
1517
spacing-80

‎packages/anu-vue/src/components/alert/AAlert.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import type { ExtractPropTypes } from 'vue'
33
import { useInternalBooleanState } from '@/composables/useInternalBooleanState'
44
import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
55
import { configurable as configurableProp, spacing as spacingProp } from '@/composables/useProps'
6-
import { useSpacing } from '@/composables/useSpacing'
76
87
const props = defineProps({
98
spacing: spacingProp,
@@ -52,7 +51,6 @@ defineOptions({
5251
5352
const { internalState: isAlertVisible, toggle: toggleAlertVisibility } = useInternalBooleanState(toRef(props, 'modelValue'), emit, 'update:modelValue', true)
5453
55-
const spacing = useSpacing(toRef(props, 'spacing'))
5654
const { getLayerClasses } = useLayer()
5755
const { styles, classes } = getLayerClasses(
5856
toRef(props, 'color'),
@@ -79,10 +77,7 @@ const handleAppendIconClick = () => {
7977
...classes,
8078
isAlertVisible ? 'flex' : 'hidden',
8179
]"
82-
:style="[
83-
...styles,
84-
{ '--a-spacing': spacing / 100 },
85-
]"
80+
:style="styles"
8681
>
8782
<!-- ℹ️ We need div as wrapper with span having `vertical-align: text-top` to center the icon with the text -->
8883
<div v-if="props.icon">

‎packages/anu-vue/src/components/avatar/AAvatar.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@
22
import { toRef } from 'vue'
33
import { avatarProps } from './props'
44
import { useLayer } from '@/composables/useLayer'
5-
import { useSpacing } from '@/composables/useSpacing'
65
76
const props = defineProps(avatarProps)
87
98
defineOptions({
109
name: 'AAvatar',
1110
})
1211
13-
const spacing = useSpacing(toRef(props, 'spacing'))
1412
const { getLayerClasses } = useLayer()
1513
const { styles, classes } = getLayerClasses(
1614
toRef(props, 'color'),
@@ -23,10 +21,7 @@ const { styles, classes } = getLayerClasses(
2321
<div
2422
class="a-avatar overflow-hidden inline-flex items-center justify-center"
2523
:class="classes"
26-
:style="[
27-
...styles,
28-
{ '--a-spacing': spacing / 100 },
29-
]"
24+
:style="styles"
3025
>
3126
<slot>
3227
<img

‎packages/anu-vue/src/components/badge/ABadge.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { defu } from 'defu'
33
import type { PropType } from 'vue'
44
import { color as colorProp, spacing as spacingProp } from '@/composables/useProps'
5-
import { useSpacing } from '@/composables/useSpacing'
65
import { isNumeric } from '@/utils/helpers'
76
87
type VerticalAnchor = 'top' | 'bottom'
@@ -93,7 +92,6 @@ defineOptions({
9392
inheritAttrs: false,
9493
})
9594
96-
const spacing = useSpacing(toRef(props, 'spacing'))
9795
const formatMaxContent = (content: unknown) => {
9896
if (!isNumeric(content) || props.max === undefined)
9997
return content
@@ -137,10 +135,7 @@ const positionStyles = computed(() => {
137135
{ 'a-badge-dot': props.dot },
138136
{ 'a-badge-bordered': props.bordered },
139137
]"
140-
:style="[
141-
positionStyles,
142-
{ '--a-spacing': spacing / 100 },
143-
]"
138+
:style="positionStyles"
144139
>
145140
<template v-if="!props.dot">
146141
<template v-if="$slots.content">

‎packages/anu-vue/src/components/base-input/ABaseInput.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { baseInputProps } from './props'
33
import type { baseInputSlots } from './slots'
44
import { ALoader } from '@/components/loader'
55
import { useConfigurable } from '@/composables/useConfigurable'
6-
import { useSpacing } from '@/composables/useSpacing'
76
import TransitionExpand from '@/transitions/TransitionExpand.vue'
87
98
// TODO: Provide a way to attach classes to root element
@@ -21,8 +20,6 @@ defineSlots<typeof baseInputSlots>()
2120
2221
const attrs = useAttrs()
2322
24-
const spacing = useSpacing(toRef(props, 'spacing'))
25-
2623
const configurableLabel = useConfigurable(toRef(props, 'label'))
2724
2825
const iconTransition = 'transition duration-150 ease -in'
@@ -48,7 +45,6 @@ defineExpose({
4845
(props.disabled || props.readonly) && 'pointer-events-none',
4946
!(props.disabled || props.readonly) && 'a-base-input-interactive',
5047
]"
51-
:style="{ '--a-spacing': spacing / 100 }"
5248
>
5349
<!-- 👉 Label -->
5450
<slot name="label">

‎packages/anu-vue/src/components/btn/ABtn.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { ASpinner } from '@/components/spinner'
33
import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
44
import { configurable as configurableProp, disabled as disabledProp, spacing as spacingProp } from '@/composables/useProps'
5-
import { useSpacing } from '@/composables/useSpacing'
65
76
const props = defineProps({
87
...useLayerProps({
@@ -35,7 +34,6 @@ defineOptions({
3534
name: 'ABtn',
3635
})
3736
38-
const spacing = useSpacing(toRef(props, 'spacing'))
3937
const { getLayerClasses } = useLayer()
4038
4139
const { styles, classes } = getLayerClasses(
@@ -48,10 +46,7 @@ const { styles, classes } = getLayerClasses(
4846
<template>
4947
<button
5048
:tabindex="props.disabled ? -1 : 0"
51-
:style="[
52-
...styles,
53-
{ '--a-spacing': spacing / 100 },
54-
]"
49+
:style="styles"
5550
class="inline-flex whitespace-nowrap justify-center items-center relative"
5651
:class="[
5752
props.iconOnly ? 'a-btn-icon-only' : 'a-btn',

‎packages/anu-vue/src/components/card/ACard.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { ALoader } from '@/components/loader'
77
import { isTypographyUsed } from '@/components/typography/utils'
88
import { ConfigurableValue, useConfigurable } from '@/composables/useConfigurable'
99
import { useLayer } from '@/composables/useLayer'
10-
import { useSpacing } from '@/composables/useSpacing'
1110
1211
const props = defineProps(cardProps)
1312
@@ -19,7 +18,6 @@ defineSlots<typeof cardSlots>()
1918
2019
const slots = useSlots()
2120
22-
const spacing = useSpacing(toRef(props, 'spacing'))
2321
const { getLayerClasses } = useLayer()
2422
const { styles, classes } = getLayerClasses(
2523
toRef(props, 'color'),
@@ -43,10 +41,7 @@ else
4341
<div
4442
class="a-card relative overflow-hidden bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))]"
4543
:class="classes"
46-
:style="[
47-
...styles,
48-
{ '--a-spacing': spacing / 100 },
49-
]"
44+
:style="styles"
5045
>
5146
<!-- 👉 Loader -->
5247
<!--

‎packages/anu-vue/src/components/data-table/ADataTable.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,6 @@ const paginationMeta = computed(() => {
311311
<ASelect
312312
v-model="currentPageSize"
313313
:options="Array.from(new Set([props.pageSize, 5, 10, 15, 20])).sort((a, b) => a - b)"
314-
:spacing="80"
315314
options-wrapper-classes="a-data-table-per-page-select--options-wrapper-classes"
316315
/>
317316
</div>

‎packages/anu-vue/src/components/list/AList.vue

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { listProps } from './props'
55
import type { listSlots } from './slots'
66
import { listItemSlot } from './slots'
77
import { isObject } from '@/utils/helpers'
8-
import { useSpacing } from '@/composables/useSpacing'
98
import { useGroupModel } from '@/composables'
109
import { AListItem } from '@/components/list-item'
1110
@@ -24,8 +23,6 @@ defineOptions({
2423
2524
defineSlots<typeof listSlots>()
2625
27-
const spacing = useSpacing(toRef(props, 'spacing'))
28-
2926
const extractItemValueFromItemOption = (item: ListPropItems[number]) => isObject(item) ? (item.value || item) : item
3027
3128
const { options, select: selectListItem, value } = useGroupModel({
@@ -45,10 +42,7 @@ const handleListItemClick = (item: ListPropItems[number]) => {
4542
</script>
4643

4744
<template>
48-
<ul
49-
class="a-list grid"
50-
:style="[{ '--a-spacing': spacing / 100 }]"
51-
>
45+
<ul class="a-list grid">
5246
<!-- 👉 Slot: before -->
5347
<li v-if="$slots.before">
5448
<slot name="before" />
@@ -59,7 +53,7 @@ const handleListItemClick = (item: ListPropItems[number]) => {
5953
<AListItem
6054
v-for="(item, index) in props.items"
6155
:key="index"
62-
:text="typeof item === 'string' ? item : undefined"
56+
:text="typeof item === 'string' || typeof item === 'number' ? item : undefined"
6357
v-bind="typeof item === 'string' ? {} : item"
6458
:avatar-append="props.avatarAppend"
6559
:icon-append="props.iconAppend"

0 commit comments

Comments
 (0)