arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: rename spacing to padding

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-10 16:24:28 +02:00
parent 76a0d61a0f
commit 00b444b3eb
16 changed files with 63 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/runtime/components/elements/Button.vue
View File

@@ -178,7 +178,7 @@ export default defineComponent({
ui.value.rounded,
ui.value.size[props.size],
ui.value.gap[props.size],
props.padded && ui.value[isSquare.value ? 'square' : 'spacing'][props.size],
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
variant?.replaceAll('{color}', props.color),
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
)

4
src/runtime/components/elements/Dropdown.vue
View File

@@ -18,12 +18,12 @@
<div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" @mouseover="onMouseOver">
<transition appear v-bind="ui.transition">
<MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background]" static>
<div v-for="(subItems, index) of items" :key="index" :class="ui.spacing">
<div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
<MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
<Component
v-bind="omit(item, ['click'])"
:is="(item.to && NuxtLink) || (item.click && 'button') || 'div'"
:class="[ui.item.base, ui.item.spacing, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
:class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
@click="item.click"
>
<slot :name="item.slot || 'item'" :item="item">

2
src/runtime/components/elements/Kbd.vue
View File

@@ -1,5 +1,5 @@
<template>
<kbd :class="[ui.base, ui.size[size], ui.spacing, ui.rounded, ui.font, ui.background, ui.ring]">
<kbd :class="[ui.base, ui.size[size], ui.padding, ui.rounded, ui.font, ui.background, ui.ring]">
<slot />
</kbd>
</template>

10
src/runtime/components/forms/Input.vue
View File

