@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/index.css

@@ -470,17 +470,28 @@
 
 /* lib/share/style/layout.css */
 :root {
-  --px-large-size: 40px;
-  --px-medium-size: 32px;
-  --px-small-size: 24px;
   --px-bit: 4px;
+  --px-large-base-size: 36px;
+  --px-medium-base-size: 28px;
+  --px-small-base-size: 20px;
+  --px-large-size: calc(var(--px-large-base-size) + var(--px-bit) * 2);
+  --px-medium-size: calc(var(--px-medium-base-size) + var(--px-bit) * 2);
+  --px-small-size: calc(var(--px-small-base-size) + var(--px-bit) * 2);
   --px-line-height: 1.5;
   --px-medium-font-size: 14px;
-  --px-large-font-size: 16px;
+  --px-large-font-size: 15px;
   --px-small-font-size: 12px;
-  --px-medium-interval: 8px;
-  --px-large-interval: 12px;
-  --px-small-interval: 4px;
+  --px-interval-1: 4px;
+  --px-interval-2: 8px;
+  --px-interval-3: 12px;
+  --px-interval-4: 16px;
+  --px-interval-5: 20px;
+  --px-interval-6: 24px;
+  --px-interval-7: 28px;
+  --px-interval-8: 32px;
+  --px-interval-9: 36px;
+  --px-interval-10: 40px;
+  --px-font: "Fusion Pixel Zh_hans", sans-serif;
 }
 
 /* lib/share/style/animation.css */
@@ -492,10 +503,13 @@
     transform: rotate(-360deg);
   }
 }
+.px-animation__loading {
+  animation: px-icon-spin 1s linear infinite;
+}
 
 /* lib/share/style/index.css */
 .pixelium {
-  font-family: "Fusion Pixel Zh_hans", sans-serif;
+  font-family: var(--px-font);
   line-height: var(--px-line-height);
   font-size: var(--px-medium-font-size);
 }

package/es/index.d.ts

@@ -18,13 +18,27 @@ import Footer from './footer/index.ts';
 import { setThemeColor } from './share/util/theme.ts';
 import { useThemeMode } from './share/hook/use-theme-mode.ts';
 import Icon from './icon/index.ts';
+import Input from './input/index.ts';
+import InputNumber from './input-number/index.ts';
+import Textarea from './textarea/index.ts';
+import Tag from './tag/index.ts';
+import InputGroup from './input-group/index.ts';
+import InputGroupLabel from './input-group-label/index.ts';
+import InputTag from './input-tag/index.ts';
+import Tooltip from './tooltip/index.ts';
+import Popover from './popover/index.ts';
+import Empty from './empty/index.ts';
+import AutoComplete from './auto-complete/index.ts';
+import Mask from './mask/index.ts';
+import Spin from './spin/index.ts';
+import Select from './select/index.ts';
 declare const install: (app: App, options?: {
     prefix: string;
     attachToApp?: boolean;
     attachToWindow?: boolean;
 }) => void;
 export { install };
-export { Button, ButtonGroup, Link, MessageBox, Message, Row, Col, Divider, setThemeColor, Space, Grid, GridItem, Container, Main, Aside, Header, Footer, useThemeMode, Icon };
+export { Button, ButtonGroup, Link, MessageBox, Message, Row, Col, Divider, setThemeColor, Space, Grid, GridItem, Container, Main, Aside, Header, Footer, useThemeMode, Icon, Input, InputNumber, Textarea, InputGroup, InputGroupLabel, Tag, InputTag, Tooltip, Popover, Empty, AutoComplete, Mask, Spin, Select };
 declare const _default: {
     install: (app: App, options?: {
         prefix: string;
@@ -33,3 +47,6 @@ declare const _default: {
     }) => void;
 };
 export default _default;
+export type { Option, GroupOption, NumberOrPercentage, ValidContent, ValidVNodeContent, ValueWithDeviceWidth } from './share/type/index.ts';
+export type { AutoCompleteOption, AutoCompleteGroupOption } from './auto-complete/type.ts';
+export type { SelectOption, SelectGroupOption } from './select/type.ts';

package/es/index.js

@@ -19,11 +19,58 @@ 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";
-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];
+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) => {
-    component.name && app.component(options.prefix + component.name, component);
+    if (component.name) {
+      app.component(options.prefix + component.name, component);
+    }
   });
   if (options.attachToApp !== false) {
     app.config.globalProperties.PixeliumVue = {
@@ -40,22 +87,36 @@ const index = {
 };
 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,

package/es/input/css.js

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

package/es/input/draw.d.ts

@@ -0,0 +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;

package/es/input/draw.js

@@ -0,0 +1,52 @@
+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
+};

package/es/input/index.css

@@ -0,0 +1,138 @@
+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;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  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);
+}
+.px-input-inner {
+  height: 100%;
+  border: 0;
+  background-color: transparent;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: var(--text-size);
+  line-height: var(--px-line-height);
+  font-family: var(--px-font);
+  padding: 0;
+}
+.px-input-inner:focus-visible {
+  outline-color: var(--px-neutral-10);
+  outline-offset: var(--px-bit);
+}
+.px-input-inner:disabled {
+  color: var(--px-neutral-10);
+}
+.px-input-inner::placeholder {
+  color: var(--px-neutral-8);
+  opacity: 1;
+}
+.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;
+}
+.px-input__disabled .px-input-inner:disabled {
+  cursor: not-allowed;
+  color: var(--px-neutral-8);
+}
+.px-input-count-wrapper,
+.px-input-prefix-wrapper,
+.px-input-suffix-wrapper,
+.px-input-loading-wrapper,
+.px-input-close-wrapper,
+.px-input-password-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.px-input-prefix-wrapper {
+  margin-right: var(--px-interval-2);
+}
+.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);
+}
+.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;
+}
+.px-input-close-wrapper .px-input-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-input-close-wrapper .px-input-icon:active {
+  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;
+}
+.px-input-password-wrapper .px-input-icon:hover {
+  fill: var(--px-primary-6);
+}
+.px-input-password-wrapper .px-input-icon:active {
+  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,
+.px-input-suffix-wrapper {
+  color: var(--px-neutral-10);
+}
+.px-input-count-wrapper {
+  color: var(--px-neutral-8);
+}
+.px-input-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}

package/es/input/index.d.ts

@@ -0,0 +1,50 @@
+import type { InputProps } from './type';
+declare var __VLS_1: {}, __VLS_27: {
+    value: any;
+    count: any;
+    maxLength: number | undefined;
+}, __VLS_34: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    count?: (props: typeof __VLS_27) => any;
+} & {
+    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;
+    clear: (value: string) => any;
+    blur: (e: FocusEvent) => 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;
+    onBlur?: ((e: FocusEvent) => any) | undefined;
+    onFocus?: ((e: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    shape: "default" | "round";
+    size: "medium" | "large" | "small";
+    disabled: boolean;
+    loading: boolean;
+    password: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    showCount: boolean;
+    status: "success" | "warning" | "error" | "normal";
+}, {}, {}, {}, 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;
+    };
+};