@devix-tecnologia/timeline-vue 1.1.1 → 1.2.0

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

@@ -0,0 +1,28 @@
+import { PropType } from "vue";
+import "material-symbols/outlined.css";
+import { AoClicarEvento } from "../type";
+declare const _default: import("vue").DefineComponent<{
+    aoClicar: {
+        required: false;
+        type: PropType<AoClicarEvento>;
+    };
+    salvarVisivel: {
+        type: BooleanConstructor;
+    };
+}, {
+    classes: import("vue").ComputedRef<{
+        visivel: boolean;
+        invisivel: boolean;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    aoClicar: {
+        required: false;
+        type: PropType<AoClicarEvento>;
+    };
+    salvarVisivel: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    salvarVisivel: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,24 @@
+import { PropType } from "vue";
+import "material-symbols/outlined.css";
+import { Perfil } from "../type";
+import { EventoDetalhado } from "../typeDetalhado";
+declare const _default: import("vue").DefineComponent<{
+    perfilEvento: {
+        required: true;
+        type: PropType<Perfil>;
+    };
+    dadosEvento: {
+        required: true;
+        type: PropType<EventoDetalhado>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    perfilEvento: {
+        required: true;
+        type: PropType<Perfil>;
+    };
+    dadosEvento: {
+        required: true;
+        type: PropType<EventoDetalhado>;
+    };
+}>>, {}>;
+export default _default;

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;
@@ -14,7 +15,7 @@ type TipoEventoTimeline = {
 };
 declare const _default: import("vue").DefineComponent<{
     perfilTimeline: {
-        required: true;
+        required: false;
         type: ObjectConstructor;
     };
     eventosTimeline: {
@@ -26,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollParaItemAtual: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     perfilTimeline: {
-        required: true;
+        required: false;
         type: ObjectConstructor;
     };
     eventosTimeline: {

package/dist/types/components/timeline/type.d.ts

@@ -7,8 +7,8 @@ export type Categoria = {
     nome: string;
     icone: string;
 };
+export type AoClicarEvento = (evento: Evento) => void;
 export type Evento = {
-    id: string;
     data: Date;
     previsto: Date;
     duracao: number | null;
@@ -20,7 +20,7 @@ export type Evento = {
     categoria: Categoria;
     status: "atrasado" | "adiantado" | "adiado" | "realizado" | "planejado" | "cancelado";
     criticidade: "baixa" | "media" | "alta";
-    aoCLicar?: VoidFunction;
+    aoClicar?: AoClicarEvento;
     atual: boolean;
     scroll: boolean;
 };

package/dist/types/components/timeline/typeDetalhado.d.ts

@@ -0,0 +1,15 @@
+import { Evento } from "./type";
+export type Autor = {
+    nome: string;
+};
+export type Observacao = {
+    mensagem: string;
+    autor: Autor;
+    criadaEm: Date;
+};
+export type AoAlterarEvento = (eventoDetalhado: EventoDetalhado) => void;
+export type AoAdicionarObservacao = (eventoDetalhado: EventoDetalhado, observacao: Observacao) => void;
+export type AoFechar = () => void;
+export type EventoDetalhado = Evento & {
+    observacoes: Observacao[];
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@devix-tecnologia/timeline-vue",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.2.0",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@fontsource/material-icons": "^4.5.4",
+    "date-fns": "^2.30.0",
+    "material-symbols": "^0.5.5",
     "vue": "^3.0.0"
   },
   "devDependencies": {
@@ -36,7 +38,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>

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

@@ -1,60 +0,0 @@
-import '@fontsource/material-icons';
-import IconeCategoria from './IconeCategoria.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/IconeCategoria',
-  component: IconeCategoria,
-  argTypes: {
-    // categoria: { control: { type: String } },
-    tipo: {
-      control: { type: 'select' },
-      options: ['padrao', 'importante', 'alerta', 'sucesso'],
-    },
-  },
-} as Meta<typeof IconeCategoria>;
-
-const categoriaMock = 'call';
-
-const Template: StoryFn<typeof IconeCategoria> = (args) => ({
-  components: { IconeCategoria },
-  setup() {
-    return { args };
-  },
-  template: '<IconeCategoria v-bind="args"  />',
-});
-
-export const Escuro = Template.bind({});
-Escuro.args = {
-  iconeCategoria: categoriaMock,
-  escuro: true,
-  tipo: 'padrao',
-};
-
-export const Claro = Template.bind({});
-Claro.args = {
-  iconeCategoria: categoriaMock,
-  escuro: false,
-  tipo: 'padrao',
-};
-
-export const Importante = Template.bind({});
-Importante.args = {
-  iconeCategoria: categoriaMock,
-  escuro: true,
-  tipo: 'importante',
-};
-
-export const Alerta = Template.bind({});
-Alerta.args = {
-  iconeCategoria: categoriaMock,
-  escuro: true,
-  tipo: 'alerta',
-};
-
-export const Sucesso = Template.bind({});
-Sucesso.args = {
-  iconeCategoria: categoriaMock,
-  escuro: true,
-  tipo: 'sucesso',
-};

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

@@ -1,110 +0,0 @@
-<template>
-  <div class="areaCategoria">
-    <div
-      class="iconeCategoria"
-      :class="classes"
-      :style="style"
-      :alt="categoria"
-    >
-      <span class="material-symbols-outlined"> {{ iconeCategoria }} </span>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, reactive, computed } from "vue";
-export default defineComponent({
-  name: "categoria",
-  props: {
-    iconeCategoria: {
-      type: String,
-      required: true,
-    },
-    categoria: {
-      type: String,
-    },
-    escuro: {
-      type: Boolean,
-      default: true,
-    },
-    tipo: {
-      type: String,
-    },
-    borderColor: {
-      type: String,
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-  setup(props) {
-    props = reactive(props);
-    return {
-      classes: computed(() => ({
-        "bg-escuro": props.escuro,
-        "bg-claro": !props.escuro,
-        [`borda-${props.tipo || "padrao"}`]: true,
-      })),
-      style: computed(() => ({
-        borderColor: props.borderColor,
-        backgroundColor: props.backgroundColor,
-      })),
-    };
-  },
-});
-</script>
-<style scoped>
-/* icone com categoria */
-
-.areaCategoria {
-  display: table-cell;
-  align-items: center;
-  width: 3rem;
-  padding: 2.8rem 1.4rem;
-}
-
-.bg-escuro,
-.iconeCategoria {
-  background: var(--cor-secundaria);
-  border-radius: 50%;
-  width: 3rem;
-  height: 3rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  color: var(--cor-terciaria);
-  border: 3px solid var(--cor-secundaria);
-}
-
-.iconeCategoria span {
-  font-size: 2rem;
-}
-
-.iconeCategoria.bg-claro,
-.realizado .iconeCategoria,
-.cancelado .iconeCategoria,
-.adiado .iconeCategoria {
-  opacity: 0.3;
-}
-
-.iconeCategoria.borda-alerta,
-.criticidade-media .iconeCategoria {
-  border-color: var(--cor-alerta);
-}
-
-.iconeCategoria.borda-importante,
-.criticidade-alta .iconeCategoria {
-  border-color: var(--cor-importante);
-}
-
-.iconeCategoria.borda-sucesso {
-  border-color: var(--cor-sucesso);
-}
-
-.bg-claro.iconeCategoria.borda-importante,
-.adiado.criticidade-alta .iconeCategoria,
-.cancelado.criticidade-alta .iconeCategoria,
-.realizado.criticidade-alta .iconeCategoria {
-  border-color: var(--cor-importante);
-}
-</style>

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

@@ -1,38 +0,0 @@
-import '@fontsource/material-icons';
-import IconeStatus from './IconeStatus.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Devix/Timeline/Atomos/IconeStatus',
-  component: IconeStatus,
-  argTypes: {
-    // status: { control: { type: String } },
-    status: {
-      control: { type: 'select' },
-      options: ['planejado', 'realizado', 'cancelado', 'adiado', 'atrasado'],
-    },
-  },
-} as Meta<typeof IconeStatus>;
-
-const Template: StoryFn<typeof IconeStatus> = (args) => ({
-  components: { IconeStatus },
-  setup() {
-    return { args };
-  },
-  template: '<IconeStatus v-bind="args"  />',
-});
-
-export const Planejado = Template.bind({});
-Planejado.args = { status: 'planejado' };
-
-export const Realizado = Template.bind({});
-Realizado.args = { status: 'realizado' };
-
-export const Cancelado = Template.bind({});
-Cancelado.args = { status: 'cancelado' };
-
-export const Adiado = Template.bind({});
-Adiado.args = { status: 'adiado' };
-
-export const Atrasado = Template.bind({});
-Atrasado.args = { status: 'atrasado' };