@@ -161,10 +161,10 @@ export default defineComponent({
return classNames(
ui.value.base,
ui.value.size[props.size],
ui.value.spacing[props.size],
ui.value.padding[props.size],
ui.value.appearance[props.appearance],
isLeading.value && ui.value.leading.spacing[props.size],
isTrailing.value && ui.value.trailing.spacing[props.size],
isLeading.value && ui.value.leading.padding[props.size],
isTrailing.value && ui.value.trailing.padding[props.size],
ui.value.custom
)
})
@@ -204,14 +204,14 @@ export default defineComponent({
const leadingIconClass = computed(() => {
return classNames(
ui.value.icon.leading.wrapper,
ui.value.icon.leading.spacing[props.size]
ui.value.icon.leading.padding[props.size]
)
})
const trailingIconClass = computed(() => {
return classNames(
ui.value.icon.trailing.wrapper,
ui.value.icon.trailing.spacing[props.size]
ui.value.icon.trailing.padding[props.size]
)
})

10
src/runtime/components/forms/Select.vue
View File

@@ -187,10 +187,10 @@ export default defineComponent({
return classNames(
ui.value.base,
ui.value.size[props.size],
ui.value.spacing[props.size],
ui.value.padding[props.size],
ui.value.appearance[props.appearance],
!!props.icon && ui.value.leading.spacing[props.size],
ui.value.trailing.spacing[props.size],
!!props.icon && ui.value.leading.padding[props.size],
ui.value.trailing.padding[props.size],
ui.value.custom
)
})
@@ -205,14 +205,14 @@ export default defineComponent({
const leadingIconClass = computed(() => {
return classNames(
ui.value.icon.leading.wrapper,
ui.value.icon.leading.spacing[props.size]
ui.value.icon.leading.padding[props.size]
)
})
const trailingIconClass = computed(() => {
return classNames(
ui.value.icon.trailing.wrapper,
ui.value.icon.trailing.spacing[props.size]
ui.value.icon.trailing.padding[props.size]
)
})

16
src/runtime/components/forms/SelectMenu.vue
View File

@@ -40,7 +40,7 @@
<div v-if="open" ref="container" :class="[ui.container, ui.width]">
<transition v-bind="ui.transition">
<component :is="searchable ? 'ComboboxOptions' : 'ListboxOptions'" static :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.spacing, ui.height]">
<component :is="searchable ? 'ComboboxOptions' : 'ListboxOptions'" static :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.padding, ui.height]">
<ComboboxInput
v-if="searchable"
ref="searchInput"
@@ -61,7 +61,7 @@
:value="option"
:disabled="option.disabled"
>
<li :class="[ui.option.base, ui.option.rounded, ui.option.spacing, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, optionDisabled && ui.option.disabled]">
<li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive, optionDisabled && ui.option.disabled]">
<div :class="ui.option.container">
<slot name="option" :option="option" :active="active" :selected="selected">
<UIcon v-if="option.icon" :name="option.icon" :class="[ui.option.icon.base, active ? ui.option.icon.active : ui.option.icon.inactive, option.iconClass]" aria-hidden="true" />
@@ -84,7 +84,7 @@
</component>
<component :is="searchable ? 'ComboboxOption' : 'ListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
<li :class="[ui.option.base, ui.option.rounded, ui.option.spacing, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive]">
<li :class="[ui.option.base, ui.option.rounded, ui.option.padding, ui.option.size, ui.option.color, active ? ui.option.active : ui.option.inactive]">
<div :class="ui.option.container">
<slot name="option-create" :option="queryOption" :active="active" :selected="selected">
<span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
@@ -239,10 +239,10 @@ export default defineComponent({
'text-left cursor-default',
uiSelect.value.size[props.size],
uiSelect.value.gap[props.size],
uiSelect.value.spacing[props.size],
uiSelect.value.padding[props.size],
uiSelect.value.appearance[props.appearance],
!!props.icon && uiSelect.value.leading.spacing[props.size],
uiSelect.value.trailing.spacing[props.size],
!!props.icon && uiSelect.value.leading.padding[props.size],
uiSelect.value.trailing.padding[props.size],
uiSelect.value.custom,
'inline-flex items-center'
)
@@ -258,14 +258,14 @@ export default defineComponent({
const leadingIconClass = computed(() => {
return classNames(
uiSelect.value.icon.leading.wrapper,
uiSelect.value.icon.leading.spacing[props.size]
uiSelect.value.icon.leading.padding[props.size]
)
})
const trailingIconClass = computed(() => {
return classNames(
uiSelect.value.icon.trailing.wrapper,
uiSelect.value.icon.trailing.spacing[props.size]
uiSelect.value.icon.trailing.padding[props.size]
)
})

2
src/runtime/components/forms/Textarea.vue
View File

@@ -149,7 +149,7 @@ export default defineComponent({
return classNames(
ui.value.base,
ui.value.size[props.size],
ui.value.spacing[props.size],
ui.value.padding[props.size],
ui.value.appearance[props.appearance],
!props.resize && 'resize-none',
ui.value.custom

6
src/runtime/components/layout/Card.vue
View File

@@ -4,13 +4,13 @@
:class="[ui.base, ui.rounded, ui.divide, ui.ring, ui.shadow, ui.background]"
v-bind="$attrs"
>
<div v-if="$slots.header" :class="[ui.header.base, ui.header.spacing, ui.header.background]">
<div v-if="$slots.header" :class="[ui.header.base, ui.header.padding, ui.header.background]">
<slot name="header" />
</div>
<div :class="[ui.body.base, ui.body.spacing, ui.body.background]">
<div :class="[ui.body.base, ui.body.padding, ui.body.background]">
<slot />
</div>
<div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.spacing, ui.footer.background]">
<div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.padding, ui.footer.background]">
<slot name="footer" />
</div>
</component>

2
src/runtime/components/layout/Container.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="[ui.base, ui.spacing, ui.constrained]">
<div :class="[ui.base, ui.padding, ui.constrained]">
<slot />
</div>
</template>

4
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -9,11 +9,11 @@
>
<div :class="ui.wrapper">
<div v-if="searchable" :class="ui.input.wrapper">
<UIcon v-if="icon" :name="icon" :class="ui.input.icon" aria-hidden="true" />
<UIcon v-if="icon" :name="icon" :class="[ui.input.icon.base, ui.input.icon.size]" aria-hidden="true" />
<ComboboxInput
ref="comboboxInput"
:value="query"
:class="[ui.input.base, icon && ui.input.spacing]"
:class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
:placeholder="placeholder"
autocomplete="off"
@change="query = $event.target.value"

2
src/runtime/components/navigation/VerticalNavigation.vue
View File

@@ -5,7 +5,7 @@
v-slot="{ isActive }"
:key="index"
v-bind="link"
:class="[ui.base, ui.spacing]"
:class="[ui.base, ui.padding]"
:active-class="ui.active"
:inactive-class="ui.inactive"
@click="link.click && link.click()"

2
src/runtime/components/overlays/Modal.vue
View File

@@ -6,7 +6,7 @@
</TransitionChild>
<div :class="ui.inner">
<div :class="[ui.container, ui.spacing]">
<div :class="[ui.container, ui.padding]">
<TransitionChild as="template" :appear="appear" v-bind="ui.transition">
<DialogPanel :class="[ui.base, ui.width, ui.height, ui.background, ui.ring, ui.rounded, ui.shadow]">
<slot />

2
src/runtime/components/overlays/Slideover.vue
View File

@@ -6,7 +6,7 @@
</TransitionChild>
<TransitionChild as="template" :appear="appear" v-bind="transitionClass">
<DialogPanel :class="[ui.base, ui.width, ui.background, ui.ring]">
<DialogPanel :class="[ui.base, ui.width, ui.background, ui.ring, ui.padding]">
<slot />
</DialogPanel>
</TransitionChild>