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

package/src/components/btn/QasBtn.vue

@@ -1,148 +1,148 @@
-<template>
-  <q-btn ref="button" class="qas-btn" v-bind="attributes">
-    <slot />
-
-    <template v-for="(_, name) in nonDefaultSlots" #[name]="context">
-      <slot :name="name" v-bind="context || {}" />
-    </template>
-  </q-btn>
-</template>
-
-<script setup>
-import { useScreen } from '../../composables'
-
-import { computed, useAttrs, useSlots } from 'vue'
-
-defineOptions({
-  name: 'QasBtn',
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  color: {
-    default: 'primary',
-    type: String,
-    validator: value => ['grey-10', 'primary', 'white'].includes(value)
-  },
-
-  icon: {
-    default: undefined,
-    type: String
-  },
-
-  iconRight: {
-    default: undefined,
-    type: String
-  },
-
-  useLabelOnSmallScreen: {
-    default: true,
-    type: Boolean
-  },
-
-  label: {
-    default: '',
-    type: String
-  },
-
-  variant: {
-    default: 'tertiary',
-    type: String,
-    validator: value => {
-      const variants = ['primary', 'secondary', 'tertiary']
-
-      return variants.includes(value)
-    }
-  },
-
-  useEllipsis: {
-    type: Boolean
-  },
-
-  useHoverOnWhiteColor: {
-    default: true,
-    type: Boolean
-  }
-})
-
-const attrs = useAttrs()
-const slots = useSlots()
-const screen = useScreen()
-
-// variantes
-const isPrimary = computed(() => props.variant === 'primary')
-const isSecondary = computed(() => props.variant === 'secondary')
-const isTertiary = computed(() => props.variant === 'tertiary')
-
-const showLabel = computed(() => props.useLabelOnSmallScreen || !screen.isSmall)
-
-const hasIconOnly = computed(() => {
-  return (
-    (!props.label || !showLabel.value) &&
-    ((props.icon && !props.iconRight) || (props.iconRight && !props.icon))
-  )
-})
-
-const classes = computed(() => {
-  return {
-    'qas-btn--primary': isPrimary.value,
-    'qas-btn--secondary': isSecondary.value,
-    'qas-btn--tertiary': isTertiary.value,
-
-    // color
-    [`qas-btn--tertiary-${props.color}`]: isTertiary.value,
-
-    // icon
-    'qas-btn--icon-only': hasIconOnly.value,
-
-    'qas-btn--primary-icon-only': hasIconOnly.value && isPrimary.value,
-    'qas-btn--secondary-icon-only': hasIconOnly.value && isSecondary.value,
-    'qas-btn--tertiary-icon-only': hasIconOnly.value && isTertiary.value,
-
-    // hover
-    'qas-btn--no-hover-on-white': !props.useHoverOnWhiteColor,
-
-    // ellipsis
-    'qas-btn--ellipsis': props.useEllipsis
-  }
-})
-
-const attributes = computed(() => {
-  const {
-    dense,
-    fab,
-    fabMini,
-    flat,
-    glossy,
-    noWrap,
-    outline,
-    padding,
-    push,
-    ripple,
-    round,
-    size,
-    square,
-    stack,
-    stretch,
-    textColor,
-    unelevated,
-    class: externalClass,
-    ...attributesPayload
-  } = attrs
-
-  return {
-    ...(showLabel.value && { label: props.label }),
-
-    ...attributesPayload,
-    icon: props.icon,
-    iconRight: props.iconRight,
-    class: [classes.value, externalClass]
-  }
-})
-
-const nonDefaultSlots = computed(() => {
-  const { default: _, ...nonDefaults } = slots
-
-  return nonDefaults
-})
-</script>
+<template>
+  <q-btn ref="button" class="qas-btn" v-bind="attributes">
+    <slot />
+
+    <template v-for="(_, name) in nonDefaultSlots" #[name]="context">
+      <slot :name="name" v-bind="context || {}" />
+    </template>
+  </q-btn>
+</template>
+
+<script setup>
+import { useScreen } from '../../composables'
+
+import { computed, useAttrs, useSlots } from 'vue'
+
+defineOptions({
+  name: 'QasBtn',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  color: {
+    default: 'primary',
+    type: String,
+    validator: value => ['grey-10', 'primary', 'white'].includes(value)
+  },
+
+  icon: {
+    default: undefined,
+    type: String
+  },
+
+  iconRight: {
+    default: undefined,
+    type: String
+  },
+
+  useLabelOnSmallScreen: {
+    default: true,
+    type: Boolean
+  },
+
+  label: {
+    default: '',
+    type: String
+  },
+
+  variant: {
+    default: 'tertiary',
+    type: String,
+    validator: value => {
+      const variants = ['primary', 'secondary', 'tertiary']
+
+      return variants.includes(value)
+    }
+  },
+
+  useEllipsis: {
+    type: Boolean
+  },
+
+  useHoverOnWhiteColor: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const attrs = useAttrs()
+const slots = useSlots()
+const screen = useScreen()
+
+// variantes
+const isPrimary = computed(() => props.variant === 'primary')
+const isSecondary = computed(() => props.variant === 'secondary')
+const isTertiary = computed(() => props.variant === 'tertiary')
+
+const showLabel = computed(() => props.useLabelOnSmallScreen || !screen.isSmall)
+
+const hasIconOnly = computed(() => {
+  return (
+    (!props.label || !showLabel.value) &&
+    ((props.icon && !props.iconRight) || (props.iconRight && !props.icon))
+  )
+})
+
+const classes = computed(() => {
+  return {
+    'qas-btn--primary': isPrimary.value,
+    'qas-btn--secondary': isSecondary.value,
+    'qas-btn--tertiary': isTertiary.value,
+
+    // color
+    [`qas-btn--tertiary-${props.color}`]: isTertiary.value,
+
+    // icon
+    'qas-btn--icon-only': hasIconOnly.value,
+
+    'qas-btn--primary-icon-only': hasIconOnly.value && isPrimary.value,
+    'qas-btn--secondary-icon-only': hasIconOnly.value && isSecondary.value,
+    'qas-btn--tertiary-icon-only': hasIconOnly.value && isTertiary.value,
+
+    // hover
+    'qas-btn--no-hover-on-white': !props.useHoverOnWhiteColor,
+
+    // ellipsis
+    'qas-btn--ellipsis': props.useEllipsis
+  }
+})
+
+const attributes = computed(() => {
+  const {
+    dense,
+    fab,
+    fabMini,
+    flat,
+    glossy,
+    noWrap,
+    outline,
+    padding,
+    push,
+    ripple,
+    round,
+    size,
+    square,
+    stack,
+    stretch,
+    textColor,
+    unelevated,
+    class: externalClass,
+    ...attributesPayload
+  } = attrs
+
+  return {
+    ...(showLabel.value && { label: props.label }),
+
+    ...attributesPayload,
+    icon: props.icon,
+    iconRight: props.iconRight,
+    class: [classes.value, externalClass]
+  }
+})
+
+const nonDefaultSlots = computed(() => {
+  const { default: _, ...nonDefaults } = slots
+
+  return nonDefaults
+})
+</script>

package/src/components/btn/QasBtn.yml

@@ -1,48 +1,48 @@
-type: component
-
-mixins:
-  - quasar/dist/api/QBtn.json
-
-meta:
-  desc: O mesmo botão do Quasar (QBtn), mas com o nosso estilo, tem acesso a todas propriedades do componente do quasar. Tem a função de criar gatilhos para ações. Eles podem ser utilizados isoladamente ou ​​como parte de outros componentes de padrões maiores, como formulários, caixas de diálogo e feedbacks.
-
-props:
-  color:
-    desc: Cor do botão, sendo possível alterar somente quando a variante for "tertiary", podendo ser "primary", "grey-10" ou "white".
-    default: primary
-    type: String
-    examples: ['grey-10', 'primary', 'white']
-
-  icon:
-    desc: Ícone a esquerda.
-    type: String
-
-  icon-right:
-    desc: Ícone a direita.
-    type: String
-
-  use-ellipsis:
-    desc: adiciona ellipsis no label caso o label seja maior que a área total do botão.
-    default: false
-    type: Boolean
-
-  use-hover-on-white-color:
-    desc: Quando usamos a cor branca para contrast, em alguns casos podemos não querer ter um hover de outra cor justamente por conta do contraste, esta propriedade só funciona com variante "tertiary" e cor "white", para remover o hover sete o valor para "false".
-    default: true
-    type: Boolean
-
-  use-label-on-small-screen:
-    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno (esta propriedade só funciona se o "rotulo") for passado via propriedade "label".
-    default: true
-    type: Boolean
-
-
-  label:
-    desc: Rótulo do botão.
-    type: String
-
-  variant:
-    desc: Variantes do botão, que define para qual comportamento o botão será usado, podendo ser "primary", "secondary" ou "tertiary".
-    default: tertiary
-    type: String
-    examples: ['primary', 'secondary', 'tertiary']
+type: component
+
+mixins:
+  - quasar/dist/api/QBtn.json
+
+meta:
+  desc: O mesmo botão do Quasar (QBtn), mas com o nosso estilo, tem acesso a todas propriedades do componente do quasar. Tem a função de criar gatilhos para ações. Eles podem ser utilizados isoladamente ou ​​como parte de outros componentes de padrões maiores, como formulários, caixas de diálogo e feedbacks.
+
+props:
+  color:
+    desc: Cor do botão, sendo possível alterar somente quando a variante for "tertiary", podendo ser "primary", "grey-10" ou "white".
+    default: primary
+    type: String
+    examples: ['grey-10', 'primary', 'white']
+
+  icon:
+    desc: Ícone a esquerda.
+    type: String
+
+  icon-right:
+    desc: Ícone a direita.
+    type: String
+
+  use-ellipsis:
+    desc: adiciona ellipsis no label caso o label seja maior que a área total do botão.
+    default: false
+    type: Boolean
+
+  use-hover-on-white-color:
+    desc: Quando usamos a cor branca para contrast, em alguns casos podemos não querer ter um hover de outra cor justamente por conta do contraste, esta propriedade só funciona com variante "tertiary" e cor "white", para remover o hover sete o valor para "false".
+    default: true
+    type: Boolean
+
+  use-label-on-small-screen:
+    desc: Esconde o rótulo (label) do botão quando o tamanho da tela for pequeno (esta propriedade só funciona se o "rotulo") for passado via propriedade "label".
+    default: true
+    type: Boolean
+
+
+  label:
+    desc: Rótulo do botão.
+    type: String
+
+  variant:
+    desc: Variantes do botão, que define para qual comportamento o botão será usado, podendo ser "primary", "secondary" ou "tertiary".
+    default: tertiary
+    type: String
+    examples: ['primary', 'secondary', 'tertiary']

package/src/components/btn-dropdown/QasBtnDropdown.vue

@@ -1,146 +1,146 @@
-<template>
-  <div class="qas-btn-dropdown" :class="classes.parent">
-    <div v-if="hasButtons" :class="classes.list">
-      <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
-        <div class="flex no-wrap">
-          <qas-btn :disable="props.disable" v-bind="buttonProps" no-wrap variant="tertiary" @click="onClick">
-            <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
-              <div :class="classes.menuContent">
-                <slot />
-              </div>
-            </q-menu>
-          </qas-btn>
-
-          <slot :name="`bottom-${key}`" />
-
-          <q-separator v-if="hasSeparator(index)" class="q-mx-sm qas-btn-dropdown__separator self-center" dark vertical />
-        </div>
-      </div>
-    </div>
-
-    <div v-if="props.useSplit">
-      <qas-btn v-bind="splittedButtonProps">
-        <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
-          <div :class="classes.menuContent">
-            <slot />
-          </div>
-        </q-menu>
-      </qas-btn>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import useScreen from '../../composables/use-screen'
-
-import { ref, watch, computed, useSlots } from 'vue'
-
-defineOptions({
-  name: 'QasBtnDropdown',
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  buttonsPropsList: {
-    default: () => ({}),
-    type: Object
-  },
-
-  dropdownIcon: {
-    default: 'sym_r_more_vert',
-    type: String
-  },
-
-  disable: {
-    type: Boolean
-  },
-
-  menu: {
-    type: Boolean
-  },
-
-  useMenuPadding: {
-    type: Boolean
-  },
-
-  useSplit: {
-    type: Boolean
-  },
-
-  useTooltip: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const emit = defineEmits(['click', 'update:menu'])
-
-const slots = useSlots()
-const screen = useScreen()
-
-const isMenuOpened = ref(false)
-
-const classes = computed(() => {
-  return {
-    parent: {
-      'flex inline items-center': props.useSplit
-    },
-
-    menuContent: {
-      'q-pa-md': props.useMenuPadding
-    },
-
-    list: {
-      'flex no-wrap': !isSingleButton.value
-    }
-  }
-})
-
-const buttonsPropsListSize = computed(() => Object.keys(props.buttonsPropsList).length)
-const isSingleButton = computed(() => buttonsPropsListSize.value === 1)
-
-const hasButtons = computed(() => !screen.isSmall || !props.useSplit)
-const hasDefaultSlot = computed(() => !!slots.default)
-const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit && isSingleButton.value)
-
-const splittedButtonProps = computed(() => {
-  const iconKey = screen.isSmall ? 'icon' : 'iconRight'
-
-  return {
-    color: 'grey-10',
-    disable: props.disable,
-    [iconKey]: props.dropdownIcon,
-    variant: 'tertiary',
-    label: 'Opções',
-    useLabelOnSmallScreen: false
-  }
-})
-
-watch(() => props.menu, value => {
-  isMenuOpened.value = value
-}, { immediate: true })
-
-function onUpdateMenuValue (value) {
-  emit('update:menu', value)
-}
-
-function onClick (event) {
-  emit('click', event)
-}
-
-function isLast (index) {
-  return index + 1 === buttonsPropsListSize.value
-}
-
-function hasSeparator (index) {
-  return props.useSplit || !isLast(index)
-}
-</script>
-
-<style lang="scss">
-.qas-btn-dropdown {
-  &__separator {
-    height: 18px;
-  }
-}
-</style>
+<template>
+  <div class="qas-btn-dropdown" :class="classes.parent">
+    <div v-if="hasButtons" :class="classes.list">
+      <div v-for="(buttonProps, key, index) in props.buttonsPropsList" :key="key">
+        <div class="flex no-wrap">
+          <qas-btn :disable="props.disable" v-bind="buttonProps" no-wrap variant="tertiary" @click="onClick">
+            <q-menu v-if="hasMenuOnLeftSide" v-model="isMenuOpened" anchor="bottom right" auto-close self="top right" @update:model-value="onUpdateMenuValue">
+              <div :class="classes.menuContent">
+                <slot />
+              </div>
+            </q-menu>
+          </qas-btn>
+
+          <slot :name="`bottom-${key}`" />
+
+          <q-separator v-if="hasSeparator(index)" class="q-mx-sm qas-btn-dropdown__separator self-center" dark vertical />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="props.useSplit">
+      <qas-btn v-bind="splittedButtonProps">
+        <q-menu v-if="hasDefaultSlot" anchor="bottom right" auto-close self="top right">
+          <div :class="classes.menuContent">
+            <slot />
+          </div>
+        </q-menu>
+      </qas-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useScreen from '../../composables/use-screen'
+
+import { ref, watch, computed, useSlots } from 'vue'
+
+defineOptions({
+  name: 'QasBtnDropdown',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  buttonsPropsList: {
+    default: () => ({}),
+    type: Object
+  },
+
+  dropdownIcon: {
+    default: 'sym_r_more_vert',
+    type: String
+  },
+
+  disable: {
+    type: Boolean
+  },
+
+  menu: {
+    type: Boolean
+  },
+
+  useMenuPadding: {
+    type: Boolean
+  },
+
+  useSplit: {
+    type: Boolean
+  },
+
+  useTooltip: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['click', 'update:menu'])
+
+const slots = useSlots()
+const screen = useScreen()
+
+const isMenuOpened = ref(false)
+
+const classes = computed(() => {
+  return {
+    parent: {
+      'flex inline items-center': props.useSplit
+    },
+
+    menuContent: {
+      'q-pa-md': props.useMenuPadding
+    },
+
+    list: {
+      'flex no-wrap': !isSingleButton.value
+    }
+  }
+})
+
+const buttonsPropsListSize = computed(() => Object.keys(props.buttonsPropsList).length)
+const isSingleButton = computed(() => buttonsPropsListSize.value === 1)
+
+const hasButtons = computed(() => !screen.isSmall || !props.useSplit)
+const hasDefaultSlot = computed(() => !!slots.default)
+const hasMenuOnLeftSide = computed(() => hasDefaultSlot.value && !props.useSplit && isSingleButton.value)
+
+const splittedButtonProps = computed(() => {
+  const iconKey = screen.isSmall ? 'icon' : 'iconRight'
+
+  return {
+    color: 'grey-10',
+    disable: props.disable,
+    [iconKey]: props.dropdownIcon,
+    variant: 'tertiary',
+    label: 'Opções',
+    useLabelOnSmallScreen: false
+  }
+})
+
+watch(() => props.menu, value => {
+  isMenuOpened.value = value
+}, { immediate: true })
+
+function onUpdateMenuValue (value) {
+  emit('update:menu', value)
+}
+
+function onClick (event) {
+  emit('click', event)
+}
+
+function isLast (index) {
+  return index + 1 === buttonsPropsListSize.value
+}
+
+function hasSeparator (index) {
+  return props.useSplit || !isLast(index)
+}
+</script>
+
+<style lang="scss">
+.qas-btn-dropdown {
+  &__separator {
+    height: 18px;
+  }
+}
+</style>