@bildvitta/quasar-ui-asteroid 3.17.0-beta.20 → 3.17.0-beta.21

package/src/components/drawer/QasDrawer.vue

@@ -1,118 +1,118 @@
-<template>
-  <qas-dialog class="qas-drawer" v-bind="attributes" @update:model-value="onUpdateModelValue">
-    <template #header>
-      <div class="items-center justify-between row">
-        <span data-cy="drawer-title">
-          <slot name="title">
-            <h3 v-if="props.title" class="text-h3">
-              {{ props.title }}
-            </h3>
-          </slot>
-        </span>
-
-        <qas-btn v-close-popup class="z-max" color="grey-10" data-cy="drawer-close-btn" icon="sym_r_close" variant="tertiary" @click="emit('update:modelValue', false)" />
-      </div>
-    </template>
-
-    <template #description>
-      <div>
-        <div class="relative-position" data-cy="drawer-default">
-          <slot />
-        </div>
-
-        <div v-if="props.loading" class="qas-drawer__loading" :style="loadingStyle">
-          <div class="full-height relative-position">
-            <q-inner-loading :showing="props.loading">
-              <q-spinner color="grey" size="2em" />
-            </q-inner-loading>
-          </div>
-        </div>
-      </div>
-    </template>
-  </qas-dialog>
-</template>
-
-<script setup>
-import useScreen from '../../composables/use-screen.js'
-
-import { computed, useAttrs } from 'vue'
-
-defineOptions({
-  name: 'QasDrawer',
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  dialogProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  maxWidth: {
-    type: String,
-    default: '60%'
-  },
-
-  position: {
-    type: String,
-    default: 'left',
-    validator: value => ['left', 'right'].includes(value)
-  },
-
-  title: {
-    type: String,
-    default: ''
-  },
-
-  loading: {
-    type: Boolean
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const attrs = useAttrs()
-const screen = useScreen()
-
-// computed
-const normalizedMaxWidth = computed(() => screen.isSmall ? '100%' : props.maxWidth)
-
-const loadingStyle = computed(() => {
-  return {
-    right: `calc(100% - ${normalizedMaxWidth.value})`
-  }
-})
-
-const attributes = computed(() => {
-  const { modelValue } = attrs
-
-  return {
-    persistent: false,
-    modelValue,
-
-    ...props.dialogProps,
-
-    cancel: false,
-    maxWidth: normalizedMaxWidth.value,
-    maximized: true,
-    ok: false,
-    position: props.position,
-    useFullMaxWidth: true
-  }
-})
-
-function onUpdateModelValue (value) {
-  emit('update:modelValue', value)
-}
-</script>
-
-<style lang="scss">
-.qas-drawer {
-  &__loading {
-    height: 100vh;
-    left: 0;
-    position: absolute;
-    top: 0;
-  }
-}
-</style>
+<template>
+  <qas-dialog class="qas-drawer" v-bind="attributes" @update:model-value="onUpdateModelValue">
+    <template #header>
+      <div class="items-center justify-between row">
+        <span data-cy="drawer-title">
+          <slot name="title">
+            <h3 v-if="props.title" class="text-h3">
+              {{ props.title }}
+            </h3>
+          </slot>
+        </span>
+
+        <qas-btn v-close-popup class="z-max" color="grey-10" data-cy="drawer-close-btn" icon="sym_r_close" variant="tertiary" @click="emit('update:modelValue', false)" />
+      </div>
+    </template>
+
+    <template #description>
+      <div>
+        <div class="relative-position" data-cy="drawer-default">
+          <slot />
+        </div>
+
+        <div v-if="props.loading" class="qas-drawer__loading" :style="loadingStyle">
+          <div class="full-height relative-position">
+            <q-inner-loading :showing="props.loading">
+              <q-spinner color="grey" size="2em" />
+            </q-inner-loading>
+          </div>
+        </div>
+      </div>
+    </template>
+  </qas-dialog>
+</template>
+
+<script setup>
+import useScreen from '../../composables/use-screen.js'
+
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasDrawer',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  dialogProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  maxWidth: {
+    type: String,
+    default: '60%'
+  },
+
+  position: {
+    type: String,
+    default: 'left',
+    validator: value => ['left', 'right'].includes(value)
+  },
+
+  title: {
+    type: String,
+    default: ''
+  },
+
+  loading: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const attrs = useAttrs()
+const screen = useScreen()
+
+// computed
+const normalizedMaxWidth = computed(() => screen.isSmall ? '100%' : props.maxWidth)
+
+const loadingStyle = computed(() => {
+  return {
+    right: `calc(100% - ${normalizedMaxWidth.value})`
+  }
+})
+
+const attributes = computed(() => {
+  const { modelValue } = attrs
+
+  return {
+    persistent: false,
+    modelValue,
+
+    ...props.dialogProps,
+
+    cancel: false,
+    maxWidth: normalizedMaxWidth.value,
+    maximized: true,
+    ok: false,
+    position: props.position,
+    useFullMaxWidth: true
+  }
+})
+
+function onUpdateModelValue (value) {
+  emit('update:modelValue', value)
+}
+</script>
+
+<style lang="scss">
+.qas-drawer {
+  &__loading {
+    height: 100vh;
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+}
+</style>

package/src/components/drawer/QasDrawer.yml

@@ -1,58 +1,58 @@
-type: component
-
-meta:
-  desc: Componente de drawer que implementa o QasDialog.
-
-props:
-  dialog-props:
-    desc: Repassa propriedades para o QasDialog.
-    default: {}
-    type: Object
-
-  max-width:
-    desc: Tamanho máximo do dialog.
-    default: 60%
-    type: String
-
-  model-value:
-    desc: Model do componente, abre ou fecha o drawer.
-    type: Boolean
-    examples: [v-model="value"]
-    model: true
-
-  position:
-    desc: 'Posição do drawer, sendo possível apenas 2 opções: [left, right].'
-    default: left
-    type: String
-
-  title:
-    desc: Titulo do drawer.
-    type: String
-
-slots:
-  default:
-    desc: Slot para conteúdo principal.
-
-  title:
-    desc: Slot para o titulo.
-
-events:
-  '@update:model-value -> function (value)':
-    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
-    params:
-      value:
-        desc: Novo valor do v-model
-        type: Boolean
-
-selectors:
-  drawer-close-btn:
-    desc: Seletor do botão de fechar.
-    examples: ['data-cy="drawer-close-btn"']
-
-  drawer-default:
-    desc: Seletor do botão conteúdo do slot default.
-    examples: ['data-cy="drawer-default"']
-
-  drawer-title:
-    desc: Seletor do titulo.
-    examples: ['data-cy="drawer-title"']
+type: component
+
+meta:
+  desc: Componente de drawer que implementa o QasDialog.
+
+props:
+  dialog-props:
+    desc: Repassa propriedades para o QasDialog.
+    default: {}
+    type: Object
+
+  max-width:
+    desc: Tamanho máximo do dialog.
+    default: 60%
+    type: String
+
+  model-value:
+    desc: Model do componente, abre ou fecha o drawer.
+    type: Boolean
+    examples: [v-model="value"]
+    model: true
+
+  position:
+    desc: 'Posição do drawer, sendo possível apenas 2 opções: [left, right].'
+    default: left
+    type: String
+
+  title:
+    desc: Titulo do drawer.
+    type: String
+
+slots:
+  default:
+    desc: Slot para conteúdo principal.
+
+  title:
+    desc: Slot para o titulo.
+
+events:
+  '@update:model-value -> function (value)':
+    desc: Dispara toda vez que o model é atualizado, também utilizado para v-model.
+    params:
+      value:
+        desc: Novo valor do v-model
+        type: Boolean
+
+selectors:
+  drawer-close-btn:
+    desc: Seletor do botão de fechar.
+    examples: ['data-cy="drawer-close-btn"']
+
+  drawer-default:
+    desc: Seletor do botão conteúdo do slot default.
+    examples: ['data-cy="drawer-default"']
+
+  drawer-title:
+    desc: Seletor do titulo.
+    examples: ['data-cy="drawer-title"']

package/src/components/empty-result-text/QasEmptyResultText.vue

@@ -1,18 +1,18 @@
-<template>
-  <div class="text-body1 text-grey-8">
-    <slot>
-      {{ props.text }}
-    </slot>
-  </div>
-</template>
-
-<script setup>
-defineOptions({ name: 'QasEmptyResultText' })
-
-const props = defineProps({
-  text: {
-    default: 'Não há itens para serem exibidos.',
-    type: String
-  }
-})
-</script>
+<template>
+  <div class="text-body1 text-grey-8">
+    <slot>
+      {{ props.text }}
+    </slot>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'QasEmptyResultText' })
+
+const props = defineProps({
+  text: {
+    default: 'Não há itens para serem exibidos.',
+    type: String
+  }
+})
+</script>

package/src/components/empty-result-text/QasEmptyResultText.yml

@@ -1,14 +1,14 @@
-type: component
-
-meta:
-  desc: Componente de texto em casos de resultados vazio após filtros.
-
-props:
-  text:
-    desc: Texto a ser exibido.
-    default: Não há itens para serem exibidos.
-    type: String
-
-slots:
-  default:
-    desc: Slot que substitui a propriedade "text".
+type: component
+
+meta:
+  desc: Componente de texto em casos de resultados vazio após filtros.
+
+props:
+  text:
+    desc: Texto a ser exibido.
+    default: Não há itens para serem exibidos.
+    type: String
+
+slots:
+  default:
+    desc: Slot que substitui a propriedade "text".