@bildvitta/quasar-ui-asteroid 2.14.0 → 3.0.0-alpha.1

package/src/mixins/view.js

@@ -1,7 +1,6 @@
 import { camelize } from 'humps'
-import { get } from 'lodash'
-
-import { NotifyError } from '../plugins'
+import { get } from 'lodash-es'
+import { markRaw } from 'vue'
 
 export default {
   props: {
@@ -17,39 +16,71 @@ export default {
     url: {
       default: '',
       type: String
+    },
+
+    fields: {
+      default: () => ({}),
+      type: Object
+    },
+
+    errors: {
+      default: () => ({}),
+      type: Object
+    },
+
+    metadata: {
+      default: () => ({}),
+      type: Object
+    },
+
+    fetching: {
+      type: Boolean
     }
   },
 
+  emits: [
+    'update:fields',
+    'update:errors',
+    'update:metadata',
+    'update:fetching'
+  ],
+
   data () {
     return {
-      errors: {},
-      fields: {},
-      metadata: {},
+      mx_errors: {},
+      mx_fields: {},
+      mx_metadata: {},
+
+      mx_isFetching: false
+    }
+  },
 
-      isFetching: false
+  watch: {
+    mx_isFetching (value) {
+      this.$emit('update:fetching', value)
     }
   },
 
   computed: {
-    componentTag () {
+    mx_componentTag () {
       return this.dialog ? 'div' : 'q-page'
     },
 
-    hasFooterSlot () {
-      return !!(this.$slots.footer || this.$scopedSlots.footer)
+    mx_hasFooterSlot () {
+      return !!(this.$slots.footer)
     },
 
-    hasHeaderSlot () {
-      return !!(this.$slots.header || this.$scopedSlots.header)
+    mx_hasHeaderSlot () {
+      return !!(this.$slots.header)
     }
   },
 
   methods: {
-    fetchError (error) {
+    mx_fetchError (error) {
       const { response } = error
       const exception = get(response, 'data.exception') || error.message
 
-      NotifyError('Ops! Erro ao obter os dados.', exception)
+      this.$qas.error('Ops! Erro ao obter os dados.', exception)
 
       const status = get(response, 'status')
       const redirect = ({ 403: 'Forbidden', 404: 'NotFound' })[status]
@@ -59,20 +90,26 @@ export default {
       }
     },
 
-    setErrors (errors = {}) {
-      this.errors = errors
+    mx_setErrors (errors = {}) {
+      this.mx_errors = markRaw(errors)
     },
 
-    setFields (fields = {}) {
+    mx_setFields (fields = {}) {
       for (const field in fields) {
         fields[field].name = camelize(fields[field].name)
       }
 
-      this.fields = fields
+      this.mx_fields = markRaw(fields)
+    },
+
+    mx_setMetadata (metadata = {}) {
+      this.mx_metadata = markRaw(metadata)
     },
 
-    setMetadata (metadata = {}) {
-      this.metadata = metadata
+    mx_updateModels (models) {
+      for (const key in models) {
+        this.$emit(`update:${key}`, models[key])
+      }
     }
   }
 }

package/src/plugins/Dialog.js

@@ -0,0 +1,14 @@
+import { Dialog } from 'quasar'
+import QasDialog from '../components/dialog/QasDialog.vue'
+
+/**
+ * @param {object} componentProps={}
+ *
+ * @example Dialog({ card: { title: 'Esse é o meu titulo!' } })
+ */
+export default (componentProps = {}) => {
+  Dialog.create({
+    component: QasDialog,
+    componentProps: { ...componentProps, usePlugin: true }
+  })
+}

package/src/plugins/NotifySuccess.js

@@ -1,10 +1,10 @@
 import { Notify } from 'quasar'
 
 Notify.registerType('success', {
-  progress: true,
-  icon: 'o_check'
+  icon: 'o_check',
+  progress: true
 })
 
 export default (message, caption) => {
-  Notify.create({ caption, message, type: 'success' })
+  Notify?.create({ caption, message, type: 'success' })
 }

package/src/plugins/index.js

@@ -1,7 +1,9 @@
-import NotifyError from './NotifyError'
-import NotifySuccess from './NotifySuccess'
+import Dialog from './Dialog.js'
+import NotifyError from './NotifyError.js'
+import NotifySuccess from './NotifySuccess.js'
 
 export {
+  Dialog,
   NotifyError,
   NotifySuccess
 }

package/src/store/history.js

@@ -0,0 +1,43 @@
+import { reactive } from 'vue'
+import { findLastIndex } from 'lodash-es'
+
+const history = reactive({ hasPreviousRoute: false, list: [] })
+
+function getPreviousRoute (currentRoute) {
+  const index = findLastIndex(history.list, item => item.name === currentRoute.name)
+
+  if (~index) {
+    history.list.splice(index, 1)
+  }
+
+  history.hasPreviousRoute = history.list.length > 1
+  return history.list[history.list.length - 1]
+}
+
+function addRoute (route) {
+  const routeExistsInList = history.list?.[history.list?.length - 1]?.name === route.name
+
+  if (routeExistsInList) return
+
+  history.list.push(route)
+  history.hasPreviousRoute = history.list.length > 1
+}
+
+function destroyRoutes (routes) {
+  if (!history.list.length) return null
+
+  routes.forEach(route => {
+    const index = history.list.findIndex(item => item.name === route)
+
+    if (~index) {
+      history.list.splice(index, 1)
+    }
+  })
+}
+
+export {
+  history,
+  getPreviousRoute,
+  addRoute,
+  destroyRoutes
+}

package/src/store/index.js

@@ -0,0 +1 @@
+export * from './history.js'

package/src/vue-plugin.js

@@ -0,0 +1,185 @@
+import QasActions from './components/actions/QasActions.vue'
+import QasActionsMenu from './components/actions-menu/QasActionsMenu.vue'
+import QasAlert from './components/alert/QasAlert.vue'
+import QasAppBar from './components/app-bar/QasAppBar.vue'
+import QasAppMenu from './components/app-menu/QasAppMenu.vue'
+import QasAvatar from './components/avatar/QasAvatar.vue'
+import QasBox from './components/box/QasBox.vue'
+import QasBreakline from './components/breakline/QasBreakline.vue'
+import QasBtn from './components/btn/QasBtn.vue'
+import QasCard from './components/card/QasCard.vue'
+import QasCheckboxGroup from './components/checkbox-group/QasCheckboxGroup.vue'
+import QasCopy from './components/copy/QasCopy.vue'
+import QasDateTimeInput from './components/date-time-input/QasDateTimeInput.vue'
+import QasDebugger from './components/debugger/QasDebugger.vue'
+import QasDelete from './components/delete/QasDelete.vue'
+import QasDialog from './components/dialog/QasDialog.vue'
+import QasDialogRouter from './components/dialog-router/QasDialogRouter.vue'
+import QasField from './components/field/QasField.vue'
+import QasFilters from './components/filters/QasFilters.vue'
+import QasFormGenerator from './components/form-generator/QasFormGenerator.vue'
+import QasFormView from './components/form-view/QasFormView.vue'
+import QasGallery from './components/gallery/QasGallery.vue'
+import QasGridGenerator from './components/grid-generator/QasGridGenerator.vue'
+import QasInput from './components/input/QasInput.vue'
+import QasLabel from './components/label/QasLabel.vue'
+import QasLayout from './components/layout/QasLayout.vue'
+import QasListItems from './components/list-items/QasListItems.vue'
+import QasListView from './components/list-view/QasListView.vue'
+import QasMap from './components/map/QasMap.vue'
+import QasNestedFields from './components/nested-fields/QasNestedFields.vue'
+import QasNumericInput from './components/numeric-input/QasNumericInput.vue'
+import QasPageHeader from './components/page-header/QasPageHeader.vue'
+import QasPasswordInput from './components/password-input/QasPasswordInput.vue'
+import QasPasswordStrengthChecker from './components/password-strength-checker/QasPasswordStrengthChecker.vue'
+import QasProfile from './components/profile/QasProfile.vue'
+import QasResizer from './components/resizer/QasResizer.vue'
+import QasSearchBox from './components/search-box/QasSearchBox.vue'
+import QasSelect from './components/select/QasSelect.vue'
+import QasSelectList from './components/select-list/QasSelectList.vue'
+import QasSignaturePad from './components/signature-pad/QasSignaturePad.vue'
+import QasSignatureUploader from './components/signature-uploader/QasSignatureUploader.vue'
+import QasSingleView from './components/single-view/QasSingleView.vue'
+import QasSortable from './components/sortable/QasSortable.vue'
+import QasTableGenerator from './components/table-generator/QasTableGenerator.vue'
+import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
+import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
+import QasTransfer from './components/transfer/QasTransfer.vue'
+import QasUploader from './components/uploader/QasUploader.vue'
+
+import VueGoogleMaps from '@fawmi/vue-google-maps'
+import { Notify, Quasar, Dialog as QuasarDialog } from 'quasar'
+
+import {
+  Dialog,
+  NotifyError,
+  NotifySuccess
+} from './plugins'
+
+import packageInfo from '../package.json'
+
+const version = packageInfo.version
+
+function install (app) {
+  app.component('QasActions', QasActions)
+  app.component('QasActionsMenu', QasActionsMenu)
+  app.component('QasAlert', QasAlert)
+  app.component('QasAppBar', QasAppBar)
+  app.component('QasAppMenu', QasAppMenu)
+  app.component('QasAvatar', QasAvatar)
+  app.component('QasBox', QasBox)
+  app.component('QasBreakline', QasBreakline)
+  app.component('QasBtn', QasBtn)
+  app.component('QasCard', QasCard)
+  app.component('QasCheckboxGroup', QasCheckboxGroup)
+  app.component('QasCopy', QasCopy)
+  app.component('QasDateTimeInput', QasDateTimeInput)
+  app.component('QasDebugger', QasDebugger)
+  app.component('QasDelete', QasDelete)
+  app.component('QasDialog', QasDialog)
+  app.component('QasDialogRouter', QasDialogRouter)
+  app.component('QasField', QasField)
+  app.component('QasFilters', QasFilters)
+  app.component('QasFormGenerator', QasFormGenerator)
+  app.component('QasFormView', QasFormView)
+  app.component('QasGallery', QasGallery)
+  app.component('QasGridGenerator', QasGridGenerator)
+  app.component('QasInput', QasInput)
+  app.component('QasLabel', QasLabel)
+  app.component('QasLayout', QasLayout)
+  app.component('QasListItems', QasListItems)
+  app.component('QasListView', QasListView)
+  app.component('QasMap', QasMap)
+  app.component('QasNestedFields', QasNestedFields)
+  app.component('QasNumericInput', QasNumericInput)
+  app.component('QasPageHeader', QasPageHeader)
+  app.component('QasPasswordInput', QasPasswordInput)
+  app.component('QasPasswordStrengthChecker', QasPasswordStrengthChecker)
+  app.component('QasProfile', QasProfile)
+  app.component('QasResizer', QasResizer)
+  app.component('QasSearchBox', QasSearchBox)
+  app.component('QasSelect', QasSelect)
+  app.component('QasSelectList', QasSelectList)
+  app.component('QasSignaturePad', QasSignaturePad)
+  app.component('QasSignatureUploader', QasSignatureUploader)
+  app.component('QasSingleView', QasSingleView)
+  app.component('QasSortable', QasSortable)
+  app.component('QasTableGenerator', QasTableGenerator)
+  app.component('QasTabsGenerator', QasTabsGenerator)
+  app.component('QasTextTruncate', QasTextTruncate)
+  app.component('QasTransfer', QasTransfer)
+  app.component('QasUploader', QasUploader)
+
+  app.use(Quasar, { plugins: { Notify, QuasarDialog, Dialog } })
+
+  if (process.env.MAPS_API_KEY) {
+    app.use(VueGoogleMaps, { load: { key: process.env.MAPS_API_KEY, libraries: 'places' } })
+  }
+
+  app.config.globalProperties.$qas = {
+    dialog: Dialog,
+    error: NotifyError,
+    success: NotifySuccess
+  }
+}
+
+export {
+  version,
+
+  // components
+  QasActions,
+  QasActionsMenu,
+  QasAlert,
+  QasAppBar,
+  QasAppMenu,
+  QasAvatar,
+  QasBox,
+  QasBreakline,
+  QasBtn,
+  QasCard,
+  QasCheckboxGroup,
+  QasCopy,
+  QasDateTimeInput,
+  QasDebugger,
+  QasDelete,
+  QasDialog,
+  QasDialogRouter,
+  QasField,
+  QasFilters,
+  QasFormGenerator,
+  QasFormView,
+  QasGallery,
+  QasGridGenerator,
+  QasInput,
+  QasLabel,
+  QasLayout,
+  QasListItems,
+  QasListView,
+  QasMap,
+  QasNestedFields,
+  QasNumericInput,
+  QasPageHeader,
+  QasPasswordInput,
+  QasPasswordStrengthChecker,
+  QasProfile,
+  QasResizer,
+  QasSearchBox,
+  QasSelect,
+  QasSelectList,
+  QasSignaturePad,
+  QasSignatureUploader,
+  QasSingleView,
+  QasSortable,
+  QasTableGenerator,
+  QasTabsGenerator,
+  QasTextTruncate,
+  QasTransfer,
+  QasUploader,
+
+  // plugin
+  Dialog,
+  NotifyError,
+  NotifySuccess,
+
+  install
+}

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "esmodules": true
-        }
-      }
-    ]
-  ]
-}

package/.storybook/main.js

@@ -1,35 +0,0 @@
-const ESLintPlugin = require('eslint-webpack-plugin')
-const path = require('path')
-
-module.exports = {
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-links',
-    '@storybook/addon-postcss'
-  ],
-
-  stories: [
-    '../**/*.stories.mdx',
-    '../**/*.stories.js'
-  ],
-
-  webpackFinal: webpack => {
-    webpack.module.rules.push({
-      include: path.resolve(__dirname, '../'),
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', {
-        loader: 'sass-loader',
-        options: {
-          additionalData: '@import \'quasar/src/css/variables.sass\';',
-          sourceMap: true
-        }
-      }],
-    })
-
-    webpack.plugins.push(
-      new ESLintPlugin({ extensions: ['vue'] })
-    )
-
-    return webpack
-  }
-}

