@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/grid-item/index.js

@@ -1,123 +1,87 @@
 import './css.js'
-import { defineComponent, getCurrentInstance, ref, inject, useId, computed, onMounted, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
-import { _ as _sfc_main$1 } from "../grid/index.js";
-import { k } from "../aside/index.js";
-import { u as useScreenWidth } from "../share/hook/use-screen-width.js";
-import { u as useIndexOfChildren } 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: "GridItem"
-  },
-  __name: "index",
-  props: {
-    offset: { default: 0 },
-    span: null
-  },
-  setup(__props) {
-    var _a;
-    const instance = getCurrentInstance();
-    const inner = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
-    const provide = inner.value ? inject(GRID_PROVIDE) : void 0;
-    const props = __props;
-    const id = useId();
-    const [index] = useIndexOfChildren(GRID_UPDATE);
-    const [widthType] = useScreenWidth();
-    const offsetComputed = computed(() => {
-      if (k(props.offset)) {
-        return props.offset;
-      }
-      return props.offset[widthType.value] || 0;
-    });
-    const spanComputed = computed(() => {
-      if (props.span === void 0) {
-        return (provide == null ? void 0 : provide.column.value) || 24;
-      }
-      if (k(props.span)) {
-        return props.span;
-      }
-      return props.span[widthType.value] || 24;
-    });
-    onMounted(() => {
-      provide == null ? void 0 : provide.itemsStat.value.push({
-        id,
-        index: index.value,
-        offset: offsetComputed.value,
-        span: spanComputed.value
-      });
-    });
-    watch([index, offsetComputed, spanComputed], () => {
-      const stat = provide == null ? void 0 : provide.itemsStat.value.find((item) => item.id === id);
-      if (stat) {
-        stat.index = index.value;
-        stat.offset = offsetComputed.value;
-        stat.span = spanComputed.value;
-      } else {
-        provide == null ? void 0 : provide.itemsStat.value.push({
-          id,
-          index: index.value,
-          offset: offsetComputed.value,
-          span: spanComputed.value
-        });
-      }
-    });
-    onBeforeUnmount(() => {
-      const idx = provide == null ? void 0 : provide.itemsStat.value.findIndex((item) => item.id === id);
-      if (idx !== void 0 && idx > -1) {
-        provide == null ? void 0 : provide.itemsStat.value.splice(idx, 1);
-      }
-    });
-    const gridColumn = computed(() => {
-      if (!provide) {
-        return;
-      }
-      if (offsetComputed.value + spanComputed.value > provide.column.value) {
-        return `${offsetComputed.value + 1} / span ${spanComputed.value}`;
-      }
-      const preItems = provide.itemsStat.value.filter(
-        (item) => item.index !== -1 && item.index < index.value
-      );
-      if (preItems.length === 0) {
-        return `${offsetComputed.value + 1} / span ${spanComputed.value}`;
-      }
-      let start = 0;
-      preItems.forEach((item) => {
-        if (item.span + item.offset >= provide.column.value) {
-          start = 0;
-          return;
-        }
-        start += item.span + item.offset;
-        if (start > provide.column.value) {
-          start = item.span + item.offset;
-        } else if (start === provide.column.value) {
-          start = 0;
-        }
-      });
-      let occupied = start + offsetComputed.value + spanComputed.value;
-      if (occupied > provide.column.value) {
-        return `${offsetComputed.value + 1} / span ${spanComputed.value}`;
-      }
-      return `${start + offsetComputed.value + 1} / span ${spanComputed.value}`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: "pixelium px-grid-item",
-          style: normalizeStyle({
-            gridColumn: gridColumn.value
-          })
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        4
-        /* STYLE */
-      );
-    };
-  }
+import { g as A } from "../vendor.js";
+import { r as GRID_UPDATE } from "../share/const/event-bus-key.js";
+import { n as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
+import { o as GRID_PROVIDE } from "../share/const/provide-key.js";
+import { t as useScreenWidth } from "../share/hook/use-screen-width.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, inject, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, useId, watch } from "vue";
+var grid_item_default = /* @__PURE__ */ defineComponent({
+	name: "GridItem",
+	__name: "index",
+	props: {
+		offset: { default: 0 },
+		span: null
+	},
+	setup(__props) {
+		var _instance$parent;
+		const instance = getCurrentInstance();
+		const provide$1 = ref((instance === null || instance === void 0 || (_instance$parent = instance.parent) === null || _instance$parent === void 0 ? void 0 : _instance$parent.type.name) === "Grid").value ? inject(GRID_PROVIDE, void 0) : void 0;
+		const props = __props;
+		const id = useId();
+		const [index] = useIndexOfChildren(GRID_UPDATE);
+		const [widthType] = useScreenWidth();
+		const offsetComputed = computed(() => {
+			if (A(props.offset)) return props.offset;
+			return props.offset[widthType.value] || 0;
+		});
+		const spanComputed = computed(() => {
+			if (props.span === void 0) return (provide$1 === null || provide$1 === void 0 ? void 0 : provide$1.column.value) || 24;
+			if (A(props.span)) return props.span;
+			return props.span[widthType.value] || 24;
+		});
+		onMounted(() => {
+			provide$1 === null || provide$1 === void 0 || provide$1.itemsStat.value.push({
+				id,
+				index: index.value,
+				offset: offsetComputed.value,
+				span: spanComputed.value
+			});
+		});
+		watch([
+			index,
+			offsetComputed,
+			spanComputed
+		], () => {
+			const stat = provide$1 === null || provide$1 === void 0 ? void 0 : provide$1.itemsStat.value.find((item) => item.id === id);
+			if (stat) {
+				stat.index = index.value;
+				stat.offset = offsetComputed.value;
+				stat.span = spanComputed.value;
+			} else provide$1 === null || provide$1 === void 0 || provide$1.itemsStat.value.push({
+				id,
+				index: index.value,
+				offset: offsetComputed.value,
+				span: spanComputed.value
+			});
+		});
+		onBeforeUnmount(() => {
+			const idx = provide$1 === null || provide$1 === void 0 ? void 0 : provide$1.itemsStat.value.findIndex((item) => item.id === id);
+			if (idx !== void 0 && idx > -1) provide$1 === null || provide$1 === void 0 || provide$1.itemsStat.value.splice(idx, 1);
+		});
+		const gridColumn = computed(() => {
+			if (!provide$1) return;
+			if (offsetComputed.value + spanComputed.value > provide$1.column.value) return `${offsetComputed.value + 1} / span ${spanComputed.value}`;
+			const preItems = provide$1.itemsStat.value.filter((item) => item.index !== -1 && item.index < index.value);
+			if (preItems.length === 0) return `${offsetComputed.value + 1} / span ${spanComputed.value}`;
+			let start = 0;
+			preItems.forEach((item) => {
+				if (item.span + item.offset >= provide$1.column.value) {
+					start = 0;
+					return;
+				}
+				start += item.span + item.offset;
+				if (start > provide$1.column.value) start = item.span + item.offset;
+				else if (start === provide$1.column.value) start = 0;
+			});
+			if (start + offsetComputed.value + spanComputed.value > provide$1.column.value) return `${offsetComputed.value + 1} / span ${spanComputed.value}`;
+			return `${start + offsetComputed.value + 1} / span ${spanComputed.value}`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "pixelium px-grid-item",
+				style: normalizeStyle({ gridColumn: gridColumn.value })
+			}, [renderSlot(_ctx.$slots, "default")], 4);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { grid_item_default as t };

package/es/header/index.css

@@ -4,6 +4,7 @@
   background-color: var(--px-neutral-1);
   color: var(--px-neutral-10);
   min-height: 64px;
+  box-sizing: border-box;
 }
 .px-header__bordered {
   border-bottom: 2px solid var(--px-neutral-3);

package/es/header/index.js

@@ -1,42 +1,33 @@
 import './css.js'
-import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot } from "vue";
-import { N, k } from "../aside/index.js";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ name: "Header" },
-  __name: "index",
-  props: {
-    minHeight: null,
-    bordered: { type: Boolean },
-    dark: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const props = __props;
-    const darkMode = useDarkMode();
-    const minHeight = computed(() => {
-      return N(props.minHeight) ? void 0 : k(props.minHeight) ? `${props.minHeight}px` : props.minHeight;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "header",
-        {
-          class: normalizeClass(["pixelium px-header", {
-            "px-header__dark": !unref(darkMode) && !!props.dark,
-            "px-header__bordered": !!props.bordered
-          }]),
-          style: normalizeStyle({
-            minHeight: minHeight.value
-          })
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
+import { _ as E, g as A } from "../vendor.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+var header_default = /* @__PURE__ */ defineComponent({
+	name: "Header",
+	__name: "index",
+	props: {
+		minHeight: null,
+		bordered: { type: Boolean },
+		dark: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const darkMode = useDarkMode();
+		const minHeight = computed(() => {
+			return E(props.minHeight) ? void 0 : A(props.minHeight) ? `${props.minHeight}px` : props.minHeight;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", {
+				class: normalizeClass(["pixelium px-header", {
+					"px-header__dark": !unref(darkMode) && !!props.dark,
+					"px-header__bordered": !!props.bordered
+				}]),
+				style: normalizeStyle({ minHeight: minHeight.value })
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { header_default as t };

package/es/icon/index.js

@@ -1,57 +1,46 @@
 import './css.js'
-import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
-import { k } from "../aside/index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ name: "Icon" },
-  __name: "index",
-  props: {
-    size: { default: "1em" },
-    color: { default: "currentColor" },
-    rotate: { default: 0 },
-    spin: { type: Boolean, default: false },
-    flip: { default: "none" }
-  },
-  setup(__props) {
-    const props = __props;
-    const transform = computed(() => {
-      let scaleX = 1;
-      let scaleY = 1;
-      if (props.flip === "horizontal" || props.flip === "both") {
-        scaleX = -1;
-      }
-      if (props.flip === "vertical" || props.flip === "both") {
-        scaleY = -1;
-      }
-      return `scale(${scaleX}, ${scaleY}) rotate(${props.rotate}deg)`;
-    });
-    const size = computed(() => {
-      return k(props.size) ? `${props.size}px` : props.size;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass({
-            "pixelium px-icon": true,
-            "px-animation__loading": !!props.spin
-          }),
-          style: normalizeStyle({
-            height: size.value,
-            width: size.value,
-            fontSize: size.value,
-            color: props.color,
-            transform: transform.value
-          })
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
+import { g as A } from "../vendor.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot } from "vue";
+var icon_default = /* @__PURE__ */ defineComponent({
+	name: "Icon",
+	__name: "index",
+	props: {
+		size: { default: "1em" },
+		color: { default: "currentColor" },
+		rotate: { default: 0 },
+		spin: {
+			type: Boolean,
+			default: false
+		},
+		flip: { default: "none" }
+	},
+	setup(__props) {
+		const props = __props;
+		const transform = computed(() => {
+			let scaleX = 1;
+			let scaleY = 1;
+			if (props.flip === "horizontal" || props.flip === "both") scaleX = -1;
+			if (props.flip === "vertical" || props.flip === "both") scaleY = -1;
+			return `scale(${scaleX}, ${scaleY}) rotate(${props.rotate}deg)`;
+		});
+		const size = computed(() => {
+			return A(props.size) ? `${props.size}px` : props.size;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass({
+					"pixelium px-icon": true,
+					"px-animation__loading": !!props.spin
+				}),
+				style: normalizeStyle({
+					height: size.value,
+					width: size.value,
+					fontSize: size.value,
+					color: props.color,
+					transform: transform.value
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { icon_default as t };

package/es/icons/css-hn.js

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

package/es/icons/css-pa.js

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