@bildvitta/quasar-ui-asteroid 3.16.0-beta.4 → 3.16.0-beta.5

package/package.json

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

package/src/components/expansion-item/QasExpansionItem.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="qas-expansion-item" :class="errorClasses">
-    <qas-box class="qas-expansion-item__box">
+  <div ref="expansionItem" class="qas-expansion-item" :class="errorClasses">
+    <component :is="component.is" class="qas-expansion-item__box">
       <q-expansion-item header-class="text-bold q-mt-sm q-pa-none" :label="props.label">
         <template #header>
           <slot name="header">
             <div class="full-width">
               <div class="items-center q-col-gutter-sm row">
                 <slot name="label">
-                  <h5 class="col-auto text-h5 text-weight-medium">
+                  <h5 class="col-auto text-h5">
                     {{ props.label }}
                   </h5>
                 </slot>
@@ -18,17 +18,23 @@
                   </div>
                 </div>
               </div>
+
+              <div v-if="hasHeaderBottom" class="q-mt-sm">
+                <slot name="header-bottom" />
+              </div>
             </div>
           </slot>
         </template>
 
-        <q-separator class="q-my-md" />
+        <q-separator v-if="!isNestedExpansionItem" class="q-my-md" />
 
         <slot name="content">
           <qas-grid-generator v-if="hasGridGenerator" v-bind="gridGeneratorProps" use-inline />
         </slot>
+
+        <q-separator v-if="hasBottomSeparator" class="q-mt-md" />
       </q-expansion-item>
-    </qas-box>
+    </component>
 
     <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
       {{ props.errorMessage }}
@@ -37,7 +43,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import QasBox from '../box/QasBox.vue'
+
+import { computed, provide, inject, onMounted, ref } from 'vue'
 
 defineOptions({ name: 'QasExpansionItem' })
 
@@ -67,17 +75,55 @@ const props = defineProps({
   }
 })
 
-const hasError = computed(() => props.error || !!props.errorMessage)
+provide('isExpansionItem', true)
+
+// slots
+const slots = defineSlots()
+
+// refs
+const expansionItem = ref(null)
+const hasNextSibling = ref(false)
+
+onMounted(setHasNextSibling)
+
+// constants
+const isNestedExpansionItem = inject('isExpansionItem', false)
+const component = {
+  is: isNestedExpansionItem ? 'div' : QasBox
+}
 
+// computed
+const hasError = computed(() => props.error || !!props.errorMessage)
 const errorClasses = computed(() => ({ 'qas-expansion-item--error': hasError.value }))
 
 const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
