Is there any plan to make a Vue version?

[adoin]

Is your feature request related to a problem? Please describe. Is there any plan to make a Vue version?

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

[zyc9012]

Yes, it's on the roadmap. Will start soon I think.

[loongmxbt]

Hope there is a Vue 3 version!

[stardolly]

Hope there is a Vue 3 version!

[maccesch]

Any updates on this?

[juanparati]

I was able to use "vuera-ts" in order of create a wrapper.

Example of Fortune-sheet usage as a Vue component (I use Vue2 with the property decorators).

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import {Workbook} from "@fortune-sheet/react";
import { ReactInVue } from "vuera-ts";
import FileSaver from 'file-saver';
import "@fortune-sheet/react/dist/index.css";

const SpreadsheetBook = ReactInVue(Workbook);

@Component({
  components: {SpreadsheetBook}
})
export default class SpreadsheetEditor extends Vue {


  // Mutable properties
  // ==================
  protected data = [
    {"name":"Editor","id":1,"order":1,"status":1,"celldata":[]}
  ];


  protected showCode = false;

  protected lastChange = [];
  protected formatted : any = null;
  protected showComponent = true;


  // Methods
  // =======
  protected onChanged(data : any) {
    this.lastChange = data;
  }

  protected displayLastChanges() : void {
    this.generateFormatted();
    this.showCode = !this.showCode;
  }

  protected saveFile() : void {
    this.generateFormatted();
    FileSaver.saveAs(
        new Blob([JSON.stringify(this.formatted)], {type: "application/json;charset=utf-8"}),
        'SheetTemplate_' + (new Date()).getTime() + '.json'
    )
  }

  protected dataToCelldata(data : any) {
    let celldata : any[] = [];

    if (data == null) {
      return celldata;
    }

    for (var r = 0; r < data.length; r += 1) {
      for (var c = 0; c < data[r].length; c += 1) {
        var v = data[r][c];

        if (v != null) {
          celldata.push({
            r: r,
            c: c,
            v: v
          });
        }
      }
    }

    return celldata;
  };

  protected generateFormatted() : void {
    const opts = ['ct', 'fa', 'bg', 'ff', 'fc', 'bl', 'it', 'fs', 'cl', 'vt', 'mc', 'tr', 'tb', 'tb', 'm', 'f'];

    this.formatted = this.lastChange.map(book => Object.assign(
        {},
        // @ts-ignore
        (({data, ...o}) => o)(book),
        {
          // @ts-ignore
          celldata: this.dataToCelldata(book.data)
        }
    ));
  }


  // Events
  // ======
  protected onSelectedFile(e : Event) : void {
    this.showComponent = false;
    const target = e.target as HTMLInputElement;

    if (target.files!.length) {
      const reader = new FileReader();
      reader.addEventListener('load', (event) => this.data = JSON.parse(event.target!.result as string));
      reader.readAsText(target.files![0]);
    }
    setTimeout(() => this.showComponent = true, 1000);
  }

}
</script>

<template>
    <div>
      <button type="button" @click="displayLastChanges">{{ showCode ? 'Hide' : 'Show' }} code</button>
      <button type="button" @click="saveFile">Save to file</button>
      <input ref="flUploader"
             type="file"
             class="modelUploader"
             accept="application/json"
             @change="onSelectedFile"
      />
      <SpreadsheetBook ref="spreadsheet"
                       v-if="showComponent"
                       class="fullWidthHeight"
                       :data='data'
                       :showToolbar="true"
                       :showFormulaBar="true"
                       :defaultFontSize="11"
                       :columnHeaderHeight="25"
                       lang="en"
                       @onChange="onChanged"
      />

      <div class="codeDialog" v-show="showCode">
        <div class="codeScroll">
          <code>{{ this.formatted }}</code>
        </div>
      </div>
    </div>

</template>

<style scoped>
.fullWidthHeight {
  width: 100%;
  height: 90vh;
}

.codeDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 50vh;
  width: 80vw;
  transform: translate(-50%, -50%);
  border: 1px solid;
  background: rgba(180, 180, 180, 0.99);
  padding: 20px;
  z-index: 9999;
}

.codeScroll {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
</style>