vk-typescript-cli 1.0.0

package/src/templates/typescript/SpreadsheetEditor.ts

@@ -0,0 +1,39 @@
+import { Spreadsheet, ColumnModel, RowModel, CellModel } from '@syncfusion/ej2-spreadsheet';
+
+// Defines the data to be displayed in the Spreadsheet.
+const data: object[] = [
+    { Item: 'Apple', Qty: 10, Price: 1.50, Total: 15.00 },
+    { Item: 'Banana', Qty: 20, Price: 0.75, Total: 15.00 },
+    { Item: 'Orange', Qty: 15, Price: 2.00, Total: 30.00 },
+    { Item: 'Grapes', Qty: 8, Price: 3.00, Total: 24.00 },
+    { Item: 'Mango', Qty: 5, Price: 4.50, Total: 22.50 }
+];
+
+let spreadsheet: Spreadsheet = new Spreadsheet({
+    sheets: [
+        {
+            name: 'Inventory',
+            rows: [
+                {
+                    index: 1,
+                    cells: [
+                        { value: 'Item' }, { value: 'Qty' }, { value: 'Price' }, { value: 'Total' }
+                    ]
+                },
+                ...data.map((row: any) => ({
+                    cells: [
+                        { value: row.Item },
+                        { value: row.Qty },
+                        { value: row.Price, format: '$#,##0.00' },
+                        { formula: `=B${data.indexOf(row) + 2}*C${data.indexOf(row) + 2}`, format: '$#,##0.00' }
+                    ]
+                }))
+            ],
+            columns: [
+                { width: 120 }, { width: 80 }, { width: 100 }, { width: 100 }
+            ]
+        }
+    ]
+});
+
+spreadsheet.appendTo('#Spreadsheet');

package/src/templates/typescript/chart.ts

@@ -0,0 +1,37 @@
+import { Chart, LineSeries, Category, Legend, Tooltip, DataLabel } from '@syncfusion/ej2-charts';
+
+// Defines the data to be displayed in the Chart.
+const data: object[] = [
+    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
+    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
+    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
+    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
+    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
+    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
+];
+
+let chart: Chart = new Chart({
+    primaryXAxis: {
+        valueType: 'Category',
+        title: 'Months'
+    },
+    primaryYAxis: {
+        title: 'Sales (in percentage)',
+        minimum: 0,
+        maximum: 100,
+        interval: 10
+    },
+    series: [
+        {
+            dataSource: data,
+            xName: 'month',
+            yName: 'sales',
+            name: 'Sales',
+            type: 'Line',
+            marker: { visible: true, width: 10, height: 10 }
+        }
+    ],
+    title: 'Monthly Sales Analysis'
+});
+
+chart.appendTo('#Chart');

package/src/templates/typescript/diagram.ts

@@ -0,0 +1,30 @@
+import { Diagram, NodeModel, ConnectorModel, DataBinding, HierarchicalTree, LayoutAnimation } from '@syncfusion/ej2-diagrams';
+
+// Defines the nodes to be displayed in the Diagram.
+const nodes: NodeModel[] = [
+    { id: 'node1', width: 100, height: 50, offsetX: 100, offsetY: 100, annotations: [{ content: 'Start' }] },
+    { id: 'node2', width: 100, height: 50, offsetX: 300, offsetY: 100, annotations: [{ content: 'Process' }] },
+    { id: 'node3', width: 100, height: 50, offsetX: 500, offsetY: 100, annotations: [{ content: 'Decision' }] },
+    { id: 'node4', width: 100, height: 50, offsetX: 300, offsetY: 250, annotations: [{ content: 'End' }] }
+];
+
+// Defines the connectors between the nodes.
+const connectors: ConnectorModel[] = [
+    { id: 'conn1', sourceID: 'node1', targetID: 'node2' },
+    { id: 'conn2', sourceID: 'node2', targetID: 'node3' },
+    { id: 'conn3', sourceID: 'node3', targetID: 'node4' }
+];
+
+let diagram: Diagram = new Diagram({
+    width: '100%',
+    height: '600px',
+    nodes: nodes,
+    connectors: connectors,
+    getNodeDefaults: (node: NodeModel) => {
+        node.style = { fill: '#026EEE', strokeColor: '#026EEE', strokeWidth: 2 };
+        node.annotations[0].style = { color: 'white', fill: 'transparent' };
+        return node;
+    }
+});
+
+diagram.appendTo('#Diagram');

