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

package/src/components/form-view/QasFormView.stories.js

@@ -1,236 +0,0 @@
-import QasFormView from './QasFormView.vue'
-import QasDebugger from '../debugger/QasDebugger'
-
-import Vuex from 'vuex'
-import users from '../../mocks/storeModule'
-
-const slotDefaults = {
-  defaultValue: {
-    detail: JSON.stringify({
-      errors: 'object',
-      fields: 'object',
-      metadata: 'object'
-    }),
-    summary: '{}'
-  },
-
-  type: {
-    summary: null
-  }
-}
-
-export default {
-  component: QasFormView,
-  title: 'Components/FormView',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Create forms like a magic, you can use this component with create and edit mode.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    cancelButton: {
-      description: 'Cancel button label.'
-    },
-
-    cancelRoute: {
-      description: 'Cancel button route.'
-    },
-
-    customId: {
-      control: null,
-      description: 'Sets a custom id to `entity`. When not set, will use the `:id` route param.'
-    },
-
-    dialog: {
-      description: 'Use when the component is inside a dialog.'
-    },
-
-    disable: {
-      description: 'Disable actions buttons.'
-    },
-
-    entity: {
-      control: null,
-      description: '[VuexStoreModule](https://github.com/bildvitta/vuex-store-module) entity.'
-    },
-
-    mode: {
-      control: { type: 'select', options: ['create', 'replace', 'update'] },
-      description: 'Use `create` when you want to create a new entry (`POST`). To edit an existing entry, use `replace` (`PUT`) or `update` (`PATCH`).'
-    },
-
-    readOnly: {
-      description: 'Disable action buttons and submit method.'
-    },
-
-    route: {
-      description: 'Page route.'
-    },
-
-    showDialogOnUnsavedChanges: {
-      description: 'Enable dialog when leave page without save changes.'
-    },
-
-    submitButton: {
-      description: 'Submit button label.'
-    },
-
-    url: {
-      control: null,
-      description: 'Ignore entity and specify another endpoint.'
-    },
-
-    value: {
-      description: 'Model value.'
-    },
-
-    // Events
-    'fetch-error': {
-      description: 'Fires when occur an error fetching value.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ value: 'object' }),
-          summary: '{}'
-        }
-      }
-    },
-
-    'fetch-success': {
-      description: 'Fires when successfully get the value.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ response: 'object', value: 'object' }),
-          summary: '{}'
-        }
-      }
-    },
-
-    input: {
-      description: 'Fires when model changes. Is also used by `v-model`.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ error: 'object' }),
-          summary: '{}'
-        }
-      }
-    },
-
-    'submit-error': {
-      description: 'Fires when occur an error updating value.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ response: 'object', value: 'object' }),
-          summary: '{}'
-        }
-      }
-    },
-
-    'submit-success': {
-      description: 'Fires when the value is successfully updated.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ error: 'object', value: 'object' }),
-          summary: '{}'
-        }
-      }
-    },
-
-    // Slots
-    default: {
-      description: 'Main content.',
-      table: {
-        ...slotDefaults
-      }
-    },
-
-    actions: {
-      description: 'Actions buttons content.',
-      table: {
-        ...slotDefaults
-      }
-    },
-
-    footer: {
-      description: 'Page\'s footer content.',
-      table: {
-        ...slotDefaults
-      }
-    },
-
-    header: {
-      description: 'Page\'s header content.',
-      table: {
-        ...slotDefaults
-      }
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasFormView, QasDebugger },
-  props: Object.keys(argTypes),
-
-  store: new Vuex.Store({
-    modules: { users }
-  }),
-
-  data () {
-    return {
-      values: {}
-    }
-  },
-
-  template:
-    `<q-layout>
-      <q-page-container>
-        <qas-form-view v-model="values" v-bind="$props">
-          <template v-slot="{ errors, fields, metadata }">
-            Fields: <qas-debugger :inspect="[fields]" />
-            Values: <qas-debugger :inspect="[values]" />
-          </template>
-        </qas-form-view>
-      </q-page-container>
-    </q-layout>`
-})
-
-const template = `
-  <qas-form-view v-model="values" entity="users">
-    <template v-slot="{ errors, fields, metadata }">
-      Fields: <qas-debugger :inspect="[fields]" />
-      Values: <qas-debugger :inspect="[values]" />
-    </template>
-  </qas-form-view>
-`
-
-export const CreateMode = Template.bind({})
-
-CreateMode.args = {
-  customId: '123',
-  entity: 'users',
-  url: 'users'
-}
-
-CreateMode.parameters = {
-  docs: {
-    source: { code: template }
-  }
-}
-
-export const EditMode = Template.bind({})
-
-EditMode.args = {
-  customId: 'a755a6d1-fc4a-4961-a8cc-b2293fe5b81c',
-  entity: 'users',
-  mode: 'replace'
-}
-
-EditMode.parameters = {
-  docs: {
-    source: { code: template }
-  }
-}

