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

package/src/components/btn-actions/QasBtnActions.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="row" :class="btnActionsClass">
-    <div class="col-sm-auto" :class="secondaryClass">
-      <slot name="secondary" />
-    </div>
-
-    <div class="col-sm-auto" :class="primaryClass">
-      <slot name="primary" />
-    </div>
-  </div>
-</template>
-
-<script>
-// TODO: Renomear componente.
-export default {
-  props: {
-    align: {
-      type: String,
-      default: 'end',
-      validator:
-        value => ['start', 'around', 'between', 'center', 'end'].includes(value)
-    },
-
-    btnCol: {
-      type: String,
-      default: ''
-    },
-
-    gutter: {
-      type: String,
-      default: 'md',
-      validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value)
-    }
-  },
-
-  computed: {
-    btnActionsClass () {
-      return `justify-${this.align} q-col-gutter-${this.gutter}`
-    },
-
-    isSmallScreen () {
-      return this.$q.screen.xs
-    },
-
-    primaryClass () {
-      return this.btnCol || (this.isSmallScreen && 'col-12 order-first')
-    },
-
-    secondaryClass () {
-      return this.btnCol || (this.isSmallScreen && 'col-12 order-last')
-    }
-  }
-}
-</script>

package/src/components/card/QasCard.stories.js

@@ -1,126 +0,0 @@
-import QasCard from './QasCard.vue'
-
-const noSummary = {
-  type: { summary: null }
-}
-
-export default {
-  component: QasCard,
-  title: 'Components/Card',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Simple card component.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    bgImagePosition: {
-      description: 'Define a position of the background image.'
-    },
-
-    images: {
-      description: 'List of images.'
-    },
-
-    gutter: {
-      description: 'Gutter space by Quasar convention. `q-col-gutter-{$gutter}`.'
-    },
-
-    outlined: {
-      description: 'Changes the component style.'
-    },
-
-    useHeader: {
-      description: 'Shows the header section.'
-    },
-
-    // Slots
-    actions: {
-      description: 'Bottom section for actions.',
-      table: noSummary
-    },
-
-    'carousel-header': {
-      description: 'Header of the carousel section',
-      table: noSummary
-    },
-
-    default: {
-      description: 'Main content.',
-      table: noSummary
-    },
-
-    header: {
-      description: 'Header content.',
-      table: noSummary
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasCard },
-  props: Object.keys(argTypes),
-  template:
-  `<div class="q-col-gutter-md q-pa-md row">
-    <qas-card :images="images" use-header>
-      <template #default>
-        <div>{{ result.name }}</div>
-        <div>{{ result.email }}</div>
-      </template>
-      <template #actions>
-        <q-icon color="primary" class="col-grow" name="o_edit" />
-        <q-icon color="primary" class="col-grow" name="o_delete" />
-        <q-icon color="primary" class="col-grow" name="o_photo_camera" />
-      </template>
-    </qas-card>
-    <qas-card :images="images" use-header>
-      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-    </qas-card>
-    <qas-card :images="images" use-header>
-      <template #default>
-        <div>{{ result.name }}</div>
-        <div>{{ result.email }}</div>
-      </template>
-      <template #actions>
-        <div class="full-width">
-          <div class="text-blue text-bold text-center">Ver mais</div>
-        </div>
-      </template>
-    </qas-card>
-  </div>`
-})
-
-const images = [
-  'https://cdn.pixabay.com/photo/2016/10/10/12/54/space-1728314_960_720.jpg',
-  'https://cdn.pixabay.com/photo/2011/12/14/12/21/orion-nebula-11107_960_720.jpg',
-  'https://cdn.pixabay.com/photo/2016/10/10/12/54/space-1728314_960_720.jpg',
-  'https://cdn.pixabay.com/photo/2011/12/14/12/21/orion-nebula-11107_960_720.jpg'
-]
-
-const result = {
-  name: 'John Appleseed',
-  email: 'john.appleseed@example.com',
-  phone: '99999999999',
-  gender: 'Male',
-  document: '99999999999',
-  address: '747 Austen View'
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  images,
-  result
-}
-
-Default.parameters = {
-  docs: {
-    source: {
-      code:
-      '<qas-card :images="images" :result="result" />'
-    }
-  }
-}

package/src/components/checkbox-group/QasCheckboxGroup.stories.js

@@ -1,59 +0,0 @@
-import QasCheckboxGroup from './QasCheckboxGroup.vue'
-
-export default {
-  component: QasCheckboxGroup,
-  title: 'Components/CheckboxGroup',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'List a collection of checkbox fields, implements [QOptionGroup](https://quasar.dev/vue-components/option-group) and [QCheckbox](https://quasar.dev/vue-components/checkbox).'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    options: {
-      description: 'List of checkbox groups with your children. Each group item has `label` and `children` array, and each checkbox has a `label` and a `value`.'
-    },
-
-    value: {
-      description: 'An array with all selected checkboxes value.'
-    },
-
-    // Events
-    input: {
-      description: 'Fires when any checkbox changes.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasCheckboxGroup },
-  props: Object.keys(argTypes),
-
-  data () {
-    return { model: [] }
-  },
-
-  template:
-    `<div>
-      <qas-checkbox-group v-model="model" v-bind="$props" />
-      <pre>{{model}}</pre>
-    </div>`
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  options: [
-    {
-      label: 'Checkbox exemple',
-      children: [
-        { label: 'Children 1', value: 1 },
-        { label: 'Children 2', value: 2 }
-      ]
-    }
-  ]
-}

package/src/components/copy/QasCopy.stories.js

@@ -1,41 +0,0 @@
-import QasCopy from './QasCopy.vue'
-
-export default {
-  component: QasCopy,
-  title: 'Components/Copy',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Copy some text to clipboard.'
-      }
-    }
-  },
-
-  argTypes: {
-    icon: {
-      description: 'Icon name following Quasar convention.'
-    },
-
-    label: {
-      description: 'Text to be copied.'
-    },
-
-    size: {
-      description: 'Size of your icon'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasCopy },
-  props: Object.keys(argTypes),
-  template:
-    '<qas-copy v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  label: 'Click here!'
-}

