@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/index.js

@@ -1,124 +1,145 @@
-import { _ as _sfc_main } from "./button/index.js";
-import { _ as _sfc_main$1 } from "./button-group/index.js";
-import { _ as _sfc_main$2 } from "./link/index.js";
-import { _ as _sfc_main$3 } from "./message-box/message-box-wrapped.js";
+import "./vendor.js";
+/* empty css                  */
+import "./share/util/common.js";
+import "./share/util/plot.js";
+import "./share/util/color.js";
+import "./button/draw.js";
+import "./share/hook/use-dark-mode.js";
+import "./share/hook/use-resize-observer.js";
+import "./share/util/event-bus.js";
+import "./share/hook/use-watch-global-css-var.js";
+import "./share/hook/use-index-of-children.js";
+import "./share/util/reactivity.js";
+import "./share/hook/use-transition-end.js";
+import { t as button_default } from "./button/index.js";
+/* empty css                  */
+import { t as button_group_default } from "./button-group/index.js";
+import { t as link_default } from "./link/index.js";
+/* empty css              */
+/* empty css                       */
 import "./message-box/message-box.js";
-import { m as message } from "./message-box/index.js";
-import { _ as _sfc_main$4 } from "./row/index.js";
-import { _ as _sfc_main$5 } from "./col/index.js";
-import { _ as _sfc_main$6 } from "./divider/index.js";
-import { _ as _sfc_main$7 } from "./space/index.js";
-import { _ as _sfc_main$8 } from "./grid/index.js";
-import { _ as _sfc_main$9 } from "./grid-item/index.js";
-import { _ as _sfc_main$a } from "./container/index.js";
-import { _ as _sfc_main$b } from "./main/index.js";
-import { _ as _sfc_main$c } from "./aside/index.js";
-import { _ as _sfc_main$d } from "./header/index.js";
-import { _ as _sfc_main$e } from "./footer/index.js";
-import { s } from "./share/util/theme.js";
-import { u as useThemeMode } from "./share/hook/use-theme-mode.js";
-import { _ as _sfc_main$f } from "./icon/index.js";
-import { i as inBrowser } from "./share/util/env.js";
-import { _ as _sfc_main$g } from "./input/index.js";
-import { _ as _sfc_main$h } from "./input-number/index.js";
-import { _ as _sfc_main$i } from "./textarea/index.js";
-import { _ as _sfc_main$l } from "./tag/index.js";
-import { _ as _sfc_main$j } from "./input-group/index.js";
-import { _ as _sfc_main$k } from "./input-group-label/index.js";
-import { _ as _sfc_main$m } from "./input-tag/index.js";
-import { _ as _sfc_main$n } from "./tooltip/index.js";
-import { _ as _sfc_main$o } from "./popover/index.js";
-import { _ as _sfc_main$p } from "./empty/index.js";
-import { _ as _sfc_main$q } from "./auto-complete/index.js";
-import { _ as _sfc_main$r } from "./mask/index.js";
-import { _ as _sfc_main$s } from "./spin/index.js";
-import { _ as _sfc_main$t } from "./select/index.js";
-const components = [
-  _sfc_main,
-  _sfc_main$1,
-  _sfc_main$2,
-  _sfc_main$3,
-  _sfc_main$4,
-  _sfc_main$5,
-  _sfc_main$6,
-  _sfc_main$7,
-  _sfc_main$8,
-  _sfc_main$9,
-  _sfc_main$a,
-  _sfc_main$b,
-  _sfc_main$c,
-  _sfc_main$d,
-  _sfc_main$e,
-  _sfc_main$f,
-  _sfc_main$g,
-  _sfc_main$h,
-  _sfc_main$i,
-  _sfc_main$j,
-  _sfc_main$k,
-  _sfc_main$l,
-  _sfc_main$m,
-  _sfc_main$n,
-  _sfc_main$o,
-  _sfc_main$p,
-  _sfc_main$q,
-  _sfc_main$r,
-  _sfc_main$s,
-  _sfc_main$t
-];
-const defaultPrefix = "Px";
-const install = (app, options = { prefix: defaultPrefix }) => {
-  components.forEach((component) => {
-    if (component.name) {
-      app.component(options.prefix + component.name, component);
-    }
-  });
-  if (options.attachToApp !== false) {
-    app.config.globalProperties.PixeliumVue = {
-      message,
-      useThemeMode
-    };
-  }
-  if (options.attachToWindow !== false && inBrowser()) {
-    window.$message = message;
-  }
-};
-const index = {
-  install
-};
-export {
-  _sfc_main$c as Aside,
-  _sfc_main$q as AutoComplete,
-  _sfc_main as Button,
-  _sfc_main$1 as ButtonGroup,
-  _sfc_main$5 as Col,
-  _sfc_main$a as Container,
-  _sfc_main$6 as Divider,
-  _sfc_main$p as Empty,
-  _sfc_main$e as Footer,
-  _sfc_main$8 as Grid,
-  _sfc_main$9 as GridItem,
-  _sfc_main$d as Header,
-  _sfc_main$f as Icon,
-  _sfc_main$g as Input,
-  _sfc_main$j as InputGroup,
-  _sfc_main$k as InputGroupLabel,
-  _sfc_main$h as InputNumber,
-  _sfc_main$m as InputTag,
-  _sfc_main$2 as Link,
-  _sfc_main$b as Main,
-  _sfc_main$r as Mask,
-  message as Message,
-  _sfc_main$3 as MessageBox,
-  _sfc_main$o as Popover,
-  _sfc_main$4 as Row,
-  _sfc_main$t as Select,
-  _sfc_main$7 as Space,
-  _sfc_main$s as Spin,
-  _sfc_main$l as Tag,
-  _sfc_main$i as Textarea,
-  _sfc_main$n as Tooltip,
-  index as default,
-  install,
-  s as setThemeColor,
-  useThemeMode
-};
+import { t as message_box_default } from "./message-box/index.js";
+import { t as message_box_wrapped_default } from "./message-box/message-box-wrapped.js";
+import "./share/hook/use-screen-width.js";
+import { t as row_default } from "./row/index.js";
+import { t as col_default } from "./col/index.js";
+import { t as divider_default } from "./divider/index.js";
+import "./share/util/render.js";
+import { t as space_default } from "./space/index.js";
+import { t as grid_default } from "./grid/index.js";
+import { t as grid_item_default } from "./grid-item/index.js";
+import { t as container_default } from "./container/index.js";
+import { t as main_default } from "./main/index.js";
+import { t as aside_default } from "./aside/index.js";
+import { t as header_default } from "./header/index.js";
+import { t as footer_default } from "./footer/index.js";
+import "./share/util/console.js";
+import { i as setThemeColor, n as resetThemeColor, r as setPixelSize, t as resetPixelSize } from "./share/util/theme.js";
+import { t as useThemeMode } from "./share/hook/use-theme-mode.js";
+import { t as icon_default } from "./icon/index.js";
+import "./input/draw.js";
+import "./share/hook/use-composition.js";
+import "./share/hook/use-controlled-mode.js";
+import { t as input_default } from "./input/index.js";
+import "./input-number/draw.js";
+import { t as input_number_default } from "./input-number/index.js";
+import "./textarea/draw.js";
+import "./share/hook/use-textarea-height.js";
+import { t as textarea_default } from "./textarea/index.js";
+import "./tag/draw.js";
+import { t as tag_default } from "./tag/index.js";
+import { t as input_group_default } from "./input-group/index.js";
+import "./input-group-label/draw.js";
+import { t as input_group_label_default } from "./input-group-label/index.js";
+import "./input-tag/draw.js";
+import "./popup-content/draw.js";
+/* empty css                    */
+/* empty css                    */
+import "./share/hook/use-click-outside-listener.js";
+import { i as imageDataToDataURL } from "./share/util/dom.js";
+/* empty css                    */
+import "./share/hook/use-cancelable-delay.js";
+/* empty css            */
+import { t as popover_default } from "./popover/index.js";
+import { t as input_tag_default } from "./input-tag/index.js";
+import { t as tooltip_default } from "./tooltip/index.js";
+import { t as empty_default } from "./empty/index.js";
+import "./auto-complete/draw.js";
+import { t as virtual_list_default } from "./virtual-list/index.js";
+/* empty css                  */
+import { t as auto_complete_default } from "./auto-complete/index.js";
+import { t as mask_default } from "./mask/index.js";
+import { t as spin_default } from "./spin/index.js";
+import "./select/draw.js";
+import { t as select_default } from "./select/index.js";
+import "./share/hook/use-lazy-load.js";
+import "./share/hook/use-window-resize-listener.js";
+import { t as image_default } from "./image/index.js";
+import "./avatar/draw.js";
+import { t as avatar_default } from "./avatar/index.js";
+import { t as form_default } from "./form/index.js";
+import { t as form_item_default } from "./form-item/index.js";
+import { t as pixelateImage } from "./pixelate/pixel.js";
+import "./switch/draw.js";
+import "./share/hook/use-smooth-transition.js";
+import { t as switch_default } from "./switch/index.js";
+import "./slider/draw.js";
+import "./slider/util.js";
+import { t as slider_default } from "./slider/index.js";
+import "./radio/draw.js";
+import { t as radio_default } from "./radio/index.js";
+/* empty css            */
+import { t as radio_group_default } from "./radio-group/index.js";
+import "./checkbox/draw.js";
+import { t as checkbox_default } from "./checkbox/index.js";
+import { t as checkbox_group_default } from "./checkbox-group/index.js";
+import { t as text_outline_default } from "./text-outline/index.js";
+import { t as useForm } from "./form/use-form.js";
+import { n as lib_default, t as install } from "./entry.js";
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o$1) {
+		return typeof o$1;
+	} : function(o$1) {
+		return o$1 && "function" == typeof Symbol && o$1.constructor === Symbol && o$1 !== Symbol.prototype ? "symbol" : typeof o$1;
+	}, _typeof(o);
+}
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+var jsContent = "(function() {\n	const Q = /\\.|\\[(\\d+)\\]/;\n	function O(n) {\n		return n.split(Q).filter(Boolean);\n	}\n	function d(n) {\n		return n !== null && (typeof n == \"object\" || typeof n == \"function\");\n	}\n	function f(n, e, t) {\n		const s = O(e), o = s.length;\n		let i = n;\n		for (let c = 0; c < o; c++) if (d(i)) i = i[s[c]];\n		else return t;\n		return t ?? i;\n	}\n	function y(n) {\n		return typeof n == \"string\" || n instanceof String;\n	}\n	function Ee(n, e) {\n		let t = Infinity, s = n[0];\n		const o = n.length;\n		for (let i = 0; i < o; i++) {\n			const c = e !== void 0 ? y(e) ? f(n[i], e) : e(n[i], i, n) : n[i];\n			c < t && (t = c, s = n[i]);\n		}\n		return s;\n	}\n	Math.PI, Math.PI * 3 / 2, Math.PI * 3 / 2, Math.PI * 2, Math.PI / 2, Math.PI / 2, Math.PI;\n	1 / Math.sqrt(3);\n	function createLRU(max) {\n		if (!Number.isInteger(max) || max <= 0) throw new RangeError(\"max must be a positive integer\");\n		const cache = /* @__PURE__ */ new Map();\n		return {\n			get(key) {\n				const val = cache.get(key);\n				if (val === void 0) return void 0;\n				cache.delete(key);\n				cache.set(key, val);\n				return val;\n			},\n			set(key, value) {\n				if (cache.has(key)) cache.delete(key);\n				else if (cache.size >= max) cache.delete(cache.keys().next().value);\n				cache.set(key, value);\n			},\n			delete(key) {\n				return cache.delete(key);\n			},\n			clear() {\n				cache.clear();\n			},\n			has(key) {\n				return cache.has(key);\n			},\n			get size() {\n				return cache.size;\n			}\n		};\n	}\n	createLRU(120);\n	createLRU(60);\n	const blendWithBackground = (rgba, bg) => {\n		const alpha = rgba.a / 255;\n		return {\n			r: (rgba.r * alpha + bg.r * (1 - alpha)) / 255,\n			g: (rgba.g * alpha + bg.g * (1 - alpha)) / 255,\n			b: (rgba.b * alpha + bg.b * (1 - alpha)) / 255\n		};\n	};\n	function rgbaEuclideanDistance(color1, color2, background = {\n		r: 255,\n		g: 255,\n		b: 255\n	}) {\n		const blended1 = blendWithBackground(color1, background);\n		const blended2 = blendWithBackground(color2, background);\n		const deltaR = blended1.r - blended2.r;\n		const deltaG = blended1.g - blended2.g;\n		const deltaB = blended1.b - blended2.b;\n		return Math.sqrt(deltaR ** 2 + deltaG ** 2 + deltaB ** 2);\n	}\n	self.onmessage = async (e) => {\n		const { imageData, pixelSize, palette, background } = e.data;\n		const { width, height, data } = imageData;\n		const resultData = new ImageData(width, height);\n		const size = Math.max(1, Math.floor(pixelSize));\n		for (let y$1 = 0; y$1 < height; y$1 += size) for (let x = 0; x < width; x += size) {\n			let r = 0, g = 0, b = 0, a = 0;\n			let count = 0;\n			for (let py = y$1; py < Math.min(y$1 + size, height); py++) for (let px = x; px < Math.min(x + size, width); px++) {\n				const index = (py * width + px) * 4;\n				const pixelAlpha = data[index + 3];\n				if (pixelAlpha === 0) continue;\n				r += data[index];\n				g += data[index + 1];\n				b += data[index + 2];\n				a += pixelAlpha;\n				count++;\n			}\n			if (count === 0) continue;\n			r = Math.floor(r / count);\n			g = Math.floor(g / count);\n			b = Math.floor(b / count);\n			a = Math.floor(a / count);\n			let finalColor;\n			if (palette && palette.length > 0) finalColor = Ee(palette, (item) => {\n				return rgbaEuclideanDistance(item, {\n					r,\n					g,\n					b,\n					a\n				}, background);\n			});\n			else finalColor = {\n				r,\n				g,\n				b,\n				a\n			};\n			for (let py = y$1; py < Math.min(y$1 + size, height); py++) for (let px = x; px < Math.min(x + size, width); px++) {\n				const index = (py * width + px) * 4;\n				resultData.data[index] = finalColor.r;\n				resultData.data[index + 1] = finalColor.g;\n				resultData.data[index + 2] = finalColor.b;\n				resultData.data[index + 3] = finalColor.a;\n			}\n		}\n		self.postMessage({\n			type: \"complete\",\n			imageData: resultData\n		});\n	};\n})();\n";
+var blob = typeof self !== "undefined" && self.Blob && new Blob(["(self.URL || self.webkitURL).revokeObjectURL(self.location.href);", jsContent], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper(options) {
+	let objURL;
+	try {
+		objURL = blob && (self.URL || self.webkitURL).createObjectURL(blob);
+		if (!objURL) throw "";
+		const worker = new Worker(objURL, { name: options === null || options === void 0 ? void 0 : options.name });
+		worker.addEventListener("error", () => {
+			(self.URL || self.webkitURL).revokeObjectURL(objURL);
+		});
+		return worker;
+	} catch (e) {
+		return new Worker("data:text/javascript;charset=utf-8," + encodeURIComponent(jsContent), { name: options === null || options === void 0 ? void 0 : options.name });
+	}
+}
+export { aside_default as Aside, auto_complete_default as AutoComplete, avatar_default as Avatar, button_default as Button, button_group_default as ButtonGroup, checkbox_default as Checkbox, checkbox_group_default as CheckboxGroup, col_default as Col, container_default as Container, divider_default as Divider, empty_default as Empty, footer_default as Footer, form_default as Form, form_item_default as FormItem, grid_default as Grid, grid_item_default as GridItem, header_default as Header, icon_default as Icon, image_default as Image, input_default as Input, input_group_default as InputGroup, input_group_label_default as InputGroupLabel, input_number_default as InputNumber, input_tag_default as InputTag, link_default as Link, main_default as Main, mask_default as Mask, message_box_default as Message, message_box_wrapped_default as MessageBox, popover_default as Popover, radio_default as Radio, radio_group_default as RadioGroup, row_default as Row, select_default as Select, slider_default as Slider, space_default as Space, spin_default as Spin, switch_default as Switch, tag_default as Tag, text_outline_default as TextOutline, textarea_default as Textarea, tooltip_default as Tooltip, virtual_list_default as VirtualList, lib_default as default, imageDataToDataURL, install, _defineProperty as n, pixelateImage, resetPixelSize, resetThemeColor, setPixelSize, setThemeColor, WorkerWrapper as t, useForm, useThemeMode };

package/es/input/draw.d.ts

@@ -1,2 +1,2 @@
 import type { RgbaColor } from '../share/type';
-export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, inner: boolean, first: boolean, last: boolean) => void;
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, inner: boolean, first: boolean, last: boolean, nextIsTextButton: boolean) => void;