package/.storybook/preview.js

@@ -1,26 +0,0 @@
-// Storybook
-import '@storybook/addon-console'
-
-// Quasar
-import '@quasar/extras/roboto-font/roboto-font.css'
-import '@quasar/extras/material-icons/material-icons.css'
-import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'
-
-import 'quasar/dist/quasar.min.css'
-
-import '../src/index.scss'
-import '../index.js'
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  viewMode: 'docs'
-}
-
-import Vue from 'vue'
-import storeModule from '../src/mocks/storeModule'
-
-import VueRouter from 'vue-router'
-Vue.use(VueRouter)
-
-import Vuex from 'vuex'
-Vue.use(Vuex)

package/debug.log

@@ -1 +0,0 @@
-[0112/132448.838:ERROR:directory_reader_win.cc(43)] FindFirstFile: O sistema n�o pode encontrar o caminho especificado. (0x3)

package/index.js

@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import Quasar from 'quasar'
-
-Vue.use(Quasar)

package/jest-setup.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom'

package/jest.config.json

@@ -1,22 +0,0 @@
-{
-  "moduleFileExtensions": [
-    "js",
-    "json",
-    "vue"
-  ],
-
-  "moduleNameMapper": {
-    "^@/(.*)$": "<rootDir>/$1"
-  },
-
-  "setupFilesAfterEnv": ["<rootDir>/jest-setup.js"],
-
-  "transform": {
-    ".*\\.(js)$": "babel-jest",
-    ".*\\.(vue)$": "vue-jest"
-  },
-
-  "transformIgnorePatterns": [
-    "node_modules"
-  ]
-}

