@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/button/index.js

@@ -1,42 +1,18 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, getCurrentInstance, ref, inject, computed, useSlots, onMounted, onBeforeUnmount, watch, normalizeClass, createCommentVNode, renderSlot, unref, createBlock } from "vue";
-import { f as floodFill } from "../share/util/plot.js";
+import { defineComponent, getCurrentInstance, ref, inject, computed, useSlots, shallowRef, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, renderSlot, unref, createBlock } from "vue";
+import { S as SpinnerThirdSolid } from "../auto-complete/index.js";
+import { a as canvasPreprocess, c as calcPixelSize, g as getBorderRadius, b as calcBorderCornerCenter, f as floodFill } from "../share/util/plot.js";
 import { p as parseColor, a as generatePalette } from "../share/util/color.js";
 import { _ as _sfc_main$1 } from "../button-group/index.js";
-import { g as getTextColorWithPalette, a as getBorderRadius, b as getBorderColor, d as drawGradient, c as drawBorder, e as getBackgroundColor } from "./draw.js";
+import { _ as _sfc_main$2 } from "../input-group/index.js";
+import { g as getTextColorWithPalette, a as getBorderColor, d as drawGradient, b as drawBorder, c as getBackgroundColor } from "./draw.js";
 import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
 import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
-const SpinnerThirdSolid = /* @__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: "M23 9v6h-1v2h-3v-2h1V9h-1V7h-1V6h-1V5h-2V4h-2V3h-1V1h3v1h2v1h2v1h1v1h1v2h1v2z" },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
-});
+import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { u as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
+import { B as BUTTON_GROUP_UPDATE, I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { B as BUTTON_GROUP_PROVIDE, I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
 const _hoisted_1 = ["disabled", "type", "autofocus"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -57,41 +33,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autofocus: { type: Boolean, default: false }
   },
   setup(__props) {
-    var _a;
+    var _a, _b;
     const props = __props;
     const instance = getCurrentInstance();
-    const inner = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
-    const last = ref(false);
-    const first = ref(false);
-    const buttonGroupProps = inject("px-button-group-props");
+    const innerButtonGroup = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
+    const innerInputGroup = ref(((_b = instance == null ? void 0 : instance.parent) == null ? void 0 : _b.type) === _sfc_main$2);
+    const [_, first, last] = innerButtonGroup.value ? useIndexOfChildren(BUTTON_GROUP_UPDATE) : innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [ref(0), ref(false), ref(false)];
+    const buttonGroupProps = inject(BUTTON_GROUP_PROVIDE);
+    const inputGroupProps = inject(INPUT_GROUP_PROVIDE);
     const borderRadiusComputed = computed(() => {
-      return inner.value && buttonGroupProps ? buttonGroupProps.borderRadius : props.borderRadius;
+      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.borderRadius : innerInputGroup.value && inputGroupProps ? inputGroupProps.borderRadius : props.borderRadius;
     });
     const typeComputed = computed(() => {
-      return inner.value && buttonGroupProps ? buttonGroupProps.variant : props.variant;
+      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.variant || props.variant : props.variant;
     });
     const sizeComputed = computed(() => {
-      return inner.value && buttonGroupProps ? buttonGroupProps.size : props.size;
+      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.size : innerInputGroup.value && inputGroupProps ? inputGroupProps.size : props.size;
     });
     const shapeComputed = computed(() => {
-      return inner.value && buttonGroupProps ? buttonGroupProps.shape : props.shape;
+      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.shape : innerInputGroup.value && inputGroupProps ? inputGroupProps.shape : props.shape;
     });
     const disabledComputed = computed(() => {
-      return inner.value && buttonGroupProps ? buttonGroupProps.disabled || props.disabled : props.disabled;
+      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.disabled || props.disabled : innerInputGroup.value && inputGroupProps ? inputGroupProps.disabled || props.disabled : props.disabled;
+    });
+    const loadingComputed = computed(() => {
+      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.loading || props.loading : props.loading;
     });
-    const checkIsLast = () => {
-      if (instance && instance.vnode.el instanceof HTMLElement) {
-        const parent = instance.vnode.el.parentElement;
-        if (parent && parent.children.length) {
-          const arr = [...parent.children];
-          last.value = arr.indexOf(instance.vnode.el) === parent.children.length - 1;
-          first.value = arr.indexOf(instance.vnode.el) === 0;
-        } else {
-          last.value = false;
-          first.value = false;
-        }
-      }
-    };
     const slots = useSlots();
     const hoverFlag = ref(false);
     const activeFlag = ref(false);
@@ -102,22 +69,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       activeFlag.value = value;
     };
     const darkMode = useDarkMode();
-    const canvasRef = ref(null);
-    const buttonRef = ref(null);
+    const canvasRef = shallowRef(null);
+    const buttonRef = shallowRef(null);
     onMounted(() => {
-      setTimeout(() => {
-        buttonRef.value && buttonRef.value.addEventListener("slot-changed", refresh);
-        checkIsLast();
-      });
-    });
-    const refresh = () => {
-      setTimeout(() => {
-        checkIsLast();
+      nextTick(() => {
         drawPixel();
       });
-    };
-    onBeforeUnmount(() => {
-      buttonRef.value && buttonRef.value.removeEventListener("slot-changed", refresh);
     });
     const palette = computed(() => {
       if (!props.color) return null;
@@ -126,14 +83,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return palette2;
     });
     const textColor = computed(() => {
-      return getTextColorWithPalette(palette.value, typeComputed.value, disabledComputed.value, props.loading, hoverFlag.value, activeFlag.value);
+      return getTextColorWithPalette(
+        palette.value,
+        typeComputed.value,
+        disabledComputed.value,
+        loadingComputed.value,
+        hoverFlag.value,
+        activeFlag.value
+      );
     });
     watch(
       [
         borderRadiusComputed,
         shapeComputed,
         disabledComputed,
-        () => props.loading,
+        loadingComputed,
         typeComputed,
         () => props.theme,
         palette,
@@ -142,66 +106,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         darkMode
       ],
       () => {
-        setTimeout(() => {
-          checkIsLast();
-          drawPixel();
-        });
+        drawPixel();
       }
     );
+    watch([first, last], () => {
+      drawPixel();
+    });
     const drawPixel = () => {
-      const globalComputedStyle = getComputedStyle(document.documentElement);
-      const pixelSize = parseInt(globalComputedStyle.getPropertyValue("--px-bit"));
-      if (!canvasRef.value || !buttonRef.value) return;
-      const ctx = canvasRef.value.getContext("2d", { willReadFrequently: true });
-      const buttonRect = buttonRef.value.getBoundingClientRect();
-      canvasRef.value.width = buttonRect.width;
-      canvasRef.value.height = buttonRect.height;
-      if (!ctx) return;
+      const preprocessData = canvasPreprocess(buttonRef, canvasRef);
+      if (!preprocessData) {
+        return;
+      }
+      const pixelSize = calcPixelSize();
+      const { ctx, width, height, canvas } = preprocessData;
       const borderRadius = getBorderRadius(
-        canvasRef.value,
+        canvas,
         pixelSize,
         borderRadiusComputed.value,
         shapeComputed.value,
-        inner.value,
+        sizeComputed.value || "medium",
+        innerButtonGroup.value || innerInputGroup.value,
         first.value,
         last.value
       );
       const borderColor = getBorderColor(
         disabledComputed.value,
-        props.loading,
+        loadingComputed.value,
         typeComputed.value,
         props.theme,
         palette.value,
         hoverFlag.value,
         activeFlag.value
       );
-      const center = [
-        [borderRadius[0], borderRadius[0]],
-        [canvasRef.value.width - borderRadius[1] - pixelSize, borderRadius[1]],
-        [canvasRef.value.width - borderRadius[2] - pixelSize, canvasRef.value.height - borderRadius[2] - pixelSize],
-        [borderRadius[3], canvasRef.value.height - borderRadius[3] - pixelSize]
-      ];
-      const rad = [
-        [Math.PI, Math.PI * 3 / 2],
-        [Math.PI * 3 / 2, Math.PI * 2],
-        [0, Math.PI / 2],
-        [Math.PI / 2, Math.PI]
-      ];
+      const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+      const rad = BORDER_CORNER_RAD_RANGE;
       if (typeComputed.value === "primary") {
         drawGradient(
           ctx,
-          canvasRef.value.width,
-          canvasRef.value.height,
+          width,
+          height,
           center,
           borderRadius,
           rad,
           pixelSize,
           disabledComputed.value,
-          props.loading,
-          typeComputed.value,
+          loadingComputed.value,
           props.theme,
           palette.value,
-          inner.value,
+          innerButtonGroup.value || innerInputGroup.value,
           first.value,
           last.value,
           hoverFlag.value,
@@ -210,38 +162,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       drawBorder(
         ctx,
-        canvasRef.value.width,
-        canvasRef.value.height,
+        width,
+        height,
         center,
         borderRadius,
         rad,
         borderColor,
         pixelSize,
         typeComputed.value,
-        inner.value,
+        innerButtonGroup.value || innerInputGroup.value,
         first.value,
         last.value
       );
       const backgroundColor = getBackgroundColor(
         disabledComputed.value,
-        props.loading,
+        loadingComputed.value,
         typeComputed.value,
         props.theme,
         palette.value,
         hoverFlag.value,
         activeFlag.value
       );
-      floodFill(ctx, Math.round((center[0][0] + center[1][0]) / 2), Math.round((center[0][1] + center[2][1]) / 2), backgroundColor);
+      floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
     };
     useResizeObserver(buttonRef, drawPixel);
+    useWatchGlobalCssVal(drawPixel);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
-        disabled: disabledComputed.value || props.loading,
+        disabled: disabledComputed.value || loadingComputed.value,
         class: normalizeClass(["pixelium px-button", {
-          "px-button__block": !inner.value && !!props.block,
+          "px-button__block": !(innerButtonGroup.value || innerInputGroup.value) && !!props.block,
           "px-button__circle": shapeComputed.value === "circle",
           "px-button__square": shapeComputed.value === "square",
-          "px-button__loading": props.loading,
+          "px-button__loading": loadingComputed.value,
           "px-button__large": sizeComputed.value === "large",
           "px-button__small": sizeComputed.value === "small",
           "px-button__outline": typeComputed.value === "outline",
@@ -249,7 +202,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "px-button__text": typeComputed.value === "text",
           "px-button__disabled": disabledComputed.value,
           "px-button__custom": palette.value,
-          "px-button__inner": inner.value,
+          "px-button__inner": innerButtonGroup.value || innerInputGroup.value,
           [`px-button__${props.theme || "primary"}`]: true
         }]),
         style: normalizeStyle({
@@ -257,7 +210,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }),
         ref_key: "buttonRef",
         ref: buttonRef,
-        "data-px-button": "",
         onMouseenter: _cache[0] || (_cache[0] = ($event) => toggleHover(true)),
         onMouseleave: _cache[1] || (_cache[1] = ($event) => toggleHover(false)),
         onMousedown: _cache[2] || (_cache[2] = ($event) => toggleActive(true)),
@@ -276,7 +228,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           512
           /* NEED_PATCH */
         ),