+const hasHeaderBottom = computed(() => !!slots['header-bottom'])
+
+// functions
+
+/**
+ * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
+ * para adicionar um separador.
+ */
+function setHasNextSibling (value) {
+  if (!isNestedExpansionItem) return
+
+  const hasTextContentSibling = !!expansionItem.value.nextSibling.textContent?.trim?.()
+  const hasElementSibling = !!expansionItem.value.nextElementSibling
+
+  hasNextSibling.value = hasElementSibling || hasTextContentSibling
+}
 </script>
 
 <style lang="scss">
 .qas-expansion-item {
   $root: &;
 
+  & + & {
+    margin-top: var(--qas-spacing-lg);
+  }
+
   &--error {
     #{$root}__box {
       border: 2px solid $negative;

package/src/components/expansion-item/QasExpansionItem.yml

@@ -28,6 +28,9 @@ slots:
   header:
     desc: 'Slot para substituir o conteúdo do header'
 
+  header-bottom:
+    desc: 'Slot para acessar o conteúdo que fica abaixo do header.'
+
   label:
     desc: 'Slot para substituir o conteúdo da label do header.'
 

package/src/components/toggle-visibility/QasToggleVisibility.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="qas-toggle-visibility">
+    <div class="items-center no-wrap row" :style>
+      <div class="ellipsis qas-toggle-visibility__content">
+        <div
+          v-if="isVisible"
+          class="ellipsis full-width"
+          :title="props.text"
+        >
+          <slot>
+            {{ props.text }}
+          </slot>
+        </div>
+
+        <q-separator
+          v-else
+          size="4px"
+        />
+      </div>
+
+      <qas-btn
+        class="q-ml-sm qas-toggle-visibility__button"
+        :icon
+        @click="toggleVisibility"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useToggleVisibility } from '../../composables/private'
+
+import { uid } from 'quasar'
+import { computed } from 'vue'
+
+defineOptions({ name: 'QasToggleVisibility' })
+
+const props = defineProps({
+  group: {
+    type: String,
+    default: ''
+  },
+
+  text: {
+    type: String,
+    default: ''
+  },
+
+  uuid: {
+    type: String,
+    default: ''
+  },
+
+  width: {
+    type: String,
+    default: '140px'
+  }
+})
+
+const {
+  isVisible,
+  toggleVisibility
+} = useToggleVisibility({ group: props.group, uuid: props.uuid || uid() })
+
+const icon = computed(() => isVisible.value ? 'sym_r_visibility' : 'sym_r_visibility_off')
+const style = computed(() => ({ width: props.width }))
+</script>
+
+<style lang="scss">
+.qas-toggle-visibility {
+  &__content {
+    flex-grow: 1;
+  }
+
+  &__button {
+    flex-grow: 0;
+  }
+}
+</style>

package/src/components/toggle-visibility/QasToggleVisibility.yml

@@ -0,0 +1,30 @@
+type: component
+
+meta:
+  desc: Componente para ocultar e exibir conteúdo, utilizado para dados sensíveis.
+
+props:
+  group:
+    desc: Propriedade para criar grupos de separação.
+    default: ''
+    type: String
+    examples: ["name", "document", "users"]
+
+  text:
+    desc: Texto a ser oculto/exibido.
+    default: ''
+    type: String
+
+  uuid:
+    desc: É criado um uuid random para cada componente, para que possa ser feito o controle interno, porém é possível sobrescrever por esta propriedade.
+    default: ''
+    type: String
+
+  width:
+    desc: Tamanho do conteúdo a ser oculto/exibido.
+    default: '140px'
+    type: String
+
+slots:
+  default:
+    desc: Slot para inserir conteúdo a ser oculto/exibido.

package/src/composables/private/index.js

@@ -1,2 +1,3 @@
 export { default as useView } from './use-view'
 export { default as useGenerator } from './use-generator'
+export { default as useToggleVisibility } from './use-toggle-visibility'

package/src/composables/private/use-toggle-visibility.js

@@ -0,0 +1,48 @@
+import { ref, computed } from 'vue'
+
+const visibleState = ref({})
+
+/**
+ * @param {{
+ *  group?: string,
+ *  uuid: string
+ * }}
+ */
+export default function useToggleVisibility ({ group, uuid }) {
+  group = group || 'default'
+
+  visibleState.value[group] = {
+    ...visibleState.value[group],
+    [uuid]: false
+  }
+
+  const isVisible = computed(() => visibleState.value[group]?.[uuid] || false)
+
+  function toggleVisibility () {
+    const item = visibleState.value[group]
+    const lastVisibleItemKey = Object.keys(item).find(key => !!item[key])
+
+    /**
+     * cenário onde esta visível e clicou no mesmo item
+     */
+    if (visibleState.value[group][uuid]) {
+      visibleState.value[group][uuid] = false
+      return
+    }
+
+    /**
+     * cenário onde tem um item visível e clicou em outro item
+     */
+    if (lastVisibleItemKey) {
+      visibleState.value[group][lastVisibleItemKey] = false
+    }
+
+    visibleState.value[group][uuid] = true
+  }
+
+  return {
+    isVisible,
+
+    toggleVisibility
+  }
+}

package/src/vue-plugin.js

@@ -64,6 +64,7 @@ import QasTableGenerator from './components/table-generator/QasTableGenerator.vu
 import QasTabsGenerator from './components/tabs-generator/QasTabsGenerator.vue'
 import QasTextTruncate from './components/text-truncate/QasTextTruncate.vue'
 import QasTimeline from './components/timeline/QasTimeline.vue'
+import QasToggleVisibility from './components/toggle-visibility/QasToggleVisibility.vue'
 import QasTransfer from './components/transfer/QasTransfer.vue'
 import QasTreeGenerator from './components/tree-generator/QasTreeGenerator.vue'
 import QasUploader from './components/uploader/QasUploader.vue'
@@ -157,6 +158,7 @@ async function install (app) {
   app.component('QasTabsGenerator', QasTabsGenerator)
   app.component('QasTextTruncate', QasTextTruncate)
   app.component('QasTimeline', QasTimeline)
+  app.component('QasToggleVisibility', QasToggleVisibility)
   app.component('QasTransfer', QasTransfer)
   app.component('QasTreeGenerator', QasTreeGenerator)
   app.component('QasUploader', QasUploader)
@@ -252,6 +254,7 @@ export {
   QasTabsGenerator,
   QasTextTruncate,
   QasTimeline,
+  QasToggleVisibility,
   QasTransfer,
   QasTreeGenerator,
   QasUploader,