am-ui-package 0.0.16 → 0.2.0

package/README.md

@@ -1,5 +1,5 @@
-# Vue 3 + Vite
-
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/package.json

@@ -1,39 +1,39 @@
-{
-  "name": "am-ui-package",
-  "private": false,
-  "version": "0.0.16",
-  "type": "module",
-  "main": "./dist/am-ui-package.umd.js",
-  "module": "./dist/am-ui-package.es.js",
-  "style": "dist/style.css",
-  "exports": {
-    ".": {
-      "import": "./dist/am-ui-package.es.js",
-      "require": "./dist/am-ui-package.umd.js"
-    },
-    "./src": "./src/index.js"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "vue": "^3.5.0"
-  },
-  "devDependencies": {
-    "vue": "^3.5.18",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "^7.1.2",
-    "tailwindcss": "^3.1.0",
-    "postcss": "^8.4.14",
-    "autoprefixer": "^10.4.7",
-    "@tailwindcss/forms": "^0.5.2",
-    "@tailwindcss/typography": "^0.5.2"
-  }
-}
+{
+  "name": "am-ui-package",
+  "private": false,
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./dist/am-ui-package.umd.js",
+  "module": "./dist/am-ui-package.es.js",
+  "style": "dist/style.css",
+  "exports": {
+    ".": {
+      "import": "./dist/am-ui-package.es.js",
+      "require": "./dist/am-ui-package.umd.js"
+    },
+    "./src": "./src/index.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.18",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.1.2",
+    "tailwindcss": "^3.1.0",
+    "postcss": "^8.4.14",
+    "autoprefixer": "^10.4.7",
+    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/typography": "^0.5.2"
+  }
+}

package/src/App.vue