package/src/templates/typescript/docxeditor.ts

@@ -0,0 +1,30 @@
+import { DocumentEditor, Editor, Selection, EditorHistory, Toc, TableOfContents, Toolbar, SpellChecker, Search } from '@syncfusion/ej2-documenteditor';
+
+// Default content for the Document Editor.
+const defaultDocument: object = {
+    "sections": [
+        {
+            "blocks": [
+                {
+                    "paragraphFormat": { "styleName": "Normal" },
+                    "inlines": [
+                        { "text": "Hello, this is the Syncfusion Document Editor in TypeScript!" }
+                    ]
+                }
+            ]
+        }
+    ]
+};
+
+let editor: DocumentEditor = new DocumentEditor({
+    isReadOnly: false,
+    enableSelection: true,
+    enableEditorHistory: true,
+    enableSfdtTextExport: true,
+    enableWordExport: true,
+    enableTextExport: true,
+    enablePrint: true
+});
+
+editor.appendTo('#DocumentEditor');
+editor.open(JSON.stringify(defaultDocument));

package/src/templates/typescript/filemanager.ts

@@ -0,0 +1,41 @@
+import { FileManager, NavigationPane, Toolbar, DetailsView } from '@syncfusion/ej2-filemanager';
+
+// Defines the file system data for the File Manager.
+const fileData: object[] = [
+    {
+        name: 'Documents',
+        type: 'folder',
+        size: 0,
+        dateCreated: new Date('2025-01-01'),
+        dateModified: new Date('2025-01-10'),
+        hasChild: true
+    },
+    {
+        name: 'Pictures',
+        type: 'folder',
+        size: 0,
+        dateCreated: new Date('2025-01-05'),
+        dateModified: new Date('2025-01-08'),
+        hasChild: false
+    },
+    {
+        name: 'Report.pdf',
+        type: '.pdf',
+        size: 2048,
+        dateCreated: new Date('2025-01-15'),
+        dateModified: new Date('2025-01-15'),
+        hasChild: false
+    }
+];
+
+let filemanager: FileManager = new FileManager({
+    ajaxSettings: {
+        url: 'https://ej2services.syncfusion.com/production/web-services/api/FileManager/FileOperations',
+        getImageUrl: 'https://ej2services.syncfusion.com/production/web-services/api/FileManager/GetImage',
+        uploadUrl: 'https://ej2services.syncfusion.com/production/web-services/api/FileManager/Upload',
+        downloadUrl: 'https://ej2services.syncfusion.com/production/web-services/api/FileManager/Download'
+    },
+    view: 'Details'
+});
+
+filemanager.appendTo('#FileManager');

package/src/templates/typescript/gantt.ts

