@bildvitta/quasar-ui-asteroid 3.12.0-beta.4 → 3.12.0-beta.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.12.0-beta.4",
+  "version": "3.12.0-beta.6",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/alert/QasAlert.vue

@@ -1,87 +1,110 @@
 <template>
-  <div v-if="model" class="bg-white q-pa-lg qas-alert relative-position rounded-borders" :class="classes">
-    <qas-btn class="absolute-top-right q-mr-md q-mt-sm" color="grey-9" icon="sym_r_close" variant="tertiary" @click="close" />
+  <div v-if="show" class="inline-block">
+    <div class="bg-dark flex justify-between no-wrap q-pa-md qas-alert relative-position">
+      <div class="qas-alert__border-left" :class="borderClass" />
 
-    <div class="q-gutter-md q-mr-lg">
-      <slot name="header">
-        <h5 v-if="title" class="text-bold text-h5" data-test="alert-title">{{ title }}</h5>
-      </slot>
+      <div class="text-body1 text-white">
+        <slot>
+          {{ text }}
+        </slot>
+      </div>
 
-      <slot>
-        <qas-breakline tag="p" :text="text" />
-      </slot>
+      <qas-btn
+        class="q-ml-xs qas-alert__close"
+        color="white"
+        icon="sym_r_close"
+        :use-hover-on-white-color="false"
+        @click="close"
+      />
     </div>
   </div>
 </template>
 
-<script>
-import QasBreakline from '../breakline/QasBreakline.vue'
-import QasBtn from '../btn/QasBtn.vue'
+<script setup>
+import { LocalStorage } from 'quasar'
+import { Status, StatusColor } from '../../enums/Status'
+import { computed, watch, ref } from 'vue'
 
-export default {
-  name: 'QasAlert',
+defineOptions({ name: 'QasAlert' })
 
-  components: {
-    QasBreakline,
-    QasBtn
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true
   },
 
-  props: {
-    modelValue: {
-      default: true,
-      type: Boolean
-    },
-
-    text: {
-      default: '',
-      type: String
-    },
-
-    color: {
-      type: String,
-      default: 'primary'
-    },
-
-    title: {
-      default: '',
-      type: String
-    }
+  text: {
+    type: String,
+    default: ''
   },
 
-  emits: ['update:modelValue'],
-
-  data () {
-    return {
-      model: true
-    }
+  storageKey: {
+    type: String,
+    default: ''
   },
 
-  computed: {
-    classes () {
-      return `text-${this.color}`
-    }
+  status: {
+    type: String,
+    default: Status.Info,
+    validator: value => Object.values(Status).includes(value)
   },
 
-  watch: {
-    modelValue: {
-      handler (value) {
-        this.model = value
-      },
-      immediate: true
-    }
-  },
+  usePersistentModelOnClose: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const model = ref(props.modelValue)
+
+watch(() => props.modelValue, value => {
+  model.value = value
+})
+
+const colorByStatus = computed(() => {
+  const status = Object.keys(Status).find(key => Status[key] === props.status)
+  return StatusColor[status]
+})
+
+const borderClass = computed(() => `bg-${colorByStatus.value}`)
+
+const storageClosedKey = computed(() => `alert-${props.storageKey}-closed`)
 
-  methods: {
-    close () {
-      this.$emit('update:modelValue', false)
-    }
+const isClosed = computed(() => {
+  return props.usePersistentModelOnClose && LocalStorage.getItem(storageClosedKey.value)
+})
+
+const show = computed(() => !isClosed.value && model.value)
+
+function close () {
+  if (props.usePersistentModelOnClose) {
+    LocalStorage.set(storageClosedKey.value, true)
   }
+
+  model.value = false
+
+  emit('update:modelValue', model.value)
 }
+
 </script>
 
 <style lang="scss">
 .qas-alert {
-  border-style: solid;
-  border-width: 0 10px;
+  border-radius: var(--qas-generic-border-radius);
+
+  &__border-left {
+    border-radius: var(--qas-generic-border-radius) 0 0 var(--qas-generic-border-radius);
+    bottom: 0;
+    content: '';
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 4px;
+  }
+
+  &__close {
+    top: calc(var(--qas-spacing-sm) * -1);
+  }
 }
 </style>

package/src/components/alert/QasAlert.yml

@@ -9,21 +9,27 @@ props:
     default: true
     type: Boolean
 
-  title:
-    desc: Título do componente.
-    type: String
-
   text:
     desc: Texto do componente.
     type: String
 
+  status:
+    desc: Status do alerta.
+    type: String
+    examples: ['error', 'info']
+
+  storage-key:
+    desc: Chave a ser salva no localStorage, necessário caso esteja usando mais de um QasAlert na aplicação e ambos estejam com a prop "use-persist-model-on-close" ativada.
+    type: String
+
+  use-persistent-model-on-close:
+    desc: Habilita salvar o model em localStorage ao fechar o alerta para não aparecer novamente.
+    type: Boolean
+
 slots:
   default:
     desc: 'Slot para acessar o conteúdo gerado pela prop "text"'
 
-  header:
-    desc: 'Slot para acessar o conteúdo gerado pela prop "title"'
-
 events:
   '@update:model-value -> function(value)':
     desc: Dispara quando o model-value altera, também usado para v-model.

package/src/components/nested-fields/QasNestedFields.vue

@@ -130,7 +130,7 @@ export default {
     },
 
     disabledRows: {
-      type: [Array, Boolean],
+      type: [Array, Boolean, Function],
       default: false
     },
 
@@ -449,6 +449,8 @@ export default {
     isDisabledRow (row) {
       if (!this.disabledRows) return false
 
+      if (typeof this.disabledRows === 'function') return this.disabledRows(row)
+
       if (typeof this.disabledRows === 'boolean') return true
 
       return this.disabledRows.includes(row[this.identifierItemKey])

package/src/components/nested-fields/QasNestedFields.yml

@@ -37,10 +37,10 @@ props:
     type: String
 
   disabled-rows:
-    desc: Com esta propriedade é possível desabilitar rows (linhas) especificas passando um array com chaves identificadoras, ou caso queira desativar todas passando um boolean "true" (isto vai remover todos os botões da linha, duplicar e excluir).
+    desc: Com esta propriedade é possível desabilitar rows (linhas) especificas passando um array com chaves identificadoras, caso queira desativar todas passe um valor boolean "true", ou também é possível utilizar uma função de callback, que receberá a "row" como parâmetro. (Isto vai remover todos os botões da linha, como por exemplo, o duplicar e excluir).
     default: "false"
-    type: [Array, Boolean]
-    examples: ["['my-uuid-from-row-1']", true]
+    type: [Array, Boolean, Function]
+    examples: ["['my-uuid-from-row-1']", true, "row => row.disable"]
 
   errors:
     desc: Propriedade de erros para mostrar nos campos gerados.

package/src/enums/Status.js

@@ -0,0 +1,33 @@
+/**
+ * Cores por status
+ *
+ * @property
+ * @name Spacing
+ * @readonly
+ * @enum
+ * @type {{
+ * Info: 'yellow-14',
+ * Error: 'red-14'
+ * }}
+*/
+export const StatusColor = {
+  Info: 'yellow-14',
+  Error: 'red-14'
+}
+
+/**
+ * Status
+ *
+ * @property
+ * @name Spacing
+ * @readonly
+ * @enum
+ * @type {{
+ * Info: 'info',
+ * Error: 'error'
+ * }}
+ */
+export const Status = {
+  Info: 'info',
+  Error: 'error'
+}