package/postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: [
-    require('autoprefixer')
-  ]
-}

package/src/components/Introduction.stories.mdx

@@ -1,12 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks'
-
-<Meta title="Introduction" />
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/storybook-examples` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.

package/src/components/actions-menu/QasActionsMenu.stories.js

@@ -1,73 +0,0 @@
-import QasActionsMenu from './QasActionsMenu.vue'
-import { Notify } from 'quasar'
-
-export default {
-  component: QasActionsMenu,
-  title: 'Components/ActionsMenu',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Actions menu.'
-      }
-    }
-  },
-
-  argTypes: {
-    label: {
-      description: 'Button label.'
-    },
-
-    list: {
-      description: 'Actions list as an object containing `label`, `icon`, `props` and `handler` click event.'
-    },
-
-    hideLabel: {
-      description: 'Controls label visibility.'
-    },
-
-    icon: {
-      description: 'Icon button.'
-    },
-
-    // slots
-    '[dynamic-name]': {
-      description: 'Each key inside `list` have your own slot to be customized.',
-      table: {
-        category: 'slots',
-        defaultValue: {
-          detail: JSON.stringify({ item: 'string' }),
-          summary: '{}'
-        }
-      }
-    },
-
-    default: {
-      table: { disable: true }
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasActionsMenu },
-  props: Object.keys(argTypes),
-  template:
-    '<qas-actions-menu v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  block: {
-    handler: () => Notify.create('Block clicked!'),
-    icon: 'o_locked',
-    label: 'Block'
-  },
-
-  list: {
-    delete: {
-      handler: () => Notify.create('Delete clicked!'),
-      icon: 'o_delete',
-      label: 'Delete'
-    }
-  }
-}

package/src/components/app-bar/QasAppBar.stories.js

@@ -1,84 +0,0 @@
-import QasAppBar from './QasAppBar.vue'
-
-const noSummary = {
-  type: { summary: null }
-}
-
-export default {
-  component: QasAppBar,
-  title: 'Components/AppBar',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Creates application header with [QDrawer](https://quasar.dev/layout/drawer) menu and authenticated user data, such as name and photo.'
-      }
-    }
-  },
-
-  argTypes: {
-    brand: {
-      description: 'Brand image path.'
-    },
-
-    isAuth: {
-      description: 'Toggle visibility of user menu.'
-    },
-
-    title: {
-      description: '[QToolbarTitle](https://quasar.dev/vue-components/toolbar#QToolbarTitle-API).'
-    },
-
-    tools: {
-      description: '[QToolbar](https://quasar.dev/vue-components/toolbar) content.',
-      table: noSummary
-    },
-
-    user: {
-      description: 'User object with `name`, `giveName`, `email` and `to` keys.',
-      table: { ...noSummary, category: 'props' }
-    },
-
-    // Events
-    'sign-out': {
-      description: 'Fires when click on sign out button.',
-      table: noSummary
-    },
-
-    'toggle-menu': {
-      description: 'Fires when click on app menu button.',
-      table: noSummary
-    },
-
-    // Slots
-    // TODO: o nome da prop é o mesmo do slot, não consegui definir uma descrição para cada um, precisar rever
-    // Caio aqui: Vamos mudar o nome do slot para user-menu.
-    '[user]': {
-      description: 'User menu slot.',
-      table: {
-        category: 'slots',
-        ...noSummary
-      }
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasAppBar },
-  props: Object.keys(argTypes),
-  template:
-    '<qas-app-bar v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  brand: '//placehold.it/100',
-  isAuth: true,
-  title: 'My Title',
-  user: {
-    email: 'jon-snow@email.com',
-    name: 'Jon Snow',
-    photo: 'https://www.abc.net.au/cm/lb/6367016/data/alan2c-see-the-person-data.jpg'
-  }
-}