@@ -0,0 +1,88 @@
+import { Gantt, Edit, Selection, Toolbar, Filter, Sort, Resize, Reorder } from '@syncfusion/ej2-gantt';
+
+// Defines the data to be displayed in the Gantt chart.
+const data: object[] = [
+    {
+        TaskID: 1,
+        TaskName: 'Project Initiation',
+        StartDate: new Date('2025-01-04'),
+        Duration: 5,
+        Progress: 50,
+        ParentID: null
+    },
+    {
+        TaskID: 2,
+        TaskName: 'Identify Stakeholders',
+        StartDate: new Date('2025-01-04'),
+        Duration: 3,
+        Progress: 30,
+        ParentID: 1
+    },
+    {
+        TaskID: 3,
+        TaskName: 'Project Planning',
+        StartDate: new Date('2025-01-06'),
+        Duration: 7,
+        Progress: 40,
+        ParentID: 1
+    },
+    {
+        TaskID: 4,
+        TaskName: 'Define Scope',
+        StartDate: new Date('2025-01-06'),
+        Duration: 4,
+        Progress: 25,
+        ParentID: 3
+    },
+    {
+        TaskID: 5,
+        TaskName: 'Design Phase',
+        StartDate: new Date('2025-01-13'),
+        Duration: 10,
+        Progress: 0,
+        ParentID: null
+    },
+    {
+        TaskID: 6,
+        TaskName: 'UI Design',
+        StartDate: new Date('2025-01-13'),
+        Duration: 5,
+        Progress: 0,
+        ParentID: 5
+    },
+    {
+        TaskID: 7,
+        TaskName: 'Database Design',
+        StartDate: new Date('2025-01-18'),
+        Duration: 5,
+        Progress: 0,
+        ParentID: 5
+    }
+];
+
+let gantt: Gantt = new Gantt({
+    dataSource: data,
+    height: '450px',
+    taskFields: {
+        id: 'TaskID',
+        name: 'TaskName',
+        startDate: 'StartDate',
+        duration: 'Duration',
+        progress: 'Progress',
+        parentID: 'ParentID'
+    },
+    columns: [
+        { field: 'TaskID', headerText: 'Task ID', width: 100 },
+        { field: 'TaskName', headerText: 'Task Name', width: 250 },
+        { field: 'StartDate', headerText: 'Start Date', width: 150 },
+        { field: 'Duration', headerText: 'Duration', width: 100 },
+        { field: 'Progress', headerText: 'Progress', width: 100 }
+    ],
+    treeColumnIndex: 1,
+    allowSelection: true,
+    allowSorting: true,
+    allowFiltering: true,
+    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
+});
+
+gantt.appendTo('#Gantt');

package/src/templates/typescript/grid.ts