-        unref(slots).icon || props.loading ? (openBlock(), createElementBlock(
+        unref(slots).icon || loadingComputed.value ? (openBlock(), createElementBlock(
           "div",
           {
             key: 0,
@@ -285,15 +237,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }])
           },
           [
-            props.loading ? (openBlock(), createBlock(unref(SpinnerThirdSolid), {
+            loadingComputed.value ? (openBlock(), createBlock(unref(SpinnerThirdSolid), {
               key: 0,
-              class: normalizeClass(["px-button-icon", {
-                "px-button-icon__loading": props.loading
-              }]),
+              class: "px-button-icon px-animation__loading",
               style: normalizeStyle({
                 fill: textColor.value
               })
-            }, null, 8, ["class", "style"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })
+            }, null, 8, ["style"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })
           ],
           2
           /* CLASS */
@@ -304,6 +254,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  SpinnerThirdSolid as S,
   _sfc_main as _
 };

package/es/button-group/css.js

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

package/es/button-group/index.d.ts

@@ -7,7 +7,6 @@ declare const __VLS_component: import("vue").DefineComponent<ButtonGroupProps, {
     shape: "default" | "round";
     size: "medium" | "large" | "small";
     disabled: boolean;
-    variant: "primary" | "plain" | "text" | "outline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/es/button-group/index.js

@@ -1,6 +1,9 @@
 import './css.js'
-import { defineComponent, provide, ref, onMounted, nextTick, onBeforeUnmount, createElementBlock, openBlock, renderSlot } from "vue";
-import { i as inBrowser } from "../share/util/env.js";
+import { defineComponent, provide, createElementBlock, openBlock, renderSlot } from "vue";
+import { e as emitParentUpdate } from "../share/hook/use-index-of-children.js";
+import { B as BUTTON_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { B as BUTTON_GROUP_PROVIDE } from "../share/const/provide-key.js";
+const _hoisted_1 = { class: "pixelium px-button-group" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "ButtonGroup"
@@ -12,45 +15,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     size: { default: "medium" },
     disabled: { type: Boolean, default: false },
     loading: { type: Boolean },
-    variant: { default: "primary" }
+    variant: null
   },
   setup(__props) {
     const props = __props;
-    provide("px-button-group-props", props);
-    const slotWrapper = ref(null);
-    const callback = () => {
-      nextTick(() => {
-        if (slotWrapper.value) {
-          slotWrapper.value.querySelectorAll("[data-px-button]").forEach((el) => el.dispatchEvent(new CustomEvent("slot-changed")));
-        }
-      });
-    };
-    if (inBrowser()) {
-      const mutationObserver = new MutationObserver(callback);
-      onMounted(() => {
-        nextTick(() => {
-          slotWrapper.value && mutationObserver.observe(slotWrapper.value, { childList: true });
-        });
-        callback();
-      });
-      onBeforeUnmount(() => {
-        mutationObserver.disconnect();
-      });
-    }
+    provide(BUTTON_GROUP_PROVIDE, props);
+    emitParentUpdate(BUTTON_GROUP_UPDATE);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: "pixelium px-button-group",
-          ref_key: "slotWrapper",
-          ref: slotWrapper
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        512
-        /* NEED_PATCH */
-      );
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
     };
   }
 });

