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

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

package/src/components/app-menu/QasAppMenu.stories.js

@@ -1,66 +0,0 @@
-import QasAppMenu from './QasAppMenu.vue'
-
-export default {
-  component: QasAppMenu,
-  title: 'Components/AppMenu',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Creates a top-level drawer menu from an array of items.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    itemClass: {
-      description: 'CSS classes for each item on menu, including children.'
-    },
-
-    items: {
-      description: 'Array of object with menu items. Can receive a children items with same structure (first level only).'
-    },
-
-    scrollAreaClass: {
-      description: 'CSS classes for the scroll area component.'
-    },
-
-    value: {
-      description: 'Controls drawer menu visibility.'
-    },
-
-    title: {
-      description: 'Title for displaying inside "modules" as label when is in development (local).'
-    },
-
-    // Events
-    input: {
-      description: 'Fires when opening or closing the drawer menu.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasAppMenu },
-  props: Object.keys(argTypes),
-  template:
-    `<q-layout class="shadow-1" container style="height: 300px" view="hHh Lpr lff">
-      <qas-app-menu v-bind="$props" />
-    </q-layout>`
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  items: [
-    { label: 'single item' },
-    { label: 'with icon', icon: 'today' },
-    {
-      label: 'with children',
-      children: [
-        { label: 'children 1' },
-        { label: 'children 2' }
-      ]
-    }
-  ]
-}

package/src/components/apps-menu/QasAppsMenu.spec.js

@@ -1,58 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils'
-
-import '@/index.js'
-import QasAppsMenu from './QasAppsMenu.vue'
-
-describe('Test QasAppsMenu component', () => {
-  const apps = [
-    {
-      image: '//placehold.it/100',
-      label: 'My image',
-      href: 'https://www.google.com'
-    },
-    {
-      image: 'aaaaaaaaa//placehold.it/100',
-      label: 'My image',
-      href: 'https://www.google.com'
-    },
-    {
-      image: '//placehold.it/100',
-      label: 'My image',
-      href: 'https://www.google.com'
-    }
-  ]
-
-  const shallowWrapper = shallowMount(QasAppsMenu, {
-    propsData: {
-      apps
-    }
-  })
-
-  const wrapper = mount(QasAppsMenu, {
-    propsData: {
-      apps
-    }
-  })
-
-  it('Open menu', async () => {
-    await wrapper.trigger('click')
-    const menuElement = document.querySelector('.q-menu')
-
-    expect(menuElement).toBeVisible()
-  })
-
-  it('check links', async () => {
-    const links = shallowWrapper.findAll('[data-test="apps-menu-link"]')
-
-    expect(links).toHaveLength(3)
-
-    for (let index = 1; index < links.length; index++) {
-      const linkWrapper = links.at(index)
-      const avatarWrapper = linkWrapper.get('img')
-
-      expect(avatarWrapper.isVisible()).toBe(true)
-      expect(linkWrapper.text()).toBe('My image')
-      expect(linkWrapper.attributes().href).toBe('https://www.google.com')
-    }
-  })
-})

package/src/components/apps-menu/QasAppsMenu.stories.js

@@ -1,54 +0,0 @@
-import QasAppsMenu from './QasAppsMenu.vue'
-
-export default {
-  component: QasAppsMenu,
-  title: 'Components/AppsMenu',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Menu button for apps ecosystem.'
-      }
-    }
-  },
-
-  argTypes: {
-    apps: {
-      description: 'List of apps with `href`, `label` and `image`.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasAppsMenu },
-  props: Object.keys(argTypes),
-  template:
-    '<qas-apps-menu v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  apps: [
-    {
-      href: 'https://google.com',
-      image: '//placehold.it/100',
-      label: 'Company 1'
-    },
-    {
-      href: 'https://google.com',
-      image: '//placehold.it/100',
-      label: 'Company 2'
-    },
-    {
-      href: 'https://google.com',
-      image: '//placehold.it/100',
-      label: 'Company 3'
-    },
-    {
-      href: 'https://google.com',
-      image: '//placehold.it/100',
-      label: 'Company 4'
-    }
-  ]
-}

package/src/components/apps-menu/QasAppsMenu.vue

