{"id":20447123,"url":"https://github.com/stfalcon-studio/stf-vue-select","last_synced_at":"2025-04-13T01:07:16.806Z","repository":{"id":57370864,"uuid":"95417458","full_name":"stfalcon-studio/stf-vue-select","owner":"stfalcon-studio","description":"stf vue select - most flexible and customized select","archived":false,"fork":false,"pushed_at":"2018-12-15T08:16:49.000Z","size":1319,"stargazers_count":62,"open_issues_count":7,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T18:06:45.252Z","etag":null,"topics":["component","custom","customized","flexible","ideal","input","labels","objects","search","select","select2","stf-vue-select","ui","vue","vue2","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stfalcon-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-26T06:54:58.000Z","updated_at":"2023-09-08T17:26:47.000Z","dependencies_parsed_at":"2022-09-05T14:00:41.156Z","dependency_job_id":null,"html_url":"https://github.com/stfalcon-studio/stf-vue-select","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stfalcon-studio%2Fstf-vue-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stfalcon-studio%2Fstf-vue-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stfalcon-studio%2Fstf-vue-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stfalcon-studio%2Fstf-vue-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stfalcon-studio","download_url":"https://codeload.github.com/stfalcon-studio/stf-vue-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631722,"owners_count":21136560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","custom","customized","flexible","ideal","input","labels","objects","search","select","select2","stf-vue-select","ui","vue","vue2","vuejs2"],"created_at":"2024-11-15T10:24:40.494Z","updated_at":"2025-04-13T01:07:16.771Z","avatar_url":"https://github.com/stfalcon-studio.png","language":"JavaScript","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["形成","UI Components","Form"],"readme":"# stf vue select VUE2\n\n[![Join the chat at https://gitter.im/stfalcon-studio/stf-vue-select](https://badges.gitter.im/stfalcon-studio/stf-vue-select.svg)](https://gitter.im/stfalcon-studio/stf-vue-select?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\u003e stf vue select - most flexible and customized select\n\nFor detailed explanation on how things work, checkout the [DEMO](https://stfalcon-studio.github.io/stf-vue-select/dist/)\n\n## install\n\n``` bash\n# install \nnpm install stf-vue-select --save\n\n\n```\n## import \n``` js\n\nimport {StfSelect, StfSelectOption} from \"stf-vue-select\";\nimport \"stf-vue-select/dist/lib/stf-vue-select.min.css\";\n\n...\n\nVue.component('stf-select-option', StfSelectOption);\nVue.component('stf-select', StfSelect);\n\n\n```\n\n## Using without webpack minified files\n\n``` js\n\u003cscript src=\"./dist/lib/stf-vue-select.min.js\"\u003e\u003c/script\u003e\n\nVue.use(StfSelectPlugin) \n\n```\n\n## usage\n\n``` html\n    \u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cimg src=\"./assets/logo.png\"\u003e\n    \u003ch1\u003estf-vue-select - the most flexible vue select\u003c/h1\u003e\n    \u003cbr\u003e\n    \u003clabel\u003eSelect without input\u003c/label\u003e\n    \u003cstf-select v-model=\"value\" style=\"width: 300px; margin: 0 auto\"\u003e\n      \u003cdiv slot=\"label\"\u003eInput address\u003c/div\u003e\n      \u003cdiv slot=\"value\"\u003e\n        \u003cdiv v-if=\"value\"\u003e\n           \u003cspan\u003e{{value.address}} (\u003csmall\u003e{{value.text}}\u003c/small\u003e)\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003csection class=\"options delivery_order__options\"\u003e\n          \u003cstf-select-option  \n           v-for=\"item of list\" :key=\"item.id\"\n           :value=\"item\"\n           :class=\"{'stf-select-option_selected': item.id === (value \u0026\u0026 value.id)}\" \n           \u003e\n              \u003cspan\u003e{{item.text}} (\u003csmall\u003e{{item.address}}\u003c/small\u003e)\u003c/span\u003e\n          \u003c/stf-select-option\u003e\n      \u003c/section\u003e\n    \u003c/stf-select\u003e\n\n    \u003cbr\u003e\n    \u003clabel\u003eSelect with input\u003c/label\u003e\n    \u003cstf-select v-model=\"value\" style=\"width: 300px; margin: 0 auto\"\u003e\n      \u003cdiv slot=\"label\"\u003eInput address\u003c/div\u003e\n      \u003cdiv slot=\"value\"\u003e\n        \u003cdiv v-if=\"value\"\u003e\n           \u003cspan\u003e{{value.address}} (\u003csmall\u003e{{value.text}}\u003c/small\u003e)\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv slot=\"search-input\"\u003e\n          \u003cinput @input=\"onsearch\"\u003e\n      \u003c/div\u003e\n      \u003csection class=\"options delivery_order__options\"\u003e\n          \u003cstf-select-option  \n           v-for=\"item of listFinded\" :key=\"item.id\"\n           :value=\"item\"\n           :class=\"{'stf-select-option_selected': item.id === (value \u0026\u0026 value.id)}\" \n           \u003e\n              \u003cspan\u003e{{item.text}} (\u003csmall\u003e{{item.address}}\u003c/small\u003e)\u003c/span\u003e\n          \u003c/stf-select-option\u003e\n      \u003c/section\u003e\n    \u003c/stf-select\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport {StfSelect, StfSelectOption} from './components/stf-select'\n\nexport default {\n  name: 'app',\n  components: {\n    StfSelect, \n    StfSelectOption\n  },\n  created() {\n    this.listFinded = this.list;\n  },\n  data () {\n    return {\n      value: null,\n      list: [\n        {\n          text: \"text1\",\n          address: \"address1\",\n          id: 1\n        },\n        {\n          text: \"text2\",\n          address: \"address2\",\n          id: 2\n        },\n        {\n          text: \"text3\",\n          address: \"address3\",\n          id: 3\n        },\n      ],\n      listFinded: [\n      ]\n    }\n  },\n  methods: {\n    onsearch(e) {\n      if (e.target.value) {\n        this.listFinded = this.list.filter(el =\u003e el.text.indexOf(e.target.value) !== -1 || el.address.indexOf(e.target.value) !== -1);\n      } else {\n        this.listFinded = this.list;\n      }\n    }\n  }\n\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n\u003c/style\u003e\n\n\n```\n\n## options\n```js\nprops: {\n    value: [Object, Number, String, Array, Boolean],\n    more: Boolean,\n    pending: Boolean,\n    optionsWrapClass: String,\n    needFocusInpOnTab: {\n        type: Boolean,\n        default: false\n    },\n},\n\n```\n\n\nFor detailed explanation on how things work, checkout the [DEMO](https://stfalcon-studio.github.io/stf-vue-select/dist/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstfalcon-studio%2Fstf-vue-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstfalcon-studio%2Fstf-vue-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstfalcon-studio%2Fstf-vue-select/lists"}