@mekari/pixel3-tour 0.0.1-dev.0

package/dist/tour.js

@@ -0,0 +1,295 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tour.tsx
+var tour_exports = {};
+__export(tour_exports, {
+  tour: () => tour
+});
+module.exports = __toCommonJS(tour_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_core = require("@popperjs/core");
+
+// src/modules/tour.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var tourProps = {
+  id: {
+    type: String
+  },
+  steps: {
+    type: Array
+  },
+  stepIndex: {
+    type: Number
+  },
+  isDisableScroll: {
+    type: Boolean,
+    default: false
+  },
+  isManual: {
+    type: Boolean,
+    default: false
+  },
+  isDebug: {
+    type: Boolean,
+    default: false
+  }
+};
+var tourEmits = (0, import_pixel3_utils.declareEmit)(["next", "prev", "close"]);
+
+// src/modules/tour.hooks.ts
+var import_vue = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/tour.connects.ts
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+function tourConnect(state, classes) {
+  const {
+    id,
+    steps,
+    stepIndex,
+    isDisableScroll,
+    isManual,
+    isDebug
+  } = state;
+  const idx = id != null ? id : `mp-tour-${(0, import_pixel3_utils2.useId)()}`;
+  return {
+    id,
+    steps,
+    stepIndex,
+    isDisableScroll,
+    isManual,
+    isDebug,
+    rootProps: {
+      class: classes.root,
+      "data-pixel-component": "MpTour"
+    },
+    overlayProps: {
+      id: `${idx}-overlay`,
+      class: classes.overlay,
+      "data-pixel-component": "MpTourOverlay"
+    },
+    panelProps: {
+      id: `${idx}`,
+      class: classes.panel,
+      "data-pixel-component": "MpTourPanel"
+    }
+  };
+}
+__name(tourConnect, "tourConnect");
+
+// src/modules/tour.hooks.ts
+var useTour = /* @__PURE__ */ __name((props) => {
+  const context = (0, import_vue.ref)(props);
+  const [value] = import_recipes.tourSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.tourSlotRecipe)(value);
+  return (0, import_vue.computed)(() => tourConnect(context.value, classes));
+}, "useTour");
+
+// src/tour.tsx
+var MpTour = (0, import_vue3.defineComponent)({
+  name: "MpTour",
+  props: tourProps,
+  emits: tourEmits,
+  setup(props, {
+    emit
+  }) {
+    const api = useTour(props);
+    const targetElement = (0, import_vue3.ref)();
+    const refElement = (0, import_vue3.ref)();
+    const index = (0, import_vue3.ref)(api.value.stepIndex || 0);
+    const getStepsLength = (0, import_vue3.computed)(() => api.value.steps && api.value.steps.length || 0);
+    const isLastStep = (0, import_vue3.computed)(() => index.value === getStepsLength.value);
+    const updateHighlight = /* @__PURE__ */ __name((action) => {
+      var _a;
+      const target = targetElement.value;
+      const step = (_a = api.value.steps) == null ? void 0 : _a[index.value];
+      if (!target)
+        return;
+      const methods = {
+        add: () => {
+          target.style.zIndex = "9999";
+          target.style.position = "relative";
+          target.style.pointerEvents = "none";
+          if (step == null ? void 0 : step.isScrollIntoElement)
+            scrollToElement(step == null ? void 0 : step.offset);
+          if (step == null ? void 0 : step.isHighlighted) {
+            target.classList.add("tour-pulse");
+            createPulseAnimation(step == null ? void 0 : step.highlightColor);
+          }
+        },
+        remove: () => {
+          target.style.zIndex = "";
+          target.style.position = "";
+          target.style.pointerEvents = "";
+          target.classList.remove("tour-pulse");
+        }
+      };
+      methods[action]();
+    }, "updateHighlight");
+    const scrollToElement = /* @__PURE__ */ __name((offset = 16) => {
+      if (targetElement.value) {
+        const top = targetElement.value.getBoundingClientRect().top + window.pageYOffset - offset;
+        window.scrollTo({
+          top,
+          behavior: "smooth"
+        });
+      }
+    }, "scrollToElement");
+    const createStep = /* @__PURE__ */ __name(() => {
+      var _a;
+      if (isLastStep.value)
+        return;
+      updateHighlight("remove");
+      const step = (_a = api.value.steps) == null ? void 0 : _a[index.value];
+      if (!step)
+        return;
+      if (api.value.isDisableScroll)
+        document.body.style.overflow = "hidden";
+      targetElement.value = step.target ? document.querySelector(step.target) : null;
+      refElement.value = document.querySelector(`#${api.value.id}`);
+      if (api.value.isDebug) {
+        console.log("[MpTour] The target element:", targetElement.value);
+        console.log("[MpTour] The refs element:", refElement.value);
+      }
+      if (targetElement.value && refElement.value) {
+        updateHighlight("add");
+        (0, import_core.createPopper)(targetElement.value, refElement.value, {
+          modifiers: [{
+            name: "preventOverflow",
+            options: {
+              rootBoundary: "window"
+            }
+          }, {
+            name: "offset",
+            options: {
+              offset: [0, 16]
+            }
+          }],
+          placement: "bottom",
+          ...step.options
+        });
+      }
+    }, "createStep");
+    const createPulseAnimation = /* @__PURE__ */ __name((color = "dark") => {
+      const colorMap = {
+        dark: "35, 41, 51",
+        pink: "236, 72, 153",
+        blue: "59, 130, 240"
+      };
+      const isValidColor = /* @__PURE__ */ __name((color2) => {
+        return color2 in colorMap;
+      }, "isValidColor");
+      const [r, g, b] = isValidColor(color) ? colorMap[color].split(", ") : colorMap["dark"].split(", ");
+      const style = document.createElement("style");
+      style.textContent = `
+        .tour-pulse {
+          box-shadow: 0 0 0 0 rgba(${r}, ${g}, ${b}, 1);
+          animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+          0% { box-shadow: 0 0 0 0 rgba(${r}, ${g}, ${b}, 0.9); }
+          70% { box-shadow: 0 0 0 10px rgba(${r}, ${g}, ${b}, 0); }
+          100% { box-shadow: 0 0 0 0 rgba(${r}, ${g}, ${b}, 0); }
+        }
+      `;
+      document.head.appendChild(style);
+    }, "createPulseAnimation");
+    const navigateStep = /* @__PURE__ */ __name((direction) => {
+      if (!api.value.isManual) {
+        if (direction === "next" && index.value < getStepsLength.value)
+          index.value += 1;
+        if (direction === "prev" && index.value > 0)
+          index.value -= 1;
+      }
+      updateHighlight("remove");
+      if (api.value.isDisableScroll)
+        document.body.style.overflow = "";
+      emit(direction, index.value);
+    }, "navigateStep");
+    const close = /* @__PURE__ */ __name(() => {
+      updateHighlight("remove");
+      if (api.value.isDisableScroll)
+        document.body.style.overflow = "";
+      emit("close", index.value);
+    }, "close");
+    (0, import_vue3.watch)(index, createStep);
+    (0, import_vue3.onMounted)(createStep);
+    return () => {
+      var _a, _b, _c;
+      return (0, import_vue2.createVNode)("div", api.value.rootProps, [(0, import_vue2.createVNode)("div", api.value.overlayProps, null), (0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+        "id": api.value.id
+      }, api.value.panelProps, {
+        "style": {
+          position: "absolute",
+          top: !targetElement.value ? "50%" : void 0,
+          left: !targetElement.value ? "50%" : void 0,
+          transform: !targetElement.value ? "translate(-50%, -50%)" : void 0
+        }
+      }), [(_c = (_b = (_a = api.value.steps) == null ? void 0 : _a[index.value]) == null ? void 0 : _b.render) == null ? void 0 : _c.call(_b, () => navigateStep("next"), () => navigateStep("prev"), close)])]);
+    };
+  }
+});
+var PORTAL_ID = "pixel-tour-portal";
+var createPortal = /* @__PURE__ */ __name(() => {
+  if (typeof window === "undefined")
+    return null;
+  let portalElement = document.getElementById(PORTAL_ID);
+  if (!portalElement) {
+    portalElement = document.createElement("div");
+    portalElement.id = PORTAL_ID;
+    portalElement.className = "Tour";
+    document.body.appendChild(portalElement);
+  }
+  return portalElement;
+}, "createPortal");
+var tour = /* @__PURE__ */ __name((isStart = false, steps, options) => {
+  var _a;
+  if (isStart) {
+    const portalElement = createPortal();
+    if (!portalElement)
+      return;
+    return (0, import_vue3.createApp)({
+      render() {
+        return (0, import_vue2.createVNode)(import_vue3.Teleport, {
+          "to": `#${PORTAL_ID}`
+        }, {
+          default: () => [isStart && (0, import_vue2.createVNode)(MpTour, {
+            "id": options == null ? void 0 : options.id,
+            "steps": steps,
+            "stepIndex": options == null ? void 0 : options.stepIndex,
+            "isDisableScroll": options == null ? void 0 : options.isDisableScroll,
+            "isManual": options == null ? void 0 : options.isManual,
+            "isDebug": options == null ? void 0 : options.isDebug,
+            "onNext": options == null ? void 0 : options.next,
+            "onPrev": options == null ? void 0 : options.prev,
+            "onClose": options == null ? void 0 : options.close
+          }, null)]
+        });
+      }
+    }).mount(document.createElement("div"));
+  }
+  (_a = document.getElementById(PORTAL_ID)) == null ? void 0 : _a.remove();
+}, "tour");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tour
+});

package/dist/tour.mjs

@@ -0,0 +1,10 @@
+import {
+  tour
+} from "./chunk-LCGHHNKQ.mjs";
+import "./chunk-TQSSSA7Q.mjs";
+import "./chunk-5MGBFCZE.mjs";
+import "./chunk-7BC44YZN.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  tour
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mekari/pixel3-tour",
+  "description": "Mekari Pixel 3 | Tour component is used to display product tour information",
+  "version": "0.0.1-dev.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@popperjs/core": "^2.11.4",
+    "@mekari/pixel3-styled-system": "0.1.0-dev.0",
+    "@mekari/pixel3-utils": "0.0.6"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.9"
+  },
+  "devDependencies": {
+    "vue": "^3.4.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}