@pixelium/web-vue 0.0.1-beta → 0.0.2

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

@@ -0,0 +1,183 @@
+import type { Nullish } from 'parsnip-kit';
+import type { NumberOrPercentage } from '../share/type';
+export type InputNumberProps = {
+    /**
+     * @property {string | null} [modelValue]
+     * @version 0.0.2
+     */
+    modelValue?: number | null;
+    /**
+     * @property {string | null} [defaultValue]
+     * @version 0.0.2
+     */
+    defaultValue?: number | null;
+    /**
+     * @property {string} [placeholder]
+     * @version 0.0.2
+     */
+    placeholder?: string;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.2
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.2
+     */
+    readonly?: boolean;
+    /**
+     * @property {number} [max=Number.MAX_SAFE_INTEGER]
+     * @version 0.0.2
+     */
+    max?: number;
+    /**
+     * @property {number} [min=Number.MIN_SAFE_INTEGER]
+     * @version 0.0.2
+     */
+    min?: number;
+    /**
+     * @property {number} [step=1]
+     * @version 0.0.2
+     */
+    step?: number;
+    /**
+     * @property {number} [precision]
+     * @version 0.0.2
+     */
+    precision?: number;
+    /**
+     * @property {boolean} [strickStep=false]
+     * @version 0.0.2
+     */
+    strickStep?: boolean;
+    /**
+     * @property {(value: number | Nullish) => string} [format]
+     * @version 0.0.2
+     */
+    format?: (value: number | Nullish) => string;
+    /**
+     * @property {(value: string) => boolean} [allowInput]
+     * @version 0.0.2
+     */
+    allowInput?: (value: string) => boolean;
+    /**
+     * @property {(value: string) => number} [parse]
+     * @version 0.0.2
+     */
+    parse?: (value: string) => number;
+    /**
+     * @property {boolean} [clearable=false]
+     * @version 0.0.2
+     */
+    clearable?: boolean;
+    /**
+     * @property {boolean} [loading=false]
+     * @version 0.0.2
+     */
+    loading?: boolean;
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * @property {'default' | 'round'} [shape='default']
+     * @version 0.0.2
+     */
+    shape?: 'default' | 'round';
+    /**
+     * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
+     * @version 0.0.2
+     */
+    borderRadius?: NumberOrPercentage | NumberOrPercentage[];
+    /**
+     * @property {boolean} [buttonPlacement='end']
+     * @version 0.0.2
+     */
+    buttonPlacement?: 'start' | 'end' | 'both' | 'start-reverse' | 'end-reverse' | 'both-reverse';
+    /**
+     * @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;
+};
+export type InputNumberEvents = {
+    /**
+     * @event input
+     * @param {number} value
+     * @param {Event} e
+     * @version 0.0.2
+     */
+    input: [value: number, e: Event];
+    /**
+     * @event update:modelValue
+     * @param {number} value
+     * @version 0.0.2
+     */
+    'update:modelValue': [value: number];
+    /**
+     * @event change
+     * @param {number} value
+     * @param {Event | undefined} e
+     * @version 0.0.2
+     */
+    change: [value: number, e?: Event];
+    /**
+     * @event clear
+     * @param {number} value
+     * @version 0.0.2
+     */
+    clear: [value: number];
+    /**
+     * @event blur
+     * @param {FocusEvent} e
+     * @version 0.0.2
+     */
+    blur: [e: FocusEvent];
+    /**
+     * @event focus
+     * @param {FocusEvent} e
+     * @version 0.0.2
+     */
+    focus: [e: FocusEvent];
+};
+export type InputNumberSlots = {
+    /**
+     * @slot prefix
+     * @version 0.0.2
+     */
+    prefix: {};
+    /**
+     * @slot suffix
+     * @version 0.0.2
+     */
+    suffix: {};
+};
+export type InputNumberExpose = {
+    /**
+     * @property {() => void} focus
+     * @version 0.0.2
+     */
+    focus: () => void;
+    /**
+     * @property {() => void} blur
+     * @version 0.0.2
+     */
+    blur: () => void;
+    /**
+     * @property {() => void} clear
+     * @version 0.0.2
+     */
+    clear: () => void;
+    /**
+     * @property {() => void} select
+     * @version 0.0.2
+     */
+    select: () => void;
+};

package/es/input-tag/css.js

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

package/es/input-tag/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-tag/draw.js

@@ -0,0 +1,49 @@
+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]) {
+    const width2 = inner && !last ? center[1][0] - center[0][0] + pixelSize / 2 + 1 : center[1][0] - center[0][0] + pixelSize;
+    ctx.fillRect(center[0][0], 0, width2, 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) {
+    const width2 = inner && !last ? center[2][0] - center[3][0] + pixelSize / 2 : center[2][0] - center[3][0] + pixelSize;
+    ctx.fillRect(center[3][0], height - pixelSize, width2, 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 / 2 + 1, height);
+  }
+};
+export {
+  drawBorder as d
+};

package/es/input-tag/index.css

