Component-based app architecture

Questions
1

I would like to divide my Framework7 core desktop webapp into small reusable components with their own data and methods. For example, calendar widget as single-file component, or input with label and some properties (like error, success or read-only) as another single-file component and so on.

As I can see in documentation, component template or render function must return only single HTML element and it must be an element that is supported by router: page, popup, panel or tab.

So, is it possible to wrap my small UI widgets as single-file components and is it a good approach? Thank you.

2

I am here with exactly the same question. but unfortunately there is no answer to this question. since you have tried this before, had you find any success, if yes please post the mechanism here.
I am using framework7 with cordova
thank you

3

I made it work the following way:

First, create file with your component template, methods and style, for example:

<template>
  <div class="item-content item-input {{$props.status}}">
    <div class="item-input-wrap">
      <input {{#if $props.id}}id="{{$props.id}}"{{/if}}
             {{#if $props.placeholder}}placeholder="{{$props.placeholder}}"{{/if}}
             {{#if $props.required}}required{{/if}}
             {{#js_if "this.$props.valid =='true'"}}validate{{/js_if}}
             {{#js_if "this.$props.status =='readonly'"}}readonly{{/js_if}}
             {{#if $props.type}}type="{{$props.type}}"{{else}}type="text"{{/if}}
             {{#if $props.name}}name="{{$props.name}}"{{/if}}
             {{#if $props.value}}value="{{$props.value}}"{{/if}}
             class="myproject-input"             
             autocomplete="off"
             value="{{escape $props.value}}"
             
      >
    </div>
  </div>
</template>
  
  <script>
    export default {
      data () {
        return {
        }
      },
      methods: {
  
      },
      on: {
  
      }
    }
  </script>
  
  <style>
    input.myproject-input {
      padding-left: 15px;
    }

  </style>

Then you should register your component in app.js like so:

import myprojectInput from '../pages/components/widgets/myproject-input.f7.html';
Framework7.registerComponent('myproject-input', myprojectInput);

Where myproject-input.f7.html is name of your component file.

Then you can use your component in layout of your app, for example:

<div class="row">
  <div class="col-100">
    <myproject-input 
       id="client-card-address" 
       status="readonly" 
       placeholder="Enter your address" 
       value="{{this.currentItemData['address']}}"
     ></myproject-input>
   </div>
 </div>
1 Like
4

thank you, this will help me alot

1 Like