@pixelium/web-vue 0.0.2 → 0.0.3-beta

package/es/aside/index.js

@@ -1,153 +1,48 @@
 import './css.js'
-import { defineComponent, getCurrentInstance, ref, inject, onMounted, onBeforeUnmount, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot } from "vue";
-import { _ as _sfc_main$1 } from "../container/index.js";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-const Q = /\.|\[(\d+)\]/;
-function M(n) {
-  return n.split(Q).filter(Boolean);
-}
-function U(n) {
-  return n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-function d(n) {
-  return n !== null && (typeof n == "object" || typeof n == "function");
-}
-function f(n, e, t) {
-  const s = M(e), o = s.length;
-  let c = n;
-  for (let i = 0; i < o; i++)
-    if (d(c))
-      c = c[s[i]];
-    else
-      return t;
-  return t ?? c;
-}
-function m(n) {
-  return typeof n == "function";
-}
-function Cn(n, e, t = {}) {
-  const { start: s = "{", end: o = "}" } = t, c = new RegExp(
-    `${U(s)}(.*?)${U(o)}`,
-    "g"
-  );
-  return n.replace(c, (i, r) => {
-    const l = m(e) ? e(r) : f(e, r);
-    return l ?? i;
-  });
-}
-function p(n) {
-  return typeof n == "string" || n instanceof String;
-}
-function Pn(n) {
-  return n === null;
-}
-function k(n) {
-  return typeof n == "number" || n instanceof Number;
-}
-function en(n) {
-  return n === void 0;
-}
-function $(n) {
-  return Array.isArray(n);
-}
-function R(n) {
-  return k(n) && (typeof n == "number" ? n === 1 / 0 || n === -1 / 0 : n.valueOf() === 1 / 0 || n.valueOf() === -1 / 0);
-}
-function z(n) {
-  return k(n) && (typeof n == "number" ? Number.isNaN(n) : Number.isNaN(n.valueOf()));
-}
-function N(n) {
-  return n == null;
-}
-function Gn(...n) {
-  return n.reduce((e, t) => {
-    if (N(t))
-      return e;
-    const s = Object.keys(t);
-    for (const o of s) {
-      const c = e[o], i = t[o];
-      (N(c) || !N(i)) && (e[o] = i);
-    }
-    return e;
-  }, {});
-}
-function Ne(n, e, t) {
-  let s, o;
-  const { immediate: c = false, maxWait: i } = t || {};
-  return function(...l) {
-    i !== void 0 && !o && (o = setTimeout(() => {
-      o = void 0, n.apply(this, l);
-    }, i)), !s && c && n.apply(this, l), s && clearTimeout(s), s = setTimeout(() => {
-      o && (clearTimeout(o), o = void 0), n.apply(this, l);
-    }, e);
-  };
-}
-// @ts-ignore
-typeof process < "u" && process.env.NODE_ENV !== "production";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ name: "Aside" },
-  __name: "index",
-  props: {
-    width: null,
-    bordered: { type: Boolean, default: false },
-    side: { default: "left" },
-    dark: { type: Boolean, default: false }
-  },
-  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 asideCounter = inner.value ? inject("px-container-provide") : void 0;
-    onMounted(() => {
-      if (asideCounter) {
-        asideCounter.value += 1;
-      }
-    });
-    onBeforeUnmount(() => {
-      if (asideCounter) {
-        asideCounter.value -= 1;
-      }
-    });
-    const props = __props;
-    const darkMode = useDarkMode();
-    const width = computed(() => {
-      return N(props.width) ? void 0 : k(props.width) ? `${props.width}px` : props.width;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "aside",
-        {
-          class: normalizeClass(["pixelium px-aside", {
-            "px-aside__dark": !unref(darkMode) && !!props.dark,
-            "px-aside__bordered": !!props.bordered,
-            [`px-aside__${props.side}`]: true
-          }]),
-          style: normalizeStyle({
-            width: width.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 { r as CONTAINER_PROVIDE } from "../share/const/provide-key.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, inject, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref } from "vue";
+var aside_default = /* @__PURE__ */ defineComponent({
+	name: "Aside",
+	__name: "index",
+	props: {
+		width: null,
+		bordered: {
+			type: Boolean,
+			default: false
+		},
+		side: { default: "left" },
+		dark: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		var _instance$parent;
+		const instance = getCurrentInstance();
+		const asideCounter = ref((instance === null || instance === void 0 || (_instance$parent = instance.parent) === null || _instance$parent === void 0 ? void 0 : _instance$parent.type.name) === "Container").value ? inject(CONTAINER_PROVIDE) : void 0;
+		onMounted(() => {
+			if (asideCounter) asideCounter.value += 1;
+		});
+		onBeforeUnmount(() => {
+			if (asideCounter) asideCounter.value -= 1;
+		});
+		const props = __props;
+		const darkMode = useDarkMode();
+		const width = computed(() => {
+			return E(props.width) ? void 0 : A(props.width) ? `${props.width}px` : props.width;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("aside", {
+				class: normalizeClass(["pixelium px-aside", {
+					"px-aside__dark": !unref(darkMode) && !!props.dark,
+					"px-aside__bordered": !!props.bordered,
+					[`px-aside__${props.side}`]: true
+				}]),
+				style: normalizeStyle({ width: width.value })
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
 });
-export {
-  $,
-  Cn as C,
-  Gn as G,
-  N,
-  Pn as P,
-  R,
-  _sfc_main as _,
-  Ne as a,
-  d,
-  en as e,
-  k,
-  m,
-  p,
-  z
-};
+export { aside_default as t };

package/es/auto-complete/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/auto-complete/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/auto-complete/index.css

@@ -1,13 +1,5 @@
-div.px-auto-complete {
-  font-size: var(--text-size);
-}
 .px-auto-complete {
   --auto-complete-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,32 @@ div.px-auto-complete {
   border-style: solid;
   color: var(--px-neutral-10);
   display: flex;
-  padding: 0 var(--padding-x-size);
+  padding: 0 8px;
   box-sizing: border-box;
   height: var(--auto-complete-size);
   cursor: text;
+  transition: 0.25s all;
+}
+.px-auto-complete.px-auto-complete {
+  font-size: 14px;
+}
+.px-auto-complete.px-auto-complete__small.px-auto-complete__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
+}
+.px-auto-complete.px-auto-complete__small.px-auto-complete__inner:last-child {
+  padding-right: 8px;
 }
-.px-auto-complete__inner {
-  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
+.px-auto-complete.px-auto-complete__medium.px-auto-complete__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
 }
-.px-auto-complete__inner:last-child {
-  padding-right: var(--padding-x-size);
+.px-auto-complete.px-auto-complete__medium.px-auto-complete__inner:last-child {
+  padding-right: 8px;
+}
+.px-auto-complete.px-auto-complete__large.px-auto-complete__inner {
+  padding-right: calc(12px + 1px + 1 * var(--px-bit));
+}
+.px-auto-complete.px-auto-complete__large.px-auto-complete__inner:last-child {
+  padding-right: 12px;
 }
 .px-auto-complete-inner {
   height: 100%;
@@ -33,8 +41,7 @@ div.px-auto-complete {
   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;
 }
@@ -50,14 +57,14 @@ div.px-auto-complete {
   opacity: 1;
 }
 .px-auto-complete__large {
-  --padding-x-size: var(--px-large-padding-x);
-  --text-size: var(--px-large-font-size);
+  padding: 0 12px;
+  font-size: 15px;
   --auto-complete-size: var(--px-large-size);
 }
 .px-auto-complete__small {
-  --padding-x-size: var(--px-small-padding-x);
+  padding: 0 8px;
+  font-size: 12px;
   --auto-complete-size: var(--px-small-size);
-  --text-size: var(--px-small-font-size);
 }
 .px-auto-complete__disabled {
   cursor: not-allowed;
@@ -75,33 +82,86 @@ div.px-auto-complete {
   align-items: center;
 }
 .px-auto-complete-prefix-wrapper {
-  margin-right: var(--px-interval-2);
+  margin-right: 8px;
 }
 .px-auto-complete-suffix-wrapper,
 .px-auto-complete-loading-wrapper,
 .px-auto-complete-close-wrapper {
-  margin-left: var(--px-interval-2);
+  margin-left: 8px;
+}
+.px-auto-complete.px-auto-complete__small .px-auto-complete-inner {
+  font-size: 12px;
+}
+.px-auto-complete.px-auto-complete__small .px-auto-complete-close-wrapper .px-auto-complete-icon-placeholder {
+  width: 12px;
+  height: 12px;
+}
+.px-auto-complete.px-auto-complete__small .px-auto-complete-close-wrapper .px-auto-complete-icon {
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  fill: var(--px-neutral-8);
+  transition: 0.25s;
+}
+.px-auto-complete.px-auto-complete__small .px-auto-complete-close-wrapper .px-auto-complete-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-auto-complete.px-auto-complete__small .px-auto-complete-close-wrapper .px-auto-complete-icon:active {
+  fill: var(--px-neutral-9);
+}
+.px-auto-complete.px-auto-complete__small .px-auto-complete-loading-wrapper .px-auto-complete-icon {
+  width: 12px;
+  height: 12px;
+  fill: var(--px-primary-6);
+}
+.px-auto-complete.px-auto-complete__medium .px-auto-complete-inner {
+  font-size: 14px;
+}
+.px-auto-complete.px-auto-complete__medium .px-auto-complete-close-wrapper .px-auto-complete-icon-placeholder {
+  width: 14px;
+  height: 14px;
+}
+.px-auto-complete.px-auto-complete__medium .px-auto-complete-close-wrapper .px-auto-complete-icon {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  fill: var(--px-neutral-8);
+  transition: 0.25s;
+}
+.px-auto-complete.px-auto-complete__medium .px-auto-complete-close-wrapper .px-auto-complete-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-auto-complete.px-auto-complete__medium .px-auto-complete-close-wrapper .px-auto-complete-icon:active {
+  fill: var(--px-neutral-9);
+}
+.px-auto-complete.px-auto-complete__medium .px-auto-complete-loading-wrapper .px-auto-complete-icon {
+  width: 14px;
+  height: 14px;
+  fill: var(--px-primary-6);
+}
+.px-auto-complete.px-auto-complete__large .px-auto-complete-inner {
+  font-size: 15px;
 }
-.px-auto-complete-close-wrapper .px-auto-complete-icon-placeholder {
-  width: var(--text-size);
-  height: var(--text-size);
+.px-auto-complete.px-auto-complete__large .px-auto-complete-close-wrapper .px-auto-complete-icon-placeholder {
+  width: 15px;
+  height: 15px;
 }
-.px-auto-complete-close-wrapper .px-auto-complete-icon {
-  width: var(--text-size);
-  height: var(--text-size);
+.px-auto-complete.px-auto-complete__large .px-auto-complete-close-wrapper .px-auto-complete-icon {
+  width: 15px;
+  height: 15px;
   cursor: pointer;
   fill: var(--px-neutral-8);
   transition: 0.25s;
 }
-.px-auto-complete-close-wrapper .px-auto-complete-icon:hover {
+.px-auto-complete.px-auto-complete__large .px-auto-complete-close-wrapper .px-auto-complete-icon:hover {
   fill: var(--px-neutral-7);
 }
-.px-auto-complete-close-wrapper .px-auto-complete-icon:active {
+.px-auto-complete.px-auto-complete__large .px-auto-complete-close-wrapper .px-auto-complete-icon:active {
   fill: var(--px-neutral-9);
 }
-.px-auto-complete-loading-wrapper .px-auto-complete-icon {
-  width: var(--text-size);
-  height: var(--text-size);
+.px-auto-complete.px-auto-complete__large .px-auto-complete-loading-wrapper .px-auto-complete-icon {
+  width: 15px;
+  height: 15px;
   fill: var(--px-primary-6);
 }
 .px-auto-complete-prefix-wrapper,

package/es/auto-complete/index.d.ts

@@ -1,35 +1,32 @@
-import type { AutoCompleteGroupOption, AutoCompleteOption, AutoCompleteProps } from './type';
-declare const _default: import("vue").DefineComponent<AutoCompleteProps, {
-    focus: () => void;
-    blur: () => void;
-    clear: () => Promise<void>;
-    select: () => void;
+import type { AutoCompleteExpose, AutoCompleteGroupOption, AutoCompleteOption, AutoCompleteProps } from './type';
+declare const _default: import("vue").DefineComponent<AutoCompleteProps, AutoCompleteExpose & {
+    getElementRendered: () => HTMLDivElement | null;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    input: (value: string, e: Event) => any;
-    select: (value: string, option: string | AutoCompleteOption, e: MouseEvent) => any;
-    change: (value: string, e?: Event | undefined) => any;
     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;
+    select: (value: string, option: string | AutoCompleteOption, e: MouseEvent) => any;
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<AutoCompleteProps> & Readonly<{
-    onInput?: ((value: string, e: Event) => any) | undefined;
-    onSelect?: ((value: string, option: string | AutoCompleteOption, e: MouseEvent) => 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;
+    onSelect?: ((value: string, option: string | AutoCompleteOption, e: MouseEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    shape: "default" | "round";
-    size: "medium" | "large" | "small";
     disabled: boolean;
-    loading: boolean;
     readonly: boolean;
+    loading: boolean;
     clearable: boolean;
     status: "success" | "warning" | "error" | "normal";
     options: (string | AutoCompleteOption | AutoCompleteGroupOption)[];
+    virtualScroll: boolean;
     showPopoverEmpty: boolean;
     append: boolean;
+    optionsDestroyOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;