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

package/src/components/tip/QasTip.vue

@@ -1,68 +0,0 @@
-<template>
-  <div v-if="isOpened" class="q-pa-lg qas-tip relative-position rounded-borders" :class="classes" :style="styles">
-    <q-btn class="absolute-top-right q-mr-md q-mt-sm" :color="color" dense flat icon="o_close" rounded @click="close" />
-    <div class="q-gutter-md q-mr-lg" :class="classes">
-      <slot name="header">
-        <div v-if="title" class="text-bold text-h5">{{ title }}</div>
-      </slot>
-      <slot>
-        <p>{{ text }}</p>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    bgColor: {
-      type: String,
-      default: 'transparent'
-    },
-
-    color: {
-      type: String,
-      default: 'primary'
-    },
-
-    text: {
-      type: String,
-      default: ''
-    },
-
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-
-  data () {
-    return {
-      isOpened: true
-    }
-  },
-
-  computed: {
-    classes () {
-      return [`bg-${this.bgColor}`, `text-${this.color}`]
-    },
-
-    styles () {
-      return { borderColor: this.color }
-    }
-  },
-
-  methods: {
-    close () {
-      this.isOpened = false
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.qas-tip {
-  border-style: solid;
-  border-width: 0 10px;
-}
-</style>

package/src/components/tooltip/QasTooltip.stories.js

@@ -1,63 +0,0 @@
-import QasTooltip from './QasTooltip.vue'
-
-export default {
-  component: QasTooltip,
-  title: 'Components/Tooltip',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Creates a warning or message will be shown.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    color: {
-      description: 'Icon color name.'
-    },
-
-    icon: {
-      description: 'Icon name.'
-    },
-
-    message: {
-      description: 'Tooltip message.'
-    },
-
-    messageIcon: {
-      description: 'Message icon name.'
-    },
-
-    messageIconSize: {
-      description: 'Message icon size.'
-    },
-
-    notifyProps: {
-      description: 'Props of $q.notify plugin'
-    },
-
-    size: {
-      description: 'Tooltip\'s icon size.'
-    },
-
-    width: {
-      description: 'Tooltip\'s width.'
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasTooltip },
-  props: Object.keys(argTypes),
-  template:
-      `<qas-tooltip 
-        v-bind="$props" 
-        message-icon="o_assignment_late"
-        messageIcon="o_assignment_late" icon="o_assignment_late"
-        message="Message!" 
-      />`
-})
-
-export const Default = Template.bind({})

package/src/components/tooltip/QasTooltip.vue

@@ -1,81 +0,0 @@
-<template>
-  <q-icon :color="color" :name="icon" :size="size" @click="showNotify(notifyProps)">
-    <q-tooltip v-if="!$_isSmall" anchor="top middle" self="bottom middle">
-      <div class="items-center no-wrap row" :style="styles">
-        <q-icon v-if="messageIcon" :name="messageIcon" :size="messageIconSize" />
-        <div class="q-ml-sm text-subtitle2">{{ message }}</div>
-      </div>
-    </q-tooltip>
-  </q-icon>
-</template>
-
-<script>
-import screen from '../../mixins/screen.js'
-
-export default {
-  mixins: [screen],
-
-  props: {
-    color: {
-      default: 'primary',
-      type: String
-    },
-
-    icon: {
-      default: '',
-      type: String,
-      required: true
-    },
-
-    message: {
-      default: '',
-      type: String,
-      required: true
-    },
-
-    messageIcon: {
-      default: '',
-      type: String
-    },
-
-    messageIconSize: {
-      default: '20px',
-      type: String
-    },
-
-    notifyProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    size: {
-      default: '20px',
-      type: String
-    },
-
-    width: {
-      default: '300px',
-      type: String
-    }
-  },
-
-  computed: {
-    styles () {
-      return {
-        width: this.width
-      }
-    }
-  },
-
-  methods: {
-    showNotify (attrs) {
-      if (this.$_isSmall) {
-        this.$q.notify({
-          message: this.message,
-          ...attrs
-        })
-      }
-    }
-  }
-}
-</script>

package/src/components/transfer/QasTransfer.stories.js

@@ -1,118 +0,0 @@
-import QasTransfer from './QasTransfer.vue'
-
-const noSummary = {
-  type: { summary: null }
-}
-
-export default {
-  component: QasTransfer,
-  title: 'Components/Transfer',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Transfer items between two lists.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    emitValue: {
-      description: 'When `true`, transform `value` into an array of selected items key, instead of object.'
-    },
-
-    fuseOptions: {
-      description: '[Fuse.js](https://fusejs.io) options.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ keys: ['label'] }),
-          summary: '{}'
-        }
-      }
-    },
-
-    hideEmptySlot: {
-      description: 'Hides empty slot.'
-    },
-
-    label: {
-      description: 'From list label.'
-    },
-
-    labelKey: {
-      description: 'Key to be used instead of `label`.'
-    },
-
-    options: {
-      description: 'Options to be transfered.'
-    },
-
-    value: {
-      description: 'Selected items. See `emitValue` prop to use keys instead of objects.'
-    },
-
-    valueKey: {
-      description: 'Key to be used instead of `value`.'
-    },
-
-    // Events
-    input: {
-      description: 'Fires when model changes. Also used by `v-model`.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ value: 'array' }),
-          summary: '{}'
-        }
-      }
-    },
-
-    // Slots
-    // TODO: Renomear para "from-list-item" e "to-list-item".
-    'item-first-column': {
-      description: 'From list slot, inside of `QItem`.',
-      table: noSummary
-    },
-
-    'item-second-column': {
-      description: 'To list slot, inside of `QItem`.',
-      table: noSummary
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasTransfer },
-  props: Object.keys(argTypes),
-
-  data () {
-    return {
-      model: []
-    }
-  },
-
-  template:
-    `<div>
-      <qas-transfer v-model="model" v-bind="$props" />
-      <pre>{{ model }}</pre>
-    </div>`
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  fuseOptions: { keys: ['label'] },
-  label: 'List of items',
-  options: [
-    { label: 'Item 1', value: 1 },
-    { label: 'Item 2', value: 2 },
-    { label: 'Item 3', value: 3 },
-    { label: 'Item 4', value: 4 },
-    { label: 'Item 5', value: 5 },
-    { label: 'Item 6', value: 6 },
-    { label: 'Item 7', value: 7 },
-    { label: 'Item 8', value: 8 },
-    { label: 'Item 9', value: 9 },
-    { label: 'Item 10', value: 10 }
-  ]
-}

