@mekari/pixel3-timeline 0.0.1

package/dist/modules/timeline.props.d.ts

@@ -0,0 +1,67 @@
+import { PropType } from 'vue';
+
+declare const timelineItemProps: {
+    position: {
+        type: PropType<"last" | "first" | "middle">;
+    };
+    status: {
+        type: PropType<"approved" | "canceled" | "need-approval" | "rejected" | "created">;
+        default: string;
+    };
+    icon: {
+        type: PropType<string>;
+    };
+    iconVariant: {
+        type: PropType<"fill" | "outline" | "duotone">;
+    };
+    iconColor: {
+        type: PropType<string>;
+    };
+};
+declare const timelineDocumentProps: {
+    title: {
+        type: PropType<string>;
+    };
+    fileSize: {
+        type: PropType<string>;
+    };
+    icon: {
+        type: PropType<string>;
+    };
+    iconVariant: {
+        type: PropType<"fill" | "outline" | "duotone">;
+        default: string;
+    };
+};
+declare const timelineAccordionProps: {
+    isOpen: {
+        type: PropType<boolean>;
+    };
+    label: {
+        type: PropType<string>;
+        required: boolean;
+    };
+    position: {
+        type: PropType<string>;
+    };
+};
+declare const timelineSeparatorProps: {
+    position: {
+        type: PropType<"last" | "first" | "middle">;
+    };
+    status: {
+        type: PropType<"approved" | "canceled" | "need-approval" | "rejected" | "created">;
+        default: string;
+    };
+    icon: {
+        type: PropType<string>;
+    };
+    iconVariant: {
+        type: PropType<"fill" | "outline" | "duotone">;
+    };
+    iconColor: {
+        type: PropType<string>;
+    };
+};
+
+export { timelineAccordionProps, timelineDocumentProps, timelineItemProps, timelineSeparatorProps };

package/dist/modules/timeline.props.js

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/modules/timeline.props.ts
+var timeline_props_exports = {};
+__export(timeline_props_exports, {
+  timelineAccordionProps: () => timelineAccordionProps,
+  timelineDocumentProps: () => timelineDocumentProps,
+  timelineItemProps: () => timelineItemProps,
+  timelineSeparatorProps: () => timelineSeparatorProps
+});
+module.exports = __toCommonJS(timeline_props_exports);
+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
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  timelineAccordionProps,
+  timelineDocumentProps,
+  timelineItemProps,
+  timelineSeparatorProps
+});

package/dist/modules/timeline.props.mjs

@@ -0,0 +1,13 @@
+import {
+  timelineAccordionProps,
+  timelineDocumentProps,
+  timelineItemProps,
+  timelineSeparatorProps
+} from "../chunk-6JLFY5TN.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  timelineAccordionProps,
+  timelineDocumentProps,
+  timelineItemProps,
+  timelineSeparatorProps
+};

package/dist/separator.d.mts

@@ -0,0 +1,42 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpTimelineSeparator: 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 { MpTimelineSeparator };

package/dist/separator.d.ts

@@ -0,0 +1,42 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpTimelineSeparator: 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 { MpTimelineSeparator };

package/dist/separator.js

