lau-ecom-design-system 1.0.19 → 1.0.21

package/package.json

@@ -1,80 +1,81 @@
-{
-  "name": "lau-ecom-design-system",
-  "private": false,
-  "version": "1.0.19",
-  "sourceType": "module",
-  "sideEffects": false,
-  "main": "dist/lau-ecom-design-system.ssr.js",
-  "module": "dist/lau-ecom-design-system.esm.js",
-  "browser": "dist/lau-ecom-design-system.esm.js",
-  "unpkg": "dist/pe-lau-ecom-design-system.min.js",
-  "files": [
-    "dist/*",
-    "dist/types/",
-    "src/**/*.vue",
-    "src/**/*.otf",
-    "src/**/*.ttf",
-    "src/enums/*.ts"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "rollup --bundleConfigAsCjs --config ./rollup.config.js && npm run start ",
-    "build:ssr": "rollup --config ./rollup.config.js --format cjs",
-    "build:es": "rollup --config ./rollup.config.js --format es",
-    "build:unpkg": "rollup --config ./rollup.config.js --format iife",
-    "start": "npx tailwindcss -i ./src/main.css -o ./dist/style.css",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "vue": "^3.5.12"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.9",
-    "@babel/preset-env": "^7.25.9",
-    "@babel/preset-typescript": "^7.25.9",
-    "@chromatic-com/storybook": "1.9.0",
-    "@eslint/js": "^9.13.0",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-essentials": "8.3.6",
-    "@storybook/addon-interactions": "8.3.6",
-    "@storybook/addon-links": "8.3.6",
-    "@storybook/addon-onboarding": "8.3.6",
-    "@storybook/addon-styling-webpack": "1.0.0",
-    "@storybook/blocks": "8.3.6",
-    "@storybook/test": "8.3.6",
-    "@storybook/vue3": "8.3.6",
-    "@storybook/vue3-vite": "8.3.6",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "autoprefixer": "^10.4.20",
-    "cssnano": "^7.0.6",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.15.1",
-    "globals": "^15.11.0",
-    "husky": "^9.1.6",
-    "lint-staged": "^15.2.10",
-    "minimist": "^1.2.8",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
-    "pretty-quick": "^4.0.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^6.0.0",
-    "storybook": "8.3.6",
-    "tailwindcss": "^3.4.14",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.9",
-    "vue-tsc": "^2.1.6"
-  }
-}
+{
+  "name": "lau-ecom-design-system",
+  "private": false,
+  "version": "1.0.21",
+  "sourceType": "module",
+  "sideEffects": false,
+  "main": "dist/lau-ecom-design-system.ssr.js",
+  "module": "dist/lau-ecom-design-system.esm.js",
+  "browser": "dist/lau-ecom-design-system.esm.js",
+  "unpkg": "dist/pe-lau-ecom-design-system.min.js",
+  "files": [
+    "dist/*",
+    "dist/types/",
+    "src/**/*.vue",
+    "src/**/*.otf",
+    "src/**/*.ttf",
+    "src/enums/*.ts"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup --bundleConfigAsCjs --config ./rollup.config.js && npm run start ",
+    "build:ssr": "rollup --config ./rollup.config.js --format cjs",
+    "build:es": "rollup --config ./rollup.config.js --format es",
+    "build:unpkg": "rollup --config ./rollup.config.js --format iife",
+    "start": "npx tailwindcss -i ./src/main.css -o ./dist/style.css",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky",
+    "watch": "rollup -c -w"
+  },
+  "dependencies": {
+    "vue": "^3.5.12"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.9",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-typescript": "^7.25.9",
+    "@chromatic-com/storybook": "1.9.0",
+    "@eslint/js": "^9.13.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-essentials": "8.3.6",
+    "@storybook/addon-interactions": "8.3.6",
+    "@storybook/addon-links": "8.3.6",
+    "@storybook/addon-onboarding": "8.3.6",
+    "@storybook/addon-styling-webpack": "1.0.0",
+    "@storybook/blocks": "8.3.6",
+    "@storybook/test": "8.3.6",
+    "@storybook/vue3": "8.3.6",
+    "@storybook/vue3-vite": "8.3.6",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.15.1",
+    "globals": "^15.11.0",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "minimist": "^1.2.8",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "pretty-quick": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "storybook": "8.3.6",
+    "tailwindcss": "^3.4.14",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.9",
+    "vue-tsc": "^2.1.6"
+  }
+}

package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue

