HIDA - Helmholtz Information and Data Science Academy

Tom Select 

<!-- Select -->
<div class="ts-select"><select class="ts-select__wrapper" autocomplete="off">
        <option value="lorem">Lorem ipsum dolor sit amet sit amet</option>
        <option value="lorem 2">Lorem ipsum 2</option>
        <option value="lorem 3">Lorem ipsum 3</option>
    </select></div>


<!-- required -->
<div class="ts-select"><select class="ts-select__wrapper" autocomplete="off">
        <option value="lorem">Lorem ipsum dolor sit amet sit amet</option>
        <option value="lorem 2">Lorem ipsum 2</option>
        <option value="lorem 3">Lorem ipsum 3</option>
    </select></div>


.ts-select
  select.ts-select__wrapper()&attributes(attr)
    each item in options
      option(value=item.value) #{item.option}
 
/* Select */
{
  "text": "Lorem ipsum dolor",
  "attr": {
    "required": null,
    "disabled": null,
    "multiple": null,
    "autocomplete": "off"
  },
  "options": [
    {
      "option": "Lorem ipsum dolor sit amet sit amet",
      "value": "lorem"
    },
    {
      "option": "Lorem ipsum 2",
      "value": "lorem 2"
    },
    {
      "option": "Lorem ipsum 3",
      "value": "lorem 3"
    }
  ]
}


/* required */
{
  "text": "Lorem ipsum dolor",
  "attr": {
    "required": null,
    "disabled": null,
    "multiple": null,
    "autocomplete": "off"
  },
  "options": [
    {
      "option": "Lorem ipsum dolor sit amet sit amet",
      "value": "lorem"
    },
    {
      "option": "Lorem ipsum 2",
      "value": "lorem 2"
    },
    {
      "option": "Lorem ipsum 3",
      "value": "lorem 3"
    }
  ]
}
  • Content: 
    import TomSelect from 'tom-select';

document.querySelectorAll('.ts-select__wrapper').forEach((el) => {
  const settings = {
    maxItems: null,
    persist: false,
    controlInput: null,
    maxOptions: null,
    openOnFocus: true,
    itemClass: 'item',
    plugins: {
      checkbox_options: {
        checkedClassNames: ['ts-checked'],
        uncheckedClassNames: ['ts-unchecked'],
      },
      remove_button: {
        title: 'Entferne das item',
        label: `<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.66693 5.50028L0.000570296 9.16664L1.3339 10.5L5.00026 6.83361L8.66664 10.5L9.99997 9.16667L6.33359 5.50028L10.0005 1.83333L8.66721 0.5L5.00026 4.16696L1.33333 0.500027L0 1.83336L3.66693 5.50028Z" fill="white"/>
                </svg>`,
      },
    },
  };

  // eslint-disable-next-line
  new TomSelect(el, settings, {
  });
});
  • URL: /components/raw/tom-select/tom-select.js
  • Filesystem Path: src/components/atoms/tom-select/tom-select.js
  • Size: 928 Bytes
  • Content: 
    @import 'tom-select/dist/css/tom-select.default.css';

.ts-select {
  font-family: $font-family-secondary;

  .ts-wrapper {
    min-height: 4.8rem;
  }

  .ts-wrapper:not(.form-control, .form-select).multi .ts-control {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='14' viewBox='0 0 24 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 1.5L12 11.5L22 1.5' stroke='%23041A2B' stroke-width='3'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 2.4rem 1.5rem;
  }

  .ts-wrapper.multi.has-items .ts-control {
    padding-right: 3.5rem !important;
  }

  .ts-control {
    border: 0.2rem solid $color-dark;
    border-radius: 0.6rem;
  }

  .dropdown-active .ts-control{
    border-radius: 0.6rem 0.6rem 0 0;
  }

  // stylelint-disable-next-line
  .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    align-self: center;
    border-left: 0;
    border-radius: 0;
    display: inline-flex;
    margin-left: 0.2rem;
    padding: 0 0.8rem;
  }

  // stylelint-disable-next-line
  .ts-wrapper.plugin-remove_button .item {
    background-color: $color-blue-light;
    background-image: none;
    border: 0;
    box-shadow: none;
    padding: 0.8rem;
  }

  .ts-dropdown {
    margin: 0;
    padding: 1.4rem;
    border: 0.2rem solid $color-dark;
    border-top: 0;
  }

  .ts-dropdown-content {
    display: grid;
    grid-template-columns: 1fr;

    @include mq($from: m) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .ts-wrapper.multi .ts-control [data-value].active {
    background: $color-blue-light;
    background-image: none;
    border: 0;
  }

  .ts-dropdown .active {
    background-color: $color-blue-light;
    color: #fff;
  }

  .tomselect-checkbox {
    appearance: none;
    background: transparent;
    border: 0.2rem solid currentColor;
    color: currentColor;
    display: inline-grid;
    height: 1.6rem;
    margin: 0;
    place-content: center;
    width: 1.6rem;
  }

  .tomselect-checkbox::before {
    content: '';
    display: inline-block;
    height: 0.8rem;
    width: 0.8rem;
  }

  .selected .tomselect-checkbox::before {
    background-color: $color-blue-light;
  }

  .ts-dropdown .active.selected .tomselect-checkbox::before {
    background-color: #fff;
  }


  .ts-dropdown .active .tomselect-checkbox {
    border: 0.2rem solid #fff;
  }
}
  • URL: /components/raw/tom-select/tom-select.scss
  • Filesystem Path: src/components/atoms/tom-select/tom-select.scss
  • Size: 2.4 KB

There are no notes for this item.