From d88237d967588b95f44418e8eed09a33dc3d8be7 Mon Sep 17 00:00:00 2001
From: rigor789 <rigor789@gmail.com>
Date: Wed, 1 Apr 2020 19:38:02 +0200
Subject: [PATCH] feat(vShow): add runtime directive for vShow

---
 apps/test/app/app.js                     |  8 +++-
 packages/runtime/src/directives/vShow.ts | 49 ++++++++++++++++++++++++
 packages/runtime/src/index.ts            |  3 ++
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 packages/runtime/src/directives/vShow.ts

diff --git a/apps/test/app/app.js b/apps/test/app/app.js
index 9e7668e5..212cdb62 100755
--- a/apps/test/app/app.js
+++ b/apps/test/app/app.js
@@ -10,14 +10,20 @@ import {
 } from 'nativescript-vue'
 
 const testComp = defineComponent({
+    data() {
+        return {
+            toggle: true
+        }
+    },
     template: `<StackLayout v-bind="$attrs">
     <Button text="Hello Button" @tap="tapHandler(true)"/>
-    <Label text="Compiled label from template" />
+    <Label text="Compiled label from template" v-show="toggle" />
     <Label text="Another Compiled label from template" />
     <Label v-text="'Label with v-text...!?!?!?'" v-on:tap="tapHandler(false)" />
 </StackLayout>`,
     methods: {
         tapHandler(isButton = false) {
+            this.toggle = !this.toggle
             if (isButton) {
                 console.log('tap handler has fired for button!')
             } else {
diff --git a/packages/runtime/src/directives/vShow.ts b/packages/runtime/src/directives/vShow.ts
new file mode 100644
index 00000000..13ec1a9f
--- /dev/null
+++ b/packages/runtime/src/directives/vShow.ts
@@ -0,0 +1,49 @@
+import { ObjectDirective } from '@vue/runtime-core'
+import { NSVElement } from '@nativescript-vue/runtime'
+
+interface VShowElement extends NSVElement {
+  // _vod = vue original display
+  _vod: string
+}
+
+export const vShow: ObjectDirective<VShowElement> = {
+  beforeMount(el, { value }, { transition }) {
+    el._vod =
+      el.getAttribute('visibility') === 'none'
+        ? ''
+        : (el.getAttribute('visibility') as string)
+    if (transition && value) {
+      transition.beforeEnter(el)
+    } else {
+      setDisplay(el, value)
+    }
+  },
+  mounted(el, { value }, { transition }) {
+    if (transition && value) {
+      transition.enter(el)
+    }
+  },
+  updated(el, { value, oldValue }, { transition }) {
+    if (!value === !oldValue) return
+    if (transition) {
+      if (value) {
+        transition.beforeEnter(el)
+        setDisplay(el, true)
+        transition.enter(el)
+      } else {
+        transition.leave(el, () => {
+          setDisplay(el, false)
+        })
+      }
+    } else {
+      setDisplay(el, value)
+    }
+  },
+  beforeUnmount(el) {
+    setDisplay(el, true)
+  }
+}
+
+function setDisplay(el: VShowElement, value: unknown): void {
+  el.setAttribute('visibility', value ? el._vod : 'collapsed')
+}
diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
index 7a898bcb..174112c9 100644
--- a/packages/runtime/src/index.ts
+++ b/packages/runtime/src/index.ts
@@ -59,6 +59,9 @@ export * from './runtimeHelpers'
 export * from './registry'
 export { resolveComponent } from './resolveAssets'
 
+// runtime directive helpers
+export { vShow } from './directives/vShow'
+
 // Runtime components
 export { ActionBar } from './components/ActionBar'