package/src/components/gallery/QasGallery.stories.js

@@ -1,91 +0,0 @@
-import QasGallery from './QasGallery.vue'
-
-const noSummary = {
-  type: { summary: null }
-}
-
-export default {
-  component: QasGallery,
-  title: 'Components/Gallery',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Gallery component, with list of images and carousel.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    carouselNextIcon: {
-      description: 'Define the next image icon for carousel.'
-    },
-
-    carouselPreviousIcon: {
-      description: 'Define the previous image icon for carousel.'
-    },
-
-    height: {
-      description: 'Define the height of item.'
-    },
-
-    initialLength: {
-      description: 'Define the initial quantity of items.'
-    },
-
-    items: {
-      description: 'List of items.'
-    },
-
-    loadLength: {
-      description: 'Define the quantity of items to load.'
-    },
-
-    showMoreLabel: {
-      description: 'Text that will show for load more items.'
-    },
-
-    // Slots
-    default: {
-      description: 'Main content.',
-      table: noSummary
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasGallery },
-  props: Object.keys(argTypes),
-  template:
-  `<qas-box class="q-pa-lg">
-    <qas-gallery :items="images" />
-  </qas-box>`
-})
-
-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',
-  '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',
-  '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'
-]
-
-export const Default = Template.bind({})
-Default.args = { images }
-
-Default.parameters = {
-  docs: {
-    source: {
-      code:
-      '<qas-gallery :photos="images" />'
-    }
-  }
-}

package/src/components/grid-generator/QasGridGenerator.stories.js

@@ -1,138 +0,0 @@
-import QasGridGenerator from './QasGridGenerator.vue'
-
-const slotDefaults = {
-  table: {
-    category: 'slots',
-    defaultValue: {
-      detail: JSON.stringify({ field: 'object' }),
-      summary: '{}'
-    }
-  }
-}
-
-export default {
-  component: QasGridGenerator,
-  title: 'Components/GridGenerator',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Generates a grid with header (as `fields`) and content (as `results`).'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    columns: {
-      description: 'Define size of each column.',
-      table: {
-        defaultValue: { summary: '[]' }
-      }
-    },
-
-    contentClass: {
-      description: 'CSS classes for each result value.'
-    },
-
-    fields: {
-      description: 'Define header value for each `field`.'
-    },
-
-    gutter: {
-      description: 'Gutter space by Quasar convention. `q-col-gutter-{$gutter}`.'
-    },
-
-    headerClass: {
-      description: 'CSS classes for each header value.'
-    },
-
-    hideEmptyResult: {
-      description: 'Omits cell when result value is empty.'
-    },
-
-    result: {
-      description: 'Define result value for each `field`.'
-    },
-
-    // Slots
-    default: {
-      table: { disable: true }
-    },
-
-    content: {
-      description: 'Content value defaults.',
-      ...slotDefaults
-    },
-
-    'field-[field.name]': {
-      description: 'Each cell inside `fields` is a slot.',
-      ...slotDefaults
-    },
-
-    header: {
-      description: 'Header value defaults.',
-      ...slotDefaults
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasGridGenerator },
-  props: Object.keys(argTypes),
-  template:
-    '<qas-grid-generator v-bind="$props" />'
-})
-
-const fields = {
-  name: { name: 'name', label: 'Full name', type: 'text' },
-  email: { name: 'email', label: 'E-mail', type: 'email' },
-  phone: { name: 'phone', label: 'Phone', type: 'text', mask: 'phone' },
-  gender: { name: 'gender', label: 'Gender', type: 'text' },
-  document: { name: 'document', label: 'Document', type: 'text', mask: 'document' },
-  address: { name: 'address', label: 'Address', type: 'text' }
-}
-
-const result = {
-  name: 'John Appleseed',
-  email: 'john.appleseed@example.com',
-  phone: '99999999999',
-  gender: 'Male',
-  document: '99999999999',
-  address: '747 Austen View'
-}
-
-const columns = {
-  name: { col: 12, sm: 6 },
-  email: { col: 12, sm: 6 },
-  phone: { col: 12, sm: 6 },
-  gender: { col: 12, sm: 6 },
-  document: { col: 12 },
-  address: { col: 12 }
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  columns: [],
-  fields,
-  result
-}
-
-Default.parameters = {
-  docs: {
-    source: { code: '<qas-grid-generator :field="fields" :result="result" />' }
-  }
-}
-
-export const CustomColumns = Template.bind({})
-CustomColumns.args = {
-  columns,
-  fields,
-  result
-}
-
-CustomColumns.parameters = {
-  docs: {
-    source: { code: `<qas-grid-generator :field="fields" :result="result" :columns="${JSON.stringify(columns)}" />` }
-  }
-}