@@ -1,157 +1,157 @@
-<script setup>
-import { ref, watch } from "vue";
-import ActionBar from "./components/Bars/ActionBar.vue";
-import Button from "./components/Buttons/AmButton.vue";
-import EmptyStateIllustration from "./components/EmptyStateIllustration.vue";
-import BaseInput from "./components/Inputs/BaseInput.vue";
-import PasswordInput from "./components/Inputs/PasswordInput.vue";
-import AlertModal from "./components/Modals/AlertModal.vue";
-import BaseModal from "./components/Modals/BaseModal.vue";
-import NotificationBar from "./components/Notifications/NotificationBar.vue";
-import TicketStatusTicket from "./components/Tickets/TicketStatusTicket.vue";
-import ToolWrapper from "./components/Wrappers/ToolWrapper.vue";
-import AmButton from "./components/Buttons/AmButton.vue";
-const isOpenModal = ref(false);
-
-const flight = ref("");
-
-watch(flight, (newValue) => {
-  console.log(newValue);
-});
-
-const flightDate = ref("");
-
-watch(flightDate, (newValue) => {
-  console.log(newValue);
-});
-</script>
-
-<template>
-  <ToolWrapper
-    tool="Estatus de vuelo"
-    description="Aquí podrás visualizar el estatus de tus vuelos"
-  >
-    <form
-      @submit.prevent
-      class="md:mt-[66px] md:flex items-center justify-between gap-[50px]"
-    >
-      <BaseInput
-        label="N° de vuelo"
-        placeholder="N° de vuelo"
-        type="number"
-        v-model="flight"
-        class="mt-[3px] md:mt-0"
-        error=""
-      />
-      <BaseInput
-        label="Fecha de vuelo"
-        placeholder="N° de vuelo"
-        type="date"
-        v-model="flightDate"
-        class="mt-5 md:mt-0"
-        :check-icon="false"
-        error="Proporciona un número de vuelo"
-      />
-      <AmButton size="lg" class="mt-5 md:mt-0 self-end" :disabled="true"
-        >Consultar</AmButton
-      >
-    </form>
-
-    <NotificationBar variant="error" class="mt-5 md:mt-10">
-      <template #description>
-        <p class="text-xs">
-          <span class="text-amRed font-GarnettSemibold">
-            Información inválida
-          </span>
-          No coincide con algún vuelo operado por Aeromexico o vuelo en código
-          compartido
-        </p>
-      </template>
-    </NotificationBar>
-
-    <FlightStatusTicket class="mt-5 md:mt-10" />
-
-    <EmptyStateIllustration
-      description="No hay vuelos registrados."
-      class="mt-5 md:mt-10"
-    />
-
-    <AlertModal
-      :isOpen="isOpenModal"
-      title="Correo"
-      description="jgonazalez@aeromexico.com"
-      @confirm="isOpenModal = false"
-      button-text="Enviar"
-    />
-
-    <template #action-bar>
-      <ActionBar
-        description="Enviar información a correo electrónico"
-        button-text="Enviar"
-        @action="isOpenModal = true"
-        :disabled="true"
-      />
-    </template>
-  </ToolWrapper>
-  <!-- <div class="flex flex-col gap-5 p-5 font-GarnettRegular text-amBluePremium">
-    <form>
-      <Button :disabled="true">Hola</Button>
-      <Button :disabled="false">Hola</Button>
-      <Button :disabled="false" variant="secondary">Hola</Button>
-      <Button :disabled="true" variant="secondary">Hola</Button>
-      <BaseInput type="email" label="Email" placeholder="Email" />
-      <BaseInput type="date" label="Fecha de vuelo" :check-icon="false" />
-      <PasswordInput />
-    </form>
-
-    <NotificationBar variant="error">
-      <template #description>
-        <p class="text-xs">
-          <span class="text-amRed font-GarnettSemibold">
-            Información inválida
-          </span>
-          No coincide con algún vuelo operado por Aeromexico o vuelo en código
-          compartido
-        </p>
-      </template>
-    </NotificationBar>
-    <NotificationBar
-      variant="info"
-      @close="console.log('probando emit de cierre')"
-    >
-      <template #description>
-        <p class="text-xs">
-          Aviso importante! Los vuelos con salida dentro de las próximas 24hrs
-          pueden ser sujetos a cambios. si requieres confimación de esos casos,
-          por favor contacta a Global Sales Support
-        </p>
-      </template>
-    </NotificationBar>
-
-    <EmptyStateIllustration description="No hay vuelos registrados." />
-    <FlightStatusTicket />
-    <TicketStatusTicket />
-    <ActionBar
-      description="Enviar información a correo electrónico"
-      button-text="Enviar"
-      @button-click="isOpenModal = true"
-    />
-    <AlertModal
-      :isOpen="isOpenModal"
-      title="Correo"
-      description="jgonazalez@aeromexico.com"
-      button-text="Enviar"
-      :on-confirm="() => (isOpenModal = false)"
-    />
-      <AlertModal
-      :isOpen="isOpenModal"
-      icon-name="TrashWarnCircle"
-      title="No se ha podido eliminar el Check-in de la reservación"
-      description="Por favor, contactar al provedor de ventas a través de nuestro chat."
-      button-text="Continuar"
-      :on-confirm="() => (isOpenModal = false)"
-    /> 
-  </div> -->
-</template>
-
-<style scoped></style>
+<script setup>
+import { ref, watch } from "vue";
+import ActionBar from "./components/Bars/ActionBar.vue";
+import Button from "./components/Buttons/AmButton.vue";
+import EmptyStateIllustration from "./components/EmptyStateIllustration.vue";
+import BaseInput from "./components/Inputs/BaseInput.vue";
+import PasswordInput from "./components/Inputs/PasswordInput.vue";
+import AlertModal from "./components/Modals/AlertModal.vue";
+import BaseModal from "./components/Modals/BaseModal.vue";
+import NotificationBar from "./components/Notifications/NotificationBar.vue";
+import TicketStatusTicket from "./components/Tickets/TicketStatusTicket.vue";
+import ToolWrapper from "./components/Wrappers/ToolWrapper.vue";
+import AmButton from "./components/Buttons/AmButton.vue";
+const isOpenModal = ref(false);
+
+const flight = ref("");
+
+watch(flight, (newValue) => {
+  console.log(newValue);
+});
+
+const flightDate = ref("");
+
+watch(flightDate, (newValue) => {
+  console.log(newValue);
+});
+</script>
+
+<template>
+  <ToolWrapper
+    tool="Estatus de vuelo"
+    description="Aquí podrás visualizar el estatus de tus vuelos"
+  >
+    <form
+      @submit.prevent
+      class="md:mt-[66px] md:flex items-center justify-between gap-[50px]"
+    >
+      <BaseInput
+        label="N° de vuelo"
+        placeholder="N° de vuelo"
+        type="number"
+        v-model="flight"
+        class="mt-[3px] md:mt-0"
+        error=""
+      />
+      <BaseInput
+        label="Fecha de vuelo"
+        placeholder="N° de vuelo"
+        type="date"
+        v-model="flightDate"
+        class="mt-5 md:mt-0"
+        :check-icon="false"
+        error="Proporciona un número de vuelo"
+      />
+      <AmButton size="lg" class="mt-5 md:mt-0 self-end" :disabled="true"
+        >Consultar</AmButton
+      >
+    </form>
+
+    <NotificationBar variant="error" class="mt-5 md:mt-10">
+      <template #description>
+        <p class="text-xs">
+          <span class="text-amRed font-GarnettSemibold">
+            Información inválida
+          </span>
+          No coincide con algún vuelo operado por Aeromexico o vuelo en código
+          compartido
+        </p>
+      </template>
+    </NotificationBar>
+
+    <FlightStatusTicket class="mt-5 md:mt-10" />
+
+    <EmptyStateIllustration
+      description="No hay vuelos registrados."
+      class="mt-5 md:mt-10"
+    />
+
+    <AlertModal
+      :isOpen="isOpenModal"
+      title="Correo"
+      description="jgonazalez@aeromexico.com"
+      @confirm="isOpenModal = false"
+      button-text="Enviar"
+    />
+
+    <template #action-bar>
+      <ActionBar
+        description="Enviar información a correo electrónico"
+        button-text="Enviar"
+        @action="isOpenModal = true"
+        :disabled="true"
+      />
+    </template>
+  </ToolWrapper>
+  <!-- <div class="flex flex-col gap-5 p-5 font-GarnettRegular text-amBluePremium">
+    <form>
+      <Button :disabled="true">Hola</Button>
+      <Button :disabled="false">Hola</Button>
+      <Button :disabled="false" variant="secondary">Hola</Button>
+      <Button :disabled="true" variant="secondary">Hola</Button>
+      <BaseInput type="email" label="Email" placeholder="Email" />
+      <BaseInput type="date" label="Fecha de vuelo" :check-icon="false" />
+      <PasswordInput />
+    </form>
+
+    <NotificationBar variant="error">
+      <template #description>
+        <p class="text-xs">
+          <span class="text-amRed font-GarnettSemibold">
+            Información inválida
+          </span>
+          No coincide con algún vuelo operado por Aeromexico o vuelo en código
+          compartido
+        </p>
+      </template>
+    </NotificationBar>
+    <NotificationBar
+      variant="info"
+      @close="console.log('probando emit de cierre')"
+    >
+      <template #description>
+        <p class="text-xs">
+          Aviso importante! Los vuelos con salida dentro de las próximas 24hrs
+          pueden ser sujetos a cambios. si requieres confimación de esos casos,
+          por favor contacta a Global Sales Support
+        </p>
+      </template>
+    </NotificationBar>
+
+    <EmptyStateIllustration description="No hay vuelos registrados." />
+    <FlightStatusTicket />
+    <TicketStatusTicket />
+    <ActionBar
+      description="Enviar información a correo electrónico"
+      button-text="Enviar"
+      @button-click="isOpenModal = true"
+    />
+    <AlertModal
+      :isOpen="isOpenModal"
+      title="Correo"
+      description="jgonazalez@aeromexico.com"
+      button-text="Enviar"
+      :on-confirm="() => (isOpenModal = false)"
+    />
+      <AlertModal
+      :isOpen="isOpenModal"
+      icon-name="TrashWarnCircle"
+      title="No se ha podido eliminar el Check-in de la reservación"
+      description="Por favor, contactar al provedor de ventas a través de nuestro chat."
+      button-text="Continuar"
+      :on-confirm="() => (isOpenModal = false)"
+    /> 
+  </div> -->
+</template>
+
+<style scoped></style>

