@devix-tecnologia/timeline-vue 1.1.1 → 1.1.2

package/dist/timeline-vue.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as d, reactive as C, computed as y, openBlock as a, createElementBlock as i, createElementVNode as T, normalizeClass as q, normalizeStyle as z, toDisplayString as v, resolveComponent as p, createVNode as g, ref as j, createBlock as b, createCommentVNode as E, Fragment as B, renderList as H } from "vue";
+import { defineComponent as d, reactive as C, computed as y, openBlock as a, createElementBlock as i, createElementVNode as T, normalizeClass as q, normalizeStyle as z, toDisplayString as v, resolveComponent as _, createVNode as f, ref as j, createBlock as b, createCommentVNode as E, Fragment as B, renderList as H } from "vue";
 const M = d({
   name: "categoria",
   props: {
@@ -37,7 +37,7 @@ const M = d({
     };
   }
 });
-const _ = (e, t) => {
+const p = (e, t) => {
   const r = e.__vccOpts || e;
   for (const [s, l] of t)
     r[s] = l;
@@ -54,7 +54,7 @@ function R(e, t, r, s, l, u) {
     ], 14, N)
   ]);
 }
-const F = /* @__PURE__ */ _(M, [["render", R], ["__scopeId", "data-v-01127706"]]), w = d({
+const F = /* @__PURE__ */ p(M, [["render", R], ["__scopeId", "data-v-01127706"]]), w = d({
   name: "status",
   props: {
     status: {
@@ -76,7 +76,7 @@ function V(e, t, r, s, l, u) {
     class: q([e.classes, "iconeStatus"])
   }, null, 2);
 }
-const J = /* @__PURE__ */ _(w, [["render", V], ["__scopeId", "data-v-22a8820e"]]), Y = d({
+const J = /* @__PURE__ */ p(w, [["render", V], ["__scopeId", "data-v-22a8820e"]]), Y = d({
   props: {
     subtitulo: {
       required: !0,
@@ -92,7 +92,7 @@ const G = { class: "subtitulo" };
 function K(e, t, r, s, l, u) {
   return a(), i("h4", G, v(e.subtitulo), 1);
 }
-const Q = /* @__PURE__ */ _(Y, [["render", K], ["__scopeId", "data-v-f5319628"]]), U = d({
+const Q = /* @__PURE__ */ p(Y, [["render", K], ["__scopeId", "data-v-f5319628"]]), U = d({
   props: {
     titulo: {
       required: !0,
@@ -108,7 +108,7 @@ const W = { class: "titulo" };
 function X(e, t, r, s, l, u) {
   return a(), i("h3", W, v(e.titulo), 1);
 }
-const Z = /* @__PURE__ */ _(U, [["render", X], ["__scopeId", "data-v-fce23b0e"]]), x = d({
+const Z = /* @__PURE__ */ p(U, [["render", X], ["__scopeId", "data-v-fce23b0e"]]), x = d({
   props: {
     titulo: {
       required: !0,
@@ -133,15 +133,15 @@ const ee = {
   style: { "padding-top": "3.3rem" }
 };
 function oe(e, t, r, s, l, u) {
-  const c = p("TituloEvento"), S = p("SubtituloEvento");
+  const c = _("TituloEvento"), S = _("SubtituloEvento");
   return e.subtitulo ? (a(), i("div", ee, [
-    g(c, { titulo: e.titulo }, null, 8, ["titulo"]),
-    g(S, { subtitulo: e.subtitulo }, null, 8, ["subtitulo"])
+    f(c, { titulo: e.titulo }, null, 8, ["titulo"]),
+    f(S, { subtitulo: e.subtitulo }, null, 8, ["subtitulo"])
   ])) : (a(), i("div", te, [
-    g(c, { titulo: e.titulo }, null, 8, ["titulo"])
+    f(c, { titulo: e.titulo }, null, 8, ["titulo"])
   ]));
 }
-const ae = /* @__PURE__ */ _(x, [["render", oe], ["__scopeId", "data-v-bb6e1ced"]]), re = d({
+const ae = /* @__PURE__ */ p(x, [["render", oe], ["__scopeId", "data-v-bb6e1ced"]]), re = d({
   name: "hora",
   props: {
     hora: {
@@ -167,7 +167,7 @@ function ne(e, t, r, s, l, u) {
     class: q(["hora", e.classes])
   }, v(e.hora.getHours()) + ":" + v(e.hora.getMinutes().toString().padStart(2, "0")), 3);
 }
-const se = /* @__PURE__ */ _(re, [["render", ne], ["__scopeId", "data-v-071a9ea4"]]), ie = d({
+const se = /* @__PURE__ */ p(re, [["render", ne], ["__scopeId", "data-v-071a9ea4"]]), ie = d({
   props: {
     horaPrevista: {
       type: Date,
@@ -188,7 +188,7 @@ const se = /* @__PURE__ */ _(re, [["render", ne], ["__scopeId", "data-v-071a9ea4
 });
 const le = { class: "areaHora" }, ce = { class: "horaEvento" };
 function ue(e, t, r, s, l, u) {
-  const c = p("Hora");
+  const c = _("Hora");
   return a(), i("div", le, [
     T("div", ce, [
       e.horaRealizada ? (a(), b(c, {
@@ -210,7 +210,7 @@ function ue(e, t, r, s, l, u) {
     ])
   ]);
 }
-const de = /* @__PURE__ */ _(ie, [["render", ue], ["__scopeId", "data-v-04f44efd"]]), _e = d({
+const de = /* @__PURE__ */ p(ie, [["render", ue], ["__scopeId", "data-v-04f44efd"]]), pe = d({
   name: "destaque",
   props: {
     destaque: {
@@ -222,11 +222,11 @@ const de = /* @__PURE__ */ _(ie, [["render", ue], ["__scopeId", "data-v-04f44efd
     return {};
   }
 });
-const pe = { class: "destaqueEvento texto-pequeno" };
+const _e = { class: "destaqueEvento texto-pequeno" };
 function me(e, t, r, s, l, u) {
-  return a(), i("div", pe, v(e.destaque), 1);
+  return a(), i("div", _e, v(e.destaque), 1);
 }
-const ve = /* @__PURE__ */ _(_e, [["render", me], ["__scopeId", "data-v-b0b0beb7"]]), fe = d({
+const ve = /* @__PURE__ */ p(pe, [["render", me], ["__scopeId", "data-v-b0b0beb7"]]), ge = d({
   props: {
     status: {
       required: !0,
@@ -288,30 +288,30 @@ const ve = /* @__PURE__ */ _(_e, [["render", me], ["__scopeId", "data-v-b0b0beb7
     };
   }
 });
-const ge = ["onclick"];
+const fe = ["onclick"];
 function ye(e, t, r, s, l, u) {
-  const c = p("IconeStatus"), S = p("HoraEvento"), P = p("IconeCategoria"), o = p("DescricaoEvento"), n = p("Destaque");
+  const c = _("IconeStatus"), S = _("HoraEvento"), P = _("IconeCategoria"), o = _("DescricaoEvento"), n = _("Destaque");
   return a(), i("article", {
     class: q(["eventoTimeline", [e.status, "criticidade-" + e.criticidade, e.eventoSelecionado, e.clicavel]]),
     onclick: e.aoCLicar
   }, [
-    g(c, { status: e.status }, null, 8, ["status"]),
-    g(S, {
+    f(c, { status: e.status }, null, 8, ["status"]),
+    f(S, {
       horaPrevista: e.previsto,
       horaRealizada: e.realizado
     }, null, 8, ["horaPrevista", "horaRealizada"]),
-    g(P, {
+    f(P, {
       iconeCategoria: e.categoria.icone,
       categoria: e.categoria.nome
     }, null, 8, ["iconeCategoria", "categoria"]),
-    g(o, {
+    f(o, {
       titulo: e.titulo,
       subtitulo: e.subtitulo
     }, null, 8, ["titulo", "subtitulo"]),
-    g(n, { destaque: e.destaque }, null, 8, ["destaque"])
-  ], 10, ge);
+    f(n, { destaque: e.destaque }, null, 8, ["destaque"])
+  ], 10, fe);
 }
-const $e = /* @__PURE__ */ _(fe, [["render", ye], ["__scopeId", "data-v-1d1f6a39"]]), he = d({
+const $e = /* @__PURE__ */ p(ge, [["render", ye]]), he = d({
   name: "BoxData",
   props: {
     dataNumero: {
@@ -336,7 +336,7 @@ function be(e, t, r, s, l, u) {
     class: q(["boxData padrao", e.classes])
   }, v(e.dataNumero), 3);
 }
-const Se = /* @__PURE__ */ _(he, [["render", be], ["__scopeId", "data-v-5e2b8273"]]), Te = d({
+const Se = /* @__PURE__ */ p(he, [["render", be], ["__scopeId", "data-v-5e2b8273"]]), Te = d({
   name: "SeparadorPeriodo",
   props: {
     dataSeparador: {
@@ -355,10 +355,10 @@ const Se = /* @__PURE__ */ _(he, [["render", be], ["__scopeId", "data-v-5e2b8273
 });
 const qe = { class: "separadorPeriodo" }, Pe = { class: "areaData" };
 function Ee(e, t, r, s, l, u) {
-  const c = p("BoxData");
+  const c = _("BoxData");
   return a(), i("div", qe, [
     T("div", Pe, [
-      g(c, {
+      f(c, {
         dataNumero: e.dataSeparador.getDate(),
         aparencia: e.aparencia
       }, null, 8, ["dataNumero", "aparencia"])
@@ -368,7 +368,7 @@ function Ee(e, t, r, s, l, u) {
     }, v(e.mesCorrente(e.dataSeparador.getMonth())) + " de " + v(e.dataSeparador.getFullYear()), 3)
   ]);
 }
-const Ce = /* @__PURE__ */ _(Te, [["render", Ee], ["__scopeId", "data-v-de9ead2d"]]), ke = d({
+const Ce = /* @__PURE__ */ p(Te, [["render", Ee]]), ke = d({
   props: {
     imagem: {
       type: String
@@ -393,7 +393,7 @@ function Ae(e, t, r, s, l, u) {
     }, null, 8, Ie)) : e.icone ? (a(), i("span", ze, v(e.icone), 1)) : E("", !0)
   ]);
 }
-const je = /* @__PURE__ */ _(ke, [["render", Ae], ["__scopeId", "data-v-a913d26b"]]), Be = d({
+const je = /* @__PURE__ */ p(ke, [["render", Ae], ["__scopeId", "data-v-a913d26b"]]), Be = d({
   components: { AvatarTimeline: je },
   props: {
     imagemPerfil: {
@@ -420,10 +420,9 @@ const je = /* @__PURE__ */ _(ke, [["render", Ae], ["__scopeId", "data-v-a913d26b
 });
 const He = { class: "nome" };
 function Me(e, t, r, s, l, u) {
-  const c = p("AvatarTimeline");
+  const c = _("AvatarTimeline");
   return a(), i("section", {
-    class: "perfilTimeline fixed",
-    ref: "elementoFixo",
+    class: "perfilTimeline",
     style: z(e.style)
   }, [
     e.imagemPerfil ? (a(), b(c, {
@@ -436,7 +435,8 @@ function Me(e, t, r, s, l, u) {
     T("h2", He, v(e.nomePerfil), 1)
   ], 4);
 }
-const Oe = /* @__PURE__ */ _(Be, [["render", Me], ["__scopeId", "data-v-9f148523"]]), Ne = d({
+const Oe = /* @__PURE__ */ p(Be, [["render", Me]]);
+const Ne = d({
   props: {
     perfilTimeline: {
       required: !0,
@@ -467,21 +467,21 @@ const Oe = /* @__PURE__ */ _(Be, [["render", Me], ["__scopeId", "data-v-9f148523
     const l = () => {
       setInterval(s, 6e4);
     }, u = (o, n) => {
-      const m = o.getDay() === n.getDay(), $ = o.getMonth() === n.getMonth(), f = o.getFullYear() === n.getFullYear();
-      return m && $ && f;
+      const m = o.getDay() === n.getDay(), $ = o.getMonth() === n.getMonth(), g = o.getFullYear() === n.getFullYear();
+      return m && $ && g;
     }, c = (o) => {
       if (o) {
         const n = Date.now();
         let m = null, $ = [];
-        for (const f of o) {
-          const h = f.data.getTime();
-          if (f.status === "planejado" || f.status === "atrasado") {
-            const k = Math.abs(n - f.data.getTime());
+        for (const g of o) {
+          const h = g.data.getTime();
+          if (g.status === "planejado" || g.status === "atrasado") {
+            const k = Math.abs(n - g.data.getTime());
             if (m === null || k < m && h <= n)
               m = k, $.length = 0;
             else if (k > m)
               continue;
-            $.push(f);
+            $.push(g);
           }
         }
         return $;
@@ -493,12 +493,12 @@ const Oe = /* @__PURE__ */ _(Be, [["render", Me], ["__scopeId", "data-v-9f148523
         (n, m) => n.data.getTime() - m.data.getTime()
       );
       if (o) {
-        let n = [], m = null, $ = 0, f;
+        let n = [], m = null, $ = 0, g;
         for (const h of o) {
           const k = /* @__PURE__ */ new Date(), D = h.data;
-          f = h.status;
+          g = h.status;
           const A = h.tolerancia * 60 * 1e3;
-          f === "planejado" && D.getTime() + A < k.getTime() && (h.status = "atrasado"), (!m || !u(m, D)) && (m = D, n.push({
+          g === "planejado" && D.getTime() + A < k.getTime() && (h.status = "atrasado"), (!m || !u(m, D)) && (m = D, n.push({
             tipo: "dia",
             valor: h.data,
             key: ++$
@@ -529,7 +529,7 @@ const Oe = /* @__PURE__ */ _(Be, [["render", Me], ["__scopeId", "data-v-9f148523
 });
 const Le = { class: "areaTimeline" };
 function Re(e, t, r, s, l, u) {
-  const c = p("PerfilTimeline"), S = p("SeparadorPeriodo"), P = p("EventoTimeline");
+  const c = _("PerfilTimeline"), S = _("SeparadorPeriodo"), P = _("EventoTimeline");
   return a(), i("div", Le, [
     e.perfilTimeline !== null ? (a(), b(c, {
       key: 0,
@@ -564,7 +564,7 @@ function Re(e, t, r, s, l, u) {
     ], 2)
   ]);
 }
-const Fe = /* @__PURE__ */ _(Ne, [["render", Re], ["__scopeId", "data-v-4245f5f5"]]), we = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Fe = /* @__PURE__ */ p(Ne, [["render", Re]]), we = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
 }, Symbol.toStringTag, { value: "Module" })), I = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,

package/dist/types/components/timeline/organismos/Timeline.vue.d.ts

@@ -1,4 +1,5 @@
 import { Evento } from "../type";
+import "material-symbols/outlined.css";
 type TipoEventoTimeline = {
     tipo: "dia";
     valor: Date;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@devix-tecnologia/timeline-vue",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@fontsource/material-icons": "^4.5.4",
+    "material-symbols": "^0.5.5",
     "vue": "^3.0.0"
   },
   "devDependencies": {
@@ -36,7 +37,6 @@
     "vue-tsc": "^1.2.0"
   },
   "files": [
-    "src",
     "dist"
   ],
   "types": "./dist/types/index.d.ts",

package/src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/timeline/atomos/AvatarTimeline.stories.ts

@@ -1,32 +0,0 @@
-import AvatarTimeline from './AvatarTimeline.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/AvatarTimeline',
-  component: AvatarTimeline,
-  parameters: {
-    componentSubtitle: 'Imagem ou ícones do Materials Symbols do Google',
-  },
-  argTypes: {},
-} as Meta<typeof AvatarTimeline>;
-
-const Template: StoryFn<typeof AvatarTimeline> = (args) => ({
-  components: { AvatarTimeline },
-  setup() {
-    return { args };
-  },
-  template: '<AvatarTimeline v-bind="args"  />',
-});
-
-const avatar =
-  'https://images.unsplash.com/photo-1526080652727-5b77f74eacd2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1752&q=80';
-
-export const Imagem = Template.bind({});
-Imagem.args = {
-  imagem: avatar,
-};
-
-export const Icone = Template.bind({});
-Icone.args = {
-  icone: 'person',
-};

package/src/components/timeline/atomos/AvatarTimeline.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="avatar">
-    <img v-if="imagem" :src="imagem" />
-    <span v-else-if="icone" class="material-symbols-outlined">
-      {{ icone }}
-    </span>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  props: {
-    imagem: {
-      type: String,
-    },
-    icone: {
-      type: String,
-    },
-  },
-  setup() {
-    return {};
-  },
-});
-</script>
-<style scoped>
-.avatar {
-  background: var(--cor-secundaria);
-  color: var(--cor-apoio);
-  width: 6rem;
-  height: 6rem;
-  border-radius: 50%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1 / 1;
-}
-
-.avatar img {
-  aspect-ratio: 1 / 1;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  border-radius: 50%;
-}
-
-.avatar span {
-  font-size: 3rem;
-}
-</style>

package/src/components/timeline/atomos/BoxData.stories.ts

@@ -1,41 +0,0 @@
-import '@fontsource/material-icons';
-import BoxData from './BoxData.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/BoxData',
-  component: BoxData,
-  argTypes: {
-    // dataBox: { control: { type: String } },
-    aparencia: {
-      control: { type: 'select' },
-      options: ['padrao', 'escuro', 'claro'],
-    },
-  },
-} as Meta<typeof BoxData>;
-
-const Template: StoryFn<typeof BoxData> = (args) => ({
-  components: { BoxData },
-  setup() {
-    return { args };
-  },
-  template: '<BoxData v-bind="args"  />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = {
-  dataNumero: '01',
-  aparencia: 'padrao',
-};
-
-export const Escuro = Template.bind({});
-Escuro.args = {
-  dataNumero: '01',
-  aparencia: 'escuro',
-};
-
-export const Claro = Template.bind({});
-Claro.args = {
-  dataNumero: '01',
-  aparencia: 'claro',
-};

package/src/components/timeline/atomos/BoxData.vue

@@ -1,57 +0,0 @@
-<template>
-  <h3 class="boxData padrao" :class="classes">{{ dataNumero }}</h3>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, computed } from 'vue';
-
-export default defineComponent({
-  name: 'BoxData',
-  props: {
-    dataNumero: {
-      required: true,
-      type: Number,
-    },
-    aparencia: {
-      type: String,
-    },
-  },
-  components: {},
-  setup(props) {
-    props = reactive(props);
-    return {
-      classes: computed(() => ({
-        [`${props.aparencia || 'padrao'}`]: true,
-      })),
-    };
-  },
-});
-</script>
-
-<style scoped>
-.boxData {
-  line-height: 3.5rem;
-  border-radius: 0.5rem;
-  background: var(--cor-primaria);
-  color: var(--cor-secundaria);
-  margin: 0;
-  width: 3.5rem;
-  height: 3.5rem;
-  text-align: center;
-}
-
-.padrao {
-  background: var(--cor-primaria);
-  color: var(--cor-secundaria);
-}
-
-.escuro {
-  background: var(--cor-secundaria);
-  color: var(--cor-primaria);
-}
-
-.claro {
-  background: var(--cor-terciaria);
-  color: var(--cor-secundaria);
-  box-shadow: 0px 0px 10px 0px #0000001c;
-}
-</style>

package/src/components/timeline/atomos/Destaque.stories.ts

@@ -1,24 +0,0 @@
-import '@fontsource/material-icons';
-import Destaque from './Destaque.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/Destaque',
-  component: Destaque,
-  argTypes: {
-    // subtitulo: { control: { type: String } },
-  },
-} as Meta<typeof Destaque>;
-
-const DestaqueoMock = 'Texto alinhado a direita';
-
-const Template: StoryFn<typeof Destaque> = (args) => ({
-  components: { Destaque },
-  setup() {
-    return { args };
-  },
-  template: '<Destaque v-bind="args"  />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = { destaque: DestaqueoMock };

package/src/components/timeline/atomos/Destaque.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="destaqueEvento texto-pequeno">{{ destaque }}</div>
-</template>
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "destaque",
-  props: {
-    destaque: {
-      type: String,
-    },
-  },
-  components: {},
-  setup() {
-    return {};
-  },
-});
-</script>
-<style scoped>
-.realizado .destaqueEvento,
-.cancelado .destaqueEvento,
-.adiado .destaqueEvento {
-  opacity: 0.4;
-}
-.destaqueEvento {
-  display: table-cell;
-  text-align: right;
-  width: 15%;
-  line-height: 1em;
-  color: var(--cor-texto);
-  padding: 2.4rem 1.4rem;
-  vertical-align: middle;
-}
-
-.bg-selecionado .destaqueEvento {
-  color: var(--cor-texto-selecao);
-}
-</style>

package/src/components/timeline/atomos/Hora.stories.ts

@@ -1,36 +0,0 @@
-import Hora from './Hora.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/Hora',
-  component: Hora,
-  argTypes: {
-    // hora: { control: { type: String } },
-    aparencia: {
-      control: { type: 'select' },
-      options: ['padrao', 'riscada'],
-    },
-  },
-} as Meta<typeof Hora>;
-
-const horaMock = '2023-12-10T09:00Z';
-
-const Template: StoryFn<typeof Hora> = (args) => ({
-  components: { Hora },
-  setup() {
-    return { args };
-  },
-  template: '<Hora v-bind="args"  />',
-});
-
-export const Padrao = Template.bind({});
-Padrao.args = {
-  hora: horaMock,
-  aparencia: 'padrao',
-};
-
-export const Riscada = Template.bind({});
-Riscada.args = {
-  hora: horaMock,
-  aparencia: 'riscada',
-};

package/src/components/timeline/atomos/Hora.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="hora" :class="classes">
-    {{ hora.getHours() }}:{{ hora.getMinutes().toString().padStart(2, "0") }}
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, computed, ref } from "vue";
-
-export default defineComponent({
-  name: "hora",
-  props: {
-    hora: {
-      required: true,
-      type: Date,
-    },
-    aparencia: {
-      type: String,
-    },
-  },
-  components: {},
-  setup(props) {
-    const propsAparecia = ref(props.aparencia);
-
-    return {
-      classes: computed(() => ({
-        [`hora-${propsAparecia || ""}`]: true,
-      })),
-    };
-  },
-});
-</script>
-<style scoped>
-.hora {
-  color: var(--cor-texto);
-}
-
-.bg-selecionado .hora {
-  color: var(--cor-texto-selecao);
-}
-.hora-padrao,
-.horaRealizada {
-  font-weight: 500;
-  font-size: 1.4rem;
-}
-.hora-riscada,
-.horaPlanejada {
-  text-decoration: line-through;
-  font-size: 1rem;
-}
-</style>