@bildvitta/quasar-ui-asteroid 2.16.0 → 3.0.0-alpha.2

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/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'
-}

package/src/components/dialog/QasDialog.stories.js

@@ -1,139 +0,0 @@
-import QasDialog from './QasDialog.vue'
-import QasBtn from '../btn/QasBtn.vue'
-
-const noSummary = {
-  type: { summary: null }
-}
-
-export default {
-  component: QasDialog,
-  title: 'Components/Dialog',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Extends [QDialog](https://quasar.dev/vue-components/dialog).'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    btnActions: {
-      description: 'Props of QasBtnActions component.'
-    },
-
-    cancel: {
-      description: '[QBtn](https://quasar.dev/vue-components/button) props and events for "Cancel" button. Use `props` and `events` keys to configure the component, or use `false` to hide the button.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ props: { label: 'Cancel', outline: true } }),
-          summary: '{}'
-        }
-      }
-    },
-
-    card: {
-      description: 'Content of [QCard](https://quasar.dev/vue-components/card), mast have key <strong>title</strong> and <strong>description</strong>'
-    },
-
-    cardProps: {
-      description: 'Props of [QCard](https://quasar.dev/vue-components/card) component.'
-    },
-
-    maxWidth: {
-      description: 'Max width of QCard.',
-      table: {
-        defaultValue: { summary: '600px' }
-      }
-    },
-
-    minWidth: {
-      description: 'Min width of QCard.',
-      table: {
-        defaultValue: { summary: '400px' }
-      }
-    },
-
-    ok: {
-      description: '[QBtn](https://quasar.dev/vue-components/button) props and events for "Ok" button. Use `props` and `events` keys to configure the component, or use `false` to hide the button.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ props: { label: 'Ok' } }),
-          summary: '{}'
-        }
-      }
-    },
-
-    persistent: {
-      description: 'User cannot dismiss [QDialog](https://quasar.dev/vue-components/dialog) if clicking outside of it or hitting ESC key. Also, an app route change won\'t dismiss it.'
-    },
-
-    value: {
-      description: 'Model value to toggle the visibility of the dialog.',
-      table: {
-        control: { summary: null },
-        defaultValue: { summary: true }
-      }
-    },
-
-    useForm: {
-      description: 'Generate form and trigger validate based input rules'
-    },
-
-    // Events
-    input: {
-      description: 'Fires when toggles the dialog\'s visibility.'
-    },
-
-    // Slots
-    actions: {
-      description: 'Actions slot.',
-      table: noSummary
-    },
-
-    description: {
-      description: 'Description slot.',
-      table: noSummary
-    },
-
-    header: {
-      description: 'Header slot',
-      table: noSummary
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasBtn, QasDialog },
-  props: Object.keys(argTypes),
-
-  data () {
-    return {
-      dialog: false
-    }
-  },
-
-  template:
-    `<div>
-      <qas-btn label="Open dialog!" @click="dialog = !dialog"/>
-      <qas-dialog v-bind="$props" v-model="dialog" />
-    </div>`
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  cancel: {
-    props: { label: 'Cancel', outline: true }
-  },
-
-  card: {
-    description: 'This is a description.',
-    title: 'This is a title.'
-  },
-
-  ok: {
-    props: { label: 'Ok, thanks!' }
-  }
-}

package/src/components/dialog-router/QasDialogRouter.stories.js

@@ -1,38 +0,0 @@
-import VueRouter from 'vue-router'
-
-import QasBtn from '../btn/QasBtn.vue'
-import QasDialogRouter from './QasDialogRouter.vue'
-
-export default {
-  component: QasDialogRouter,
-  title: 'Components/DialogRouter',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Open an Vue component (like a page) inside [QDialog](https://quasar.dev/vue-components/dialog).'
-      }
-    }
-  },
-
-  argTypes: {
-    hide: {
-      description: 'Controls dialog\'s visibility.'
-    }
-  }
-}
-
-// TODO: Fazer um mock de componente na rota para o exemplo funcionar.
-const Template = (args, { argTypes }) => ({
-  components: { QasBtn, QasDialogRouter },
-  props: Object.keys(argTypes),
-  router: new VueRouter(),
-  template:
-    `<div>
-      <qas-btn label="Open dialog" @click="$refs.dialog.show('')" />
-      <qas-dialog-router ref="dialog" v-bind="$props" />
-    </div>`
-})
-
-export const Default = Template.bind({})
-Default.args = {}