@bildvitta/quasar-ui-asteroid 3.14.0-beta.0 → 3.14.0-beta.2

package/src/components/list-items/QasListItems.vue

@@ -1,15 +1,15 @@
 <template>
   <qas-box class="qas-list-items">
     <q-list separator>
-      <q-item v-for="(item, index) in list" :key="index" v-ripple :clickable="useClickableItem" @click="onClick({ item, index }, true)">
+      <q-item v-for="(item, index) in props.list" :key="index" v-ripple :clickable="props.useClickableItem" @click="onClick({ item, index }, true)">
         <slot :index="index" :item="item" name="item">
           <q-item-section>
             <slot :index="index" :item="item" name="item-section" />
           </q-item-section>
 
-          <q-item-section v-if="useSectionActions" side>
+          <q-item-section v-if="props.useSectionActions" side>
             <slot :index="index" :item="item" name="item-section-side">
-              <qas-btn color="primary" :icon="icon" variant="tertiary" @click="onClick({ item, index })" />
+              <qas-btn color="primary" :icon="props.icon" variant="tertiary" @click="onClick({ item, index })" />
             </slot>
           </q-item-section>
         </slot>
@@ -18,54 +18,45 @@
   </qas-box>
 </template>
 
-<script>
-import QasBtn from '../btn/QasBtn.vue'
+<script setup>
 import QasBox from '../box/QasBox.vue'
+import QasBtn from '../btn/QasBtn.vue'
 
