assistme.component

another silly test

Build Setup

# install dependencies
npm i --save assistme.component

# caso esteja usando a nova versao do quasar, ele já faz o auto-import, então pule o passo de import.

# verifique no arquivo quasar.config.js

  framework: {
    'auto'
  }

# caso esteja usando auto-import, PULE ESTE PASSO!
# adicione os seguites plugins e components ao quasar.config.js

 return {
  framework: {
    components: [
      'QLayout',
      'QFooter',
      'QHeader',
      'QDate',
      'QInput',
      'QDrawer',
      'QSelect',
      'QAvatar',
      'QPageContainer',
      'QLinearProgress',
      'QPage',
      'QToolbar',
      'QToolbarTitle',
      'QBtn',
      'QIcon',
      'QMenu',
      'QList',
      'QEditor',
      'QItem',
      'QTooltip',
      'QItemSection',
      'QSeparator',
      'QToggle',
      'QDialog',
      'QCard',
      'QBar',
      'QCardSection',
      'QCardActions',
      'QSpace',
      'QItemLabel',
      'QCheckbox',
      'QColor',
      'QPopupProxy',
      'QExpansionItem',
      'QScrollArea'
    ]
  },
  directives: [
    'ClosePopup'
  ],
  plugins: [
   'Notify',
   'LocalStorage',
   'Dialog'
  ]
 }

Caminhos Personalizados

No arquivo quasar.conf.js na parte de build logo após extendWebpack adicione o seguinte codigo:

cfg.resolve.alias = {
  ...cfg.resolve.alias,
  '@root': ('src'),
  '@assets': ('src/assets'),
  '@server': ('src/server'),
  '@domain': ('src/domain'),
  '@components': ('src/components'),
  '@application': ('src/application')
}

Component VeeValidate

instale o veeValidate com o seguinte comando:

npm i [email protected] --save

crie um arquivo na pasta src/boot chamado VeeValidate.js

  import VeeValidate, { Validator } from 'vee-validate'
  import messagesBr from 'vee-validate/dist/locale/pt_BR'
  import messagesEn from 'vee-validate/dist/locale/en'
  import messagesEs from 'vee-validate/dist/locale/es'

  Validator.localize('pt_BR', messagesBr)
  Validator.localize('en', messagesEn)
  Validator.localize('es', messagesEs)

  export default ({ app, Vue }) => {
    Vue.use(VeeValidate, {
      errorBagName: 'vErrors',
      locale: 'pt_BR',
      i18nRootKey: 'validations',
      dictionary: {
        pt_BR: { messages: messagesBr },
        en: { messages: messagesEn },
        es: { messages: messagesEs }
      }
    })
  }
  
  # no quasar.config.js edit o boot e adicione global
    boot: [
      'i18n',
      'axios',
      'global',
      'veeValidate'
    ]

Components Globais

crie um arquivo na pasta src/boot chamado global.js

    import { CInput, CSelect, CModal, CMenu, CAlert, Functions, CValidaService, CTable } from 'assistme.component'

    export default ({ Vue }) => {
      Vue.prototype.$message = CAlert
      Vue.prototype.$functions = Functions
      Vue.component('CInput', CInput)
      Vue.component('CSelect', CSelect)
      Vue.component('CModal', CModal)
      Vue.component('CMenu', CMenu)
      Vue.component('CValidaService', CValidaService)
      Vue.component('CTable', CTable)
    }

# no quasar.config.js edit o boot e adicione global
    boot: [
      'i18n',
      'axios',
      'global'
    ]

CInput

Utilização do component de Input

  # existem varias props que podem ser passadas por parâmetro.

  # props para usar

  v-model: {
    # valor do input - required
  }
  
  label: {
    # label do input
  }

  placeholder: {
    # placeholder do input
  }

  icon: {
    # icone do input
  }

  type: {
    # tipo do valor - default: 'text'
  }

  outlined: {
    # borda inteiro no input
  }

  round: {
    # arredondar input
  }

  dark: {
    # input mode dark
  }

  color: {
    # default: 'blue-5'
  }



  
  Exemplo:

  <c-input v-model="usuario.login" label="Login" placeholder="Digite seu login" icon="fas fa-user" outlined/>