@iankibetsh/vue-streamline 1.2.0 → 1.2.2

package/README.md

@@ -32,11 +32,19 @@ Vue.use(streamline, {
 import { useStreamline } from '@iankibet/vue-streamline'
 
 
-const {getActionUrl, service:tasksService} = useStreamline('tasks')
+const {getActionUrl, service:tasksService, props} = useStreamline('tasks')
 
-// call the service methods
+```
+
+## Calling an action/method in the service
+
+You can call an action/method in the service by calling the method on the service object
+```js
+const res = await tasksService.getTasks()
+
+// or
 
-tasksServices.getTasks().then(response => {
+tasksService.getTasks().then(response => {
     console.log(response)
 })
 ```
@@ -47,4 +55,14 @@ tasksServices.getTasks().then(response => {
 You can get the url to an action/method in the service by calling the getActionUrl method on the service object passing the action name and any parameters
 ```js
 getActionUrl('getTasks', 'active')
- ```
+ ```
+
+## Accessing class properties
+In your template just access the props object to get the class properties
+```html
+<template>
+    <div>
+        <h1>{{props.title}}</h1>
+    </div>
+</template>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/vue-streamline",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Vue library for streamlining laravel backend services with @iankibet/streamline composer package",
  "type": "module",
   "scripts": {

package/src/App.vue

@@ -23,6 +23,9 @@ const findPaybill = async ()=>{
     <hr/>
     <h3>Destructed: {{ testKey }}</h3>
     <h3>Original: {{ props.testKey }}</h3>
+    <h3>Original: {{ props.testKey }}</h3>
+    <h3>Original: {{ props.testKey }}</h3>
+    <h3>Original: {{ props.testKey }}</h3>
     <h3 class="text-success" >Loading : {{ loading }}</h3>
     <h1 @click="findPaybill">Get Paybill</h1>
     {{ foundPaybill }}

package/src/composables/useStreamline.js

@@ -64,6 +64,11 @@ const useStreamline = (stream, ...initialArgs) => {
 
     const handler = {
         get(target, prop, receiver) {
+            // Fetch properties if not already fetched
+            if (!propertiesFetched.value && !loading.value) {
+                fetchServiceProperties().then(() => target[prop]);
+            }
+
             // Handle existing properties
             if (prop in target) {
                 return target[prop];