@reviewpush/rp-treeselect 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reviewpush/rp-treeselect",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "repository": "reviewpush/rp-treeselect",
   "main": "dist/rp-treeselect.cjs.js",
   "unpkg": "dist/rp-treeselect.umd.min.js",

package/src/components/Control.vue

@@ -10,7 +10,8 @@
     name: 'rp-treeselect--control',
 
     setup() {
-      const count = inject('instance')
+      const instance = inject('instance')
+      return { instance }
     },
 
     computed: {

package/src/components/HiddenFields.vue

@@ -1,4 +1,5 @@
 <script>
+  import { inject } from 'vue'
   import { isNaN } from '../utils'
 
   function stringifyValue(value) {
@@ -9,29 +10,27 @@
     return ''
   }
 
-  import { inject } from 'vue'
-export default {
+
+  export default {
     name: 'rp-treeselect--hidden-fields',
-    
+
     setup() {
-      const count = inject('instance')
+      const instance = inject('instance')
+      return { instance }
     },
-    functional: true,
-
-    render(_, context) {
-      const { instance } = context.injections
 
-      if (!instance.name || instance.disabled || !instance.hasValue) return null
+    render() {
+      if (!this.instance.name || this.instance.disabled || !this.instance.hasValue) return null
 
-      let stringifiedValues = instance.internalValue.map(stringifyValue)
+      let stringifiedValues = this.instance.internalValue.map(stringifyValue)
 
-      if (instance.multiple && instance.joinValues) stringifiedValues = [
-        stringifiedValues.join(instance.delimiter),
+      if (this.instance.multiple && this.instance.joinValues) stringifiedValues = [
+        stringifiedValues.join(this.instance.delimiter),
       ]
 
       return stringifiedValues.map((stringifiedValue, i) => (
         <input type="hidden"
-          name={instance.name}
+          name={this.instance.name}
           value={stringifiedValue}
           key={'hidden-field-' + i}
         />

package/src/components/Input.vue

@@ -1,4 +1,5 @@
 <script>
+  import { inject } from 'vue'
   import { debounce, deepExtend, includes } from '../utils'
   import { MIN_INPUT_WIDTH, KEY_CODES, INPUT_DEBOUNCE_DELAY } from '../constants'
 
@@ -12,12 +13,12 @@
     KEY_CODES.ARROW_DOWN,
   ]
 
-  import { inject } from 'vue'
-export default {
+  export default {
     name: 'rp-treeselect--input',
-    
+
     setup() {
-      const count = inject('instance')
+      const instance = inject('instance')
+      return { instance }
     },
 
     data: () => ({

package/src/components/Menu.vue

@@ -1,4 +1,5 @@
 <script>
+  import { inject } from 'vue'
   import { MENU_BUFFER } from '../constants'
   import { watchSize, setupResizeAndScrollEventListeners } from '../utils'
   import Option from './Option'
@@ -11,12 +12,13 @@
     below: 'bottom',
   }
 
-  import { inject } from 'vue'
-export default {
+
+  export default {
     name: 'rp-treeselect--menu',
-    
+
     setup() {
-      const count = inject('instance')
+      const instance = inject('instance')
+      return { instance }
     },
 
     computed: {

package/src/components/MultiValue.vue

@@ -1,14 +1,15 @@
 <script>
+  import { inject } from 'vue'
   import MultiValueItem from './MultiValueItem'
   import Input from './Input'
   import Placeholder from './Placeholder'
 
-  import { inject } from 'vue'
-export default {
+  export default {
     name: 'rp-treeselect--multi-value',
-    
+
     setup() {
-      const count = inject('instance')
+      const instance = inject('instance')
+      return { instance }
     },
 
     methods: {

package/src/components/MultiValueItem.vue

@@ -1,13 +1,14 @@
 <script>
+  import { inject } from 'vue'
   import { onLeftClick } from '../utils'
   import DeleteIcon from './icons/Delete'
 
-  import { inject } from 'vue'
-export default {
+  export default {
     name: 'rp-treeselect--multi-value-item',
-    
+
     setup() {
-      const count = inject('instance')
+      const instance = inject('instance')
+      return { instance }
     },
 
     props: {

package/src/components/Placeholder.vue

@@ -1,10 +1,12 @@
 <script>
   import { inject } from 'vue'
-export default {
+
+  export default {
     name: 'rp-treeselect--placeholder',
-    
+
     setup() {
-      const count = inject('instance')
+      const instance = inject('instance')
+      return { instance }
     },
 
     render() {

package/src/components/SingleValue.vue

@@ -1,13 +1,14 @@
 <script>
+  import { inject } from 'vue'
   import Input from './Input'
   import Placeholder from './Placeholder'
 
-  import { inject } from 'vue'
-export default {
+  export default {
     name: 'rp-treeselect--single-value',
-    
+
     setup() {
-      const count = inject('instance')
+      const instance = inject('instance')
+      return { instance }
     },
     methods: {
       renderSingleValueLabel() {

package/src/components/Tip.vue

@@ -1,7 +1,6 @@
 <script>
   export default {
     name: 'rp-treeselect--tip',
-    functional: true,
 
     props: {
       type: {
@@ -14,16 +13,16 @@
       },
     },
 
-    render(_, context) {
-      const { props, children } = context
+    render() {
+      const { icon, type } = this.$props
 
       return (
-        <div class={`rp-treeselect__tip rp-treeselect__${props.type}-tip`}>
+        <div class={`rp-treeselect__tip rp-treeselect__${type}-tip`}>
           <div class="rp-treeselect__icon-container">
-            <span class={`rp-treeselect__icon-${props.icon}`} />
+            <span class={`rp-treeselect__icon-${icon}`} />
           </div>
-          <span class={`rp-treeselect__tip-text rp-treeselect__${props.type}-tip-text`}>
-            {children}
+          <span class={`rp-treeselect__tip-text rp-treeselect__${type}-tip-text`}>
+            <slot></slot>
           </span>
         </div>
       )