colmeiacomponents v1.2.22

colmeiacomponents

Build Setup

# install dependencies
npm i --save colmeiacomponents

# 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'
  ]
 }

Idiomas

nas pasta i18n adicione as seguintes pastas /es /pt-br /en-us

após criar as pastas mude o arquivo index.js

    # index.js
    import enUS from './en-us'
    import ptBr from './pt-br'
    import es from './es'

    export default {
      'en-us': enUS,
      'pt-br': ptBr,
      'es': es
    }
    =============================================================================
    #pt-br crie um arquivo index.js

    import pt from 'quasar/lang/pt-br'
    import { padrao, user } from 'colmeiacomponents/src/lang/pt-br'

    export default {
      ...pt,
      ...user,
      ...padrao
    }
    =============================================================================
    #es crie um arquivo index.js
    import es from 'quasar/lang/es'
    import { user, padrao } from 'colmeiacomponents/src/lang/es/index'

    export default {
      ...es,
      ...user,
      ...padrao
    }

    =============================================================================
    #en-us crie um arquivo index.js
    import en from 'quasar/lang/en-us'
    import { padrao, user } from 'colmeiacomponents/src/lang/en-us/index'

    export default {
      ...en,
      ...user,
      ...padrao
    }

Social login

crie na pasta boot arquivo socialLogin.js

    import GSignInButton from 'vue-google-signin-button'
    export default async ({ Vue }) => {
      Vue.use(GSignInButton)
    }

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

Validação

crie na pasta boot um arquivo 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 veeValidate
    boot: [
      'i18n',
      'axios',
      'veeValidate'
    ]

Components Globais

crie um arquivo na pasta boot chamado global.js

    import { CToolbar, CInput, CLanguage, CAlert, CSocial, CPerfil, CCropper, UpImage } from 'colmeiacomponents'

    export default ({ Vue }) => {
      Vue.prototype.$message = CAlert
      Vue.component('CToolbar', CToolbar)
      Vue.component('CInput', CInput)
      Vue.component('CLanguage', CLanguage)
      Vue.component('CSocial', CSocial)
      Vue.component('CPerfil', CPerfil)
      Vue.component('CCropper', CCropper)
      Vue.component('UpImage', UpImage)
    }

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

Payments

para usar o components de pagamento modelo

  pagamento: {
    active: true,
    valor: 150,
    descricao: 'Pagamento LINK teste',
    formaPagamento: 1,
    clienteId: '5d48765caac6085078a68819',
    empresaId: '5d48765caac6085078a68818',
    dataVencimento: new Date(),
    numeroParcela: 0,
    empresa: {},
    response: null,
    parcelaboleto: [
      { value: '1', label: '1X - R$ 150,00', valor: 150 },
      { value: '2', label: '2X - R$ 75,00', valor: 75 },
      { value: '3', label: '3X - R$ 62,00', valor: 62 }
    ],
    parcelas: [
      { value: '1', label: '1X - R$ 150,00', valor: 150 },
      { value: '2', label: '2X - R$ 75,00', valor: 75 },
      { value: '3', label: '3X - R$ 52,5‬0', valor: 52.5 },
      { value: '4', label: '4X - R$ 41,35', valor: 41.35 }
    ]
  }