@revolist/vue-datagrid 3.1.2 → 3.2.0

package/.webpack/webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 
 let libraryName = 'vgrid';
 module.exports = {
+  mode: 'production',
   entry: {
     [libraryName]: './src/vgrid.ts'
   },

package/.webpack/webpack.dev.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const VueLoaderPlugin = require('vue-loader');
 
 module.exports = {
   mode: 'development',
@@ -26,7 +26,7 @@ module.exports = {
       appMountId: 'app',
       "exJs": [], // [ "dist/vgrid.js"],
     }),
-    new VueLoaderPlugin(),
+    new VueLoaderPlugin.VueLoaderPlugin(),
   ],
   resolve: {
     extensions: [ '.tsx', '.ts', '.js', '.vue' ],

package/dist/component.d.ts

@@ -0,0 +1,12 @@
+import Vue, { CreateElement } from "vue";
+declare type WatchFunction = (this: Vue, newVal: any, oldVal: any) => void;
+declare type WatchResult = {
+    [prop: string]: WatchFunction;
+};
+declare const _default: {
+    name: string;
+    props: string[];
+    watch: WatchResult;
+    render(this: Vue, h: CreateElement): JSX.Element;
+};
+export default _default;

package/dist/vgrid.d.ts

@@ -0,0 +1,10 @@
+import { AsyncComponent } from "vue/types/options";
+export declare const VGrid: AsyncComponent;
+declare function install(Vue: any): void;
+export declare const VGridPlugin: {
+    install: typeof install;
+};
+export declare const VGridVueTemplate: (cntr: import("vue").VueConstructor<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>>, customProps?: any) => (h: Function, p: any) => JSX.Element;
+export declare const VGridVueTemplateConstructor: (vueConstructor: import("vue").VueConstructor<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>>, e: HTMLElement, p: Record<string, any>) => import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>> | null | undefined;
+export declare const VGridVueEditor: (vueConstructor: import("vue/types/umd").VueConstructor<import("vue/types/umd")>) => (column: import("@revolist/revogrid/dist/types/interfaces").RevoGrid.ColumnDataSchemaModel, save: Function, close: Function) => import("./vue-editor-adapter").default;
+export default VGrid;

package/dist/vgrid.js

@@ -0,0 +1 @@
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("@revolist/revogrid/custom-element"),require("vue")):"function"==typeof define&&define.amd?define("VGrid",["@revolist/revogrid/custom-element","vue"],r):"object"==typeof exports?exports.VGrid=r(require("@revolist/revogrid/custom-element"),require("vue")):e.VGrid=r(e["@revolist/revogrid/custom-element"],e.vue)}(self,((e,r)=>(()=>{"use strict";var t={239:r=>{r.exports=e},748:e=>{e.exports=r}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{o.r(i),o.d(i,{VGrid:()=>m,VGridPlugin:()=>g,VGridVueEditor:()=>j,VGridVueTemplate:()=>b,VGridVueTemplateConstructor:()=>w,default:()=>C});var e=o(239),r=function(){return r=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},r.apply(this,arguments)},t=["rowHeaders","frameSize","rowSize","colSize","range","readonly","resize","canFocus","useClipboard","columns","source","pinnedTopSource","pinnedBottomSource","rowDefinitions","editors","plugins","columnTypes","theme","rowClass","autoSizeColumn","filter","canMoveColumns","trimmedRows","exporting","grouping","stretch"],n={},u=[];t.forEach((function(e){var r=e;n[r]=e,u.push(r),r=e.toLowerCase(),n[r]=e,u.push(r),r=e.split(/(?=[A-Z])/).join("-"),n[r]=e,u.push(r)}));var s=t.reduce((function(e,r){return e[r]=function(e){this.$refs.grid[r]=e},e}),{});const l={name:"vue-data-grid",props:u,watch:s,render:function(e){var t={};for(var n in this.$props)t[n]=this.$props[n];return e("revo-grid",{ref:"grid",domProps:t,on:r({},this.$listeners)})}};var c=o(748),a=o.n(c),d=function(){return d=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},d.apply(this,arguments)},p=function(e,r,t){if(!r)return null;var n;if((null==r?void 0:r.childNodes.length)&&(n=r.childNodes[0]),!n)return n=document.createElement("span"),r.appendChild(n),"object"==typeof e&&(e=a().extend(e)),new e({el:n,propsData:t});var o=n.__vue__;if(o)for(var i in t)o.$props[i]=t[i];return o};var f=function(){return f=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},f.apply(this,arguments)};const v=function(){function e(e,r,t,n){this.VueEditorConstructor=e,this.column=r,this.save=t,this.close=n,this.element=null,this.editCell=null}return e.prototype.componentDidRender=function(){},e.prototype.disconnectedCallback=function(){var e;null===(e=this.vueEl)||void 0===e||e.$destroy(),this.vueEl=void 0},e.prototype.render=function(e){var r=this;return e("span",{ref:function(e){return r.renderAdapter(e)}})},e.prototype.renderAdapter=function(e){if(e){var r=p(this.VueEditorConstructor,e,f(f({},this.editCell),{save:this.save,close:this.close}));r&&(this.vueEl=r)}},e}();var h=!1,m=function(r){!h&&(null==e?void 0:e.defineCustomElements)&&(null==e||e.defineCustomElements(),h=!0),r(l)},y=!1,g={install:function(e){y||(y=!0,e.component("vue-data-grid",m))}},b=function(e,r){return function(t,n){var o=r?d(d({},r),n):n;return t("span",{ref:function(r){return p(e,r,o)}})}},w=p,j=function(e){return function(r,t,n){return new v(e,r,t,n)}},V=null;"undefined"!=typeof window?V=window.Vue:void 0!==o.g&&(V=o.g.Vue),V&&V.use(g);const C=m})(),i})()));

