@devix-tecnologia/timeline-vue 1.0.1

package/dist/types/components/timeline/atomos/IconeCategoria.vue.d.ts

@@ -0,0 +1,57 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    iconeCategoria: {
+        type: StringConstructor;
+        required: true;
+    };
+    categoria: {
+        type: StringConstructor;
+    };
+    escuro: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tipo: {
+        type: StringConstructor;
+    };
+    borderColor: {
+        type: StringConstructor;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+    };
+}, {
+    classes: import("vue").ComputedRef<{
+        [x: string]: boolean;
+        'bg-escuro': boolean;
+        'bg-claro': boolean;
+    }>;
+    style: import("vue").ComputedRef<{
+        borderColor: string | undefined;
+        backgroundColor: string | undefined;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    iconeCategoria: {
+        type: StringConstructor;
+        required: true;
+    };
+    categoria: {
+        type: StringConstructor;
+    };
+    escuro: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tipo: {
+        type: StringConstructor;
+    };
+    borderColor: {
+        type: StringConstructor;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+    };
+}>>, {
+    escuro: boolean;
+}>;
+export default _default;

package/dist/types/components/timeline/atomos/IconeStatus.vue.d.ts

@@ -0,0 +1,17 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    status: {
+        required: true;
+        type: StringConstructor;
+    };
+}, {
+    classes: import("vue").ComputedRef<{
+        [x: string]: boolean;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    status: {
+        required: true;
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/atomos/SubtituloEvento.vue.d.ts

@@ -0,0 +1,13 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    subtitulo: {
+        required: true;
+        type: StringConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    subtitulo: {
+        required: true;
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/atomos/TituloEvento.vue.d.ts

@@ -0,0 +1,13 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    titulo: {
+        required: true;
+        type: StringConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    titulo: {
+        required: true;
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,3 @@
+import Timeline from "./organismos/Timeline.vue";
+import * as Tipos from "./type";
+export { Timeline, Tipos };

package/dist/types/components/timeline/moleculas/DescricaoEvento.vue.d.ts

@@ -0,0 +1,21 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    titulo: {
+        required: true;
+        type: StringConstructor;
+    };
+    subtitulo: {
+        required: true;
+        type: StringConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    titulo: {
+        required: true;
+        type: StringConstructor;
+    };
+    subtitulo: {
+        required: true;
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/moleculas/EventoTimeline.vue.d.ts

@@ -0,0 +1,18 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    dadosEvento: {
+        required: true;
+        type: ObjectConstructor;
+    };
+}, {
+    eventoSelecionado: import("vue").ComputedRef<{
+        atual: boolean;
+        padrao: boolean;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dadosEvento: {
+        required: true;
+        type: ObjectConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/moleculas/HoraEvento.vue.d.ts

@@ -0,0 +1,19 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    horaPrevista: {
+        type: DateConstructor;
+        required: true;
+    };
+    horaRealizada: {
+        type: DateConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    horaPrevista: {
+        type: DateConstructor;
+        required: true;
+    };
+    horaRealizada: {
+        type: DateConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/moleculas/PerfilTimeline.vue.d.ts

@@ -0,0 +1,39 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    imagemPerfil: {
+        type: StringConstructor;
+    };
+    nomePerfil: {
+        type: StringConstructor;
+    };
+    iconePerfil: {
+        type: StringConstructor;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    style: import("vue").ComputedRef<{
+        backgroundColor: string;
+    }>;
+    elementoFixo: import("vue").Ref<HTMLElement | null>;
+    isFixed: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    imagemPerfil: {
+        type: StringConstructor;
+    };
+    nomePerfil: {
+        type: StringConstructor;
+    };
+    iconePerfil: {
+        type: StringConstructor;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    backgroundColor: string;
+}>;
+export default _default;

package/dist/types/components/timeline/moleculas/SeparadorPeriodo.vue.d.ts

@@ -0,0 +1,24 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{
+    dataSeparador: {
+        required: true;
+        type: StringConstructor;
+    };
+    aparencia: {
+        type: StringConstructor;
+    };
+}, {
+    dataRecebida: string;
+    ano: number;
+    mes: string;
+    dia: number;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dataSeparador: {
+        required: true;
+        type: StringConstructor;
+    };
+    aparencia: {
+        type: StringConstructor;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/components/timeline/moleculas/Topo.vue.d.ts

@@ -0,0 +1,3 @@
+/** __vue_virtual_code_placeholder */
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

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

@@ -0,0 +1,3 @@
+import { Evento, Perfil } from "../type";
+export declare const dadosPerfil: Perfil;
+export declare const dadosEventos: Evento[];

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

@@ -0,0 +1,40 @@
+/** __vue_virtual_code_placeholder */
+import { Evento } from "../type";
+type TipoEventoTimeline = {
+    tipo: "dia";
+    valor: Date;
+    key: number;
+} | {
+    tipo: "evento";
+    valor: Evento;
+    key: number;
+    atual: boolean;
+} | {
+    tipo: "eventos";
+    valor: Evento[];
+    key: number;
+};
+declare const _default: import("vue").DefineComponent<{
+    perfilTimeline: {
+        required: true;
+        type: ObjectConstructor;
+    };
+    eventosTimeline: {
+        required: true;
+        type: ObjectConstructor;
+    };
+}, {
+    eventosPorTipo: import("vue").ComputedRef<TipoEventoTimeline[]>;
+}, unknown, {}, {
+    scrollParaItemAtual(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    perfilTimeline: {
+        required: true;
+        type: ObjectConstructor;
+    };
+    eventosTimeline: {
+        required: true;
+        type: ObjectConstructor;
+    };
+}>>, {}>;
+export default _default;

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

@@ -0,0 +1,23 @@
+export type Perfil = {
+    nome: string;
+    imagem: string | null;
+    icone: string | null;
+};
+export type Evento = {
+    id: string;
+    data: Date;
+    previsto: Date;
+    duracao: number | null;
+    realizado: Date | null;
+    tolerancia: number | null;
+    titulo: string;
+    subtitulo: string;
+    destaque: string;
+    categoria: {
+        nome: string;
+        icone: string;
+    };
+    status: "atrasado" | "adiantado" | "adiado" | "realizado" | "planejado" | "cancelado";
+    criticidade: string;
+    acao: boolean;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+import { Plugin } from "vue";
+import "./global.css";
+declare const Timeline: Plugin;
+export default Timeline;
+export * from "./components/timeline";

package/dist/vite.svg

@@ -0,0 +1 @@
+<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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@devix-tecnologia/timeline-vue",
+  "private": false,
+  "version": "1.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "semantic-release": "semantic-release"
+  },
+  "dependencies": {
+    "@fontsource/material-icons": "^4.5.4",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.7",
+    "@semantic-release/npm": "^9.0.1",
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/addon-styling": "^1.0.1",
+    "@storybook/blocks": "^7.0.7",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/vue3": "^7.0.7",
+    "@storybook/vue3-vite": "^7.0.7",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "semantic-release": "^19.0.5",
+    "storybook": "^7.0.7",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.0",
+    "vue-tsc": "^1.2.0"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "types": "./dist/types/index.d.ts",
+  "module": "./dist/timeline-vue.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/timeline-vue.es.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/assets/vue.svg

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,57 @@
+<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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,39 @@
+<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: 1.4rem;
+  vertical-align: middle;
+}
+
+.bg-selecionado .destaqueEvento {
+  color: var(--cor-texto-selecao);
+}
+</style>

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

@@ -0,0 +1,36 @@
+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',
+};