@bildvitta/quasar-ui-asteroid 2.17.0 → 3.0.0-alpha.3

package/src/components/field/QasField.stories.js

@@ -1,181 +0,0 @@
-import QasField from './QasField.vue'
-
-export default {
-  component: QasField,
-  title: 'Components/Field',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Wildcard form field component based on their types. Used by `QasFormGenerator`.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    error: {
-      description: 'Error messages.'
-    },
-
-    field: {
-      description: 'An object with props to be bypassed to matched field component.'
-    },
-
-    // Events
-    input: {
-      description: 'Fires when model changes. Is also used by `v-model`.',
-      table: {
-        defaultValue: { summary: null }
-      }
-    }
-  }
-}
-
-function templateGenerator (model) {
-  return (args, { argTypes }) => ({
-    components: { QasField },
-    props: Object.keys(argTypes),
-
-    data () {
-      return {
-        model
-      }
-    },
-
-    template: '<qas-field v-model="model" v-bind="$props" />'
-  })
-}
-
-const Template = templateGenerator('')
-const NumberTemplate = templateGenerator(0)
-const CheckboxTemplate = templateGenerator([])
-const DecimalInputTemplate = templateGenerator(0)
-
-export const Default = Template.bind({})
-Default.args = {
-  field: { label: 'Name', type: 'text' }
-}
-
-export const Textarea = Template.bind({})
-Textarea.args = {
-  field: { label: 'Textarea', type: 'textarea' }
-}
-
-// Email
-export const Email = Template.bind({})
-
-Email.args = {
-  field: { label: 'E-mail', type: 'email' }
-}
-
-// Password
-export const Password = Template.bind({})
-
-Password.args = {
-  field: { label: 'Password', type: 'password', pattern: /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/ }
-}
-
-// Number
-export const Number = NumberTemplate.bind({})
-
-Number.args = {
-  field: { label: 'Number', type: 'number' }
-}
-
-// Decimal
-export const Decimal = DecimalInputTemplate.bind({})
-
-Decimal.args = {
-  field: { label: 'Decimal', type: 'decimal' }
-}
-
-// Percent
-export const Percent = DecimalInputTemplate.bind({})
-
-Percent.args = {
-  field: { label: 'Percent', type: 'percent' }
-}
-
-// Money
-export const Money = DecimalInputTemplate.bind({})
-
-Money.args = {
-  field: { label: 'Money', type: 'money' }
-}
-
-// Date Time
-export const DateTime = Template.bind({})
-
-DateTime.args = {
-  field: { label: 'Datetime', type: 'datetime' }
-}
-
-// Date
-export const Date = Template.bind({})
-
-Date.args = {
-  field: { label: 'Date', type: 'date' }
-}
-
-// Time
-export const Time = Template.bind({})
-
-Time.args = {
-  field: { label: 'Time', type: 'time' }
-}
-
-// Boolean
-export const Boolean = Template.bind({})
-
-Boolean.args = {
-  field: { label: 'Boolean', default: true, type: 'boolean' }
-}
-
-// Checkbox
-export const Checkbox = CheckboxTemplate.bind({})
-
-Checkbox.args = {
-  field: { name: 'Checkbox', label: 'Checkbox', type: 'checkbox', options: [{ label: 'Example1', value: 'Example1' }, { label: 'Example2', value: 'Example2' }] }
-}
-
-// Radio
-export const Radio = Template.bind({})
-
-Radio.args = {
-  field: {
-    options: [{ label: 'Example1', value: 'Example1' }, { label: 'Example2', value: 'Example2' }],
-    type: 'radio'
-  }
-}
-
-// Select
-export const Select = Template.bind({})
-
-Select.args = {
-  field: {
-    options: [{ label: 'Example1', value: 'Example1' }, { label: 'Example2', value: 'Example2' }, { label: 'Example3', value: 'Example3' }, { label: 'Example4', value: 'Example4' }],
-    type: 'select'
-  }
-}
-
-// Upload
-export const Upload = Template.bind({})
-
-Upload.args = {
-  field: { entity: 'posts/image', label: 'Image', type: 'upload' }
-}
-
-// Editor
-export const Editor = Template.bind({})
-
-Editor.args = {
-  field: { name: 'Editor', type: 'editor', value: '' }
-}
-
-// Hidden
-export const Hidden = Template.bind({})
-
-Hidden.args = {
-  field: { label: 'Hidden', type: 'hidden' }
-}

package/src/components/filters/QasFilters.stories.js