package/dist/vue-editor-adapter.d.ts

@@ -0,0 +1,17 @@
+import { Edition, RevoGrid } from '@revolist/revogrid/dist/types/interfaces';
+import { VNode } from '@revolist/revogrid/dist/types/stencil-public-runtime';
+import { VueConstructor } from 'vue/types/umd';
+export default class VueEditorAdapter {
+    private VueEditorConstructor;
+    column: RevoGrid.ColumnDataSchemaModel;
+    private save;
+    private close;
+    element: Element | null;
+    editCell: Edition.EditCell | null;
+    private vueEl;
+    constructor(VueEditorConstructor: VueConstructor, column: RevoGrid.ColumnDataSchemaModel, save: Function, close: Function);
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    render(h: RevoGrid.HyperFunc<VNode>): JSX.Element;
+    private renderAdapter;
+}

package/dist/vue-editor.d.ts

@@ -0,0 +1,5 @@
+import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces';
+import { VueConstructor } from 'vue/types/umd';
+import VueEditorAdapter from './vue-editor-adapter';
+declare const vueEditor: (vueConstructor: VueConstructor) => (column: RevoGrid.ColumnDataSchemaModel, save: Function, close: Function) => VueEditorAdapter;
+export default vueEditor;

package/dist/vue-template.d.ts

@@ -0,0 +1,4 @@
+import Vue, { VueConstructor } from 'vue';
+export declare const vueTemplateConstructor: (vueConstructor: VueConstructor, e: HTMLElement, p: Record<string, any>) => Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>> | null | undefined;
+declare const vueTemplate: (cntr: VueConstructor, customProps?: any) => (h: Function, p: any) => JSX.Element;
+export default vueTemplate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/vue-datagrid",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Vue data grid spreadsheet",
   "main": "dist/vgrid.js",
   "scripts": {
@@ -30,25 +30,24 @@
   },
   "homepage": "https://github.com/revolist/vue-datagrid#readme",
   "license": "MIT",
+  "dependencies": {
+    "@revolist/revogrid": "^3.2.0",
+    "@stencil/core": "^2.6.0"
+  },
   "devDependencies": {
-    "clean-webpack-plugin": "^3.0.0",
-    "eslint": "^4.18.2",
-    "eslint-loader": "^1.6.1",
-    "html-webpack-plugin": "^4.5.0",
-    "sass": "^1.32.5",
-    "sass-loader": "^10.1.1",
-    "style-loader": "^2.0.0",
-    "ts-loader": "^8.0.6",
-    "typescript": "^4.0.3",
+    "@vue/compiler-sfc": "^3.2.37",
+    "clean-webpack-plugin": "^4.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "sass": "^1.54.4",
+    "sass-loader": "^13.0.2",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
     "vue": "^2.6.12",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.1.3",
-    "webpack-cli": "^4.1.0",
-    "webpack-dev-server": "^3.11.0"
-  },
-  "peerDependencies": {
-    "@revolist/revogrid": "^3.1.1",
-    "@stencil/core": "^2.6.0"
+    "vue-loader": "^15.10.0",
+    "vue-style-loader": "^4.1.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0"
   }
 }

package/public/index.ts

@@ -1,5 +1,3 @@
-// import './style.css';
-
 import Vue from 'vue';
 import App from './App.vue';
 

package/src/component.tsx

@@ -1,75 +1,82 @@
-import Vue, { CreateElement } from 'vue';
-import RevoGrid from '@revolist/revogrid';
+import Vue, { CreateElement } from "vue";
+import RevoGrid from "@revolist/revogrid";
 
 type Prop = keyof RevoGrid.Components.RevoGrid;
 type Grid = RevoGrid.Components.RevoGrid;
 type WatchFunction = (this: Vue, newVal: any, oldVal: any) => void;