@@ -1,168 +1,178 @@
-<script lang="ts" setup>
-import { onBeforeMount, ref } from "vue";
-import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
-import LauEcomTextButton from "../LauEcomTextButton/LauEcomTextButton.vue";
-import { getCookie, acceptAllCookies } from "../../utils/Cookies";
-import LauEcomBannerCookiesConfig from "./LauEcomBannerCookiesConfig.vue";
-import { CategoryCookie } from "./types";
-import { COOKIE_CONSENT, CookieItemKey } from "../../utils";
-
-interface Props {
-  isVisible?: boolean;
-  categoryCookies?: CategoryCookie[] | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isVisible: true,
-  categoryCookies: () => {
-    return [
-      {
-        title: "Esenciales",
-        description:
-          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: false,
-        isDisabled: false,
-      },
-      {
-        title: "Preferencias",
-        description:
-          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: false,
-        isDisabled: false,
-      },
-      {
-        id: CookieItemKey.statistics,
-        title: "Estadisticas",
-        description:
-          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: true,
-        isDisabled: false,
-      },
-      {
-        id: CookieItemKey.marketing,
-        title: "Marketing",
-        description:
-          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: true,
-        isDisabled: false,
-      },
-    ];
-  },
-});
-
-const isConfigOpen = ref(false);
-const isBannerVisible = ref(props.isVisible);
-
-const emit = defineEmits([
-  "onConfigCookies",
-  "onAccept",
-  "onAcceptAll",
-  "onReject",
-  "onAcceptSelected",
-  "onAcceptAll",
-  "onClose",
-]);
-
-onBeforeMount(() => {
-  const cookieConsent = getCookie(COOKIE_CONSENT);
-  if (cookieConsent) isBannerVisible.value = false;
-});
-
-const handleConfigCookies = () => {
-  isConfigOpen.value = !isConfigOpen.value;
-  emit("onConfigCookies");
-};
-
-const handleAccept = () => {
-  acceptAllCookies();
-  emit("onAccept");
-  isBannerVisible.value = false;
-};
-
-const handleConfigClose = () => {
-  emit("onClose");
-  isConfigOpen.value = false;
-};
-
-const closeCookiesBanner = () => {
-  isConfigOpen.value = false;
-  isBannerVisible.value = false;
-};
-
-const handleReject = () => {
-  emit("onReject");
-  closeCookiesBanner();
-};
-
-const handleAcceptSelected = () => {
-  emit("onAcceptSelected");
-  closeCookiesBanner();
-};
-
-const handleAcceptAll = () => {
-  emit("onAcceptAll");
-  closeCookiesBanner();
-};
-</script>
-
-<template>
-  <div v-if="isBannerVisible">
-    <div v-if="!isConfigOpen" class="lau-ecom-cookies lau-ecom-cookies--upc">
-      <p class="lau-ecom-text lau-ecom-text--upc core-font-body-reg-04-16px">
-        Este sitio web utiliza cookies gracias a esto podemos personalizar los
-        ingresos a la web en futuras visitas y brindarte una mejor experiencia
-        dentro de nuestro sitio.
-        <a class="core-font-link-02-16px dsEcom-text-link-60">Conoce más</a>
-      </p>
-      <div class="lau-ecom-buttons">
-        <LauEcomTextButton @on-click="handleConfigCookies">
-          Configurar cookies
-        </LauEcomTextButton>
-        <LauEcomButton @on-click="handleAccept"> Aceptar </LauEcomButton>
-      </div>
-    </div>
-    <LauEcomBannerCookiesConfig
-      v-else
-      :category-cookies="categoryCookies"
-      @on-accept-all="handleAcceptAll"
-      @on-reject="handleReject"
-      @on-accept-selected="handleAcceptSelected"
-      @on-close="handleConfigClose"
-    />
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-cookies {
-  @apply dsEcom-w-full
-    dsEcom-py-[32px]
-    dsEcom-px-[64px]
-    dsEcom-flex
-    dsEcom-justify-between
-    dsEcom-items-center
-    dsEcom-gap-20
-    dsEcom-shadow-upc-shadow-prominent
-    mobiles:dsEcom-flex-col
-    mobiles:dsEcom-px-[24px];
-}
-
-.lau-ecom-cookies--upc {
-  @apply dsEcom-text-neutral-20;
-}
-
-.lau-ecom-text {
-  @apply dsEcom-block
-    dsEcom-w-[883px]
-    mobiles:dsEcom-w-full;
-}
-
-.lau-ecom-text--upc {
-  @apply dsEcom-text-neutral-90;
-}
-
-.lau-ecom-buttons {
-  @apply dsEcom-flex
-    dsEcom-gap-8
-    mobiles:dsEcom-self-end;
-}
-</style>
+<script lang="ts" setup>
+import { onBeforeMount, onMounted, ref } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import LauEcomTextButton from "../LauEcomTextButton/LauEcomTextButton.vue";
+import { getCookie, acceptAllCookies } from "../../utils/Cookies";
+import LauEcomBannerCookiesConfig from "./LauEcomBannerCookiesConfig.vue";
+import { CategoryCookie } from "./types";
+import { COOKIE_CONSENT, CookieItemKey } from "../../utils";
+
+interface Props {
+  isVisible?: boolean;
+  categoryCookies?: CategoryCookie[] | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: true,
+  categoryCookies: () => {
+    return [
+      {
+        title: "Esenciales",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+        isDisabled: false,
+        onToggle: (value: boolean) => {
+          console.log("firstSwitch: " + value);
+        },
+      },
+      {
+        title: "Preferencias",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
+        isDisabled: false,
+        onToggle: () => {},
+      },
+      {
+        id: CookieItemKey.statistics,
+        title: "Estadisticas",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: true,
+        isDisabled: false,
+        onToggle: () => {},
+      },
+      {
+        id: CookieItemKey.marketing,
+        title: "Marketing",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: true,
+        isDisabled: false,
+        onToggle: () => {},
+      },
+    ];
+  },
+});
+
+const isConfigOpen = ref(false);
+const isBannerVisible = ref(props.isVisible);
+
+const emit = defineEmits([
+  "onConfigCookies",
+  "onDisplayBanner",
+  "onAccept",
+  "onAcceptAll",
+  "onReject",
+  "onAcceptSelected",
+  "onClose",
+]);
+
+onBeforeMount(() => {
+  const cookieConsent = getCookie(COOKIE_CONSENT);
+  if (cookieConsent) isBannerVisible.value = false;
+});
+
+onMounted(() => {
+  emit("onDisplayBanner");
+});
+
+const handleConfigCookies = () => {
+  isConfigOpen.value = !isConfigOpen.value;
+  emit("onConfigCookies");
+};
+
+const handleAccept = () => {
+  acceptAllCookies();
+  emit("onAccept");
+  isBannerVisible.value = false;
+};
+
+const handleConfigClose = () => {
+  emit("onClose");
+  isConfigOpen.value = false;
+};
+
+const closeCookiesBanner = () => {
+  isConfigOpen.value = false;
+  isBannerVisible.value = false;
+};
+
+const handleReject = () => {
+  emit("onReject");
+  closeCookiesBanner();
+};
+
+const handleAcceptSelected = () => {
+  emit("onAcceptSelected");
+  closeCookiesBanner();
+};
+
+const handleAcceptAll = () => {
+  emit("onAcceptAll");
+  closeCookiesBanner();
+};
+</script>
+
+<template>
+  <div v-if="isBannerVisible">
+    <div v-if="!isConfigOpen" class="lau-ecom-cookies lau-ecom-cookies--upc">
+      <p class="lau-ecom-text lau-ecom-text--upc core-font-body-reg-04-16px">
+        Este sitio web utiliza cookies gracias a esto podemos personalizar los
+        ingresos a la web en futuras visitas y brindarte una mejor experiencia
+        dentro de nuestro sitio.
+        <a class="core-font-link-02-16px dsEcom-text-link-60">Conoce más</a>
+      </p>
+      <div class="lau-ecom-buttons">
+        <LauEcomTextButton @on-click="handleConfigCookies">
+          Configurar cookies
+        </LauEcomTextButton>
+        <LauEcomButton @on-click="handleAccept"> Aceptar </LauEcomButton>
+      </div>
+    </div>
+    <LauEcomBannerCookiesConfig
+      v-else
+      :category-cookies="categoryCookies"
+      @on-accept-all="handleAcceptAll"
+      @on-reject="handleReject"
+      @on-accept-selected="handleAcceptSelected"
+      @on-close="handleConfigClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-cookies {
+  @apply dsEcom-w-full
+    dsEcom-py-[32px]
+    dsEcom-px-[64px]
+    dsEcom-flex
+    dsEcom-justify-between
+    dsEcom-items-center
+    dsEcom-gap-20
+    dsEcom-shadow-upc-shadow-prominent
+    mobiles:dsEcom-flex-col
+    mobiles:dsEcom-px-[24px];
+}
+
+.lau-ecom-cookies--upc {
+  @apply dsEcom-text-neutral-20;
+}
+
+.lau-ecom-text {
+  @apply dsEcom-block
+    dsEcom-w-[883px]
+    mobiles:dsEcom-w-full;
+}
+
+.lau-ecom-text--upc {
+  @apply dsEcom-text-neutral-90;
+}
+
+.lau-ecom-buttons {
+  @apply dsEcom-flex
+    dsEcom-gap-8
+    mobiles:dsEcom-self-end;
+}
+</style>