package/es/input/draw.js

@@ -1,52 +1,27 @@
-import { d as drawCircle } from "../share/util/plot.js";
-import { r as rgbaColor2string } from "../share/util/color.js";
-const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, inner, first, last) => {
-  ctx.fillStyle = rgbaColor2string(borderColor);
-  for (let i = 0; i < 4; i++) {
-    if (borderRadius[i] <= pixelSize) {
-      continue;
-    }
-    if (i === 1 || i === 2 ? inner && last || !inner : true) {
-      drawCircle(
-        ctx,
-        center[i][0],
-        center[i][1],
-        borderRadius[i],
-        rad[i][0],
-        rad[i][1],
-        pixelSize
-      );
-    }
-  }
-  if (center[1][0] + pixelSize > center[0][0]) {
-    ctx.fillRect(center[0][0], 0, center[1][0] - center[0][0] + pixelSize, pixelSize);
-  }
-  if (center[2][1] + pixelSize > center[1][1] && (inner && last || !inner)) {
-    ctx.fillRect(
-      width - pixelSize,
-      center[1][1],
-      pixelSize,
-      center[2][1] - center[1][1] + pixelSize
-    );
-  }
-  if (center[3][0] < center[2][0] + pixelSize) {
-    ctx.fillRect(
-      center[3][0],
-      height - pixelSize,
-      center[2][0] - center[3][0] + pixelSize,
-      pixelSize
-    );
-  }
-  if (center[3][1] + pixelSize > center[0][1] && !(inner && !first)) {
-    ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
-  }
-  if (inner && !first) {
-    ctx.fillRect(pixelSize / 2, 0, pixelSize / 2, height);
-  }
-  if (inner && !last) {
-    ctx.fillRect(width - 2 * pixelSize - 1, 0, pixelSize, height);
-  }
-};
-export {
-  drawBorder as d
+import { a as drawCircle } from "../share/util/plot.js";
+import { a as rgbaColor2string } from "../share/util/color.js";
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, inner, first, last, nextIsTextButton) => {
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	for (let i = 0; i < 4; i++) if (borderRadius[i] > pixelSize) {
+		if (i === 1 || i === 2 ? inner && last || !inner : true) drawCircle(ctx, center[i][0], center[i][1], borderRadius[i], rad[i][0], rad[i][1], pixelSize);
+	}
+	if (center[1][0] + pixelSize > center[0][0]) {
+		let length = center[1][0] - center[0][0] + pixelSize;
+		if (inner && !last) length -= pixelSize;
+		ctx.fillRect(center[0][0], 0, length, pixelSize);
+	}
+	if (center[2][1] + pixelSize > center[1][1] && (inner && last || !inner)) ctx.fillRect(width - pixelSize, center[1][1], pixelSize, center[2][1] - center[1][1] + pixelSize);
+	if (center[3][0] < center[2][0] + pixelSize) {
+		let length = center[2][0] - center[3][0] + pixelSize;
+		if (inner && !last) length -= pixelSize;
+		ctx.fillRect(center[3][0], height - pixelSize, length, pixelSize);
+	}
+	if ((!inner || first) && center[3][1] + pixelSize > center[0][1]) ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
+	if (inner && !first) ctx.fillRect(pixelSize / 2, 0, pixelSize / 2, height);
+	if (inner && !last) {
+		let length = pixelSize;
+		if (nextIsTextButton) length /= 2;
+		ctx.fillRect(width - 2 * pixelSize - 1, 0, length, height);
+	}
 };