-type WatchResult = {[prop: string]: WatchFunction; }
+type WatchResult = { [prop: string]: WatchFunction };
 
-const props: Prop[]  = [
-  'rowHeaders',
-  'frameSize',
-  'rowSize',
-  'colSize',
-  'range',
-  'readonly',
-  'resize',
-  'canFocus',
-  'useClipboard',
-  'columns',
-  'source',
-  'pinnedTopSource',
-  'pinnedBottomSource',
-  'rowDefinitions',
-  'editors',
-  'plugins',
-  'columnTypes',
-  'theme',
-  'rowClass',
-  'autoSizeColumn',
-  'filter',
-  'trimmedRows',
-  'exporting',
-  'grouping',
-  'stretch',
+const props: Prop[] = [
+  "rowHeaders",
+  "frameSize",
+  "rowSize",
+  "colSize",
+  "range",
+  "readonly",
+  "resize",
+  "canFocus",
+  "useClipboard",
+  "columns",
+  "source",
+  "pinnedTopSource",
+  "pinnedBottomSource",
+  "rowDefinitions",
+  "editors",
+  "plugins",
+  "columnTypes",
+  "theme",
+  "rowClass",
+  "autoSizeColumn",
+  "filter",
+  "canMoveColumns",
+  "trimmedRows",
+  "exporting",
+  "grouping",
+  "stretch",
 ];
 
 const propsKeys: Record<string, any> = {};
 const propsExtended: string[] = [];
-props.forEach(prop => {
-    let p: string = prop;
-    propsKeys[p] = prop; // regular
-    propsExtended.push(p);
+props.forEach((prop) => {
+  let p: string = prop;
+  propsKeys[p] = prop; // regular
+  propsExtended.push(p);
 
-    p = prop.toLowerCase();
-    propsKeys[p] = prop; // lower cased
-    propsExtended.push(p);
+  p = prop.toLowerCase();
+  propsKeys[p] = prop; // lower cased
+  propsExtended.push(p);
 
-    p = prop.split(/(?=[A-Z])/).join('-');
-    propsKeys[p] = prop; // kebab
-    propsExtended.push(p);
+  p = prop.split(/(?=[A-Z])/).join("-");
+  propsKeys[p] = prop; // kebab
+  propsExtended.push(p);
 });
 
 const watch = props.reduce((res: WatchResult, p: Prop) => {
-    const watchFunc = function (this: Vue, newVal: any) {
-        const grid = this.$refs.grid as unknown as Grid;
-        grid[p] = newVal as never;
-    };
-    res[p] = watchFunc;
-    return res;
+  const watchFunc = function (this: Vue, newVal: any) {
+    const grid = this.$refs.grid as unknown as Grid;
+    grid[p] = newVal as never;
+  };
+  res[p] = watchFunc;
+  return res;
 }, {});
 
 export default {
-    name: 'vue-data-grid',
-    props: propsExtended,
-    watch,
-    render(this: Vue, h: CreateElement) {
-        const domProps: Record<string, any> = {};
-        for (const key in this.$props) {
-            domProps[key] = this.$props[key];
-        }
-        return <revo-grid ref='grid' domProps={domProps} on={{
-            ...this.$listeners
-        }}/>;
-    },
+  name: "vue-data-grid",
+  props: propsExtended,
+  watch,
+  render(this: Vue, h: CreateElement) {
+    const domProps: Record<string, any> = {};
+    for (const key in this.$props) {
+      domProps[key] = this.$props[key];
+    }
+    return (
+      <revo-grid
+        ref="grid"
+        domProps={domProps}
+        on={{
+          ...this.$listeners,
+        }}
+      />
+    );
+  },
 };

package/src/shims-tsx.d.ts

@@ -1,4 +1,7 @@
-import Vue, { VNode } from 'vue';
+import {
+  VNode,
+  JSXBase,
+} from '@revolist/revogrid/dist/types/stencil-public-runtime';
 
 declare global {
   namespace JSX {
@@ -6,7 +9,13 @@ declare global {
     interface Element extends VNode {}
     // tslint:disable no-empty-interface
     interface ElementClass extends Vue {}
-    interface IntrinsicElements {
+
+    type NativeElements = {
+      [K in keyof IntrinsicElementAttributes]: JSXBase.DOMAttributes<
+        IntrinsicElementAttributes[K]
+      >;
+    };
+    interface IntrinsicElements extends JSXBase.DOMAttributes {
       [elem: string]: any;
     }
   }

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

package/.eslintrc.json

@@ -1,30 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "commonjs": true,
-        "es6": true,
-        "node": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "sourceType": "module"
-    },
-    "rules": {
-        "indent": [
-            "error",
-            4
-        ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
-        "quotes": [
-            "error",
-            "single"
-        ],
-        "semi": [
-            "error",
-            "always"
-        ]
-    }
-}