slim-select 2.0.2 → 2.1.0

package/src/vue/hello.ts

@@ -0,0 +1,5 @@
+// This is only here to make the tsconfig.json happy
+// It didnt like there were no .ts files in the src/vue folder
+
+const hello = 'hello world'
+export default hello

package/src/vue/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@slim-select/vue",
+  "version": "1.0.0",
+  "description": "Vue integration",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brianvoe/slim-select.git"
+  },
+  "keywords": [
+    "vue"
+  ],
+  "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
+  "homepage": "https://slimselectjs.com",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/brianvoe/slim-select/issues"
+  },
+  "main": "dist/slimselectvue.ssr.js",
+  "browser": "dist/slimselect.global.js",
+  "module": "dist/slimselectvue.es.js",
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/vue/rollup.config.mjs

@@ -0,0 +1,44 @@
+import vue from 'rollup-plugin-vue'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from 'rollup-plugin-typescript2'
+
+export default [
+  // ESM build to be used with webpack/rollup.
+  {
+    input: './slimselect.vue',
+    output: {
+      format: 'es',
+      file: './dist/slimselectvue.es.js',
+    },
+    external: ['vue', 'slim-select'],
+    plugins: [resolve(), typescript({ clean: true }), vue()],
+  },
+
+  // SSR build.
+  {
+    input: './slimselect.vue',
+    output: {
+      exports: 'auto',
+      format: 'cjs',
+      file: './dist/slimselectvue.ssr.js',
+    },
+    external: ['vue', 'slim-select'],
+    plugins: [resolve(), typescript({ clean: true }), vue({ template: { optimizeSSR: true } })],
+  },
+
+  // Browser build.
+  {
+    input: './slimselect.vue',
+    output: {
+      name: 'SlimSelectVue',
+      format: 'iife',
+      file: './dist/slimselectvue.global.js',
+      globals: {
+        vue: 'vue',
+        'slim-select': 'slim-select',
+      },
+    },
+    external: ['vue', 'slim-select'],
+    plugins: [resolve(), typescript({ clean: true }), vue()],
+  },
+]

package/src/vue/slimselect.vue

@@ -1,13 +1,21 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, PropType } from 'vue'
 
-import SlimSelect, { Config } from '../slim-select'
+import SlimSelect, { Config, Events } from '../slim-select'
+import Settings from '../slim-select/settings'
+import { DataArrayPartial } from '../slim-select/store'
 
 export default defineComponent({
   name: 'SlimSelect',
   props: {
+    data: {
+      type: Array as PropType<DataArrayPartial>,
+    },
     settings: {
-      type: Object,
+      type: Object as PropType<Settings>,
+    },
+    events: {
+      type: Object as PropType<Events>,
     },
   },
   data() {
@@ -17,14 +25,24 @@ export default defineComponent({
   },
   mounted() {
     let config = {
-      select: this.$refs.slim as HTMLSelectElement,
+      select: this.$refs.slim,
     } as Config
 
-    // If props are passed in, merge them with the config
+    // If data is passed in, use it
+    if (this.data) {
+      config.data = this.data
+    }
+
+    // If settings are passed in, use it
     if (this.settings) {
       config.settings = this.settings
     }
 
+    // If events are passed in, use it
+    if (this.events) {
+      config.events = this.events
+    }
+
     // Initialize SlimSelect
     this.slim = new SlimSelect(config)
   },
@@ -33,6 +51,22 @@ export default defineComponent({
       this.slim.destroy()
     }
   },
+  watch: {
+    data: {
+      handler: function (newData) {
+        if (this.slim) {
+          this.slim.setData(newData)
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    // This allows via a ref to call the SlimSelect methods
+    getSlimSelect() {
+      return this.slim
+    },
+  },
 })
 </script>
 

package/src/vue/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true /* Enable all strict type-checking options. */,
+    "declaration": false /* Generates corresponding '.d.ts' file. */,
+    "outDir": "./dist", // Output to dist folder
+    "removeComments": true /* Do not emit comments to output. */,
+    "importHelpers": true /* Import emit helpers from 'tslib'. */
+  },
+  "include": ["**/**.ts", "**/*.vue"],
+  "exclude": ["./dist", "../slim-select/*"]
+}