package/es/button-group/type.d.ts

@@ -26,7 +26,7 @@ export type ButtonGroupProps = {
      */
     loading?: boolean;
     /**
-     * @property {'primary' | 'plain' | 'text' | 'outline'} [variant='primary']
+     * @property {'primary' | 'plain' | 'text' | 'outline'} [variant]
      * @version 0.0.0-beta
      */
     variant?: 'primary' | 'plain' | 'text' | 'outline';

package/es/col/css.js

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

package/es/col/index.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColProps> & Readonly<{}>, {
-    span: number | import("../share/type/index.ts").ValueWithDeviceWidth<number>;
-    offset: number | import("../share/type/index.ts").ValueWithDeviceWidth<number>;
+    span: number | import("../index.ts").ValueWithDeviceWidth<number>;
+    offset: number | import("../index.ts").ValueWithDeviceWidth<number>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/es/container/css.js

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

package/es/divider/css.js

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

package/es/empty/css.js

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

package/es/empty/index.css

@@ -0,0 +1,19 @@
+.px-empty {
+  color: var(--px-neutral-8);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+.px-empty .px-empty-icon {
+  width: var(--px-large-base-size);
+  height: var(--px-large-base-size);
+}
+.px-empty-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--px-large-base-size);
+}
+.px-empty-description {
+  margin-top: var(--px-interval-1);
+}

package/es/empty/index.d.ts

@@ -0,0 +1,17 @@
+import type { EmptyProps } from './type';
+declare var __VLS_1: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    image?: (props: typeof __VLS_1) => any;
+} & {
+    description?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {
+    description: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/empty/index.js

@@ -0,0 +1,73 @@
+import './css.js'
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, renderSlot, createVNode, unref, createTextVNode, toDisplayString } from "vue";
+const FileDelete = /* @__PURE__ */ defineComponent({
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "svg",
+        {
+          class: "px-icon-pa",
+          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24"
+        },
+        [..._cache[0] || (_cache[0] = [
+          createElementVNode(
+            "path",
+            {
+              fill: "currentColor",
+              d: "M11 22h10V8h-2V6h-2v2h-2V6h2V4h-2V2H3v12h2V4h8v6h6v10h-8zm-4-2H5v2H3v-2h2v-2H3v-2h2v2h2v-2h2v2H7zm0 0h2v2H7z"
+            },
+            null,
+            -1
+            /* CACHED */
+          )
+        ])],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+const _hoisted_1 = { class: "pixelium px-empty" };
+const _hoisted_2 = { class: "px-empty-icon-wrapper" };
+const _hoisted_3 = { class: "px-empty-description" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Empty"
+  },
+  __name: "index",
+  props: {
+    description: { default: "No Data" }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "image", {}, () => [
+            createVNode(unref(FileDelete), { class: "px-empty-icon" })
+          ])
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "description", {}, () => [
+            createTextVNode(
+              toDisplayString(props.description),
+              1
+              /* TEXT */
+            )
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/empty/type.d.ts

@@ -0,0 +1,19 @@
+export type EmptyProps = {
+    /**
+     * @property {string} [description='No Data']
+     * @version 0.0.2
+     */
+    description?: string;
+};
+export type EmptySlots = {
+    /**
+     * @slot image
+     * @version 0.0.2
+     */
+    image: {};
+    /**
+     * @slot description
+     * @version 0.0.2
+     */
+    description: {};
+};

package/es/footer/css.js

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

package/es/grid/css.js

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

package/es/grid/index.js

@@ -2,6 +2,9 @@ import './css.js'
 import { defineComponent, computed, ref, provide, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
 import { u as useScreenWidth } from "../share/hook/use-screen-width.js";
 import { k, G as Gn } from "../aside/index.js";
+import { e as emitParentUpdate } from "../share/hook/use-index-of-children.js";
+import { G as GRID_UPDATE } from "../share/const/event-bus-key.js";
+import { G as GRID_PROVIDE } from "../share/const/provide-key.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "Grid"
@@ -44,11 +47,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return currentColumn || 24;
     });
     const itemsStat = ref([]);
-    provide("px-grid-provide", {
+    provide(GRID_PROVIDE, {
       column: columnComputed,
       gutter: gutterComputed,
       itemsStat
     });
+    emitParentUpdate(GRID_UPDATE);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",

package/es/grid-item/css.js

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

package/es/grid-item/index.d.ts

@@ -4,7 +4,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<GridItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GridItemProps> & Readonly<{}>, {
-    offset: number | import("../share/type/index.ts").ValueWithDeviceWidth<number>;
+    offset: number | import("../index.ts").ValueWithDeviceWidth<number>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;