@@ -0,0 +1,30 @@
+import { Grid, Page, Sort, Filter, Edit, Toolbar, Inject } from '@syncfusion/ej2-grids';
+
+// Defines the data to be displayed in the Data Grid.
+const data: object[] = [
+    { OrderID: 10248, CustomerName: 'Ana Trujillo', OrderDate: new Date(2025, 0, 12), ShipCountry: 'France', Freight: 32.38 },
+    { OrderID: 10249, CustomerName: 'Martin Sommer', OrderDate: new Date(2025, 0, 15), ShipCountry: 'Germany', Freight: 11.61 },
+    { OrderID: 10250, CustomerName: 'Thomas Hardy', OrderDate: new Date(2025, 1, 5), ShipCountry: 'Brazil', Freight: 65.83 },
+    { OrderID: 10251, CustomerName: 'Elizabeth Lincoln', OrderDate: new Date(2025, 1, 18), ShipCountry: 'France', Freight: 41.34 },
+    { OrderID: 10252, CustomerName: 'Victoria Ashworth', OrderDate: new Date(2025, 2, 10), ShipCountry: 'Belgium', Freight: 51.30 },
+    { OrderID: 10253, CustomerName: 'Martine Rance', OrderDate: new Date(2025, 2, 22), ShipCountry: 'Brazil', Freight: 58.17 },
+];
+
+let grid: Grid = new Grid({
+    dataSource: data,
+    allowPaging: true,
+    allowSorting: true,
+    allowFiltering: true,
+    pageSettings: { pageSize: 5 },
+    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
+    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
+    columns: [
+        { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', type: 'number', isPrimaryKey: true },
+        { field: 'CustomerName', headerText: 'Customer Name', width: 140, type: 'string' },
+        { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd', textAlign: 'Right' },
+        { field: 'Freight', headerText: 'Freight', width: 120, textAlign: 'Right', format: 'C' },
+        { field: 'ShipCountry', headerText: 'Ship Country', width: 140, type: 'string' },
+    ]
+});
+
+grid.appendTo('#Grid');

package/src/templates/typescript/pdfviewer.ts

@@ -0,0 +1,8 @@
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+let viewer: PdfViewer = new PdfViewer({
+    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+    resourceUrl: 'https://cdn.syncfusion.com/ej2/27.2.4/dist/ej2-pdfviewer-lib'
+});
+
+viewer.appendTo('#PdfViewer');

package/src/templates/typescript/scheduler.ts

@@ -0,0 +1,39 @@
+import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';
+
+// Defines the data to be displayed in the Scheduler.
+const data: object[] = [
+    {
+        Id: 1,
+        Subject: 'Project Planning',
+        StartTime: new Date(2025, 0, 6, 9, 0),
+        EndTime: new Date(2025, 0, 6, 11, 0),
+        Location: 'Conference Room 1',
+        Description: 'Initial project planning meeting'
+    },
+    {
+        Id: 2,
+        Subject: 'Client Meeting',
+        StartTime: new Date(2025, 0, 7, 14, 0),
+        EndTime: new Date(2025, 0, 7, 16, 0),
+        Location: 'Board Room',
+        Description: 'Quarterly review with the client'
+    },
+    {
+        Id: 3,
+        Subject: 'Team Standup',
+        StartTime: new Date(2025, 0, 8, 10, 0),
+        EndTime: new Date(2025, 0, 8, 10, 30),
+        Location: 'Virtual',
+        Description: 'Daily team sync-up'
+    }
+];
+
+let schedule: Schedule = new Schedule({
+    width: '100%',
+    height: '650px',
+    views: ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda'],
+    selectedDate: new Date(2025, 0, 6),
+    eventSettings: { dataSource: data }
+});
+
+schedule.appendTo('#Scheduler');

package/src/templates/vue/Chart.vue

@@ -0,0 +1,257 @@
+<template>
+  <div id="control-pane" style="padding: 70px; margin: 0 auto">
+    <ejs-chart
+      id="charts"
+      :title="title"
+      :subTitle="subTitle"
+      :primaryXAxis="primaryXAxis"
+      :primaryYAxis="primaryYAxis"
+      :legendSettings="legendSettings"
+      :tooltip="tooltip"
+      :chartArea="chartArea"
+      :width="width"
+      :load="load"
+    >
+      <e-series-collection>
+        <e-series
+          :dataSource="vietnamData"
+          xName="x"
+          yName="y"
+          name="Vietnam"
+          type="Line"
+          :width="2"
+          :marker="circleMarker"
+          :labelSettings="labelSettings"
+        />
+
+        <e-series
+          :dataSource="indonesiaData"
+          xName="x"
+          yName="y"
+          name="Indonesia"
+          type="Line"
+          :width="2"
+          :marker="triangleMarker"
+          :labelSettings="labelSettings"
+        />
+
+        <e-series
+          :dataSource="franceData"
+          xName="x"
+          yName="y"
+          name="France"
+          type="Line"
+          :width="2"
+          :marker="diamondMarker"
+          :labelSettings="labelSettings"
+        />
+
+        <e-series
+          :dataSource="polandData"
+          xName="x"
+          yName="y"
+          name="Poland"
+          type="Line"
+          :width="2"
+          :marker="rectangleMarker"
+          :labelSettings="labelSettings"
+        />
+
+        <e-series
+          :dataSource="mexicoData"
+          xName="x"
+          yName="y"
+          name="Mexico"
+          type="Line"
+          :width="2"
+          :marker="pentagonMarker"
+          :labelSettings="labelSettings"
+        />
+      </e-series-collection>
+    </ejs-chart>
+  </div>
+</template>
+
+<script lang="ts">
+import { Browser } from '@syncfusion/ej2-base';
+import {
+  ChartComponent,
+  SeriesCollectionDirective,
+  SeriesDirective,
+  LineSeries,
+  Double,
+  Legend,
+  Tooltip,
+  Highlight,
+  SeriesLabel
+} from '@syncfusion/ej2-vue-charts';
+import { defineComponent } from 'vue';
+
+interface ChartPoint {
+  x: number;
+  y: number;
+}
+
+export default defineComponent({
+  name: 'Chart',
+  components: {
+    'ejs-chart': ChartComponent,
+    'e-series-collection': SeriesCollectionDirective,
+    'e-series': SeriesDirective
+  },
+  provide: {
+    chart: [LineSeries, Double, Legend, Tooltip, Highlight, SeriesLabel]
+  },
+  data() {
+    return {
+      vietnamData: [
+        { x: 2016, y: 7.8 },
+        { x: 2017, y: 10.3 },
+        { x: 2018, y: 15.5 },
+        { x: 2019, y: 17.5 },
+        { x: 2020, y: 19.5 },
+        { x: 2021, y: 23.0 },
+        { x: 2022, y: 20.0 },
+        { x: 2023, y: 19.0 },
+        { x: 2024, y: 22.1 }
+      ] as ChartPoint[],
+
+      indonesiaData: [
+        { x: 2016, y: 4.8 },
+        { x: 2017, y: 5.2 },
+        { x: 2018, y: 6.2 },
+        { x: 2019, y: 7.8 },
+        { x: 2020, y: 9.3 },
+        { x: 2021, y: 14.3 },
+        { x: 2022, y: 15.6 },
+        { x: 2023, y: 16.0 },
+        { x: 2024, y: 17.0 }
+      ] as ChartPoint[],
+
+      franceData: [
+        { x: 2016, y: 14.6 },
+        { x: 2017, y: 15.5 },
+        { x: 2018, y: 15.4 },
+        { x: 2019, y: 14.4 },
+        { x: 2020, y: 11.6 },
+        { x: 2021, y: 13.9 },
+        { x: 2022, y: 12.1 },
+        { x: 2023, y: 10.0 },
+        { x: 2024, y: 10.8 }
+      ] as ChartPoint[],
+
+      polandData: [
+        { x: 2016, y: 8.9 },
+        { x: 2017, y: 10.3 },
+        { x: 2018, y: 10.8 },
+        { x: 2019, y: 9.0 },
+        { x: 2020, y: 7.9 },
+        { x: 2021, y: 8.5 },
+        { x: 2022, y: 7.4 },
+        { x: 2023, y: 6.4 },
+        { x: 2024, y: 7.1 }
+      ] as ChartPoint[],
+
+      mexicoData: [
+        { x: 2016, y: 19.0 },
+        { x: 2017, y: 20.0 },
+        { x: 2018, y: 20.2 },
+        { x: 2019, y: 18.4 },
+        { x: 2020, y: 16.8 },
+        { x: 2021, y: 18.5 },
+        { x: 2022, y: 18.4 },
+        { x: 2023, y: 16.3 },
+        { x: 2024, y: 13.7 }
+      ] as ChartPoint[],
+
+      title: 'Annual Crude Steel Production by Country (2016–2024)',
+      subTitle: 'Source: wikipedia.org',
+
+      primaryXAxis: {
+        valueType: 'Double',
+        interval: 1,
+        majorGridLines: { width: 0 },
+        edgeLabelPlacement: 'Shift'
+      },
+
+      primaryYAxis: {
+        title: 'Volume in million metric tons',
+        minimum: 0,
+        maximum: 25,
+        interval: 5,
+        lineStyle: { width: 0 },
+        majorTickLines: { width: 0 }
+      },
+
+      legendSettings: {
+        visible: true,
+        enableHighlight: true
+      },
+
+      tooltip: {
+        enable: true,
+        shared: true
+      },
+
+      chartArea: {
+        border: { width: 0 }
+      },
+
+      circleMarker:  {
+        visible: true,
+        width: 7,
+        height: 7,
+        isFilled: true,
+        shape: 'Circle'
+      },
+
+      triangleMarker: {
+        visible: true,
+        width: 6,
+        height: 6,
+        isFilled: true,
+        shape: 'Triangle'
+      },
+
+      diamondMarker: {
+        visible: true,
+        width: 7,
+        height: 7,
+        isFilled: true,
+        shape: 'Diamond'
+      },
+
+      rectangleMarker: {
+        visible: true,
+        width: 5,
+        height: 5,
+        isFilled: true,
+        shape: 'Rectangle'
+      },
+
+      pentagonMarker: {
+        visible: true,
+        width: 7,
+        height: 7,
+        isFilled: true,
+        shape: 'Pentagon'
+      },
+
+      labelSettings: {
+        visible: true
+      },
+
+      width: Browser.isDevice ? '100%' : '75%'
+    };
+  },
+  methods: {
+    load(args: any): void {
+      const selectedTheme = location.hash.split('/')[1];
+      const theme = selectedTheme ? selectedTheme : 'Material';
+      args.chart.theme = (theme.charAt(0).toUpperCase() + theme.slice(1))
+        .replace(/-dark/i, 'Dark')
+        .replace(/contrast/i, 'Contrast');
+    }
+  }
+});
+</script>

package/src/templates/vue/ChartView.vue

@@ -0,0 +1,7 @@
+<template>
+  <Chart />
+</template>
+
+<script setup>
+import Chart from '../components/Chart.vue'
+</script>