package/src/components/uploader/QasCustomUploader.vue

@@ -1,120 +0,0 @@
-<script>
-import Pica from 'pica'
-import { QUploader } from 'quasar'
-import uploaderMixin from '../../mixins/uploader'
-import QUploaderBase from 'quasar/src/components/uploader/QUploaderBase'
-
-export default {
-  name: 'QasCustomUploader',
-
-  extends: QUploader,
-
-  mixins: [uploaderMixin],
-
-  data () {
-    return {
-      isAddingFiles: false
-    }
-  },
-
-  computed: {
-    // overrides "isBusy" from quasar for adding "this.isAddingFiles"
-    isBusy () {
-      return this.isAddingFiles || this.promises.length > 0
-    },
-
-    picaResizeOptionsDefault () {
-      return {
-        unsharpAmount: 160,
-        unsharpRadius: 0.6,
-        unsharpThreshold: 1,
-        ...this.picaResizeOptions
-      }
-    }
-  },
-
-  methods: {
-    // function for handling files and resize if it is an image type
-    async filesHandler (file) {
-      const { type } = file
-
-      // only resize if is an image type
-      if (!this.acceptResizeTypes.includes(type) || !this.useResize) return file
-
-      try {
-        // create a new image and canvas for resizing purpose
-        const image = new Image()
-        const canvas = document.createElement('canvas')
-
-        image.src = URL.createObjectURL(file)
-
-        // get the original width and height of the uploaded image
-        const { width, height } = await this.getImageSize(image)
-
-        // get the redimensioned sizes
-        const resizedDimensions = this.resizeDimensions(this.sizeLimit, width, height)
-
-        canvas.width = resizedDimensions.width
-        canvas.height = resizedDimensions.height
-
-        // fix cors issues
-        image.crossOrigin = ''
-
-        image.width = width
-        image.height = height
-
-        // get the resized canvas and transform it into a blob
-        const pica = Pica()
-        const resizedImage = await pica.resize(image, canvas, this.picaResizeOptionsDefault)
-        const blob = await pica.toBlob(resizedImage, type, 0.90)
-
-        // now returns the newly formatted file
-        return new File([blob], file.name, { type })
-      } catch {
-        // if there is an error, return the original file
-        return file
-      }
-    },
-
-    // overrides "__addFiles" from quasar
-    async __addFiles (event, files = []) {
-      const filesToUpload = event?.target?.files || files
-      this.isAddingFiles = true
-
-      const filesPromise = []
-
-      for (const file of filesToUpload) {
-        filesPromise.push(this.filesHandler(file))
-      }
-
-      const processedFiles = await Promise.all(filesPromise)
-      this.isAddingFiles = false
-      QUploaderBase.extendOptions.methods.__addFiles.call(this, null, processedFiles)
-    },
-
-    resizeDimensions (sizeLimit, width, height) {
-      const factor = sizeLimit / Math.max(width, height)
-
-      if (factor < 1) {
-        width *= factor
-        height *= factor
-      }
-
-      return {
-        width: Math.round(width),
-        height: Math.round(height)
-      }
-    },
-
-    getImageSize (image) {
-      return new Promise((resolve, reject) => {
-        image.addEventListener('load', () => {
-          resolve({ width: image.naturalWidth, height: image.naturalHeight })
-        })
-
-        image.addEventListener('error', reject)
-      })
-    }
-  }
-}
-</script>

