1.0.0-alpha.6 • Published 5 years ago

quasar-app-extension-qmodeltd v1.0.0-alpha.6

Weekly downloads
8
License
MIT
Repository
github
Last release
5 years ago

QModelTd

QModelTd is an UI app extension for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.

This work is currently in alpha and there are expected changes while things get worked out.

WARNING

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.

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:

1) Remove: quasar ext remove qmodeltd 2) Upgrade: yarn upgrade 3) Re-install: quasar ext add qmodeltd

Installation

In your Quasar project:

quasar ext add qmodeltd

Demo

Can be found here.

Test Project

Can be found here.

Example Code

<q-tr :props="props">
  <q-editable-td
    key="desc"
    v-model="props.row.name"
    mode="popup"
    buttons
    :props="props"
  >{{ props.row.name }}</q-editable-td>
  <q-selectable-td
    key="company"
    :props="props"
    mode="inline"
    v-model="props.row.company"
    :options="options"
  >{{ props.row.company }}</q-selectable-td>
</q-tr>

QModelTd Vue Properties

Vue PropertyTypeDescription
modeString'inline','popup' This determines how the edit is displayed (inline on the QTd or through a QPopupEdit). (Default: 'popup')

QModelTd Vue Slots

Vue SlotsDescription
defaultThe slot rendered when NOT on edit mode.
model-viewThe slot rendered on edit mode. Contains a QInput when using QEditableTd, and a QSelect when using QSelectableTd.