Resetting the filter by group in UIKit

Question

Can you please tell me if it is possible to somehow reset the UIKit filter filter for only one group. For example, I have a group of filters and I want to click on "Dct" to reset the filter specifically for the datacolor group, but not size. If you add the uk-filter-control parameter and make it empty, then all the elements are reset, is there a way to do something differently

<div uk-filter="target: .js-filter">

  <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
          <div>
          <ul class="uk-subnav uk-subnav-pill" uk-margin>
            <li class="uk-active" uk-filter-control><a href="#">Dct</a></li>
          </ul>
        </div>
    <div>
      <ul class="uk-subnav uk-subnav-pill" uk-margin>
        <li uk-filter-control="filter: [data-color='white']; group: data-color"><a href="#">White</a></li>
        <li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Blue</a></li>
        <li uk-filter-control="filter: [data-color='black']; group: data-color"><a href="#">Black</a></li>
      </ul>
    </div>

    <div>

      <ul class="uk-subnav uk-subnav-pill" uk-margin>
        <li uk-filter-control="filter: [data-size='small']; group: size"><a href="#">Small</a></li>
        <li uk-filter-control="filter: [data-size='medium']; group: size"><a href="#">Middle</a></li>
        <li uk-filter-control="filter: [data-size='large']; group: size"><a href="#">Big</a></li>
      </ul>
    </div>

  </div>

  <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">

    <li data-color="white" data-size="large">
      <div class="uk-card uk-card-default uk-card-body">
        <canvas width="600" height="800"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="blue" data-size="small">
      <div class="uk-card uk-card-primary uk-card-body">
        <canvas width="600" height="400"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="white" data-size="medium">
      <div class="uk-card uk-card-default uk-card-body">
        <canvas width="600" height="600"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="white" data-size="small">
      <div class="uk-card uk-card-default uk-card-body">
        <canvas width="600" height="400"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="black" data-size="medium">
      <div class="uk-card uk-card-secondary uk-card-body">
        <canvas width="600" height="600"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="black" data-size="small">
      <div class="uk-card uk-card-secondary uk-card-body">
        <canvas width="600" height="400"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="blue" data-size="medium">
      <div class="uk-card uk-card-primary uk-card-body">
        <canvas width="600" height="600"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="black" data-size="large">
      <div class="uk-card uk-card-secondary uk-card-body">
        <canvas width="600" height="800"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="blue" data-size="large">
      <div class="uk-card uk-card-primary uk-card-body">
        <canvas width="600" height="800"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="white" data-size="large">
      <div class="uk-card uk-card-default uk-card-body">
        <canvas width="600" height="800"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="blue" data-size="medium">
      <div class="uk-card uk-card-primary uk-card-body">
        <canvas width="600" height="600"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
    <li data-color="black" data-size="small">
      <div class="uk-card uk-card-secondary uk-card-body">
        <canvas width="600" height="400"></canvas>
        <div class="uk-position-center">El</div>
      </div>
    </li>
  </ul>

</div> 

Answer 1

Here's an example of the desired scenario in the UIkit Github repo. There are two buttons - one which filters and one which resets the list. The buttons additionally toggle the visibility of each other, so that only one is seen by the user at a time.

https://github.com/uikit/uikit-site/pull/173/files

The relevant code is below. Notice the second, originally hidden button, where the uk-filter-control is set with a blank filter value group: one; filter: .

<button uk-filter-control="group: one; filter: [data-meta~='one']"
        uk-toggle="target: .my-filter-control-one"
        class="my-filter-control-one uk-button">
    One
</button>               
<button uk-filter-control="group: one; filter: "
        uk-toggle="target: .my-filter-control-one"
        class="my-filter-control-one uk-button uk-button-primary"
        hidden>
    One
</button>