package/src/components/uploader/QasUploader.stories.js

@@ -1,139 +0,0 @@
-import QasUploader from './QasUploader.vue'
-
-const hides = {
-  table: { disable: true }
-}
-
-export default {
-  component: QasUploader,
-  title: 'Components/Upload',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Extends [QUploader](https://quasar.dev/vue-components/uploader). Require [Axios](https://github.com/axios/axios) to async upload files to server.'
-      }
-    }
-  },
-
-  argTypes: {
-    // Props
-    accept: hides,
-
-    entity: {
-      description: 'Used by server to know where to store files in the assets bucket.'
-    },
-
-    hint: {
-      description: 'Help text.'
-    },
-
-    label: hides,
-
-    maxFiles: {
-      description: 'Max number of files to select.'
-    },
-
-    value: {
-      control: null,
-      description: 'File object.'
-    },
-
-    errorMessage: {
-      description: 'Error message.'
-    },
-
-    picaResizeOptions: {
-      description: 'Node [pica](https://github.com/nodeca/pica) resize method options.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({
-            unsharpAmount: 160,
-            unsharpRadius: 0.6,
-            unsharpThreshold: 1
-          })
-        }
-      }
-    },
-
-    acceptResizeTypes: {
-      description: 'Accepted file types to resize.'
-    },
-
-    sizeLimit: {
-      description: 'Max file size in pixels.'
-    },
-
-    useResize: {
-      description: 'Enable resizer image to fit the sizeLimit.'
-    },
-
-    // Events
-    input: {
-      description: 'Fires when files change.'
-    },
-
-    // Slots
-    'custom-upload': {
-      description: 'Replace `QasUploader` component. The `context` will give access to all the functions and attributes of the component.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ context: 'object' }),
-          summary: '{}'
-        },
-
-        type: { summary: null }
-      }
-    },
-
-    header: {
-      description: 'Slot in case you want to customize the `QasUploader` header.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ scope: 'object' }),
-          summary: '{}'
-        },
-
-        type: { summary: null }
-      }
-    },
-
-    list: {
-      description: 'Slot if you want to customize the content that contains the file listing.',
-      table: {
-        defaultValue: {
-          detail: JSON.stringify({ scope: 'object' }),
-          summary: '{}'
-        },
-
-        type: { summary: null }
-      }
-    }
-  }
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { QasUploader },
-  props: Object.keys(argTypes),
-  template:
-    `<div>
-      <qas-uploader v-bind="$props" />
-      <qas-uploader v-bind="$props">
-        <template #custom-upload="{ context }">
-          <q-btn color="primary" flat no-caps @click="context.dispatchUpload">
-            <q-circular-progress v-if="context.isFetching" class="q-mr-sm" color="primary" indeterminate size="20px" />
-            <q-icon class="q-mr-sm" name="o_camera_alt" />
-            Fazer upload
-          </q-btn>
-        </template>
-      </qas-uploader>
-    </div>`
-})
-
-export const Default = Template.bind({})
-
-Default.args = {
-  accept: '.jpg,.jpeg,.png',
-  entity: 'posts/image',
-  label: 'Image'
-}

package/src/directives/Test.js

@@ -1,13 +0,0 @@
-export default {
-  name: 'test',
-
-  bind (element, { arg: argument, value }) {
-    if (element && argument) {
-      element.dataset.test = argument
-    }
-
-    if (element && value) {
-      element.dataset.testKey = value
-    }
-  }
-}

package/src/helpers/historyHandler.js

@@ -1,52 +0,0 @@
-// TODO: Renomear arquivo para history.js e tirar os "handler".
-import Vue from 'vue'
-
-const history = Vue.observable({
-  hasPreviousRoute: false,
-  list: []
-})
-
-function handleHistory () {
-  return {
-    getPreviousRoute (currentRoute) {
-      const index = history.list.findIndex(item => item.name === currentRoute.name)
-
-      if (~index) {
-        history.list.splice(index, 1)
-      }
-
-      history.hasPreviousRoute = history.list.length > 1
-      return history.list[history.list.length - 1]
-    },
-
-    push (route) {
-      const routeExistsInList = history.list.find(item => item.name === route.name)
-
-      if (routeExistsInList) {
-        return null
-      }
-
-      history.list.push(route)
-      history.hasPreviousRoute = history.list.length > 1
-    },
-
-    destroy (routes) {
-      if (!history.list.length) {
-        return null
-      }
-
-      routes.forEach(route => {
-        const index = history.list.findIndex(item => item.name === route)
-
-        if (~index) {
-          history.list.splice(index, 1)
-        }
-      })
-    }
-  }
-}
-
-export {
-  history,
-  handleHistory
-}

package/src/helpers/label.js

@@ -1,3 +0,0 @@
-export default function (quantity, label) {
-  return quantity ? `${label} (${quantity})` : label
-}