fix(--a-spacing): properly inherit spacing by removing useSpacing

therealokoro · Feb 17, 2023 · 0b6cb81 · 0b6cb81
1 parent d9f3763
commit 0b6cb81
Show file tree

Hide file tree

Showing 16 changed files with 17 additions and 94 deletions.
diff --git a/docs/components/demos/list/DemoListSlots.vue b/docs/components/demos/list/DemoListSlots.vue
@@ -23,10 +23,9 @@ const items = [
         <template #append="{ index }">
           <ABtn
             variant="outline"
-            class="text-sm opacity-35 min-h-[24px]"
+            class="text-sm opacity-35 min-h-[24px] [--a-spacing:.5]"
             color="default"
             :states="false"
-            :spacing="50"
           >
             &#8984; {{ index + 1 }}
           </ABtn>

diff --git a/docs/guide/features/spacing.md b/docs/guide/features/spacing.md
@@ -2,14 +2,16 @@
 
 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.
 
-However, Anu provides `spacing` prop to adjust the spacing of any component that supports this feature.
+However, Anu provides `--a-spacing` CSS variable to adjust the spacing of any component that supports this feature.
 
-<ABtn :spacing="80" variant="outline">Button</ABtn>
+You can use `spacing-<number>` class to add/update `--a-spacing` CSS variable.
+
+<ABtn class="spacing-80" variant="outline">Button</ABtn>
 
 ```vue{3}
-<template
+<template>
   <ABtn
-    :spacing="80"
+    class="spacing-80"
     variant="outline"
   >
     spacing-80

diff --git a/packages/anu-vue/src/components/alert/AAlert.vue b/packages/anu-vue/src/components/alert/AAlert.vue
@@ -3,7 +3,6 @@ import type { ExtractPropTypes } from 'vue'
 import { useInternalBooleanState } from '@/composables/useInternalBooleanState'
 import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
 import { configurable as configurableProp, spacing as spacingProp } from '@/composables/useProps'
-import { useSpacing } from '@/composables/useSpacing'
 
 const props = defineProps({
   spacing: spacingProp,
@@ -52,7 +51,6 @@ defineOptions({
 
 const { internalState: isAlertVisible, toggle: toggleAlertVisibility } = useInternalBooleanState(toRef(props, 'modelValue'), emit, 'update:modelValue', true)
 
-const spacing = useSpacing(toRef(props, 'spacing'))
 const { getLayerClasses } = useLayer()
 const { styles, classes } = getLayerClasses(
   toRef(props, 'color'),
@@ -79,10 +77,7 @@ const handleAppendIconClick = () => {
       ...classes,
       isAlertVisible ? 'flex' : 'hidden',
     ]"
-    :style="[
-      ...styles,
-      { '--a-spacing': spacing / 100 },
-    ]"
+    :style="styles"
   >
     <!-- ℹ️ We need div as wrapper with span having `vertical-align: text-top` to center the icon with the text -->
     <div v-if="props.icon">

diff --git a/packages/anu-vue/src/components/avatar/AAvatar.vue b/packages/anu-vue/src/components/avatar/AAvatar.vue
@@ -2,15 +2,13 @@
 import { toRef } from 'vue'
 import { avatarProps } from './props'
 import { useLayer } from '@/composables/useLayer'
-import { useSpacing } from '@/composables/useSpacing'
 
 const props = defineProps(avatarProps)
 
 defineOptions({
   name: 'AAvatar',
 })
 
-const spacing = useSpacing(toRef(props, 'spacing'))
 const { getLayerClasses } = useLayer()
 const { styles, classes } = getLayerClasses(
   toRef(props, 'color'),
@@ -23,10 +21,7 @@ const { styles, classes } = getLayerClasses(
   <div
     class="a-avatar overflow-hidden inline-flex items-center justify-center"
     :class="classes"
-    :style="[
-      ...styles,
-      { '--a-spacing': spacing / 100 },
-    ]"
+    :style="styles"
   >
     <slot>
       <img

diff --git a/packages/anu-vue/src/components/badge/ABadge.vue b/packages/anu-vue/src/components/badge/ABadge.vue
@@ -2,7 +2,6 @@
 import { defu } from 'defu'
 import type { PropType } from 'vue'
 import { color as colorProp, spacing as spacingProp } from '@/composables/useProps'
-import { useSpacing } from '@/composables/useSpacing'
 import { isNumeric } from '@/utils/helpers'
 
 type VerticalAnchor = 'top' | 'bottom'
@@ -93,7 +92,6 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const spacing = useSpacing(toRef(props, 'spacing'))
 const formatMaxContent = (content: unknown) => {
   if (!isNumeric(content) || props.max === undefined)
     return content
@@ -137,10 +135,7 @@ const positionStyles = computed(() => {
           { 'a-badge-dot': props.dot },
           { 'a-badge-bordered': props.bordered },
         ]"
-        :style="[
-          positionStyles,
-          { '--a-spacing': spacing / 100 },
-        ]"
+        :style="positionStyles"
       >
         <template v-if="!props.dot">
           <template v-if="$slots.content">

diff --git a/packages/anu-vue/src/components/base-input/ABaseInput.vue b/packages/anu-vue/src/components/base-input/ABaseInput.vue
@@ -3,7 +3,6 @@ import { baseInputProps } from './props'
 import type { baseInputSlots } from './slots'
 import { ALoader } from '@/components/loader'
 import { useConfigurable } from '@/composables/useConfigurable'
-import { useSpacing } from '@/composables/useSpacing'
 import TransitionExpand from '@/transitions/TransitionExpand.vue'
 
 // TODO: Provide a way to attach classes to root element
@@ -21,8 +20,6 @@ defineSlots<typeof baseInputSlots>()
 
 const attrs = useAttrs()
 
-const spacing = useSpacing(toRef(props, 'spacing'))
-
 const configurableLabel = useConfigurable(toRef(props, 'label'))
 
 const iconTransition = 'transition duration-150 ease -in'
@@ -48,7 +45,6 @@ defineExpose({
       (props.disabled || props.readonly) && 'pointer-events-none',
       !(props.disabled || props.readonly) && 'a-base-input-interactive',
     ]"
-    :style="{ '--a-spacing': spacing / 100 }"
   >
     <!-- 👉 Label -->
     <slot name="label">

diff --git a/packages/anu-vue/src/components/btn/ABtn.vue b/packages/anu-vue/src/components/btn/ABtn.vue
@@ -2,7 +2,6 @@
 import { ASpinner } from '@/components/spinner'
 import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
 import { configurable as configurableProp, disabled as disabledProp, spacing as spacingProp } from '@/composables/useProps'
-import { useSpacing } from '@/composables/useSpacing'
 
 const props = defineProps({
   ...useLayerProps({
@@ -35,7 +34,6 @@ defineOptions({
   name: 'ABtn',
 })
 
-const spacing = useSpacing(toRef(props, 'spacing'))
 const { getLayerClasses } = useLayer()
 
 const { styles, classes } = getLayerClasses(
@@ -48,10 +46,7 @@ const { styles, classes } = getLayerClasses(
 <template>
   <button
     :tabindex="props.disabled ? -1 : 0"
-    :style="[
-      ...styles,
-      { '--a-spacing': spacing / 100 },
-    ]"
+    :style="styles"
     class="inline-flex whitespace-nowrap justify-center items-center relative"
     :class="[
       props.iconOnly ? 'a-btn-icon-only' : 'a-btn',

diff --git a/packages/anu-vue/src/components/card/ACard.vue b/packages/anu-vue/src/components/card/ACard.vue
@@ -7,7 +7,6 @@ import { ALoader } from '@/components/loader'
 import { isTypographyUsed } from '@/components/typography/utils'
 import { ConfigurableValue, useConfigurable } from '@/composables/useConfigurable'
 import { useLayer } from '@/composables/useLayer'
-import { useSpacing } from '@/composables/useSpacing'
 
 const props = defineProps(cardProps)
 
@@ -19,7 +18,6 @@ defineSlots<typeof cardSlots>()
 
 const slots = useSlots()
 
-const spacing = useSpacing(toRef(props, 'spacing'))
 const { getLayerClasses } = useLayer()
 const { styles, classes } = getLayerClasses(
   toRef(props, 'color'),
@@ -43,10 +41,7 @@ else
   <div
     class="a-card relative overflow-hidden bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))]"
     :class="classes"
-    :style="[
-      ...styles,
-      { '--a-spacing': spacing / 100 },
-    ]"
+    :style="styles"
   >
     <!-- 👉 Loader  -->
     <!--

diff --git a/packages/anu-vue/src/components/data-table/ADataTable.vue b/packages/anu-vue/src/components/data-table/ADataTable.vue
@@ -311,7 +311,6 @@ const paginationMeta = computed(() => {
           <ASelect
             v-model="currentPageSize"
             :options="Array.from(new Set([props.pageSize, 5, 10, 15, 20])).sort((a, b) => a - b)"
-            :spacing="80"
             options-wrapper-classes="a-data-table-per-page-select--options-wrapper-classes"
           />
         </div>

diff --git a/packages/anu-vue/src/components/list/AList.vue b/packages/anu-vue/src/components/list/AList.vue
@@ -5,7 +5,6 @@ import { listProps } from './props'
 import type { listSlots } from './slots'
 import { listItemSlot } from './slots'
 import { isObject } from '@/utils/helpers'
-import { useSpacing } from '@/composables/useSpacing'
 import { useGroupModel } from '@/composables'
 import { AListItem } from '@/components/list-item'
 
@@ -24,8 +23,6 @@ defineOptions({
 
 defineSlots<typeof listSlots>()
 
-const spacing = useSpacing(toRef(props, 'spacing'))
-
 const extractItemValueFromItemOption = (item: ListPropItems[number]) => isObject(item) ? (item.value || item) : item
 
 const { options, select: selectListItem, value } = useGroupModel({
@@ -45,10 +42,7 @@ const handleListItemClick = (item: ListPropItems[number]) => {
 </script>
 
 <template>
-  <ul
-    class="a-list grid"
-    :style="[{ '--a-spacing': spacing / 100 }]"
-  >
+  <ul class="a-list grid">
     <!-- 👉 Slot: before -->
     <li v-if="$slots.before">
       <slot name="before" />
@@ -59,7 +53,7 @@ const handleListItemClick = (item: ListPropItems[number]) => {
       <AListItem
         v-for="(item, index) in props.items"
         :key="index"
-        :text="typeof item === 'string' ? item : undefined"
+        :text="typeof item === 'string' || typeof item === 'number' ? item : undefined"
         v-bind="typeof item === 'string' ? {} : item"
         :avatar-append="props.avatarAppend"
         :icon-append="props.iconAppend"

diff --git a/packages/anu-vue/src/components/table/ATable.vue b/packages/anu-vue/src/components/table/ATable.vue
@@ -3,7 +3,6 @@ import { defu } from 'defu'
 import type { ExtractPropTypes } from 'vue'
 import type { PropColumn } from './props'
 import { tableProps } from './props'
-import { useSpacing } from '@/composables/useSpacing'
 import { ACard, cardProps } from '@/components/card'
 
 const props = defineProps(defu(tableProps, cardProps))
@@ -20,8 +19,6 @@ defineOptions({
 // TODO: What about spacing? Table & Card both support spacing 🤔
 const _cardProps = reactivePick(props, Object.keys(cardProps) as Array<keyof typeof cardProps>)
 
-const spacing = useSpacing(toRef(props, 'spacing'))
-
 const _cols = computed<PropColumn[]>(() => {
   // If custom cols are provided => Use them
   if (props.cols.length)
@@ -40,7 +37,6 @@ const _cols = computed<PropColumn[]>(() => {
   <ACard
     v-bind="_cardProps"
     class="a-table"
-    :style="{ '--a-spacing': spacing / 100 }"
   >
     <slot name="before-table" />
     <div class="overflow-x-auto">

diff --git a/packages/anu-vue/src/components/typography/ATypography.vue b/packages/anu-vue/src/components/typography/ATypography.vue
@@ -17,7 +17,7 @@ const text = useConfigurable(toRef(props, 'text'))
 </script>
 
 <template>
-  <div class="text-base gap-4 flex flex-col">
+  <div class="gap-4 flex flex-col">
     <!-- SECTION Typography header -->
     <div
       v-if="$slots.title || props.title || $slots.subtitle || props.subtitle || $slots['header-right']"

diff --git a/packages/anu-vue/src/composables/index.ts b/packages/anu-vue/src/composables/index.ts
@@ -7,7 +7,6 @@ export * from './useLayer'
 export * from './useParentEl'
 export * from './useSearch'
 export * from './useSort'
-export { spacingProp, useSpacing } from './useSpacing'
 export * from './useTeleport'
 
 // This is not composable at all. It is utility

diff --git a/packages/anu-vue/src/composables/useSpacing.ts b/packages/anu-vue/src/composables/useSpacing.ts
diff --git a/packages/anu-vue/src/index.ts b/packages/anu-vue/src/index.ts
@@ -1,7 +1,6 @@
 import { defu } from 'defu'
 import type { App } from 'vue'
 import * as components from './components'
-import { provideAppSpacing } from '@/composables/useSpacing'
 import './scss/index.scss'
 
 export interface PluginOptions {
@@ -14,8 +13,6 @@ const optionsDefaults: Partial<PluginOptions> = {
 
 const plugin = {
   install(app: App, options: Partial<PluginOptions> = {}) {
-    provideAppSpacing(app)
-
     const _options = defu(options, optionsDefaults)
 
     if (_options.registerComponents) {

diff --git a/packages/preset-theme-default/src/shortcuts.ts b/packages/preset-theme-default/src/shortcuts.ts
@@ -133,7 +133,7 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
     // 👉 Select
     'a-select-floating': '[--a-transition-slide-up-transform:6px]',
     'a-select-options-container': '',
-    'a-select-options-list': '![--a-spacing:0.75]',
+    'a-select-options-list': '[--a-spacing:0.75]',
 
     // 👉 Switch
     'a-switch': 'select-none',
@@ -155,7 +155,7 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
     'a-data-table-pagination': 'border-t border-a-border em:spacing:px-[1.3333333333em] spacing:h-[4.0833333333em] em:spacing:gap-x-4 em:text-xs',
     'a-data-table-pagination-meta': 'em:text-base',
     'a-data-table-per-page': '[&_.a-base-input-input-wrapper]-rounded-0 [&_.a-base-input-input-wrapper]-!border-transparent [&_.a-base-input-input-wrapper]-!border-b-a-border [&_.a-base-input-root]-max-w-[70px]',
-    'a-data-table-per-page-select--options-wrapper-classes': 'em:text-sm spacing-85', // ℹ️ optionsWrapperClasses prop
+    'a-data-table-per-page-select--options-wrapper-classes': 'em:text-sm', // ℹ️ optionsWrapperClasses prop
     'a-data-table-pagination-navigation': '[&_.a-data-table-paginate-previous]-!rounded-full em:[&_.a-data-table-paginate-previous]-spacing:me-2 [&_.a-data-table-paginate-next]-!rounded-full em:spacing:gap-x-2',
 
     // 👉 Textarea