├── .all-contributorsrc ├── .eslintignore ├── .eslintrc.js ├── .github ├── FUNDING.yml └── workflows │ └── docs.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── demo ├── App.vue ├── Header.vue └── main.js ├── package-lock.json ├── package.json ├── scripts └── docs.js ├── src ├── index.ts ├── renderer │ ├── directives │ │ ├── vModelComboBox.ts │ │ ├── vModelSlider.ts │ │ ├── vModelSpinBox.ts │ │ ├── vModelText.ts │ │ └── vShow.ts │ ├── index.ts │ ├── nodeOps.ts │ └── patchProp.ts ├── utils │ ├── image.ts │ └── url.ts ├── vueLoader.ts └── widgets │ ├── AbstractButton │ └── VNAbstractButton.ts │ ├── AnimatedImage │ ├── VNAnimatedImage.ts │ └── index.ts │ ├── Button │ ├── VNButton.ts │ └── index.ts │ ├── Checkbox │ ├── VNCheckbox.ts │ └── index.ts │ ├── ComboBox │ ├── VNComboBox.ts │ └── index.ts │ ├── Dial │ ├── VNDial.ts │ └── index.ts │ ├── Image │ ├── VNImage.ts │ └── index.ts │ ├── LineEdit │ ├── VNLineEdit.ts │ └── index.ts │ ├── MetaWidget │ └── VNMetaWidget.ts │ ├── ProgressBar │ ├── VNProgressBar.ts │ └── index.ts │ ├── RadioButton │ ├── VNRadioButton.ts │ └── index.ts │ ├── ScrollArea │ ├── VNScrollArea.ts │ └── index.ts │ ├── Slider │ ├── VNSlider.ts │ └── index.ts │ ├── SpinBox │ ├── VNSpinBox.ts │ └── index.ts │ ├── Text │ ├── VNText.ts │ └── index.ts │ ├── View │ ├── VNView.ts │ └── index.ts │ ├── Window │ └── VNWindow.ts │ ├── config.ts │ ├── nativeWidget.ts │ └── widgetMap.ts ├── tsconfig.json ├── webpack.config.js └── website ├── .gitignore ├── README.md ├── blog └── 2020-05-24-welcome.md ├── docs ├── api │ └── interfaces │ │ ├── animatedimageprops.md │ │ ├── buttonprops.md │ │ ├── checkboxprops.md │ │ ├── comboboxprops.md │ │ ├── dialprops.md │ │ ├── imageprops.md │ │ ├── lineeditprops.md │ │ ├── progressbarprops.md │ │ ├── radiobuttonprops.md │ │ ├── scrollareaprops.md │ │ ├── sliderprops.md │ │ ├── spinboxprops.md │ │ ├── textprops.md │ │ └── viewprops.md └── guides │ ├── 1-getting-started.md │ ├── 2-tutorial.md │ ├── 3-styling.md │ ├── 4-layout.md │ ├── 5-handle-events.md │ ├── 6-images.md │ └── 7-networking.md ├── docusaurus.config.js ├── package.json ├── sidebars.js ├── src ├── css │ └── custom.css └── pages │ ├── index.js │ └── styles.module.css ├── static ├── CNAME └── img │ ├── button-press.gif │ ├── demo-calculator.png │ ├── favicon.ico │ ├── flex-simple.png │ ├── image-simple.png │ ├── logo-circle.png │ ├── logo.png │ ├── logo.svg │ ├── logox200.png │ ├── sample-code.png │ ├── undraw_monitor.png │ ├── undraw_open_source.svg │ ├── undraw_windows.svg │ ├── vn-animated-image.gif │ ├── vn-button.png │ ├── vn-checkbox.png │ ├── vn-combobox.gif │ ├── vn-dial.gif │ ├── vn-image.png │ ├── vn-line-edit.gif │ ├── vn-progress-bar.gif │ ├── vn-radio-button.png │ ├── vn-scroll-area.gif │ ├── vn-slider.gif │ ├── vn-spinbox.gif │ ├── vn-text.png │ ├── vn-view.png │ └── vue.png └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "gregbenner", 10 | "name": "Greg B", 11 | "avatar_url": "https://avatars3.githubusercontent.com/u/1177690?v=4", 12 | "profile": "https://gregbenner.life", 13 | "contributions": [ 14 | "doc" 15 | ] 16 | }, 17 | { 18 | "login": "rohinivsenthil", 19 | "name": "Rohini Senthil", 20 | "avatar_url": "https://avatars1.githubusercontent.com/u/42040329?v=4", 21 | "profile": "https://github.com/rohinivsenthil", 22 | "contributions": [ 23 | "doc", 24 | "code" 25 | ] 26 | }, 27 | { 28 | "login": "michaeltintiuc", 29 | "name": "Michael Tintiuc", 30 | "avatar_url": "https://avatars2.githubusercontent.com/u/1321256?v=4", 31 | "profile": "https://michaeltintiuc.com", 32 | "contributions": [ 33 | "infra" 34 | ] 35 | }, 36 | { 37 | "login": "tusharmoraye", 38 | "name": "Tushar Moraye", 39 | "avatar_url": "https://avatars3.githubusercontent.com/u/25436413?v=4", 40 | "profile": "https://tusharmoraye.github.io/", 41 | "contributions": [ 42 | "infra" 43 | ] 44 | } 45 | ], 46 | "contributorsPerLine": 7, 47 | "projectName": "vue-nodegui", 48 | "projectOwner": "nodegui", 49 | "repoType": "github", 50 | "repoHost": "https://github.com", 51 | "skipCi": true 52 | } 53 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | demo 3 | website 4 | scripts 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "es6": true, 4 | "node": true 5 | }, 6 | "parser": "@typescript-eslint/parser", 7 | "plugins": [ 8 | "@typescript-eslint", 9 | "babel" 10 | ], 11 | "extends": [ 12 | "airbnb-base", 13 | "plugin:import/errors", 14 | "plugin:import/warnings", 15 | "plugin:import/typescript", 16 | ], 17 | "globals": { 18 | "Atomics": "readonly", 19 | "SharedArrayBuffer": "readonly" 20 | }, 21 | "parserOptions": { 22 | "ecmaVersion": 2018, 23 | "sourceType": "module" 24 | }, 25 | "settings": { 26 | "plugins": [ 27 | "import" 28 | ], 29 | "import/resolver": { 30 | typescript: {} 31 | }, 32 | }, 33 | "rules": { 34 | "no-unused-vars": 0, 35 | "import/prefer-default-export": 0, 36 | "@typescript-eslint/no-unused-vars": ["error"], 37 | "@typescript-eslint/type-annotation-spacing": ["error", { 38 | "before": true, 39 | "after": true, 40 | "overrides": { 41 | "colon": { 42 | "before": false 43 | } 44 | } 45 | }], 46 | "no-dupe-class-members": "off", 47 | "import/extensions": [ 48 | "error", 49 | "ignorePackages", 50 | { 51 | "js": "never", 52 | "ts": "never", 53 | } 54 | ], 55 | "class-methods-use-this": 0, 56 | "max-classes-per-file": 0, 57 | 'import/no-cycle': 0, 58 | "no-unused-expressions": 0, 59 | "babel/no-unused-expressions": "error" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: shubhamzanwar 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: shubhamzanwar 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | name: documentation 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | gh-release: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v1 13 | - uses: actions/setup-node@v1 14 | with: 15 | node-version: "14.x" 16 | - name: Add key to allow access to repository 17 | env: 18 | SSH_AUTH_SOCK: /tmp/ssh_agent.sock 19 | run: | 20 | mkdir -p ~/.ssh 21 | ssh-keyscan github.com >> ~/.ssh/known_hosts 22 | echo "${{ secrets.VN_GH_PAGES_DEPLOY }}" > ~/.ssh/id_rsa 23 | chmod 600 ~/.ssh/id_rsa 24 | cat <> ~/.ssh/config 25 | Host github.com 26 | HostName github.com 27 | IdentityFile ~/.ssh/id_rsa 28 | EOT 29 | - name: Release to GitHub Pages 30 | env: 31 | USE_SSH: true 32 | GIT_USER: git 33 | run: | 34 | git config --global user.email "actions@gihub.com" 35 | git config --global user.name "gh-actions" 36 | npm install --ignore-scripts 37 | npm run docs 38 | cd website 39 | if [ -e yarn.lock ]; then 40 | yarn install --frozen-lockfile 41 | elif [ -e package-lock.json ]; then 42 | npm ci 43 | else 44 | npm i 45 | fi 46 | yarn deploy 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/vue 3 | # Edit at https://www.gitignore.io/?templates=vue 4 | 5 | ### Vue ### 6 | .DS_* 7 | *.log 8 | logs 9 | **/*.backup.* 10 | **/*.back.* 11 | 12 | node_modules 13 | bower_components 14 | 15 | *.sublime* 16 | 17 | psd 18 | thumb 19 | sketch 20 | 21 | ## ignore the dist folder 22 | dist 23 | 24 | ## ignore the demo build 25 | demo-dist 26 | 27 | # End of https://www.gitignore.io/api/vue 28 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo 2 | demo-dist 3 | node_modules 4 | website 5 | .github -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Shubham Zanwar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue NodeGui 2 | 3 | [![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-) 4 | 5 | 6 | [![Join the NodeGUI community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/nodegui) 7 | 8 | Build **performant**, **native** and **cross-platform** desktop applications with Vue.🚀 9 | 10 | Vue NodeGUI is powered by **Vue** 🌈 and **Qt5** 💚 which makes it CPU and memory efficient as compared to other chromium based solutions like electron. Vue NodeGUI is essentially a Vue renderer for [NodeGUI](https://github.com/nodegui/nodegui). 11 | 12 | Visit: https://vue.nodegui.org for docs. 13 | 14 | logo 15 | 16 | > This project is in active development. It should be okay for smaller projects but anything complex - electron is the way to go for now. 🚧 17 | 18 | ## Features 19 | 20 | - 🧬 Cross platform. Should work on major Linux flavours, Windows and MacOS 21 | - 📉 Low CPU and memory footprint. Current CPU stays at 0% on idle and memory usage is under 20mb for a hello world program. 22 | - 💅 Styling with CSS (includes actual cascading). Also has full support for Flexbox layout (thanks to Yoga). 23 | - ✅ Complete Nodejs api support (Currently runs on Node v12.x - and is easily upgradable). Hence has access to all nodejs compatible npm modules. 24 | - 🎪 Native widget event listener support. supports all event available from Qt / NodeJs. 25 | - 💸 Can be used for Commercial applications. 26 | - 📚 Good documentation and website. 27 | - 🧙‍♂️ Good documentation for contributors. 28 | - 🦹🏻‍♀️ Good support for dark mode (Thanks to QT). 29 | 30 | ## Getting Started 31 | 32 | - Check out the [vue-nodegui starter repo](https://github.com/nodegui/vue-nodegui-starter) 33 | - Read through the [docs](https://vue.nodegui.org) 34 | 35 | ## Docs for contributing 36 | 37 | Looking to contribute? If you wish to implement a new widget/add more features and need help understanding the codebase. You can start here: 38 | 39 | Contributing developer docs link: 40 | 41 | https://github.com/nodegui/nodegui/tree/master/website/docs/development 42 | 43 | Please read: https://github.com/nodegui/.github/blob/master/CONTRIBUTING.md 44 | 45 | ## Building 46 | 47 | `npm run build` 48 | 49 | ## Using custom Qt 50 | 51 | `QT_INSTALL_DIR=/path/to/qt npm install` 52 | 53 | `npm run build` 54 | 55 | ## Updating docs 56 | 57 | `npm run docs` 58 | 59 | then followed by: 60 | 61 | `cd website && GIT_USER= yarn deploy` 62 | 63 | ## Funding 64 | 65 | Vue NodeGUI is an open source project and requires your support. If you like this project, please consider supporting my work by clicking on the sponsor button on this Github repo or via Ko-Fi / Patreon. We will soon launch issuehunt. 66 | 67 |

68 | Buy Me a Coffee at ko-fi.com     69 | patreon 70 |

71 | 72 | ## Special Thanks 73 | 74 | - [Logo: Thanks to Vishwas Shetty from the Noun Project.](https://github.com/nodegui/nodegui/blob/master/extras/legal/logo/thanks.md) 75 | 76 | ## Code of Conduct 77 | 78 | https://github.com/nodegui/.github/blob/master/CODE_OF_CONDUCT.md 79 | 80 | ## License 81 | 82 | MIT 83 | 84 | ## Maintainers ✨ 85 | 86 | People maintaining this project. 87 | 88 | 89 | 90 | 91 | 92 | 93 |
Shubham Zanwar
Shubham Zanwar
94 | 95 | ## Contributors ✨ 96 | 97 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 |

Greg B
📖
Rohini Senthil
📖 💻
Michael Tintiuc
🚇
Tushar Moraye
🚇
110 | 111 | 112 | 113 | 114 | 115 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! -------------------------------------------------------------------------------- /demo/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 31 | -------------------------------------------------------------------------------- /demo/Header.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | -------------------------------------------------------------------------------- /demo/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from '../dist'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount(); 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nodegui/vue-nodegui", 3 | "version": "0.0.5", 4 | "description": "library to render native desktop applications using vue js", 5 | "main": "dist/index.js", 6 | "typings": "dist/index.d.ts", 7 | "private": false, 8 | "scripts": { 9 | "test": "echo \"Error: no test specified\" && exit 1", 10 | "lint": "eslint --ext ts .", 11 | "build": "tsc", 12 | "dev": "npm run build && webpack -p && qode --inspect ./demo-dist/main.js", 13 | "docs": "npx run-func ./scripts/docs.js cleanApiDocs && typedoc && node ./scripts/docs.js" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/nodegui/vue-nodegui.git" 18 | }, 19 | "keywords": [ 20 | "vue", 21 | "nodegui", 22 | "desktop", 23 | "applications" 24 | ], 25 | "author": "Shubham Zanwar ", 26 | "license": "ISC", 27 | "bugs": { 28 | "url": "https://github.com/nodegui/vue-nodegui/issues" 29 | }, 30 | "homepage": "https://github.com/nodegui/vue-nodegui#readme", 31 | "dependencies": { 32 | "@nodegui/nodegui": "^0.25.0", 33 | "@vue/compiler-core": "^3.0.1", 34 | "@vue/runtime-core": "^3.0.1", 35 | "phin": "^3.5.0" 36 | }, 37 | "devDependencies": { 38 | "@types/node": "^13.13.17", 39 | "@typescript-eslint/eslint-plugin": "^2.34.0", 40 | "@typescript-eslint/parser": "^2.34.0", 41 | "@vue/compiler-sfc": "^3.0.1", 42 | "css-loader": "^3.6.0", 43 | "eslint": "^6.8.0", 44 | "eslint-config-airbnb": "^18.2.0", 45 | "eslint-config-airbnb-base": "^14.2.0", 46 | "eslint-config-prettier": "^6.11.0", 47 | "eslint-import-resolver-typescript": "^2.3.0", 48 | "eslint-plugin-babel": "^5.3.1", 49 | "eslint-plugin-import": "^2.21.2", 50 | "file-loader": "^5.0.2", 51 | "husky": "^4.3.0", 52 | "mini-css-extract-plugin": "^0.9.0", 53 | "node-loader": "^0.6.0", 54 | "ts-transformer-imports": "^0.4.3", 55 | "typedoc": "^0.17.8", 56 | "typedoc-plugin-markdown": "^2.4.2", 57 | "typescript": "^3.9.7", 58 | "url-loader": "^3.0.0", 59 | "vue-loader": "16.0.0-beta.7", 60 | "webpack": "^4.44.1", 61 | "webpack-cli": "^3.3.12" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /scripts/docs.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const API_PATH = path.resolve(__dirname, '../website/docs/api'); 5 | const SIDEBARS_FILE = path.resolve(__dirname, '../website/sidebars.js'); 6 | const sidebarsData = require('../website/sidebars'); 7 | 8 | ['index.md', 'globals.md'].forEach((fileName) => { 9 | if (fs.existsSync(`${API_PATH}/${fileName}`)) { 10 | fs.unlinkSync(`${API_PATH}/${fileName}`); 11 | } 12 | }); 13 | 14 | if (sidebarsData.guides && sidebarsData.guides.Interfaces) { 15 | const interfaces = sidebarsData.guides.Interfaces; 16 | delete sidebarsData.guides.Interfaces; 17 | 18 | if (sidebarsData.api) { 19 | sidebarsData.api.Widgets = interfaces; 20 | } 21 | 22 | if (fs.existsSync(SIDEBARS_FILE)) { 23 | const data = `module.exports = ${JSON.stringify(sidebarsData, null, 2)};\n`; 24 | fs.writeFileSync(SIDEBARS_FILE, data); 25 | } 26 | } 27 | 28 | function cleanApiDocs() { 29 | if (fs.existsSync(API_PATH)) { 30 | fs.rmdirSync(API_PATH, { recursive: true }); 31 | } 32 | } 33 | 34 | module.exports = { cleanApiDocs }; 35 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { createApp } from './renderer'; 2 | export { vModelText } from './renderer/directives/vModelText'; 3 | export { vModelSlider } from './renderer/directives/vModelSlider'; 4 | export { vModelSpinBox } from './renderer/directives/vModelSpinBox'; 5 | export { vModelComboBox } from './renderer/directives/vModelComboBox'; 6 | export { vShow } from './renderer/directives/vShow'; 7 | 8 | export * from '@vue/runtime-core'; 9 | -------------------------------------------------------------------------------- /src/renderer/directives/vModelComboBox.ts: -------------------------------------------------------------------------------- 1 | import { ObjectDirective } from '@vue/runtime-core'; 2 | import { VNComboBox } from '../../widgets/ComboBox/VNComboBox'; 3 | 4 | type ModelDirective = ObjectDirective 5 | 6 | export const vModelComboBox: ModelDirective = { 7 | beforeMount: (el, { value }, vnode) => { 8 | el.setCurrentIndex(value); 9 | // eslint-disable-next-line no-param-reassign, no-underscore-dangle 10 | el._assign = vnode.props!['onUpdate:modelValue'] as Function; 11 | el.addEventListener('currentIndexChanged', (indexValue) => { 12 | // eslint-disable-next-line no-underscore-dangle 13 | el._assign(indexValue); 14 | }); 15 | }, 16 | beforeUpdate: (el, { value, oldValue }) => { 17 | if (value === oldValue) { 18 | return; 19 | } 20 | el.setCurrentIndex(value); 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/renderer/directives/vModelSlider.ts: -------------------------------------------------------------------------------- 1 | import { ObjectDirective } from '@vue/runtime-core'; 2 | import { VNDial } from 'widgets/Dial/VNDial'; 3 | import { VNSlider } from 'widgets/Slider/VNSlider'; 4 | 5 | type ModelDirective = ObjectDirective 6 | 7 | export const vModelSlider: ModelDirective = { 8 | beforeMount: (el, { value }, vnode) => { 9 | el.setValue(value); 10 | // eslint-disable-next-line no-param-reassign, no-underscore-dangle 11 | el._assign = vnode.props!['onUpdate:modelValue'] as Function; 12 | el.addEventListener('valueChanged', (sliderValue) => { 13 | // eslint-disable-next-line no-underscore-dangle 14 | el._assign(sliderValue); 15 | }); 16 | }, 17 | beforeUpdate: (el, { value, oldValue }) => { 18 | if (value === oldValue) { 19 | return; 20 | } 21 | el.setValue(value); 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/renderer/directives/vModelSpinBox.ts: -------------------------------------------------------------------------------- 1 | import { ObjectDirective } from '@vue/runtime-core'; 2 | import { VNSpinBox } from 'widgets/SpinBox/VNSpinBox'; 3 | 4 | type ModelDirective = ObjectDirective 5 | 6 | export const vModelSpinBox: ModelDirective = { 7 | beforeMount: (el, { value }, vnode) => { 8 | el.setValue(value); 9 | // eslint-disable-next-line no-param-reassign, no-underscore-dangle 10 | el._assign = vnode.props!['onUpdate:modelValue'] as Function; 11 | el.addEventListener('valueChanged', (spinBoxValue) => { 12 | // eslint-disable-next-line no-underscore-dangle 13 | el._assign(spinBoxValue); 14 | }); 15 | }, 16 | beforeUpdate: (el, { value, oldValue }) => { 17 | if (value === oldValue) { 18 | return; 19 | } 20 | el.setValue(value); 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/renderer/directives/vModelText.ts: -------------------------------------------------------------------------------- 1 | import { ObjectDirective } from '@vue/runtime-core'; 2 | import { VNLineEdit } from 'widgets/LineEdit/VNLineEdit'; 3 | 4 | type ModelDirective = ObjectDirective 5 | 6 | // TODO: implement for other inputs as they are added 7 | // Currently only implemented for text input 8 | export const vModelText: ModelDirective = { 9 | beforeMount: (el, { value }, vnode) => { 10 | el.setText(value); 11 | // eslint-disable-next-line no-param-reassign, no-underscore-dangle 12 | el._assign = vnode.props!['onUpdate:modelValue'] as Function; 13 | el.addEventListener('textChanged', (text) => { 14 | // eslint-disable-next-line no-underscore-dangle 15 | el._assign(text); 16 | }); 17 | }, 18 | beforeUpdate: (el, { value, oldValue }) => { 19 | if (value === oldValue) { 20 | return; 21 | } 22 | el.setText(value); 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /src/renderer/directives/vShow.ts: -------------------------------------------------------------------------------- 1 | import { ObjectDirective } from '@vue/runtime-core'; 2 | import { NodeWidget } from '@nodegui/nodegui'; 3 | 4 | const setDisplay = (el: NodeWidget, value: boolean) => { 5 | if (value) return el.show(); 6 | return el.hide(); 7 | }; 8 | 9 | export const vShow: ObjectDirective> = { 10 | beforeMount(el, { value }) { 11 | setDisplay(el, value); 12 | }, 13 | updated(el, { value, oldValue }) { 14 | if (value === oldValue) return; 15 | setDisplay(el, value); 16 | }, 17 | beforeUnmount(el) { 18 | setDisplay(el, true); 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/renderer/index.ts: -------------------------------------------------------------------------------- 1 | import { createRenderer, CreateAppFunction, App } from '@vue/runtime-core'; 2 | import { isNativeWidget } from '../widgets/nativeWidget'; 3 | import { VNWindow } from '../widgets/Window/VNWindow'; 4 | import rendererOptions from './nodeOps'; 5 | 6 | const renderer = createRenderer(rendererOptions); 7 | 8 | function injectNativeTagCheck(app: App) { 9 | // Inject `isNativeTag` 10 | // this is used for component name validation (dev only) 11 | Object.defineProperty(app.config, 'isNativeTag', { 12 | value: isNativeWidget, 13 | writable: false, 14 | }); 15 | } 16 | 17 | export const createApp: CreateAppFunction = (...args) => { 18 | const app = renderer.createApp(...args); 19 | 20 | injectNativeTagCheck(app); 21 | 22 | const { mount } = app; 23 | app.mount = () => { 24 | const container = new VNWindow(); 25 | container.show(); 26 | // Need the next line 27 | // to prevent the window 28 | // object from being GC'ed 29 | // @ts-ignore 30 | global.win = container; 31 | return mount(container); 32 | }; 33 | 34 | return app; 35 | }; 36 | -------------------------------------------------------------------------------- /src/renderer/nodeOps.ts: -------------------------------------------------------------------------------- 1 | import { RendererOptions } from '@vue/runtime-core'; 2 | import { VNNode, VNWidget } from 'widgets/config'; 3 | import { VNText } from 'widgets/Text/VNText'; 4 | import { VNButton } from 'widgets/Button/VNButton'; 5 | import { VNMetaWidget } from '../widgets/MetaWidget/VNMetaWidget'; 6 | import { ValidNativeWidgets } from '../widgets/nativeWidget'; 7 | import getConfigByType from '../widgets/widgetMap'; 8 | import patchProp from './patchProp'; 9 | 10 | const nodeOps: RendererOptions, VNNode> = { 11 | insert: (child: VNWidget, parent: VNNode, anchor) => { 12 | // TODO: implement insertBefore in widgets 13 | if (anchor) { 14 | parent.insertBefore(child, anchor); 15 | } else { 16 | parent.insertChild(child as VNWidget); 17 | } 18 | (child as VNWidget).setNodeParent(parent); 19 | }, 20 | remove: (child: VNWidget) => { 21 | const { nodeParent } = child; 22 | if (nodeParent) { 23 | (nodeParent as VNNode).removeChild(child); 24 | } 25 | }, 26 | createElement: (type: ValidNativeWidgets) => { 27 | const config = getConfigByType(type); 28 | return config.createElement(); 29 | }, 30 | createText: () => new VNMetaWidget(), 31 | createComment: () => new VNMetaWidget(), 32 | setText: (node: VNText | VNButton, text: string) => { 33 | node.setText(text); 34 | }, 35 | setElementText: (node: VNText | VNButton, text: string) => { 36 | node.setText(text); 37 | }, 38 | parentNode: (node: VNWidget) => { 39 | if (node) { 40 | return node.nodeParent as VNNode; 41 | } 42 | return null; 43 | }, 44 | nextSibling: (node) => { 45 | const nodeParent = node.nodeParent as VNNode; 46 | return nodeParent.getNextSibling(node) as VNWidget; 47 | }, 48 | patchProp, 49 | }; 50 | 51 | export default nodeOps; 52 | -------------------------------------------------------------------------------- /src/renderer/patchProp.ts: -------------------------------------------------------------------------------- 1 | import { RendererOptions } from '@vue/runtime-core'; 2 | import { NodeWidget, NativeElement } from '@nodegui/nodegui'; 3 | import { VNWidget, VNNode } from 'widgets/config'; 4 | 5 | export type Prop = Required[key]; 6 | 7 | export type PropSetters, T extends {}> = { 8 | [key in keyof Required]: ( 9 | widget: W, 10 | prevValue: Prop, 11 | nextValue: Prop 12 | ) => void 13 | } 14 | 15 | export type EventHandler = (native?: NativeElement) => void; 16 | 17 | export const patchEvent = ( 18 | eventType: string, 19 | widget: NodeWidget, 20 | prevValue: EventHandler, 21 | nextValue: EventHandler, 22 | ) => { 23 | const camelCaseEvent = eventType[0].toLowerCase() + eventType.slice(1); 24 | if (prevValue !== nextValue) { 25 | widget.removeEventListener(camelCaseEvent, prevValue); 26 | widget.addEventListener(camelCaseEvent, nextValue); 27 | } 28 | }; 29 | 30 | const patchProp: RendererOptions | void, VNNode>['patchProp'] = ( 31 | el: VNWidget, 32 | key, 33 | prevValue, 34 | nextValue, 35 | // isSVG = false, 36 | // prevChildren, 37 | // parentComponent, 38 | // parentSuspense, 39 | // unmountChildren, 40 | ) => { 41 | const isEvent = key.startsWith('on'); 42 | const isModelKey = key.startsWith('onUpdate:'); 43 | // ignore model keys because they'll 44 | // be handled by vModel directive 45 | if (isEvent && !isModelKey) { 46 | patchEvent(key.slice(2), el, prevValue, nextValue); 47 | return; 48 | } 49 | el.patchProp(key, prevValue, nextValue); 50 | }; 51 | 52 | export default patchProp; 53 | -------------------------------------------------------------------------------- /src/utils/image.ts: -------------------------------------------------------------------------------- 1 | import { QMovie, QPixmap } from '@nodegui/nodegui'; 2 | import phin from 'phin'; 3 | import { isValidUrl } from './url'; 4 | 5 | export async function getLoadedPixmap(imageUrlOrPath: string): Promise { 6 | const pixMap = new QPixmap(); 7 | if (isValidUrl(imageUrlOrPath)) { 8 | const res = await phin(imageUrlOrPath); 9 | const imageBuffer = Buffer.from(res.body); 10 | pixMap.loadFromData(imageBuffer); 11 | } else { 12 | pixMap.load(imageUrlOrPath); 13 | } 14 | return pixMap; 15 | } 16 | 17 | export async function getLoadedQMovie(imageUrlOrPath: string): Promise { 18 | const movie = new QMovie(); 19 | if (isValidUrl(imageUrlOrPath)) { 20 | const res = await phin(imageUrlOrPath); 21 | const imageBuffer = Buffer.from(res.body); 22 | movie.loadFromData(imageBuffer); 23 | } else { 24 | movie.setFileName(imageUrlOrPath); 25 | } 26 | return movie; 27 | } 28 | -------------------------------------------------------------------------------- /src/utils/url.ts: -------------------------------------------------------------------------------- 1 | export function isValidUrl(str: string) { 2 | try { 3 | // eslint-disable-next-line no-new 4 | new URL(str); 5 | return true; 6 | } catch (_) { 7 | return false; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/vueLoader.ts: -------------------------------------------------------------------------------- 1 | import { transformModel as baseTransform, registerRuntimeHelpers, DirectiveTransform } from '@vue/compiler-core'; 2 | import { isNativeWidget } from './widgets/nativeWidget'; 3 | 4 | const V_MODEL_TEXT = Symbol('vModelText'); 5 | const V_MODEL_SLIDER = Symbol('vModelSlider'); 6 | const V_MODEL_SPINBOX = Symbol('vModelSpinBox'); 7 | const V_MODEL_COMBOBOX = Symbol('vModelComboBox'); 8 | 9 | registerRuntimeHelpers({ 10 | [V_MODEL_TEXT]: 'vModelText', 11 | [V_MODEL_SLIDER]: 'vModelSlider', 12 | [V_MODEL_SPINBOX]: 'vModelSpinBox', 13 | [V_MODEL_COMBOBOX]: 'vModelComboBox', 14 | }); 15 | 16 | type CompilerOptions = { 17 | isNativeTag: Function, 18 | directiveTransforms: { 19 | [key in string]: DirectiveTransform 20 | } 21 | } 22 | 23 | export const compilerOptions: CompilerOptions = { 24 | isNativeTag: isNativeWidget, 25 | directiveTransforms: { 26 | model: (dir, node, context) => { 27 | const baseResult = baseTransform(dir, node, context); 28 | const { tag } = node; 29 | let directiveToUse; 30 | switch (tag) { 31 | case 'vn-line-edit': 32 | directiveToUse = V_MODEL_TEXT; 33 | break; 34 | case 'vn-slider': 35 | case 'vn-dial': 36 | directiveToUse = V_MODEL_SLIDER; 37 | break; 38 | case 'vn-spinbox': 39 | directiveToUse = V_MODEL_SPINBOX; 40 | break; 41 | case 'vn-combobox': 42 | directiveToUse = V_MODEL_COMBOBOX; 43 | break; 44 | default: 45 | throw new Error(`cannot use v-model on tag: ${tag}`); 46 | } 47 | baseResult.needRuntime = context.helper(directiveToUse as symbol); 48 | // console.log('dir', dir); 49 | // console.log('node', node); 50 | // console.log('context', context); 51 | return baseResult; 52 | }, 53 | }, 54 | }; 55 | -------------------------------------------------------------------------------- /src/widgets/AbstractButton/VNAbstractButton.ts: -------------------------------------------------------------------------------- 1 | import { 2 | QIcon, QSize, QAbstractButtonSignals, QAbstractButton, 3 | } from '@nodegui/nodegui'; 4 | import { PropSetters } from 'renderer/patchProp'; 5 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 6 | 7 | /** @internal */ 8 | export interface AbstractButtonProps extends ViewProps { 9 | /** 10 | * Sets the given text to the button (Used as an alternative to children). [QPushButton: setText](https://docs.nodegui.org/docs/api/QPushButton#buttonsettexttext) 11 | */ 12 | text?: string; 13 | /** 14 | * Sets an icon in the button. [QPushButton: setIcon](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonicon) 15 | */ 16 | icon?: QIcon; 17 | /** 18 | * Sets an icon size in the button. [QPushButton: setIconSize](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonsize) 19 | */ 20 | iconSize?: QSize; 21 | } 22 | 23 | export const abstractButtonPropSetters: PropSetters< 24 | QAbstractButton, 25 | AbstractButtonProps> = { 26 | ...viewPropsSetters, 27 | text: (widget: QAbstractButton, _, nextValue: string) => { 28 | widget.setText(nextValue); 29 | }, 30 | icon: (widget: QAbstractButton, _, nextValue: QIcon) => { 31 | widget.setIcon(nextValue); 32 | }, 33 | iconSize: (widget: QAbstractButton, _, nextValue: QSize) => { 34 | widget.setIconSize(nextValue); 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/widgets/AnimatedImage/VNAnimatedImage.ts: -------------------------------------------------------------------------------- 1 | import { QLabel, NodeWidget, QMovie } from '@nodegui/nodegui'; 2 | import { getLoadedQMovie } from '../../utils/image'; 3 | import { Prop, PropSetters } from '../../renderer/patchProp'; 4 | import { TextProps, textPropsSetters } from '../Text/VNText'; 5 | import { VNWidget } from '../config'; 6 | 7 | /** 8 | * The animated image widget allows users to create and render native GIFs, video (without controls) 9 | * elements in the app. 10 | * It is based on [NodeGui's QLabel](https://docs.nodegui.org/docs/api/generated/classes/qlabel) along with [NodeGui's QMovie](https://docs.nodegui.org/docs/api/generated/classes/qmovie) 11 | * 12 | * ## Usage 13 | * 14 | * ```html 15 | * 20 | * 21 | * 24 | * ``` 25 | * 26 | * ## What it looks like? 27 | * 28 | * ![animated-image-demo](/img/vn-animated-image.gif) 29 | * 30 | * ## Props and styling 31 | * 32 | * You can find all the props `vn-animated-image` accepts listed below. 33 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 34 | * and [event handling](/docs/guides/5-handle-events) docs 35 | */ 36 | export interface AnimatedImageProps extends TextProps { 37 | src?: string; 38 | buffer?: Buffer; 39 | } 40 | 41 | export const animatedImagePropsSetters: PropSetters = { 42 | ...textPropsSetters, 43 | src: (widget: VNAnimatedImage, _, nextValue: string) => { 44 | if (!nextValue) { 45 | return; 46 | } 47 | getLoadedQMovie(nextValue) 48 | .then((movie) => { 49 | widget.setMovie(movie); 50 | widget.movie()?.start(); 51 | }) 52 | .catch(console.warn); 53 | }, 54 | buffer: (widget: VNAnimatedImage, _, nextValue: Buffer) => { 55 | const movie = new QMovie(); 56 | movie.loadFromData(nextValue); 57 | widget.setMovie(movie); 58 | widget.movie()?.start(); 59 | }, 60 | }; 61 | 62 | /** @internal */ 63 | export class VNAnimatedImage extends QLabel implements VNWidget { 64 | insertChild() { 65 | throw new Error('Cannot add child to animated image elements'); 66 | } 67 | 68 | patchProp( 69 | key: keyof AnimatedImageProps, 70 | prevValue: Prop, 71 | nextValue: Prop, 72 | ) { 73 | const propSetter = animatedImagePropsSetters[key]; 74 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 75 | } 76 | 77 | removeChild() { 78 | throw new Error('Cannot remove/add child to animated image elements'); 79 | } 80 | 81 | insertBefore() { 82 | throw new Error('Cannot add child to animated image elements'); 83 | } 84 | 85 | getNextSibling(): NodeWidget | null { 86 | throw new Error('animated image cannot have children'); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/widgets/AnimatedImage/index.ts: -------------------------------------------------------------------------------- 1 | import { VNAnimatedImage, AnimatedImageProps } from './VNAnimatedImage'; 2 | import { WidgetConfig } from '../config'; 3 | 4 | class AnimatedImageConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNAnimatedImage(); 9 | } 10 | } 11 | 12 | export default AnimatedImageConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/Button/VNButton.ts: -------------------------------------------------------------------------------- 1 | import { QPushButton, NodeWidget } from '@nodegui/nodegui'; 2 | import { AbstractButtonProps, abstractButtonPropSetters } from '../AbstractButton/VNAbstractButton'; 3 | import { VNWidget } from '../config'; 4 | import { PropSetters, Prop } from '../../renderer/patchProp'; 5 | 6 | /** 7 | * The button widget allows users to create and render native buttons in the app. 8 | * This widget is based on [NodeGui's QPushButton](https://docs.nodegui.org/docs/api/QPushButton) 9 | * 10 | * ## Usage 11 | * 12 | * ```html 13 | * 18 | * 19 | * 28 | * ``` 29 | * 30 | * ## What does it look like? 31 | * 32 | * ![test](/img/vn-button.png) 33 | * 34 | * ## Props and styling 35 | * 36 | * You can find all the props `vn-button` accepts listed below. 37 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 38 | * and [event handling](/docs/guides/5-handle-events) docs 39 | */ 40 | export interface ButtonProps extends AbstractButtonProps { 41 | /** 42 | * Sets whether the button border is raised. [QPushButton: setFlat](https://docs.nodegui.org/docs/api/QPushButton#buttonsetflatisflat) 43 | */ 44 | flat?: boolean; 45 | } 46 | 47 | export const buttonPropsSetters: PropSetters = { 48 | ...abstractButtonPropSetters, 49 | flat: (widget: VNButton, _, nextValue: boolean) => { 50 | widget.setFlat(nextValue); 51 | }, 52 | }; 53 | 54 | /** @internal */ 55 | export class VNButton extends QPushButton implements VNWidget { 56 | insertChild() { 57 | throw new Error('Cannot add child to buttons'); 58 | } 59 | 60 | patchProp( 61 | key: keyof ButtonProps, 62 | prevValue: Prop, 63 | nextValue: Prop, 64 | ) { 65 | const propSetter = buttonPropsSetters[key]; 66 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 67 | } 68 | 69 | removeChild() { 70 | throw new Error('Cannot remove/add child to buttons'); 71 | } 72 | 73 | insertBefore() { 74 | throw new Error('Cannot add child to buttons'); 75 | } 76 | 77 | getNextSibling(): NodeWidget | null { 78 | throw new Error('buttons cannot have children'); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/widgets/Button/index.ts: -------------------------------------------------------------------------------- 1 | import { VNButton, ButtonProps } from './VNButton'; 2 | import { WidgetConfig } from '../config'; 3 | 4 | class ButtonConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNButton(); 9 | } 10 | } 11 | 12 | export default ButtonConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/Checkbox/VNCheckbox.ts: -------------------------------------------------------------------------------- 1 | import { QCheckBox, NodeWidget } from '@nodegui/nodegui'; 2 | import { AbstractButtonProps, abstractButtonPropSetters } from '../AbstractButton/VNAbstractButton'; 3 | import { VNWidget } from '../config'; 4 | import { PropSetters, Prop } from '../../renderer/patchProp'; 5 | 6 | /** 7 | * The checkbox widget allows users to create and render native checkboxes in the app. 8 | * This widget is based on [NodeGui's QCheckBox](https://docs.nodegui.org/docs/api/generated/classes/qcheckbox) 9 | * 10 | * ## Usage 11 | * 12 | * ```html 13 | * 16 | * 17 | * 28 | * ``` 29 | * 30 | * ## What it looks like? 31 | * 32 | * ![checkbox-demo](/img/vn-checkbox.png) 33 | * 34 | * ## Props and styling 35 | * 36 | * You can find all the props `vn-checkbox` accepts listed below. 37 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 38 | * and [event handling](/docs/guides/5-handle-events) docs 39 | */ 40 | export interface CheckboxProps extends AbstractButtonProps { 41 | /** 42 | * Sets whether the Checkbox border is raised. [QPushCheckbox: setFlat](https://docs.nodegui.org/docs/api/QPushCheckbox#Checkboxsetflatisflat) 43 | */ 44 | checked?: boolean; 45 | } 46 | 47 | export const CheckboxPropsSetters: PropSetters = { 48 | ...abstractButtonPropSetters, 49 | checked: (widget: VNCheckbox, _, nextValue: boolean) => { 50 | widget.setChecked(nextValue); 51 | }, 52 | }; 53 | 54 | /** @internal */ 55 | export class VNCheckbox extends QCheckBox implements VNWidget { 56 | insertChild() { 57 | throw new Error('Cannot add child to checkboxes'); 58 | } 59 | 60 | patchProp( 61 | key: keyof CheckboxProps, 62 | prevValue: Prop, 63 | nextValue: Prop, 64 | ) { 65 | const propSetter = CheckboxPropsSetters[key]; 66 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 67 | } 68 | 69 | removeChild() { 70 | throw new Error('Cannot remove/add child to checkboxes'); 71 | } 72 | 73 | insertBefore() { 74 | throw new Error('Cannot add child to checkboxes'); 75 | } 76 | 77 | getNextSibling(): NodeWidget | null { 78 | throw new Error('checkboxes cannot have children'); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/widgets/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import { VNCheckbox, CheckboxProps } from './VNCheckbox'; 2 | import { WidgetConfig } from '../config'; 3 | 4 | class CheckboxConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNCheckbox(); 9 | } 10 | } 11 | 12 | export default CheckboxConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/ComboBox/VNComboBox.ts: -------------------------------------------------------------------------------- 1 | import { 2 | QComboBox, NodeWidget, QSize, QVariant, SizeAdjustPolicy, InsertPolicy, QIcon, 3 | } from '@nodegui/nodegui'; 4 | import { VNWidget } from 'widgets/config'; 5 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 6 | import { PropSetters, Prop } from '../../renderer/patchProp'; 7 | 8 | /** 9 | * The ComboBox component provides the ability to add and manipulate native combobox widgets. 10 | * It is based on [NodeGui's QComboBox](https://docs.nodegui.org/docs/api/generated/classes/qcombobox/). 11 | * 12 | * ## Usage 13 | * 14 | * ```html 15 | * 22 | * 23 | * 43 | * 44 | * ``` 45 | * 46 | * ## What it looks like? 47 | * 48 | * ![combobox-demo](/img/vn-combobox.gif) 49 | * 50 | * ## Props and styling 51 | * 52 | * You can find all the props `vn-combobox` accepts listed below. 53 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 54 | * and [event handling](/docs/guides/5-handle-events) docs 55 | */ 56 | 57 | export interface ComboBoxProps extends ViewProps { 58 | items?: ComboBoxItem[]; 59 | count?: number; 60 | iconSize?: QSize; 61 | frame?: boolean; 62 | currentIndex?: number; 63 | currentData?: QVariant; 64 | currentText?: string; 65 | duplicatesEnabled?: boolean; 66 | editable?: boolean; 67 | insertPolicy?: InsertPolicy; 68 | maxCount?: number; 69 | maxVisibleItems?: number; 70 | minimumContentsLength?: number; 71 | modelColumn?: number; 72 | sizeAdjustPolicy?: SizeAdjustPolicy; 73 | } 74 | 75 | type ComboBoxItem = { 76 | text: string; 77 | icon?: QIcon; 78 | userData?: QVariant; 79 | }; 80 | 81 | const comboBoxPropsSetters: PropSetters = { 82 | ...viewPropsSetters, 83 | items(widget: VNComboBox, _, items: ComboBoxItem[]) { 84 | widget.clear(); 85 | items.forEach((item) => { 86 | widget.addItem(item.icon, item.text, item.userData); 87 | }); 88 | }, 89 | count(widget: VNComboBox, _, count: number) { 90 | widget.setProperty('count', count); 91 | }, 92 | iconSize(widget: VNComboBox, _, iconSize: QSize) { 93 | widget.setProperty('iconSize', iconSize.native); 94 | }, 95 | frame(widget: VNComboBox, _, frame: boolean) { 96 | widget.setProperty('frame', frame); 97 | }, 98 | currentIndex(widget: VNComboBox, _, currentIndex: number) { 99 | widget.setCurrentIndex(currentIndex); 100 | }, 101 | currentData(widget: VNComboBox, _, currentData: QVariant) { 102 | widget.setProperty('currentData', currentData.native); 103 | }, 104 | currentText(widget: VNComboBox, _, currentText: string) { 105 | widget.setCurrentText(currentText); 106 | }, 107 | editable(widget: VNComboBox, _, editable: boolean) { 108 | widget.setEditable(editable); 109 | }, 110 | duplicatesEnabled(widget: VNComboBox, _, duplicatesEnabled: boolean) { 111 | widget.setProperty('duplicatesEnabled', duplicatesEnabled); 112 | }, 113 | insertPolicy(widget: VNComboBox, _, insertPolicy: InsertPolicy) { 114 | widget.setProperty('insertPolicy', insertPolicy); 115 | }, 116 | maxCount(widget: VNComboBox, _, maxCount: number) { 117 | widget.setProperty('maxCount', maxCount); 118 | }, 119 | maxVisibleItems(widget: VNComboBox, _, maxVisibleItems: number) { 120 | widget.setMaxVisibleItems(maxVisibleItems); 121 | }, 122 | minimumContentsLength(widget: VNComboBox, _, minimumContentsLength: number) { 123 | widget.setProperty('minimumContentsLength', minimumContentsLength); 124 | }, 125 | modelColumn(widget: VNComboBox, _, modelColumn: number) { 126 | widget.setProperty('modelColumn', modelColumn); 127 | }, 128 | sizeAdjustPolicy(widget: VNComboBox, _, sizeAdjustPolicy: SizeAdjustPolicy) { 129 | widget.setSizeAdjustPolicy(sizeAdjustPolicy); 130 | }, 131 | }; 132 | 133 | /** @internal */ 134 | export class VNComboBox extends QComboBox implements VNWidget { 135 | patchProp( 136 | key: keyof ComboBoxProps, 137 | prevValue: Prop, 138 | nextValue: Prop, 139 | ) { 140 | const propSetter = comboBoxPropsSetters[key]; 141 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 142 | } 143 | 144 | insertChild() { 145 | throw new Error('Cannot add child to ComboBox elements'); 146 | } 147 | 148 | getNextSibling(): NodeWidget | null { 149 | throw new Error('ComboBox elements cannot have children'); 150 | } 151 | 152 | insertBefore() { 153 | throw new Error('Cannot add child to ComboBox elements'); 154 | } 155 | 156 | removeChild() { 157 | throw new Error('Cannot remove/add child to ComboBox elements'); 158 | } 159 | } 160 | -------------------------------------------------------------------------------- /src/widgets/ComboBox/index.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from '../config'; 2 | import { VNComboBox, ComboBoxProps } from './VNComboBox'; 3 | 4 | class ComboBoxConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNComboBox(); 9 | } 10 | } 11 | 12 | export default ComboBoxConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/Dial/VNDial.ts: -------------------------------------------------------------------------------- 1 | import { NodeWidget, QDial } from '@nodegui/nodegui'; 2 | import { Prop, PropSetters } from 'renderer/patchProp'; 3 | import { VNWidget } from 'widgets/config'; 4 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 5 | 6 | /** 7 | * The Dial provides ability to add and manipulate native dial slider widgets. It is based on 8 | * [NodeGui's QDial](https://docs.nodegui.org/docs/api/generated/classes/qdial/). 9 | * 10 | * ## Usage 11 | * 12 | * ```html 13 | * 19 | * 20 | * 32 | * ``` 33 | * 34 | * ## What it looks like? 35 | * 36 | * ![dial-demo](/img/vn-dial.gif) 37 | * 38 | * ## Props and styling 39 | * 40 | * You can find all the props `vn-dial` accepts listed below. 41 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 42 | * and [event handling](/docs/guides/5-handle-events) docs 43 | */ 44 | export interface DialProps extends ViewProps { 45 | notchesVisible?: boolean; 46 | wrapping?: boolean; 47 | notchTarget?: number; 48 | } 49 | 50 | const dialPropsSetters: PropSetters = { 51 | ...viewPropsSetters, 52 | notchesVisible: (widget: VNDial, _, nextValue: boolean) => { 53 | widget.setNotchesVisible(nextValue); 54 | }, 55 | wrapping: (widget: VNDial, _, nextValue: boolean) => { 56 | widget.setWrapping(nextValue); 57 | }, 58 | notchTarget: (widget: VNDial, _, nextValue: number) => { 59 | widget.setNotchTarget(nextValue); 60 | }, 61 | }; 62 | 63 | /** @internal */ 64 | export class VNDial extends QDial implements VNWidget { 65 | patchProp( 66 | key: keyof DialProps, 67 | prevValue: Prop, 68 | nextValue: Prop, 69 | ) { 70 | const propSetter = dialPropsSetters[key]; 71 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 72 | } 73 | 74 | insertChild() { 75 | throw new Error('Cannot add child to Dial elements'); 76 | } 77 | 78 | getNextSibling(): NodeWidget | null { 79 | throw new Error('Dial elements cannot have children'); 80 | } 81 | 82 | insertBefore() { 83 | throw new Error('Cannot add child to Dial elements'); 84 | } 85 | 86 | removeChild() { 87 | throw new Error('Cannot remove/add child to Dial elements'); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/widgets/Dial/index.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from '../config'; 2 | import { VNDial, DialProps } from './VNDial'; 3 | 4 | class DialConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNDial(); 9 | } 10 | } 11 | 12 | export default DialConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/Image/VNImage.ts: -------------------------------------------------------------------------------- 1 | import { 2 | QLabel, QPixmap, AspectRatioMode, TransformationMode, QSize, NodeWidget, 3 | } from '@nodegui/nodegui'; 4 | import { getLoadedPixmap } from '../../utils/image'; 5 | import { Prop, PropSetters } from '../../renderer/patchProp'; 6 | import { TextProps, textPropsSetters } from '../Text/VNText'; 7 | import { VNWidget } from '../config'; 8 | 9 | /** 10 | * The image widget allows users to create and render native image elements in the app. 11 | * It is based on [NodeGui's QLabel](https://docs.nodegui.org/docs/api/generated/classes/qlabel) along with [NodeGui's QPixmap](https://docs.nodegui.org/docs/api/generated/classes/qpixmap) 12 | * 13 | * ## Usage 14 | * 15 | * ```html 16 | * 19 | * 20 | * 23 | * ``` 24 | * 25 | * ## What it looks like? 26 | * 27 | * ![image-demo](/img/vn-image.png) 28 | * 29 | * ## Props and styling 30 | * 31 | * You can find all the props `vn-image` accepts listed below. 32 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 33 | * and [event handling](/docs/guides/5-handle-events) docs 34 | */ 35 | export interface ImageProps extends TextProps { 36 | src?: string; 37 | aspectRatioMode?: AspectRatioMode; 38 | transformationMode?: TransformationMode; 39 | buffer?: Buffer; 40 | } 41 | 42 | export const imagePropsSetters: PropSetters = { 43 | ...textPropsSetters, 44 | src: (widget: VNImage, _, nextValue: string) => { 45 | if (!nextValue) { 46 | return; 47 | } 48 | getLoadedPixmap(nextValue) 49 | .then((pixmap) => widget.setPixmap(pixmap)) 50 | .catch(console.warn); 51 | }, 52 | buffer: (widget: VNImage, _, nextValue: Buffer) => { 53 | const pixMap = new QPixmap(); 54 | pixMap.loadFromData(nextValue); 55 | widget.setPixmap(pixMap); 56 | }, 57 | aspectRatioMode: (widget: VNImage, _, nextValue: AspectRatioMode) => { 58 | widget.setAspectRatioMode(nextValue); 59 | }, 60 | transformationMode: (widget: VNImage, _, nextValue: TransformationMode) => { 61 | widget.setTransformationMode(nextValue); 62 | }, 63 | }; 64 | 65 | /** @internal */ 66 | export class VNImage extends QLabel implements VNWidget { 67 | originalPixmap?: QPixmap; 68 | 69 | aspectRatioMode?: AspectRatioMode; 70 | 71 | transformationMode?: TransformationMode; 72 | 73 | setPixmap = (pixmap: QPixmap) => { 74 | super.setPixmap(pixmap); 75 | this.originalPixmap = pixmap; 76 | }; 77 | 78 | setAspectRatioMode(mode: AspectRatioMode) { 79 | this.aspectRatioMode = mode; 80 | this.scalePixmap(this.size()); 81 | } 82 | 83 | setTransformationMode(mode: TransformationMode) { 84 | this.transformationMode = mode; 85 | this.scalePixmap(this.size()); 86 | } 87 | 88 | scalePixmap(size: QSize) { 89 | if (!this.originalPixmap) return; 90 | super.setPixmap( 91 | this.originalPixmap.scaled( 92 | size.width(), 93 | size.height(), 94 | this.aspectRatioMode, 95 | this.transformationMode, 96 | ), 97 | ); 98 | } 99 | 100 | insertChild() { 101 | throw new Error('Cannot add child to image elements'); 102 | } 103 | 104 | patchProp( 105 | key: keyof ImageProps, 106 | prevValue: Prop, 107 | nextValue: Prop, 108 | ) { 109 | const propSetter = imagePropsSetters[key]; 110 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 111 | } 112 | 113 | removeChild() { 114 | throw new Error('Cannot remove/add child to image elements'); 115 | } 116 | 117 | insertBefore() { 118 | throw new Error('Cannot add child to image elements'); 119 | } 120 | 121 | getNextSibling(): NodeWidget | null { 122 | throw new Error('image cannot have children'); 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /src/widgets/Image/index.ts: -------------------------------------------------------------------------------- 1 | import { WidgetEventTypes } from '@nodegui/nodegui'; 2 | import { WidgetConfig } from '../config'; 3 | import { VNImage, ImageProps } from './VNImage'; 4 | 5 | class ImageConfig implements WidgetConfig { 6 | parentNode: any; 7 | 8 | createElement() { 9 | const widget = new VNImage(); 10 | widget.addEventListener(WidgetEventTypes.Resize, () => { 11 | widget.scalePixmap(widget.size()); 12 | }); 13 | return widget; 14 | } 15 | } 16 | 17 | export default ImageConfig; 18 | -------------------------------------------------------------------------------- /src/widgets/LineEdit/VNLineEdit.ts: -------------------------------------------------------------------------------- 1 | import { QLineEdit, EchoMode, NodeWidget } from '@nodegui/nodegui'; 2 | import { VNWidget } from 'widgets/config'; 3 | import { PropSetters, Prop } from '../../renderer/patchProp'; 4 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 5 | 6 | /** 7 | * The lineedit widget allows users to create and render native input box elements in the app. 8 | * It is based on [NodeGui's QLineEdit](https://docs.nodegui.org/docs/api/generated/classes/qlineedit) 9 | * 10 | * ## Usage 11 | * 12 | * ```html 13 | * 19 | * 20 | * 33 | * ``` 34 | * 35 | * ## What it looks like? 36 | * 37 | * ![line-edit-demo](/img/vn-line-edit.gif) 38 | * 39 | * > You can use the `v-model` directive along with `vn-line-edit` widgets as shown in the example. 40 | * Users also have the choice to use events and handle data updates on their own. 41 | * 42 | * ## Props and styling 43 | * 44 | * You can find all the props `vn-line-edit` accepts listed below. 45 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 46 | * and [event handling](/docs/guides/5-handle-events) docs 47 | */ 48 | export interface LineEditProps extends ViewProps { 49 | text?: string; 50 | placeholderText?: string; 51 | readOnly?: boolean; 52 | echoMode?: EchoMode; 53 | } 54 | 55 | export const lineEditPropsSetters: PropSetters = { 56 | ...viewPropsSetters, 57 | text: (widget: VNLineEdit, _, nextValue: string) => { 58 | if (nextValue) { 59 | widget.setText(nextValue); 60 | return; 61 | } 62 | widget.clear(); 63 | }, 64 | placeholderText: (widget: VNLineEdit, _, nextValue: string) => { 65 | widget.setPlaceholderText(nextValue); 66 | }, 67 | readOnly: (widget: VNLineEdit, _, nextValue: boolean) => { 68 | widget.setReadOnly(nextValue); 69 | }, 70 | echoMode: (widget: VNLineEdit, _, nextValue: EchoMode) => { 71 | widget.setEchoMode(nextValue); 72 | }, 73 | }; 74 | 75 | /** @internal */ 76 | export class VNLineEdit extends QLineEdit implements VNWidget { 77 | insertChild() { 78 | throw new Error('Cannot add child to line edits'); 79 | } 80 | 81 | patchProp( 82 | key: keyof LineEditProps, 83 | prevValue: Prop, 84 | nextValue: Prop, 85 | ) { 86 | const propSetter = lineEditPropsSetters[key]; 87 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 88 | } 89 | 90 | removeChild() { 91 | throw new Error('Cannot remove/add child to line edits'); 92 | } 93 | 94 | insertBefore() { 95 | throw new Error('Cannot add child to line edits'); 96 | } 97 | 98 | getNextSibling(): NodeWidget | null { 99 | throw new Error('line edit cannot have children'); 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/widgets/LineEdit/index.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from 'widgets/config'; 2 | import { VNLineEdit, LineEditProps } from './VNLineEdit'; 3 | 4 | class LineEditConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNLineEdit(); 9 | } 10 | } 11 | 12 | export default LineEditConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/MetaWidget/VNMetaWidget.ts: -------------------------------------------------------------------------------- 1 | import { QWidget, NodeWidget } from '@nodegui/nodegui'; 2 | import { VNWidget } from 'widgets/config'; 3 | 4 | /** @internal */ 5 | export class VNMetaWidget extends QWidget implements VNWidget<{}> { 6 | constructor() { 7 | super(); 8 | this.setFixedSize(0, 0); 9 | } 10 | 11 | insertChild() { 12 | throw new Error('cannot add child to meta widgets'); 13 | } 14 | 15 | patchProp() { 16 | throw new Error('cannot add props to meta widgets'); 17 | } 18 | 19 | removeChild() { 20 | throw new Error('cannot add props to meta widgets'); 21 | } 22 | 23 | insertBefore() { 24 | throw new Error('Cannot add child to meta widgets'); 25 | } 26 | 27 | getNextSibling(): NodeWidget | null { 28 | throw new Error('meta widget cannot have children'); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/widgets/ProgressBar/VNProgressBar.ts: -------------------------------------------------------------------------------- 1 | import { QProgressBar, Orientation, NodeWidget } from '@nodegui/nodegui'; 2 | import { VNWidget } from 'widgets/config'; 3 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 4 | import { PropSetters, Prop } from '../../renderer/patchProp'; 5 | 6 | /** 7 | * The ProgressBar component provides ability to add and manipulate native progress bar widgets. 8 | * It is based on [NodeGui's QProgressBar](https://docs.nodegui.org/docs/api/generated/classes/qprogressbar/). 9 | * 10 | * ## Usage 11 | * 12 | * ```html 13 | * 19 | * 20 | * 36 | * ``` 37 | * 38 | * ## What it looks like? 39 | * 40 | * ![progress-bar-demo](/img/vn-progress-bar.gif) 41 | * 42 | * ## Props and styling 43 | * 44 | * You can find all the props `vn-progress-bar` accepts listed below. 45 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 46 | * and [event handling](/docs/guides/5-handle-events) docs 47 | */ 48 | 49 | export interface ProgressBarProps extends ViewProps { 50 | value?: number; 51 | minimum?: number; 52 | maximum?: number; 53 | orientation?: Orientation; 54 | } 55 | 56 | const progressBarPropsSetters: PropSetters = { 57 | ...viewPropsSetters, 58 | value(widget: VNProgressBar, _, value: number) { 59 | widget.setValue(value); 60 | }, 61 | minimum(widget: VNProgressBar, _, minimum: number) { 62 | widget.setMinimum(minimum); 63 | }, 64 | maximum(widget: VNProgressBar, _, maximum: number) { 65 | widget.setMaximum(maximum); 66 | }, 67 | orientation(widget: VNProgressBar, _, orientation: Orientation) { 68 | widget.setOrientation(orientation); 69 | }, 70 | }; 71 | 72 | /** @internal */ 73 | export class VNProgressBar extends QProgressBar implements VNWidget { 74 | patchProp( 75 | key: keyof ProgressBarProps, 76 | prevValue: Prop, 77 | nextValue: Prop, 78 | ) { 79 | const propSetter = progressBarPropsSetters[key]; 80 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 81 | } 82 | 83 | insertChild() { 84 | throw new Error('Cannot add child to ProgressBar elements'); 85 | } 86 | 87 | getNextSibling(): NodeWidget | null { 88 | throw new Error('ProgressBar elements cannot have children'); 89 | } 90 | 91 | insertBefore() { 92 | throw new Error('Cannot add child to ProgressBar elements'); 93 | } 94 | 95 | removeChild() { 96 | throw new Error('Cannot remove/add child to ProgressBar elements'); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/widgets/ProgressBar/index.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from '../config'; 2 | import { VNProgressBar, ProgressBarProps } from './VNProgressBar'; 3 | 4 | class ProgressBarConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNProgressBar(); 9 | } 10 | } 11 | 12 | export default ProgressBarConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/RadioButton/VNRadioButton.ts: -------------------------------------------------------------------------------- 1 | import { QRadioButton, NodeWidget } from '@nodegui/nodegui'; 2 | import { AbstractButtonProps, abstractButtonPropSetters } from '../AbstractButton/VNAbstractButton'; 3 | import { VNWidget } from '../config'; 4 | import { PropSetters, Prop } from '../../renderer/patchProp'; 5 | 6 | /** 7 | * The radio button widget allows users to create and render native radio buttons in the app. 8 | * It is based on [NodeGui's QRadioButton](https://docs.nodegui.org/docs/api/generated/classes/qradiobutton) 9 | * 10 | * ## Usage 11 | * 12 | * ```html 13 | * 21 | * 22 | * 25 | * ``` 26 | * 27 | * ## What it looks like? 28 | * 29 | * ![radio-button-demo](/img/vn-radio-button.png) 30 | * 31 | * ## Props and styling 32 | * 33 | * You can find all the props `vn-radio-button` accepts listed below. 34 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 35 | * and [event handling](/docs/guides/5-handle-events) docs 36 | */ 37 | export interface RadioButtonProps extends AbstractButtonProps { 38 | // TODO: add more soon 39 | } 40 | 41 | export const RadioButtonPropsSetters: PropSetters = { 42 | ...abstractButtonPropSetters, 43 | // TODO: add more soon 44 | }; 45 | 46 | /** @internal */ 47 | export class VNRadioButton extends QRadioButton implements VNWidget { 48 | insertChild() { 49 | throw new Error('Cannot add child to RadioButtons'); 50 | } 51 | 52 | patchProp( 53 | key: keyof RadioButtonProps, 54 | prevValue: Prop, 55 | nextValue: Prop, 56 | ) { 57 | const propSetter = RadioButtonPropsSetters[key]; 58 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 59 | } 60 | 61 | removeChild() { 62 | throw new Error('Cannot remove/add child to RadioButtons'); 63 | } 64 | 65 | insertBefore() { 66 | throw new Error('Cannot add child to RadioButtons'); 67 | } 68 | 69 | getNextSibling(): NodeWidget | null { 70 | throw new Error('RadioButtons cannot have children'); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/widgets/RadioButton/index.ts: -------------------------------------------------------------------------------- 1 | import { VNRadioButton, RadioButtonProps } from './VNRadioButton'; 2 | import { WidgetConfig } from '../config'; 3 | 4 | class RadioButtonConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNRadioButton(); 9 | } 10 | } 11 | 12 | export default RadioButtonConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/ScrollArea/VNScrollArea.ts: -------------------------------------------------------------------------------- 1 | import { QScrollArea, NodeWidget } from '@nodegui/nodegui'; 2 | import { VNWidget } from 'widgets/config'; 3 | import { PropSetters, Prop } from '../../renderer/patchProp'; 4 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 5 | 6 | /** 7 | * The scroll-area widget allows users to wrap other widgets to enable a scroll 8 | * (horizontal and vertical). 9 | * It is based on [NodeGui's QScrollArea](https://docs.nodegui.org/docs/api/generated/classes/qscrollarea) 10 | * 11 | * > Note that the scroll area only allows one child. So, you may have to wrap contents in a vn-view 12 | * 13 | * ## Usage 14 | * 15 | * ```html 16 | * 34 | * 35 | * 38 | * ``` 39 | * 40 | * ## What it looks like? 41 | * 42 | * ![scroll-area-demo](/img/vn-scroll-area.gif) 43 | * 44 | * ## Props and styling 45 | * 46 | * You can find all the props `vn-scroll-area` accepts listed below. 47 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 48 | * and [event handling](/docs/guides/5-handle-events) docs 49 | */ 50 | export interface ScrollAreaProps extends ViewProps { 51 | widgetResizable?: boolean; 52 | } 53 | 54 | export const scrollAreaPropsSetters: PropSetters = { 55 | ...viewPropsSetters, 56 | widgetResizable(widget: VNScrollArea, _, nextValue: boolean) { 57 | widget.setWidgetResizable(nextValue); 58 | }, 59 | }; 60 | 61 | /** @internal */ 62 | export class VNScrollArea extends QScrollArea implements VNWidget { 63 | insertChild(child: NodeWidget) { 64 | if (this.contentWidget) { 65 | console.warn('Scroll Area can only have one child'); 66 | return; 67 | } 68 | this.setWidget(child); 69 | } 70 | 71 | patchProp( 72 | key: keyof ScrollAreaProps, 73 | prevValue: Prop, 74 | nextValue: Prop, 75 | ) { 76 | const propSetter = scrollAreaPropsSetters[key]; 77 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 78 | } 79 | 80 | removeChild(child: NodeWidget) { 81 | const childToRemove = this.takeWidget(); 82 | if (childToRemove) { 83 | childToRemove.close(); 84 | } 85 | 86 | child.close(); 87 | } 88 | 89 | insertBefore(child: NodeWidget) { 90 | this.insertChild(child); 91 | } 92 | 93 | getNextSibling(): NodeWidget | null { 94 | // Scroll Area can only have one child 95 | return null; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/widgets/ScrollArea/index.ts: -------------------------------------------------------------------------------- 1 | import { ScrollAreaProps, VNScrollArea } from './VNScrollArea'; 2 | import { WidgetConfig } from '../config'; 3 | 4 | class ScrollAreaConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNScrollArea(); 9 | } 10 | } 11 | 12 | export default ScrollAreaConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/Slider/VNSlider.ts: -------------------------------------------------------------------------------- 1 | import { 2 | QSlider, NodeWidget, TickPosition, Orientation, 3 | } from '@nodegui/nodegui'; 4 | import { VNWidget } from 'widgets/config'; 5 | import { PropSetters, Prop } from '../../renderer/patchProp'; 6 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 7 | 8 | /** 9 | * The slider widget allows users to render native sliders into their apps. 10 | * It is based on the [NodeGui's QSlider](https://docs.nodegui.org/docs/api/generated/classes/qslider) 11 | * 12 | * ## Usage 13 | * 14 | * ```html 15 | * 21 | * 22 | * 35 | * ``` 36 | * 37 | * ## What it looks like? 38 | * 39 | * ![vn-slider-demo](/img/vn-slider.gif) 40 | * 41 | * ## Props and styling 42 | * 43 | * You can find all the props `vn-slider` accepts listed below. 44 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 45 | * and [event handling](/docs/guides/5-handle-events) docs 46 | */ 47 | export interface SliderProps extends ViewProps { 48 | tickInterval?: number; 49 | tickPosition?: TickPosition; 50 | orientation?: Orientation; 51 | minimum?: number; 52 | maximum?: number; 53 | invertedAppearance?: boolean; 54 | invertedControls?: boolean; 55 | pageStep?: number; 56 | singleStep?: number; 57 | isSliderDown?: boolean; 58 | sliderPosition?: number; 59 | hasTracking?: boolean; 60 | value?: number; 61 | } 62 | 63 | export const sliderPropsSetters: PropSetters = { 64 | ...viewPropsSetters, 65 | tickInterval(widget: VNSlider, _, nextValue: number) { 66 | widget.setTickInterval(nextValue); 67 | }, 68 | tickPosition(widget: VNSlider, _, nextValue: TickPosition) { 69 | widget.setTickPosition(nextValue); 70 | }, 71 | invertedAppearance(widget: VNSlider, _, nextValue: boolean) { 72 | widget.setInvertedAppearance(nextValue); 73 | }, 74 | invertedControls(widget: VNSlider, _, nextValue: boolean) { 75 | widget.setInvertedControls(nextValue); 76 | }, 77 | maximum(widget: VNSlider, _, nextValue: number) { 78 | widget.setMaximum(nextValue); 79 | }, 80 | minimum(widget: VNSlider, _, nextValue: number) { 81 | widget.setMinimum(nextValue); 82 | }, 83 | orientation(widget: VNSlider, _, nextValue: Orientation) { 84 | widget.setOrientation(nextValue); 85 | }, 86 | pageStep(widget: VNSlider, _, nextValue: number) { 87 | widget.setPageStep(nextValue); 88 | }, 89 | singleStep(widget: VNSlider, _, nextValue: number) { 90 | widget.setSingleStep(nextValue); 91 | }, 92 | isSliderDown(widget: VNSlider, _, nextValue: boolean) { 93 | widget.setSliderDown(nextValue); 94 | }, 95 | sliderPosition(widget: VNSlider, _, nextValue: number) { 96 | widget.setSliderPosition(nextValue); 97 | }, 98 | hasTracking(widget: VNSlider, _, nextValue: boolean) { 99 | widget.setTracking(nextValue); 100 | }, 101 | value(widget: VNSlider, _, nextValue: number) { 102 | widget.setValue(nextValue); 103 | }, 104 | }; 105 | 106 | /** @internal */ 107 | export class VNSlider extends QSlider implements VNWidget { 108 | insertChild() { 109 | throw new Error('Cannot add child to slider elements'); 110 | } 111 | 112 | patchProp( 113 | key: keyof SliderProps, 114 | prevValue: Prop, 115 | nextValue: Prop, 116 | ) { 117 | const propSetter = sliderPropsSetters[key]; 118 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 119 | } 120 | 121 | removeChild() { 122 | throw new Error('Cannot add child to slider elements'); 123 | } 124 | 125 | insertBefore() { 126 | throw new Error('Cannot add child to slider elements'); 127 | } 128 | 129 | getNextSibling(): NodeWidget | null { 130 | throw new Error('Cannot add child to slider elements'); 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /src/widgets/Slider/index.ts: -------------------------------------------------------------------------------- 1 | import { VNSlider, SliderProps } from './VNSlider'; 2 | import { WidgetConfig } from '../config'; 3 | 4 | class SliderConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNSlider(); 9 | } 10 | } 11 | 12 | export default SliderConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/SpinBox/VNSpinBox.ts: -------------------------------------------------------------------------------- 1 | import { QSpinBox, NodeWidget } from '@nodegui/nodegui'; 2 | import { VNWidget } from 'widgets/config'; 3 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 4 | import { PropSetters, Prop } from '../../renderer/patchProp'; 5 | 6 | /** 7 | * The SpinBox component provides the ability to add and manipulate native spin box widgets. 8 | * It is based on [NodeGui's QSpinBox](https://docs.nodegui.org/docs/api/generated/classes/qspinbox/). 9 | * 10 | * ## Usage 11 | * 12 | * ```html 13 | * 20 | * 21 | * 31 | * ``` 32 | * 33 | * ## What it looks like? 34 | * 35 | * ![spinbox-demo](/img/vn-spinbox.gif) 36 | * 37 | * ## Props and styling 38 | * 39 | * You can find all the props `vn-spinbox` accepts listed below. 40 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 41 | * and [event handling](/docs/guides/5-handle-events) docs 42 | */ 43 | 44 | export interface SpinBoxProps extends ViewProps { 45 | prefix?: string; 46 | suffix?: string; 47 | singleStep?: number; 48 | range?: Range; 49 | value?: number; 50 | } 51 | 52 | const spinBoxPropsSetters: PropSetters = { 53 | ...viewPropsSetters, 54 | prefix(widget: VNSpinBox, _, prefix: string) { 55 | widget.setPrefix(prefix); 56 | }, 57 | suffix(widget: VNSpinBox, _, suffix: string) { 58 | widget.setSuffix(suffix); 59 | }, 60 | singleStep(widget: VNSpinBox, _, step: number) { 61 | widget.setSingleStep(step); 62 | }, 63 | range(widget: VNSpinBox, _, range: Range) { 64 | widget.setRange(range.minimum, range.maximum); 65 | }, 66 | value(widget: VNSpinBox, _, value: number) { 67 | widget.setValue(value); 68 | }, 69 | }; 70 | 71 | /** @internal */ 72 | export class VNSpinBox extends QSpinBox implements VNWidget { 73 | patchProp( 74 | key: keyof SpinBoxProps, 75 | prevValue: Prop, 76 | nextValue: Prop, 77 | ) { 78 | const propSetter = spinBoxPropsSetters[key]; 79 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 80 | } 81 | 82 | insertChild() { 83 | throw new Error('Cannot add child to SpinBox elements'); 84 | } 85 | 86 | getNextSibling(): NodeWidget | null { 87 | throw new Error('SpinBox elements cannot have children'); 88 | } 89 | 90 | insertBefore() { 91 | throw new Error('Cannot add child to SpinBox elements'); 92 | } 93 | 94 | removeChild() { 95 | throw new Error('Cannot remove/add child to SpinBox elements'); 96 | } 97 | } 98 | 99 | type Range = { 100 | minimum: number; 101 | maximum: number; 102 | }; 103 | -------------------------------------------------------------------------------- /src/widgets/SpinBox/index.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from '../config'; 2 | import { VNSpinBox, SpinBoxProps } from './VNSpinBox'; 3 | 4 | class SpinBoxConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNSpinBox(); 9 | } 10 | } 11 | 12 | export default SpinBoxConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/Text/VNText.ts: -------------------------------------------------------------------------------- 1 | import { QLabel, NodeWidget } from '@nodegui/nodegui'; 2 | import { VNWidget } from 'widgets/config'; 3 | import { PropSetters, Prop } from '../../renderer/patchProp'; 4 | import { ViewProps, viewPropsSetters } from '../View/VNView'; 5 | 6 | /** 7 | * The text widget allows users to create and render native text components in the app. 8 | * It is based on [NodeGui's QLabel](https://docs.nodegui.org/docs/api/generated/classes/qlabel) 9 | * 10 | * > You can also use the QLabel widget to render rich-text HTML (like in emails) 11 | * 12 | * ## Usage 13 | * 14 | * ```html 15 | * 18 | * 19 | * 22 | * ``` 23 | * ## What it looks like? 24 | * 25 | * ![text-demo](/img/vn-text.png) 26 | * 27 | * ## Props and styling 28 | * 29 | * You can find all the props `vn-text` accepts listed below. 30 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 31 | * and [event handling](/docs/guides/5-handle-events) docs 32 | */ 33 | export interface TextProps extends ViewProps { 34 | wordWrap?: boolean; 35 | scaledContents?: boolean; 36 | openExternalLinks?: boolean; 37 | } 38 | 39 | export const textPropsSetters: PropSetters = { 40 | ...viewPropsSetters, 41 | wordWrap(widget: VNText, _, nextValue: boolean) { 42 | widget.setWordWrap(nextValue); 43 | }, 44 | scaledContents(widget: VNText, _, nextValue: boolean) { 45 | widget.setProperty('scaledContents', nextValue); 46 | }, 47 | openExternalLinks(widget: VNText, _, nextValue: boolean) { 48 | widget.setProperty('openExternalLinks', nextValue); 49 | }, 50 | }; 51 | 52 | /** @internal */ 53 | export class VNText extends QLabel implements VNWidget { 54 | insertChild() { 55 | throw new Error('Cannot add child to text elements'); 56 | } 57 | 58 | patchProp( 59 | key: keyof TextProps, 60 | prevValue: Prop, 61 | nextValue: Prop, 62 | ) { 63 | const propSetter = textPropsSetters[key]; 64 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 65 | } 66 | 67 | removeChild() { 68 | throw new Error('Cannot remove/add child to text elements'); 69 | } 70 | 71 | insertBefore() { 72 | throw new Error('Cannot add child to text elements'); 73 | } 74 | 75 | getNextSibling(): NodeWidget | null { 76 | throw new Error('text elements cannot have children'); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/widgets/Text/index.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from 'widgets/config'; 2 | import { VNText, TextProps } from './VNText'; 3 | 4 | class TextConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNText(); 9 | } 10 | } 11 | 12 | export default TextConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/View/VNView.ts: -------------------------------------------------------------------------------- 1 | import { 2 | QWidget, FlexLayout, NodeWidget, 3 | } from '@nodegui/nodegui'; 4 | import { VNWidget } from 'widgets/config'; 5 | import { PropSetters, Prop } from '../../renderer/patchProp'; 6 | 7 | /** 8 | * The view widget can be used to structure other widgets within it. 9 | * It is mainly used for creating layouts for other widgets. 10 | * Think of this as analogous to the `div` in the DOM. The `vn-view` widget is based on [NodeGui's QWidget](https://docs.nodegui.org/docs/api/generated/classes/qwidget) 11 | * 12 | * ## Usage 13 | * 14 | * ```html 15 | * 24 | * 25 | * 28 | * ``` 29 | * 30 | * ## What it looks like? 31 | * 32 | * ![view-demo](/img/vn-view.png) 33 | * 34 | * ## Props and styling 35 | * 36 | * You can find all the props `vn-view` accepts listed below. 37 | * Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 38 | * and [event handling](/docs/guides/5-handle-events) docs 39 | */ 40 | export interface ViewProps { 41 | /** 42 | * Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 43 | */ 44 | visible?: boolean; 45 | /** 46 | * Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 47 | */ 48 | styleSheet?: string; 49 | /** 50 | * Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 51 | */ 52 | style?: string; 53 | /** 54 | * Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 55 | */ 56 | id?: string; 57 | /** 58 | * Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 59 | */ 60 | mouseTracking?: boolean; 61 | /** 62 | * Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 63 | */ 64 | enabled?: boolean; 65 | /** 66 | * This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 67 | */ 68 | windowOpacity?: number; 69 | /** 70 | * Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 71 | */ 72 | windowTitle?: string; 73 | } 74 | 75 | export const viewPropsSetters: PropSetters, ViewProps> = { 76 | visible: (widget: NodeWidget, _, nextValue: boolean) => { 77 | if (nextValue) { 78 | widget.show(); 79 | return; 80 | } 81 | widget.hide(); 82 | }, 83 | styleSheet: (widget: NodeWidget, _, nextValue: string) => { 84 | widget.setStyleSheet(nextValue); 85 | }, 86 | style: (widget: NodeWidget, _, nextValue: string) => { 87 | widget.setInlineStyle(nextValue); 88 | }, 89 | id(widget: NodeWidget, _, nextValue: string) { 90 | widget.setObjectName(nextValue); 91 | }, 92 | mouseTracking(widget: NodeWidget, _, nextValue: boolean) { 93 | widget.setMouseTracking(nextValue); 94 | }, 95 | enabled(widget: NodeWidget, _, nextValue: boolean) { 96 | widget.setEnabled(nextValue); 97 | }, 98 | windowOpacity(widget: NodeWidget, _, nextValue: number) { 99 | widget.setWindowOpacity(nextValue); 100 | }, 101 | windowTitle(widget: NodeWidget, _, nextValue: string) { 102 | widget.setWindowTitle(nextValue); 103 | }, 104 | }; 105 | 106 | /** @internal */ 107 | export class VNView extends QWidget implements VNWidget { 108 | insertChild(child: NodeWidget) { 109 | if (!child) { 110 | return; 111 | } 112 | if (!this.layout) { 113 | const flexLayout = new FlexLayout(); 114 | flexLayout.setFlexNode(this.getFlexNode()); 115 | this.setLayout(flexLayout); 116 | this.layout = flexLayout; 117 | } 118 | this.layout.addWidget(child); 119 | } 120 | 121 | patchProp( 122 | key: keyof ViewProps, 123 | prevValue: Prop, 124 | nextValue: Prop, 125 | ) { 126 | const propSetter = viewPropsSetters[key]; 127 | if (propSetter !== undefined) { propSetter(this, prevValue as never, nextValue as never); } 128 | } 129 | 130 | removeChild(child: NodeWidget) { 131 | if (!this.layout) { 132 | console.warn('parent has no layout to remove child from'); 133 | return; 134 | } 135 | this.layout.removeWidget(child); 136 | child.close(); 137 | } 138 | 139 | insertBefore(child: NodeWidget, beforeChild: NodeWidget) { 140 | if (!this.layout) { 141 | console.warn('parent has no layout to remove child from'); 142 | return; 143 | } 144 | 145 | (this.layout as FlexLayout).insertChildBefore(child, beforeChild); 146 | } 147 | 148 | getNextSibling(child: NodeWidget): NodeWidget | null { 149 | return (this.layout as FlexLayout).getNextSibling(child); 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /src/widgets/View/index.ts: -------------------------------------------------------------------------------- 1 | import { WidgetConfig } from 'widgets/config'; 2 | import { VNView, ViewProps } from './VNView'; 3 | 4 | class ViewConfig implements WidgetConfig { 5 | parentNode: any; 6 | 7 | createElement() { 8 | return new VNView(); 9 | } 10 | } 11 | 12 | export default ViewConfig; 13 | -------------------------------------------------------------------------------- /src/widgets/Window/VNWindow.ts: -------------------------------------------------------------------------------- 1 | import { QMainWindow, NodeWidget } from '@nodegui/nodegui'; 2 | import { VNWidget } from 'widgets/config'; 3 | 4 | /** 5 | * The main QMainWindow that contains the entire application. 6 | * 7 | * :::note 8 | * This widget can have only one child (the central widget) 9 | * ::: 10 | * 11 | * Usage: 12 | * 13 | * You would not be using this widget in your app. 14 | * vue-nodegui automatically wraps you central widget into the vn-window widget 15 | * to allow you to open the app in your browser 16 | * @internal 17 | */ 18 | export class VNWindow extends QMainWindow implements VNWidget<{}> { 19 | insertChild(child: NodeWidget) { 20 | this.setCentralWidget(child); 21 | } 22 | 23 | patchProp() {} 24 | 25 | removeChild(child: NodeWidget) { 26 | const removedChild = this.takeCentralWidget(); 27 | if (removedChild) { 28 | removedChild.close(); 29 | } 30 | child.close(); 31 | } 32 | 33 | insertBefore(child: NodeWidget) { 34 | if (!this.centralWidget) { 35 | this.insertChild(child); 36 | } 37 | } 38 | 39 | getNextSibling(): null { 40 | // window can only have a single central widget 41 | return null; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/widgets/config.ts: -------------------------------------------------------------------------------- 1 | import { NodeWidget, Component } from '@nodegui/nodegui'; 2 | import { Prop } from 'renderer/patchProp'; 3 | 4 | export abstract class VNNode extends NodeWidget { 5 | abstract insertChild(child: Component): void; 6 | 7 | abstract patchProp( 8 | key: keyof WidgetProps, 9 | prevValue: Prop, 10 | nextValue: Prop, 11 | ): void 12 | 13 | abstract removeChild(child: Component): void; 14 | 15 | abstract insertBefore(child: Component, beforeChild: Component): void; 16 | 17 | abstract getNextSibling(child: Component): Component | null; 18 | } 19 | 20 | export abstract class VNWidget extends NodeWidget implements VNNode { 21 | abstract insertChild(child: NodeWidget): void; 22 | 23 | abstract patchProp( 24 | key: keyof WidgetProps, 25 | prevValue: Prop, 26 | nextValue: Prop, 27 | ): void 28 | 29 | abstract removeChild(child: NodeWidget): void; 30 | 31 | abstract insertBefore( 32 | child: NodeWidget, 33 | beforeChild: NodeWidget 34 | ): void; 35 | 36 | abstract getNextSibling(child: NodeWidget): NodeWidget | null; 37 | } 38 | 39 | export abstract class WidgetConfig { 40 | abstract createElement(): VNNode 41 | } 42 | -------------------------------------------------------------------------------- /src/widgets/nativeWidget.ts: -------------------------------------------------------------------------------- 1 | export type ValidNativeWidgets = 'vn-image' | 2 | 'vn-text' | 3 | 'vn-view' | 4 | 'vn-line-edit' | 5 | 'vn-button' | 6 | 'vn-checkbox' | 7 | 'vn-radio-button' | 8 | 'vn-scroll-area' | 9 | 'vn-slider' | 10 | 'vn-spinbox' | 11 | 'vn-progress-bar' | 12 | 'vn-combobox' | 13 | 'vn-dial' | 14 | 'vn-animated-image'; 15 | 16 | // Add vue-nodegui widgets here 17 | // whenever new ones are created 18 | const nativeWidgets: {[key in ValidNativeWidgets]: boolean} = { 19 | 'vn-text': true, 20 | 'vn-view': true, 21 | 'vn-button': true, 22 | 'vn-image': true, 23 | 'vn-line-edit': true, 24 | 'vn-checkbox': true, 25 | 'vn-radio-button': true, 26 | 'vn-scroll-area': true, 27 | 'vn-slider': true, 28 | 'vn-spinbox': true, 29 | 'vn-progress-bar': true, 30 | 'vn-combobox': true, 31 | 'vn-dial': true, 32 | 'vn-animated-image': true, 33 | }; 34 | 35 | export const isNativeWidget = (type: ValidNativeWidgets) => !!nativeWidgets[type]; 36 | -------------------------------------------------------------------------------- /src/widgets/widgetMap.ts: -------------------------------------------------------------------------------- 1 | import ButtonConfig from './Button'; 2 | import ViewConfig from './View'; 3 | import TextConfig from './Text'; 4 | import LineEditConfig from './LineEdit'; 5 | import ImageConfig from './Image'; 6 | import CheckboxConfig from './Checkbox'; 7 | import RadioButtonConfig from './RadioButton'; 8 | import ScrollAreaConfig from './ScrollArea'; 9 | import SliderConfig from './Slider'; 10 | import SpinBoxConfig from './SpinBox'; 11 | import ProgressBarConfig from './ProgressBar'; 12 | import ComboBoxConfig from './ComboBox'; 13 | import DialConfig from './Dial'; 14 | import AnimatedImageConfig from './AnimatedImage'; 15 | import { ValidNativeWidgets } from './nativeWidget'; 16 | import { WidgetConfig } from './config'; 17 | 18 | type WidgetMap = { 19 | [key in ValidNativeWidgets]: WidgetConfig 20 | } 21 | 22 | const widgetMap: WidgetMap = { 23 | 'vn-button': new ButtonConfig(), 24 | 'vn-line-edit': new LineEditConfig(), 25 | 'vn-image': new ImageConfig(), 26 | 'vn-text': new TextConfig(), 27 | 'vn-view': new ViewConfig(), 28 | 'vn-checkbox': new CheckboxConfig(), 29 | 'vn-radio-button': new RadioButtonConfig(), 30 | 'vn-scroll-area': new ScrollAreaConfig(), 31 | 'vn-slider': new SliderConfig(), 32 | 'vn-spinbox': new SpinBoxConfig(), 33 | 'vn-progress-bar': new ProgressBarConfig(), 34 | 'vn-combobox': new ComboBoxConfig(), 35 | 'vn-dial': new DialConfig(), 36 | 'vn-animated-image': new AnimatedImageConfig(), 37 | }; 38 | 39 | const getConfigByType = (type: ValidNativeWidgets) => { 40 | if (widgetMap[type] === undefined) { 41 | throw new Error(`invalid widget type ${type}`); 42 | } 43 | return widgetMap[type]; 44 | }; 45 | 46 | export default getConfigByType; 47 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": [ 4 | "es2015", 5 | "dom" 6 | ], 7 | "target": "es2015", 8 | "module": "commonjs", 9 | "declaration": true, 10 | "sourceMap": true, 11 | "outDir": "./dist", 12 | "strict": true, 13 | "strictPropertyInitialization": false, 14 | "moduleResolution": "node", 15 | "esModuleInterop": true, 16 | "baseUrl": "src", 17 | "skipLibCheck": true 18 | }, 19 | "include": [ 20 | "src" 21 | ], 22 | "exclude": [ 23 | "node_modules" 24 | ], 25 | "typedocOptions": { 26 | "mode": "file", 27 | "out": "./website/docs/api", 28 | "plugin": ["typedoc-plugin-markdown"], 29 | "exclude": [ 30 | "**/renderer/**", 31 | "**/utils/**", 32 | "**/widgets/**/index.ts", 33 | "**/widgets/config.ts", 34 | "**/widgets/nativeWidget.ts", 35 | "**/widgets/widgetMap.ts", 36 | "vueLoader.ts", 37 | "index.ts" 38 | ], 39 | "excludeExternals": true, 40 | "excludeNotExported": true, 41 | "excludePrivate": true, 42 | "excludeProtected": true, 43 | "includeDeclarations": true, 44 | "hideBreadcrumbs": true, 45 | "hideSources": true, 46 | "theme": "docusaurus2", 47 | "stripInternal": true 48 | } 49 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { VueLoaderPlugin } = require('vue-loader'); 3 | const { compilerOptions } = require('./dist/vueLoader'); 4 | 5 | module.exports = (env = {}) => ({ 6 | mode: env.prod ? 'production' : 'development', 7 | devtool: 'inline-source-map', 8 | entry: path.resolve(__dirname, './demo/main.js'), 9 | target: 'node', 10 | output: { 11 | path: path.resolve(__dirname, './demo-dist'), 12 | publicPath: '/demo-dist/', 13 | }, 14 | resolve: { 15 | extensions: ['.ts', '.js', '.vue', '.json'], 16 | alias: { 17 | vue: path.resolve(__dirname, './dist'), 18 | }, 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.vue$/, 24 | use: { 25 | loader: 'vue-loader', 26 | options: { 27 | compilerOptions, 28 | }, 29 | }, 30 | }, 31 | { 32 | test: /\.node$/, 33 | use: [{ loader: 'node-loader' }, { loader: 'file-loader' }], 34 | }, 35 | { 36 | test: /\.(png|jpe?g|gif|svg|bmp)$/i, 37 | use: [{ loader: 'file-loader' }], 38 | }, 39 | ], 40 | }, 41 | plugins: [ 42 | new VueLoaderPlugin(), 43 | ], 44 | }); 45 | -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /website/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | ``` 30 | $ GIT_USER= USE_SSH=true yarn deploy 31 | ``` 32 | 33 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 34 | -------------------------------------------------------------------------------- /website/blog/2020-05-24-welcome.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: welcome 3 | title: Welcome 4 | author: Shubham Zanwar 5 | author_title: Creator @ vue-nodegui 6 | author_url: https://twitter.com/szanwar22 7 | author_image_url: https://en.gravatar.com/userimage/95818898/9bbfd569f165c6f47ead0eb3ae772cf9.jpg?size=300 8 | tags: [vue, nodegui, javascript, welcome] 9 | --- 10 | 11 | Welcome the the official vue-nodegui blog! 12 | 13 | I am [Shubham](https://twitter.com/szanwar22) and I've been working on this project since it's very inception. 14 | 15 | We will use this platform to track releases and new features for vue-nodegui. 16 | 17 | Stay tuned! 18 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/animatedimageprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "animatedimageprops" 3 | title: "AnimatedImageProps" 4 | sidebar_label: "AnimatedImageProps" 5 | --- 6 | 7 | The animated image widget allows users to create and render native GIFs, video (without controls) 8 | elements in the app. 9 | It is based on [NodeGui's QLabel](https://docs.nodegui.org/docs/api/generated/classes/qlabel) along with [NodeGui's QMovie](https://docs.nodegui.org/docs/api/generated/classes/qmovie) 10 | 11 | ## Usage 12 | 13 | ```html 14 | 19 | 20 | 23 | ``` 24 | 25 | ## What it looks like? 26 | 27 | ![animated-image-demo](/img/vn-animated-image.gif) 28 | 29 | ## Props and styling 30 | 31 | You can find all the props `vn-animated-image` accepts listed below. 32 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 33 | and [event handling](/docs/guides/5-handle-events) docs 34 | 35 | ## Hierarchy 36 | 37 | ↳ [TextProps](textprops.md) 38 | 39 | ↳ **AnimatedImageProps** 40 | 41 | ## Index 42 | 43 | ### Properties 44 | 45 | * [buffer](animatedimageprops.md#optional-buffer) 46 | * [enabled](animatedimageprops.md#optional-enabled) 47 | * [id](animatedimageprops.md#optional-id) 48 | * [mouseTracking](animatedimageprops.md#optional-mousetracking) 49 | * [openExternalLinks](animatedimageprops.md#optional-openexternallinks) 50 | * [scaledContents](animatedimageprops.md#optional-scaledcontents) 51 | * [src](animatedimageprops.md#optional-src) 52 | * [style](animatedimageprops.md#optional-style) 53 | * [styleSheet](animatedimageprops.md#optional-stylesheet) 54 | * [visible](animatedimageprops.md#optional-visible) 55 | * [windowOpacity](animatedimageprops.md#optional-windowopacity) 56 | * [windowTitle](animatedimageprops.md#optional-windowtitle) 57 | * [wordWrap](animatedimageprops.md#optional-wordwrap) 58 | 59 | ## Properties 60 | 61 | ### `Optional` buffer 62 | 63 | • **buffer**? : *Buffer* 64 | 65 | ___ 66 | 67 | ### `Optional` enabled 68 | 69 | • **enabled**? : *undefined | false | true* 70 | 71 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 72 | 73 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 74 | 75 | ___ 76 | 77 | ### `Optional` id 78 | 79 | • **id**? : *undefined | string* 80 | 81 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 82 | 83 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 84 | 85 | ___ 86 | 87 | ### `Optional` mouseTracking 88 | 89 | • **mouseTracking**? : *undefined | false | true* 90 | 91 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 92 | 93 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 94 | 95 | ___ 96 | 97 | ### `Optional` openExternalLinks 98 | 99 | • **openExternalLinks**? : *undefined | false | true* 100 | 101 | *Inherited from [TextProps](textprops.md).[openExternalLinks](textprops.md#optional-openexternallinks)* 102 | 103 | ___ 104 | 105 | ### `Optional` scaledContents 106 | 107 | • **scaledContents**? : *undefined | false | true* 108 | 109 | *Inherited from [TextProps](textprops.md).[scaledContents](textprops.md#optional-scaledcontents)* 110 | 111 | ___ 112 | 113 | ### `Optional` src 114 | 115 | • **src**? : *undefined | string* 116 | 117 | ___ 118 | 119 | ### `Optional` style 120 | 121 | • **style**? : *undefined | string* 122 | 123 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 124 | 125 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 126 | 127 | ___ 128 | 129 | ### `Optional` styleSheet 130 | 131 | • **styleSheet**? : *undefined | string* 132 | 133 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 134 | 135 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 136 | 137 | ___ 138 | 139 | ### `Optional` visible 140 | 141 | • **visible**? : *undefined | false | true* 142 | 143 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 144 | 145 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 146 | 147 | ___ 148 | 149 | ### `Optional` windowOpacity 150 | 151 | • **windowOpacity**? : *undefined | number* 152 | 153 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 154 | 155 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 156 | 157 | ___ 158 | 159 | ### `Optional` windowTitle 160 | 161 | • **windowTitle**? : *undefined | string* 162 | 163 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 164 | 165 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 166 | 167 | ___ 168 | 169 | ### `Optional` wordWrap 170 | 171 | • **wordWrap**? : *undefined | false | true* 172 | 173 | *Inherited from [TextProps](textprops.md).[wordWrap](textprops.md#optional-wordwrap)* 174 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/buttonprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "buttonprops" 3 | title: "ButtonProps" 4 | sidebar_label: "ButtonProps" 5 | --- 6 | 7 | The button widget allows users to create and render native buttons in the app. 8 | This widget is based on [NodeGui's QPushButton](https://docs.nodegui.org/docs/api/QPushButton) 9 | 10 | ## Usage 11 | 12 | ```html 13 | 18 | 19 | 28 | ``` 29 | 30 | ## What does it look like? 31 | 32 | ![test](/img/vn-button.png) 33 | 34 | ## Props and styling 35 | 36 | You can find all the props `vn-button` accepts listed below. 37 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 38 | and [event handling](/docs/guides/5-handle-events) docs 39 | 40 | ## Hierarchy 41 | 42 | * AbstractButtonProps 43 | 44 | ↳ **ButtonProps** 45 | 46 | ## Index 47 | 48 | ### Properties 49 | 50 | * [enabled](buttonprops.md#optional-enabled) 51 | * [flat](buttonprops.md#optional-flat) 52 | * [icon](buttonprops.md#optional-icon) 53 | * [iconSize](buttonprops.md#optional-iconsize) 54 | * [id](buttonprops.md#optional-id) 55 | * [mouseTracking](buttonprops.md#optional-mousetracking) 56 | * [style](buttonprops.md#optional-style) 57 | * [styleSheet](buttonprops.md#optional-stylesheet) 58 | * [text](buttonprops.md#optional-text) 59 | * [visible](buttonprops.md#optional-visible) 60 | * [windowOpacity](buttonprops.md#optional-windowopacity) 61 | * [windowTitle](buttonprops.md#optional-windowtitle) 62 | 63 | ## Properties 64 | 65 | ### `Optional` enabled 66 | 67 | • **enabled**? : *undefined | false | true* 68 | 69 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 70 | 71 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 72 | 73 | ___ 74 | 75 | ### `Optional` flat 76 | 77 | • **flat**? : *undefined | false | true* 78 | 79 | Sets whether the button border is raised. [QPushButton: setFlat](https://docs.nodegui.org/docs/api/QPushButton#buttonsetflatisflat) 80 | 81 | ___ 82 | 83 | ### `Optional` icon 84 | 85 | • **icon**? : *QIcon* 86 | 87 | *Inherited from void* 88 | 89 | Sets an icon in the button. [QPushButton: setIcon](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonicon) 90 | 91 | ___ 92 | 93 | ### `Optional` iconSize 94 | 95 | • **iconSize**? : *QSize* 96 | 97 | *Inherited from void* 98 | 99 | Sets an icon size in the button. [QPushButton: setIconSize](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonsize) 100 | 101 | ___ 102 | 103 | ### `Optional` id 104 | 105 | • **id**? : *undefined | string* 106 | 107 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 108 | 109 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 110 | 111 | ___ 112 | 113 | ### `Optional` mouseTracking 114 | 115 | • **mouseTracking**? : *undefined | false | true* 116 | 117 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 118 | 119 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 120 | 121 | ___ 122 | 123 | ### `Optional` style 124 | 125 | • **style**? : *undefined | string* 126 | 127 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 128 | 129 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 130 | 131 | ___ 132 | 133 | ### `Optional` styleSheet 134 | 135 | • **styleSheet**? : *undefined | string* 136 | 137 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 138 | 139 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 140 | 141 | ___ 142 | 143 | ### `Optional` text 144 | 145 | • **text**? : *undefined | string* 146 | 147 | *Inherited from void* 148 | 149 | Sets the given text to the button (Used as an alternative to children). [QPushButton: setText](https://docs.nodegui.org/docs/api/QPushButton#buttonsettexttext) 150 | 151 | ___ 152 | 153 | ### `Optional` visible 154 | 155 | • **visible**? : *undefined | false | true* 156 | 157 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 158 | 159 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 160 | 161 | ___ 162 | 163 | ### `Optional` windowOpacity 164 | 165 | • **windowOpacity**? : *undefined | number* 166 | 167 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 168 | 169 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 170 | 171 | ___ 172 | 173 | ### `Optional` windowTitle 174 | 175 | • **windowTitle**? : *undefined | string* 176 | 177 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 178 | 179 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 180 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/checkboxprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "checkboxprops" 3 | title: "CheckboxProps" 4 | sidebar_label: "CheckboxProps" 5 | --- 6 | 7 | The checkbox widget allows users to create and render native checkboxes in the app. 8 | This widget is based on [NodeGui's QCheckBox](https://docs.nodegui.org/docs/api/generated/classes/qcheckbox) 9 | 10 | ## Usage 11 | 12 | ```html 13 | 16 | 17 | 28 | ``` 29 | 30 | ## What it looks like? 31 | 32 | ![checkbox-demo](/img/vn-checkbox.png) 33 | 34 | ## Props and styling 35 | 36 | You can find all the props `vn-checkbox` accepts listed below. 37 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 38 | and [event handling](/docs/guides/5-handle-events) docs 39 | 40 | ## Hierarchy 41 | 42 | * AbstractButtonProps 43 | 44 | ↳ **CheckboxProps** 45 | 46 | ## Index 47 | 48 | ### Properties 49 | 50 | * [checked](checkboxprops.md#optional-checked) 51 | * [enabled](checkboxprops.md#optional-enabled) 52 | * [icon](checkboxprops.md#optional-icon) 53 | * [iconSize](checkboxprops.md#optional-iconsize) 54 | * [id](checkboxprops.md#optional-id) 55 | * [mouseTracking](checkboxprops.md#optional-mousetracking) 56 | * [style](checkboxprops.md#optional-style) 57 | * [styleSheet](checkboxprops.md#optional-stylesheet) 58 | * [text](checkboxprops.md#optional-text) 59 | * [visible](checkboxprops.md#optional-visible) 60 | * [windowOpacity](checkboxprops.md#optional-windowopacity) 61 | * [windowTitle](checkboxprops.md#optional-windowtitle) 62 | 63 | ## Properties 64 | 65 | ### `Optional` checked 66 | 67 | • **checked**? : *undefined | false | true* 68 | 69 | Sets whether the Checkbox border is raised. [QPushCheckbox: setFlat](https://docs.nodegui.org/docs/api/QPushCheckbox#Checkboxsetflatisflat) 70 | 71 | ___ 72 | 73 | ### `Optional` enabled 74 | 75 | • **enabled**? : *undefined | false | true* 76 | 77 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 78 | 79 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 80 | 81 | ___ 82 | 83 | ### `Optional` icon 84 | 85 | • **icon**? : *QIcon* 86 | 87 | *Inherited from void* 88 | 89 | Sets an icon in the button. [QPushButton: setIcon](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonicon) 90 | 91 | ___ 92 | 93 | ### `Optional` iconSize 94 | 95 | • **iconSize**? : *QSize* 96 | 97 | *Inherited from void* 98 | 99 | Sets an icon size in the button. [QPushButton: setIconSize](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonsize) 100 | 101 | ___ 102 | 103 | ### `Optional` id 104 | 105 | • **id**? : *undefined | string* 106 | 107 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 108 | 109 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 110 | 111 | ___ 112 | 113 | ### `Optional` mouseTracking 114 | 115 | • **mouseTracking**? : *undefined | false | true* 116 | 117 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 118 | 119 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 120 | 121 | ___ 122 | 123 | ### `Optional` style 124 | 125 | • **style**? : *undefined | string* 126 | 127 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 128 | 129 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 130 | 131 | ___ 132 | 133 | ### `Optional` styleSheet 134 | 135 | • **styleSheet**? : *undefined | string* 136 | 137 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 138 | 139 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 140 | 141 | ___ 142 | 143 | ### `Optional` text 144 | 145 | • **text**? : *undefined | string* 146 | 147 | *Inherited from void* 148 | 149 | Sets the given text to the button (Used as an alternative to children). [QPushButton: setText](https://docs.nodegui.org/docs/api/QPushButton#buttonsettexttext) 150 | 151 | ___ 152 | 153 | ### `Optional` visible 154 | 155 | • **visible**? : *undefined | false | true* 156 | 157 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 158 | 159 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 160 | 161 | ___ 162 | 163 | ### `Optional` windowOpacity 164 | 165 | • **windowOpacity**? : *undefined | number* 166 | 167 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 168 | 169 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 170 | 171 | ___ 172 | 173 | ### `Optional` windowTitle 174 | 175 | • **windowTitle**? : *undefined | string* 176 | 177 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 178 | 179 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 180 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/dialprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "dialprops" 3 | title: "DialProps" 4 | sidebar_label: "DialProps" 5 | --- 6 | 7 | The Dial provides ability to add and manipulate native dial slider widgets. It is based on 8 | [NodeGui's QDial](https://docs.nodegui.org/docs/api/generated/classes/qdial/). 9 | 10 | ## Usage 11 | 12 | ```html 13 | 19 | 20 | 32 | ``` 33 | 34 | ## What it looks like? 35 | 36 | ![dial-demo](/img/vn-dial.gif) 37 | 38 | ## Props and styling 39 | 40 | You can find all the props `vn-dial` accepts listed below. 41 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 42 | and [event handling](/docs/guides/5-handle-events) docs 43 | 44 | ## Hierarchy 45 | 46 | * [ViewProps](viewprops.md) 47 | 48 | ↳ **DialProps** 49 | 50 | ## Index 51 | 52 | ### Properties 53 | 54 | * [enabled](dialprops.md#optional-enabled) 55 | * [id](dialprops.md#optional-id) 56 | * [mouseTracking](dialprops.md#optional-mousetracking) 57 | * [notchTarget](dialprops.md#optional-notchtarget) 58 | * [notchesVisible](dialprops.md#optional-notchesvisible) 59 | * [style](dialprops.md#optional-style) 60 | * [styleSheet](dialprops.md#optional-stylesheet) 61 | * [visible](dialprops.md#optional-visible) 62 | * [windowOpacity](dialprops.md#optional-windowopacity) 63 | * [windowTitle](dialprops.md#optional-windowtitle) 64 | * [wrapping](dialprops.md#optional-wrapping) 65 | 66 | ## Properties 67 | 68 | ### `Optional` enabled 69 | 70 | • **enabled**? : *undefined | false | true* 71 | 72 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 73 | 74 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 75 | 76 | ___ 77 | 78 | ### `Optional` id 79 | 80 | • **id**? : *undefined | string* 81 | 82 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 83 | 84 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 85 | 86 | ___ 87 | 88 | ### `Optional` mouseTracking 89 | 90 | • **mouseTracking**? : *undefined | false | true* 91 | 92 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 93 | 94 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 95 | 96 | ___ 97 | 98 | ### `Optional` notchTarget 99 | 100 | • **notchTarget**? : *undefined | number* 101 | 102 | ___ 103 | 104 | ### `Optional` notchesVisible 105 | 106 | • **notchesVisible**? : *undefined | false | true* 107 | 108 | ___ 109 | 110 | ### `Optional` style 111 | 112 | • **style**? : *undefined | string* 113 | 114 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 115 | 116 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 117 | 118 | ___ 119 | 120 | ### `Optional` styleSheet 121 | 122 | • **styleSheet**? : *undefined | string* 123 | 124 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 125 | 126 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 127 | 128 | ___ 129 | 130 | ### `Optional` visible 131 | 132 | • **visible**? : *undefined | false | true* 133 | 134 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 135 | 136 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 137 | 138 | ___ 139 | 140 | ### `Optional` windowOpacity 141 | 142 | • **windowOpacity**? : *undefined | number* 143 | 144 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 145 | 146 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 147 | 148 | ___ 149 | 150 | ### `Optional` windowTitle 151 | 152 | • **windowTitle**? : *undefined | string* 153 | 154 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 155 | 156 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 157 | 158 | ___ 159 | 160 | ### `Optional` wrapping 161 | 162 | • **wrapping**? : *undefined | false | true* 163 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/imageprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "imageprops" 3 | title: "ImageProps" 4 | sidebar_label: "ImageProps" 5 | --- 6 | 7 | The image widget allows users to create and render native image elements in the app. 8 | It is based on [NodeGui's QLabel](https://docs.nodegui.org/docs/api/generated/classes/qlabel) along with [NodeGui's QPixmap](https://docs.nodegui.org/docs/api/generated/classes/qpixmap) 9 | 10 | ## Usage 11 | 12 | ```html 13 | 16 | 17 | 20 | ``` 21 | 22 | ## What it looks like? 23 | 24 | ![image-demo](/img/vn-image.png) 25 | 26 | ## Props and styling 27 | 28 | You can find all the props `vn-image` accepts listed below. 29 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 30 | and [event handling](/docs/guides/5-handle-events) docs 31 | 32 | ## Hierarchy 33 | 34 | ↳ [TextProps](textprops.md) 35 | 36 | ↳ **ImageProps** 37 | 38 | ## Index 39 | 40 | ### Properties 41 | 42 | * [aspectRatioMode](imageprops.md#optional-aspectratiomode) 43 | * [buffer](imageprops.md#optional-buffer) 44 | * [enabled](imageprops.md#optional-enabled) 45 | * [id](imageprops.md#optional-id) 46 | * [mouseTracking](imageprops.md#optional-mousetracking) 47 | * [openExternalLinks](imageprops.md#optional-openexternallinks) 48 | * [scaledContents](imageprops.md#optional-scaledcontents) 49 | * [src](imageprops.md#optional-src) 50 | * [style](imageprops.md#optional-style) 51 | * [styleSheet](imageprops.md#optional-stylesheet) 52 | * [transformationMode](imageprops.md#optional-transformationmode) 53 | * [visible](imageprops.md#optional-visible) 54 | * [windowOpacity](imageprops.md#optional-windowopacity) 55 | * [windowTitle](imageprops.md#optional-windowtitle) 56 | * [wordWrap](imageprops.md#optional-wordwrap) 57 | 58 | ## Properties 59 | 60 | ### `Optional` aspectRatioMode 61 | 62 | • **aspectRatioMode**? : *AspectRatioMode* 63 | 64 | ___ 65 | 66 | ### `Optional` buffer 67 | 68 | • **buffer**? : *Buffer* 69 | 70 | ___ 71 | 72 | ### `Optional` enabled 73 | 74 | • **enabled**? : *undefined | false | true* 75 | 76 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 77 | 78 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 79 | 80 | ___ 81 | 82 | ### `Optional` id 83 | 84 | • **id**? : *undefined | string* 85 | 86 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 87 | 88 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 89 | 90 | ___ 91 | 92 | ### `Optional` mouseTracking 93 | 94 | • **mouseTracking**? : *undefined | false | true* 95 | 96 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 97 | 98 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 99 | 100 | ___ 101 | 102 | ### `Optional` openExternalLinks 103 | 104 | • **openExternalLinks**? : *undefined | false | true* 105 | 106 | *Inherited from [TextProps](textprops.md).[openExternalLinks](textprops.md#optional-openexternallinks)* 107 | 108 | ___ 109 | 110 | ### `Optional` scaledContents 111 | 112 | • **scaledContents**? : *undefined | false | true* 113 | 114 | *Inherited from [TextProps](textprops.md).[scaledContents](textprops.md#optional-scaledcontents)* 115 | 116 | ___ 117 | 118 | ### `Optional` src 119 | 120 | • **src**? : *undefined | string* 121 | 122 | ___ 123 | 124 | ### `Optional` style 125 | 126 | • **style**? : *undefined | string* 127 | 128 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 129 | 130 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 131 | 132 | ___ 133 | 134 | ### `Optional` styleSheet 135 | 136 | • **styleSheet**? : *undefined | string* 137 | 138 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 139 | 140 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 141 | 142 | ___ 143 | 144 | ### `Optional` transformationMode 145 | 146 | • **transformationMode**? : *TransformationMode* 147 | 148 | ___ 149 | 150 | ### `Optional` visible 151 | 152 | • **visible**? : *undefined | false | true* 153 | 154 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 155 | 156 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 157 | 158 | ___ 159 | 160 | ### `Optional` windowOpacity 161 | 162 | • **windowOpacity**? : *undefined | number* 163 | 164 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 165 | 166 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 167 | 168 | ___ 169 | 170 | ### `Optional` windowTitle 171 | 172 | • **windowTitle**? : *undefined | string* 173 | 174 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 175 | 176 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 177 | 178 | ___ 179 | 180 | ### `Optional` wordWrap 181 | 182 | • **wordWrap**? : *undefined | false | true* 183 | 184 | *Inherited from [TextProps](textprops.md).[wordWrap](textprops.md#optional-wordwrap)* 185 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/lineeditprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "lineeditprops" 3 | title: "LineEditProps" 4 | sidebar_label: "LineEditProps" 5 | --- 6 | 7 | The lineedit widget allows users to create and render native input box elements in the app. 8 | It is based on [NodeGui's QLineEdit](https://docs.nodegui.org/docs/api/generated/classes/qlineedit) 9 | 10 | ## Usage 11 | 12 | ```html 13 | 19 | 20 | 33 | ``` 34 | 35 | ## What it looks like? 36 | 37 | ![line-edit-demo](/img/vn-line-edit.gif) 38 | 39 | > You can use the `v-model` directive along with `vn-line-edit` widgets as shown in the example. 40 | Users also have the choice to use events and handle data updates on their own. 41 | 42 | ## Props and styling 43 | 44 | You can find all the props `vn-line-edit` accepts listed below. 45 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 46 | and [event handling](/docs/guides/5-handle-events) docs 47 | 48 | ## Hierarchy 49 | 50 | * [ViewProps](viewprops.md) 51 | 52 | ↳ **LineEditProps** 53 | 54 | ## Index 55 | 56 | ### Properties 57 | 58 | * [echoMode](lineeditprops.md#optional-echomode) 59 | * [enabled](lineeditprops.md#optional-enabled) 60 | * [id](lineeditprops.md#optional-id) 61 | * [mouseTracking](lineeditprops.md#optional-mousetracking) 62 | * [placeholderText](lineeditprops.md#optional-placeholdertext) 63 | * [readOnly](lineeditprops.md#optional-readonly) 64 | * [style](lineeditprops.md#optional-style) 65 | * [styleSheet](lineeditprops.md#optional-stylesheet) 66 | * [text](lineeditprops.md#optional-text) 67 | * [visible](lineeditprops.md#optional-visible) 68 | * [windowOpacity](lineeditprops.md#optional-windowopacity) 69 | * [windowTitle](lineeditprops.md#optional-windowtitle) 70 | 71 | ## Properties 72 | 73 | ### `Optional` echoMode 74 | 75 | • **echoMode**? : *EchoMode* 76 | 77 | ___ 78 | 79 | ### `Optional` enabled 80 | 81 | • **enabled**? : *undefined | false | true* 82 | 83 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 84 | 85 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 86 | 87 | ___ 88 | 89 | ### `Optional` id 90 | 91 | • **id**? : *undefined | string* 92 | 93 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 94 | 95 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 96 | 97 | ___ 98 | 99 | ### `Optional` mouseTracking 100 | 101 | • **mouseTracking**? : *undefined | false | true* 102 | 103 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 104 | 105 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 106 | 107 | ___ 108 | 109 | ### `Optional` placeholderText 110 | 111 | • **placeholderText**? : *undefined | string* 112 | 113 | ___ 114 | 115 | ### `Optional` readOnly 116 | 117 | • **readOnly**? : *undefined | false | true* 118 | 119 | ___ 120 | 121 | ### `Optional` style 122 | 123 | • **style**? : *undefined | string* 124 | 125 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 126 | 127 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 128 | 129 | ___ 130 | 131 | ### `Optional` styleSheet 132 | 133 | • **styleSheet**? : *undefined | string* 134 | 135 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 136 | 137 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 138 | 139 | ___ 140 | 141 | ### `Optional` text 142 | 143 | • **text**? : *undefined | string* 144 | 145 | ___ 146 | 147 | ### `Optional` visible 148 | 149 | • **visible**? : *undefined | false | true* 150 | 151 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 152 | 153 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 154 | 155 | ___ 156 | 157 | ### `Optional` windowOpacity 158 | 159 | • **windowOpacity**? : *undefined | number* 160 | 161 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 162 | 163 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 164 | 165 | ___ 166 | 167 | ### `Optional` windowTitle 168 | 169 | • **windowTitle**? : *undefined | string* 170 | 171 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 172 | 173 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 174 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/progressbarprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "progressbarprops" 3 | title: "ProgressBarProps" 4 | sidebar_label: "ProgressBarProps" 5 | --- 6 | 7 | The ProgressBar component provides ability to add and manipulate native progress bar widgets. 8 | It is based on [NodeGui's QProgressBar](https://docs.nodegui.org/docs/api/generated/classes/qprogressbar/). 9 | 10 | ## Usage 11 | 12 | ```html 13 | 19 | 20 | 36 | ``` 37 | 38 | ## What it looks like? 39 | 40 | ![progress-bar-demo](/img/vn-progress-bar.gif) 41 | 42 | ## Props and styling 43 | 44 | You can find all the props `vn-progress-bar` accepts listed below. 45 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 46 | and [event handling](/docs/guides/5-handle-events) docs 47 | 48 | ## Hierarchy 49 | 50 | * [ViewProps](viewprops.md) 51 | 52 | ↳ **ProgressBarProps** 53 | 54 | ## Index 55 | 56 | ### Properties 57 | 58 | * [enabled](progressbarprops.md#optional-enabled) 59 | * [id](progressbarprops.md#optional-id) 60 | * [maximum](progressbarprops.md#optional-maximum) 61 | * [minimum](progressbarprops.md#optional-minimum) 62 | * [mouseTracking](progressbarprops.md#optional-mousetracking) 63 | * [orientation](progressbarprops.md#optional-orientation) 64 | * [style](progressbarprops.md#optional-style) 65 | * [styleSheet](progressbarprops.md#optional-stylesheet) 66 | * [value](progressbarprops.md#optional-value) 67 | * [visible](progressbarprops.md#optional-visible) 68 | * [windowOpacity](progressbarprops.md#optional-windowopacity) 69 | * [windowTitle](progressbarprops.md#optional-windowtitle) 70 | 71 | ## Properties 72 | 73 | ### `Optional` enabled 74 | 75 | • **enabled**? : *undefined | false | true* 76 | 77 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 78 | 79 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 80 | 81 | ___ 82 | 83 | ### `Optional` id 84 | 85 | • **id**? : *undefined | string* 86 | 87 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 88 | 89 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 90 | 91 | ___ 92 | 93 | ### `Optional` maximum 94 | 95 | • **maximum**? : *undefined | number* 96 | 97 | ___ 98 | 99 | ### `Optional` minimum 100 | 101 | • **minimum**? : *undefined | number* 102 | 103 | ___ 104 | 105 | ### `Optional` mouseTracking 106 | 107 | • **mouseTracking**? : *undefined | false | true* 108 | 109 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 110 | 111 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 112 | 113 | ___ 114 | 115 | ### `Optional` orientation 116 | 117 | • **orientation**? : *Orientation* 118 | 119 | ___ 120 | 121 | ### `Optional` style 122 | 123 | • **style**? : *undefined | string* 124 | 125 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 126 | 127 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 128 | 129 | ___ 130 | 131 | ### `Optional` styleSheet 132 | 133 | • **styleSheet**? : *undefined | string* 134 | 135 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 136 | 137 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 138 | 139 | ___ 140 | 141 | ### `Optional` value 142 | 143 | • **value**? : *undefined | number* 144 | 145 | ___ 146 | 147 | ### `Optional` visible 148 | 149 | • **visible**? : *undefined | false | true* 150 | 151 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 152 | 153 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 154 | 155 | ___ 156 | 157 | ### `Optional` windowOpacity 158 | 159 | • **windowOpacity**? : *undefined | number* 160 | 161 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 162 | 163 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 164 | 165 | ___ 166 | 167 | ### `Optional` windowTitle 168 | 169 | • **windowTitle**? : *undefined | string* 170 | 171 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 172 | 173 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 174 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/radiobuttonprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "radiobuttonprops" 3 | title: "RadioButtonProps" 4 | sidebar_label: "RadioButtonProps" 5 | --- 6 | 7 | The radio button widget allows users to create and render native radio buttons in the app. 8 | It is based on [NodeGui's QRadioButton](https://docs.nodegui.org/docs/api/generated/classes/qradiobutton) 9 | 10 | ## Usage 11 | 12 | ```html 13 | 21 | 22 | 25 | ``` 26 | 27 | ## What it looks like? 28 | 29 | ![radio-button-demo](/img/vn-radio-button.png) 30 | 31 | ## Props and styling 32 | 33 | You can find all the props `vn-radio-button` accepts listed below. 34 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 35 | and [event handling](/docs/guides/5-handle-events) docs 36 | 37 | ## Hierarchy 38 | 39 | * AbstractButtonProps 40 | 41 | ↳ **RadioButtonProps** 42 | 43 | ## Index 44 | 45 | ### Properties 46 | 47 | * [enabled](radiobuttonprops.md#optional-enabled) 48 | * [icon](radiobuttonprops.md#optional-icon) 49 | * [iconSize](radiobuttonprops.md#optional-iconsize) 50 | * [id](radiobuttonprops.md#optional-id) 51 | * [mouseTracking](radiobuttonprops.md#optional-mousetracking) 52 | * [style](radiobuttonprops.md#optional-style) 53 | * [styleSheet](radiobuttonprops.md#optional-stylesheet) 54 | * [text](radiobuttonprops.md#optional-text) 55 | * [visible](radiobuttonprops.md#optional-visible) 56 | * [windowOpacity](radiobuttonprops.md#optional-windowopacity) 57 | * [windowTitle](radiobuttonprops.md#optional-windowtitle) 58 | 59 | ## Properties 60 | 61 | ### `Optional` enabled 62 | 63 | • **enabled**? : *undefined | false | true* 64 | 65 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 66 | 67 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 68 | 69 | ___ 70 | 71 | ### `Optional` icon 72 | 73 | • **icon**? : *QIcon* 74 | 75 | *Inherited from void* 76 | 77 | Sets an icon in the button. [QPushButton: setIcon](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonicon) 78 | 79 | ___ 80 | 81 | ### `Optional` iconSize 82 | 83 | • **iconSize**? : *QSize* 84 | 85 | *Inherited from void* 86 | 87 | Sets an icon size in the button. [QPushButton: setIconSize](https://docs.nodegui.org/docs/api/QPushButton#buttonseticonsize) 88 | 89 | ___ 90 | 91 | ### `Optional` id 92 | 93 | • **id**? : *undefined | string* 94 | 95 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 96 | 97 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 98 | 99 | ___ 100 | 101 | ### `Optional` mouseTracking 102 | 103 | • **mouseTracking**? : *undefined | false | true* 104 | 105 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 106 | 107 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 108 | 109 | ___ 110 | 111 | ### `Optional` style 112 | 113 | • **style**? : *undefined | string* 114 | 115 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 116 | 117 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 118 | 119 | ___ 120 | 121 | ### `Optional` styleSheet 122 | 123 | • **styleSheet**? : *undefined | string* 124 | 125 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 126 | 127 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 128 | 129 | ___ 130 | 131 | ### `Optional` text 132 | 133 | • **text**? : *undefined | string* 134 | 135 | *Inherited from void* 136 | 137 | Sets the given text to the button (Used as an alternative to children). [QPushButton: setText](https://docs.nodegui.org/docs/api/QPushButton#buttonsettexttext) 138 | 139 | ___ 140 | 141 | ### `Optional` visible 142 | 143 | • **visible**? : *undefined | false | true* 144 | 145 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 146 | 147 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 148 | 149 | ___ 150 | 151 | ### `Optional` windowOpacity 152 | 153 | • **windowOpacity**? : *undefined | number* 154 | 155 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 156 | 157 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 158 | 159 | ___ 160 | 161 | ### `Optional` windowTitle 162 | 163 | • **windowTitle**? : *undefined | string* 164 | 165 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 166 | 167 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 168 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/scrollareaprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "scrollareaprops" 3 | title: "ScrollAreaProps" 4 | sidebar_label: "ScrollAreaProps" 5 | --- 6 | 7 | The scroll-area widget allows users to wrap other widgets to enable a scroll 8 | (horizontal and vertical). 9 | It is based on [NodeGui's QScrollArea](https://docs.nodegui.org/docs/api/generated/classes/qscrollarea) 10 | 11 | > Note that the scroll area only allows one child. So, you may have to wrap contents in a vn-view 12 | 13 | ## Usage 14 | 15 | ```html 16 | 34 | 35 | 38 | ``` 39 | 40 | ## What it looks like? 41 | 42 | ![scroll-area-demo](/img/vn-scroll-area.gif) 43 | 44 | ## Props and styling 45 | 46 | You can find all the props `vn-scroll-area` accepts listed below. 47 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 48 | and [event handling](/docs/guides/5-handle-events) docs 49 | 50 | ## Hierarchy 51 | 52 | * [ViewProps](viewprops.md) 53 | 54 | ↳ **ScrollAreaProps** 55 | 56 | ## Index 57 | 58 | ### Properties 59 | 60 | * [enabled](scrollareaprops.md#optional-enabled) 61 | * [id](scrollareaprops.md#optional-id) 62 | * [mouseTracking](scrollareaprops.md#optional-mousetracking) 63 | * [style](scrollareaprops.md#optional-style) 64 | * [styleSheet](scrollareaprops.md#optional-stylesheet) 65 | * [visible](scrollareaprops.md#optional-visible) 66 | * [widgetResizable](scrollareaprops.md#optional-widgetresizable) 67 | * [windowOpacity](scrollareaprops.md#optional-windowopacity) 68 | * [windowTitle](scrollareaprops.md#optional-windowtitle) 69 | 70 | ## Properties 71 | 72 | ### `Optional` enabled 73 | 74 | • **enabled**? : *undefined | false | true* 75 | 76 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 77 | 78 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 79 | 80 | ___ 81 | 82 | ### `Optional` id 83 | 84 | • **id**? : *undefined | string* 85 | 86 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 87 | 88 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 89 | 90 | ___ 91 | 92 | ### `Optional` mouseTracking 93 | 94 | • **mouseTracking**? : *undefined | false | true* 95 | 96 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 97 | 98 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 99 | 100 | ___ 101 | 102 | ### `Optional` style 103 | 104 | • **style**? : *undefined | string* 105 | 106 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 107 | 108 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 109 | 110 | ___ 111 | 112 | ### `Optional` styleSheet 113 | 114 | • **styleSheet**? : *undefined | string* 115 | 116 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 117 | 118 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 119 | 120 | ___ 121 | 122 | ### `Optional` visible 123 | 124 | • **visible**? : *undefined | false | true* 125 | 126 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 127 | 128 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 129 | 130 | ___ 131 | 132 | ### `Optional` widgetResizable 133 | 134 | • **widgetResizable**? : *undefined | false | true* 135 | 136 | ___ 137 | 138 | ### `Optional` windowOpacity 139 | 140 | • **windowOpacity**? : *undefined | number* 141 | 142 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 143 | 144 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 145 | 146 | ___ 147 | 148 | ### `Optional` windowTitle 149 | 150 | • **windowTitle**? : *undefined | string* 151 | 152 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 153 | 154 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 155 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/sliderprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "sliderprops" 3 | title: "SliderProps" 4 | sidebar_label: "SliderProps" 5 | --- 6 | 7 | The slider widget allows users to render native sliders into their apps. 8 | It is based on the [NodeGui's QSlider](https://docs.nodegui.org/docs/api/generated/classes/qslider) 9 | 10 | ## Usage 11 | 12 | ```html 13 | 19 | 20 | 33 | ``` 34 | 35 | ## What it looks like? 36 | 37 | ![vn-slider-demo](/img/vn-slider.gif) 38 | 39 | ## Props and styling 40 | 41 | You can find all the props `vn-slider` accepts listed below. 42 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 43 | and [event handling](/docs/guides/5-handle-events) docs 44 | 45 | ## Hierarchy 46 | 47 | * [ViewProps](viewprops.md) 48 | 49 | ↳ **SliderProps** 50 | 51 | ## Index 52 | 53 | ### Properties 54 | 55 | * [enabled](sliderprops.md#optional-enabled) 56 | * [hasTracking](sliderprops.md#optional-hastracking) 57 | * [id](sliderprops.md#optional-id) 58 | * [invertedAppearance](sliderprops.md#optional-invertedappearance) 59 | * [invertedControls](sliderprops.md#optional-invertedcontrols) 60 | * [isSliderDown](sliderprops.md#optional-issliderdown) 61 | * [maximum](sliderprops.md#optional-maximum) 62 | * [minimum](sliderprops.md#optional-minimum) 63 | * [mouseTracking](sliderprops.md#optional-mousetracking) 64 | * [orientation](sliderprops.md#optional-orientation) 65 | * [pageStep](sliderprops.md#optional-pagestep) 66 | * [singleStep](sliderprops.md#optional-singlestep) 67 | * [sliderPosition](sliderprops.md#optional-sliderposition) 68 | * [style](sliderprops.md#optional-style) 69 | * [styleSheet](sliderprops.md#optional-stylesheet) 70 | * [tickInterval](sliderprops.md#optional-tickinterval) 71 | * [tickPosition](sliderprops.md#optional-tickposition) 72 | * [value](sliderprops.md#optional-value) 73 | * [visible](sliderprops.md#optional-visible) 74 | * [windowOpacity](sliderprops.md#optional-windowopacity) 75 | * [windowTitle](sliderprops.md#optional-windowtitle) 76 | 77 | ## Properties 78 | 79 | ### `Optional` enabled 80 | 81 | • **enabled**? : *undefined | false | true* 82 | 83 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 84 | 85 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 86 | 87 | ___ 88 | 89 | ### `Optional` hasTracking 90 | 91 | • **hasTracking**? : *undefined | false | true* 92 | 93 | ___ 94 | 95 | ### `Optional` id 96 | 97 | • **id**? : *undefined | string* 98 | 99 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 100 | 101 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 102 | 103 | ___ 104 | 105 | ### `Optional` invertedAppearance 106 | 107 | • **invertedAppearance**? : *undefined | false | true* 108 | 109 | ___ 110 | 111 | ### `Optional` invertedControls 112 | 113 | • **invertedControls**? : *undefined | false | true* 114 | 115 | ___ 116 | 117 | ### `Optional` isSliderDown 118 | 119 | • **isSliderDown**? : *undefined | false | true* 120 | 121 | ___ 122 | 123 | ### `Optional` maximum 124 | 125 | • **maximum**? : *undefined | number* 126 | 127 | ___ 128 | 129 | ### `Optional` minimum 130 | 131 | • **minimum**? : *undefined | number* 132 | 133 | ___ 134 | 135 | ### `Optional` mouseTracking 136 | 137 | • **mouseTracking**? : *undefined | false | true* 138 | 139 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 140 | 141 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 142 | 143 | ___ 144 | 145 | ### `Optional` orientation 146 | 147 | • **orientation**? : *Orientation* 148 | 149 | ___ 150 | 151 | ### `Optional` pageStep 152 | 153 | • **pageStep**? : *undefined | number* 154 | 155 | ___ 156 | 157 | ### `Optional` singleStep 158 | 159 | • **singleStep**? : *undefined | number* 160 | 161 | ___ 162 | 163 | ### `Optional` sliderPosition 164 | 165 | • **sliderPosition**? : *undefined | number* 166 | 167 | ___ 168 | 169 | ### `Optional` style 170 | 171 | • **style**? : *undefined | string* 172 | 173 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 174 | 175 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 176 | 177 | ___ 178 | 179 | ### `Optional` styleSheet 180 | 181 | • **styleSheet**? : *undefined | string* 182 | 183 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 184 | 185 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 186 | 187 | ___ 188 | 189 | ### `Optional` tickInterval 190 | 191 | • **tickInterval**? : *undefined | number* 192 | 193 | ___ 194 | 195 | ### `Optional` tickPosition 196 | 197 | • **tickPosition**? : *TickPosition* 198 | 199 | ___ 200 | 201 | ### `Optional` value 202 | 203 | • **value**? : *undefined | number* 204 | 205 | ___ 206 | 207 | ### `Optional` visible 208 | 209 | • **visible**? : *undefined | false | true* 210 | 211 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 212 | 213 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 214 | 215 | ___ 216 | 217 | ### `Optional` windowOpacity 218 | 219 | • **windowOpacity**? : *undefined | number* 220 | 221 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 222 | 223 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 224 | 225 | ___ 226 | 227 | ### `Optional` windowTitle 228 | 229 | • **windowTitle**? : *undefined | string* 230 | 231 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 232 | 233 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 234 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/spinboxprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "spinboxprops" 3 | title: "SpinBoxProps" 4 | sidebar_label: "SpinBoxProps" 5 | --- 6 | 7 | The SpinBox component provides the ability to add and manipulate native spin box widgets. 8 | It is based on [NodeGui's QSpinBox](https://docs.nodegui.org/docs/api/generated/classes/qspinbox/). 9 | 10 | ## Usage 11 | 12 | ```html 13 | 20 | 21 | 31 | ``` 32 | 33 | ## What it looks like? 34 | 35 | ![spinbox-demo](/img/vn-spinbox.gif) 36 | 37 | ## Props and styling 38 | 39 | You can find all the props `vn-spinbox` accepts listed below. 40 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 41 | and [event handling](/docs/guides/5-handle-events) docs 42 | 43 | ## Hierarchy 44 | 45 | * [ViewProps](viewprops.md) 46 | 47 | ↳ **SpinBoxProps** 48 | 49 | ## Index 50 | 51 | ### Properties 52 | 53 | * [enabled](spinboxprops.md#optional-enabled) 54 | * [id](spinboxprops.md#optional-id) 55 | * [mouseTracking](spinboxprops.md#optional-mousetracking) 56 | * [prefix](spinboxprops.md#optional-prefix) 57 | * [range](spinboxprops.md#optional-range) 58 | * [singleStep](spinboxprops.md#optional-singlestep) 59 | * [style](spinboxprops.md#optional-style) 60 | * [styleSheet](spinboxprops.md#optional-stylesheet) 61 | * [suffix](spinboxprops.md#optional-suffix) 62 | * [value](spinboxprops.md#optional-value) 63 | * [visible](spinboxprops.md#optional-visible) 64 | * [windowOpacity](spinboxprops.md#optional-windowopacity) 65 | * [windowTitle](spinboxprops.md#optional-windowtitle) 66 | 67 | ## Properties 68 | 69 | ### `Optional` enabled 70 | 71 | • **enabled**? : *undefined | false | true* 72 | 73 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 74 | 75 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 76 | 77 | ___ 78 | 79 | ### `Optional` id 80 | 81 | • **id**? : *undefined | string* 82 | 83 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 84 | 85 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 86 | 87 | ___ 88 | 89 | ### `Optional` mouseTracking 90 | 91 | • **mouseTracking**? : *undefined | false | true* 92 | 93 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 94 | 95 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 96 | 97 | ___ 98 | 99 | ### `Optional` prefix 100 | 101 | • **prefix**? : *undefined | string* 102 | 103 | ___ 104 | 105 | ### `Optional` range 106 | 107 | • **range**? : *[Range](../globals.md#range)* 108 | 109 | ___ 110 | 111 | ### `Optional` singleStep 112 | 113 | • **singleStep**? : *undefined | number* 114 | 115 | ___ 116 | 117 | ### `Optional` style 118 | 119 | • **style**? : *undefined | string* 120 | 121 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 122 | 123 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 124 | 125 | ___ 126 | 127 | ### `Optional` styleSheet 128 | 129 | • **styleSheet**? : *undefined | string* 130 | 131 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 132 | 133 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 134 | 135 | ___ 136 | 137 | ### `Optional` suffix 138 | 139 | • **suffix**? : *undefined | string* 140 | 141 | ___ 142 | 143 | ### `Optional` value 144 | 145 | • **value**? : *undefined | number* 146 | 147 | ___ 148 | 149 | ### `Optional` visible 150 | 151 | • **visible**? : *undefined | false | true* 152 | 153 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 154 | 155 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 156 | 157 | ___ 158 | 159 | ### `Optional` windowOpacity 160 | 161 | • **windowOpacity**? : *undefined | number* 162 | 163 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 164 | 165 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 166 | 167 | ___ 168 | 169 | ### `Optional` windowTitle 170 | 171 | • **windowTitle**? : *undefined | string* 172 | 173 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 174 | 175 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 176 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/textprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "textprops" 3 | title: "TextProps" 4 | sidebar_label: "TextProps" 5 | --- 6 | 7 | The text widget allows users to create and render native text components in the app. 8 | It is based on [NodeGui's QLabel](https://docs.nodegui.org/docs/api/generated/classes/qlabel) 9 | 10 | > You can also use the QLabel widget to render rich-text HTML (like in emails) 11 | 12 | ## Usage 13 | 14 | ```html 15 | 18 | 19 | 22 | ``` 23 | ## What it looks like? 24 | 25 | ![text-demo](/img/vn-text.png) 26 | 27 | ## Props and styling 28 | 29 | You can find all the props `vn-text` accepts listed below. 30 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 31 | and [event handling](/docs/guides/5-handle-events) docs 32 | 33 | ## Hierarchy 34 | 35 | * [ViewProps](viewprops.md) 36 | 37 | ↳ **TextProps** 38 | 39 | ↳ [ImageProps](imageprops.md) 40 | 41 | ↳ [AnimatedImageProps](animatedimageprops.md) 42 | 43 | ## Index 44 | 45 | ### Properties 46 | 47 | * [enabled](textprops.md#optional-enabled) 48 | * [id](textprops.md#optional-id) 49 | * [mouseTracking](textprops.md#optional-mousetracking) 50 | * [openExternalLinks](textprops.md#optional-openexternallinks) 51 | * [scaledContents](textprops.md#optional-scaledcontents) 52 | * [style](textprops.md#optional-style) 53 | * [styleSheet](textprops.md#optional-stylesheet) 54 | * [visible](textprops.md#optional-visible) 55 | * [windowOpacity](textprops.md#optional-windowopacity) 56 | * [windowTitle](textprops.md#optional-windowtitle) 57 | * [wordWrap](textprops.md#optional-wordwrap) 58 | 59 | ## Properties 60 | 61 | ### `Optional` enabled 62 | 63 | • **enabled**? : *undefined | false | true* 64 | 65 | *Inherited from [ViewProps](viewprops.md).[enabled](viewprops.md#optional-enabled)* 66 | 67 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 68 | 69 | ___ 70 | 71 | ### `Optional` id 72 | 73 | • **id**? : *undefined | string* 74 | 75 | *Inherited from [ViewProps](viewprops.md).[id](viewprops.md#optional-id)* 76 | 77 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 78 | 79 | ___ 80 | 81 | ### `Optional` mouseTracking 82 | 83 | • **mouseTracking**? : *undefined | false | true* 84 | 85 | *Inherited from [ViewProps](viewprops.md).[mouseTracking](viewprops.md#optional-mousetracking)* 86 | 87 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 88 | 89 | ___ 90 | 91 | ### `Optional` openExternalLinks 92 | 93 | • **openExternalLinks**? : *undefined | false | true* 94 | 95 | ___ 96 | 97 | ### `Optional` scaledContents 98 | 99 | • **scaledContents**? : *undefined | false | true* 100 | 101 | ___ 102 | 103 | ### `Optional` style 104 | 105 | • **style**? : *undefined | string* 106 | 107 | *Inherited from [ViewProps](viewprops.md).[style](viewprops.md#optional-style)* 108 | 109 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 110 | 111 | ___ 112 | 113 | ### `Optional` styleSheet 114 | 115 | • **styleSheet**? : *undefined | string* 116 | 117 | *Inherited from [ViewProps](viewprops.md).[styleSheet](viewprops.md#optional-stylesheet)* 118 | 119 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 120 | 121 | ___ 122 | 123 | ### `Optional` visible 124 | 125 | • **visible**? : *undefined | false | true* 126 | 127 | *Inherited from [ViewProps](viewprops.md).[visible](viewprops.md#optional-visible)* 128 | 129 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 130 | 131 | ___ 132 | 133 | ### `Optional` windowOpacity 134 | 135 | • **windowOpacity**? : *undefined | number* 136 | 137 | *Inherited from [ViewProps](viewprops.md).[windowOpacity](viewprops.md#optional-windowopacity)* 138 | 139 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 140 | 141 | ___ 142 | 143 | ### `Optional` windowTitle 144 | 145 | • **windowTitle**? : *undefined | string* 146 | 147 | *Inherited from [ViewProps](viewprops.md).[windowTitle](viewprops.md#optional-windowtitle)* 148 | 149 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 150 | 151 | ___ 152 | 153 | ### `Optional` wordWrap 154 | 155 | • **wordWrap**? : *undefined | false | true* 156 | -------------------------------------------------------------------------------- /website/docs/api/interfaces/viewprops.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: "viewprops" 3 | title: "ViewProps" 4 | sidebar_label: "ViewProps" 5 | --- 6 | 7 | The view widget can be used to structure other widgets within it. 8 | It is mainly used for creating layouts for other widgets. 9 | Think of this as analogous to the `div` in the DOM. The `vn-view` widget is based on [NodeGui's QWidget](https://docs.nodegui.org/docs/api/generated/classes/qwidget) 10 | 11 | ## Usage 12 | 13 | ```html 14 | 23 | 24 | 27 | ``` 28 | 29 | ## What it looks like? 30 | 31 | ![view-demo](/img/vn-view.png) 32 | 33 | ## Props and styling 34 | 35 | You can find all the props `vn-view` accepts listed below. 36 | Apart from this, you can take a look at the [styling](/docs/guides/3-styling) 37 | and [event handling](/docs/guides/5-handle-events) docs 38 | 39 | ## Hierarchy 40 | 41 | * **ViewProps** 42 | 43 | ↳ [TextProps](textprops.md) 44 | 45 | ↳ [LineEditProps](lineeditprops.md) 46 | 47 | ↳ [ScrollAreaProps](scrollareaprops.md) 48 | 49 | ↳ [SliderProps](sliderprops.md) 50 | 51 | ↳ [SpinBoxProps](spinboxprops.md) 52 | 53 | ↳ [ProgressBarProps](progressbarprops.md) 54 | 55 | ↳ [ComboBoxProps](comboboxprops.md) 56 | 57 | ↳ [DialProps](dialprops.md) 58 | 59 | ## Index 60 | 61 | ### Properties 62 | 63 | * [enabled](viewprops.md#optional-enabled) 64 | * [id](viewprops.md#optional-id) 65 | * [mouseTracking](viewprops.md#optional-mousetracking) 66 | * [style](viewprops.md#optional-style) 67 | * [styleSheet](viewprops.md#optional-stylesheet) 68 | * [visible](viewprops.md#optional-visible) 69 | * [windowOpacity](viewprops.md#optional-windowopacity) 70 | * [windowTitle](viewprops.md#optional-windowtitle) 71 | 72 | ## Properties 73 | 74 | ### `Optional` enabled 75 | 76 | • **enabled**? : *undefined | false | true* 77 | 78 | Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled) 79 | 80 | ___ 81 | 82 | ### `Optional` id 83 | 84 | • **id**? : *undefined | string* 85 | 86 | Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname) 87 | 88 | ___ 89 | 90 | ### `Optional` mouseTracking 91 | 92 | • **mouseTracking**? : *undefined | false | true* 93 | 94 | Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked) 95 | 96 | ___ 97 | 98 | ### `Optional` style 99 | 100 | • **style**? : *undefined | string* 101 | 102 | Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle) 103 | 104 | ___ 105 | 106 | ### `Optional` styleSheet 107 | 108 | • **styleSheet**? : *undefined | string* 109 | 110 | Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet) 111 | 112 | ___ 113 | 114 | ### `Optional` visible 115 | 116 | • **visible**? : *undefined | false | true* 117 | 118 | Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow) 119 | 120 | ___ 121 | 122 | ### `Optional` windowOpacity 123 | 124 | • **windowOpacity**? : *undefined | number* 125 | 126 | This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity) 127 | 128 | ___ 129 | 130 | ### `Optional` windowTitle 131 | 132 | • **windowTitle**? : *undefined | string* 133 | 134 | Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle) 135 | -------------------------------------------------------------------------------- /website/docs/guides/1-getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting started 3 | sidebar_label: Getting started 4 | --- 5 | 6 | Vue NodeGui enables you to create desktop applications with Vue. You could see it 7 | as a lightly modified variant of the Node.js runtime that is focused on desktop applications 8 | instead of web servers. 9 | 10 | Vue NodeGui is a Vue renderer for [NodeGui](https://nodegui.org), which is an efficient JavaScript binding to a cross platform graphical user interface 11 | (GUI) library `Qt`. Qt is one of the most mature and efficient library for building desktop applications. 12 | This enabled Vue NodeGui to be extremely memory and CPU efficient as compared to other popular Javascript Desktop GUI solutions. 13 | 14 | ## Developer environment 15 | 16 | To turn your operating system into an environment capable of building desktop apps with Vue NodeGui, you would need Node.js, npm, a code editor of your choice, and a rudimentary understanding of your operating system's command line client. 17 | 18 | Along with these, there are a few operating system dependent instructions that are listed below. 19 | 20 | ### Setting up on macOS 21 | 22 | **Requirements:** 23 | 24 | - Vue NodeGui supports macOS 10.10 (Yosemite) and up. NodeGui currently only supports 64bit OS. 25 | - CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/) 26 | - Make, GCC v7 27 | - Currently supported Node.Js versions are 12.x and up. 28 | 29 | We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend `nvm`: https://github.com/nvm-sh/nvm 30 | 31 | Confirm that both `node` and `npm` are available by running: 32 | 33 | ```sh 34 | # This command should print the version of Node.js 35 | node -v 36 | 37 | # This command should print the version of npm 38 | npm -v 39 | ``` 40 | 41 | If both commands printed a version number, you are all set! Before you get 42 | started, you might want to install a [code editor](#a-good-editor) suited 43 | for JavaScript development. 44 | 45 | ### Setting up on Windows 46 | 47 | > Vue NodeGui supports Windows 7 and later versions – attempting to develop NodeGui 48 | > applications on earlier versions of Windows might not work. NodeGui currently only supports 64bit OS. 49 | 50 | **Requirements:** 51 | 52 | - Visual studio 2017 and up. 53 | - CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/) 54 | - Currently supported Node.Js versions are 12.x and up. 55 | 56 | We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend `nvm`: https://github.com/nvm-sh/nvm 57 | 58 | We also strongly recommend Powershell as preferred terminal in Windows. 59 | 60 | Confirm that both `node` and `npm` are available by running: 61 | 62 | ```powershell 63 | # This command should print the version of Node.js 64 | node -v 65 | 66 | # This command should print the version of npm 67 | npm -v 68 | ``` 69 | 70 | If both commands printed a version number, you are all set! Before you get 71 | started, you might want to install a [code editor](#a-good-editor) suited 72 | for JavaScript development. 73 | 74 | ### Setting up on Linux 75 | 76 | > Vue NodeGui currently supports Ubuntu 16.04 and Debian 10 and up. Although other Linux distributions can also be easily supported. NodeGui currently only supports 64bit OS. 77 | 78 | **Requirements:** 79 | 80 | - Make, GCC v7 81 | - CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/) 82 | - Currently supported Node.Js versions are 12.x and up. 83 | - On Ubuntu and Ubuntu-based distros it is advisable to run `sudo apt-get update`, followed by `sudo apt-get install pkg-config build-essential` 84 | 85 | We strongly suggest you use some kind of version manager for Node.Js. This would allow you to switch to any version of nodejs quite easily. We recommend `nvm`: https://github.com/nvm-sh/nvm 86 | 87 | Confirm that both `node` and `npm` are available by running: 88 | 89 | ```sh 90 | # This command should print the version of Node.js 91 | node -v 92 | 93 | # This command should print the version of npm 94 | npm -v 95 | ``` 96 | 97 | If both commands printed a version number, you are all set! Before you get 98 | started, you might want to install a [code editor](#a-good-editor) suited 99 | for JavaScript development. 100 | 101 | ### A Good Editor 102 | 103 | We might suggest two free popular editors: 104 | GitHub's [Atom][atom] and Microsoft's [Visual Studio Code][code]. Both of 105 | them have excellent JavaScript support. 106 | 107 | If you are one of the many developers with a strong preference, know that 108 | virtually all code editors and IDEs these days support JavaScript. 109 | 110 | [code]: https://code.visualstudio.com/ 111 | [atom]: https://atom.io/ -------------------------------------------------------------------------------- /website/docs/guides/2-tutorial.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_label: Learn the Basics 3 | title: Learn the Basics 4 | --- 5 | 6 | Vue NodeGui uses native components instead of web based components as building blocks. So to understand the basic structure of a Vue NodeGui app, you need to be familiar with Javascript or Typescript and Vue. This tutorial is aimed at everyone who has some web experience with web development. 7 | 8 | ## Vue NodeGui development in a nutshell 9 | 10 | As far as development is concerned, an Vue NodeGui application is essentially a Node.js application. The starting point is a `package.json` that is identical to that of a Node.js module. A most basic Vue NodeGui app would have the following 11 | folder structure: 12 | 13 | ```text 14 | your-app/ 15 | ├── package.json 16 | ├── main.js 17 | ├── App.vue 18 | ``` 19 | 20 | All APIs and features found in NodeGui are accessible through the `@nodegui/vue-nodegui` and `@nodegui/nodegui` modules, which can be required like any other Node.js module. Additionally you have access to all Node.js apis and node modules. 21 | 22 | ```javascript 23 | require("@nodegui/vue-nodegui"); 24 | ``` 25 | 26 | The `@nodegui/vue-nodegui` module exports widgets and features in namespaces. As an example, a window can be created 27 | using the `Window` component. A simple `main.js` file might open a window: 28 | 29 | ```javascript 30 | import { createApp } from '@nodegui/vue-nodegui'; 31 | import App from './App.vue'; 32 | 33 | createApp(App).mount(); 34 | ``` 35 | 36 | Add the following code to your `App.vue` file: 37 | 38 | ```html 39 | 41 | 42 | 45 | 46 | ``` 47 | 48 | The `main.js` should create windows and handle all the system events your 49 | application might encounter. 50 | 51 | ## What's going on here? 52 | 53 | Firstly, we are running a Node.js app and not a browser based app. This means we do not have access to any browser APIs. The window you see is actually a native widget created by Qt. Window component is essentially a lightweight javascript wrapper over NodeGui's QMainWindow, which internally is Qt's QMainWindow. This component is automatically created by the `createApp` function. In future releases, you will be able to add props to this component too. This is very light weight as compared to browser based solutions and hence is more closer to the Operating system. 54 | 55 | ## Trying out the starter project 56 | 57 | Clone and run the code by using the 58 | [`nodegui/vue-nodegui-starter`][quick-start] repository. 59 | 60 | **Note**: Running this requires [Git](https://git-scm.com) and [npm](https://www.npmjs.com/). 61 | 62 | ```sh 63 | # Clone the repository 64 | $ git clone https://github.com/nodegui/vue-nodegui-starter 65 | 66 | # Go into the repository 67 | $ cd vue-nodegui-starter 68 | 69 | # Install dependencies 70 | $ npm install 71 | 72 | # Run the dev server 73 | $ npm run dev 74 | ``` 75 | 76 | [quick-start]: https://github.com/nodegui/vue-nodegui-starter 77 | 78 | ## What else other than a basic window? 79 | 80 | Vue NodeGui has support for basic components like View (similar to div), CheckBox, PushButton and many more. 81 | You can take a look at the list of native widgets that Vue NodeGui currently supports here : [Native widgets in Vue NodeGui](/docs/api/interfaces/viewprops). 82 | With time more native components and APIs will be added to Vue NodeGui. Apart from modules in Vue NodeGui, you also have access to the entire node modules ecosystem. Thus, any node module that you can use with Node.js, can be used with Vue NodeGui. This makes it extremely powerful. 83 | 84 | Fine, I want something more custom and beautiful than just native looking widgets. What do I do? 85 | 86 | To make things more beautiful, you will have to [learn about styling](styling). Lets take a look at that next. -------------------------------------------------------------------------------- /website/docs/guides/4-layout.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: 4-layout 3 | sidebar_label: Layout 4 | title: Layout 5 | --- 6 | 7 | Vue NodeGui uses a layout system to automatically arrange child components within a component to ensure that they make good use of the available space. 8 | 9 | ## Fixed Dimensions 10 | 11 | A component's height and width determine its size on the screen. The simplest way to set the dimensions of a component is by adding a fixed width and height to style. Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions. 12 | 13 | ```html 14 | 15 | 16 | 21 | 22 | 35 | ``` 36 | 37 | ## Dynamic Layouts 38 | 39 | Dynamic layouts automatically position and resize components when the amount of space available for them changes, ensuring that they are consistently arranged and that the user interface as a whole remains usable. 40 | 41 | Vue NodeGui currently supports creating layouts using FlexLayout. 42 | 43 | ## FlexLayout 44 | 45 | FlexLayout allows the children to expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings. 46 | 47 | > A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible. 48 | 49 | Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flex-direction, align-items,and justify-content to achieve the right layout. 50 | 51 | ### Example 52 | 53 | Lets say you want to build a UI that has a parent view which has two child components. One a label with text Hello and another a view with background color white. Now you want the label to occupy 1/4 of the available height while the white colored child view to occupy the remaining 3/4 height. 54 | 55 | ![simple flex layout](/img/flex-simple.png) 56 | 57 | The code for that would look something like below: 58 | 59 | ```html 60 | 61 | 62 | 68 | 69 | 91 | ``` 92 | 93 | To know more on how FlexBox layout works in depth you can visit: https://facebook.github.io/react-native/docs/0.60/flexbox. 94 | NodeGui uses the same library that React Native uses underneath for FlexBox ([Yoga](https://github.com/facebook/yoga)). 95 | 96 | > You can specify layout properties via inline styles also. 97 | 98 | ## Conclusion 99 | 100 | The primary layout in Vue NodeGui is the Flexbox layout. Flexbox layout can be controlled via stylesheet just as in web. So both paint and layout properties are available at the same place. 101 | -------------------------------------------------------------------------------- /website/docs/guides/5-handle-events.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: 5-handle-events 3 | sidebar_label: Handle Events 4 | title: Events in Vue Nodegui 5 | --- 6 | 7 | Vue NodeGui allows you to listen to various events that might originate from the underlying Qt widgets. These events can either be a simple button click or a text change on a lineedit. 8 | 9 | In order to do this we need to attach an event listener to the respective widget. 10 | 11 | Technically, the event listener is a NodeJs [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) instance that listens to events from the underlying Qt widget. The native Qt widget would send all the events to the event emitter in Vue NodeGui world and the user can essentially subscribe to it. 12 | 13 | Lets see an example to see how this looks in practice. 14 | 15 | ## Event handling 16 | 17 | The following example demonstrates how to add a clicked event listener to a button widget. 18 | 19 | ![button press](/img/button-press.gif) 20 | 21 | The code for implementing the same if as shown below 22 | 23 | ```html 24 | 25 | 26 | 29 | 30 | 44 | ``` 45 | 46 | As you can see, we are using both the `clicked` and the `pressed` event handlers with the button. These are both supported by Qt and the difference between them is only when they are called. 47 | 48 | - The `pressed` event is triggered as soon as the button is pressed. It does not wait for the user to release the mouse button and complete the click. 49 | - The `clicked` event is triggered when the user releases the button after pressing on it. 50 | 51 | You can alternatively choose between the two based on your use-case. 52 | 53 | --- 54 | 55 | Internally, Qt widgets in nodegui has two types of events.: 56 | 57 | - Signals: In short these are basically different for different widgets. So a button maybe have `clicked`, `pressed` signal, while a linedit may have `textChanged` signal. 58 | - QEvents: These are common set of events for all the widgets/qobjects in NodeGui world. These are also helpful at times but typically you would end up using signals more than these common events. 59 | 60 | In Vue NodeGui you can listen to both Signals and QEvents using the same `@` or `v-on:` prop. 61 | 62 | ### How do I know which events are supported? 63 | 64 | In order to find all the supported events for a widget you can take a look at all signals for the widgets: 65 | 66 | - [https://docs.nodegui.org/docs/api/generated/globals/#interfaces](https://docs.nodegui.org/docs/api/generated/globals/#interfaces) 67 | - [https://docs.nodegui.org/docs/api/generated/globals/#type-aliases](https://docs.nodegui.org/docs/api/generated/globals/#type-aliases) 68 | 69 | > Note that all widgets from nodegui have not been implemented yet. once they are created, their respective events will work right out of the box. You could help us accelerate the process of creating more widgets by contributing to vue-nodegui! 70 | -------------------------------------------------------------------------------- /website/docs/guides/6-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: 6-images 3 | sidebar_label: Images 4 | title: Images 5 | --- 6 | 7 | Images are very important for making your app more interesting. 8 | 9 | In Vue NodeGui, `` is used to display an image. 10 | 11 | Internally Image is a QLabel. QLabel is typically used for displaying text, but it can also display an image. 12 | What this means is that you can pass all the props you pass to a `` to `` also. 13 | 14 | ### Example 15 | 16 | Let's take a simple example of displaying your logo in the app: 17 | 18 | ![simple image example](/img/image-simple.png) 19 | 20 | The code for this would look as below: 21 | 22 | ```html 23 | 26 | 27 | 30 | ``` 31 | 32 | ### Animated images 33 | 34 | For animated images, the widget `vn-animated-image` is still under construction. 35 | 36 | ### Loading an image from a buffer 37 | 38 | Lets say we want to load an image from a buffer. In this case we can't use the `src` prop since its only reserved for local file system path or urls. 39 | 40 | In this case use the `buffer` prop. 41 | -------------------------------------------------------------------------------- /website/docs/guides/7-networking.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: 7-networking 3 | sidebar_label: Networking 4 | title: Networking 5 | --- 6 | 7 | Many apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server. 8 | 9 | Remember that NodeGui apps do not run in a browser and hence do not have access to browser apis. NodeGui app is essentially a Node.js app. 10 | 11 | And in a typical Node.js application you would use a third party library like [axios](https://github.com/axios/axios), [node-fetch](https://github.com/node-fetch/node-fetch) or [frisbee](https://github.com/niftylettuce/frisbee) for achieving this functionality. 12 | 13 | ### Using Node Fetch 14 | 15 | [Node Fetch](https://github.com/node-fetch/node-fetch) is a light-weight module that brings window.fetch to Node.js. 16 | 17 | An example usage would look like this: 18 | 19 | ```js 20 | const fetch = require("node-fetch"); 21 | async function getData() { 22 | try { 23 | let response = await fetch("https://somewebsite.com/some.json"); 24 | let responseJson = await response.json(); 25 | return responseJson.somecontent; 26 | } catch (error) { 27 | console.error(error); 28 | } 29 | } 30 | ``` 31 | 32 | Take a look at the [Node Fetch docs](https://github.com/node-fetch/node-fetch) for a full list of properties. 33 | -------------------------------------------------------------------------------- /website/docusaurus.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'Vue NodeGui', 3 | tagline: 'Build performant, native, cross platform desktop apps with Vue 🚀', 4 | url: 'https://vue.nodegui.org', 5 | baseUrl: '/', 6 | onBrokenLinks: "ignore", 7 | favicon: 'img/favicon.ico', 8 | organizationName: 'nodegui', // Usually your GitHub org/user name. 9 | projectName: 'vue-nodegui', // Usually your repo name. 10 | themeConfig: { 11 | navbar: { 12 | title: 'Vue NodeGui', 13 | logo: { 14 | alt: 'Vue NodeGui Logo', 15 | src: 'img/logo-circle.png', 16 | }, 17 | items: [ 18 | { 19 | to: 'docs/guides/1-getting-started', 20 | label: 'Docs', 21 | activeBasePath: 'docs/guides', 22 | position: 'right', 23 | }, 24 | { 25 | to: 'docs/api/interfaces/buttonprops', 26 | label: 'API', 27 | activeBasePath: 'docs/api', 28 | position: 'right', 29 | }, 30 | {to: 'blog', label: 'Blog', position: 'right'}, 31 | { 32 | href: 'https://github.com/nodegui/vue-nodegui', 33 | position: 'right', 34 | className: 'header-github-link', 35 | 'aria-label': 'GitHub repository', 36 | }, 37 | ], 38 | }, 39 | footer: { 40 | style: 'dark', 41 | links: [ 42 | { 43 | title: 'Docs', 44 | items: [ 45 | { 46 | label: 'Get Started', 47 | to: '/docs/guides/1-getting-started', 48 | }, 49 | { 50 | label: 'API guide', 51 | to: 'docs/api/interfaces/buttonprops', 52 | }, 53 | ], 54 | }, 55 | { 56 | title: 'Community', 57 | items: [ 58 | { 59 | label: 'Spectrum', 60 | href: 'https://spectrum.chat/nodegui', 61 | }, 62 | { 63 | label: 'Medium', 64 | href: 'https://medium.com/nodegui', 65 | }, 66 | { 67 | label: 'Twitter', 68 | href: 'https://twitter.com/node_gui', 69 | }, 70 | ], 71 | }, 72 | { 73 | title: 'More', 74 | items: [ 75 | { 76 | label: 'Blog', 77 | to: 'blog', 78 | }, 79 | { 80 | label: 'GitHub', 81 | href: 'https://github.com/nodegui/vue-nodegui', 82 | }, 83 | ], 84 | }, 85 | ], 86 | copyright: `Copyright © ${new Date().getFullYear()} Shubham Zanwar.`, 87 | }, 88 | googleAnalytics: { 89 | trackingID: "UA-177685902-1" 90 | }, 91 | algolia: { 92 | apiKey: '4ecc8a4a6fecbd2b21ab6942a9e0d45f', 93 | indexName: 'vue-nodegui', 94 | algoliaOptions: {}, // Optional, if provided by Algolia 95 | }, 96 | }, 97 | presets: [ 98 | [ 99 | '@docusaurus/preset-classic', 100 | { 101 | docs: { 102 | sidebarPath: require.resolve('./sidebars.js'), 103 | }, 104 | blog: { 105 | showReadingTime: true, 106 | }, 107 | theme: { 108 | customCss: require.resolve('./src/css/custom.css'), 109 | }, 110 | }, 111 | ], 112 | ], 113 | }; 114 | -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "docusaurus start", 7 | "build": "docusaurus build", 8 | "swizzle": "docusaurus swizzle", 9 | "deploy": "docusaurus deploy" 10 | }, 11 | "dependencies": { 12 | "@docusaurus/core": "^2.0.0-alpha.64", 13 | "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.64", 14 | "@docusaurus/preset-classic": "^2.0.0-alpha.64", 15 | "classnames": "^2.2.6", 16 | "react": "^16.8.4", 17 | "react-dom": "^16.8.4" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } -------------------------------------------------------------------------------- /website/sidebars.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "guides": { 3 | "The basics": [ 4 | "guides/1-getting-started", 5 | "guides/2-tutorial", 6 | "guides/3-styling", 7 | "guides/4-layout", 8 | "guides/5-handle-events", 9 | "guides/6-images", 10 | "guides/7-networking" 11 | ] 12 | }, 13 | "api": { 14 | "Widgets": [ 15 | "api/interfaces/animatedimageprops", 16 | "api/interfaces/buttonprops", 17 | "api/interfaces/checkboxprops", 18 | "api/interfaces/comboboxprops", 19 | "api/interfaces/dialprops", 20 | "api/interfaces/imageprops", 21 | "api/interfaces/lineeditprops", 22 | "api/interfaces/progressbarprops", 23 | "api/interfaces/radiobuttonprops", 24 | "api/interfaces/scrollareaprops", 25 | "api/interfaces/sliderprops", 26 | "api/interfaces/spinboxprops", 27 | "api/interfaces/textprops", 28 | "api/interfaces/viewprops" 29 | ] 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /website/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable docusaurus/copyright-header */ 2 | /** 3 | * Any CSS included here will be global. The classic template 4 | * bundles Infima by default. Infima is a CSS framework designed to 5 | * work well for content-centric websites. 6 | */ 7 | 8 | /* You can override the default Infima variables here. */ 9 | :root { 10 | --ifm-color-primary: #25c2a0; 11 | --ifm-color-primary-dark: rgb(33, 175, 144); 12 | --ifm-color-primary-darker: rgb(31, 165, 136); 13 | --ifm-color-primary-darkest: rgb(26, 136, 112); 14 | --ifm-color-primary-light: rgb(70, 203, 174); 15 | --ifm-color-primary-lighter: rgb(102, 212, 189); 16 | --ifm-color-primary-lightest: rgb(146, 224, 208); 17 | --ifm-container-width: 1280px; 18 | --ifm-code-font-size: 95%; 19 | } 20 | 21 | .docusaurus-highlight-code-line { 22 | background-color: rgb(72, 77, 91); 23 | display: block; 24 | margin: 0 calc(-1 * var(--ifm-pre-padding)); 25 | padding: 0 var(--ifm-pre-padding); 26 | } 27 | 28 | 29 | .header-github-link:hover { 30 | opacity: 0.6; 31 | } 32 | 33 | 34 | .header-github-link:before { 35 | content: ''; 36 | width: 24px; 37 | height: 24px; 38 | display: flex; 39 | background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") 40 | no-repeat; 41 | } 42 | 43 | html[data-theme='dark'] .header-github-link:before { 44 | background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") 45 | no-repeat; 46 | } 47 | -------------------------------------------------------------------------------- /website/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | import Layout from '@theme/Layout'; 4 | import Link from '@docusaurus/Link'; 5 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 6 | import useBaseUrl from '@docusaurus/useBaseUrl'; 7 | import styles from './styles.module.css'; 8 | 9 | const features = [ 10 | { 11 | title: <>Powered by Vue, 12 | imageUrl: 'img/undraw_monitor.png', 13 | description: ( 14 | <> 15 | With Vue NodeGui, you can build truly native desktop applications using vue syntax. 16 | We also have a pure Javascript and React based versions 17 | 18 | ), 19 | }, 20 | { 21 | title: <>Open Source, 22 | imageUrl: 'img/undraw_open_source.svg', 23 | description: ( 24 | <> 25 | Vue NodeGui is an open source project built on other open source technologies. 26 | We love the community and will always welcome contributions! 27 | 28 | ), 29 | }, 30 | { 31 | title: <>Cross Platform, 32 | imageUrl: 'img/undraw_windows.svg', 33 | description: ( 34 | <> 35 | Apps created using Vue NodeGui can be built and run on Mac, Linux and windows machines! 36 | 37 | ), 38 | }, 39 | ]; 40 | 41 | function Feature({ imageUrl, title, description }) { 42 | const imgUrl = useBaseUrl(imageUrl); 43 | return ( 44 |
45 |
46 | {title} 47 |
48 |

{title}

49 |

{description}

50 |
51 | ); 52 | } 53 | 54 | function Home() { 55 | const context = useDocusaurusContext(); 56 | const { siteConfig = {} } = context; 57 | return ( 58 | 61 |
62 |
63 | 64 |

{siteConfig.title}

65 |

{siteConfig.tagline}

66 |
67 | 73 | Get Started 74 | 75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | {features.map((props, idx) => ( 83 | 84 | ))} 85 |
86 |
87 |
88 |
89 |
90 |
91 | 92 |
93 |
94 |

Create native apps for Windows, MacOs and Linux using Vue and CSS

95 |

lets you create truly native apps and doesn't compromise on your users' experience. It provides a core set of platform agnostic native widgets that map directly to the platform’s native UI building blocks.

96 |

Vue NodeGui widgets are built on top of Qt which is a mature desktop apps framework. Vue NodeGui components are extremely customizable just like in the web but does NOT use a Web browser under the hood.

97 |
98 |
99 |
100 |
101 |
102 |
103 |

Written in Vue — rendered with native code by Qt

104 |

Apps can be built completely in JavaScript. This enables native app development for whole new teams of developers, and can let existing native teams work much faster.

105 |

With NodeGui you get flexibility of web and performance of Native desktop apps.

106 |
107 |
108 | 109 |
110 |
111 |
112 |
113 |

Community Talks

114 |
115 | 121 |
122 | 127 | Introductory talk at Vue Conf TO 2020 128 | 129 |
130 |
131 | 132 | ); 133 | } 134 | 135 | export default Home; 136 | -------------------------------------------------------------------------------- /website/src/pages/styles.module.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable docusaurus/copyright-header */ 2 | 3 | /** 4 | * CSS files with the .module.css suffix will be treated as CSS modules 5 | * and scoped locally. 6 | */ 7 | 8 | .heroBanner { 9 | padding: 2rem 0 4rem; 10 | text-align: center; 11 | position: relative; 12 | overflow: hidden; 13 | } 14 | 15 | .buttons { 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | 21 | .content { 22 | display: flex; 23 | flex-direction: column; 24 | } 25 | 26 | .features { 27 | display: flex; 28 | align-items: center; 29 | padding: 2rem 0; 30 | width: 100%; 31 | max-width: 1280px; 32 | align-self: center; 33 | text-align: center; 34 | } 35 | 36 | .description { 37 | display: flex; 38 | align-items: center; 39 | padding: 4rem 0 0; 40 | width: 100%; 41 | max-width: 1280px; 42 | align-self: center; 43 | } 44 | 45 | .featureImage { 46 | height: 200px; 47 | width: 200px; 48 | } 49 | 50 | .demoImg { 51 | max-height: 300px; 52 | } 53 | 54 | .descriptionRow { 55 | justify-content: center; 56 | align-items: center; 57 | margin-left: unset !important; 58 | margin-right: unset !important; 59 | } 60 | 61 | .imgColumn { 62 | display: flex !important; 63 | justify-content: center; 64 | } 65 | 66 | .column { 67 | flex-direction: column; 68 | padding-bottom: 4rem; 69 | } 70 | 71 | .videoContainer { 72 | position: relative; 73 | width: 50%; 74 | min-width: 640px; 75 | align-self: center; 76 | } 77 | 78 | .videoContainer::after { 79 | padding-top: 53.57%; 80 | display: block; 81 | content: ''; 82 | } 83 | 84 | .videoContainer iframe { 85 | position: absolute; 86 | top: 0; 87 | left: 0; 88 | width: 100%; 89 | height: 100%; 90 | } 91 | 92 | .caption { 93 | font-weight: 600; 94 | margin-top: 1rem; 95 | } 96 | 97 | @media screen and (max-width: 966px) { 98 | .heroBanner { 99 | padding: 2rem; 100 | } 101 | 102 | .description { 103 | text-align: center; 104 | } 105 | 106 | .videoContainer { 107 | min-width: unset; 108 | width: calc(100% - 2rem); 109 | } 110 | 111 | .caption { 112 | margin-top: 0.5rem; 113 | } 114 | } -------------------------------------------------------------------------------- /website/static/CNAME: -------------------------------------------------------------------------------- 1 | vue.nodegui.org -------------------------------------------------------------------------------- /website/static/img/button-press.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/button-press.gif -------------------------------------------------------------------------------- /website/static/img/demo-calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/demo-calculator.png -------------------------------------------------------------------------------- /website/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/favicon.ico -------------------------------------------------------------------------------- /website/static/img/flex-simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/flex-simple.png -------------------------------------------------------------------------------- /website/static/img/image-simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/image-simple.png -------------------------------------------------------------------------------- /website/static/img/logo-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/logo-circle.png -------------------------------------------------------------------------------- /website/static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/logo.png -------------------------------------------------------------------------------- /website/static/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /website/static/img/logox200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/logox200.png -------------------------------------------------------------------------------- /website/static/img/sample-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/sample-code.png -------------------------------------------------------------------------------- /website/static/img/undraw_monitor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/undraw_monitor.png -------------------------------------------------------------------------------- /website/static/img/undraw_windows.svg: -------------------------------------------------------------------------------- 1 | windows 2 | 3 | 4 | 5 | 6 | 7 | 8 | X 9 | 10 | 11 | -------------------------------------------------------------------------------- /website/static/img/vn-animated-image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-animated-image.gif -------------------------------------------------------------------------------- /website/static/img/vn-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-button.png -------------------------------------------------------------------------------- /website/static/img/vn-checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-checkbox.png -------------------------------------------------------------------------------- /website/static/img/vn-combobox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-combobox.gif -------------------------------------------------------------------------------- /website/static/img/vn-dial.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-dial.gif -------------------------------------------------------------------------------- /website/static/img/vn-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-image.png -------------------------------------------------------------------------------- /website/static/img/vn-line-edit.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-line-edit.gif -------------------------------------------------------------------------------- /website/static/img/vn-progress-bar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-progress-bar.gif -------------------------------------------------------------------------------- /website/static/img/vn-radio-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-radio-button.png -------------------------------------------------------------------------------- /website/static/img/vn-scroll-area.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-scroll-area.gif -------------------------------------------------------------------------------- /website/static/img/vn-slider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-slider.gif -------------------------------------------------------------------------------- /website/static/img/vn-spinbox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-spinbox.gif -------------------------------------------------------------------------------- /website/static/img/vn-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-text.png -------------------------------------------------------------------------------- /website/static/img/vn-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vn-view.png -------------------------------------------------------------------------------- /website/static/img/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nodegui/vue-nodegui/a6f1ce30211b862a30db38f42480250a57c3db3c/website/static/img/vue.png --------------------------------------------------------------------------------