spz-filter 筛选器

需要对专辑商品进行筛选和排序，一般用在专辑页。

在筛选器中，我们可以用很简单的标识来去实现一些行为。支持的标识如下：

• 筛选内容元素使用 role="content" 来表示（必需）。
• 在筛选内容元素内部，spz-render 元素带有 as="default" 属性来表示默认模版（必需）。
  • 如果我们想某个筛选维度使用一个单独的 spz-render 来展示，需要将 as 属性的值改为筛选数据中的 param_name 属性使用 . 符号来拆分后的数组的最后一个元素。例如 param_name="filter.v.price" 的价格维度单独使用 spz-render 元素来展示，需要将 as 属性的值改为 price。
• 在筛选内容元素内，spz-render 模版内容支持的行为有：（当配置了对应的role属性后，组件会根据role的值来实现对应的行为）
  • role="reset" 用来标识当前模版的重置按钮（可选）
  • role="items" 用来标识多选的元素（可选），例如：spz-selector, select；
  • role="price-min" 用来标识价格区间的最小价格输入框（可选），一般是 input 输入框；
  • role="price-max" 用来标识价格区间的最大价格输入框（可选），一般是 input 输入框；
  • role="selectedCount" 用来标识当前模版已选择的选项数量，当选择了更多/更少选项，会自动更新已选择的数量（可选）
  • role="sortBy" 用来标识排序元素（可选），例如：select；
  • role="applyAll" 用来标识应用所有选择/输入结果按钮，一般用在移动端的筛选弹窗内；
• 在筛选结果元素内，spz-render 作为模版的 as 属性标识规则与筛选内容元素内的 spz-render 元素一致，但在筛选结果元素内支持的行为与在筛选内容元素内支持的行为不一致，筛选结果元素的 spz-render 模版内容支持的行为有：
  • role="delete" 用来标识删除按钮（可选）
  • role="clearAll" 用来标识删除所有筛选结果的按钮（可选）

<spz-filter
  id="collection-filter"
  list-id="collection-list"
  result-id="filter-result"
  collection-id=""
  layout='container'
>
  <div>
    <!-- Filter content -->
    <div role="content">
      <spz-render as="default" layout="container" manual>
        <template>
          <div>
            <!-- ... -->
            <button role="reset">Reset</button>
            <spz-selector layout="container" multiple role="items" @select="collection-filter.apply(values=event.selectedOptions);">
              <div spz-for='item in data.values' class='filter-item-option flex md:items-center' option="${item.value}">
                <!-- ... -->
              </div>
            </spz-selector>
          </div>
        </template>
      </spz-render>
      <spz-render as="price" layout="container" manual>
        <template>
          <div>
            <!-- ... -->
            <input role="price-min" type="number" placeholder="From" @input-debounced="collection-filter.apply(value=event.value);">
            <input role="price-max" type="number" placeholder="To" @input-debounced="collection-filter.apply(value=event.value);">
          </div>
        </template>
      </spz-render>
    </div>
    <!-- Sort by -->
    <select role="sortBy" >
      <option value="manual" selected>Recommend</option>
      <option value="price-ascending">Price, low to high</option>
      <!-- .... -->
    </select>
  </div>

  <!-- Filter result -->
  <div id="filter-result" hidden>
    <spz-render as="default" manual layout="container">
      <template>
        <div role="delete">
          <!-- ... -->
        </div>
      </template>
    </spz-render>
    <spz-render as="price" manual layout="container">
      <template>
        <div role="delete">
          <!-- ... -->
        </div>
      </template>
    </spz-render>

    <div role="clearAll">Clear All</div>
  </div>
</spz-filter>

<spz-list id="collection-list" manual ...>
  <!-- ... -->
</spz-list>

清除所有筛选结果，不需要参数。