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

chore: add leading and trailing slots

Browse Source 
Resolves #246
This commit is contained in:
Benjamin Canac
2023-05-31 23:53:31 +02:00
parent 5ea43ab4e4
commit e05619f8c8
4 changed files with 55 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,13 +5,19 @@
:aria-label="ariaLabel" :aria-label="ariaLabel"
v-bind="buttonProps" v-bind="buttonProps"
> >
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" /> <slot name="leading" :disabled="disabled" :loading="loading">
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
</slot>
<slot> <slot>
<span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']"> <span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
{{ label }} {{ label }}
</span> </span>
</slot> </slot>
<UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
</slot>
</component> </component>
</template> </template>

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

@@ -18,11 +18,17 @@
@blur="$emit('blur', $event)" @blur="$emit('blur', $event)"
> >
<slot /> <slot />
<div v-if="isLeading && leadingIconName" :class="leadingWrapperIconClass">
<UIcon :name="leadingIconName" :class="leadingIconClass" /> <div v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</div> </div>
<div v-if="isTrailing && trailingIconName" :class="trailingWrapperIconClass">
<UIcon :name="trailingIconName" :class="trailingIconClass" /> <div v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</div> </div>
</div> </div>
</template> </template>
@@ -147,7 +153,7 @@ export default defineComponent({
} }
}, },
emits: ['update:modelValue', 'focus', 'blur'], emits: ['update:modelValue', 'focus', 'blur'],
setup (props, { emit }) { setup (props, { emit, slots }) {
// TODO: Remove // TODO: Remove
const appConfig = useAppConfig() const appConfig = useAppConfig()
@@ -181,8 +187,8 @@ export default defineComponent({
ui.value.size[props.size], ui.value.size[props.size],
props.padded && ui.value.padding[props.size], props.padded && ui.value.padding[props.size],
variant?.replaceAll('{color}', props.color), variant?.replaceAll('{color}', props.color),
isLeading.value && ui.value.leading.padding[props.size], (isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
isTrailing.value && ui.value.trailing.padding[props.size], (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size],
ui.value.custom ui.value.custom
) )
}) })
@@ -214,7 +220,8 @@ export default defineComponent({
const leadingWrapperIconClass = computed(() => { const leadingWrapperIconClass = computed(() => {
return classNames( return classNames(
ui.value.icon.leading.wrapper, ui.value.icon.leading.wrapper,
ui.value.icon.leading.padding[props.size] ui.value.icon.leading.padding[props.size],
slots.leading && '!pointer-events-auto'
) )
}) })
@@ -230,7 +237,8 @@ export default defineComponent({
const trailingWrapperIconClass = computed(() => { const trailingWrapperIconClass = computed(() => {
return classNames( return classNames(
ui.value.icon.trailing.wrapper, ui.value.icon.trailing.wrapper,
ui.value.icon.trailing.padding[props.size] ui.value.icon.trailing.padding[props.size],
slots.trailing && '!pointer-events-auto'
) )
}) })

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

@@ -36,12 +36,16 @@
</template> </template>
</select> </select>
<div v-if="isLeading && leadingIconName" :class="leadingWrapperIconClass"> <div v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
<UIcon :name="leadingIconName" :class="leadingIconClass" /> <slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</div> </div>
<span v-if="isTrailing && trailingIconName" :class="trailingWrapperIconClass"> <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
<UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" /> <slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
</slot>
</span> </span>
</div> </div>
</template> </template>
@@ -159,7 +163,7 @@ export default defineComponent({
} }
}, },
emits: ['update:modelValue', 'focus', 'blur'], emits: ['update:modelValue', 'focus', 'blur'],
setup (props, { emit }) { setup (props, { emit, slots }) {
// TODO: Remove // TODO: Remove
const appConfig = useAppConfig() const appConfig = useAppConfig()
@@ -230,8 +234,8 @@ export default defineComponent({
ui.value.size[props.size], ui.value.size[props.size],
props.padded && ui.value.padding[props.size], props.padded && ui.value.padding[props.size],
variant?.replaceAll('{color}', props.color), variant?.replaceAll('{color}', props.color),
isLeading.value && ui.value.leading.padding[props.size], (isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
isTrailing.value && ui.value.trailing.padding[props.size], (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size],
ui.value.custom ui.value.custom
) )
}) })
@@ -263,7 +267,8 @@ export default defineComponent({
const leadingWrapperIconClass = computed(() => { const leadingWrapperIconClass = computed(() => {
return classNames( return classNames(
ui.value.icon.leading.wrapper, ui.value.icon.leading.wrapper,
ui.value.icon.leading.padding[props.size] ui.value.icon.leading.padding[props.size],
slots.leading && '!pointer-events-auto'
) )
}) })
@@ -279,7 +284,8 @@ export default defineComponent({
const trailingWrapperIconClass = computed(() => { const trailingWrapperIconClass = computed(() => {
return classNames( return classNames(
ui.value.icon.trailing.wrapper, ui.value.icon.trailing.wrapper,
ui.value.icon.trailing.padding[props.size] ui.value.icon.trailing.padding[props.size],
slots.trailing && '!pointer-events-auto'
) )
}) })

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

@@ -29,8 +29,10 @@
> >
<slot :open="open" :disabled="disabled" :loading="loading"> <slot :open="open" :disabled="disabled" :loading="loading">
<button :class="selectMenuClass" :disabled="disabled || loading" type="button"> <button :class="selectMenuClass" :disabled="disabled || loading" type="button">
<span v-if="isLeading && leadingIconName" :class="leadingWrapperIconClass"> <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
<UIcon :name="leadingIconName" :class="leadingIconClass" /> <slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span> </span>
<slot name="label"> <slot name="label">
@@ -39,8 +41,10 @@
<span v-else class="block truncate" :class="ui.placeholder">{{ placeholder || '&nbsp;' }}</span> <span v-else class="block truncate" :class="ui.placeholder">{{ placeholder || '&nbsp;' }}</span>
</slot> </slot>
<span v-if="isTrailing && trailingIconName" :class="trailingWrapperIconClass"> <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
<UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" /> <slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
</slot>
</span> </span>
</button> </button>
</slot> </slot>
@@ -269,7 +273,7 @@ export default defineComponent({
} }
}, },
emits: ['update:modelValue', 'open', 'close'], emits: ['update:modelValue', 'open', 'close'],
setup (props, { emit }) { setup (props, { emit, slots }) {
// TODO: Remove // TODO: Remove
const appConfig = useAppConfig() const appConfig = useAppConfig()
@@ -294,8 +298,8 @@ export default defineComponent({
uiSelect.value.gap[props.size], uiSelect.value.gap[props.size],
props.padded && uiSelect.value.padding[props.size], props.padded && uiSelect.value.padding[props.size],
variant?.replaceAll('{color}', props.color), variant?.replaceAll('{color}', props.color),
isLeading.value && uiSelect.value.leading.padding[props.size], (isLeading.value || slots.leading) && uiSelect.value.leading.padding[props.size],
isTrailing.value && uiSelect.value.trailing.padding[props.size], (isTrailing.value || slots.trailing) && uiSelect.value.trailing.padding[props.size],
uiSelect.value.custom, uiSelect.value.custom,
'inline-flex items-center' 'inline-flex items-center'
) )
@@ -328,7 +332,8 @@ export default defineComponent({
const leadingWrapperIconClass = computed(() => { const leadingWrapperIconClass = computed(() => {
return classNames( return classNames(
uiSelect.value.icon.leading.wrapper, uiSelect.value.icon.leading.wrapper,
uiSelect.value.icon.leading.padding[props.size] uiSelect.value.icon.leading.padding[props.size],
slots.leading && '!pointer-events-auto'
) )
}) })
@@ -344,7 +349,8 @@ export default defineComponent({
const trailingWrapperIconClass = computed(() => { const trailingWrapperIconClass = computed(() => {
return classNames( return classNames(
uiSelect.value.icon.trailing.wrapper, uiSelect.value.icon.trailing.wrapper,
uiSelect.value.icon.trailing.padding[props.size] uiSelect.value.icon.trailing.padding[props.size],
slots.trailing && '!pointer-events-auto'
) )
}) })