✅ ref slot with tsx sample

Author: trydofor

layers/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fessional/razor-common",
-  "version": "0.8.1-dev.16",
+  "version": "0.8.1-dev.17",
   "description": "common layer for mobile and desktop",
   "type": "module",
   "main": "./nuxt.config.ts",

layers/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fessional/razor-desktop",
-  "version": "0.8.1-dev.16",
+  "version": "0.8.1-dev.17",
   "description": "desktop layer with vuetify",
   "type": "module",
   "main": "./nuxt.config.ts",

layers/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fessional/razor-mobile",
-  "version": "0.8.1-dev.16",
+  "version": "0.8.1-dev.17",
   "description": "mobile layer with ionic and capacitor",
   "type": "module",
   "main": "./nuxt.config.ts",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fessional/razor",
-  "version": "0.8.1-dev.16",
+  "version": "0.8.1-dev.17",
   "description": "Use front-end tech (Nuxt/Ts) to build multi-platform from one codebase, suitable for small team and app to write app once, apply almost anywhere.",
   "type": "module",
   "files": [

plays/1-play-spa/components/ModelSlot.tsx

@@ -0,0 +1,41 @@
+import { defineComponent, computed, type Ref, type SlotsType } from 'vue'
+
+const ModelSlot = defineComponent({
+  name: 'ModelSlot',
+
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  slots: Object as SlotsType<{
+    default: (props: { model: Ref<number> }) => void
+  }>,
+
+  setup(props, { emit, slots }) {
+    const model = computed({
+      get: () => props.modelValue,
+      set: v => emit('update:modelValue', v),
+    })
+
+    return () => (
+      <div class="border border-solid p-4 border-1">
+        <div>{ '👶 Child ' + model.value }</div>
+        {slots.default?.({ model })}
+        <div
+          class="border border-solid cursor-pointer p-4 border-1 mt-2"
+          onClick={() => model.value++}
+        >
+          👶 Child ++
+        </div>
+      </div>
+    )
+  },
+})
+
+export type ModelSlot = InstanceType<typeof ModelSlot>
+export default ModelSlot

plays/2-play-web/pages/14-model-binding.vue

@@ -24,6 +24,21 @@
       </div>
       <ModelOld v-model="modelOld" />
     </div>
+    <div class="border border-solid p-2 border-1 flex flex-col gap-2">
+      <ModelSlot v-model="modelSlot">
+        <template #default="{ model }">
+          <div class="border border-solid p-4 border-1">
+            Parent ModelSlot {{ model }}
+          </div>
+          <div class="border border-solid cursor-pointer p-4 border-1" @click="model.value++">
+            👨🏻 Parent Slot ++
+          </div>
+          <div class="border border-solid cursor-pointer p-4 border-1" @click="model.value=model.value+1">
+            👨🏻 Parent Slot +1
+          </div>
+        </template>
+      </ModelSlot>
+    </div>
   </div>
 </template>
 
@@ -34,4 +49,5 @@ definePageMeta({
 
 const modelNew = shallowRef(1000);
 const modelOld = shallowRef(2000);
+const modelSlot = shallowRef(2000);
 </script>