@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/input-tag/type.d.ts

@@ -1,5 +1,6 @@
-import type { NumberOrPercentage } from '../share/type';
-import type { TagProps } from '../tag/type';
+import type { PopoverProps, PopoverEvents } from '../popover/type';
+import type { EmitEvent, NumberOrPercentage } from '../share/type';
+import type { TagEvents, TagProps } from '../tag/type';
 export type InputTagProps = {
     /**
      * @property {string[] | null} [modelValue]
@@ -52,10 +53,10 @@ export type InputTagProps = {
      */
     size?: 'medium' | 'large' | 'small';
     /**
-     * @property {'default' | 'round'} [shape='default']
-     * @version 0.0.2
+     * @property {'rect' | 'round'} [shape='rect']
+     * @version 0.0.3
      */
-    shape?: 'default' | 'round';
+    shape?: 'rect' | 'round' | 'default';
     /**
      * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
      * @version 0.0.2
@@ -81,6 +82,21 @@ export type InputTagProps = {
      * @version 0.0.2
      */
     collapseTagsPopover?: boolean;
+    /**
+     * @property {Omit<TagProps, 'size' | 'disabled' | 'closable'> & EmitEvent<TagEvents>} [tagProps]
+     * @version 0.0.3
+     */
+    tagProps?: Omit<TagProps, 'size' | 'disabled' | 'closable'> & EmitEvent<TagEvents>;
+    /**
+     * @property {'success' | 'warning' | 'error' | 'normal'} [status='normal']
+     * @version 0.0.2
+     */
+    status?: 'success' | 'warning' | 'error' | 'normal';
+    /**
+     * @property {boolean} [autofocus=false]
+     * @version 0.0.2
+     */
+    autofocus?: boolean;
     /**
      * @property {'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'} [tagTheme='info']
      * @version 0.0.2
@@ -97,15 +113,10 @@ export type InputTagProps = {
      */
     tagColor?: TagProps['color'];
     /**
-     * @property {'success' | 'warning' | 'error' | 'normal'} [status='normal']
-     * @version 0.0.2
-     */
-    status?: 'success' | 'warning' | 'error' | 'normal';
-    /**
-     * @property {boolean} [autofocus=false]
-     * @version 0.0.2
+     * @property {Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>} [popoverProps]
+     * @version 0.0.3
      */
-    autofocus?: boolean;
+    popoverProps?: Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>;
 };
 export type InputTagEvents = {
     /**

package/es/link/index.js

@@ -1,108 +1,77 @@
 import './css.js'
-import { defineComponent, useSlots, computed, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, renderSlot, unref, createBlock } from "vue";
-import { p as parseColor, a as generatePalette, r as rgbaColor2string } from "../share/util/color.js";
-import { S as SpinnerThirdSolid } from "../auto-complete/index.js";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-const _hoisted_1 = ["href", "target"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Link"
-  },
-  __name: "index",
-  props: {
-    disabled: { type: Boolean },
-    loading: { type: Boolean },
-    theme: null,
-    color: null,
-    href: null,
-    target: null
-  },
-  setup(__props) {
-    const props = __props;
-    const slots = useSlots();
-    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 hoverFlag = ref(false);
-    const activeFlag = ref(false);
-    const toggleHover = (value) => {
-      hoverFlag.value = value;
-    };
-    const toggleActive = (value) => {
-      activeFlag.value = value;
-    };
-    const getTextColorWithPalette = (palette2, disabled, loading, hoverFlag2, activeFlag2) => {
-      if (!palette2) return void 0;
-      if (disabled) {
-        return rgbaColor2string(palette2[1]);
-      }
-      if (loading) return rgbaColor2string(palette2[5]);
-      if (activeFlag2) return rgbaColor2string(palette2[6]);
-      if (hoverFlag2) return rgbaColor2string(palette2[4]);
-      return rgbaColor2string(palette2[5]);
-    };
-    const textColor = computed(() => {
-      return getTextColorWithPalette(
-        palette.value,
-        props.disabled,
-        props.loading,
-        hoverFlag.value,
-        activeFlag.value
-      );
-    });
-    const clickHandler = (e) => {
-      if (props.disabled || props.loading) {
-        e.preventDefault();
-      }
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("a", {
-        class: normalizeClass(["pixelium px-link", {
-          "px-link__loading": props.loading,
-          "px-link__disabled": props.disabled,
-          "px-link__custom": palette.value,
-          [`px-link__${props.theme || "primary"}`]: true
-        }]),
-        style: normalizeStyle({
-          color: textColor.value
-        }),
-        onMouseenter: _cache[0] || (_cache[0] = ($event) => toggleHover(true)),
-        onMouseleave: _cache[1] || (_cache[1] = ($event) => toggleHover(false)),
-        onMousedown: _cache[2] || (_cache[2] = ($event) => toggleActive(true)),
-        onMouseup: _cache[3] || (_cache[3] = ($event) => toggleActive(false)),
-        href: props.href,
-        target: props.target,
-        onClick: clickHandler
-      }, [
-        unref(slots).icon || props.loading ? (openBlock(), createElementBlock(
-          "div",
-          {
-            key: 0,
-            class: normalizeClass(["px-link-icon-wrapper", {
-              "px-link-icon-wrapper__last": !unref(slots).default
-            }])
-          },
-          [
-            props.loading ? (openBlock(), createBlock(unref(SpinnerThirdSolid), {
-              key: 0,
-              class: "px-link-icon px-animation__loading",
-              style: normalizeStyle({
-                fill: textColor.value
-              })
-            }, null, 8, ["style"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })
-          ],
-          2
-          /* CLASS */
-        )) : createCommentVNode("v-if", true),
-        renderSlot(_ctx.$slots, "default")
-      ], 46, _hoisted_1);
-    };
-  }
+import { V as spinner_third_solid_default } from "../vendor.js";
+import { a as rgbaColor2string, i as parseColor, t as generatePalette } from "../share/util/color.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots } from "vue";
+var _hoisted_1 = ["href", "target"];
+var link_default = /* @__PURE__ */ defineComponent({
+	name: "Link",
+	__name: "index",
+	props: {
+		disabled: { type: Boolean },
+		loading: { type: Boolean },
+		theme: null,
+		color: null,
+		href: null,
+		target: null
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		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 hoverFlag = ref(false);
+		const activeFlag = ref(false);
+		const toggleHover = (value) => {
+			hoverFlag.value = value;
+		};
+		const toggleActive = (value) => {
+			activeFlag.value = value;
+		};
+		const getTextColorWithPalette = (palette$1, disabled, loading, hoverFlag$1, activeFlag$1) => {
+			if (!palette$1) return void 0;
+			if (disabled) return rgbaColor2string(palette$1[1]);
+			if (loading) return rgbaColor2string(palette$1[5]);
+			if (activeFlag$1) return rgbaColor2string(palette$1[6]);
+			if (hoverFlag$1) return rgbaColor2string(palette$1[4]);
+			return rgbaColor2string(palette$1[5]);
+		};
+		const textColor = computed(() => {
+			return getTextColorWithPalette(palette.value, props.disabled, props.loading, hoverFlag.value, activeFlag.value);
+		});
+		const clickHandler = (e) => {
+			if (props.disabled || props.loading) e.preventDefault();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("a", {
+				class: normalizeClass(["pixelium px-link", {
+					"px-link__loading": props.loading,
+					"px-link__disabled": props.disabled,
+					"px-link__custom": palette.value,
+					[`px-link__${props.theme || "primary"}`]: true
+				}]),
+				style: normalizeStyle({ color: textColor.value }),
+				onMouseenter: _cache[0] || (_cache[0] = ($event) => toggleHover(true)),
+				onMouseleave: _cache[1] || (_cache[1] = ($event) => toggleHover(false)),
+				onMousedown: _cache[2] || (_cache[2] = ($event) => toggleActive(true)),
+				onMouseup: _cache[3] || (_cache[3] = ($event) => toggleActive(false)),
+				href: props.href,
+				target: props.target,
+				onClick: clickHandler
+			}, [unref(slots).icon || props.loading ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["px-link-icon-wrapper", { "px-link-icon-wrapper__last": !unref(slots).default }])
+			}, [props.loading ? (openBlock(), createBlock(unref(spinner_third_solid_default), {
+				key: 0,
+				class: "px-link-icon px-animation__loading",
+				style: normalizeStyle({ fill: textColor.value })
+			}, null, 8, ["style"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 46, _hoisted_1);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { link_default as t };

package/es/main/index.css

@@ -5,4 +5,8 @@
   background-color: var(--px-neutral-1);
   color: var(--px-neutral-10);
   width: 100%;
+  box-sizing: border-box;
+}
+.px-main__soft {
+  background-color: var(--px-neutral-2);
 }

package/es/main/index.d.ts

@@ -1,8 +1,11 @@
+import type { MainProps } from './type';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MainProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MainProps> & Readonly<{}>, {
+    soft: boolean;
+}, {}, {}, {}, 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 & {

package/es/main/index.js

@@ -1,17 +1,17 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, renderSlot } from "vue";
-const _hoisted_1 = { class: "pixelium px-main" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ name: "Main" },
-  __name: "index",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("main", _hoisted_1, [
-        renderSlot(_ctx.$slots, "default")
-      ]);
-    };
-  }
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+var main_default = /* @__PURE__ */ defineComponent({
+	name: "Main",
+	__name: "index",
+	props: { soft: {
+		type: Boolean,
+		default: false
+	} },
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("main", { class: normalizeClass(["pixelium px-main", { "px-main__soft": props.soft }]) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { main_default as t };

package/es/main/type.d.ts

@@ -1,3 +1,10 @@
+export type MainProps = {
+    /**
+     * @property {boolean} [soft=false]
+     * @version 0.0.3
+     */
+    soft?: boolean;
+};
 export type MainSlots = {
     /**
      * @slot default

package/es/mask/index.js

@@ -1,117 +1,96 @@
 import './css.js'
-import { defineComponent, shallowRef, ref, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeStyle, createCommentVNode } from "vue";
-import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
-import { a as canvasPreprocess } from "../share/util/plot.js";
-import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
-import { g as getGlobalThemeColor, r as rgbaColor2string } from "../share/util/color.js";
-import { C as COVER_Z_INDEX } from "../share/const/index.js";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Mask"
-  },
-  __name: "index",
-  props: {
-    color: null,
-    step: { default: 1 },
-    lineWidth: { default: 2 },
-    grid: { type: Boolean, default: true },
-    zIndex: { default: COVER_Z_INDEX }
-  },
-  setup(__props) {
-    const darkMode = useDarkMode();
-    const props = __props;
-    const canvasRef = shallowRef(null);
-    const wrapperRef = shallowRef(null);
-    const calcDefaultBackgroundColor = () => {
-      const color = getGlobalThemeColor("neutral", 8);
-      color.a = Math.floor(255 * 0.5);
-      return rgbaColor2string(color);
-    };
-    const defaultBackgroundColor = ref(calcDefaultBackgroundColor());
-    const drawGrid = () => {
-      if (!props.grid) {
-        return;
-      }
-      const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
-      if (!preprocessData) {
-        return;
-      }
-      const { ctx, width, height } = preprocessData;
-      const lineWidth = props.lineWidth;
-      ctx.clearRect(0, 0, width, height);
-      ctx.strokeStyle = props.color || defaultBackgroundColor.value;
-      ctx.lineWidth = lineWidth;
-      const step = Math.max(1, props.step);
-      for (let x = 0; x <= width; x += step + lineWidth) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-      for (let y = 0; y <= height; y += step + lineWidth) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-    };
-    onMounted(() => {
-      nextTick(() => {
-        drawGrid();
-      });
-    });
-    useResizeObserver(wrapperRef, drawGrid);
-    useWatchGlobalCssVal(() => {
-      drawGrid();
-      defaultBackgroundColor.value = calcDefaultBackgroundColor();
-    });
-    watch(
-      [
-        darkMode,
-        defaultBackgroundColor,
-        () => props.grid,
-        () => props.color,
-        () => props.step,
-        () => props.lineWidth
-      ],
-      () => {
-        defaultBackgroundColor.value = calcDefaultBackgroundColor();
-        drawGrid();
-      }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: "pixelium px-mask",
-          style: normalizeStyle({
-            zIndex: props.zIndex,
-            backgroundColor: !props.grid ? props.color || defaultBackgroundColor.value : void 0
-          }),
-          ref_key: "wrapperRef",
-          ref: wrapperRef
-        },
-        [
-          props.grid ? (openBlock(), createElementBlock(
-            "canvas",
-            {
-              key: 0,
-              ref_key: "canvasRef",
-              ref: canvasRef,
-              class: "px-mask-canvas"
-            },
-            null,
-            512
-            /* NEED_PATCH */
-          )) : createCommentVNode("v-if", true)
-        ],
-        4
-        /* STYLE */
-      );
-    };
-  }
+import { n as COVER_Z_INDEX } from "../share/const/index.js";
+import { i as canvasPreprocess } from "../share/util/plot.js";
+import { a as rgbaColor2string, n as getGlobalThemeColor } 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 { createCommentVNode, createElementBlock, defineComponent, nextTick, normalizeStyle, onMounted, openBlock, ref, shallowRef, watch } from "vue";
+var mask_default = /* @__PURE__ */ defineComponent({
+	name: "Mask",
+	__name: "index",
+	props: {
+		color: null,
+		step: { default: 1 },
+		lineWidth: { default: 2 },
+		grid: {
+			type: Boolean,
+			default: true
+		},
+		zIndex: { default: 20 }
+	},
+	setup(__props) {
+		const darkMode = useDarkMode();
+		const props = __props;
+		const canvasRef = shallowRef(null);
+		const wrapperRef = shallowRef(null);
+		const calcDefaultBackgroundColor = () => {
+			const color = getGlobalThemeColor("neutral", 8);
+			if (!color) return "none";
+			color.a = Math.floor(255 * .5);
+			return rgbaColor2string(color);
+		};
+		const defaultBackgroundColor = ref(calcDefaultBackgroundColor());
+		const drawGrid = () => {
+			if (!props.grid) return;
+			const preprocessData = canvasPreprocess(wrapperRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height } = preprocessData;
+			const lineWidth = props.lineWidth;
+			ctx.clearRect(0, 0, width, height);
+			ctx.strokeStyle = props.color || defaultBackgroundColor.value;
+			ctx.lineWidth = lineWidth;
+			const step = Math.max(1, props.step);
+			for (let x = 0; x <= width; x += step + lineWidth) {
+				ctx.beginPath();
+				ctx.moveTo(x, 0);
+				ctx.lineTo(x, height);
+				ctx.stroke();
+			}
+			for (let y = 0; y <= height; y += step + lineWidth) {
+				ctx.beginPath();
+				ctx.moveTo(0, y);
+				ctx.lineTo(width, y);
+				ctx.stroke();
+			}
+		};
+		onMounted(() => {
+			nextTick(() => {
+				drawGrid();
+			});
+		});
+		useResizeObserver(wrapperRef, drawGrid);
+		useWatchGlobalCssVal(() => {
+			drawGrid();
+			defaultBackgroundColor.value = calcDefaultBackgroundColor();
+		});
+		watch([
+			darkMode,
+			defaultBackgroundColor,
+			() => props.grid,
+			() => props.color,
+			() => props.step,
+			() => props.lineWidth
+		], () => {
+			defaultBackgroundColor.value = calcDefaultBackgroundColor();
+			drawGrid();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "pixelium px-mask",
+				style: normalizeStyle({
+					zIndex: props.zIndex,
+					backgroundColor: !props.grid ? props.color || defaultBackgroundColor.value : void 0
+				}),
+				ref_key: "wrapperRef",
+				ref: wrapperRef
+			}, [props.grid ? (openBlock(), createElementBlock("canvas", {
+				key: 0,
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				class: "px-mask-canvas"
+			}, null, 512)) : createCommentVNode("v-if", true)], 4);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { mask_default as t };

package/es/message/index.css

@@ -43,7 +43,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  margin-left: var(--px-interval-2);
+  margin-left: 8px;
 }
 .px-message-close-wrapper .px-message-icon {
   cursor: pointer;