데모
그리드(Vue)
고정된 셀 API

고정된 셀(FrozenCells) API (Vue)

셀 고정(Cell Freeze) 기능은 사용자가 특정 행과 열을 잠가 스크롤을 통해 다른 부분을 탐색하더라도 해당 행과 열이 항상 보이도록 해줍니다. 이전에는 FlexGrid에서 FrozenRows와 FrozenColumns을 사용해 상단과 왼쪽의 셀만 고정할 수 있었습니다. 이제 이 기능이 확장되어 FrozenCells를 통해 오른쪽과 하단의 셀 고정도 가능합니다.

지원되는 작업:

  1. 왼쪽 또는 오른쪽의 열 고정
  2. 상단 또는 하단의 행 고정
  3. 하나의 가로(왼쪽 또는 오른쪽)와 하나의 세로(상단 또는 하단) 고정 결합 가능

중요한 사항: frozenCells API는 네 면 모두를 고정할 수 있는 옵션을 제공하지만, 동시에 두 면에 대해서만 셀을 고정할 수 있습니다:

  • 하나의 가로 면(왼쪽 또는 오른쪽)
  • 하나의 세로 면(상단 또는 하단)

주의:

  • 왼쪽과 오른쪽 모두 설정한 경우, 왼쪽에 적용됩니다.
  • 상단과 하단 모두 설정한 경우, 상단에 적용됩니다.

이 데모는 Vue를 기반으로합니다.

JavaScript
Angular
React
Vue
app.vue
index.html
<template>
	<div class="container-fluid">
		<div class="flex-grow-0">
      <div id="freezeControls">
        <h2 class="text-center">Grid Freeze Cells API</h2>
        <div class="inputs">
          <div class="inputRow">
            <div class="ctrl">
              <label for="topFreeze" class="form-label">Freeze Rows (Top):</label>
              <input v-model.number="topFreeze" type="number" id="topFreeze" min="0" value="0" class="form-control"
                @change="handleInputChange" />
            </div>
            <div class="ctrl">
              <label for="bottomFreeze" class="form-label">Freeze Rows (Bottom):</label>
              <input v-model.number="bottomFreeze" type="number" id="bottomFreeze" min="0" value="0" class="form-control"
                @change="handleInputChange" />
            </div>
          </div>
          <div class="inputRow">
            <div class="ctrl">
              <label for="leftFreeze" class="form-label">Freeze Columns (Left):</label>
              <input v-model.number="leftFreeze" type="number" id="leftFreeze" min="0" value="0" class="form-control"
                @change="handleInputChange" />
            </div>
            <div class="ctrl">
              <label for="rightFreeze" class="form-label">Freeze Columns (Right):</label>
              <input v-model.number="rightFreeze" type="number" id="rightFreeze" min="0" value="0" class="form-control"
                @change="handleInputChange" />
            </div>
          </div>
        </div>
        <div class="d-grid gap-2 freezeBtns">
          <button type="button" class="btn btn-primary" id="btnFreezeCells" @click="freezeCells">Apply Freeze</button>
          <button type="button" class="btn btn-primary" id="btnClearFreezeCells" @click="clearFreezeCells">Clear Freeze</button>
        </div>
        <p id="errorMsg" class="text-center">{{ errorMessage }}</p>
      </div>
    </div>
		<div class="row flex-grow-1">
			<div class="col-12">
				<wj-flex-grid id="sample-grid" :allowPinning="'Both'" :itemsSource="data"
				:initialized="gridInitialized">
				</wj-flex-grid>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const data = ref(_getData());
const inputs = ref({});
const grid = ref(null);

onMounted(function () {
    inputs.value = {
        top: document.getElementById("topFreeze"),
        bottom: document.getElementById("bottomFreeze"),
        left: document.getElementById("leftFreeze"),
        right: document.getElementById("rightFreeze"),
    };
    Object.values(inputs.value).forEach((input) => (input.value = "0"));
});

function gridInitialized(ctl) {
    grid.value = ctl;
}

