{"_id":"@andy922200/vue-multi-select","_rev":"1-e0048ec262a965b9abca9e8f961bdb61","name":"@andy922200/vue-multi-select","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@andy922200/vue-multi-select","version":"1.0.0","description":"A Custom Select via Vue 2.0 & TypeScript","author":{"name":"Andy Lien","email":"andy922200@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/andy922200/vue-multi-select.git"},"keywords":["typescript","vue","multi-select","component"],"main":"dist/vue-multi-select.ssr.js","browser":"dist/vue-multi-select.esm.js","module":"dist/vue-multi-select.esm.js","unpkg":"dist/vue-multi-select.min.js","types":"vue-multi-select.d.ts","sideEffects":false,"scripts":{"serve":"vue-cli-service serve dev/serve.ts","build":"cross-env NODE_ENV=production rollup --config build/rollup.config.js","build:ssr":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs","build:es":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es","build:unpkg":"cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"},"dependencies":{},"devDependencies":{"@babel/core":"^7.12.10","@babel/preset-env":"^7.12.11","@babel/preset-typescript":"^7.12.7","@rollup/plugin-alias":"^3.1.1","@rollup/plugin-babel":"^5.2.2","@rollup/plugin-commonjs":"^17.0.0","@rollup/plugin-node-resolve":"^11.0.1","@rollup/plugin-replace":"^2.3.4","@typescript-eslint/eslint-plugin":"^4.19.0","@typescript-eslint/parser":"^4.19.0","@vue/cli-plugin-babel":"^4.5.10","@vue/cli-plugin-typescript":"^4.5.10","@vue/cli-service":"^4.5.10","autoprefixer":"^10.2.5","axios":"^0.21.1","bootstrap":"^4.6.0","cross-env":"^7.0.3","eslint":"^7.22.0","eslint-plugin-vue":"^7.8.0","minimist":"^1.2.5","postcss":"^8.2.9","postcss-url":"^10.1.3","rollup":"^2.36.1","rollup-plugin-scss":"^2.6.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-vue":"^5.1.9","sass-loader":"^10.1.1","typescript":"^3.8.3","vue":"^2.6.12","vue-eslint-parser":"^7.6.0","vue-template-compiler":"^2.6.12"},"peerDependencies":{"vue":"^2.6.12"},"engines":{"node":">=12"},"gitHead":"21a7b70c8b32a6876f73d4e597099afe01d00c59","bugs":{"url":"https://github.com/andy922200/vue-multi-select/issues"},"homepage":"https://github.com/andy922200/vue-multi-select#readme","_id":"@andy922200/vue-multi-select@1.0.0","_nodeVersion":"12.20.0","_npmVersion":"6.14.9","dist":{"integrity":"sha512-J5HykyyK03w77/BbRgjP5qDeYkGhY0qqZZEt/d8612aNARHJYL7hV9EWNxOIN1U6VKU9UZHjoTm0m9sMRROquw==","shasum":"33958decc16177e94b1b480e0566254a17463b50","tarball":"https://registry.npmjs.org/@andy922200/vue-multi-select/-/vue-multi-select-1.0.0.tgz","fileCount":10,"unpackedSize":132306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf8KfCRA9TVsSAnZWagAAt4IQAIgndwCmAV7kWQKxQPCz\nBEEEMGfPv/SXk/OfyGNTOoyJCAnmM+F2MgjCJrAcbrIEK459JbHBsohB2Vyu\nAa4Sijo1SWV9rMJv9AxCXAQ1TXv4/vh/98txjmaY+JqYyo8l4fTpGg3281mg\nlv8aGNftWq5UHlWFBxEcHk8i68bSBtyTOhxSkjq9+wWBZabTnpWaLC6RMi8X\nAsxbc2QRuzwh2cQY98U8K4VHQ03t2r1HKLrYt2dlhwQt4GvZnrsjQScp3joq\n2fKAhrkJMqCpJzXLbY1LslyBmDkHqS6k7ZydFseZp3/cdE0DFmiNtTID6LPa\nsGK7IduurqJHzfqJdzvhra1Vsj1261DN0+5kT3N1PHy1RYRWFMsQjr6zSaDQ\nQA955gX41xEVuBh/UEUp1N2kPkqUbAiGL+RsSaYpi5HE+z6BC1TSk725EDmc\nZkPHt2X8IUguPRdXXhdL2VTkjV5FERqfgni3qzalAUPxXMSxMmIm08GTA4ah\nSB9VIt5pZqeKQxqjdP3Z0ShIL7SW3DSjb8KX1/FyHwTjzpNqREf7+83TaOBn\nEz97Bh1rM4klnqfCC5+o5KyzKnBu1ncE9kvqAYKyduJNRS4SVjYfshatj5z8\nY6ECEr8lOiLVphWbgtIJuLe/Bma1lCn2iYCnm1nyU5mmZ+9B6A6yyGKjewIU\nLzQ3\r\n=eOJX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgvd4KJbfscaHSMlgGN/xMn6D8+pdjlOs2xIi4Ld/tIwIgTicQlUWzdooZ5kElal7epmA6td2dhUUoKiIY/anbmao="}]},"_npmUser":{"name":"andy922200","email":"andy922200@gmail.com"},"directories":{},"maintainers":[{"name":"andy922200","email":"andy922200@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-multi-select_1.0.0_1618985630644_0.9619418108760955"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-21T06:13:50.599Z","1.0.0":"2021-04-21T06:13:50.871Z","modified":"2022-04-04T14:04:32.034Z"},"maintainers":[{"name":"andy922200","email":"andy922200@gmail.com"}],"description":"A Custom Select via Vue 2.0 & TypeScript","homepage":"https://github.com/andy922200/vue-multi-select#readme","keywords":["typescript","vue","multi-select","component"],"repository":{"type":"git","url":"git+https://github.com/andy922200/vue-multi-select.git"},"author":{"name":"Andy Lien","email":"andy922200@gmail.com"},"bugs":{"url":"https://github.com/andy922200/vue-multi-select/issues"},"readme":"# Vue-Multi-Select\r\n\r\n以 Vue 2 和 TypeScript 為基底的簡易選擇器\r\nA Vue-Multi-Select via Vue 2.0 & TypeScript\r\n\r\n## Table of Contents\r\n  * [Demo](#demo)\r\n  * [Getting Started](#getting-started)\r\n  * [Built With](#built-with)\r\n  * [Author](#author)\r\n  * [License](#license)\r\n\r\n## Demo\r\n![Alt text](/demo.gif)\r\n\r\n## Getting Started\r\n### Prerequisites 安裝環境建置\r\n\r\n* [Node.js](https://nodejs.org/en/) - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.\r\n* [Vue 2.0](https://vuejs.org/) - The Progressive JavaScript Framework\r\n\r\n### How to use 如何使用\r\n\r\n1. Install via npm 使用 npm 來進行安裝\r\n```javascript\r\n    cd /\"your-vue-project-root-folder\"/\r\n    npm install @andy922200/vue-multi-select\r\n```\r\n2. Usage in Vue 2 在 Vue 2 環境下使用\r\n```javascript\r\n    /*  main.ts or main.js */\r\n    import '@andy922200/vue-multi-select/dist/vue-multi-select.css'\r\n    import VueMultiSelect from '@andy922200/vue-multi-select'\r\n    Vue.use(VueMultiSelect)\r\n```\r\n3. Use the component in *.vue 在 *.vue 中使用套件 \r\n```html\r\n<!-- Single Layer Mode-->\r\n<template>\r\n    <vue-multi-select \r\n        selector-title=\"SingleLayer\"\r\n        :is-fetching=\"isFetching\"\r\n        :button-options=\"{\r\n            close: { name: 'Close1', hide: false},\r\n            apply: { name: 'Apply1', hide: false},\r\n            selectAll: { name: 'SelectAll1', hide: false},\r\n            clear: { name: 'Clear1', hide: false},\r\n        }\"\r\n        :options=\"yourData\"\r\n        place-holder-text=\"placeHolderText\"\r\n        @getSelectedOptions=\"method for receiving data\"\r\n    />\r\n</template>\r\n\r\n<!-- Double Layer Mode-->\r\n<template>\r\n    <vue-multi-select \r\n        selector-title=\"DoubleLayer\"\r\n        :is-fetching=\"isFatherFetching\"\r\n        :button-options=\"{\r\n            close: { name: 'Close2', hide: false},\r\n            apply: { name: 'Apply2', hide: false},\r\n            selectAll: { name: 'SelectAll2', hide: false},\r\n            clear: { name: 'Clear2', hide: false},\r\n        }\"\r\n        :double-layer-mode=\"true\"\r\n        :group-mode=\"true\"\r\n        :father-options=\"tests\"\r\n        :children-option-fetch-function=\"fetchData\"\r\n        place-holder-text=\"placeHolderText\"\r\n        @getSelectedOptions=\"printValue\"\r\n    />\r\n</template>\r\n```\r\n### Props 傳入參數\r\n| Name | Default Value | Type | Required | Describe |\r\n| ---- | ------- | --------- | -------- | -------- |\r\n| buttonOptions | buttonOption[] | Object | false | 4 Buttons ( Close, Apply, SelectAll Clear) |\r\n| childrenOptionFetchFunction | {} | Function | false | Fetch ChildrenLayer Option |\r\n| doubleLayerMode | false | Boolean | false | Activate DoubleLayer Mode |\r\n| fatherOptions | [] | Array | false | FatherLayer Options |\r\n| groupMode | false | Boolean | false | Activate GroupMode (The object in each option should include 'groupName' )\r\n| isFetching | false | Boolean | false | built-in spinner |\r\n| isToggleButtonDisable | false | Boolean | false | toggle button status  |\r\n| limit | Infinity| Number | false | limit numbers of user-selected options |\r\n| options| [] | Array | false | Selector Options\r\n| placeHolderText | false | String | false | searchBar placeHolderText |\r\n| single | false | Boolean | false | single select |\r\n| selectorTitle| \"\" | String | true | Trigger Dropdown Button Text  |\r\n\r\n\r\n```js\r\n// buttonOption Interface\r\n{\r\n    \"name\": \"string\",\r\n    \"hide\": boolean\r\n}\r\n\r\n// buttonOption Default\r\n{\r\n    close: { name: 'Close1', hide: false},\r\n    apply: { name: 'Apply1', hide: false},\r\n    selectAll: { name: 'SelectAll1', hide: false},\r\n    clear: { name: 'Clear1', hide: false},\r\n}\r\n```\r\n\r\n### Event 觸發事件\r\n| Name | Type | Describe |\r\n| ---- | --------- | -------- |\r\n| getSelectedOptions | customObject [] [Array] | get user-selected options |\r\n\r\n```json\r\n// SingleLayer Option Object Demo\r\n{\r\n    \"key1\":\"value1\",\r\n    \"key2\":\"value2\",\r\n    \"key3\":\"value3\",\r\n    \"label\": \"label1, This should be included.\",\r\n    \"groupName\": \"If you are using groupMode, this key-value pair should be included\"\r\n}\r\n\r\n// DoubleLayer FatherOption Object Demo\r\n{\r\n    \"label\": \"NodeJS\",\r\n    \"value\": \"nodejs\"\r\n}\r\n\r\n// DoubleLayer ChildrenOption Object Demo\r\n{\r\n    \"key1\":\"value1\",\r\n    \"key2\":\"value2\",\r\n    \"key3\":\"value3\",\r\n    \"label\": \"label1, This should be included.\",\r\n    \"fatherOptionLabel\": \"This value will be generated from 'DoubleLayer FatherOption Object label'\",\r\n    \"groupName\": \"If you are using groupMode, this key-value pair should be included\"\r\n}\r\n```\r\n```javascript\r\n// childrenOptionFetchFunction Demo\r\nasync fetchData(query='', fatherOptionLabel=''){\r\n    try{\r\n        const { data: rawData } = await axios.get(`/positions.json?search=${query}`)\r\n        const result = rawData.map((d:any)=>{\r\n            const newObject = {\r\n                ... d,\r\n                label: `${fatherOptionLabel} ${d.title}`,\r\n                fatherOptionLabel,\r\n                groupName: d.company ? d.company : 'N/A'\r\n            }\r\n            return newObject\r\n        })\r\n        return result\r\n    }catch(err){\r\n        console.log(err)\r\n    }\r\n}\r\n```\r\n### Customize your Button 客製化按鈕\r\n```html\r\n<vue-multi-select>\r\n    <template #closeBtn=\"{closeMethod}\">\r\n        <button @click=\"closeMethod\">\r\n            Close\r\n        </button>\r\n    </template>\r\n\r\n    <template #spinner>\r\n        Your Spinner Component\r\n    </template>\r\n</<vue-multi-select>\r\n```\r\n\r\n### Slot \r\n| Name | Method |\r\n| ---- | --------- |\r\n| closeBtn | closeMethod |\r\n| applyBtn |applyMethod|\r\n| selectAllBtn |selectAllMethod|\r\n| clearBtn |clearSelectedOptionsMethod|\r\n| spinner | None |\r\n\r\n## Built With\r\n* [Node.js](https://nodejs.org/en/) - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.\r\n* [Vue 2.0](https://vuejs.org/) - The Progressive JavaScript Framework\r\n* [Vue-Sfc-Rollup](https://www.npmjs.com/package/vue-sfc-rollup) - vue-sfc-rollup is a CLI templating utility that scaffolds a minimal setup for compiling a Vue Single File Component (SFC) - or library of multiple SFCs\r\n* [TypeScript](https://www.typescriptlang.org/) - TypeScript extends JavaScript by adding types.\r\n\r\n## Author\r\n- [Andy Lien](https://github.com/andy922200)\r\n\r\n## License\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) for details.","readmeFilename":"Readme.md"}