+export { drawBorder as t };

package/es/input/index.css

@@ -1,13 +1,5 @@
-div.px-input {
-  font-size: var(--text-size);
-}
 .px-input {
   --input-size: var(--px-medium-size);
-  --px-medium-padding-x: var(--px-interval-2);
-  --px-large-padding-x: var(--px-interval-3);
-  --px-small-padding-x: var(--px-interval-2);
-  --padding-x-size: var(--px-medium-padding-x);
-  --text-size: var(--px-medium-font-size);
   z-index: 0;
   position: relative;
   background-color: transparent;
@@ -16,16 +8,10 @@ div.px-input {
   border-style: solid;
   color: var(--px-neutral-10);
   display: flex;
-  padding: 0 var(--padding-x-size);
   box-sizing: border-box;
   height: var(--input-size);
   cursor: text;
-}
-.px-input__inner {
-  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
-}
-.px-input__inner:last-child {
-  padding-right: var(--padding-x-size);
+  transition: 0.25s all;
 }
 .px-input-inner {
   height: 100%;
@@ -33,8 +19,7 @@ div.px-input {
   background-color: transparent;
   box-sizing: border-box;
   width: 100%;
-  font-size: var(--text-size);
-  line-height: var(--px-line-height);
+  line-height: 1.5;
   font-family: var(--px-font);
   padding: 0;
 }
@@ -49,15 +34,92 @@ div.px-input {
   color: var(--px-neutral-8);
   opacity: 1;
 }
+.px-input.px-input__small {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 12px;
+}
+.px-input.px-input__small .px-input-inner {
+  font-size: 12px;
+}
+.px-input.px-input__small.px-input__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
+}
+.px-input.px-input__small.px-input__inner:last-child {
+  padding-right: 8px;
+}
+.px-input.px-input__small .px-input-close-wrapper .px-input-icon-placeholder {
+  width: 12px;
+  height: 12px;
+}
+.px-input.px-input__small .px-input-close-wrapper .px-input-icon {
+  width: 12px;
+  height: 12px;
+}
+.px-input.px-input__small .px-input-password-wrapper .px-input-icon,
+.px-input.px-input__small .px-input-loading-wrapper .px-input-icon {
+  width: 12px;
+  height: 12px;
+}
+.px-input.px-input__medium {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 14px;
+}
+.px-input.px-input__medium .px-input-inner {
+  font-size: 14px;
+}
+.px-input.px-input__medium.px-input__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
+}
+.px-input.px-input__medium.px-input__inner:last-child {
+  padding-right: 8px;
+}
+.px-input.px-input__medium .px-input-close-wrapper .px-input-icon-placeholder {
+  width: 14px;
+  height: 14px;
+}
+.px-input.px-input__medium .px-input-close-wrapper .px-input-icon {
+  width: 14px;
+  height: 14px;
+}
+.px-input.px-input__medium .px-input-password-wrapper .px-input-icon,
+.px-input.px-input__medium .px-input-loading-wrapper .px-input-icon {
+  width: 14px;
+  height: 14px;
+}
+.px-input.px-input__large {
+  padding-right: 12px;
+  padding-left: 12px;
+  font-size: 15px;
+}
+.px-input.px-input__large .px-input-inner {
+  font-size: 15px;
+}
+.px-input.px-input__large.px-input__inner {
+  padding-right: calc(12px + 1px + 1 * var(--px-bit));
+}
+.px-input.px-input__large.px-input__inner:last-child {
+  padding-right: 12px;
+}
+.px-input.px-input__large .px-input-close-wrapper .px-input-icon-placeholder {
+  width: 15px;
+  height: 15px;
+}
+.px-input.px-input__large .px-input-close-wrapper .px-input-icon {
+  width: 15px;
+  height: 15px;
+}
+.px-input.px-input__large .px-input-password-wrapper .px-input-icon,
+.px-input.px-input__large .px-input-loading-wrapper .px-input-icon {
+  width: 15px;
+  height: 15px;
+}
 .px-input__large {
-  --padding-x-size: var(--px-large-padding-x);
-  --text-size: var(--px-large-font-size);
   --input-size: var(--px-large-size);
 }
 .px-input__small {
-  --padding-x-size: var(--px-small-padding-x);
   --input-size: var(--px-small-size);
-  --text-size: var(--px-small-font-size);
 }
 .px-input__disabled {
   cursor: not-allowed;
@@ -77,22 +139,16 @@ div.px-input {
   align-items: center;
 }
 .px-input-prefix-wrapper {
-  margin-right: var(--px-interval-2);
+  margin-right: 8px;
 }
 .px-input-count-wrapper,
 .px-input-suffix-wrapper,
 .px-input-loading-wrapper,
 .px-input-close-wrapper,
 .px-input-password-wrapper {
-  margin-left: var(--px-interval-2);
-}
-.px-input-close-wrapper .px-input-icon-placeholder {
-  width: var(--text-size);
-  height: var(--text-size);
+  margin-left: 8px;
 }
 .px-input-close-wrapper .px-input-icon {
-  width: var(--text-size);
-  height: var(--text-size);
   cursor: pointer;
   fill: var(--px-neutral-8);
   transition: 0.25s;
@@ -104,8 +160,6 @@ div.px-input {
   fill: var(--px-neutral-9);
 }
 .px-input-password-wrapper .px-input-icon {
-  width: var(--text-size);
-  height: var(--text-size);
   cursor: pointer;
   fill: var(--px-neutral-8);
   transition: 0.25s;
@@ -117,8 +171,6 @@ div.px-input {
   fill: var(--px-neutral-9);
 }
 .px-input-loading-wrapper .px-input-icon {
-  width: var(--text-size);
-  height: var(--text-size);
   fill: var(--px-primary-6);
 }
 .px-input-prefix-wrapper,

package/es/input/index.d.ts

@@ -1,7 +1,7 @@
-import type { InputProps } from './type';
+import type { InputExpose, InputProps } from './type';
 declare var __VLS_1: {}, __VLS_27: {
-    value: any;
-    count: any;
+    value: string | import("parsnip-kit").Nullish;
+    count: number;
     maxLength: number | undefined;
 }, __VLS_34: {};
 type __VLS_Slots = {} & {
@@ -11,32 +11,25 @@ type __VLS_Slots = {} & {
 } & {
     suffix?: (props: typeof __VLS_34) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<InputProps, {
-    focus: () => void;
-    blur: () => void;
-    clear: () => Promise<void>;
-    select: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    input: (value: string, e: Event) => any;
-    change: (value: string, e?: Event | undefined) => any;
+declare const __VLS_component: import("vue").DefineComponent<InputProps, InputExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: (value: string) => any;
+    change: (value: string, e?: Event | undefined) => any;
     blur: (e: FocusEvent) => any;
+    input: (value: string, e: Event) => any;
     focus: (e: FocusEvent) => any;
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
-    onInput?: ((value: string, e: Event) => any) | undefined;
-    onChange?: ((value: string, e?: Event | undefined) => any) | undefined;
     onClear?: ((value: string) => any) | undefined;
+    onChange?: ((value: string, e?: Event | undefined) => any) | undefined;
     onBlur?: ((e: FocusEvent) => any) | undefined;
+    onInput?: ((value: string, e: Event) => any) | undefined;
     onFocus?: ((e: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    shape: "default" | "round";
-    size: "medium" | "large" | "small";
     disabled: boolean;
+    readonly: boolean;
     loading: boolean;
     password: boolean;
-    readonly: boolean;
     clearable: boolean;
     showCount: boolean;
     status: "success" | "warning" | "error" | "normal";