function freezeCells() {
    const frozenCells = {
        top: parseInt(document.getElementById("topFreeze").value) || 0,
        bottom: parseInt(document.getElementById("bottomFreeze").value) || 0,
        left: parseInt(document.getElementById("leftFreeze").value) || 0,
        right: parseInt(document.getElementById("rightFreeze").value) || 0,
    };

    // Apply the frozenCells to the grid
    grid.value.frozenCells = frozenCells;
    // Read back what was actually applied
    const appliedFrozenCells = grid.value.frozenCells;

    // Prepare the message
    const messageElement = document.getElementById("errorMsg");
    let appliedFreezeMsg = "Applied freeze: ";

    if (Object.keys(appliedFrozenCells).length === 0) {
        appliedFreezeMsg += "None";
    } else {
        appliedFreezeMsg += Object.entries(appliedFrozenCells)
            .map(([key, value]) => `${key}: ${value}`)
            .join(", ");
    }

    // Display the message
    messageElement.style.display = "block";
    messageElement.style.color = "green";
    messageElement.textContent = appliedFreezeMsg;
}

function clearFreezeCells() {
    grid.value.frozenCells = { top: 0, bottom: 0, left: 0, right: 0 };
    Object.values(inputs.value).forEach((input) => (input.value = "0"));
    handleInputChange(topFreeze, bottomFreeze, leftFreeze, rightFreeze);
    document.getElementById("errorMsg").innerHTML = "";
}

function handleInputChange() {
    const topValue = parseInt(inputs.value.top.value, 10) || 0;
    const bottomValue = parseInt(inputs.value.bottom.value, 10) || 0;
    const leftValue = parseInt(inputs.value.left.value, 10) || 0;
    const rightValue = parseInt(inputs.value.right.value, 10) || 0;

    toggleDisable(topValue, inputs.value.bottom);
    toggleDisable(bottomValue, inputs.value.top);
    toggleDisable(leftValue, inputs.value.right);
    toggleDisable(rightValue, inputs.value.left);
}

function toggleDisable(primaryValue, secondaryElement) {
    secondaryElement.disabled = primaryValue > 0;
}

function _getData() {
    // generate some random data
    var countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
        data = [];
    for (var i = 0; i < 200; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
            num1: Math.random() * 5000,
            num2: Math.random() * 5000,
            num3: Math.random() * 5000,
            num4: Math.random() * 5000,
            num5: Math.random() * 5000,
        });
    }
    return data;
}
</script>

<style>
.wj-flexgrid {
    max-height: 400px;
    max-width: 1000px;
    margin: 10px 0;
}

/* style frozen cells */
.wj-cell.wj-frozen:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected),
.wj-cell.wj-frozen.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
    background: rgb(255, 255, 125);
}

html,
body {
    height: 800px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container-fluid {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0px 10px
}

#freezeControls {
    max-width:1000px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 15px;
}

#freezeControls h2 {
    color: #007bff;
    margin-bottom: 20px;
}

.control-group {
    margin-bottom: 15px;
}

#errorMsg {
    color: #dc3545;
    font-weight: bold;
    margin-top: 10px;
}

.grid-container {
    flex-grow: 1;
    min-height: 0;
    /* Important for Firefox */
    display: flex;
    flex-direction: column;
}

.inputRow{
    display: flex;
    justify-content: space-between;
}

.ctrl{
    width: 100%;
    margin: 0px 10px;
}

.freezeBtns button{
    margin: 10px
}

