@bildvitta/quasar-ui-asteroid 2.12.2 → 2.14.0

package/src/components/field/QasField.vue

@@ -12,8 +12,8 @@
 <script>
 import QasCheckboxGroup from '../checkbox-group/QasCheckboxGroup.vue'
 import QasDateTimeInput from '../date-time-input/QasDateTimeInput.vue'
-import QasDecimalInput from '../decimal-input/QasDecimalInput.vue'
 import QasInput from '../input/QasInput.vue'
+import QasNumericInput from '../numeric-input/QasNumericInput.vue'
 import QasPasswordInput from '../password-input/QasPasswordInput.vue'
 import QasUploader from '../uploader/QasUploader.vue'
 import QasSignatureUploader from '../signature-uploader/QasSignatureUploader.vue'
@@ -30,8 +30,8 @@ export default {
   components: {
     QasCheckboxGroup,
     QasDateTimeInput,
-    QasDecimalInput,
     QasInput,
+    QasNumericInput,
     QasPasswordInput,
     QasUploader,
     QasSignatureUploader
@@ -96,8 +96,8 @@ export default {
         gmt
       }
 
+      const numericInput = { is: 'qas-numeric-input', ...input }
       const datetimeInput = { is: 'qas-date-time-input', gmt, ...input }
-      const decimalInput = { is: 'qas-decimal-input', comma: true, fillMask: '0', reverseFillMask: true, ...input }
 
       // It'll generate a list of acceptable files extensions.
       const accept = extensions && extensions.length ? extensions.map(extension => `.${extension}`).join(',') : ''
@@ -121,9 +121,9 @@ export default {
         email: { is: 'q-input', type, ...input },
         password: { is: 'qas-password-input', type, pattern, hideStrengthChecker: !pattern, ...input },
 
-        decimal: { ...decimalInput },
-        money: { ...decimalInput, prefix: 'R$' },
-        percent: { ...decimalInput, suffix: '%' },
+        decimal: { ...numericInput, mode: 'decimal' },
+        money: { ...numericInput, mode: 'money' },
+        percent: { ...numericInput, mode: 'percent' },
 
         date: { ...datetimeInput, dateOnly: true },
         datetime: { ...datetimeInput },

package/src/components/filters/QasFilters.vue

@@ -41,7 +41,7 @@
     </div>
 
     <div v-if="badges && hasActiveFilters" class="q-mt-md">
-      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ handleChipValue(filterItem.value) }}"</q-chip>
+      <q-chip v-for="(filterItem, key) in activeFilters" :key="key" color="grey-4" dense removable size="md" text-color="grey-8" @remove="removeFilter(filterItem)">{{ filterItem.label }} = "{{ getChipValue(filterItem.value) }}"</q-chip>
     </div>
 
     <slot :context="context" :filter="filter" :filters="activeFilters" :removeFilter="removeFilter" />
@@ -122,7 +122,7 @@ export default {
         const hasField = fields.includes(key)
 
         if (hasField) {
-          const value = humanize(this.fields[key], filters[key])
+          const value = humanize(this.fields[key], this.normalizeValues(filters[key], this.fields[key]?.multiple))
           const { label, name } = this.fields[key]
 
           activeFilters[key] = { label, name, value }

package/src/components/layout/QasLayout.stories.js

@@ -0,0 +1,104 @@
+import QasLayout from './QasLayout.vue'
+
+export default {
+  component: QasLayout,
+  title: 'Components/Layout',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Implementation of [QLayout](https://quasar.dev/layout/layout#introduction) with [QasAppMenu](http://localhost:6006/?path=/docs/components-appmenu--default) and [QasAppBar](http://localhost:6006/?path=/docs/components-appbar--default).'
+      }
+    }
+  },
+
+  argTypes: {
+    // Props
+    appMenuProps: {
+      description: '[QasAppMenu props](http://localhost:6006/?path=/docs/components-appmenu--default).'
+    },
+
+    appBarProps: {
+      description: '[QasAppBar props](http://localhost:6006/?path=/docs/components-appbar--default).'
+    },
+
+    appMenuEvents: {
+      description: '[QasAppMenu events](http://localhost:6006/?path=/docs/components-appmenu--default).'
+    },
+
+    appBarEvents: {
+      description: '[QasAppBar events](http://localhost:6006/?path=/docs/components-appbar--default).'
+    },
+
+    value: {
+      description: 'Model value for toggle drawer.'
+    },
+
+    // Slots
+    'app-bar': {
+      description: 'header slot.'
+    },
+
+    'app-menu': {
+      description: 'left side menu.'
+    },
+
+    default: {
+      description: 'page container with router-view.'
+    },
+
+    // events
+    input: {
+      description: 'input model event for toggle drawer.'
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { QasLayout },
+  props: Object.keys(argTypes),
+
+  template: '<qas-layout v-bind="$props" />'
+})
+
+export const Default = Template.bind({})
+
+Default.args = {
+  appMenuProps: {
+    items: [
+      {
+        label: 'Dialog',
+        icon: 'o_home',
+        to: { path: '/dialog-form' }
+      },
+
+      {
+        label: 'Teste expansivo',
+        icon: 'o_edit'
+      }
+    ],
+
+    modules: [
+      {
+        label: 'Modulo de teste',
+        value: 'test',
+        path: 'http://localhost:8080'
+      },
+      {
+        label: 'Segundo modulo de teste',
+        value: 'test-2',
+        path: 'https://google.com'
+      }
+    ]
+  },
+
+  appBarProps: {
+    isAuth: true,
+    title: 'Some title',
+    user: {
+      photo: 'https://www.abc.net.au/cm/lb/6367016/data/alan2c-see-the-person-data.jpg',
+      name: 'Eduardo Lima',
+      email: 'eduardolima@gmail.com'
+    }
+  }
+}

package/src/components/layout/QasLayout.vue

@@ -0,0 +1,89 @@
+<template>
+  <q-layout view="hHh Lpr lFf">
+    <slot name="app-bar">
+      <qas-app-bar v-bind="appBarProps" v-on="appBarEvents" @toggle-menu="toggleMenuDrawer" />
+    </slot>
+
+    <slot name="app-menu">
+      <qas-app-menu v-model="menuDrawer" v-bind="defaultAppMenuProps" v-on="appMenuEvents" />
+    </slot>
+
+    <slot>
+      <q-page-container>
+        <router-view />
+      </q-page-container>
+    </slot>
+  </q-layout>
+</template>
+
+<script>
+import QasAppMenu from '../app-menu/QasAppMenu'
+import QasAppBar from '../app-bar/QasAppBar'
+
+export default {
+  name: 'QasLayout',
+
+  components: {
+    QasAppMenu,
+    QasAppBar
+  },
+
+  props: {
+    value: {
+      default: true,
+      type: Boolean
+    },
+
+    appBarEvents: {
+      default: () => ({}),
+      type: Object
+    },
+
+    appBarProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    appMenuProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    appMenuEvents: {
+      default: () => ({}),
+      type: Object
+    }
+  },
+
+  data () {
+    return {
+      menuDrawer: true
+    }
+  },
+
+  computed: {
+    defaultAppMenuProps () {
+      return {
+        ...this.appMenuProps,
+        title: this.appBarProps?.title
+      }
+    }
+  },
+
+  watch: {
+    value: {
+      handler (value) {
+        this.menuDrawer = value
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    toggleMenuDrawer () {
+      this.menuDrawer = !this.menuDrawer
+      this.$emit('input', this.menuDrawer)
+    }
+  }
+}
+</script>

package/src/components/{decimal-input/QasDecimalInput.stories.js → numeric-input/QasNumericInput.stories.js}

@@ -1,25 +1,41 @@
-import QasDecimalInput from './QasDecimalInput.vue'
+import QasNumericInput from './QasNumericInput.vue'
 
 export default {
-  component: QasDecimalInput,
-  title: 'Components/DecimalInput',
+  component: QasNumericInput,
+  title: 'Components/NumericInput',
 
   parameters: {
     docs: {
       description: {
-        component: 'Extends [QInput](https://quasar.dev/vue-components/input), but with decimal mask.'
+        component: 'Extends [QInput](https://quasar.dev/vue-components/input) with [AutoNumeric](http://autonumeric.org/) plugin.'
       }
     }
   },
 
   argTypes: {
     // Props
-    comma: {
-      description: 'Use comma instead of period as decimal separator.'
+    allowNegative: {
+      description: 'Allow negative values.'
     },
 
-    places: {
-      description: 'Number of decimal places.'
+    allowPositive: {
+      description: 'Allow positive values.'
+    },
+
+    autonumericProps: {
+      description: '(Autonumeric)[http://autonumeric.org/guide] options.'
+    },
+
+    decimalPlaces: {
+      description: 'Decimal places.'
+    },
+
+    mode: {
+      description: 'Component mode like integer, decimal, percent, and money.'
+    },
+
+    preset: {
+      description: 'Property to configure default nationality of currency.'
     },
 
     value: {
@@ -35,16 +51,12 @@ export default {
           summary: '{}'
         }
       }
-    },
-
-    mount: {
-      table: { disable: true }
     }
   }
 }
 
 const Template = (args, { argTypes }) => ({
-  components: { QasDecimalInput },
+  components: { QasNumericInput },
   props: Object.keys(argTypes),
 
   data () {
@@ -55,7 +67,7 @@ const Template = (args, { argTypes }) => ({
 
   template:
     `<div>
-      <qas-decimal-input v-bind="$props" v-model="model" />
+      <qas-numeric-input v-bind="$props" v-model="model" />
       <pre>{{ model }}</pre>
     </div>`
 })
@@ -64,19 +76,17 @@ export const Default = Template.bind({})
 
 Default.parameters = {
   docs: {
-    source: { code: '<qas-decimal-input v-model="model" />' }
+    source: { code: '<qas-numeric-input v-model="model" />' }
   }
 }
 
 export const BrazilianReal = Template.bind({})
 
 BrazilianReal.args = {
-  comma: true,
-  prefix: 'R$'
 }
 
 BrazilianReal.parameters = {
   docs: {
-    source: { code: '<qas-decimal-input v-model="model" comma prefix="R$" />' }
+    source: { code: '<qas-numeric-input v-model="model" />' }
   }
 }

package/src/components/numeric-input/QasNumericInput.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <q-field v-model="model" v-bind="$attrs">
+      <template #control="{ emitValue, floatingLabel, id, value: modelValue }">
+        <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :model-value="modelValue" @input="emitValue($event.target.value)">
+      </template>
+    </q-field>
+  </div>
+</template>
+
+<script>
+const defaultModes = {
+  integer: ['commaDecimalCharDotSeparator', 'integer'],
+  decimal: 'commaDecimalCharDotSeparator',
+  percent: 'percentageEU2dec',
+  money: 'Brazilian'
+}
+
+export default {
+  props: {
+    allowNegative: {
+      default: true,
+      type: Boolean
+    },
+
+    allowPositive: {
+      default: true,
+      type: Boolean
+    },
+
+    autonumericProps: {
+      default: () => ({}),
+      type: Object
+    },
+
+    decimalPlaces: {
+      default: 2,
+      type: Number
+    },
+
+    mode: {
+      default: 'integer',
+      type: String,
+      validator: value => ['integer', 'decimal', 'percent', 'money'].includes(value)
+    },
+
+    preset: {
+      default: false,
+      type: [Boolean, String]
+    },
+
+    value: {
+      default: '',
+      validator (value) {
+        return typeof value === 'number' || typeof value === 'string' || value === '' || value === null
+      }
+    }
+  },
+
+  data () {
+    return {
+      autoNumeric: null
+    }
+  },
+
+  computed: {
+    defaultMode () {
+      return defaultModes[this.mode]
+    },
+
+    model: {
+      get () {
+        return this.value
+      },
+
+      set () {
+        this.$emit('input', this.autoNumeric.getNumber())
+      }
+    }
+  },
+
+  async created () {
+    const AutoNumeric = (await import('autonumeric')).default
+    const autoNumericPredefinedOptions = AutoNumeric.getPredefinedOptions()
+
+    let option = this.preset || this.defaultMode
+
+    if (!Array.isArray(option)) {
+      option = [option]
+    }
+
+    const options = {}
+
+    for (const value of option) {
+      Object.assign(options, autoNumericPredefinedOptions[value])
+    }
+
+    if (!this.allowNegative) {
+      options.minimumValue = 0
+    }
+
+    if (!this.allowPositive) {
+      options.maximumValue = 0
+    }
+
+    if (this.mode !== 'integer') {
+      options.decimalPlaces = this.decimalPlaces
+    }
+
+    Object.assign(options, this.autonumericProps)
+
+    this.$nextTick(() => {
+      this.$refs.input.value = this.value
+      this.autoNumeric = new AutoNumeric(this.$refs.input, options)
+    })
+  },
+
+  beforeDestroy () {
+    this.autoNumeric.remove()
+  }
+}
+</script>

package/src/components/select/QasSelect.vue

@@ -26,6 +26,8 @@
 
 <script>
 export default {
+  name: 'QasSelect',
+
   props: {
     fuseOptions: {
       default: () => ({}),

package/src/helpers/filters.js

@@ -96,6 +96,8 @@ function handleMasks (value) {
 
 // Labels
 function humanize (field = {}, value) {
+  if (!value) return value
+
   const mappedMasks = handleMasks(value)
 
   if (mappedMasks[field.mask]) {

package/src/helpers/index.js

@@ -1,8 +1,9 @@
 import base64ToBlob from './base64ToBlob.js'
+import constructObject from './constructObject.js'
 import filterObject from './filter-object.js'
 import greatestCommonDivisor from './greatestCommonDivisor.js'
+import isLocalDevelopment from './isLocalDevelopment.js'
 import { history, handleHistory } from './historyHandler.js'
-import constructObject from './constructObject.js'
 
 import {
   asset,
@@ -53,5 +54,6 @@ export {
 
   base64ToBlob,
   filterObject,
-  greatestCommonDivisor
+  greatestCommonDivisor,
+  isLocalDevelopment
 }

package/src/helpers/isLocalDevelopment.js

@@ -0,0 +1,3 @@
+export default function () {
+  return ['localhost', '127.0.0.1'].includes(window.location.hostname)
+}

package/src/index.js

@@ -14,7 +14,6 @@ import QasCheckboxGroup from './components/checkbox-group/QasCheckboxGroup'
 import QasCopy from './components/copy/QasCopy'
 import QasDateTimeInput from './components/date-time-input/QasDateTimeInput'
 import QasDebugger from './components/debugger/QasDebugger'
-import QasDecimalInput from './components/decimal-input/QasDecimalInput'
 import QasDelete from './components/delete/QasDelete'
 import QasDialog from './components/dialog/QasDialog'
 import QasDialogRouter from './components/dialog-router/QasDialogRouter'
@@ -26,10 +25,12 @@ import QasGallery from './components/gallery/QasGallery'
 import QasGridGenerator from './components/grid-generator/QasGridGenerator'
 import QasInput from './components/input/QasInput'
 import QasLabel from './components/label/QasLabel'
+import QasLayout from './components/layout/QasLayout'
 import QasListItems from './components/list-items/QasListItems'
 import QasListView from './components/list-view/QasListView'
 import QasMap from './components/map/QasMap'
 import QasNestedFields from './components/nested-fields/QasNestedFields'
+import QasNumericInput from './components/numeric-input/QasNumericInput'
 import QasPageHeader from './components/page-header/QasPageHeader'
 import QasPasswordInput from './components/password-input/QasPasswordInput'
 import QasPasswordStrengthChecker from './components/password-strength-checker/QasPasswordStrengthChecker'
@@ -87,7 +88,6 @@ export {
   QasCopy,
   QasDateTimeInput,
   QasDebugger,
-  QasDecimalInput,
   QasDelete,
   QasDialog,
   QasDialogRouter,
@@ -99,10 +99,12 @@ export {
   QasGridGenerator,
   QasInput,
   QasLabel,
+  QasLayout,
   QasListItems,
   QasListView,
   QasMap,
   QasNestedFields,
+  QasNumericInput,
   QasPageHeader,
   QasPasswordInput,
   QasPasswordStrengthChecker,
@@ -146,7 +148,6 @@ export default {
   QasCopy,
   QasDateTimeInput,
   QasDebugger,
-  QasDecimalInput,
   QasDelete,
   QasDialog,
   QasDialogRouter,
@@ -158,10 +159,12 @@ export default {
   QasGridGenerator,
   QasInput,
   QasLabel,
+  QasLayout,
   QasListItems,
   QasListView,
   QasMap,
   QasNestedFields,
+  QasNumericInput,
   QasPageHeader,
   QasPasswordInput,
   QasPasswordStrengthChecker,
@@ -204,7 +207,6 @@ export default {
     Vue.component('QasCopy', QasCopy)
     Vue.component('QasDateTimeInput', QasDateTimeInput)
     Vue.component('QasDebugger', QasDebugger)
-    Vue.component('QasDecimalInput', QasDecimalInput)
     Vue.component('QasDelete', QasDelete)
     Vue.component('QasDialog', QasDialog)
     Vue.component('QasDialogRouter', QasDialogRouter)
@@ -216,10 +218,12 @@ export default {
     Vue.component('QasGridGenerator', QasGridGenerator)
     Vue.component('QasInput', QasInput)
     Vue.component('QasLabel', QasLabel)
+    Vue.component('QasLayout', QasLayout)
     Vue.component('QasListItems', QasListItems)
     Vue.component('QasListView', QasListView)
     Vue.component('QasMap', QasMap)
     Vue.component('QasNestedFields', QasNestedFields)
+    Vue.component('QasNumericInput', QasNumericInput)
     Vue.component('QasPageHeader', QasPageHeader)
     Vue.component('QasPasswordInput', QasPasswordInput)
     Vue.component('QasPasswordStrengthChecker', QasPasswordStrengthChecker)

package/src/index.scss

@@ -9,7 +9,7 @@ $secondary-contrast: var(--q-color-secondary-contrast);
 
 // Asteroid variables
 :root {
-  --qas-background-color: #fcfcff;
+  --qas-background-color: #f5f5f5;
   --qas-generic-border-radius: 8px;
 }
 

package/src/components/decimal-input/QasDecimalInput.vue

@@ -1,90 +0,0 @@
-<template>
-  <q-input v-bind="$attrs" fill-mask="0" :mask="mask" reverse-fill-mask :value="inputValue" v-on="events" @input="input" />
-</template>
-
-<script>
-export default {
-  props: {
-    comma: {
-      default: false,
-      type: Boolean
-    },
-
-    places: {
-      default: 2,
-      type: Number
-    },
-
-    value: {
-      default: 0,
-      required: true,
-      type: Number
-    }
-  },
-
-  data () {
-    return {
-      inputValue: this.toMask(this.value),
-      inputedValue: 0
-    }
-  },
-
-  computed: {
-    events () {
-      const { input, ...events } = this.$listeners
-      return events
-    },
-
-    mask () {
-      return `#${this.separator}${'#'.repeat(this.places)}`
-    },
-
-    separator () {
-      return this.comma ? ',' : '.'
-    }
-  },
-
-  watch: {
-    value (current) {
-      this.inputValue = this.toMask(current)
-    }
-  },
-
-  mounted () {
-    this.$emit('mount', this)
-  },
-
-  methods: {
-    blur () {
-      this.$el.blur()
-    },
-
-    focus () {
-      this.$el.focus()
-    },
-
-    input (value) {
-      this.inputedValue = this.toDecimal(value)
-      this.$emit('input', this.inputedValue)
-    },
-
-    toDecimal (value) {
-      if (this.comma) {
-        value = value.replace(',', '.')
-      }
-
-      return parseFloat(value)
-    },
-
-    toMask (value) {
-      value = value.toFixed(this.places)
-
-      if (this.comma) {
-        value = value.replace('.', ',')
-      }
-
-      return value
-    }
-  }
-}
-</script>