@@ -1,48 +0,0 @@
-<template>
-  <q-btn v-bind="$attrs" dense icon="o_apps" round unelevated>
-    <q-menu anchor="bottom middle" max-width="400px" self="top middle">
-      <div class="q-col-gutter-md q-pa-md row">
-        <!-- TODO: Revisitar os estilos dos links. -->
-        <a v-for="(app, index) in apps" :key="index" v-test:apps-menu-link class="col-6 col-sm-4 flex justify-center text-undecoration" :href="app.href">
-          <div>
-            <q-avatar class="q-m-x-auto" :size="avatarSize">
-              <img :alt="app.label" class="rounded-borders" :src="app.image">
-            </q-avatar>
-          </div>
-
-          <div class="full-width q-mt-xs text-black text-center">{{ app.label }}</div>
-        </a>
-      </div>
-    </q-menu>
-  </q-btn>
-</template>
-
-<script>
-// TODO ver uma forma de adicionar globalmente as diretivas
-import test from '../../directives/Test'
-
-export default {
-  name: 'QasAppsMenu',
-
-  directives: {
-    test
-  },
-
-  props: {
-    apps: {
-      default: () => [],
-      type: Array
-    }
-  },
-
-  computed: {
-    avatarSize () {
-      return this.isExtraSmallScreen ? '50px' : '70px'
-    },
-
-    isExtraSmallScreen () {
-      return this.$q.screen.xs
-    }
-  }
-}
-</script>

package/src/components/avatar/QasAvatar.spec.js

@@ -1,14 +0,0 @@
-import { mount } from '@vue/test-utils'
-
-import '@/index.js'
-import QasAvatar from './QasAvatar.vue'
-
-test('displays message', () => {
-  const wrapper = mount(QasAvatar, {
-    propsData: {
-      title: 'Hello world'
-    }
-  })
-
-  expect(wrapper.text()).toContain('H')
-})

package/src/components/avatar/QasAvatar.stories.js

@@ -1,52 +0,0 @@
-import QasAvatar from './QasAvatar.vue'
-
-export default {
-  component: QasAvatar,
-  title: 'Components/Avatar',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Automatic handler for [QAvatar](https://quasar.dev/vue-components/avatar).'
-      }
-    }
-  },
-
-  argTypes: {
-    color: {
-      description: 'Set the main color.'
-    },
-
-    dark: {
-      description: 'Enables dark mode.'
-    },
-
-    icon: {
-      description: 'Icon name following Quasar convention to show when there is no image or title.'
-    },
-
-    image: {
-      description: 'Image source URL.'
-    },
-
-    textColor: {
-      description: 'Overrides text color (if needed).'
-    },
-
-    title: {
-      description: 'Defines the first letter.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasAvatar },
-  props: Object.keys(argTypes),
-  template: '<qas-avatar v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  title: 'John Appleseed'
-}

package/src/components/box/QasBox.spec.js

@@ -1,18 +0,0 @@
-import { mount } from '@vue/test-utils'
-
-import '@/index.js'
-import QasBox from './QasBox.vue'
-
-describe('Test QasBox component', () => {
-  const wrapper = mount(QasBox)
-
-  it('Mount component', async () => {
-    expect(wrapper.exists()).toBe(true)
-    expect(wrapper.classes()).toContain('qas-box__elevated')
-  })
-
-  it('Display mode as form', async () => {
-    await wrapper.setProps({ formMode: true })
-    expect(wrapper.classes()).toContain('qas-box__outlined')
-  })
-})

package/src/components/box/QasBox.stories.js

@@ -1,35 +0,0 @@
-import QasBox from './QasBox.vue'
-
-export default {
-  component: QasBox,
-  title: 'Components/Box',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Simple box wrapper.'
-      }
-    }
-  },
-
-  argTypes: {
-    formMode: {
-      description: 'Changes the component style.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasBox },
-  props: Object.keys(argTypes),
-  template:
-    `<qas-box v-bind="$props">
-      Hello, world!
-    </qas-box>`
-})
-
-export const Default = Template.bind({})
-Default.args = {}
-
-export const FormMode = Template.bind({})
-FormMode.args = { formMode: true }

package/src/components/break-line/QasBreakLine.stories.js