@@ -0,0 +1,127 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/separator.tsx
+var separator_exports = {};
+__export(separator_exports, {
+  MpTimelineSeparator: () => MpTimelineSeparator
+});
+module.exports = __toCommonJS(separator_exports);
+var import_vue = require("vue");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_patterns = require("@mekari/pixel3-styled-system/patterns");
+var import_vue2 = require("vue");
+
+// src/modules/timeline.props.ts
+var timelineSeparatorProps = {
+  position: {
+    type: String
+  },
+  status: {
+    type: String,
+    default: "created"
+  },
+  icon: {
+    type: String
+  },
+  iconVariant: {
+    type: String
+  },
+  iconColor: {
+    type: String
+  }
+};
+
+// src/separator.tsx
+var MpTimelineSeparator = (0, import_vue2.defineComponent)({
+  name: "MpTimelineSeparator",
+  props: timelineSeparatorProps,
+  setup(props) {
+    const classes = {
+      wrapper: (0, import_patterns.flex)({
+        flexDirection: "column",
+        alignItems: "center"
+      }),
+      topConnector: (0, import_css.css)({
+        height: "6px",
+        width: "2px",
+        backgroundColor: props.position === "first" ? "transparent" : "gray.100",
+        roundedBottom: "2px"
+      }),
+      bottomConnector: (0, import_css.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_vue.createVNode)("div", {
+        "data-pixel-component": "MpTimelineSeparator",
+        "class": classes.wrapper
+      }, [(0, import_vue.createVNode)("div", {
+        "data-pixel-component": "MpTimelineConnector",
+        "data-connector": "top",
+        "class": classes.topConnector
+      }, null), (0, import_vue.createVNode)(import_pixel3_icon.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_vue.createVNode)("div", {
+        "data-connector": "bottom",
+        "data-pixel-component": "MpTimelineConnector",
+        "class": classes.bottomConnector
+      }, null)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTimelineSeparator
+});

package/dist/separator.mjs

@@ -0,0 +1,8 @@
+import {
+  MpTimelineSeparator
+} from "./chunk-BR4DIYFA.mjs";
+import "./chunk-6JLFY5TN.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTimelineSeparator
+};

package/dist/timeline.d.mts

@@ -0,0 +1,9 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+type AnyObject = {
+    [key: string]: unknown;
+};
+declare const MpTimeline: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+
+export { AnyObject, MpTimeline };

package/dist/timeline.d.ts

@@ -0,0 +1,9 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+type AnyObject = {
+    [key: string]: unknown;
+};
+declare const MpTimeline: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+
+export { AnyObject, MpTimeline };

package/dist/timeline.js

@@ -0,0 +1,68 @@
+"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/timeline.tsx
+var timeline_exports = {};
+__export(timeline_exports, {
+  MpTimeline: () => MpTimeline
+});
+module.exports = __toCommonJS(timeline_exports);
+var import_vue = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_vue2 = require("vue");
+var MpTimeline = (0, import_vue2.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_vue2.cloneVNode)(vnode, {
+          position: getPosition(index)
+        });
+        return node;
+      });
+      return (0, import_vue.createVNode)("ul", {
+        "data-pixel-component": "MpTimeline",
+        "class": (0, import_css.css)({
+          maxWidth: "sm"
+        })
+      }, [cloneTimelineItem]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTimeline
+});

package/dist/timeline.mjs

@@ -0,0 +1,7 @@
+import {
+  MpTimeline
+} from "./chunk-7DG62NMG.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTimeline
+};

package/dist/title.d.mts

@@ -0,0 +1,6 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpTimelineTitle: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+
+export { MpTimelineTitle };

package/dist/title.d.ts

@@ -0,0 +1,6 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpTimelineTitle: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+
+export { MpTimelineTitle };

package/dist/title.js

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/title.tsx
+var title_exports = {};
+__export(title_exports, {
+  MpTimelineTitle: () => MpTimelineTitle
+});
+module.exports = __toCommonJS(title_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var MpTimelineTitle = (0, import_vue2.defineComponent)({
+  name: "MpTimelineTitle",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue.createVNode)("div", {
+        "data-pixel-component": "MpTimelineTitle"
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpTimelineTitle
+});

package/dist/title.mjs

@@ -0,0 +1,7 @@
+import {
+  MpTimelineTitle
+} from "./chunk-WXCDLWFJ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpTimelineTitle
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@mekari/pixel3-timeline",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@mekari/pixel3-styled-system": "0.0.1",
+    "@mekari/pixel3-utils": "0.0.2",
+    "@mekari/pixel3-icon": "0.0.2",
+    "@mekari/pixel3-transition": "0.0.1"
+  },
+  "peerDependencies": {
+    "vue": "3.2.47"
+  },
+  "devDependencies": {
+    "vue": "3.2.47"
+  },
+  "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",
+    "build:external": "tsup src/index.tsx --external @acme-org/styled-system",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}