{"_id":"@aspasionov/slim-select","name":"@aspasionov/slim-select","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"name":"@aspasionov/slim-select","description":"Slim advanced select dropdown","version":"3.0.0","author":{"name":"Brian Voelker","email":"brian@webiswhatido.com","url":"http://webiswhatido.com"},"homepage":"https://slimselectjs.com","license":"MIT","bugs":{"url":"https://github.com/brianvoe/slim-select/issues"},"main":"dist/slimselect.umd.js","browser":"dist/slimselect.umd.js","module":"dist/slimselect.es.js","unpkg":"dist/slimselect.umd.min.js","types":"dist/index.d.ts","style":"dist/slimselect.css","sass":"src/slim-select/slimselect.scss","exports":{".":{"import":"./dist/slimselect.js","require":"./dist/slimselect.umd.js","types":"./dist/*.d.ts"},"./styles":"./dist/slimselect.css"},"workspaces":["src/vue"],"repository":{"type":"git","url":"git+https://github.com/brianvoe/slim-select.git"},"keywords":["select","vanilla","dropdown","search","multiselect"],"scripts":{"dev":"vite --port=1111","format":"prettier --write --cache --parser typescript \"src/**/*.ts\"","build":"npm run build:clean && npm run build:docs && npm run build:library && npm run build:frameworks","build:clean":"rimraf ./dist/*","build:docs":"vite build","build:library":"npm run build:library:js && npm run build:library:css","build:library:js":"cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../","build:library:css":"cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../","build:frameworks":"npm run build --workspaces","test":"jest"},"devDependencies":{"@jest/globals":"^29.7.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.2","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.5","@slim-select/vue":"workspace:src/vue","@testing-library/jest-dom":"^6.1.6","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.5.2","@types/downloadjs":"^1.4.6","@types/jest":"^29.5.11","@types/react":"^18.2.46","@types/react-dom":"^18.2.18","@typescript-eslint/eslint-plugin":"^6.17.0","@typescript-eslint/parser":"^6.17.0","@vitejs/plugin-react":"^4.2.1","@vitejs/plugin-vue":"^5.0.2","clipboard":"^2.0.11","downloadjs":"^1.4.7","eslint":"^8.56.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.2","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","identity-obj-proxy":"^3.0.0","jest":"^29.7.0","jest-canvas-mock":"^2.5.0","jest-environment-jsdom":"^29.7.0","prettier":"^3.1.1","prismjs":"^1.29.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^5.0.5","rollup":"^4.9.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-typescript2":"^0.36.0","rollup-plugin-vue":"^6.0.0","sass":"^1.69.7","ts-jest":"^29.0.5","tslib":"^2.5.0","typescript":"^5.3.3","vite":"^5.0.10","vite-plugin-dts":"^3.7.0","vue":"^3.4.4","vue-router":"^4.1.6","vue-tsc":"^1.8.27","vuex":"^4.0.2"},"gitHead":"f0f0015e57c0eceb7ba392309f90665e97580050","_id":"@aspasionov/slim-select@3.0.0","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-IW/RwP/C2JLfloduACQE2Htm2UAedDx0LIrlk73E1gnsNOAdFf6/pEHqRpsWRHzu6sMdliujSkASTFlsQ/JCWg==","shasum":"a2551af8a2d692c4c59b22f7ae8dc3552aecd78a","tarball":"https://registry.npmjs.org/@aspasionov/slim-select/-/slim-select-3.0.0.tgz","fileCount":59,"unpackedSize":890939,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpKM335PhUj40Iwwv0lY3nRolItnVtnkmth40/PFuc7gIhAJ3MrNj8C8vxC+DfF7NGTEVWS71WdneG9O7rVtIJW3Cy"}]},"_npmUser":{"name":"aspasionov","email":"spasia3run@gmail.com"},"directories":{},"maintainers":[{"name":"aspasionov","email":"spasia3run@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/slim-select_3.0.0_1711120033370_0.632452482691984"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-22T15:07:13.304Z","3.0.0":"2024-03-22T15:07:13.577Z","modified":"2024-03-22T15:07:14.112Z"},"maintainers":[{"name":"aspasionov","email":"spasia3run@gmail.com"}],"description":"Slim advanced select dropdown","homepage":"https://slimselectjs.com","keywords":["select","vanilla","dropdown","search","multiselect"],"repository":{"type":"git","url":"git+https://github.com/brianvoe/slim-select.git"},"author":{"name":"Brian Voelker","email":"brian@webiswhatido.com","url":"http://webiswhatido.com"},"bugs":{"url":"https://github.com/brianvoe/slim-select/issues"},"license":"MIT","readme":"# Slim Select 2\n\n## [slimselectjs.com](https://slimselectjs.com)\n\nAdvanced select dropdown\n\n[![NPM Downloads](https://img.shields.io/npm/dt/slim-select.svg)](https://www.npmjs.com/package/slim-select)\n\n## Support\n\n[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/brianvoe)\n\n<a href=\"https://www.buymeacoffee.com/brianvoe\" target=\"_blank\"><img src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" ></a>\n\n## [Documentation and Examples](https://slimselectjs.com)\n\nSee [website](https://slimselectjs.com) for the full list of settings, methods and event callbacks\n\n![](https://raw.githubusercontent.com/brianvoe/slim-select/master/slimselect.gif)\n\n## Features\n\n- No Dependencies\n- JS: 29kb - 5kb gzip\n- CSS: 7kb - 1kb gzip\n- Single Select\n- Multi Select\n- User Addable Options\n- Html Options\n- Settable Data\n- Callback Events\n- Placeholders\n- Search\n- Disable Options\n- Light CSS\n- Light Color Scheme\n- Style and Class Inheritance\n- Clean Animations\n- Performant\n- Typescript\n\n## Frameworks\n\n- Vue\n\n## Installation\n\n```bash\nnpm install slim-select\n```\n\n### or\n\n```html\n<script src=\"https://unpkg.com/slim-select@latest/dist/slimselect.min.js\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/slim-select@latest/dist/slimselect.css\" />\n```\n\n## Simple Usage\n\n```javascript\nimport SlimSelect from 'slim-select'\n\nnew SlimSelect({\n  select: '#selectElement',\n})\n```\n\n```html\n<select id=\"selectElement\">\n  <option value=\"value1\">Value 1</option>\n</select>\n```\n\n## Data\n\nData is an array of objects that represent both option and optgroups.\n\nSee below for list of data types\n\n```javascript\nnew SlimSelect({\n  select: '#selectElement',\n\n  // Array of Option objects\n  data: [{ text: 'Value 1', value: 'value1' }],\n\n  // or\n\n  // Array of Optgroups and/or Options\n  data: [{ label: 'Optgroup Label', options: { text: 'Value 1', value: 'value1' } }],\n})\n```\n\n## Data Types\n\n```javascript\n// <optgroup>\nvar optgroup = {\n  label: 'label', // Required\n  selectAll: false, // Optional - default false\n  closable: 'off', // Optional - default 'off' - 'off', 'open', 'close'\n  options: [], // Required - value is an array of options\n}\n\n// <option>\nvar option = {\n  text: 'text', // Required\n  value: 'value', // Optional - value will be set by text if not set\n  html: '<b>Html</b>', // Optional - if set, used for display purposes\n  selected: false, // Optional - default is false\n  display: true, // Optional - default is true\n  disabled: false, // Optional - default is false\n  mandatory: false, // Optional - default is false\n  placeholder: false, // Optional - default is false\n  class: '', // Optional - default is not set\n  style: '', // Optional - default is not set\n  data: {}, // Optional - If you have data attributes\n}\n```\n\n## Settings\n\nSettings are a list of fields that help customize how SlimSelect operates\n\n```javascript\nnew SlimSelect({\n  select: '#selectElement',\n\n  settings: {\n    // Below are a list of optional fields\n    // their values are the defaults\n    disabled: false,\n    alwaysOpen: false,\n    showSearch: true,\n    searchPlaceholder: 'Search',\n    searchText: 'No Results',\n    searchingText: 'Searching...',\n    searchHighlight: false,\n    closeOnSelect: true,\n    contentLocation: document.body,\n    contentPosition: 'absolute',\n    openPosition: 'auto', // options: auto, up, down\n    placeholderText: 'Select Value',\n    allowDeselect: false,\n    hideSelected: false,\n    showOptionTooltips: false,\n    minSelected: 0,\n    maxSelected: 1000,\n    timeoutDelay: 200,\n    maxValuesShown: 20,\n    maxValuesMessage: '{number} selected',\n  },\n})\n```\n\n## Events\n\nEvents are function callbacks for when certain actions happen\n\n```javascript\nnew SlimSelect({\n  select: '#selectElement',\n\n  events: {\n    search: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial\n    searchFilter: (option: Option, search: string) => boolean\n    addable: (value: string) => Promise<OptionOptional | string> | OptionOptional | string\n    beforeChange: (newVal: Option[], oldVal: Option[]) => boolean | void\n    afterChange: (newVal: Option[]) => void\n    beforeOpen: () => void\n    afterOpen: () => void\n    beforeClose: () => void\n    afterClose: () => void\n    error: (err: Error) => void\n  },\n})\n```\n","readmeFilename":"README.md"}