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

chore(Input)!: move pointer class inside its own preset class

Browse Source
This commit is contained in:
Benjamin Canac
2023-06-01 15:27:53 +02:00
parent 01fa85c7a3
commit f59a92ca15
4 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/runtime/app.config.ts
View File

@@ -339,7 +339,8 @@ const input = {
xl: 'h-6 w-6' xl: 'h-6 w-6'
}, },
leading: { leading: {
wrapper: 'absolute inset-y-0 left-0 flex items-center pointer-events-none', wrapper: 'absolute inset-y-0 left-0 flex items-center',
pointer: 'pointer-events-none',
padding: { padding: {
'2xs': 'pl-2', '2xs': 'pl-2',
xs: 'pl-2.5', xs: 'pl-2.5',
@@ -350,7 +351,8 @@ const input = {
} }
}, },
trailing: { trailing: {
wrapper: 'absolute inset-y-0 right-0 flex items-center pointer-events-none', wrapper: 'absolute inset-y-0 right-0 flex items-center',
pointer: 'pointer-events-none',
padding: { padding: {
'2xs': 'pr-2', '2xs': 'pr-2',
xs: 'pr-2.5', xs: 'pr-2.5',

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

@@ -19,17 +19,17 @@
> >
<slot /> <slot />
<div v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass"> <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
<slot name="leading" :disabled="disabled" :loading="loading"> <slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" /> <UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot> </slot>
</div> </span>
<div v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass"> <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
<slot name="trailing" :disabled="disabled" :loading="loading"> <slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" /> <UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot> </slot>
</div> </span>
</div> </div>
</template> </template>
@@ -220,8 +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.pointer,
slots.leading && '!pointer-events-auto' ui.value.icon.leading.padding[props.size]
) )
}) })
@@ -237,8 +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.pointer,
slots.trailing && '!pointer-events-auto' ui.value.icon.trailing.padding[props.size]
) )
}) })

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

@@ -36,11 +36,11 @@
</template> </template>
</select> </select>
<div v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass"> <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
<slot name="leading" :disabled="disabled" :loading="loading"> <slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" /> <UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot> </slot>
</div> </span>
<span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass"> <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
<slot name="trailing" :disabled="disabled" :loading="loading"> <slot name="trailing" :disabled="disabled" :loading="loading">
@@ -267,8 +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.pointer,
slots.leading && '!pointer-events-auto' ui.value.icon.leading.padding[props.size]
) )
}) })
@@ -284,8 +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.pointer,
slots.trailing && '!pointer-events-auto' ui.value.icon.trailing.padding[props.size]
) )
}) })

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

@@ -332,8 +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.pointer,
slots.leading && '!pointer-events-auto' uiSelect.value.icon.leading.padding[props.size]
) )
}) })
@@ -349,8 +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.pointer,
slots.trailing && '!pointer-events-auto' uiSelect.value.icon.trailing.padding[props.size]
) )
}) })