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

package/src/components/timeline/QasTimeline.vue

@@ -1,140 +1,140 @@
-<template>
-  <q-timeline
-    class="qas-timeline"
-    color="grey-6"
-    layout="comfortable"
-  >
-    <template
-      v-for="(item, index) in props.list"
-      :key="`timeline-${index}-${uid()}`"
-    >
-      <q-timeline-entry
-        side="left"
-        :subtitle="getFormattedValue(item, Masks.Date)"
-      >
-        <slot :item="item">
-          <div class="column justify-center q-gutter-sm q-py-md qas-timeline__content">
-            <slot :item="item" name="hour">
-              <div class="text-body2 text-grey-8">
-                Adicionado às {{ getFormattedValue(item, Masks.Hour) }}
-              </div>
-            </slot>
-
-            <slot :item="item" name="description">
-              <div class="text-body1 text-grey-10">
-                {{ item[descriptionKey] }}
-              </div>
-            </slot>
-          </div>
-        </slot>
-      </q-timeline-entry>
-    </template>
-  </q-timeline>
-</template>
-
-<script setup>
-import { date as dateFn } from '../../helpers/filters'
-import { uid } from 'quasar'
-
-defineOptions({ name: 'QasTimeline' })
-
-const Masks = {
-  Hour: 'HH:mm',
-  Date: 'dd MMM yyyy'
-}
-
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => []
-  },
-
-  dateKey: {
-    type: String,
-    default: 'date'
-  },
-
-  hourKey: {
-    type: String,
-    default: 'date'
-  },
-
-  descriptionKey: {
-    type: String,
-    default: 'description'
-  }
-})
-
-function isInvalidDate (date) {
-  const day = new Date(date).getDay()
-
-  return isNaN(day)
-}
-
-function getFormattedValue (item, mask) {
-  const itemKey = mask === Masks.Hour ? props.hourKey : props.dateKey
-
-  const date = item[itemKey]
-
-  return isInvalidDate(date) ? date : dateFn(date, mask)
-}
-</script>
-
-<style lang="scss">
-.qas-timeline {
-  margin: 0;
-
-  &__content {
-    min-height: 100px;
-  }
-
-  .q-timeline__subtitle {
-    color: $grey-10;
-    opacity: initial;
-    padding-right: 0;
-    position: relative;
-    text-align: center;
-    vertical-align: middle;
-    width: 80px;
-
-    &::before {
-      background-color: currentColor;
-      bottom: 0;
-      content: "";
-      display: block;
-      opacity: 0.4;
-      position: absolute;
-      right: -30px;
-      top: 0px;
-      transition: opacity var(--qas-generic-transition) ease;
-      width: 3px;
-    }
-  }
-
-  .q-timeline__entry {
-    &:hover,
-    .active {
-      .q-timeline__subtitle {
-        &::before {
-          background-color: $primary;
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .q-timeline__content {
-    padding-bottom: 0;
-    vertical-align: middle;
-  }
-
-  .q-timeline__title {
-    margin-bottom: 0;
-  }
-
-  .q-timeline__dot::before,
-  .q-timeline__dot::after {
-    display: none;
-  }
-}
-</style>
+<template>
+  <q-timeline
+    class="qas-timeline"
+    color="grey-6"
+    layout="comfortable"
+  >
+    <template
+      v-for="(item, index) in props.list"
+      :key="`timeline-${index}-${uid()}`"
+    >
+      <q-timeline-entry
+        side="left"
+        :subtitle="getFormattedValue(item, Masks.Date)"
+      >
+        <slot :item="item">
+          <div class="column justify-center q-gutter-sm q-py-md qas-timeline__content">
+            <slot :item="item" name="hour">
+              <div class="text-body2 text-grey-8">
+                Adicionado às {{ getFormattedValue(item, Masks.Hour) }}
+              </div>
+            </slot>
+
+            <slot :item="item" name="description">
+              <div class="text-body1 text-grey-10">
+                {{ item[descriptionKey] }}
+              </div>
+            </slot>
+          </div>
+        </slot>
+      </q-timeline-entry>
+    </template>
+  </q-timeline>
+</template>
+
+<script setup>
+import { date as dateFn } from '../../helpers/filters'
+import { uid } from 'quasar'
+
+defineOptions({ name: 'QasTimeline' })
+
+const Masks = {
+  Hour: 'HH:mm',
+  Date: 'dd MMM yyyy'
+}
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+
+  dateKey: {
+    type: String,
+    default: 'date'
+  },
+
+  hourKey: {
+    type: String,
+    default: 'date'
+  },
+
+  descriptionKey: {
+    type: String,
+    default: 'description'
+  }
+})
+
+function isInvalidDate (date) {
+  const day = new Date(date).getDay()
+
+  return isNaN(day)
+}
+
+function getFormattedValue (item, mask) {
+  const itemKey = mask === Masks.Hour ? props.hourKey : props.dateKey
+
+  const date = item[itemKey]
+
+  return isInvalidDate(date) ? date : dateFn(date, mask)
+}
+</script>
+
+<style lang="scss">
+.qas-timeline {
+  margin: 0;
+
+  &__content {
+    min-height: 100px;
+  }
+
+  .q-timeline__subtitle {
+    color: $grey-10;
+    opacity: initial;
+    padding-right: 0;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 80px;
+
+    &::before {
+      background-color: currentColor;
+      bottom: 0;
+      content: "";
+      display: block;
+      opacity: 0.4;
+      position: absolute;
+      right: -30px;
+      top: 0px;
+      transition: opacity var(--qas-generic-transition) ease;
+      width: 3px;
+    }
+  }
+
+  .q-timeline__entry {
+    &:hover,
+    .active {
+      .q-timeline__subtitle {
+        &::before {
+          background-color: $primary;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .q-timeline__content {
+    padding-bottom: 0;
+    vertical-align: middle;
+  }
+
+  .q-timeline__title {
+    margin-bottom: 0;
+  }
+
+  .q-timeline__dot::before,
+  .q-timeline__dot::after {
+    display: none;
+  }
+}
+</style>

package/src/components/timeline/QasTimeline.yml

@@ -1,36 +1,36 @@
-type: component
-
-meta:
-  desc: Componente para timeline que implementa o "QTimeline".
-
-props:
-  list:
-    desc: Lista de itens com datas e descrições que serão exibidios na timeline.
-    default: []
-    type: Array
-    examples: ["[{ date: '2023-01-11T14:58:40.000000Z', description: 'Descrição' }"]
-
-  dateKey:
-    desc: Chave do campo que será exibido à esquerda da timeline.
-    default: date
-    type: String
-
-  hourKey:
-    desc: Chave do campo que será exibido acima da descrição.
-    default: date
-    type: String
-
-  descriptionKey:
-    desc: Chave do campo que será exibido na descrição.
-    default: description
-    type: String
-
-slots:
-  default:
-    desc: slot para substituir o conteúdo todo da timeline.
-
-  hour:
-    desc: slot para substituir o conteúdo acima da descrição.
-
-  description:
-    desc: slot para substituir o conteúdo da descrição.
+type: component
+
+meta:
+  desc: Componente para timeline que implementa o "QTimeline".
+
+props:
+  list:
+    desc: Lista de itens com datas e descrições que serão exibidios na timeline.
+    default: []
+    type: Array
+    examples: ["[{ date: '2023-01-11T14:58:40.000000Z', description: 'Descrição' }"]
+
+  dateKey:
+    desc: Chave do campo que será exibido à esquerda da timeline.
+    default: date
+    type: String
+
+  hourKey:
+    desc: Chave do campo que será exibido acima da descrição.
+    default: date
+    type: String
+
+  descriptionKey:
+    desc: Chave do campo que será exibido na descrição.
+    default: description
+    type: String
+
+slots:
+  default:
+    desc: slot para substituir o conteúdo todo da timeline.
+
+  hour:
+    desc: slot para substituir o conteúdo acima da descrição.
+
+  description:
+    desc: slot para substituir o conteúdo da descrição.

package/src/components/toggle/QasToggle.vue

@@ -1,14 +1,14 @@
-<template>
-  <q-toggle v-bind="attrs" dense />
-</template>
-
-<script setup>
-import { useAttrs } from 'vue'
-
-defineOptions({
-  name: 'QasToggle',
-  inheritAttrs: false
-})
-
-const attrs = useAttrs()
-</script>
+<template>
+  <q-toggle v-bind="attrs" dense />
+</template>
+
+<script setup>
+import { useAttrs } from 'vue'
+
+defineOptions({
+  name: 'QasToggle',
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+</script>

package/src/components/toggle/QasToggle.yml

@@ -1,5 +1,5 @@
-type: component
-
-meta:
-  desc: Componente wrapper do QToggle.
-
+type: component
+
+meta:
+  desc: Componente wrapper do QToggle.
+

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

@@ -1,79 +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.prevent.stop="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>
+<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.prevent.stop="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

@@ -1,30 +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.
+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.