diff --git a/package-lock.json b/package-lock.json index 8d08f5c..f9a4f0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-screen", - "version": "1.2.1", + "version": "1.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2621,6 +2621,53 @@ } } }, + "@types/anymatch": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", + "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==", + "dev": true + }, + "@types/babel__core": { + "version": "7.1.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.5.tgz", + "integrity": "sha512-+ckxwNj892FWgvwrUWLOghQ2JDgOgeqTPwrcl+0t1pG59CP8qMJ6S/efmEd999vCFSJKOpyMakvU+w380rduUQ==", + "dev": true, + "requires": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "@types/babel__generator": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.1.tgz", + "integrity": "sha512-bBKm+2VPJcMRVwNhxKu8W+5/zT7pwNEqeokFOmbvVSqGzFneNxYcEBro9Ac7/N9tlsaPYnZLK8J1LWKkMsLAew==", + "dev": true, + "requires": { + "@babel/types": "^7.0.0" + } + }, + "@types/babel__template": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.0.2.tgz", + "integrity": "sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==", + "dev": true, + "requires": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "@types/babel__traverse": { + "version": "7.0.9", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.9.tgz", + "integrity": "sha512-jEFQ8L1tuvPjOI8lnpaf73oCJe+aoxL6ygqSy6c8LcW98zaC+4mzWuQIRCEvKeCOu+lbqdXcg4Uqmm1S8AP1tw==", + "dev": true, + "requires": { + "@babel/types": "^7.3.0" + } + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -2651,6 +2698,105 @@ "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==", "dev": true }, + "@types/source-list-map": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", + "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==", + "dev": true + }, + "@types/tapable": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.5.tgz", + "integrity": "sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==", + "dev": true + }, + "@types/terser-webpack-plugin": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@types/terser-webpack-plugin/-/terser-webpack-plugin-2.2.0.tgz", + "integrity": "sha512-ywqEfTm7KdKoX9aYx0zYtiFU1z6IHrIYW9FJqeay2Ea58rTPML1J0hvoztGal2Jow3bkgGKcAmEZNL+8LqUVrA==", + "dev": true, + "requires": { + "@types/webpack": "*", + "terser": "^4.3.9" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "terser": { + "version": "4.6.4", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.4.tgz", + "integrity": "sha512-5fqgBPLgVHZ/fVvqRhhUp9YUiGXhFJ9ZkrZWD9vQtFBR4QIGTnbsb+/kKqSqfgp3WnBwGWAFnedGTtmX1YTn0w==", + "dev": true, + "requires": { + "commander": "^2.20.0", + "source-map": "~0.6.1", + "source-map-support": "~0.5.12" + } + } + } + }, + "@types/uglify-js": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.0.4.tgz", + "integrity": "sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ==", + "dev": true, + "requires": { + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "@types/webpack": { + "version": "4.41.6", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.6.tgz", + "integrity": "sha512-iWRpV5Ej+8uKrgxp6jXz3v7ZTjgtuMXY+rsxQjFNU0hYCnHkpA7vtiNffgxjuxX4feFHBbz0IF76OzX2OqDYPw==", + "dev": true, + "requires": { + "@types/anymatch": "*", + "@types/node": "*", + "@types/tapable": "*", + "@types/uglify-js": "*", + "@types/webpack-sources": "*", + "source-map": "^0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "@types/webpack-sources": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.6.tgz", + "integrity": "sha512-FtAWR7wR5ocJ9+nP137DV81tveD/ZgB1sadnJ/axUGM3BUVfRPx8oQNMtv3JNfTeHx3VP7cXiyfR/jmtEsVHsQ==", + "dev": true, + "requires": { + "@types/node": "*", + "@types/source-list-map": "*", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "@vue/babel-helper-vue-jsx-merge-props": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz", @@ -12382,6 +12528,12 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "typescript": { + "version": "3.8.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.2.tgz", + "integrity": "sha512-EgOVgL/4xfVrCMbhYKUQTdF37SQn4Iw73H5BgCrF1Abdun7Kwy/QZsE/ssAy0y4LxBbvua3PIbFsbRczWWnDdQ==", + "dev": true + }, "ua-parser-js": { "version": "0.7.20", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", diff --git a/package.json b/package.json index c957b28..e8e2c21 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-screen", - "version": "1.3.0", + "version": "1.4.1", "description": "Reactive window size and media query states for Vue components. Integrates with most UI frameworks.", "keywords": [ "vuejs", @@ -15,10 +15,12 @@ ], "main": "dist/vue-screen.cjs.js", "module": "dist/vue-screen.esm.js", + "types": "types/index.d.ts", "scripts": { - "test": "npm run lint && npm run test:unit && npm run test:e2e", + "test": "npm run lint && npm run test:unit && npm run test:e2e && npm run test:types", "test:unit": "mocha --require @babel/register --timeout 10000 --exit 'tests/units/*.spec.js'", "test:e2e": "node tests/e2e/runner.js", + "test:types": "tsc -p types/test", "build:browser": "rollup -c rollup.config.browser.js", "build:cjs": "rollup -c rollup.config.cjs.js", "build:esm": "rollup -c rollup.config.esm.js", @@ -30,6 +32,11 @@ "type": "git", "url": "git+https://github.com/matteo-rigon/vue-screen.git" }, + "files": [ + "src", + "dist/*.js", + "types/*.d.ts" + ], "author": "Matteo Rigon", "license": "MIT", "bugs": { @@ -42,6 +49,9 @@ "@babel/polyfill": "^7.4.3", "@babel/preset-env": "^7.4.3", "@babel/register": "^7.4.0", + "@types/babel__core": "^7.1.5", + "@types/babel__template": "^7.0.2", + "@types/terser-webpack-plugin": "^2.2.0", "babel-loader": "^8.0.5", "chai": "^4.2.0", "cross-spawn": "^6.0.5", @@ -60,6 +70,7 @@ "rollup": "^1.11.3", "rollup-plugin-babel": "^4.3.2", "rollup-plugin-uglify": "^6.0.2", + "typescript": "^3.8.2", "vue": "^2.6.10", "webpack": "^4.30.0", "webpack-cli": "^3.3.1", diff --git a/types/index.d.ts b/types/index.d.ts new file mode 100644 index 0000000..62b9847 --- /dev/null +++ b/types/index.d.ts @@ -0,0 +1,8 @@ +import './vue' +import { VueScreen } from './screen' + +export default VueScreen + +export { + VueScreenObject +} from './screen' diff --git a/types/options.d.ts b/types/options.d.ts new file mode 100644 index 0000000..044bf46 --- /dev/null +++ b/types/options.d.ts @@ -0,0 +1,30 @@ +import { VueScreenObject } from './screen' + +export type VueScreenOptionsFrameworkLiteral = + 'tailwind' + | 'bootstrap' + | 'bulma' + | 'foundation' + | 'materialize' + | 'semantic-ui' + +export interface VueScreenOptionsBreakpoints { + [key: string]: number | string; +} + +export interface VueScreenOptionsCallbacks { + [key: string]: (screen: VueScreenObject) => any; +} + +export interface VueScreenOptionsProperties { + extend?: VueScreenOptionsFrameworkLiteral; + breakpointsOrder?: string[]; +} + +export type VueScreenOptions = + VueScreenOptionsFrameworkLiteral + | ( + VueScreenOptionsProperties + & VueScreenOptionsCallbacks + & VueScreenOptionsBreakpoints + ) \ No newline at end of file diff --git a/types/screen.d.ts b/types/screen.d.ts new file mode 100644 index 0000000..9bd2262 --- /dev/null +++ b/types/screen.d.ts @@ -0,0 +1,20 @@ +import { PluginFunction } from 'vue' +import { VueScreenOptions } from './options' + +export declare class VueScreen { + static install: PluginFunction +} + +export interface DefaultProperties { + width: number; + height: number; + landscape: boolean; + portrait: boolean; + touch: boolean; + breakpoint?: string; +} +export interface CustomProperties { + [key: string]: any; +} + +export declare type VueScreenObject = DefaultProperties & CustomProperties; \ No newline at end of file diff --git a/types/test/index.ts b/types/test/index.ts new file mode 100644 index 0000000..9b4e2b0 --- /dev/null +++ b/types/test/index.ts @@ -0,0 +1,28 @@ +import Vue from 'vue' + +import VueScreen from '../index' +import { VueScreenObject } from '../screen' + +Vue.use(VueScreen) +Vue.use(VueScreen, 'tailwind') +Vue.use(VueScreen, { + xs: 0, + sm: 1024, + md: 1200, +}) +Vue.use(VueScreen, { + extend: 'tailwind', + tablet: (screen: VueScreenObject) => screen.md && !screen.ld && screen.touch, +}) + +const vm = new Vue() + +vm.$screen.width +vm.$screen.height +vm.$screen.breakpoint +vm.$screen.breakpointsOrder +vm.$screen.landscape +vm.$screen.portrait +vm.$screen.touch +vm.$screen.xl +vm.$screen.tablet \ No newline at end of file diff --git a/types/test/tsconfig.json b/types/test/tsconfig.json new file mode 100644 index 0000000..8e59825 --- /dev/null +++ b/types/test/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "es2015", + "moduleResolution": "node", + "strict": true, + "noEmit": true, + "lib": ["es5", "dom", "es2015.promise", "es2015.iterable", "es2015.core"] + }, + "include": ["*.ts", "../*.d.ts"] +} \ No newline at end of file diff --git a/types/vue.d.ts b/types/vue.d.ts new file mode 100644 index 0000000..e875daa --- /dev/null +++ b/types/vue.d.ts @@ -0,0 +1,8 @@ +import Vue from 'vue' +import { VueScreenObject } from './index' + +declare module 'vue/types/vue' { + interface Vue { + readonly $screen: VueScreenObject + } +}