@@ -0,0 +1,133 @@
+div.px-input-tag {
+  font-size: var(--text-size);
+}
+.px-input-tag {
+  --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;
+  cursor: text;
+}
+.px-input-tag__inner {
+  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
+}
+.px-input-tag__inner:last-child {
+  padding-right: var(--padding-x-size);
+}
+.px-input-tag-content {
+  min-height: calc(var(--input-size) - var(--px-bit) * 2);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+}
+.px-input-tag-content .px-tag {
+  margin-right: var(--px-interval-2);
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+.px-input-tag-inner {
+  height: calc(var(--input-size) - var(--px-bit) * 2);
+  border: 0;
+  background-color: transparent;
+  box-sizing: border-box;
+  flex: 1;
+  font-size: var(--text-size);
+  line-height: var(--px-line-height);
+  font-family: 'Fusion Pixel Zh_hans', sans-serif;
+  padding: 0;
+}
+.px-input-tag-inner:focus-visible {
+  outline-color: var(--px-neutral-10);
+  outline-offset: var(--px-bit);
+}
+.px-input-tag-inner:disabled {
+  color: var(--px-neutral-10);
+}
+.px-input-tag-inner::placeholder {
+  color: var(--px-neutral-8);
+  opacity: 1;
+}
+.px-input-tag__large {
+  --padding-x-size: var(--px-large-padding-x);
+  --text-size: var(--px-large-font-size);
+  --input-size: var(--px-large-size);
+}
+.px-input-tag__small {
+  --padding-x-size: var(--px-small-padding-x);
+  --input-size: var(--px-small-size);
+  --text-size: var(--px-small-font-size);
+}
+.px-input-tag__small .px-input-tag-content .px-tag {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.px-input-tag__disabled {
+  cursor: not-allowed;
+}
+.px-input-tag__disabled .px-input-tag-inner:disabled {
+  cursor: not-allowed;
+  color: var(--px-neutral-8);
+}
+.px-input-tag-prefix-wrapper,
+.px-input-tag-suffix-wrapper,
+.px-input-tag-loading-wrapper,
+.px-input-tag-close-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.px-input-tag-prefix-wrapper {
+  margin-right: var(--px-interval-2);
+}
+.px-input-tag-suffix-wrapper,
+.px-input-tag-loading-wrapper,
+.px-input-tag-close-wrapper {
+  margin-left: var(--px-interval-2);
+}
+.px-input-tag-close-wrapper .px-input-tag-icon-placeholder {
+  width: var(--text-size);
+  height: var(--text-size);
+}
+.px-input-tag-close-wrapper .px-input-tag-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  cursor: pointer;
+  fill: var(--px-neutral-8);
+  transition: 0.25s;
+}
+.px-input-tag-close-wrapper .px-input-tag-icon:hover {
+  fill: var(--px-neutral-7);
+}
+.px-input-tag-close-wrapper .px-input-tag-icon:active {
+  fill: var(--px-neutral-9);
+}
+.px-input-tag-loading-wrapper .px-input-tag-icon {
+  width: var(--text-size);
+  height: var(--text-size);
+  fill: var(--px-primary-6);
+}
+.px-input-tag-prefix-wrapper,
+.px-input-tag-suffix-wrapper {
+  color: var(--px-neutral-10);
+}
+.px-input-tag-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}

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

@@ -0,0 +1,73 @@
+import type { InputTagProps } from './type';
+declare var __VLS_1: {}, __VLS_10: {
+    tag: string;
+    index: number;
+}, __VLS_16: {
+    tag: string;
+    index: number;
+}, __VLS_26: {
+    tag: string;
+    index: number;
+}, __VLS_36: {
+    tag: string;
+    index: number;
+}, __VLS_51: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    tag?: (props: typeof __VLS_10) => any;
+} & {
+    tag?: (props: typeof __VLS_16) => any;
+} & {
+    tag?: (props: typeof __VLS_26) => any;
+} & {
+    tag?: (props: typeof __VLS_36) => any;
+} & {
+    suffix?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<InputTagProps, {
+    focus: () => void;
+    blur: () => void;
+    clear: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (value: string, e: Event) => any;
+    change: (value: string[]) => any;
+    clear: (value: string[]) => any;
+    blur: (e: FocusEvent) => any;
+    focus: (e: FocusEvent) => any;
+    "update:modelValue": (value: string[]) => any;
+    tagAdd: (value: string, e: KeyboardEvent) => any;
+    tagClose: (value: string, index: number, e: MouseEvent) => any;
+    "update:inputValue": (value: string) => any;
+    inputChange: (value: string, e?: Event | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<InputTagProps> & Readonly<{
+    onInput?: ((value: string, e: Event) => any) | undefined;
+    onChange?: ((value: string[]) => any) | undefined;
+    onClear?: ((value: string[]) => any) | undefined;
+    onBlur?: ((e: FocusEvent) => any) | undefined;
+    onFocus?: ((e: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onTagAdd?: ((value: string, e: KeyboardEvent) => any) | undefined;
+    onTagClose?: ((value: string, index: number, e: MouseEvent) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    onInputChange?: ((value: string, e?: Event | undefined) => any) | undefined;
+}>, {
+    shape: "default" | "round";
+    size: "medium" | "large" | "small";
+    disabled: boolean;
+    loading: boolean;
+    readonly: boolean;
+    clearable: boolean;
+    status: "success" | "warning" | "error" | "normal";
+    collapseTags: boolean;
+    collapseTagsPopover: boolean;
+    tagTheme: "primary" | "sakura" | "success" | "warning" | "danger" | "info";
+    tagVariant: "primary" | "plain" | "outline";
+}, {}, {}, {}, 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;
+    };
+};