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

package/es/share/hook/use-watch-global-css-var.d.ts

@@ -0,0 +1 @@
+export declare const useWatchGlobalCssVal: (callback: Function) => void;

package/es/share/hook/use-watch-global-css-var.js

@@ -0,0 +1,19 @@
+import { onBeforeUnmount } from "vue";
+import { i as inBrowser } from "../util/env.js";
+import { E as EventBus } from "../util/event-bus.js";
+import { a as GLOBAL_CSS_VAR_CHANGE } from "../const/event-bus-key.js";
+const useWatchGlobalCssVal = (callback) => {
+  if (!inBrowser()) {
+    return;
+  }
+  const cb = () => {
+    callback();
+  };
+  EventBus.on(GLOBAL_CSS_VAR_CHANGE, cb);
+  onBeforeUnmount(() => {
+    EventBus.off(GLOBAL_CSS_VAR_CHANGE, cb);
+  });
+};
+export {
+  useWatchGlobalCssVal as u
+};

package/es/share/hook/use-z-index.d.ts

@@ -0,0 +1,6 @@
+interface NamespaceConfig {
+    start: number;
+}
+declare const DEFAULT_CONFIG: Record<string, NamespaceConfig>;
+export declare function useZIndex(namespace?: keyof typeof DEFAULT_CONFIG): readonly [import("vue").Ref<number, number>, () => number, () => void];
+export {};

package/es/share/hook/use-z-index.js

@@ -0,0 +1,32 @@
+import { ref, onUnmounted } from "vue";
+const DEFAULT_CONFIG = {
+  message: { start: 3e3 },
+  popup: { start: 1e3 }
+};
+const stateMap = {};
+function ensureNamespace(ns, cfg) {
+  if (!stateMap[ns]) {
+    stateMap[ns] = { max: cfg.start, count: 0, initial: cfg.start };
+  }
+  return stateMap[ns];
+}
+function useZIndex(namespace = "popup") {
+  const cfg = DEFAULT_CONFIG[namespace];
+  const ns = ensureNamespace(namespace, cfg);
+  const localZIndex = ref(++ns.max);
+  ns.count++;
+  const next = () => {
+    localZIndex.value = ++ns.max;
+    return localZIndex.value;
+  };
+  const release = () => {
+    if (--ns.count === 0) {
+      ns.max = ns.initial;
+    }
+  };
+  onUnmounted(release);
+  return [localZIndex, next, release];
+}
+export {
+  useZIndex as u
+};

package/es/share/type/index.d.ts

@@ -1,6 +1,6 @@
 import type { VNode } from 'vue';
 import type { JSX } from 'vue/jsx-runtime';
