├── .gitignore ├── LICENSE ├── README.md ├── demo ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── babel.config.js ├── package.json ├── quasar.conf.js ├── quasar.extensions.json ├── src │ ├── App.vue │ ├── assets │ │ ├── quasar-logo-full.svg │ │ └── sad.svg │ ├── boot │ │ └── .gitkeep │ ├── components │ │ ├── .gitkeep │ │ └── CodePrism.js │ ├── css │ │ ├── app.styl │ │ └── quasar.variables.styl │ ├── index.template.html │ ├── layouts │ │ └── MyLayout.vue │ ├── pages │ │ ├── Error404.vue │ │ └── Index.vue │ ├── router │ │ ├── index.js │ │ └── routes.js │ └── statics │ │ ├── icons │ │ ├── apple-icon-152x152.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── icon-128x128.png │ │ ├── icon-192x192.png │ │ ├── icon-256x256.png │ │ ├── icon-384x384.png │ │ ├── icon-512x512.png │ │ └── ms-icon-144x144.png │ │ └── quasar-logo.png └── yarn.lock ├── package.json ├── src ├── boot │ └── qmodeltd.js ├── component │ ├── QEditableTd.json │ ├── QEditableTd.vue │ ├── QModelTd.json │ ├── QModelTd.vue │ ├── QSelectableTd.json │ ├── QSelectableTd.vue │ ├── index.js │ └── mixin.js └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .quasar 2 | .DS_Store 3 | .thumbs.db 4 | node_modules 5 | /dist 6 | /src-cordova/node_modules 7 | /src-cordova/platforms 8 | /src-cordova/plugins 9 | /src-cordova/www 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Quasar Framework 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | QModelTd 2 | === 3 | 4 | QModelTd is an `UI app extension` for [Quasar Framework v1](https://v1.quasar-framework.org/). It will not work with legacy versions of Quasar Framework. 5 | 6 | This work is currently in `alpha` and there are expected changes while things get worked out. 7 | 8 | > WARNING 9 | > 10 | > This app extension has been updated to work with changes that were released with `@quasar/app - 1.0.0-beta.9`. If you have not upgraded to at least `1.0.0-beta.9` this app extension will not work. 11 | 12 | If you have installed before `@quasar/app - 1.0.0-beta.9` (or later) then follow these before upgrading Quasar if you previously had this extension installed: 13 | 14 | 1) Remove: `quasar ext remove qmodeltd` 15 | 2) Upgrade: `yarn upgrade` 16 | 3) Re-install: `quasar ext add qmodeltd` 17 | 18 | # Installation 19 | In your Quasar project: 20 | ``` 21 | quasar ext add qmodeltd 22 | ``` 23 | 24 | # Demo 25 | Can be found [here](https://qmodeltd.netlify.com/#/). 26 | 27 | # Test Project 28 | Can be found [here](https://github.com/lucasfernog/quasar-app-extension-qmodeltd/tree/master/demo). 29 | 30 | # Example Code 31 | ```html 32 | 33 | {{ props.row.name }} 40 | {{ props.row.company }} 47 | 48 | ``` 49 | 50 | --- 51 | 52 | # QModelTd Vue Properties 53 | | Vue Property | Type | Description | 54 | |---|---|---| 55 | | mode | String | ['inline','popup'] This determines how the edit is displayed (inline on the QTd or through a QPopupEdit). (Default: 'popup') | 56 | 57 | # QModelTd Vue Slots 58 | 59 | | Vue Slots | Description | 60 | |---|---| 61 | | default | The slot rendered when NOT on edit mode. 62 | | model-view | The slot rendered on edit mode. Contains a QInput when using QEditableTd, and a QSelect when using QSelectableTd. 63 | -------------------------------------------------------------------------------- /demo/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | .quasar 2 | .DS_Store 3 | .thumbs.db 4 | node_modules 5 | /dist 6 | /src-cordova/node_modules 7 | /src-cordova/platforms 8 | /src-cordova/plugins 9 | /src-cordova/www 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | -------------------------------------------------------------------------------- /demo/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # Quasar App Extension QModelTd Test -------------------------------------------------------------------------------- /demo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@quasar/babel-preset-app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app-extension-qmodeltd-test", 3 | "version": "0.0.1", 4 | "description": "A Quasar Framework app extension", 5 | "productName": "QModelTd App Extension", 6 | "cordovaId": "org.cordova.quasar.app", 7 | "author": "Lucas Fernandes Nogueira ", 8 | "private": true, 9 | "scripts": { 10 | "test": "echo \"No test specified\" && exit 0" 11 | }, 12 | "dependencies": { 13 | "@quasar/extras": "^1.1.2", 14 | "prismjs": "^1.16.0", 15 | "quasar": "^1.0.0-beta.23" 16 | }, 17 | "devDependencies": { 18 | "@quasar/app": "^1.0.0-rc.4", 19 | "quasar-app-extension-ide-helper": "^0.0.5", 20 | "quasar-app-extension-qmodeltd": "link:../", 21 | "strip-ansi": "=3.0.1" 22 | }, 23 | "engines": { 24 | "node": ">= 8.9.0", 25 | "npm": ">= 5.6.0", 26 | "yarn": ">= 1.6.0" 27 | }, 28 | "browserslist": [ 29 | "last 1 version, not dead, ie >= 11" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /demo/quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | 3 | module.exports = function (ctx) { 4 | return { 5 | // app boot file (/src/boot) 6 | // --> boot files are part of "main.js" 7 | boot: [], 8 | 9 | css: [ 10 | 'app.styl' 11 | ], 12 | 13 | extras: [ 14 | 'roboto-font', 15 | 'material-icons', // optional, you are not bound to it 16 | // 'ionicons-v4', 17 | // 'mdi-v3', 18 | 'fontawesome-v5' 19 | // 'eva-icons' 20 | ], 21 | 22 | // framework: 'all', // --- includes everything; for dev only! 23 | framework: 'all', 24 | 25 | supportIE: false, 26 | 27 | build: { 28 | scopeHoisting: true, 29 | // vueRouterMode: 'history', 30 | // vueCompiler: true, 31 | // gzip: true, 32 | // analyze: true, 33 | // extractCSS: false, 34 | extendWebpack(cfg) {} 35 | }, 36 | 37 | devServer: { 38 | // https: true, 39 | // port: 8080, 40 | open: true, // opens browser window automatically 41 | watchOptions: { 42 | ignored: [ 43 | 'node_modules', 44 | '!node_modules/quasar-app-extension-qmodeltd' 45 | ] 46 | } 47 | }, 48 | 49 | // animations: 'all' --- includes all animations 50 | animations: [], 51 | 52 | ssr: { 53 | pwa: false 54 | }, 55 | 56 | pwa: { 57 | // workboxPluginMode: 'InjectManifest', 58 | // workboxOptions: {}, 59 | manifest: { 60 | // name: 'Quasar App', 61 | // short_name: 'Quasar-PWA', 62 | // description: 'Best PWA App in town!', 63 | display: 'standalone', 64 | orientation: 'portrait', 65 | background_color: '#ffffff', 66 | theme_color: '#027be3', 67 | icons: [{ 68 | 'src': 'statics/icons/icon-128x128.png', 69 | 'sizes': '128x128', 70 | 'type': 'image/png' 71 | }, 72 | { 73 | 'src': 'statics/icons/icon-192x192.png', 74 | 'sizes': '192x192', 75 | 'type': 'image/png' 76 | }, 77 | { 78 | 'src': 'statics/icons/icon-256x256.png', 79 | 'sizes': '256x256', 80 | 'type': 'image/png' 81 | }, 82 | { 83 | 'src': 'statics/icons/icon-384x384.png', 84 | 'sizes': '384x384', 85 | 'type': 'image/png' 86 | }, 87 | { 88 | 'src': 'statics/icons/icon-512x512.png', 89 | 'sizes': '512x512', 90 | 'type': 'image/png' 91 | } 92 | ] 93 | } 94 | }, 95 | 96 | cordova: { 97 | // id: 'org.cordova.quasar.app' 98 | }, 99 | 100 | electron: { 101 | // bundler: 'builder', // or 'packager' 102 | extendWebpack(cfg) { 103 | // do something with Electron process Webpack cfg 104 | }, 105 | packager: { 106 | // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options 107 | 108 | // OS X / Mac App Store 109 | // appBundleId: '', 110 | // appCategoryType: '', 111 | // osxSign: '', 112 | // protocol: 'myapp://path', 113 | 114 | // Window only 115 | // win32metadata: { ... } 116 | }, 117 | builder: { 118 | // https://www.electron.build/configuration/configuration 119 | 120 | // appId: 'quasar-app' 121 | } 122 | } 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /demo/quasar.extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "qmodeltd": {}, 3 | "ide-helper": {} 4 | } -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /demo/src/assets/quasar-logo-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 63 | 66 | 69 | 75 | 79 | 83 | 87 | 91 | 95 | 99 | 103 | 104 | 105 | 106 | 107 | 113 | 118 | 126 | 133 | 142 | 151 | 160 | 169 | 178 | 187 | 188 | 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /demo/src/assets/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /demo/src/boot/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/boot/.gitkeep -------------------------------------------------------------------------------- /demo/src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/components/.gitkeep -------------------------------------------------------------------------------- /demo/src/components/CodePrism.js: -------------------------------------------------------------------------------- 1 | import 'prismjs' 2 | 3 | export default { 4 | functional: true, 5 | 6 | props: { 7 | code: { 8 | type: String 9 | }, 10 | 11 | lang: String 12 | }, 13 | 14 | render(h, ctx) { 15 | const 16 | code = ctx.props.code || ctx.children[0].text, 17 | language = ctx.props.lang, 18 | prismLanguage = Prism.languages[language] 19 | 20 | return h( 21 | 'pre', 22 | Object.assign({}, ctx.data), 23 | [ 24 | h('code', { 25 | domProps: { 26 | innerHTML: Prism.highlight(code, prismLanguage, language) 27 | } 28 | }) 29 | ] 30 | ) 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /demo/src/css/app.styl: -------------------------------------------------------------------------------- 1 | // app global css 2 | .token.comment, 3 | .token.block-comment, 4 | .token.prolog, 5 | .token.doctype, 6 | .token.cdata 7 | color #7D8B99 8 | 9 | .token 10 | &.punctuation 11 | color #5F6364 12 | &.important 13 | font-weight normal 14 | &.bold 15 | font-weight bold 16 | &.italic 17 | font-style italic 18 | &.entity 19 | cursor help 20 | 21 | .token.property, 22 | .token.tag, 23 | .token.boolean, 24 | .token.number, 25 | .token.function-name, 26 | .token.constant, 27 | .token.symbol, 28 | .token.deleted 29 | color #c92c2c 30 | 31 | .token.selector, 32 | .token.attr-name, 33 | .token.string, 34 | .token.char, 35 | .token.function, 36 | .token.builtin, 37 | .token.inserted 38 | color #2f9c0a 39 | 40 | .token.operator, 41 | .token.entity, 42 | .token.url, 43 | .token.variable 44 | color #a67f59 45 | background rgba(255, 255, 255, 0.5) 46 | 47 | .token.atrule, 48 | .token.attr-value, 49 | .token.keyword, 50 | .token.class-name 51 | color #1990b8 52 | 53 | .token.regex, 54 | .token.important 55 | color #e90 56 | 57 | .language-css .token.string, 58 | .style .token.string 59 | color #a67f59 60 | background rgba(255, 255, 255, 0.5) 61 | 62 | .namespace 63 | opacity .7 64 | 65 | .token.tab:not(:empty):before, 66 | .token.cr:before, 67 | .token.lf:before 68 | color #e0d7d1 -------------------------------------------------------------------------------- /demo/src/css/quasar.variables.styl: -------------------------------------------------------------------------------- 1 | // Quasar Stylus Variables 2 | // -------------------------------------------------- 3 | // To customize the look and feel of this app, you can override 4 | // the Stylus variables found in Quasar's source Stylus files. 5 | 6 | // Check documentation for full list of Quasar variables 7 | 8 | // It's highly recommended to change the default colors 9 | // to match your app's branding. 10 | // Tip: Use the "Theme Builder" on Quasar's documentation website. 11 | 12 | $primary = #027BE3 13 | $secondary = #26A69A 14 | $accent = #9C27B0 15 | 16 | $positive = #21BA45 17 | $negative = #C10015 18 | $info = #31CCEC 19 | $warning = #F2C037 20 | -------------------------------------------------------------------------------- /demo/src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= htmlWebpackPlugin.options.productName %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /demo/src/layouts/MyLayout.vue: -------------------------------------------------------------------------------- 1 | 89 | 90 | 105 | 106 | 108 | -------------------------------------------------------------------------------- /demo/src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /demo/src/pages/Index.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 61 | 62 | -------------------------------------------------------------------------------- /demo/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import routes from './routes' 5 | 6 | Vue.use(VueRouter) 7 | 8 | /* 9 | * If not building with SSR mode, you can 10 | * directly export the Router instantiation 11 | */ 12 | 13 | export default function (/* { store, ssrContext } */) { 14 | const Router = new VueRouter({ 15 | scrollBehavior: () => ({ y: 0 }), 16 | routes, 17 | 18 | // Leave these as is and change from quasar.conf.js instead! 19 | // quasar.conf.js -> build -> vueRouterMode 20 | // quasar.conf.js -> build -> publicPath 21 | mode: process.env.VUE_ROUTER_MODE, 22 | base: process.env.VUE_ROUTER_BASE 23 | }) 24 | 25 | return Router 26 | } 27 | -------------------------------------------------------------------------------- /demo/src/router/routes.js: -------------------------------------------------------------------------------- 1 | 2 | const routes = [ 3 | { 4 | path: '/', 5 | component: () => import('layouts/MyLayout.vue'), 6 | children: [ 7 | { path: '', component: () => import('pages/Index.vue') } 8 | ] 9 | } 10 | ] 11 | 12 | // Always leave this as last one 13 | if (process.env.MODE !== 'ssr') { 14 | routes.push({ 15 | path: '*', 16 | component: () => import('pages/Error404.vue') 17 | }) 18 | } 19 | 20 | export default routes 21 | -------------------------------------------------------------------------------- /demo/src/statics/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/favicon-16x16.png -------------------------------------------------------------------------------- /demo/src/statics/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/favicon-32x32.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/icon-128x128.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/icon-192x192.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/icon-256x256.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/icon-384x384.png -------------------------------------------------------------------------------- /demo/src/statics/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/icon-512x512.png -------------------------------------------------------------------------------- /demo/src/statics/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /demo/src/statics/quasar-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasfernog/quasar-app-extension-qmodeltd/99dcf7072aa47ea10493624f75e22f0ce764c472/demo/src/statics/quasar-logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-app-extension-qmodeltd", 3 | "version": "1.0.0-alpha.6", 4 | "description": "QModelTd is an UI app extension for Quasar that simplifies the usage of editable or selectable QTd", 5 | "author": "lucasfernog ", 6 | "scripts": { 7 | "test": "echo \"No test specified\" && exit 0" 8 | }, 9 | "main": "src/index.js", 10 | "publishConfig": { 11 | "access": "public" 12 | }, 13 | "bugs": "https://github.com/lucasfernog/app-extension-qmodeltd/issues", 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/lucasfernog/app-extension-qmodeltd.git" 17 | }, 18 | "homepage": "https://github.com/lucasfernog/app-extension-qmodeltd", 19 | "license": "MIT", 20 | "keywords": [ 21 | "quasar", 22 | "app", 23 | "app extension", 24 | "extension", 25 | "editable", 26 | "edit", 27 | "selectable", 28 | "select", 29 | "td", 30 | "table" 31 | ], 32 | "engines": { 33 | "node": ">= 8.9.0", 34 | "npm": ">= 5.6.0", 35 | "yarn": ">= 1.6.0" 36 | }, 37 | "devDependencies": { 38 | "fs": "^0.0.1-security", 39 | "path": "^0.12.7" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/boot/qmodeltd.js: -------------------------------------------------------------------------------- 1 | import { 2 | QEditableTd, QSelectableTd 3 | } from 'quasar-app-extension-qmodeltd/src/component' 4 | 5 | export default ({ 6 | Vue 7 | }) => { 8 | Vue.component('QEditableTd', QEditableTd) 9 | Vue.component('QSelectableTd', QSelectableTd) 10 | } 11 | -------------------------------------------------------------------------------- /src/component/QEditableTd.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "props": { 4 | "mode": { 5 | "type": "String", 6 | "desc": "Exhibition mode", 7 | "default": "popup", 8 | "values": ["popup", "inline"], 9 | "examples": ["mode=\"inline\"", "mode=\"popup\""] 10 | }, 11 | "value": { 12 | "desc": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive" 13 | } 14 | }, 15 | "events": { 16 | "input": { 17 | "desc": "Emitted when component's model changes; Is also used by v-model", 18 | "params": { 19 | "value": { 20 | "type": ["String", "Number"], 21 | "desc": "New model value", 22 | "required": true 23 | } 24 | } 25 | } 26 | }, 27 | "slots": { 28 | "default": { 29 | "desc": "The default q-td slot" 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /src/component/QEditableTd.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 44 | 45 | 55 | -------------------------------------------------------------------------------- /src/component/QModelTd.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "props": { 4 | "mode": { 5 | "type": "String", 6 | "desc": "Exhibition mode", 7 | "default": "popup", 8 | "values": ["popup", "inline"], 9 | "examples": ["mode=\"inline\"", "mode=\"popup\""] 10 | }, 11 | "value": { 12 | "desc": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive" 13 | } 14 | }, 15 | "events": { 16 | "input": { 17 | "desc": "Emitted when component's model changes; Is also used by v-model", 18 | "params": { 19 | "value": { 20 | "type": "Any", 21 | "desc": "New model value", 22 | "required": true 23 | } 24 | } 25 | }, 26 | "edit-start": { 27 | "desc": "Emmitted when the component starts edit mode" 28 | }, 29 | "edit-finish": { 30 | "desc": "Emmitted when the component finishes edit mode" 31 | } 32 | }, 33 | "scopedSlots": { 34 | "model-view": { 35 | "desc": "View to be displayed on td click", 36 | "scope": { 37 | "finishEdit": { 38 | "type": "Function", 39 | "desc": "Function to call to finish edit mode; suggestion: on control blur" 40 | }, 41 | "cancelEdit": { 42 | "type": "Function", 43 | "desc": "Function to clal to cancel edit; suggestion: on invalid value provided" 44 | } 45 | } 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /src/component/QModelTd.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 55 | 56 | 60 | -------------------------------------------------------------------------------- /src/component/QSelectableTd.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "component", 3 | "props": { 4 | "mode": { 5 | "type": "String", 6 | "desc": "Exhibition mode", 7 | "default": "popup", 8 | "values": ["popup", "inline"], 9 | "examples": ["mode=\"inline\"", "mode=\"popup\""] 10 | }, 11 | "value": { 12 | "desc": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive" 13 | } 14 | }, 15 | "events": { 16 | "input": { 17 | "desc": "Emitted when component's model changes; Is also used by v-model", 18 | "params": { 19 | "value": { 20 | "type": ["String", "Number", "Object"], 21 | "desc": "New model value", 22 | "required": true 23 | } 24 | } 25 | } 26 | }, 27 | "slots": { 28 | "default": { 29 | "desc": "The default q-td slot" 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /src/component/QSelectableTd.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 44 | 45 | 51 | -------------------------------------------------------------------------------- /src/component/index.js: -------------------------------------------------------------------------------- 1 | import QModelTd from './QModelTd' 2 | import QEditableTd from './QEditableTd' 3 | import QSelectableTd from './QSelectableTd' 4 | 5 | export { 6 | QModelTd, 7 | QEditableTd, 8 | QSelectableTd 9 | } -------------------------------------------------------------------------------- /src/component/mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | mode: { 4 | type: String, 5 | required: false, 6 | default: "popup", 7 | validator: v => ["popup", "inline"].includes(v) 8 | }, 9 | value: { 10 | required: true 11 | } 12 | }, 13 | 14 | methods: { 15 | onInput(val) { 16 | this.$emit("input", val); 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Quasar App Extension index/runner script 3 | * (runs on each dev/build) 4 | * 5 | * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js 6 | */ 7 | 8 | const extendWithModelTd = function (conf) { 9 | // make sure qmodeltd boot file is registered 10 | conf.boot.push('~quasar-app-extension-qmodeltd/src/boot/qmodeltd.js') 11 | 12 | // make sure boot file transpiles 13 | conf.build.transpileDependencies.push(/quasar-app-extension-qmodeltd[\\/]src/) 14 | console.log(` App Extension (qmodeltd) Info: 'Adding qmodeltd boot reference to your quasar.conf.js'`) 15 | } 16 | 17 | module.exports = function (api) { 18 | api.compatibleWith('@quasar/app', '^1.0.0-beta.18') 19 | 20 | api.registerDescribeApi('QModelTd', './component/QModelTd.json') 21 | api.registerDescribeApi('QEditableTd', './component/QEditableTd.json') 22 | api.registerDescribeApi('QSelectableTd', './component/QSelectableTd.json') 23 | 24 | api.extendQuasarConf(extendWithModelTd) 25 | } 26 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | fs@^0.0.1-security: 6 | version "0.0.1-security" 7 | resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4" 8 | integrity sha1-invTcYa23d84E/I4WLV+yq9eQdQ= 9 | 10 | inherits@2.0.3: 11 | version "2.0.3" 12 | resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" 13 | integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= 14 | 15 | path@^0.12.7: 16 | version "0.12.7" 17 | resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f" 18 | integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8= 19 | dependencies: 20 | process "^0.11.1" 21 | util "^0.10.3" 22 | 23 | process@^0.11.1: 24 | version "0.11.10" 25 | resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" 26 | integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= 27 | 28 | util@^0.10.3: 29 | version "0.10.4" 30 | resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901" 31 | integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A== 32 | dependencies: 33 | inherits "2.0.3" 34 | --------------------------------------------------------------------------------