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

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

@@ -1,291 +1,291 @@
-<template>
-  <div ref="expansionItem" class="full-width qas-expansion-item" :class="classes" v-bind="expansionProps.parent">
-    <component :is="component.is" class="qas-expansion-item__box" v-bind="boxProps">
-      <q-expansion-item v-model="modelValue" v-bind="expansionProps.item" header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header" @show="setShowContent">
-        <template #header>
-          <div class="full-width justify-between no-wrap row">
-            <div class="full-width">
-              <slot name="header">
-                <div class="items-center q-col-gutter-sm row">
-                  <slot name="header-label">
-                    <qas-label class="col-auto qas-expansion-item__label" :label="props.label" margin="none" typography="h5" />
-                  </slot>
-
-                  <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
-                    <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
-                      <qas-badge v-bind="badge" />
-                    </div>
-                  </div>
-                </div>
-
-                <div v-if="hasHeaderBottom" class="q-mt-sm">
-                  <slot name="header-bottom" />
-                </div>
-              </slot>
-            </div>
-
-            <qas-btn class="qas-expansion-item__dropdown" color="grey-10" :disable="isDisabled" icon="sym_r_keyboard_arrow_down" />
-          </div>
-        </template>
-
-        <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
-
-        <div :class="contentClasses">
-          <slot v-if="showContent" name="content">
-            <qas-grid-generator v-if="hasGridGenerator" use-inline v-bind="gridGeneratorProps" />
-          </slot>
-        </div>
-
-        <q-separator v-if="hasBottomSeparator" class="q-mt-md" />
-      </q-expansion-item>
-    </component>
-
-    <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
-      {{ props.errorMessage }}
-    </div>
-  </div>
-</template>
-
-<script setup>
-import QasBox from '../box/QasBox.vue'
-
-import { computed, provide, inject, onMounted, ref, useAttrs } from 'vue'
-
-defineOptions({
-  name: 'QasExpansionItem',
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  badges: {
-    type: Array,
-    default: () => []
-  },
-
-  disable: {
-    type: Boolean
-  },
-
-  disableButton: {
-    type: Boolean
-  },
-
-  error: {
-    type: Boolean
-  },
-
-  errorMessage: {
-    type: String,
-    default: ''
-  },
-
-  gridGeneratorProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  group: {
-    type: String,
-    default: undefined
-  },
-
-  label: {
-    type: String,
-    default: ''
-  },
-
-  maxContentHeight: {
-    type: String,
-    default: ''
-  },
-
-  useHeaderSeparator: {
-    type: Boolean,
-    default: undefined
-  }
-})
-
-const modelValue = defineModel({ type: Boolean })
-
-const attrs = useAttrs()
-
-provide('isExpansionItem', true)
-
-// slots
-const slots = defineSlots()
-
-// refs
-const expansionItem = ref(null)
-const hasNextSibling = ref(false)
-const showContent = ref(false)
-
-onMounted(setHasNextSibling)
-
-// constants
-const isNestedExpansionItem = inject('isExpansionItem', false)
-const isNestedBox = inject('isBox', false)
-
-const component = {
-  is: isNestedExpansionItem ? 'div' : QasBox
-}
-
-// computed
-const hasBadges = computed(() => !!props.badges.length)
-const hasError = computed(() => props.error || !!props.errorMessage)
-const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
-const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
-const hasHeaderBottom = computed(() => !!slots['header-bottom'])
-
-/**
- * Verifica se o componente deve adicionar um separador no header.
- *
- * - Se a propriedade useHeaderSeparator for true, retorna separador.
- * - Se a propriedade useHeaderSeparator for undefined, retorna separador apenas se não for um componente aninhado.
- * - Se a propriedade useHeaderSeparator for false, não retorna separador.
- */
-const hasHeaderSeparator = computed(() => {
-  return typeof props.useHeaderSeparator === 'undefined' ? !isNestedExpansionItem : props.useHeaderSeparator
-})
-
-const classes = computed(() => {
-  return {
-    'qas-expansion-item--error': hasError.value,
-    'qas-expansion-item--disabled': props.disable || props.disableButton,
-    'qas-expansion-item--disabled-full': props.disable
-  }
-})
-
-const contentClasses = computed(() => {
-  return {
-    'q-mt-sm': isNestedExpansionItem,
-    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator,
-    'qas-expansion-item__content overflow-auto': !!props.maxContentHeight
-  }
-})
-
-const expansionProps = computed(() => {
-  const {
-    'onUpdate:modelValue': onUpdateModelValue,
-    onShow,
-    onBeforeShow,
-    onBeforeHide,
-    onAfterShow,
-    onAfterHide,
-    ...propsPayload
-  } = attrs
-
-  return {
-    parent: propsPayload,
-
-    item: {
-      disable: isDisabled.value,
-      hideExpandIcon: true,
-      label: props.label,
-      group: props.group,
-
-      // events
-      onUpdateModelValue,
-      onShow,
-      onBeforeShow,
-      onBeforeHide,
-      onAfterShow,
-      onAfterHide
-    }
-  }
-})
-
-const boxProps = computed(() => {
-  /**
-   * Caso o QasExpansionItem estiver dentro de um QasBox e não for um QasExpansionItem
-   * dentro de outro QasExpansionItem, o componente terá uma borda.
-  */
-  const isBoxed = isNestedBox && !isNestedExpansionItem
-
-  if (!isBoxed) return {}
-
-  return {
-    unelevated: isBoxed,
-    outlined: isBoxed
-  }
-})
-
-const isDisabled = computed(() => props.disable || props.disableButton)
-
-// functions
-
-/**
- * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
- * para adicionar um separador.
- */
-function setHasNextSibling () {
-  if (!isNestedExpansionItem) return
-
-  const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
-  const hasElementSibling = !!expansionItem.value.nextElementSibling
-
-  hasNextSibling.value = hasElementSibling || hasTextContentSibling
-}
-
-function setShowContent () {
-  showContent.value = true
-}
-</script>
-
-<style lang="scss">
-.qas-expansion-item {
-  $root: &;
-
-  &--disabled {
-    .q-item.disabled {
-      opacity: 1 !important;
-    }
-  }
-
-  &--disabled-full {
-    #{$root}__label {
-      color: $grey-6 !important;
-    }
-  }
-
-  &--error {
-    #{$root}__box {
-      border: 2px solid $negative !important;
-    }
-
-    #{$root}__error-message {
-      padding-left: 12px; // espaçamento igual ao de erro do quasar.
-    }
-  }
-
-  &__content {
-    max-height: v-bind("props.maxContentHeight");
-  }
-
-  // em alguns casos quando usado com grid, o espaçamento afetava o header, com z-index o problema é resolvido
-  &__header {
-    position: relative;
-    z-index: 1;
-  }
-
-  .q-expansion-item {
-    #{$root}__dropdown {
-      transition: transform var(--qas-generic-transition);;
-    }
-
-    &--expanded {
-      #{$root}__dropdown {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .q-item {
-    margin-top: 0;
-    min-height: auto;
-  }
-
-  .q-item:hover {
-    color: initial !important;
-  }
-}
-</style>
+<template>
+  <div ref="expansionItem" class="full-width qas-expansion-item" :class="classes" v-bind="expansionProps.parent">
+    <component :is="component.is" class="qas-expansion-item__box" v-bind="boxProps">
+      <q-expansion-item v-model="modelValue" v-bind="expansionProps.item" header-class="text-bold q-mt-sm q-pa-none qas-expansion-item__header" @show="setShowContent">
+        <template #header>
+          <div class="full-width justify-between no-wrap row">
+            <div class="full-width">
+              <slot name="header">
+                <div class="items-center q-col-gutter-sm row">
+                  <slot name="header-label">
+                    <qas-label class="col-auto qas-expansion-item__label" :label="props.label" margin="none" typography="h5" />
+                  </slot>
+
+                  <div v-if="hasBadges" class="col-auto items-center q-col-gutter-sm row">
+                    <div v-for="(badge, badgeIndex) in props.badges" :key="badgeIndex" class="col-auto">
+                      <qas-badge v-bind="badge" />
+                    </div>
+                  </div>
+                </div>
+
+                <div v-if="hasHeaderBottom" class="q-mt-sm">
+                  <slot name="header-bottom" />
+                </div>
+              </slot>
+            </div>
+
+            <qas-btn class="qas-expansion-item__dropdown" color="grey-10" :disable="isDisabled" icon="sym_r_keyboard_arrow_down" />
+          </div>
+        </template>
+
+        <q-separator v-if="hasHeaderSeparator" class="q-my-md" />
+
+        <div :class="contentClasses">
+          <slot v-if="showContent" name="content">
+            <qas-grid-generator v-if="hasGridGenerator" use-inline v-bind="gridGeneratorProps" />
+          </slot>
+        </div>
+
+        <q-separator v-if="hasBottomSeparator" class="q-mt-md" />
+      </q-expansion-item>
+    </component>
+
+    <div v-if="hasError" class="q-pt-sm qas-expansion-item__error-message text-caption text-negative">
+      {{ props.errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import QasBox from '../box/QasBox.vue'
+
+import { computed, provide, inject, onMounted, ref, useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasExpansionItem',
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  badges: {
+    type: Array,
+    default: () => []
+  },
+
+  disable: {
+    type: Boolean
+  },
+
+  disableButton: {
+    type: Boolean
+  },
+
+  error: {
+    type: Boolean
+  },
+
+  errorMessage: {
+    type: String,
+    default: ''
+  },
+
+  gridGeneratorProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  group: {
+    type: String,
+    default: undefined
+  },
+
+  label: {
+    type: String,
+    default: ''
+  },
+
+  maxContentHeight: {
+    type: String,
+    default: ''
+  },
+
+  useHeaderSeparator: {
+    type: Boolean,
+    default: undefined
+  }
+})
+
+const modelValue = defineModel({ type: Boolean })
+
+const attrs = useAttrs()
+
+provide('isExpansionItem', true)
+
+// slots
+const slots = defineSlots()
+
+// refs
+const expansionItem = ref(null)
+const hasNextSibling = ref(false)
+const showContent = ref(false)
+
+onMounted(setHasNextSibling)
+
+// constants
+const isNestedExpansionItem = inject('isExpansionItem', false)
+const isNestedBox = inject('isBox', false)
+
+const component = {
+  is: isNestedExpansionItem ? 'div' : QasBox
+}
+
+// computed
+const hasBadges = computed(() => !!props.badges.length)
+const hasError = computed(() => props.error || !!props.errorMessage)
+const hasGridGenerator = computed(() => !!Object.keys(props.gridGeneratorProps).length)
+const hasBottomSeparator = computed(() => isNestedExpansionItem && hasNextSibling.value)
+const hasHeaderBottom = computed(() => !!slots['header-bottom'])
+
+/**
+ * Verifica se o componente deve adicionar um separador no header.
+ *
+ * - Se a propriedade useHeaderSeparator for true, retorna separador.
+ * - Se a propriedade useHeaderSeparator for undefined, retorna separador apenas se não for um componente aninhado.
+ * - Se a propriedade useHeaderSeparator for false, não retorna separador.
+ */
+const hasHeaderSeparator = computed(() => {
+  return typeof props.useHeaderSeparator === 'undefined' ? !isNestedExpansionItem : props.useHeaderSeparator
+})
+
+const classes = computed(() => {
+  return {
+    'qas-expansion-item--error': hasError.value,
+    'qas-expansion-item--disabled': props.disable || props.disableButton,
+    'qas-expansion-item--disabled-full': props.disable
+  }
+})
+
+const contentClasses = computed(() => {
+  return {
+    'q-mt-sm': isNestedExpansionItem,
+    'q-mt-md': !isNestedExpansionItem && !props.useHeaderSeparator,
+    'qas-expansion-item__content overflow-auto': !!props.maxContentHeight
+  }
+})
+
+const expansionProps = computed(() => {
+  const {
+    'onUpdate:modelValue': onUpdateModelValue,
+    onShow,
+    onBeforeShow,
+    onBeforeHide,
+    onAfterShow,
+    onAfterHide,
+    ...propsPayload
+  } = attrs
+
+  return {
+    parent: propsPayload,
+
+    item: {
+      disable: isDisabled.value,
+      hideExpandIcon: true,
+      label: props.label,
+      group: props.group,
+
+      // events
+      onUpdateModelValue,
+      onShow,
+      onBeforeShow,
+      onBeforeHide,
+      onAfterShow,
+      onAfterHide
+    }
+  }
+})
+
+const boxProps = computed(() => {
+  /**
+   * Caso o QasExpansionItem estiver dentro de um QasBox e não for um QasExpansionItem
+   * dentro de outro QasExpansionItem, o componente terá uma borda.
+  */
+  const isBoxed = isNestedBox && !isNestedExpansionItem
+
+  if (!isBoxed) return {}
+
+  return {
+    unelevated: isBoxed,
+    outlined: isBoxed
+  }
+})
+
+const isDisabled = computed(() => props.disable || props.disableButton)
+
+// functions
+
+/**
+ * Caso o componente esteja dentro de um QasExpansionItem, verifica se existe um próximo irmão
+ * para adicionar um separador.
+ */
+function setHasNextSibling () {
+  if (!isNestedExpansionItem) return
+
+  const hasTextContentSibling = !!expansionItem.value.nextSibling?.textContent?.trim?.()
+  const hasElementSibling = !!expansionItem.value.nextElementSibling
+
+  hasNextSibling.value = hasElementSibling || hasTextContentSibling
+}
+
+function setShowContent () {
+  showContent.value = true
+}
+</script>
+
+<style lang="scss">
+.qas-expansion-item {
+  $root: &;
+
+  &--disabled {
+    .q-item.disabled {
+      opacity: 1 !important;
+    }
+  }
+
+  &--disabled-full {
+    #{$root}__label {
+      color: $grey-6 !important;
+    }
+  }
+
+  &--error {
+    #{$root}__box {
+      border: 2px solid $negative !important;
+    }
+
+    #{$root}__error-message {
+      padding-left: 12px; // espaçamento igual ao de erro do quasar.
+    }
+  }
+
+  &__content {
+    max-height: v-bind("props.maxContentHeight");
+  }
+
+  // em alguns casos quando usado com grid, o espaçamento afetava o header, com z-index o problema é resolvido
+  &__header {
+    position: relative;
+    z-index: 1;
+  }
+
+  .q-expansion-item {
+    #{$root}__dropdown {
+      transition: transform var(--qas-generic-transition);;
+    }
+
+    &--expanded {
+      #{$root}__dropdown {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .q-item {
+    margin-top: 0;
+    min-height: auto;
+  }
+
+  .q-item:hover {
+    color: initial !important;
+  }
+}
+</style>