@pixelium/web-vue 0.0.2-fix → 0.0.3-beta

package/es/message/index.js

@@ -1,348 +1,170 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, ref, onMounted, onBeforeUnmount, shallowRef, computed, watch, createVNode, Transition } from "vue";
-import { p as parseColor, a as generatePalette, r as rgbaColor2string, g as getGlobalThemeColor } from "../share/util/color.js";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
-import { S as SpinnerThirdSolid, T as TimesCircleSolid } from "../auto-complete/index.js";
-import { p } from "../aside/index.js";
-import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
-import { a as canvasPreprocess, c as calcPixelSize } from "../share/util/plot.js";
-const InfoCircleSolid = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-hn",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            { d: "M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zM11 6h2v2h-2zm-1 9h1v-5h-1V9h3v6h1v2h-4z" },
-            null,
-            -1
-            /* CACHED */
-          ),
-          createElementVNode(
-            "path",
-            {
-              fill: "none",
-              d: "M0 0h24v24H0z"
-            },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
+import { B as y, V as spinner_third_solid_default, d as octagon_times_solid_default, f as exclamation_triangle_solid_default, l as times_circle_solid_default, p as info_circle_solid_default, u as check_circle_solid_default } from "../vendor.js";
+import { i as canvasPreprocess, n as calcPixelSize } from "../share/util/plot.js";
+import { a as rgbaColor2string, i as parseColor, n as getGlobalThemeColor, r as getGlobalThemeColorString, t as generatePalette } from "../share/util/color.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { t as useTransitionEnd } from "../share/hook/use-transition-end.js";
+import { Transition, computed, createVNode, defineComponent, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+var message_default = /* @__PURE__ */ defineComponent({
+	__name: "index",
+	props: {
+		content: { default: "" },
+		icon: null,
+		duration: { default: 3e3 },
+		id: null,
+		type: { default: "normal" },
+		color: null,
+		closable: { type: Boolean }
+	},
+	emits: ["close"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const hoverFlag = ref(false);
+		const activeFlag = ref(false);
+		const toggleActive = (status) => {
+			activeFlag.value = status;
+		};
+		const toggleHover = (status) => {
+			hoverFlag.value = status;
+		};
+		const visible = ref(false);
+		let timer = void 0;
+		onMounted(() => {
+			visible.value = true;
+			startTimer();
+		});
+		onBeforeUnmount(() => {
+			clearTimeout(timer);
+		});
+		function startTimer() {
+			timer = setTimeout(() => close(), props.duration);
+		}
+		function clearTimer() {
+			clearTimeout(timer);
+			timer = void 0;
+		}
+		function close() {
+			visible.value = false;
+		}
+		const emits = __emit;
+		const afterLeaveHandler = () => {
+			emits("close", props.id);
+			clearTimer();
+		};
+		const canvasRef = shallowRef(null);
+		const messageRef = shallowRef(null);
+		const themeMap = (type) => {
+			if (!type) return "normal";
+			switch (type) {
+				case "info": return "primary";
+				case "error": return "danger";
+				default: return type;
+			}
+		};
+		const darkMode = useDarkMode();
+		const palette = computed(() => {
+			if (!props.color) return null;
+			const color = parseColor(props.color);
+			if (!color) return null;
+			return generatePalette(color.r, color.g, color.b, color.a, darkMode.value);
+		});
+		const textColor = computed(() => {
+			return palette.value ? rgbaColor2string(palette.value[5]) : void 0;
+		});
+		const closeIconColor = computed(() => {
+			if (!palette.value) return;
+			return activeFlag.value ? rgbaColor2string(palette.value[6]) : hoverFlag.value ? rgbaColor2string(palette.value[4]) : rgbaColor2string(palette.value[5]);
+		});
+		function getBorderColor(type = "normal", palette$1) {
+			if (palette$1) return palette$1[5];
+			else {
+				const theme = themeMap(type);
+				if (theme === "normal") return getGlobalThemeColor("neutral", 10);
+				else if (theme === "loading") return getGlobalThemeColor("neutral", 8);
+				else return getGlobalThemeColor(theme, 6);
+			}
+		}
+		const draw = (ctx, width, height, borderColor, pixelSize) => {
+			ctx.fillStyle = rgbaColor2string(borderColor);
+			ctx.fillRect(pixelSize, 0, width - 2 * pixelSize, pixelSize);
+			ctx.fillRect(width - pixelSize, pixelSize, pixelSize, height - 2 * pixelSize);
+			ctx.fillRect(pixelSize, height - pixelSize, width - 2 * pixelSize, pixelSize);
+			ctx.fillRect(0, pixelSize, pixelSize, height - 2 * pixelSize);
+			ctx.fillStyle = getGlobalThemeColorString("neutral", 1);
+			ctx.fillRect(pixelSize, pixelSize, width - 2 * pixelSize, height - 2 * pixelSize);
+		};
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(messageRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height } = preprocessData;
+			const pixelSize = calcPixelSize();
+			const borderColor = getBorderColor(props.type, palette.value);
+			if (borderColor) draw(ctx, width, height, borderColor, pixelSize);
+		};
+		useResizeObserver(messageRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(messageRef, drawPixel);
+		watch([
+			() => props.type,
+			palette,
+			darkMode
+		], () => {
+			setTimeout(() => {
+				drawPixel();
+			});
+		});
+		__expose({ close });
+		return () => {
+			return createVNode(Transition, {
+				"name": "px-message-fade",
+				"onAfterLeave": afterLeaveHandler
+			}, { default: () => [visible.value && createVNode("div", {
+				"ref": (node) => messageRef.value = node,
+				"onMouseenter": clearTimer,
+				"onMouseleave": startTimer,
+				"class": {
+					"px-message": true,
+					pixelium: true,
+					[`px-message__${props.type || "primary"}`]: true
+				}
+			}, [
+				(!!props.icon || props.type && props.type !== "normal" && props.type !== "sakura") && createVNode("div", { "class": "px-message-icon-wrapper" }, [props.icon ? props.icon() : props.type === "info" ? createVNode(info_circle_solid_default, {
+					"class": "px-message-icon",
+					"style": { fill: textColor.value }
+				}, null) : props.type === "success" ? createVNode(check_circle_solid_default, {
+					"class": "px-message-icon",
+					"style": { fill: textColor.value }
+				}, null) : props.type === "warning" ? createVNode(exclamation_triangle_solid_default, {
+					"class": "px-message-icon",
+					"style": { fill: textColor.value }
+				}, null) : props.type === "error" ? createVNode(octagon_times_solid_default, {
+					"class": "px-message-icon",
+					"style": { fill: textColor.value }
+				}, null) : props.type === "loading" && createVNode(spinner_third_solid_default, {
+					"class": "px-message-icon px-animation__loading",
+					"style": { fill: textColor.value }
+				}, null)]),
+				createVNode("span", {
+					"class": "px-message-content",
+					"style": { color: textColor.value }
+				}, [y(props.content) ? props.content : props.content()]),
+				props.closable && createVNode("div", { "class": "px-message-close-wrapper" }, [createVNode(times_circle_solid_default, {
+					"class": "px-message-icon",
+					"style": { fill: closeIconColor.value },
+					"onMouseenter": toggleHover(true),
+					"onMouseleave": toggleHover(false),
+					"onMousedown": toggleActive(true),
+					"onMouseup": toggleActive(false),
+					"onClick": close
+				}, null)]),
+				createVNode("canvas", {
+					"ref": (node) => canvasRef.value = node,
+					"class": "px-message-canvas"
+				}, null)
+			])] });
+		};
+	}
 });
-const ExclamationTriangleSolid = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-hn",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            { d: "M22 20v-2h-1v-2h-1v-2h-1v-2h-1v-2h-1V8h-1V6h-1V4h-1V2h-1V1h-2v1h-1v2H9v2H8v2H7v2H6v2H5v2H4v2H3v2H2v2H1v2h1v1h20v-1h1v-2zm-12-9h4v3h-1v3h-2v-3h-1zm1 7h2v2h-2z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const OctagonTimesSolid = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-hn",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            { d: "M22 8V7h-1V6h-1V5h-1V4h-1V3h-1V2h-1V1H8v1H7v1H6v1H5v1H4v1H3v1H2v1H1v8h1v1h1v1h1v1h1v1h1v1h1v1h1v1h8v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V8zm-6 9h-2v-1h-1v-1h-2v1h-1v1H8v-1H7v-2h1v-1h1v-2H8v-1H7V8h1V7h2v1h1v1h2V8h1V7h2v1h1v2h-1v1h-1v2h1v1h1v2h-1z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const CheckCircleSolid = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-hn",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            { d: "M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zm-4 3h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1H9v-1H8v-1H7v-1H6v-2h1v-1h2v1h1v1h2v-1h1v-1h1v-1h1V9h1V8h2v1h1v2h-1z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  props: {
-    content: {
-      default: ""
-    },
-    icon: null,
-    duration: {
-      default: 3e3
-    },
-    id: null,
-    type: {
-      default: "normal"
-    },
-    color: null,
-    closable: {
-      type: Boolean
-    }
-  },
-  emits: ["close"],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
-  }) {
-    const props = __props;
-    const hoverFlag = ref(false);
-    const activeFlag = ref(false);
-    const toggleActive = (status) => {
-      activeFlag.value = status;
-    };
-    const toggleHover = (status) => {
-      hoverFlag.value = status;
-    };
-    const visible = ref(false);
-    let timer = void 0;
-    onMounted(() => {
-      visible.value = true;
-      startTimer();
-    });
-    onBeforeUnmount(() => {
-      clearTimeout(timer);
-    });
-    function startTimer() {
-      timer = setTimeout(() => close(), props.duration);
-    }
-    function clearTimer() {
-      clearTimeout(timer);
-      timer = void 0;
-    }
-    function close() {
-      visible.value = false;
-    }
-    const emits = __emit;
-    const afterLeaveHandler = () => {
-      emits("close", props.id);
-      clearTimer();
-    };
-    const canvasRef = shallowRef(null);
-    const messageRef = shallowRef(null);
-    const themeMap = (type) => {
-      if (!type) {
-        return "normal";
-      }
-      switch (type) {
-        case "info":
-          return "primary";
-        case "error":
-          return "danger";
-        default:
-          return type;
-      }
-    };
-    const darkMode = useDarkMode();
-    const palette = computed(() => {
-      if (!props.color) return null;
-      const color = parseColor(props.color);
-      const palette2 = generatePalette(color.r, color.g, color.b, color.a, darkMode.value);
-      return palette2;
-    });
-    const textColor = computed(() => {
-      return palette.value ? rgbaColor2string(palette.value[5]) : void 0;
-    });
-    const closeIconColor = computed(() => {
-      if (!palette.value) {
-        return void 0;
-      }
-      return activeFlag.value ? rgbaColor2string(palette.value[6]) : hoverFlag.value ? rgbaColor2string(palette.value[4]) : rgbaColor2string(palette.value[5]);
-    });
-    function getBorderColor(type = "normal", palette2) {
-      if (palette2) {
-        return palette2[5];
-      } else {
-        const theme = themeMap(type);
-        if (theme === "normal") {
-          return getGlobalThemeColor("neutral", 10);
-        } else if (theme === "loading") {
-          return getGlobalThemeColor("neutral", 8);
-        } else {
-          return getGlobalThemeColor(theme, 6);
-        }
-      }
-    }
-    const draw = (ctx, width, height, borderColor, pixelSize) => {
-      ctx.fillStyle = rgbaColor2string(borderColor);
-      ctx.fillRect(pixelSize, 0, width - 2 * pixelSize, pixelSize);
-      ctx.fillRect(width - pixelSize, pixelSize, pixelSize, height - 2 * pixelSize);
-      ctx.fillRect(pixelSize, height - pixelSize, width - 2 * pixelSize, pixelSize);
-      ctx.fillRect(0, pixelSize, pixelSize, height - 2 * pixelSize);
-      const backgroundColor = getGlobalThemeColor("neutral", 1);
-      ctx.fillStyle = rgbaColor2string(backgroundColor);
-      ctx.fillRect(pixelSize, pixelSize, width - 2 * pixelSize, height - 2 * pixelSize);
-    };
-    const drawPixel = () => {
-      const preprocessData = canvasPreprocess(messageRef, canvasRef);
-      if (!preprocessData) {
-        return;
-      }
-      const {
-        ctx,
-        width,
-        height
-      } = preprocessData;
-      const pixelSize = calcPixelSize();
-      const borderColor = getBorderColor(props.type, palette.value);
-      draw(ctx, width, height, borderColor, pixelSize);
-    };
-    useResizeObserver(messageRef, drawPixel);
-    useWatchGlobalCssVal(drawPixel);
-    watch([() => props.type, palette, darkMode], () => {
-      setTimeout(() => {
-        drawPixel();
-      });
-    });
-    __expose({
-      close
-    });
-    return () => {
-      return createVNode(Transition, {
-        "name": "px-message-fade",
-        "onAfterLeave": afterLeaveHandler
-      }, {
-        default: () => [visible.value && createVNode("div", {
-          "ref": (node) => messageRef.value = node,
-          "onMouseenter": clearTimer,
-          "onMouseleave": startTimer,
-          "class": {
-            "px-message": true,
-            pixelium: true,
-            [`px-message__${props.type || "primary"}`]: true
-          }
-        }, [(!!props.icon || props.type && props.type !== "normal" && props.type !== "sakura") && createVNode("div", {
-          "class": "px-message-icon-wrapper"
-        }, [props.icon ? props.icon() : props.type === "info" ? createVNode(InfoCircleSolid, {
-          "class": "px-message-icon",
-          "style": {
-            fill: textColor.value
-          }
-        }, null) : props.type === "success" ? createVNode(CheckCircleSolid, {
-          "class": "px-message-icon",
-          "style": {
-            fill: textColor.value
-          }
-        }, null) : props.type === "warning" ? createVNode(ExclamationTriangleSolid, {
-          "class": "px-message-icon",
-          "style": {
-            fill: textColor.value
-          }
-        }, null) : props.type === "error" ? createVNode(OctagonTimesSolid, {
-          "class": "px-message-icon",
-          "style": {
-            fill: textColor.value
-          }
-        }, null) : props.type === "loading" && createVNode(SpinnerThirdSolid, {
-          "class": "px-message-icon px-animation__loading",
-          "style": {
-            fill: textColor.value
-          }
-        }, null)]), createVNode("span", {
-          "class": "px-message-content",
-          "style": {
-            color: textColor.value
-          }
-        }, [p(props.content) ? props.content : props.content()]), props.closable && createVNode("div", {
-          "class": "px-message-close-wrapper"
-        }, [createVNode(TimesCircleSolid, {
-          "class": "px-message-icon",
-          "style": {
-            fill: closeIconColor.value
-          },
-          "onMouseenter": toggleHover(true),
-          "onMouseleave": toggleHover(false),
-          "onMousedown": toggleActive(true),
-          "onMouseup": toggleActive(false),
-          "onClick": close
-        }, null)]), createVNode("canvas", {
-          "ref": (node) => canvasRef.value = node,
-          "class": "px-message-canvas"
-        }, null)])]
-      });
-    };
-  }
-});
-export {
-  _sfc_main as _
-};
+export { message_default as t };

package/es/message-box/css.js

@@ -1,2 +1,2 @@
 import '../index.css'
-import './message-box.css'
+import './index.css'