rashfael / buntpapier Goto Github PK

Also investigate general option reactivity.

At pretix we are using your wonderful bunt-icon-button. A feature we are working on requires us to bind to @pointerdown/pointerup-events. Currently bunt-icon-button seems to only support @click.

This works:

bunt-icon-button(@click ="decPointerDown") minus

This does not work/does not bind to the pointerdown-event on the HTML-Element:

bunt-icon-button(@pointerdown="decPointerDown") minus

Would it be possible to transparently bind events, that bunt-icon-button itself does not know about?

Our workaround is to bind the pointer-events to the containing HTML-Element. It works, but looks unnecessarily ugly to me.

In this constellation:

bunt-tabs
	bunt-tab(header="A")
		p(v-if="true") foo
	bunt-tab(header="B")
		p(v-if="true") bar
	bunt-tab(header="C")
		p static text

switching between A<->C and B<->C works, but A<->B does not. This might be a Vue bug, but I'm not sure what to report there.

See https://vuejs.org/v2/guide/list.html#key

ref vuejs/vue@5ae63d9

If both label and placeholder are set, the label should always float above the control. Currently they overlap when the control isn't focused:

This does not happen in buntpapier 1.9.

In fact the first Esc clears the selection, then a second one closes the dropdown:

This is not just a graphical glitch either, the selection event actually fires.

Reproduced in Firefox 80 and Chromium 84.

Allow the rendering of an empty option for the select dropdown, which emits the value to null.

Allow setting inputmode as a less intrusive alternative to type="number".

Use case: <input type="number"> comes with some (unspecified) browser validation. In both Chrome and Firefox the value is reported as empty if it does not validate. This is basically impossible to integrate with vuelidate as, well, it thinks the input is empty. Even a custom validator is nontrivial because transitions of empty <-> invalid do not trigger a revalidate (both have value="") -.-

If you type into bunt-select to search, then click away and refocus, the dropdown displays the unfiltered list.

Steps to reproduce:

• Open https://buntpapier.rash.codes/components/select.html#props
• Click into first bunt-select, type "abc"
• Four items are shown
• Click away and back or Tab+Shift-Tab or switch browser tabs
• Unfiltered list is shown

I initially noticed this behavior when switching tabs while a dropdown was open.

Happens in both Firefox and Chrome, and 1.9.0 as well as 2.0.0-alpha.20.

When deselecting something via escape, the visual state is updated properly, but the model isnt updated (or the input event isn't sent)

SSIA

When not careful, users can create inputs where their labels do not fit into the input field, like this:

Buntpapier should, instead of wrapping the line, cut off the label.

Using buntpapier2.0.0-alpha.20 and vue 3.2.20.

Updating either header or disabled on any bunt-tab causes the bunt-tabs to switch; it does not matter whether the tab in question is currently active. If v-model is set, the value goes to null and nothing is shown at all; otherwise it jumps to the first tab.

Reproduction case:

<template lang="pug">
div
	p Current tab={{ tab }}
	input(type="checkbox", v-model="disableB")
	| Disable Tab B

	h2 tabs with v-model:

	bunt-tabs(v-model="tab")
		bunt-tab(id="a", header="A") Content A
		bunt-tab(id="b", header="B", :disabled="disableB") Content B
		bunt-tab(id="c", header="C") Content C

	h2 Without v-model:

	bunt-tabs
		bunt-tab(id="a", header="A") Content A
		bunt-tab(id="b", header="B", :disabled="disableB") Content B
		bunt-tab(id="c", header="C") Content C

</template>

<script>
export default {
	data: () => ({
		disableB: false,
		tab: "c",
	})
};
</script>

<style lang="stylus">
.bunt-tabs
	tabs-style()
</style>

Steps:

• Click C for the lower tab set
• Toggle "Disable Tab"
• Uppper tab set shows nothing, lower one "Content A"

Expected behavior:

• if a non-active tab is disabled, current tab should not be affected
• if the current tab is disabled, either stay as well or switch to the first non-disabled one.

Since disabled buttons don't fire events, the tooltip is never shown, or is stuck when a button is being disabled after a click and mouseleave never fires.

When you overwrite errorMessage, the tooltip does not update (i.e. only the first message is displayed). It only works when applying an empty errorMessage in between.