@@ -1,57 +0,0 @@
-import QasBreakLine from './QasBreakLine.vue'
-
-export default {
-  component: QasBreakLine,
-  title: 'Components/BreakLine',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Insert line breaks where newlines `\\n` occur in the string.'
-      }
-    }
-  },
-
-  argTypes: {
-    parentTag: {
-      description: 'Tag to wrap all lines.'
-    },
-
-    split: {
-      description: 'Characters to split text.'
-    },
-
-    tag: {
-      description: 'Tag to wrap each line'
-    },
-
-    tagClass: {
-      description: 'CSS classes for tag element.'
-    },
-
-    tagStyle: {
-      description: 'CSS styles for tag element.'
-    },
-
-    text: {
-      description: 'Text to be splitted into lines.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasBreakLine },
-  props: Object.keys(argTypes),
-  template:
-    `<qas-break-line v-bind="$props">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt consequat luctus.
-      Curabitur ultrices maximus erat, et egestas enim mollis vitae.
-      Proin quis enim eu ex volutpat elementum quis eu nisl.
-    </qas-break-line>`
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  tag: 'div'
-}

package/src/components/break-line/QasBreakLine.vue

@@ -1,52 +0,0 @@
-<template>
-  <component :is="parentTag">
-    <component :is="tag" v-for="(item, index) in items" :key="index" :class="tagClass" :style="tagStyle">
-      {{ item }}
-    </component>
-  </component>
-</template>
-
-<script>
-export default {
-  props: {
-    parentTag: {
-      default: 'div',
-      type: String
-    },
-
-    split: {
-      default: '\n',
-      type: String
-    },
-
-    tag: {
-      default: 'div',
-      type: String
-    },
-
-    tagClass: {
-      default: null,
-      type: [Array, Object, String]
-    },
-
-    tagStyle: {
-      default: null,
-      type: [Object, String]
-    },
-
-    text: {
-      default: '',
-      type: String
-    }
-  },
-
-  computed: {
-    items () {
-      const slot = this.$slots.default
-      const text = this.text || (slot ? slot[0].text : '')
-
-      return text.split(this.split)
-    }
-  }
-}
-</script>

package/src/components/btn/QasBtn.stories.js

@@ -1,45 +0,0 @@
-import QasBtn from './QasBtn.vue'
-
-export default {
-  component: QasBtn,
-  title: 'Components/Btn',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Extends [QBtn](https://quasar.dev/vue-components/button).'
-      }
-    }
-  },
-
-  argTypes: {
-    color: {
-      description: 'Color name for component from the [Quasar Color Palette](https://quasar.dev/style/color-palette#Color-List).'
-    },
-
-    hideMobileLabel: {
-      description: 'Hides label in mobile, showing only the icon.'
-    },
-
-    noCaps: {
-      description: 'Avoid turning label text into caps (which happens by default).'
-    },
-
-    unelevated: {
-      description: 'Removes shadow.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasBtn },
-  props: Object.keys(argTypes),
-  template:
-    '<qas-btn v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  label: 'Click here!'
-}

package/src/components/btn-actions/QasBtnActions.stories.js

@@ -1,77 +0,0 @@
-import QasBtn from '../btn/QasBtn.vue'
-import QasBtnActions from './QasBtnActions.vue'
-
-const noSummary = {
-  type: { summary: null }
-}
-
-// Options
-// TODO: Importar de um futuro arquivo constraints.js
-const alignOptions = ['start', 'around', 'between', 'center', 'end']
-const gutterOptions = ['xs', 'sm', 'md', 'lg', 'xl']
-
-export default {
-  component: QasBtnActions,
-  title: 'Components/BtnActions',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Actions for pages that deals with primary and secondary buttons, like a form or dialog.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    align: {
-      control: { type: 'select', options: alignOptions },
-      description: 'Actions alignment.'
-    },
-
-    // TODO: Rever necessidade.
-    btnCol: {
-      description: 'Col sizes for actions wrapper.'
-    },
-
-    gutter: {
-      control: { type: 'select', options: gutterOptions },
-      description: 'Distance between actions.'
-    },
-
-    // Slots
-    primary: {
-      description: 'Primary action slot.',
-      table: noSummary
-    },
-
-    secondary: {
-      description: 'Secondary action slot.',
-      table: noSummary
-    }
-  }
-}
-
-const templates = `
-  <template v-slot:primary>
-    <qas-btn label="Confirm" />
-  </template>
-  <template v-slot:secondary>
-    <qas-btn color="white" label="Cancel" outline text-color="primary" />
-  </template>
-`
-
-const Template = (args, { argTypes }) => ({
-  components: { QasBtn, QasBtnActions },
-  props: Object.keys(argTypes),
-  template:
-    `<qas-btn-actions v-bind="$props">${templates}</qas-btn-actions>`
-})
-
-export const Default = Template.bind({})
-
-Default.parameters = {
-  docs: {
-    source: { code: `<qas-btn-actions>${templates}</qas-btn-actions>` }
-  }
-}