🍷 Digital Wine Cellar – Pattern Library

Multi select filters: Users 

<div class="filter-group">
    <div class="form-item custom-select">
        <label for="5faade64-d937-9a0e-389e-f8537b34210d">Filter</label>
        <select id="5faade64-d937-9a0e-389e-f8537b34210d" name="5faade64-d937-9a0e-389e-f8537b34210d" multiple class="custom-select">
            <option value="option-0">gordon</option>
            <option value="option-1">ben</option>
            <option value="option-2">andrey</option>
            <option value="option-3">alfredo</option>
            <option value="option-4">Gordon Ramsay</option>
            <option value="option-5">Ben Bernanke</option>
            <option value="option-6">Andrey Ivanov</option>
            <option value="option-7">Alfredo Linguini</option>
            <option value="option-8">gordon@gusteaus.fr</option>
            <option value="option-9">ben@gusteaus.fr</option>
            <option value="option-10">andrey@gusteaus.fr</option>
            <option value="option-11">alfredo@gusteaus.fr</option>
        </select>
    </div>
    <div class="form-item custom-select">
        <label for="899043ea-5cf6-9ae1-ef31-69a35406b40c">Role</label>
        <select id="899043ea-5cf6-9ae1-ef31-69a35406b40c" name="899043ea-5cf6-9ae1-ef31-69a35406b40c" multiple class="custom-select">
            <option value="option-0">Administrator</option>
            <option value="option-1">Economy</option>
            <option value="option-2">Sommelier</option>
            <option value="option-3">Server</option>
        </select>
    </div>
</div>
 
<div class="filter-group">
  {{> @form-item-select users-filter id=(random)}}
  {{> @form-item-select role id=(random)}}
</div>
 
{
  "producer": {
    "label": "Producer",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Producer 1"
      },
      {
        "option": "Producer 2"
      },
      {
        "option": "Producer 3"
      }
    ]
  },
  "colour": {
    "label": "Colour",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Red"
      },
      {
        "option": "White"
      },
      {
        "option": "Rosé"
      }
    ]
  },
  "country": {
    "label": "Country",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Argentina"
      },
      {
        "option": "Australia"
      },
      {
        "option": "France"
      },
      {
        "option": "Germany"
      },
      {
        "option": "Hungary"
      },
      {
        "option": "Italy"
      },
      {
        "option": "New Zealand"
      },
      {
        "option": "South Africa"
      },
      {
        "option": "United States"
      }
    ]
  },
  "dish": {
    "label": "Dish",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Bruschetta con pomodori"
      },
      {
        "option": "Carpaccio di cervo"
      },
      {
        "option": "Parmigiana della nonna"
      },
      {
        "option": "Tagliere casereccio"
      },
      {
        "option": "Tournedos Rossini"
      },
      {
        "option": "Carne de Ávila"
      },
      {
        "option": "Tourtière"
      }
    ]
  },
  "bottle-size": {
    "label": "Bottle size",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "37,5 cl"
      },
      {
        "option": "75 cl"
      },
      {
        "option": "150 cl"
      },
      {
        "option": "300 cl"
      }
    ]
  },
  "case-size": {
    "label": "Case size",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "6 bottles"
      },
      {
        "option": "12 bottles"
      },
      {
        "option": "18 bottles"
      },
      {
        "option": "24 bottles"
      }
    ]
  },
  "weight": {
    "label": "Weight",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Light bodied"
      },
      {
        "option": "Medium bodied"
      },
      {
        "option": "Light Bodied to Full bodied"
      },
      {
        "option": "Medium bodied to Full bodied"
      },
      {
        "option": "Full bodied"
      }
    ]
  },
  "style": {
    "label": "Style",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Dry"
      },
      {
        "option": "Medium dry"
      },
      {
        "option": "Medium Sweet"
      },
      {
        "option": "Sweet"
      }
    ]
  },
  "drinkability": {
    "label": "Drinkability",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Old"
      },
      {
        "option": "Early"
      },
      {
        "option": "Mature"
      },
      {
        "option": "Late"
      },
      {
        "option": "Young"
      }
    ]
  },
  "type": {
    "label": "Type",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Still"
      },
      {
        "option": "Sparkling"
      },
      {
        "option": "Fortified"
      }
    ]
  },
  "grape": {
    "label": "Grape",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Chardonnay"
      },
      {
        "option": "Cabernet Sauvignon"
      },
      {
        "option": "Grenache"
      },
      {
        "option": "Syrah"
      },
      {
        "option": "Merlot"
      },
      {
        "option": "Sangiovese"
      },
      {
        "option": "Pinot Noir"
      }
    ]
  },
  "district": {
    "label": "District",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "District 1"
      },
      {
        "option": "District 2"
      },
      {
        "option": "District 3"
      }
    ]
  },
  "supplier": {
    "label": "Supplier",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Supplier 1"
      },
      {
        "option": "Supplier 2"
      },
      {
        "option": "Supplier 3"
      }
    ]
  },
  "bottles-sold": {
    "label": "Bottles sold",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Today"
      },
      {
        "option": "Last 7 days"
      },
      {
        "option": "Last 30 days"
      },
      {
        "option": "Last 365 days"
      },
      {
        "option": "WTD"
      },
      {
        "option": "MTD"
      },
      {
        "option": "YTD"
      }
    ]
  },
  "region": {
    "label": "Region",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Region 1"
      },
      {
        "option": "Region 2"
      },
      {
        "option": "Region 3"
      }
    ]
  },
  "purchase-price": {
    "label": "Purchase price",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "0 - 199"
      },
      {
        "option": "200 - 399"
      },
      {
        "option": "400 - 499"
      },
      {
        "option": "500 - 599"
      },
      {
        "option": "600 - 699"
      },
      {
        "option": "700 - 799"
      },
      {
        "option": "800 - 999"
      },
      {
        "option": "1000 - 1499"
      },
      {
        "option": "1500 - 1999"
      },
      {
        "option": "2000 - 2999"
      },
      {
        "option": "3000 - 9999"
      },
      {
        "option": "10000 and up"
      }
    ]
  },
  "wine-list-price": {
    "label": "Wine list price",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "0 - 399"
      },
      {
        "option": "400 - 499"
      },
      {
        "option": "500 - 599"
      },
      {
        "option": "600 - 699"
      },
      {
        "option": "700 - 799"
      },
      {
        "option": "800 - 999"
      },
      {
        "option": "1000 - 1499"
      },
      {
        "option": "1500 - 1999"
      },
      {
        "option": "2000 - 2999"
      },
      {
        "option": "3000 - 9999"
      },
      {
        "option": "10000 and up"
      }
    ]
  },
  "stored-at": {
    "label": "Stored at",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Shelf 1"
      },
      {
        "option": "Shelf 2"
      },
      {
        "option": "Shelf 3"
      },
      {
        "option": "Shelf 4"
      },
      {
        "option": "Shelf 5"
      },
      {
        "option": "Shelf 6"
      }
    ]
  },
  "users-filter": {
    "label": "Filter",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "gordon"
      },
      {
        "option": "ben"
      },
      {
        "option": "andrey"
      },
      {
        "option": "alfredo"
      },
      {
        "option": "Gordon Ramsay"
      },
      {
        "option": "Ben Bernanke"
      },
      {
        "option": "Andrey Ivanov"
      },
      {
        "option": "Alfredo Linguini"
      },
      {
        "option": "gordon@gusteaus.fr"
      },
      {
        "option": "ben@gusteaus.fr"
      },
      {
        "option": "andrey@gusteaus.fr"
      },
      {
        "option": "alfredo@gusteaus.fr"
      }
    ]
  },
  "role": {
    "label": "Role",
    "multiple": true,
    "modifier": "custom-select",
    "options": [
      {
        "option": "Administrator"
      },
      {
        "option": "Economy"
      },
      {
        "option": "Sommelier"
      },
      {
        "option": "Server"
      }
    ]
  }
}
  • Content: 
    /**
 * Filter form
 */