@@ -1,121 +0,0 @@
-import Vuex from 'vuex'
-import VueRouter from 'vue-router'
-
-import users from '../../mocks/storeModule'
-
-import QasFilters from './QasFilters.vue'
-
-const noSummary = {
-  type: { summary: null }
-}
-
-export default {
-  component: QasFilters,
-  title: 'Components/Filters',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Generates fields to be used as filters. Used by `QasListView`.'
-      }
-    }
-  },
-
-  argTypes: {
-    badges: {
-      description: 'Show current filters as badges.'
-    },
-
-    entity: {
-      control: null,
-      description: '[VuexStoreModule](https://github.com/bildvitta/vuex-store-module) entity.'
-    },
-
-    noFilterButton: {
-      description: 'Hides filter button.'
-    },
-
-    noSearch: {
-      description: 'Hides search field.'
-    },
-
-    searchOnType: {
-      description: 'Search on type.'
-    },
-
-    searchPlaceholder: {
-      description: 'Search field placeholder.'
-    },
-
-    url: {
-      control: null,
-      description: 'Ignore entity and specify another endpoint.'
-    },
-
-    // Events
-    'fetch-error': {
-      description: 'Fires when occur an error fetching value.',
-      table: {
-        defaultValue: { summary: JSON.stringify({ error: 'object' }) }
-      }
-    },
-
-    'fetch-success': {
-      description: 'Fires when successfully get the value.',
-      table: {
-        defaultValue: { summary: JSON.stringify({ response: 'object' }) }
-      }
-    },
-
-    // Slots
-    default: {
-      description: 'Bottom content.',
-      table: {
-        ...noSummary,
-        defaultValue: {
-          summary: JSON.stringify({
-            context: 'object',
-            filter: 'function',
-            filters: 'object',
-            removeFilter: 'function'
-          })
-        }
-      }
-    },
-
-    'filter-button': {
-      description: 'Filter button content.',
-      table: {
-        defaultValue: { summary: JSON.stringify({ filter: 'function' }) },
-        ...noSummary
-      }
-    },
-
-    search: {
-      description: 'Search input content.',
-      table: {
-        defaultValue: { summary: JSON.stringify({ filter: 'function' }) },
-        ...noSummary
-      }
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasFilters },
-  props: Object.keys(argTypes),
-
-  router: new VueRouter(),
-
-  store: new Vuex.Store({
-    modules: { users }
-  }),
-
-  template: '<qas-filters v-bind="$props" />'
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  entity: 'users'
-}

package/src/components/form-generator/QasFormGenerator.stories.js

@@ -1,115 +0,0 @@
-import QasFormGenerator from './QasFormGenerator.vue'
-
-const slotDefaults = {
-  table: {
-    category: 'slots',
-    defaultValue: { summary: JSON.stringify({ field: 'object' }) },
-    type: { summary: null }
-  }
-}
-
-export default {
-  component: QasFormGenerator,
-  title: 'Components/FormGenerator',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Generates form fields like a magic!'
-      }
-    }
-  },
-
-  argTypes: {
-    columns: {
-      description: 'Define size of each field column.',
-      table: {
-        defaultValue: { summary: '[] || {}' }
-      }
-    },
-
-    errors: {
-      description: 'Each field error.'
-    },
-
-    fields: {
-      description: 'Fields to be dynamic generated.'
-    },
-
-    fieldsEvents: {
-      description: 'Defines each field events.'
-    },
-
-    fieldsProps: {
-      description: 'Defines each field prop.'
-    },
-
-    gutter: {
-      description: 'Gutter space by Quasar convention. `q-col-gutter-{$gutter}`.'
-    },
-
-    value: {
-      description: 'Model value.'
-    },
-
-    // Events
-    input: {
-      description: 'Fires when model changes. Is also used by `v-model`.',
-      table: {
-        defaultValue: { summary: JSON.stringify({ value: 'object' }) }
-      }
-    },
-
-    // slot
-    default: {
-      table: { disable: true }
-    },
-
-    'field-[field.name]': {
-      description: 'Each field inside `fields` is a slot.',
-      ...slotDefaults
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasFormGenerator },
-  props: Object.keys(argTypes),
-
-  data () {
-    return {
-      values: {}
-    }
-  },
-
-  template:
-    `<div>
-      <qas-form-generator v-model="values" v-bind="$props" />
-      <pre>{{ values }}</pre>
-    </div>`
-})
-
-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 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
-}

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