package/src/assets/css/index.css

@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
+@tailwind base;
+@tailwind components;
 @tailwind utilities;

package/src/components/Bars/ActionBar.vue

@@ -1,38 +1,38 @@
-<script setup>
-import AmButton from "../Buttons/AmButton.vue";
-
-defineProps({
-  description: {
-    type: String,
-  },
-  buttonText: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(["action"]);
-
-const handleClick = async () => {
-  emit("action");
-};
-</script>
-<template>
-  <div
-    class="border-t border-amNewLighterGray flex justify-center"
-    v-bind="$attrs"
-  >
-    <div
-      class="w-full md:max-w-[644px] max-w-[736px] flex flex-col bg-white md:flex-row justify-between items-center py-[10px] gap-5 px-5 md:px-0"
-    >
-      <h5 class="text-amBluePremium text-xs md:text-sm lg:text-base">
-        {{ description }}
-      </h5>
-      <AmButton size="xl" @click="handleClick" :disabled="disabled">
-        {{ buttonText }}
-      </AmButton>
-    </div>
-  </div>
-</template>
+<script setup>
+import AmButton from "../Buttons/AmButton.vue";
+
+defineProps({
+  description: {
+    type: String,
+  },
+  buttonText: {
+    type: String,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["action"]);
+
+const handleClick = async () => {
+  emit("action");
+};
+</script>
+<template>
+  <div
+    class="border-t border-amNewLighterGray flex justify-center"
+    v-bind="$attrs"
+  >
+    <div
+      class="w-full md:max-w-[644px] max-w-[736px] flex flex-col bg-white md:flex-row justify-between items-center py-[10px] gap-5 px-5 md:px-0"
+    >
+      <h5 class="text-amBluePremium text-xs md:text-sm lg:text-base">
+        {{ description }}
+      </h5>
+      <AmButton size="xl" @click="handleClick" :disabled="disabled">
+        {{ buttonText }}
+      </AmButton>
+    </div>
+  </div>
+</template>

package/src/components/Buttons/AmButton.vue

@@ -1,82 +1,82 @@
-<script setup>
-import { computed } from "vue";
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: "button",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  variant: {
-    type: String,
-    default: "primary",
-    validator: (prop) => ["primary", "secondary"].includes(prop),
-  },
-  size: {
-    type: String,
-    default: "md",
-    validator: (prop) => ["sm", "md", "lg", "xl"].includes(prop),
-  },
-  width: {
-    type: String,
-    default: "flexible",
-    validator: (prop) => ["flexible", "compact", "full"].includes(prop),
-  },
-});
-
-// Emit
-const emit = defineEmits(["click"]);
-
-// Clases dinámicas
-const buttonClasses = computed(() => {
-  const base =
-    "rounded text-white font-GarnettSemibold disabled:bg-amNewLightGray";
-  const variants = {
-    primary: "bg-amRoseMexican",
-    secondary: "bg-amBlueInnovation",
-  };
-  const sizes = {
-    sm: "text-[11px] h-[30px] px-[12px]",
-    md: "text-xs h-[40px] px-[12px]",
-    lg: "text-xs h-[40px] md:h-[50px] px-[12px]",
-    xl: "text-sm h-[40px] md:h-[60px] px-[18px]",
-  };
-
-  const widths = {
-    flexible: "w-full md:w-max",
-    compact: "w-max",
-    full: "w-full",
-  };
-
-  return [
-    base,
-    variants[props.variant] || variants.primary,
-    sizes[props.size] || sizes.md,
-    widths[props.width],
-  ];
-});
-
-// Función para manejar click y emitir evento
-const handleClick = (event) => {
-  if (!props.disabled) {
-    emit("click", event);
-    // if ($attrs.onCustomFunction) $attrs.onCustomFunction(event); // ejemplo callback dinámico
-  }
-};
-</script>
-
-<template>
-  <button
-    :type="type"
-    :disabled="disabled"
-    :class="buttonClasses"
-    class=""
-    v-bind="$attrs"
-    @click="handleClick"
-  >
-    <slot />
-  </button>
-</template>
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "button",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String,
+    default: "primary",
+    validator: (prop) => ["primary", "secondary"].includes(prop),
+  },
+  size: {
+    type: String,
+    default: "md",
+    validator: (prop) => ["sm", "md", "lg", "xl"].includes(prop),
+  },
+  width: {
+    type: String,
+    default: "flexible",
+    validator: (prop) => ["flexible", "compact", "full"].includes(prop),
+  },
+});
+
+// Emit
+const emit = defineEmits(["click"]);
+
+// Clases dinámicas
+const buttonClasses = computed(() => {
+  const base =
+    "rounded text-white font-GarnettSemibold disabled:bg-amNewLightGray";
+  const variants = {
+    primary: "bg-amRoseMexican",
+    secondary: "bg-amBlueInnovation",
+  };
+  const sizes = {
+    sm: "text-[11px] h-[30px] px-[12px]",
+    md: "text-xs h-[40px] px-[12px]",
+    lg: "text-xs h-[40px] md:h-[50px] px-[12px]",
+    xl: "text-sm h-[40px] md:h-[60px] px-[18px]",
+  };
+
+  const widths = {
+    flexible: "w-full md:w-max",
+    compact: "w-max",
+    full: "w-full",
+  };
+
+  return [
+    base,
+    variants[props.variant] || variants.primary,
+    sizes[props.size] || sizes.md,
+    widths[props.width],
+  ];
+});
+
+// Función para manejar click y emitir evento
+const handleClick = (event) => {
+  if (!props.disabled) {
+    emit("click", event);
+    // if ($attrs.onCustomFunction) $attrs.onCustomFunction(event); // ejemplo callback dinámico
+  }
+};
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled"
+    :class="buttonClasses"
+    class=""
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>