@media screen {

  @supports (display: grid) {

    .filter-group {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 1rem;
    }

    @media (min-width: 32em) {

      .filter-group {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
      }
    }

    .filter-group .form-item + .form-item {
      margin-top: 0;
    }

    .filter-form .submit-area {
      grid-column: 1 / -1;
    }
  }

  /**
   * Choices custom styling
   */
  .choices__inner * + *,
  .choices__item {
    margin-top: 0;
  }

  .choices__inner,
  .choices__input {
    background-color: var(--input-bg);
    font-size: unset;
  }

  .choices__inner {
    border-color: var(--input-accent);
    border-radius: 0;
    min-height: auto;
    padding: 0.125rem 0.25rem;
  }

  .choices__input {
    margin-bottom: 0;
    border: 0 !important;
  }

  .choices__list--dropdown {
    z-index: 2;
  }

  .choices__heading {
    background-color: unset;
    border-bottom-color: var(--light-grey);
    color: unset;
    margin-top: 0.4rem;
  }

  .choices__list--multiple .choices__item {
    background-color: var(--choices-item);
    border: 0;
    border-radius: 3px;
    padding: 0 0.5rem;
  }

  .choices[data-type*="select-multiple"] .choices__button,
  .choices[data-type*="text"] .choices__button {
    border-left: 0;
    box-shadow: none;
    padding-left: 0.5rem;
  }
}
  • URL: /components/raw/multi-select-filter/multi-select-filter.css
  • Filesystem Path: components/03_organisms/multi-select-filter/multi-select-filter.css
  • Size: 1.4 KB
  • Content: 
    /**
 * Initialize Choices for our special little filter
 */

/* global Choices */

(function() {
  const filterCategories = document.querySelectorAll('select.custom-select');

  // Stop if no element is present
  if (!filterCategories.length) return;

  new Choices('select.custom-select', {
    removeItemButton: true,
    shouldSort: false,
  });
})();
  • URL: /components/raw/multi-select-filter/multi-select-filter.js
  • Filesystem Path: components/03_organisms/multi-select-filter/multi-select-filter.js
  • Size: 355 Bytes

No notes defined.