package/src/components/input/QasInput.stories.js

@@ -1,78 +0,0 @@
-import QasInput from './QasInput.vue'
-
-export default {
-  component: QasInput,
-  title: 'Components/Input',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Extends [QInput](https://quasar.dev/vue-components/input). Can mask raw values by default.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    value: {
-      description: 'Input text value.',
-      control: { type: null }
-    },
-
-    // Slots
-    default: {
-      description: 'Field main content',
-      table: {
-        type: { summary: null }
-      }
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasInput },
-  props: Object.keys(argTypes),
-
-  data () {
-    return {
-      text: ''
-    }
-  },
-
-  template:
-    `<div>
-      <qas-input v-bind="$props" v-model="text" />
-      <pre v-if="text">{{ text }}</pre>
-    </div>`
-})
-
-function setTemplate (mask) {
-  const code = mask
-    ? `<qas-input v-model="text" mask="${mask}" />`
-    : '<qas-input v-model="text" />'
-
-  return { docs: { source: { code } } }
-}
-
-export const Default = Template.bind({})
-Default.parameters = setTemplate()
-
-export const PhoneMask = Template.bind({})
-PhoneMask.args = { mask: 'phone' }
-PhoneMask.parameters = setTemplate('phone')
-
-export const DocumentMask = Template.bind({})
-DocumentMask.args = { mask: 'document' }
-DocumentMask.parameters = setTemplate('document')
-
-export const PersonalDocumentMask = Template.bind({})
-PersonalDocumentMask.args = { mask: 'personal-document' }
-PersonalDocumentMask.parameters = setTemplate('personal-document')
-
-export const CompanyDocumentMask = Template.bind({})
-CompanyDocumentMask.args = { mask: 'company-document' }
-CompanyDocumentMask.parameters = setTemplate('company-document')
-
-export const PostalCodeMask = Template.bind({})
-PostalCodeMask.args = { mask: 'postal-code' }
-PostalCodeMask.parameters = setTemplate('postal-code')

package/src/components/label/QasLabel.stories.js

@@ -1,60 +0,0 @@
-import QasLabel from './QasLabel.vue'
-
-export default {
-  component: QasLabel,
-  title: 'Components/Label',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Standardizes the display of labels for a form\'s field.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Events
-    label: {
-      description: 'Text to be displayed.'
-    },
-
-    margin: {
-      description: 'Margin spaces.'
-    },
-
-    quantity: {
-      description: 'Number to be displayed after label, inside parentheses. E.g. Groups (9).'
-    },
-
-    // Slots
-    default: {
-      description: 'Main content, will be replace label prop.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ formattedLabel: 'string' }),
-          summary: '{}'
-        },
-        type: { summary: null }
-      }
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasLabel },
-  props: Object.keys(argTypes),
-
-  template:
-    '<qas-label v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'My label!'
-}
-
-export const Quantity = Template.bind({})
-Quantity.args = {
-  label: 'My label, but with quantity!',
-  quantity: 10
-}