.flex-container {
    display: flex;
}
</style>
<template> <div class="container-fluid"> <div class="flex-grow-0"> <div id="freezeControls"> <h2 class="text-center">Grid Freeze Cells API</h2> <div class="inputs"> <div class="inputRow"> <div class="ctrl"> <label for="topFreeze" class="form-label">Freeze Rows (Top):</label> <input v-model.number="topFreeze" type="number" id="topFreeze" min="0" value="0" class="form-control" @change="handleInputChange" /> </div> <div class="ctrl"> <label for="bottomFreeze" class="form-label">Freeze Rows (Bottom):</label> <input v-model.number="bottomFreeze" type="number" id="bottomFreeze" min="0" value="0" class="form-control" @change="handleInputChange" /> </div> </div> <div class="inputRow"> <div class="ctrl"> <label for="leftFreeze" class="form-label">Freeze Columns (Left):</label> <input v-model.number="leftFreeze" type="number" id="leftFreeze" min="0" value="0" class="form-control" @change="handleInputChange" /> </div> <div class="ctrl"> <label for="rightFreeze" class="form-label">Freeze Columns (Right):</label> <input v-model.number="rightFreeze" type="number" id="rightFreeze" min="0" value="0" class="form-control" @change="handleInputChange" /> </div> </div> </div> <div class="d-grid gap-2 freezeBtns"> <button type="button" class="btn btn-primary" id="btnFreezeCells" @click="freezeCells">Apply Freeze</button> <button type="button" class="btn btn-primary" id="btnClearFreezeCells" @click="clearFreezeCells">Clear Freeze</button> </div> <p id="errorMsg" class="text-center">{{ errorMessage }}</p> </div> </div> <div class="row flex-grow-1"> <div class="col-12"> <wj-flex-grid id="sample-grid" :allowPinning="'Both'" :itemsSource="data" :initialized="gridInitialized"> </wj-flex-grid> </div> </div> </div> </template> <script setup> import { ref, onMounted } from "vue"; const data = ref(_getData()); const inputs = ref({}); const grid = ref(null); onMounted(function () { inputs.value = { top: document.getElementById("topFreeze"), bottom: document.getElementById("bottomFreeze"), left: document.getElementById("leftFreeze"), right: document.getElementById("rightFreeze"), }; Object.values(inputs.value).forEach((input) => (input.value = "0")); }); function gridInitialized(ctl) { grid.value = ctl; } function freezeCells() { const frozenCells = { top: parseInt(document.getElementById("topFreeze").value) || 0, bottom: parseInt(document.getElementById("bottomFreeze").value) || 0, left: parseInt(document.getElementById("leftFreeze").value) || 0, right: parseInt(document.getElementById("rightFreeze").value) || 0, }; // Apply the frozenCells to the grid grid.value.frozenCells = frozenCells; // Read back what was actually applied const appliedFrozenCells = grid.value.frozenCells; // Prepare the message const messageElement = document.getElementById("errorMsg"); let appliedFreezeMsg = "Applied freeze: "; if (Object.keys(appliedFrozenCells).length === 0) { appliedFreezeMsg += "None"; } else { appliedFreezeMsg += Object.entries(appliedFrozenCells) .map(([key, value]) => `${key}: ${value}`) .join(", "); } // Display the message messageElement.style.display = "block"; messageElement.style.color = "green"; messageElement.textContent = appliedFreezeMsg; } function clearFreezeCells() { grid.value.frozenCells = { top: 0, bottom: 0, left: 0, right: 0 }; Object.values(inputs.value).forEach((input) => (input.value = "0")); handleInputChange(topFreeze, bottomFreeze, leftFreeze, rightFreeze); document.getElementById("errorMsg").innerHTML = ""; } function handleInputChange() { const topValue = parseInt(inputs.value.top.value, 10) || 0; const bottomValue = parseInt(inputs.value.bottom.value, 10) || 0; const leftValue = parseInt(inputs.value.left.value, 10) || 0; const rightValue = parseInt(inputs.value.right.value, 10) || 0; toggleDisable(topValue, inputs.value.bottom); toggleDisable(bottomValue, inputs.value.top); toggleDisable(leftValue, inputs.value.right); toggleDisable(rightValue, inputs.value.left); } function toggleDisable(primaryValue, secondaryElement) { secondaryElement.disabled = primaryValue > 0; } function _getData() { // generate some random data var countries = "US,Germany,UK,Japan,Italy,Greece".split(","), data = []; for (var i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, num1: Math.random() * 5000, num2: Math.random() * 5000, num3: Math.random() * 5000, num4: Math.random() * 5000, num5: Math.random() * 5000, }); } return data; } </script> <style> .wj-flexgrid { max-height: 400px; max-width: 1000px; margin: 10px 0; } /* style frozen cells */ .wj-cell.wj-frozen:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected), .wj-cell.wj-frozen.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) { background: rgb(255, 255, 125); } html, body { height: 800px; margin: 0; padding: 0; overflow: hidden; } .container-fluid { height: 100vh; display: flex; flex-direction: column; padding: 15px; box-sizing: border-box; overflow: hidden; margin: 0px 10px } #freezeControls { max-width:1000px; background-color: #f8f9fa; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; margin-bottom: 15px; } #freezeControls h2 { color: #007bff; margin-bottom: 20px; } .control-group { margin-bottom: 15px; } #errorMsg { color: #dc3545; font-weight: bold; margin-top: 10px; } .grid-container { flex-grow: 1; min-height: 0; /* Important for Firefox */ display: flex; flex-direction: column; } .inputRow{ display: flex; justify-content: space-between; } .ctrl{ width: 100%; margin: 0px 10px; } .freezeBtns button{ margin: 10px } .flex-container { display: flex; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Frozen Rows and Columns</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="compiler.js" type="module"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.js'); </script> </head> <body> <div id="app"> </div> </body> </html>
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: '../plugin-vue/index.js' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.vue2.chart.analytics": "npm:@mescius/wijmo.vue2.chart.analytics/index.js", "@mescius/wijmo.vue2.chart.animation": "npm:@mescius/wijmo.vue2.chart.animation/index.js", "@mescius/wijmo.vue2.chart.annotation": "npm:@mescius/wijmo.vue2.chart.annotation/index.js", "@mescius/wijmo.vue2.chart.finance.analytics": "npm:@mescius/wijmo.vue2.chart.finance.analytics/index.js", "@mescius/wijmo.vue2.chart.finance": "npm:@mescius/wijmo.vue2.chart.finance/index.js", "@mescius/wijmo.vue2.chart.hierarchical": "npm:@mescius/wijmo.vue2.chart.hierarchical/index.js", "@mescius/wijmo.vue2.chart.interaction": "npm:@mescius/wijmo.vue2.chart.interaction/index.js", "@mescius/wijmo.vue2.chart.radar": "npm:@mescius/wijmo.vue2.chart.radar/index.js", '@mescius/wijmo.vue2.chart.map': 'npm:@mescius/wijmo.vue2.chart.map/index.js', "@mescius/wijmo.vue2.chart": "npm:@mescius/wijmo.vue2.chart/index.js", "@mescius/wijmo.vue2.core": "npm:@mescius/wijmo.vue2.core/index.js", "@mescius/wijmo.vue2.gauge": "npm:@mescius/wijmo.vue2.gauge/index.js", "@mescius/wijmo.vue2.grid.detail": "npm:@mescius/wijmo.vue2.grid.detail/index.js", "@mescius/wijmo.vue2.grid.filter": "npm:@mescius/wijmo.vue2.grid.filter/index.js", "@mescius/wijmo.vue2.grid.grouppanel": "npm:@mescius/wijmo.vue2.grid.grouppanel/index.js", '@mescius/wijmo.vue2.grid.search': 'npm:@mescius/wijmo.vue2.grid.search/index.js', "@mescius/wijmo.vue2.grid.multirow": "npm:@mescius/wijmo.vue2.grid.multirow/index.js", "@mescius/wijmo.vue2.grid.sheet": "npm:@mescius/wijmo.vue2.grid.sheet/index.js", '@mescius/wijmo.vue2.grid.transposed': 'npm:@mescius/wijmo.vue2.grid.transposed/index.js', '@mescius/wijmo.vue2.grid.transposedmultirow': 'npm:@mescius/wijmo.vue2.grid.transposedmultirow/index.js', "@mescius/wijmo.vue2.grid": "npm:@mescius/wijmo.vue2.grid/index.js", "@mescius/wijmo.vue2.input": "npm:@mescius/wijmo.vue2.input/index.js", "@mescius/wijmo.vue2.olap": "npm:@mescius/wijmo.vue2.olap/index.js", "@mescius/wijmo.vue2.viewer": "npm:@mescius/wijmo.vue2.viewer/index.js", "@mescius/wijmo.vue2.nav": "npm:@mescius/wijmo.vue2.nav/index.js", "@mescius/wijmo.vue2.base": "npm:@mescius/wijmo.vue2.base/index.js", '@mescius/wijmo.vue2.barcode.common': 'npm:@mescius/wijmo.vue2.barcode.common/index.js', '@mescius/wijmo.vue2.barcode.composite': 'npm:@mescius/wijmo.vue2.barcode.composite/index.js', '@mescius/wijmo.vue2.barcode.specialized': 'npm:@mescius/wijmo.vue2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);