-export default {
-  name: 'QasListItems',
+defineOptions({ name: 'QasListItems' })
 
-  components: {
-    QasBox,
-    QasBtn
+const props = defineProps({
+  icon: {
+    type: String,
+    default: 'sym_r_chevron_right'
   },
 
-  props: {
-    icon: {
-      type: String,
-      default: 'sym_r_chevron_right'
-    },
-
-    list: {
-      default: () => [],
-      type: Array
-    },
-
-    useClickableItem: {
-      type: Boolean
-    },
+  list: {
+    default: () => [],
+    type: Array
+  },
 
-    useSectionActions: {
-      default: true,
-      type: Boolean
-    }
+  useClickableItem: {
+    type: Boolean
   },
 
-  emits: ['click-item'],
+  useSectionActions: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['click-item'])
 
-  methods: {
-    onClick ({ item, index }, fromItem) {
-      /**
-       * se o click veio do q-item e "useClickableItem" for "false", ou
-       * se o click não veio do q-item e "useClickableItem" for "true", então retorna sem emitir.
-       */
-      if (
-        (fromItem && !this.useClickableItem) || (!fromItem && this.useClickableItem)
-      ) return
+function onClick ({ item, index }, fromItem) {
+  /**
+   * se o click veio do q-item e "useClickableItem" for "false", ou
+   * se o click não veio do q-item e "useClickableItem" for "true", então retorna sem emitir.
+   */
+  if (
+    (fromItem && !props.useClickableItem) || (!fromItem && props.useClickableItem)
+  ) return
 
-      this.$emit('click-item', { item, index })
-    }
-  }
+  emit('click-item', { item, index })
 }
 </script>
 

package/src/components/map/QasMap.vue

@@ -1,69 +1,67 @@
 <template>
   <div class="qas-map">
-    <g-map-map :center="centerPosition" class="qas-map__draw" :zoom="zoom">
-      <g-map-marker v-for="(marker, index) in markers" :key="index" :draggable="marker.draggable" :icon="marker.icon" :position="marker.position" @dragend="updatePosition" @mouseout="closePopup" @mouseover="openPopup(marker, index)">
+    <g-map-map :center="props.centerPosition" class="qas-map__draw" :zoom="props.zoom">
+      <g-map-marker v-for="(marker, index) in props.markers" :key="index" :draggable="marker.draggable" :icon="marker.icon" :position="marker.position" @dragend="updatePosition" @mouseout="closePopup" @mouseover="openPopup(marker, index)">
         <g-map-info-window :opened="canShowPopup(index)">
-          <div class="text-weight-bold">{{ marker.title }}</div>
-          <div>{{ marker.description }}</div>
+          <div class="text-weight-bold">
+            {{ marker.title }}
+          </div>
+
+          <div>
+            {{ marker.description }}
+          </div>
         </g-map-info-window>
       </g-map-marker>
     </g-map-map>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QasMap',
+<script setup>
+import { ref } from 'vue'
 
-  props: {
-    centerPosition: {
-      type: Object,
-      default: () => ({})
-    },
+defineOptions({ name: 'QasMap' })
 
-    markers: {
-      type: Array,
-      default: () => []
-    },
+const props = defineProps({
+  centerPosition: {
+    type: Object,
+    default: () => ({})
+  },
 
-    zoom: {
-      type: Number,
-      default: 17
-    },
+  markers: {
+    type: Array,
+    default: () => []
+  },
 
-    usePopup: {
-      type: Boolean
-    }
+  zoom: {
+    type: Number,
+    default: 17
   },
 
-  emits: ['update-position'],
+  usePopup: {
+    type: Boolean
+  }
+})
 
-  data () {
-    return {
-      isPopupDisplayed: false,
-      currentPlace: null,
-      indexMarker: null
-    }
-  },
+const emit = defineEmits(['update-position'])
 
-  methods: {
-    openPopup ({ title, description }, index) {
-      this.indexMarker = index
-      this.isPopupDisplayed = !!(title || description)
-    },
+const isPopupDisplayed = ref(false)
+const indexMarker = ref(null)
 
-    canShowPopup (index) {
-      return this.isPopupDisplayed && this.usePopup && index === this.indexMarker
-    },
+function canShowPopup (index) {
+  return isPopupDisplayed.value && props.usePopup && index === indexMarker.value
+}
 
-    closePopup () {
-      this.isPopupDisplayed = false
-    },
+function closePopup () {
+  isPopupDisplayed.value = false
+}
 
-    updatePosition (mouseEvent) {
-      this.$emit('update-position', mouseEvent.latLng.toJSON())
-    }
-  }
+function openPopup ({ title, description }, index) {
+  indexMarker.value = index
+  isPopupDisplayed.value = !!(title || description)
+}
+
+function updatePosition (mouseEvent) {
+  emit('update-position', mouseEvent.latLng.toJSON())
 }
 </script>
 

package/src/components/numeric-input/QasNumericInput.vue

@@ -1,7 +1,7 @@
 <template>
   <q-field :label="formattedLabel" :model-value="modelValue" outlined>
-    <template #control="{ floatingLabel, id }">
-      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" inputmode="numeric" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
+    <template #control="{ floatingLabel, id, editable }">
+      <input v-show="floatingLabel" :id="id" ref="input" class="q-field__input" :disabled="!editable" inputmode="numeric" @blur="emitValue" @click="setSelect" @input="emitUpdateModel($event.target.value)">
     </template>
   </q-field>
 </template>

package/src/components/page-header/QasPageHeader.vue

@@ -2,12 +2,12 @@
   <div>
     <q-toolbar class="justify-between q-mb-lg q-px-none qas-page-header">
       <div class="ellipsis">
-        <q-toolbar-title v-if="title" class="text-h3">
-          {{ title }}
+        <q-toolbar-title v-if="props.title" class="text-h3">
+          {{ props.title }}
         </q-toolbar-title>
 
-        <q-breadcrumbs v-if="useBreadcrumbs" class="text-caption" gutter="xs" separator-color="grey-8">
-          <q-breadcrumbs-el v-if="useHomeIcon" class="qas-page-header__breadcrumbs-el text-grey-8" icon="sym_r_home" :to="homeRoute" />
+        <q-breadcrumbs v-if="props.useBreadcrumbs" class="text-caption" gutter="xs" separator-color="grey-8">
+          <q-breadcrumbs-el v-if="props.useHomeIcon" class="qas-page-header__breadcrumbs-el text-grey-8" icon="sym_r_home" :to="homeRoute" />
 
           <q-breadcrumbs-el v-for="(item, index) in normalizedBreadcrumbs" :key="index" class="ellipsis inline-block qas-page-header__breadcrumbs-el" :label="item.label" :to="item.route" />
         </q-breadcrumbs>
@@ -18,115 +18,102 @@
 
     <div>
       <slot name="bottom">
-        <qas-header-actions v-if="hasHeaderActions" v-bind="headerActionsProps" />
+        <qas-header-actions v-if="hasHeaderActions" v-bind="props.headerActionsProps" />
       </slot>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 import QasHeaderActions from '../header-actions/QasHeaderActions.vue'
 
 import { castArray } from 'lodash-es'
-import { createMetaMixin } from 'quasar'
+import { computed } from 'vue'
+import { useMeta } from 'quasar'
+import { useRouter } from 'vue-router'
 
-export default {
-  name: 'QasPageHeader',
+defineOptions({ name: 'QasPageHeader' })
 
-  components: {
-    QasHeaderActions
+const props = defineProps({
+  breadcrumbs: {
+    default: '',
+    type: [Array, String]
   },
 
-  mixins: [
-    createMetaMixin(function () {
-      return {
-        title: this.title
-      }
-    })
-  ],
-
-  props: {
-    breadcrumbs: {
-      default: '',
-      type: [Array, String]
-    },
-
-    headerActionsProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    root: {
-      default: '',
-      type: [Object, String]
-    },
-
-    title: {
-      default: '',
-      type: String
-    },
-
-    useBreadcrumbs: {
-      default: true,
-      type: Boolean
-    },
-
-    useHomeIcon: {
-      default: true,
-      type: Boolean
-    }
+  headerActionsProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  computed: {
-    transformedBreadcrumbs () {
-      const list = [...castArray(this.breadcrumbs || this.title)]
-      this.root && list.unshift(this.root)
+  root: {
+    default: '',
+    type: [Object, String]
+  },
 
-      return list.map(item => {
-        if (item && typeof item === 'string') {
-          return { label: item }
-        }
+  title: {
+    default: '',
+    type: String
+  },
 
-        if (!item.route && item.routeName) {
-          item.route = { name: item.routeName }
-        }
+  useBreadcrumbs: {
+    default: true,
+    type: Boolean
+  },
 
-        return item
-      })
-    },
+  useHomeIcon: {
+    default: true,
+    type: Boolean
+  }
+})
 
-    normalizedBreadcrumbs () {
-      const breadcrumbsSize = this.transformedBreadcrumbs.length
+const router = useRouter()
 
-      if (breadcrumbsSize < 5) return this.transformedBreadcrumbs
+// meta tag
+useMeta(() => ({ title: props.title }))
 
-      const [first, second] = this.transformedBreadcrumbs
-      const last = this.transformedBreadcrumbs.at(-1)
+// computed
+const transformedBreadcrumbs = computed(() => {
+  const list = [...castArray(props.breadcrumbs || props.title)]
 
-      const beforeLast = {
-        ...this.transformedBreadcrumbs.at(-2),
-        label: '...'
-      }
+  props.root && list.unshift(props.root)
 
-      return [
-        first,
-        second,
-        beforeLast,
-        last
-      ]
-    },
+  return list.map(item => {
+    if (item && typeof item === 'string') {
+      return { label: item }
+    }
 
-    hasHeaderActions () {
-      return !!Object.keys(this.headerActionsProps).length
-    },
+    if (!item.route && item.routeName) {
+      item.route = { name: item.routeName }
+    }
 
-    homeRoute () {
-      const hasRoot = this.$router.hasRoute('Root')
+    return item
+  })
+})
 
-      return hasRoot ? { name: 'Root' } : '/'
-    }
+const normalizedBreadcrumbs = computed(() => {
+  const breadcrumbsSize = transformedBreadcrumbs.value.length
+
+  if (breadcrumbsSize < 5) return transformedBreadcrumbs.value
+
+  const [first, second] = transformedBreadcrumbs.value
+  const last = transformedBreadcrumbs.value.at(-1)
+
+  const beforeLast = {
+    ...transformedBreadcrumbs.value.at(-2),
+    label: '...'
   }
-}
+
+  return [
+    first,
+    second,
+    beforeLast,
+    last
+  ]
+})
+
+const hasHeaderActions = computed(() => !!Object.keys(props.headerActionsProps).length)
+
+const homeRoute = computed(() => router.hasRoute('Root') ? { name: 'Root' } : '/')
 </script>
 
 <style lang="scss">

package/src/components/pagination/QasPagination.vue

@@ -2,31 +2,31 @@
   <q-pagination v-bind="defaultProps" />
 </template>
 
-<script>
-export default {
-  name: 'QasPagination',
+<script setup>
+import { computed, useAttrs } from 'vue'
 
-  computed: {
-    defaultProps () {
-      const { modelValue, ...attributes } = this.$attrs
+defineOptions({ name: 'QasPagination' })
 
-      return {
-        activeColor: 'primary',
-        activeDesign: 'flat',
-        boundaryNumbers: true,
-        class: 'qas-pagination',
-        color: 'grey-8',
-        directionLinks: true,
-        iconNext: 'sym_r_chevron_right',
-        iconPrev: 'sym_r_chevron_left',
-        maxPages: 3,
-        modelValue,
+const attrs = useAttrs()
 
-        ...attributes
-      }
-    }
+const defaultProps = computed(() => {
+  const { modelValue, ...attributes } = attrs
+
+  return {
+    activeColor: 'primary',
+    activeDesign: 'flat',
+    boundaryNumbers: true,
+    class: 'qas-pagination',
+    color: 'grey-8',
+    directionLinks: true,
+    iconNext: 'sym_r_chevron_right',
+    iconPrev: 'sym_r_chevron_left',
+    maxPages: 3,
+    modelValue,
+
+    ...attributes
   }
-}
+})
 </script>
 
 <style lang="scss">

package/src/components/select-list-dialog/QasSelectListDialog.vue

@@ -55,7 +55,7 @@
       v-bind="defaultDialogProps"
       v-model="showDialog"
     >
-      <template v-for="(_, name) in $slots" #[name]="context">
+      <template v-for="(_, name) in slots" #[name]="context">
         <slot :name="`dialog-${name}`" v-bind="context || {}" />
       </template>
 
@@ -76,7 +76,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, useSlots } from 'vue'
 
 defineOptions({ name: 'QasSelectListDialog' })
 
@@ -141,6 +141,8 @@ const props = defineProps({
 
 const emit = defineEmits(['add', 'remove', 'update:modelValue'])
 
+const slots = useSlots()
+
 const hasError = computed(() => Array.isArray(props.error) ? !!props.error.length : !!props.error)
 const errorMessage = computed(() => Array.isArray(props.error) ? props.error.join(' ') : props.error)
 

package/src/components/tabs-generator/QasTabsGenerator.vue

@@ -18,92 +18,84 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import QasStatus from '../status/QasStatus.vue'
 
+import { computed } from 'vue'
 import { extend } from 'quasar'
 
-export default {
-  name: 'QasTabsGenerator',
+defineOptions({ name: 'QasTabsGenerator' })
 
-  components: {
-    QasStatus
+const props = defineProps({
+  counters: {
+    default: () => ({}),
+    type: Object
   },
 
-  props: {
-    counters: {
-      default: () => ({}),
-      type: Object
-    },
-
-    modelValue: {
-      default: '',
-      type: [String, Number]
-    },
-
-    tabs: {
-      default: () => ({}),
-      required: true,
-      type: [Object, Array]
-    },
-
-    useRouteTab: {
-      type: Boolean
-    }
+  modelValue: {
+    default: '',
+    type: [String, Number]
   },
 
-  emits: ['update:modelValue'],
+  tabs: {
+    default: () => ({}),
+    required: true,
+    type: [Object, Array]
+  },
 
-  computed: {
-    formattedTabs () {
-      const tabs = extend(true, {}, this.tabs)
+  useRouteTab: {
+    type: Boolean
+  }
+})
 
-      for (const key in tabs) {
-        if (typeof tabs[key] === 'string') {
-          tabs[key] = { label: tabs[key], value: key }
-        }
-      }
+const emit = defineEmits(['update:modelValue'])
 
-      return tabs
-    },
+// computed
+const model = computed({
+  get () {
+    return props.modelValue
+  },
 
-    model: {
-      get () {
-        return this.modelValue
-      },
+  set (value) {
+    const currentTab = Array.isArray(props.tabs)
+      ? props.tabs.find(tab => tab?.value === value)
+      : formattedTabs.value[value]
 
-      set (value) {
-        const currentTab = Array.isArray(this.tabs)
-          ? this.tabs.find(tab => tab?.value === value)
-          : this.formattedTabs[value]
+    if (currentTab?.disabled) return
 
-        if (currentTab?.disabled) return
+    emit('update:modelValue', value)
+  }
+})
 
-        this.$emit('update:modelValue', value)
-      }
-    },
+const formattedTabs = computed(() => {
+  const tabs = extend(true, {}, props.tabs)
 
-    tabComponent () {
-      return this.useRouteTab ? 'q-route-tab' : 'q-tab'
+  for (const key in tabs) {
+    if (typeof tabs[key] === 'string') {
+      tabs[key] = { label: tabs[key], value: key }
     }
-  },
+  }
 
-  methods: {
-    getFormattedLabel ({ label, counter, value }) {
-      const normalizedCount = this.counters[value] || counter
+  return tabs
+})
 
-      if (!normalizedCount) return label
+const tabComponent = computed(() => props.useRouteTab ? 'q-route-tab' : 'q-tab')
 
-      const countString = String(normalizedCount)
+// functions
+function getFormattedLabel ({ label, counter, value }) {
+  const normalizedCount = props.counters[value] || counter
 
-      return `${label} (${countString.padStart(2, '0')})`
-    },
+  if (!normalizedCount) return label
 
-    getTabProps (tab) {
-      const { icon, label, ...payload } = tab
-      return payload
-    }
-  }
+  const countString = String(normalizedCount)
+
+  return `${label} (${countString.padStart(2, '0')})`
+}
+
+function getTabProps (tab) {
+  const { icon, label, ...payload } = tab
+
+  return payload
 }
 </script>
 

package/src/components/timeline/QasTimeline.vue

@@ -5,7 +5,7 @@
     layout="comfortable"
   >
     <template
-      v-for="(item, index) in list"
+      v-for="(item, index) in props.list"
       :key="`timeline-${index}-${uid()}`"
     >
       <q-timeline-entry

package/src/components/uploader/private/PvUploaderGalleryCard.vue

@@ -317,7 +317,7 @@ export default {
     },
 
     url () {
-      return this.defaultGalleryCardProps?.card?.url
+      return this.normalizedCardGalleryProps?.card?.url
     }
   },