package/src/components/date-time-input/QasDateTimeInput.stories.js

@@ -1,67 +0,0 @@
-import QasDateTimeInput from './QasDateTimeInput.vue'
-
-export default {
-  component: QasDateTimeInput,
-  title: 'Components/DateTimeInput',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Field to input or select date and time.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    dateMask: {
-      description: 'Mask string to parse and format date value.'
-    },
-
-    dateOnly: {
-      description: 'For date only mode.'
-    },
-
-    dateOptions: {
-      description: 'Bypass [QDate](https://quasar.dev/vue-components/date) props.'
-    },
-
-    gmt: {
-      description: 'Use GMT (Greenwich Mean Time) on date input'
-    },
-
-    timeMask: {
-      description: 'Mask string to parse and format time value.'
-    },
-
-    timeOnly: {
-      description: 'For time only mode.'
-    },
-
-    timeOptions: {
-      description: 'Bypass [QTime](https://quasar.dev/vue-components/time) props'
-    },
-
-    value: {
-      description: 'Sets the input value by ISO 8601.'
-    },
-
-    // Events
-    input: {
-      description: 'Fires when the value changes.'
-    },
-
-    mounted: {
-      description: 'Fires when the component mounts.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasDateTimeInput },
-  props: Object.keys(argTypes),
-  template:
-    '<qas-date-time-input v-bind="$props" />'
-})
-
-export const Default = Template.bind({})

package/src/components/debugger/QasDebugger.stories.js

@@ -1,33 +0,0 @@
-import QasDebugger from './QasDebugger.vue'
-
-export default {
-  component: QasDebugger,
-  title: 'Components/Debugger',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Facilitates reactive values debug (development only).'
-      }
-    }
-  },
-
-  argTypes: {
-    inspect: {
-      control: 'object',
-      description: 'An array with items that will be inspected.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasDebugger },
-  props: Object.keys(argTypes),
-  template: '<qas-debugger v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  inspect: ['A string', 43110, ['An', 'array'], { An: 'object' }, true]
-}

package/src/components/decimal-input/QasDecimalInput.stories.js

@@ -1,82 +0,0 @@
-import QasDecimalInput from './QasDecimalInput.vue'
-
-export default {
-  component: QasDecimalInput,
-  title: 'Components/DecimalInput',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Extends [QInput](https://quasar.dev/vue-components/input), but with decimal mask.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    comma: {
-      description: 'Use comma instead of period as decimal separator.'
-    },
-
-    places: {
-      description: 'Number of decimal places.'
-    },
-
-    value: {
-      description: 'Model value.'
-    },
-
-    // Events
-    input: {
-      description: 'Emitted when the component needs to change the model. Is also used by `v-model`.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ value: 'number' }),
-          summary: '{}'
-        }
-      }
-    },
-
-    mount: {
-      table: { disable: true }
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasDecimalInput },
-  props: Object.keys(argTypes),
-
-  data () {
-    return {
-      model: 0
-    }
-  },
-
-  template:
-    `<div>
-      <qas-decimal-input v-bind="$props" v-model="model" />
-      <pre>{{ model }}</pre>
-    </div>`
-})
-
-export const Default = Template.bind({})
-
-Default.parameters = {
-  docs: {
-    source: { code: '<qas-decimal-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$" />' }
-  }
-}

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

@@ -1,92 +0,0 @@
-<template>
-  <div>
-    <q-input v-bind="$attrs" fill-mask="0" :mask="mask" reverse-fill-mask :value="inputValue" v-on="events" @input="input" />
-  </div>
-</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>

package/src/components/delete/QasDelete.stories.js

@@ -1,80 +0,0 @@
-import QasDelete from './QasDelete.vue'
-
-const noSummary = {
-  type: { summary: null }
-}
-
-export default {
-  component: QasDelete,
-  title: 'Components/Delete',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Button to delete an entity\'s entry.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    color: {
-      table: { disable: true }
-    },
-
-    customId: {
-      description: 'Custom identifier to be deleted (by default, the component will get the `id` route\'s param).'
-    },
-
-    dialog: {
-      description: 'Events and props of QasDialog component.'
-    },
-
-    entity: {
-      description: '[VuexStoreModule](https://github.com/bildvitta/vuex-store-module) entity.'
-    },
-
-    label: {
-      table: { disable: true }
-    },
-
-    tag: {
-      description: 'Vue component or HTML element tag.'
-    },
-
-    url: {
-      description: 'It changes the default destroy url'
-    },
-
-    // Events
-    error: {
-      description: 'Fires when occur an error deleting item.',
-      table: noSummary
-    },
-
-    success: {
-      description: 'Fires when item is successfully deleted.',
-      table: noSummary
-    },
-
-    // Slots
-    default: {
-      description: 'Main content.',
-      table: noSummary
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasDelete },
-  props: Object.keys(argTypes),
-  template:
-    '<qas-delete v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  color: 'negative',
-  label: 'Delete'
-}