Exclusive button group's 'active' property doesn't respond to set

[saar62097]

In this button group:

<Button-Group class='group-label' label='Include hidden:' exclusive :active="includeHidden" justify="flex-end" @update="updateHidden">
<Button>YES</Button>
<Button>NO</Button>
</Button-Group>

I have includeHidden set to 0 in the Data: portion if this Vue component, which does select the "YES" button as expected. But when i later programmatically change includeHidden to 1, nothing happens - button "NO" doesnt get selected.

[Inventsable]

I'll look into it. Likely due to the active prop not being watched for changes and an easy fix, will put this on my to-do list for tomorrow. Let me know if you find anything else

[saar62097]

thank you for your quick response and for your amazing framework in general..

I am also seeing issues with the dropdowns. I created a test extension (VUE-CLI, bombino-brutalism-router) and just added a Dropdown and two Annos for testings. Added them to Home.vue, which is now:

<template>
  <Wrapper class="home-wrapper">
    <battleaxe-logo />
    <brutalism-title subtitle="router" />
    <Dropdown
            label='test'
            :items=" [ {label:'Animate In',value:'Animate In'}, {label:'Animate Out',value:'Animate Out'} ]"
            :active="ddIndex"
    />
    <Anno v-show="ddIndex == 'Animate In'">Animate In</Anno>
    <Anno v-show="ddIndex == 'Animate Out'">Animate Out</Anno>
    <Button-Group>
      <Button block goto="https://battleaxe.dev/brutalism-docs/#/">See the docs</Button>
      <Button block goto="https://github.com/Inventsable/brutalism#-brutalism">See the code</Button>
      <Button block goto="https://github.com/Inventsable/brutalism/issues/new">Report a bug</Button>
    </Button-Group>
  </Wrapper>
</template>

<script>
  export default {
    components: {
      "battleaxe-logo": require('../components/Battleaxe/battleaxeLogo.vue').default,
      "brutalism-title": require('../components/Battleaxe/brutalismTitle.vue').default
    },
    data: ()=>{
      return {
        ddIndex: "Animate In"
      }

    }
  }
</script>

<style>

  .home-wrapper {
    min-height: 580;
    min-width: 300px;
  }
</style>

I am expecting that selecting items in the dropdown will change the Annos visibility, which it does not. Logging ddIndex shows that it does not change on dropdown selections.

thnx again

[Inventsable]

Hi @saar62097, the issue with active in this context is because Dropdown doesn't have v-model support, so the active prop only has one-way binding (meaning you'd need to do something like @update="val => ddIndex = val"). That dropdown component is actually a legacy one we made as a test before doing the bulk of the framework though, and I've recently rebuilt it as Select.

Note that Select works the same in regards to the items prop but has additional support -- better rendering, more native style, v-model support, support for <slot> elements (though it requires a more up to date import specifically of a hidden wrap-node component like seen here) and more. I'll be working on and expanding that one instead because it solves a lot of bugs/issues with the original attempt.

[Inventsable]

Try this code instead:

<Select
    label='test'
    :items=" [ {label:'Animate In',value:'Animate In'}, {label:'Animate Out',value:'Animate Out'} ]"
    v-model="ddIndex"
/>
<Anno>{{ddIndex}}</Anno>

[saar62097]

thanx again. I did end up using Select, though I needed to manually add it to main.js, index.js, etc... Let us know when button-group supports "active" in two way bindings. thnx!

[vonnnassau]

Hi, is this the same issue?

When I try this code from the brutalism-api

<Button-Group exclusive label="exclusive" :active="3">
<Button v-for="index in 7" :key="index" :icon="`brightness-${index}`" />
</Button-Group>

I expect that after clicking one of the buttons it will stay visually active until another one is clicked. I do see this behaviour while debugging in Cefclient.

In AE or IL app the button stops showing being active as soon as the mouse exits the active button. So the selected button is not brighter than the others, they are all dim.

Running AE 17.7 on OSX 10.7.5

[Inventsable]

Hi @vonnnassau, can you run npm i brutalism@2.2.2 and tell me if this issue persists? Seems to have been a Mac-only bug that I didn't catch but should have been patched out in a more recent build. The bombino templates are set to install latest versions but they don't seem to be doing anything about 2.2.0.

[vonnnassau]

Hi Tom, npm i brutalism@2.2.2 did the trick. Feels good to be up to date like this. Many thanks!

[Inventsable]

Going to mark this as solved and close the issue for now