@mekari/pixel3-timeline 0.0.1

package/dist/index.js

@@ -0,0 +1,587 @@
+"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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpTimelinLogItem: () => MpTimelinLogItem,
+  MpTimeline: () => MpTimeline,
+  MpTimelineAccordion: () => MpTimelineAccordion,
+  MpTimelineCaption: () => MpTimelineCaption,
+  MpTimelineContent: () => MpTimelineContent,
+  MpTimelineDocument: () => MpTimelineDocument,
+  MpTimelineItem: () => MpTimelineItem,
+  MpTimelineLog: () => MpTimelineLog,
+  MpTimelineTitle: () => MpTimelineTitle
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/accordion.tsx
+var import_vue3 = require("vue");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var import_css2 = require("@mekari/pixel3-styled-system/css");
+var import_patterns = require("@mekari/pixel3-styled-system/patterns");
+var import_pixel3_transition = require("@mekari/pixel3-transition");
+var import_vue4 = require("vue");
+
+// src/body.tsx
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var MpTimelineBody = (0, import_vue2.defineComponent)({
+  name: "MpTimelineBody",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue.createVNode)("div", {
+        "data-pixel-component": "MpTimelineBody",
+        "class": (0, import_css.css)({
+          marginLeft: "3",
+          paddingTop: "6px",
+          paddingBottom: "3",
+          width: "full"
+        })
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+// src/modules/timeline.props.ts
+var timelineItemProps = {
+  position: {
+    type: String
+  },
+  status: {
+    type: String,
+    default: "created"
+  },
+  icon: {
+    type: String
+  },
+  iconVariant: {
+    type: String
+  },
+  iconColor: {
+    type: String
+  }
+};
+var timelineDocumentProps = {
+  title: {
+    type: String
+  },
+  fileSize: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  iconVariant: {
+    type: String,
+    default: "outline"
+  }
+};
+var timelineAccordionProps = {
+  isOpen: {
+    type: Boolean
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  position: {
+    type: String
+  }
+};
+var timelineSeparatorProps = {
+  position: {
+    type: String
+  },
+  status: {
+    type: String,
+    default: "created"
+  },
+  icon: {
+    type: String
+  },
+  iconVariant: {
+    type: String
+  },
+  iconColor: {
+    type: String
+  }
+};
+
+// src/accordion.tsx
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue3.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpTimelineAccordion = (0, import_vue4.defineComponent)({
+  name: "MpTimelineAccordion",
+  props: timelineAccordionProps,
+  setup(props, {
+    slots
+  }) {
+    const isOpen = (0, import_vue4.ref)(props.isOpen || false);
+    return () => {
+      const children = slots.default && slots.default();
+      const timelineItemVNode = children ? children.filter((n) => n.type.name === "MpTimelineItem") : [];
+      const length = timelineItemVNode.length - 1;
+      const cloneTimelineItem = timelineItemVNode.map((vnode, index) => {
+        const getPosition = /* @__PURE__ */ __name((index2) => {
+          if (props.position === "last") {
+            if (index2 === length)
+              return "last";
+          }
+          return "";
+        }, "getPosition");
+        const node = (0, import_vue4.cloneVNode)(vnode, {
+          position: getPosition(index)
+        });
+        return node;
+      });
+      return (0, import_vue3.createVNode)("li", {
+        "data-pixel-component": "MpTimelineAccordion"
+      }, [(0, import_vue3.createVNode)("div", {
+        "data-pixel-component": "MpTimelineAccordionBody",
+        "class": (0, import_patterns.flex)()
+      }, [(0, import_vue3.createVNode)("div", {
+        "data-pixel-component": "MpTimelineAccordionSeparator",
+        "class": (0, import_patterns.flex)({
+          flexDirection: "column",
+          alignItems: "center"
+        })
+      }, [(0, import_vue3.createVNode)("div", {
+        "data-pixel-component": "MpTimelineAccordionConnector",
+        "class": (0, import_css2.css)({
+          height: "4px",
+          width: "2px",
+          backgroundColor: props.position === "first" ? "transparent" : "gray.100",
+          roundedBottom: "full"
+        })
+      }, null), (0, import_vue3.createVNode)("button", {
+        "role": "button",
+        "aria-expanded": isOpen.value || void 0,
+        "onClick": () => isOpen.value = !isOpen.value
+      }, [(0, import_vue3.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": isOpen.value ? "accordion-expand" : "accordion-collapse",
+        "size": "sm",
+        "color": "gray.600",
+        "class": (0, import_css2.css)({
+          my: 1,
+          cursor: "pointer"
+        })
+      }, null)]), (0, import_vue3.createVNode)("div", {
+        "data-pixel-component": "MpTimelineAccordionConnector",
+        "class": (0, import_css2.css)({
+          flexGrow: 1,
+          width: "2px",
+          backgroundColor: !isOpen.value && props.position === "last" ? "transparent" : "gray.100",
+          roundedTop: "full"
+        })
+      }, null)]), (0, import_vue3.createVNode)(MpTimelineBody, null, {
+        default: () => [(0, import_vue3.createVNode)("div", {
+          "class": (0, import_css2.css)({
+            paddingTop: 1
+          }),
+          "data-pixel-component": "MpTimelineAccordionTitle"
+        }, [(0, import_vue3.createVNode)("p", {
+          "class": (0, import_css2.css)({
+            fontSize: "md",
+            lineHeight: "md",
+            color: "dark",
+            fontWeight: "semibold",
+            letterSpacing: "normal"
+          })
+        }, [(0, import_vue3.createTextVNode)("Label")])])]
+      })]), (0, import_vue3.createVNode)(import_pixel3_transition.MpAnimateHeight, {
+        "isOpen": isOpen.value
+      }, _isSlot(cloneTimelineItem) ? cloneTimelineItem : {
+        default: () => [cloneTimelineItem]
+      })]);
+    };
+  }
+});
+
+// src/caption.tsx
+var import_vue5 = require("vue");
+var import_vue6 = require("vue");
+var import_css3 = require("@mekari/pixel3-styled-system/css");
+var MpTimelineCaption = (0, import_vue6.defineComponent)({
+  name: "MpTimelineItem",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue5.createVNode)("span", {
+        "data-pixel-component": "MpTimelineCaption",
+        "class": (0, import_css3.css)({
+          fontSize: "sm",
+          color: "gray.400",
+          lineHeight: "sm",
+          marginTop: "0.5"
+        })
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+// src/content.tsx
+var import_vue7 = require("vue");
+var import_vue8 = require("vue");
+var import_css4 = require("@mekari/pixel3-styled-system/css");
+var MpTimelineContent = (0, import_vue8.defineComponent)({
+  name: "MpTimelineContent",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue7.createVNode)("div", {
+        "data-pixel-component": "MpTimelineContent",
+        "class": (0, import_css4.css)({
+          paddingTop: 3
+        })
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+// src/document.tsx
+var import_vue9 = require("vue");
+var import_pixel3_icon2 = require("@mekari/pixel3-icon");
+var import_css5 = require("@mekari/pixel3-styled-system/css");
+var import_patterns2 = require("@mekari/pixel3-styled-system/patterns");
+var import_vue10 = require("vue");
+var MpTimelineDocument = (0, import_vue10.defineComponent)({
+  name: "MpTimelineDocument",
+  props: timelineDocumentProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue9.createVNode)("span", {
+        "data-pixel-component": "MpTimelineDocument",
+        "class": (0, import_css5.css)({
+          display: "flex",
+          alignItems: "center",
+          paddingX: "3",
+          paddingY: "2",
+          borderRadius: "lg",
+          borderWidth: "1px",
+          borderColor: "gray.100",
+          width: "full"
+        })
+      }, [(0, import_vue9.createVNode)(import_pixel3_icon2.MpIcon, {
+        "name": props.icon,
+        "variant": props.iconVariant
+      }, null), (0, import_vue9.createVNode)("div", {
+        "class": (0, import_patterns2.flex)({
+          flexDirection: "column",
+          marginLeft: props.icon ? "3" : "0"
+        })
+      }, [(0, import_vue9.createVNode)("p", {
+        "style": {
+          overflow: "hidden",
+          display: "-webkit-box",
+          "-webkit-box-orient": "vertical",
+          "-webkit-line-clamp": 1
+        },
+        "class": (0, import_css5.css)({
+          fontSize: "sm",
+          lineHeight: "md",
+          fontWeight: "regular",
+          letterSpacing: "normal",
+          color: "dark"
+        })
+      }, [props.title]), (0, import_vue9.createVNode)("div", {
+        "class": (0, import_patterns2.flex)({
+          alignItems: "center"
+        })
+      }, [(0, import_vue9.createVNode)("p", {
+        "class": (0, import_css5.css)({
+          fontSize: "sm",
+          lineHeight: "md",
+          fontWeight: "regular",
+          letterSpacing: "normal",
+          color: "gray.400"
+        })
+      }, [props.fileSize, (0, import_vue9.createTextVNode)(" "), slots.default && " - "]), slots.default && slots.default()])])]);
+    };
+  }
+});
+
+// src/item.tsx
+var import_vue13 = require("vue");
+var import_css7 = require("@mekari/pixel3-styled-system/css");
+var import_vue14 = require("vue");
+
+// src/separator.tsx
+var import_vue11 = require("vue");
+var import_pixel3_icon3 = require("@mekari/pixel3-icon");
+var import_css6 = require("@mekari/pixel3-styled-system/css");
+var import_patterns3 = require("@mekari/pixel3-styled-system/patterns");
+var import_vue12 = require("vue");
+var MpTimelineSeparator = (0, import_vue12.defineComponent)({
+  name: "MpTimelineSeparator",
+  props: timelineSeparatorProps,
+  setup(props) {
+    const classes = {
+      wrapper: (0, import_patterns3.flex)({
+        flexDirection: "column",
+        alignItems: "center"
+      }),
+      topConnector: (0, import_css6.css)({
+        height: "6px",
+        width: "2px",
+        backgroundColor: props.position === "first" ? "transparent" : "gray.100",
+        roundedBottom: "2px"
+      }),
+      bottomConnector: (0, import_css6.css)({
+        height: "100%",
+        flexGrow: 1,
+        width: "2px",
+        backgroundColor: props.position === "last" ? "transparent" : "gray.100",
+        roundedTop: "2px"
+      })
+    };
+    const iconAttrs = {
+      approved: {
+        name: "done",
+        color: "green.700",
+        variant: "fill"
+      },
+      canceled: {
+        name: "error",
+        color: "gray.400",
+        variant: "fill"
+      },
+      "need-approval": {
+        name: "time",
+        color: "orange.700",
+        variant: "fill"
+      },
+      rejected: {
+        name: "error",
+        color: "red.700",
+        variant: "fill"
+      },
+      created: {
+        name: "indicator-circle",
+        color: "blue.400",
+        variant: "fill"
+      }
+    };
+    return () => {
+      return (0, import_vue11.createVNode)("div", {
+        "data-pixel-component": "MpTimelineSeparator",
+        "class": classes.wrapper
+      }, [(0, import_vue11.createVNode)("div", {
+        "data-pixel-component": "MpTimelineConnector",
+        "data-connector": "top",
+        "class": classes.topConnector
+      }, null), (0, import_vue11.createVNode)(import_pixel3_icon3.MpIcon, {
+        "name": props.icon || iconAttrs[props.status].name,
+        "color": props.iconColor || iconAttrs[props.status].color,
+        "variant": props.iconVariant || iconAttrs[props.status].variant,
+        "size": "sm"
+      }, null), (0, import_vue11.createVNode)("div", {
+        "data-connector": "bottom",
+        "data-pixel-component": "MpTimelineConnector",
+        "class": classes.bottomConnector
+      }, null)]);
+    };
+  }
+});
+
+// src/item.tsx
+var MpTimelineItem = (0, import_vue14.defineComponent)({
+  name: "MpTimelineItem",
+  props: timelineItemProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue13.createVNode)("li", {
+        "data-pixel-component": "MpTimelineItem",
+        "data-position": props.position,
+        "class": (0, import_css7.css)({
+          display: "flex"
+        })
+      }, [(0, import_vue13.createVNode)(MpTimelineSeparator, {
+        "position": props.position,
+        "status": props.status,
+        "icon": props.icon,
+        "iconVariant": props.iconVariant,
+        "iconColor": props.iconColor
+      }, null), (0, import_vue13.createVNode)(MpTimelineBody, null, {
+        default: () => [slots.default && slots.default()]
+      })]);
+    };
+  }
+});
+
+// src/log.tsx
+var import_vue15 = require("vue");
+var import_pixel3_icon4 = require("@mekari/pixel3-icon");
+var import_css8 = require("@mekari/pixel3-styled-system/css");
+var import_patterns4 = require("@mekari/pixel3-styled-system/patterns");
+var import_pixel3_transition2 = require("@mekari/pixel3-transition");
+var import_vue16 = require("vue");
+var MpTimelineLog = (0, import_vue16.defineComponent)({
+  name: "MpTimelineLog",
+  setup(_props, {
+    slots
+  }) {
+    const isOpen = (0, import_vue16.ref)(false);
+    return () => {
+      return (0, import_vue15.createVNode)("div", {
+        "class": (0, import_css8.css)({
+          display: "flex",
+          flexDirection: "column"
+        })
+      }, [(0, import_vue15.createVNode)("button", {
+        "data-pixel-component": "MpTimelineLog",
+        "aria-expanded": isOpen.value || void 0,
+        "class": ["group", (0, import_patterns4.flex)({
+          cursor: "pointer"
+        })],
+        "onClick": () => isOpen.value = !isOpen.value
+      }, [(0, import_vue15.createVNode)("p", {
+        "class": (0, import_css8.css)({
+          color: "gray.400",
+          _groupHover: {
+            color: "blue.500"
+          }
+        })
+      }, [(0, import_vue15.createTextVNode)("Change log")]), (0, import_vue15.createVNode)(import_pixel3_icon4.MpIcon, {
+        "name": "caret-down",
+        "class": (0, import_css8.css)({
+          color: "gray.400",
+          _groupHover: {
+            color: "blue.500"
+          }
+        }),
+        "style": {
+          transition: "transform 0.2s",
+          transformOrigin: "center",
+          transform: isOpen.value ? "rotate(-180deg)" : ""
+        }
+      }, null)]), (0, import_vue15.createVNode)(import_pixel3_transition2.MpAnimateHeight, {
+        "isOpen": isOpen.value,
+        "as": "ul",
+        "class": (0, import_css8.css)({
+          listStyleType: "disc",
+          paddingLeft: 5
+        })
+      }, {
+        default: () => [slots.default && slots.default()]
+      })]);
+    };
+  }
+});
+
+// src/log-item.tsx
+var import_vue17 = require("vue");
+var import_css9 = require("@mekari/pixel3-styled-system/css");
+var import_vue18 = require("vue");
+var MpTimelinLogItem = (0, import_vue18.defineComponent)({
+  name: "MpTimelinLogItem",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue17.createVNode)("li", {
+        "data-pixel-component": "MpTimelinLogItem",
+        "class": (0, import_css9.css)({
+          color: "gray.600"
+        })
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+// src/timeline.tsx
+var import_vue19 = require("vue");
+var import_css10 = require("@mekari/pixel3-styled-system/css");
+var import_vue20 = require("vue");
+var MpTimeline = (0, import_vue20.defineComponent)({
+  name: "MpTimeline",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      const children = slots.default && slots.default();
+      const timelineItemVNode = children ? children.filter((n) => {
+        const name = n.type.name;
+        const acceptedNode = ["MpTimelineItem", "MpTimelineAccordion"];
+        return acceptedNode.includes(name);
+      }) : [];
+      const length = timelineItemVNode.length - 1;
+      const cloneTimelineItem = timelineItemVNode.map((vnode, index) => {
+        const getPosition = /* @__PURE__ */ __name((index2) => {
+          if (index2 === length)
+            return "last";
+          if (index2 === 0)
+            return "first";
+          return "middle";
+        }, "getPosition");
+        const node = (0, import_vue20.cloneVNode)(vnode, {
+          position: getPosition(index)
+        });
+        return node;
+      });
+      return (0, import_vue19.createVNode)("ul", {
+        "data-pixel-component": "MpTimeline",
+        "class": (0, import_css10.css)({
+          maxWidth: "sm"
+        })
+      }, [cloneTimelineItem]);
+    };
+  }
+});
+
+// src/title.tsx
+var import_vue21 = require("vue");
+var import_vue22 = require("vue");
+var MpTimelineTitle = (0, import_vue22.defineComponent)({
+  name: "MpTimelineTitle",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue21.createVNode)("div", {
+        "data-pixel-component": "MpTimelineTitle"
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTimelinLogItem,
+  MpTimeline,
+  MpTimelineAccordion,
+  MpTimelineCaption,
+  MpTimelineContent,
+  MpTimelineDocument,
+  MpTimelineItem,
+  MpTimelineLog,
+  MpTimelineTitle
+});

package/dist/index.mjs

@@ -0,0 +1,42 @@
+import {
+  MpTimelineLog
+} from "./chunk-34WPFRDZ.mjs";
+import {
+  MpTimeline
+} from "./chunk-7DG62NMG.mjs";
+import {
+  MpTimelineTitle
+} from "./chunk-WXCDLWFJ.mjs";
+import {
+  MpTimelineAccordion
+} from "./chunk-U2PMOVHB.mjs";
+import {
+  MpTimelineCaption
+} from "./chunk-ZG4NN7A5.mjs";
+import {
+  MpTimelineContent
+} from "./chunk-HSNDCO4E.mjs";
+import {
+  MpTimelineDocument
+} from "./chunk-IM7DTIFU.mjs";
+import {
+  MpTimelineItem
+} from "./chunk-TT37T2C6.mjs";
+import "./chunk-BR4DIYFA.mjs";
+import "./chunk-F5W3GZXM.mjs";
+import "./chunk-6JLFY5TN.mjs";
+import {
+  MpTimelinLogItem
+} from "./chunk-GIZF7OP5.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTimelinLogItem,
+  MpTimeline,
+  MpTimelineAccordion,
+  MpTimelineCaption,
+  MpTimelineContent,
+  MpTimelineDocument,
+  MpTimelineItem,
+  MpTimelineLog,
+  MpTimelineTitle
+};

package/dist/item.d.mts

@@ -0,0 +1,42 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpTimelineItem: vue.DefineComponent<{
+    position: {
+        type: vue.PropType<"first" | "last" | "middle">;
+    };
+    status: {
+        type: vue.PropType<"approved" | "canceled" | "need-approval" | "rejected" | "created">;
+        default: string;
+    };
+    icon: {
+        type: vue.PropType<string>;
+    };
+    iconVariant: {
+        type: vue.PropType<"fill" | "outline" | "duotone">;
+    };
+    iconColor: {
+        type: vue.PropType<string>;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    position: {
+        type: vue.PropType<"first" | "last" | "middle">;
+    };
+    status: {
+        type: vue.PropType<"approved" | "canceled" | "need-approval" | "rejected" | "created">;
+        default: string;
+    };
+    icon: {
+        type: vue.PropType<string>;
+    };
+    iconVariant: {
+        type: vue.PropType<"fill" | "outline" | "duotone">;
+    };
+    iconColor: {
+        type: vue.PropType<string>;
+    };
+}>>, {
+    status: "approved" | "canceled" | "need-approval" | "rejected" | "created";
+}>;
+
+export { MpTimelineItem };