-import type { SCREEN_SIZE_TYPE } from '../const';
+import type { GROUP_OPTION_TYPE, SCREEN_SIZE_TYPE } from '../const';
 export type NumberOrPercentage = number | `${number}%`;
 export type RgbaColor = {
     r: number;
@@ -11,3 +11,11 @@ export type RgbaColor = {
 export type ValidContent = string | (() => VNode | string | JSX.Element);
 export type ValidVNodeContent = () => VNode | JSX.Element;
 export type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>;
+export interface Option<T = any> {
+    value: T;
+    label: string;
+}
+export interface GroupOption<T = any> {
+    children: (Option<T> | string)[];
+    type: typeof GROUP_OPTION_TYPE;
+}

package/es/share/util/color.js

@@ -45,7 +45,9 @@ const getGlobalThemeColor = (theme, level) => {
   if (!inBrowser()) {
     return TRANSPARENT_RGBA_COLOR_OBJECT;
   }
-  return parseColor(getComputedStyle(document.documentElement).getPropertyValue(`--px-${theme}-${level}`));
+  return parseColor(
+    getComputedStyle(document.documentElement).getPropertyValue(`--px-${theme}-${level}`)
+  );
 };
 function toLinear(c) {
   return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
@@ -157,7 +159,7 @@ function generatePalette(r, g, b, a = 255, darkMode = false) {
   return palette;
 }
 const rgbaColor2string = (color) => {
-  return `rgba(${color.r}, ${color.g}, ${color.b}, ${+(color.a / 255)})`;
+  return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a / 255})`;
 };
 export {
   generatePalette as a,

package/es/share/util/common.d.ts

@@ -0,0 +1,5 @@
+import type { GroupOption, Option } from '../type';
+export declare const clamp: (x: number, min: number, max: number) => number;
+export declare const fillArr: (val: number, size: number) => any[];
+export declare const defaultFilter: <T extends string | Option | GroupOption>(keyword: string, list?: T[]) => T[];
+export declare const findSameOption: <T extends string | Option | GroupOption>(keyword: string, list: T[], checkLabel?: boolean) => T[];

package/es/share/util/common.js

@@ -0,0 +1,71 @@
+import { d } from "../../aside/index.js";
+import { G as GROUP_OPTION_TYPE } from "../const/index.js";
+const clamp = (x, min, max) => Math.max(min, Math.min(max, x));
+const fillArr = (val, size) => Array(size).fill(val);
+const defaultFilter = (keyword, list = []) => {
+  if (!keyword) {
+    return [...list];
+  }
+  const keyword4Search = keyword.toLowerCase();
+  const len = list.length;
+  const ans = [];
+  for (let i = 0; i < len; i++) {
+    const currentElement = list[i];
+    if (d(currentElement)) {
+      if ("type" in currentElement && currentElement.type === GROUP_OPTION_TYPE) {
+        const children = defaultFilter(keyword, currentElement.children);
+        if (children.length) {
+          ans.push({
+            ...currentElement,
+            children
+          });
+        }
+      } else {
+        if (currentElement.label.toLowerCase().includes(keyword4Search)) {
+          ans.push(currentElement);
+        }
+      }
+    } else {
+      if (currentElement.toLowerCase().includes(keyword4Search)) {
+        ans.push(currentElement);
+      }
+    }
+  }
+  return ans;
+};
+const findSameOption = (keyword, list, checkLabel = false) => {
+  if (!keyword) {
+    return [];
+  }
+  const len = list.length;
+  const ans = [];
+  for (let i = 0; i < len; i++) {
+    const currentElement = list[i];
+    if (d(currentElement)) {
+      if ("type" in currentElement && currentElement.type === GROUP_OPTION_TYPE) {
+        const options = findSameOption(keyword, currentElement.children, checkLabel);
+        if (options.length) {
+          ans.push(options[0], currentElement);
+          break;
+        }
+      } else {
+        if (checkLabel && currentElement.label === keyword || currentElement.value === keyword) {
+          ans.push(currentElement);
+          break;
+        }
+      }
+    } else {
+      if (currentElement === keyword) {
+        ans.push(currentElement);
+        break;
+      }
+    }
+  }
+  return ans;
+};
+export {
+  findSameOption as a,
+  clamp as c,
+  defaultFilter as d,
+  fillArr as f
+};

package/es/share/util/event-bus.d.ts

@@ -0,0 +1 @@
+export declare const EventBus: import("mitt").Emitter<Record<import("mitt").EventType, unknown>>;

package/es/share/util/event-bus.js

@@ -0,0 +1,20 @@
+function mitt(n) {
+  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
+    var i = n.get(t);
+    i ? i.push(e) : n.set(t, [e]);
+  }, off: function(t, e) {
+    var i = n.get(t);
+    i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));
+  }, emit: function(t, e) {
+    var i = n.get(t);
+    i && i.slice().map(function(n2) {
+      n2(e);
+    }), (i = n.get("*")) && i.slice().map(function(n2) {
+      n2(t, e);
+    });
+  } };
+}
+const EventBus = mitt();
+export {
+  EventBus as E
+};

package/es/share/util/plot.d.ts

@@ -1,4 +1,5 @@
-import type { RgbaColor } from '../type';
+import type { NumberOrPercentage, RgbaColor } from '../type';
+import type { ShallowRef } from 'vue';
 export declare function drawCircle(ctx: CanvasRenderingContext2D, centerX: number, centerY: number, radius: number, startRad: number | undefined, endRad: number | undefined, pixelSize: number): void;
 export type floodFillArgs = {
     x: number;
@@ -9,4 +10,16 @@ export type floodFillArgs = {
     targetColor: RgbaColor;
     pixels: number[];
 };
-export declare function floodFill(ctx: CanvasRenderingContext2D, x: number, y: number, fillColor: RgbaColor): void;
+export declare function floodFill(ctx: CanvasRenderingContext2D, startX: number, startY: number, fillColor: RgbaColor): void;
+export declare const transformBorderRadiusSizeValue: (canvas: HTMLCanvasElement, value: NumberOrPercentage, pixelSize: number) => number;
+export declare const getBorderRadius: (canvas: HTMLCanvasElement, pixelSize: number, borderRadius: NumberOrPercentage | NumberOrPercentage[] | undefined, shape: "default" | "round" | "circle" | "square" | undefined, size?: "medium" | "small" | "large", inner?: boolean, first?: boolean, last?: boolean) => number[];
+export declare function calcWhenLeaveBaseline(pixelSize: number, borderRadius: number): number;
+export declare const calcPixelSize: () => number;
+export declare const calcBorderCornerCenter: (borderRadius: number[], width: number, height: number, pixelSize: number, paddingX?: number, paddingY?: number) => [number, number][];
+export declare const canvasPreprocess: (wrapperRef: ShallowRef<HTMLElement | null>, canvasRef: ShallowRef<HTMLCanvasElement | null>) => {
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    rect: DOMRect;
+    canvas: HTMLCanvasElement;
+} | undefined;

package/es/share/util/plot.js

@@ -1,3 +1,6 @@
+import { $, k } from "../../aside/index.js";
+import { f as fillArr, c as clamp } from "./common.js";
+import { i as inBrowser } from "./env.js";
 function shouldPlot(x, y, startRad, endRad) {
   let currentAngle = Math.atan2(y, x);
   if (currentAngle < 0) {
@@ -37,43 +40,210 @@ function drawCircle(ctx, centerX, centerY, radius, startRad = 0, endRad = Math.P
     }
   }
 }
-function floodFill(ctx, x, y, fillColor) {
-  const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-  const pixels = imageData.data;
-  const targetPos = (y * ctx.canvas.width + x) * 4;
-  const targetR = pixels[targetPos];
-  const targetG = pixels[targetPos + 1];
-  const targetB = pixels[targetPos + 2];
-  const targetA = pixels[targetPos + 3];
-  if (!(0 === targetR && 0 === targetG && 0 === targetB && 0 === targetA)) {
+function floodFill(ctx, startX, startY, fillColor) {
+  const w = ctx.canvas.width;
+  const h = ctx.canvas.height;
+  if (w <= 0 || h <= 0) {
     return;
   }
-  if (0 === fillColor.r && 0 === fillColor.g && 0 === fillColor.b && 0 === fillColor.a) {
-    return;
-  }
-  const stack = [[x, y]];
+  const img = ctx.getImageData(0, 0, w, h);
+  const data32 = new Uint32Array(img.data.buffer);
+  const uint32Color = fillColor.a << 24 | fillColor.b << 16 | fillColor.g << 8 | fillColor.r;
+  const startPos = startY * w + startX;
+  const targetColor = data32[startPos];
+  if (targetColor === uint32Color) return;
+  const stack = [];
+  const firstSpan = fillLine(startX, startY, 1);
+  if (firstSpan) stack.push({ ...firstSpan, dy: 1 });
+  const secondSpan = fillLine(startX, startY - 1, -1);
+  if (secondSpan) stack.push({ ...secondSpan, dy: -1 });
   while (stack.length) {
-    const data = stack.pop();
-    if (!data) {
-      continue;
+    const { y, left, right, dy } = stack.pop();
+    const ny = y + dy;
+    if (ny < 0 || ny >= h) continue;
+    let x = left;
+    while (x <= right) {
+      while (x <= right && data32[ny * w + x] !== targetColor) x++;
+      if (x > right) break;
+      const spanLeft = x;
+      const newSpan = fillLine(spanLeft, ny, dy);
+      if (newSpan) stack.push(newSpan);
+      x = newSpan ? newSpan.right + 1 : spanLeft + 1;
     }
-    const [x2, y2] = data;
-    const pos = (y2 * ctx.canvas.width + x2) * 4;
-    if (x2 < 0 || x2 >= ctx.canvas.width || y2 < 0 || y2 >= ctx.canvas.height || pixels[pos] !== targetR || pixels[pos + 1] !== targetG || pixels[pos + 2] !== targetB || pixels[pos + 3] !== targetA) {
-      continue;
+  }
+  ctx.putImageData(img, 0, 0);
+  function fillLine(x, y, dy) {
+    let left = x;
+    while (left > 0 && data32[y * w + left - 1] === targetColor) left--;
+    let right = x;
+    while (right < w - 1 && data32[y * w + right + 1] === targetColor) right++;
+    for (let i = left; i <= right; i++) data32[y * w + i] = uint32Color;
+    return { y, left, right, dy };
+  }
+}
+const transformBorderRadiusSizeValue = (canvas, value, pixelSize) => {
+  if (k(value)) {
+    return Math.max(value, pixelSize);
+  } else {
+    return Math.max(canvas.height * parseFloat(value) / 100, pixelSize);
+  }
+};
+const getRadiusFromValue = (canvas, value, pixelSize) => {
+  if (!value) return fillArr(pixelSize, 4);
+  if (!$(value)) {
+    return fillArr(transformBorderRadiusSizeValue(canvas, value, pixelSize), 4);
+  }
+  switch (value.length) {
+    case 1:
+      return fillArr(transformBorderRadiusSizeValue(canvas, value[0], pixelSize), 4);
+    case 2: {
+      const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
+      const tr = transformBorderRadiusSizeValue(canvas, value[1], pixelSize);
+      return [tl, tr, tl, tr];
     }
-    pixels[pos] = fillColor.r;
-    pixels[pos + 1] = fillColor.g;
-    pixels[pos + 2] = fillColor.b;
-    pixels[pos + 3] = fillColor.a;
-    stack.push([x2 + 1, y2]);
-    stack.push([x2 - 1, y2]);
-    stack.push([x2, y2 + 1]);
-    stack.push([x2, y2 - 1]);
+    case 3: {
+      const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
+      const br = transformBorderRadiusSizeValue(canvas, value[2], pixelSize);
+      const rest = transformBorderRadiusSizeValue(canvas, value[1], pixelSize);
+      return [tl, rest, br, rest];
+    }
+    default:
+      return value.map((e) => transformBorderRadiusSizeValue(canvas, e, pixelSize));
+  }
+};
+const getInnerRadius = (canvas, value, pixelSize, first, last) => {
+  if (!value) return fillArr(pixelSize, 4);
+  if (!$(value)) {
+    const v = transformBorderRadiusSizeValue(canvas, value, pixelSize);
+    if (last) return [pixelSize, v, v, pixelSize];
+    if (first) return [v, pixelSize, pixelSize, v];
+    return fillArr(pixelSize, 4);
   }
-  ctx.putImageData(imageData, 0, 0);
+  switch (value.length) {
+    case 1:
+      const v = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
+      if (last) return [pixelSize, v, v, pixelSize];
+      if (first) return [v, pixelSize, pixelSize, v];
+      return fillArr(pixelSize, 4);
+    case 2: {
+      const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
+      const tr = transformBorderRadiusSizeValue(canvas, value[1], pixelSize);
+      if (last) return [pixelSize, tr, tr, pixelSize];
+      if (first) return [tl, pixelSize, pixelSize, tl];
+      return fillArr(pixelSize, 4);
+    }
+    case 3: {
+      const tl = transformBorderRadiusSizeValue(canvas, value[0], pixelSize);
+      const br = transformBorderRadiusSizeValue(canvas, value[2], pixelSize);
+      const rest = transformBorderRadiusSizeValue(canvas, value[1], pixelSize);
+      if (last) return [pixelSize, rest, br, pixelSize];
+      if (first) return [tl, pixelSize, pixelSize, rest];
+      return fillArr(pixelSize, 4);
+    }
+    default:
+      if (last)
+        return [
+          pixelSize,
+          transformBorderRadiusSizeValue(canvas, value[1], pixelSize),
+          transformBorderRadiusSizeValue(canvas, value[2], pixelSize),
+          pixelSize
+        ];
+      if (first)
+        return [
+          transformBorderRadiusSizeValue(canvas, value[0], pixelSize),
+          pixelSize,
+          pixelSize,
+          transformBorderRadiusSizeValue(canvas, value[3], pixelSize)
+        ];
+      return fillArr(pixelSize, 4);
+  }
+};
+const getBorderRadius = (canvas, pixelSize, borderRadius, shape, size = "medium", inner = false, first = false, last = false) => {
+  if (!inBrowser()) {
+    return fillArr(pixelSize, 4);
+  }
+  if (!inner) {
+    if (borderRadius) {
+      return getRadiusFromValue(canvas, borderRadius, pixelSize);
+    }
+    switch (shape) {
+      case "round":
+      case "circle":
+        let radius = transformBorderRadiusSizeValue(canvas, "50%", pixelSize);
+        radius = Math.max(Math.round(radius / pixelSize) * pixelSize, pixelSize);
+        return fillArr(radius, 4);
+      default:
+        return fillArr(pixelSize, 4);
+    }
+  } else {
+    if (borderRadius) {
+      return getInnerRadius(canvas, borderRadius, pixelSize, first, last);
+    }
+    const globalComputedStyle = getComputedStyle(document.documentElement);
+    const height = parseInt(globalComputedStyle.getPropertyValue(`--px-${size}-base-size`)) + 2 * pixelSize;
+    switch (shape) {
+      case "round":
+        let radius = transformBorderRadiusSizeValue(canvas, "50%", pixelSize);
+        radius = clamp(radius, pixelSize, height / 2);
+        radius = Math.max(Math.round(radius / pixelSize) * pixelSize, pixelSize);
+        const roundArr = fillArr(radius, 4);
+        if (last) return roundArr.map((e, i) => i < 1 || i > 2 ? pixelSize : e);
+        if (first) return roundArr.map((e, i) => i > 0 && i < 3 ? pixelSize : e);
+        return fillArr(pixelSize, 4);
+      default:
+        return fillArr(pixelSize, 4);
+    }
+  }
+};
+function calcWhenLeaveBaseline(pixelSize, borderRadius) {
+  return Math.ceil(
+    (-6 + Math.sqrt(36 - 48 * pixelSize + 32 * pixelSize * borderRadius)) / (8 * pixelSize)
+  ) * pixelSize;
 }
+const calcPixelSize = () => {
+  if (!inBrowser()) {
+    return 4;
+  }
+  const globalComputedStyle = getComputedStyle(document.documentElement);
+  const pixelSize = parseInt(globalComputedStyle.getPropertyValue("--px-bit"));
+  return pixelSize;
+};
+const calcBorderCornerCenter = (borderRadius, width, height, pixelSize, paddingX = 0, paddingY = 0) => {
+  return [
+    [borderRadius[0], borderRadius[0]],
+    [width - paddingX - borderRadius[1] - pixelSize, borderRadius[1]],
+    [
+      width - paddingX - borderRadius[2] - pixelSize,
+      height - paddingY - borderRadius[2] - pixelSize
+    ],
+    [borderRadius[3], height - paddingY - borderRadius[3] - pixelSize]
+  ];
+};
+const canvasPreprocess = (wrapperRef, canvasRef) => {
+  if (!canvasRef.value || !wrapperRef.value) return;
+  const ctx = canvasRef.value.getContext("2d", { willReadFrequently: true });
+  if (!ctx) return;
+  ctx.imageSmoothingEnabled = false;
+  const rect = wrapperRef.value.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) {
+    return;
+  }
+  canvasRef.value.width = rect.width;
+  canvasRef.value.height = rect.height;
+  return {
+    ctx,
+    width: canvasRef.value.width,
+    height: canvasRef.value.height,
+    rect,
+    canvas: canvasRef.value
+  };
+};
 export {
+  canvasPreprocess as a,
+  calcBorderCornerCenter as b,
+  calcPixelSize as c,
   drawCircle as d,
-  floodFill as f
+  calcWhenLeaveBaseline as e,
+  floodFill as f,
+  getBorderRadius as g
 };

package/es/share/util/render.d.ts

@@ -17,6 +17,7 @@ export declare const isComponentVNode: (vn: VNode, _?: VNodeTypes) => _ is Compo
 export declare const hasTextChildren: (child: VNode, _?: VNode["children"]) => _ is string;
 export declare const hasArrayChildren: (vn: VNode, _?: VNode["children"]) => _ is VNode[];
 export declare const hasSlotsChildren: (vn: VNode, _: VNode["children"]) => _ is Slots;
+export declare const isTextVNode: (vn: VNode) => boolean;
 export declare const flattenVNodes: (children: VNode[] | undefined) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[];

package/es/share/util/render.js

@@ -1,4 +1,5 @@
 import { $ } from "../../aside/index.js";
+import { Text } from "vue";
 const isHtmlElementVNode = (vn, _) => {
   return Boolean(
     vn && vn.shapeFlag & 1
@@ -12,7 +13,10 @@ const isComponentVNode = (vn, _) => {
   );
 };
 const hasTextChildren = (child, _) => {
-  return Boolean(child && child.shapeFlag & 8);
+  return Boolean(
+    child && child.shapeFlag & 8
+    /* TEXT_CHILDREN */
+  );
 };
 const hasArrayChildren = (vn, _) => {
   return Boolean(
@@ -26,6 +30,9 @@ const hasSlotsChildren = (vn, _) => {
     /* SLOTS_CHILDREN */
   );
 };
+const isTextVNode = (vn) => {
+  return Boolean(vn.type === Text);
+};
 const flattenVNodes = (children) => {
   var _a, _b;
   const results = [];
@@ -43,5 +50,6 @@ const flattenVNodes = (children) => {
   return results;
 };
 export {
-  flattenVNodes as f
+  flattenVNodes as f,
+  isTextVNode as i
 };

package/es/share/util/theme.js

@@ -2,6 +2,8 @@ import { p } from "../../aside/index.js";
 import { p as parseColor, a as generatePalette, r as rgbaColor2string } from "./color.js";
 import { t as throwError } from "./console.js";
 import { i as inBrowser } from "./env.js";
+import { E as EventBus } from "./event-bus.js";
+import { a as GLOBAL_CSS_VAR_CHANGE } from "../const/event-bus-key.js";
 const setThemeColor = (theme, color) => {
   var _a, _b;
   if (!inBrowser()) {
@@ -13,18 +15,34 @@ const setThemeColor = (theme, color) => {
   };
   if (p(color)) {
     const rgbaColor = parseColor(color);
-    colorList.light = generatePalette(rgbaColor.r, rgbaColor.g, rgbaColor.b, rgbaColor.a, false).map((color2) => {
+    colorList.light = generatePalette(
+      rgbaColor.r,
+      rgbaColor.g,
+      rgbaColor.b,
+      rgbaColor.a,
+      false
+    ).map((color2) => {
       return rgbaColor2string(color2);
     });
-    colorList.dark = generatePalette(rgbaColor.r, rgbaColor.g, rgbaColor.b, rgbaColor.a, true).map((color2) => {
+    colorList.dark = generatePalette(
+      rgbaColor.r,
+      rgbaColor.g,
+      rgbaColor.b,
+      rgbaColor.a,
+      true
+    ).map((color2) => {
       return rgbaColor2string(color2);
     });
   } else {
     if (((_a = color.light) == null ? void 0 : _a.length) && color.light.length !== 10) {
-      throwError(`The length of color.light does not match the required number of CSS color palette (10).`);
+      return throwError(
+        `The length of color.light does not match the required number of CSS color palette (10).`
+      );
     }
     if (((_b = color.dark) == null ? void 0 : _b.length) && color.dark.length !== 10) {
-      throwError(`The length of color.dark does not match the required number of CSS color palette (10).`);
+      return throwError(
+        `The length of color.dark does not match the required number of CSS color palette (10).`
+      );
     }
     colorList.light = color.light || [];
     colorList.dark = color.dark || [];
@@ -35,6 +53,7 @@ const setThemeColor = (theme, color) => {
   colorList.dark.forEach((item, index) => {
     document.documentElement.style.setProperty(`--px-${theme}-dark-custom-${index + 1}`, item);
   });
+  EventBus.emit(GLOBAL_CSS_VAR_CHANGE);
 };
 export {
   setThemeColor as s

package/es/space/css.js

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

package/es/space/index.css

@@ -1,3 +1,8 @@
+.px-space {
+  --px-medium-interval: var(--px-interval-2);
+  --px-large-interval: var(--px-interval-3);
+  --px-small-interval: var(--px-interval-1);
+}
 .px-space__inline {
   display: inline-block;
 }

package/es/space/index.js

@@ -28,7 +28,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
   },
   setup(__props) {
-    var _a;
     const props = __props;
     const alignComputed = computed(() => {
       if (props.align) {
@@ -37,7 +36,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return props.direction === "horizontal" ? "center" : "stretch";
     });
     const slots = useSlots();
-    const children = flattenVNodes(((_a = slots.default) == null ? void 0 : _a.call(slots)) || []);
     const marginComputed = computed(() => {
       if (!props.margin || props.margin === "small" || props.margin === "medium" || props.margin === "large") {
         return;
@@ -58,6 +56,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return () => {
+      var _a;
+      const children = flattenVNodes(((_a = slots.default) == null ? void 0 : _a.call(slots)) || []);
       return createVNode("div", {
         "class": {
           pixelium: true,

package/es/spin/css.js

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