63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<input v-on:input="swapHotData" placeholder="separate by comma" value="Image, Name, Count, MoveCount, Move, MoveConfirm">
|
||
|
|
<hot-table
|
||
|
|
ref="hotTableComponent"
|
||
|
|
:settings="hotSettings"
|
||
|
|
></hot-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, computed, PropType, defineProps, defineEmits} from 'vue';
|
||
|
|
import { HotTable, HotColumn} from '@handsontable/vue3';
|
||
|
|
import { registerAllModules } from 'handsontable/registry';
|
||
|
|
import { InventoryTable, TableRecipe } from '../lib/table';
|
||
|
|
import { Columns, ColumnByNames } from '../lib/columns';
|
||
|
|
import { TricksterItem, SampleData } from '../lib/trickster';
|
||
|
|
import Handsontable from 'handsontable';
|
||
|
|
|
||
|
|
// register Handsontable's modules
|
||
|
|
registerAllModules();
|
||
|
|
|
||
|
|
const _defaultColumn = [
|
||
|
|
Columns.Image,
|
||
|
|
Columns.Name,
|
||
|
|
Columns.Count,
|
||
|
|
Columns.MoveCount,
|
||
|
|
Columns.Move,
|
||
|
|
]
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
data() {
|
||
|
|
let cols = _defaultColumn
|
||
|
|
const it = new InventoryTable(SampleData.aysheBoyfriend,
|
||
|
|
...cols
|
||
|
|
);
|
||
|
|
const dat = it.BuildTable()
|
||
|
|
return {
|
||
|
|
hotSettings: {
|
||
|
|
data: dat.data,
|
||
|
|
...dat.settings,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
swapHotData: function(event:any) {
|
||
|
|
let trm = event.target.value.split(",").map((x:any)=>x.trim())
|
||
|
|
let cols = ColumnByNames(...(trm as any)).filter(x=>x!=undefined)
|
||
|
|
if(cols.length < 2) {
|
||
|
|
cols = _defaultColumn
|
||
|
|
}
|
||
|
|
const it = new InventoryTable(SampleData.aysheBoyfriend,
|
||
|
|
...cols)
|
||
|
|
const hot = ((this.$refs!.hotTableComponent as any).hotInstance as Handsontable)
|
||
|
|
hot.updateSettings(it.BuildTable().settings)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
HotTable,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style src="handsontable/dist/handsontable.full.css"></style>
|