@pixelium/web-vue 0.0.3-beta → 0.0.4

package/es/alert/draw.d.ts

@@ -0,0 +1,6 @@
+import type { RgbaColor } from '../share/type';
+import type { AlertProps } from './type';
+export declare function getBackgroundColor(variant: AlertProps['variant'], type: AlertProps['type'], palette: RgbaColor[] | null): RgbaColor | null;
+export declare function getBorderColor(variant: AlertProps['variant'], type: AlertProps['type'], palette: RgbaColor[] | null): RgbaColor | null;
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number) => void;
+export declare const getTextColorWithPalette: (palette: RgbaColor[] | null, type: AlertProps["variant"]) => string | undefined;

package/es/alert/index.d.ts

@@ -0,0 +1,29 @@
+import type { AlertProps } from './type';
+declare var __VLS_1: {}, __VLS_28: {}, __VLS_30: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_28) => any;
+} & {
+    default?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    onClose?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    type: "info" | "success" | "warning" | "error" | "loading" | "normal" | "sakura";
+    variant: "primary" | "plain";
+    shape: "rect" | "round";
+    closable: boolean;
+    textAlign: "start" | "center" | "end";
+    iconPlacement: "start" | "text-leading";
+    showIcon: 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 & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/alert/type.d.ts

@@ -0,0 +1,83 @@
+import type { NumberOrPercentage } from '../share/type';
+export type AlertProps = {
+    /**
+     * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
+     * @version 0.0.4
+     */
+    borderRadius?: NumberOrPercentage | NumberOrPercentage[];
+    /**
+     * @property {'rect' | 'round'} [shape='rect']
+     * @version 0.0.4
+     */
+    shape?: 'rect' | 'round';
+    /**
+     * @property {'primary' | 'plain'} [variant='plain']
+     * @version 0.0.4
+     */
+    variant?: 'primary' | 'plain';
+    /**
+     * @property {'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura'} [type='primary']
+     * @version 0.0.4
+     */
+    type?: 'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura';
+    /**
+     * @property {'start' | 'center' | 'end'} [textAlign='start']
+     * @version 0.0.4
+     */
+    textAlign?: 'start' | 'center' | 'end';
+    /**
+     * @property {string} [title]
+     * @version 0.0.4
+     */
+    title?: string;
+    /**
+     * @property {string} [color]
+     * @version 0.0.4
+     */
+    color?: string;
+    /**
+     * @property {boolean} [closable=false]
+     * @version 0.0.4
+     */
+    closable?: boolean;
+    /**
+     * @property {'start' | 'text-leading'} [iconPlacement='text-leading']
+     * @version 0.0.4
+     */
+    iconPlacement?: 'start' | 'text-leading';
+    /**
+     * @property {boolean} [showIcon='true']
+     * @version 0.0.4
+     */
+    showIcon?: boolean;
+    /**
+     * @property {boolean} [pollSizeChange=false]
+     * @version 0.0.4
+     */
+    pollSizeChange?: boolean;
+};
+export type AlertEvents = {
+    /**
+     * @event close
+     * @version 0.0.4
+     * @param {MouseEvent} e
+     */
+    close: [e: MouseEvent];
+};
+export type AlertSlots = {
+    /**
+     * @slot default
+     * @version 0.0.4
+     */
+    default: {};
+    /**
+     * @slot title
+     * @version 0.0.4
+     */
+    title: {};
+    /**
+     * @slot icon
+     * @version 0.0.4
+     */
+    icon: {};
+};

package/es/aside/index.css

@@ -4,6 +4,7 @@
   background-color: var(--px-neutral-1);
   color: var(--px-neutral-10);
   width: 300px;
+  box-sizing: border-box;
 }
 .px-aside__bordered {
   border-right: 2px solid var(--px-neutral-3);

package/es/aside/index.js

@@ -21,7 +21,7 @@ var aside_default = /* @__PURE__ */ defineComponent({
 	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;
+		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) : void 0;
 		onMounted(() => {
 			if (asideCounter) asideCounter.value += 1;
 		});

package/es/auto-complete/index.css

@@ -13,6 +13,7 @@
   height: var(--auto-complete-size);
   cursor: text;
   transition: 0.25s all;
+  flex-grow: 1;
 }
 .px-auto-complete.px-auto-complete {
   font-size: 14px;
@@ -46,8 +47,7 @@
   padding: 0;
 }
 .px-auto-complete-inner:focus-visible {
-  outline-color: var(--px-neutral-10);
-  outline-offset: var(--px-bit);
+  outline: none;
 }
 .px-auto-complete-inner:disabled {
   color: var(--px-neutral-10);

package/es/auto-complete/index.js

@@ -97,8 +97,8 @@ var auto_complete_default = /* @__PURE__ */ defineComponent({
 			ref(false),
 			ref(false)
 		];
-		const inputGroupProvide = inject(INPUT_GROUP_PROVIDE);
-		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const inputGroupProvide = inject(INPUT_GROUP_PROVIDE, void 0);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
 		const borderRadiusComputed = createProvideComputed("borderRadius", [innerInputGroup.value && inputGroupProvide, props]);
 		const sizeComputed = createProvideComputed("size", () => [
 			innerInputGroup.value && inputGroupProvide,

package/es/badge/draw.d.ts

@@ -0,0 +1 @@
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: string, pixelSize: number) => void;

package/es/badge/index.d.ts

@@ -0,0 +1,25 @@
+import type { BadgeProps } from './type';
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    value: number | string;
+    theme: "primary" | "sakura" | "success" | "warning" | "danger";
+    pollSizeChange: boolean;
+    offset: number | [number, number] | {
+        x?: number;
+        y?: number;
+    };
+    visible: boolean;
+    dot: 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 & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/badge/type.d.ts

@@ -0,0 +1,69 @@
+import type { RestAttrs } from '../share/type';
+export type BadgeProps = {
+    /**
+     * @property {number | string} [value='']
+     * @version 0.0.4
+     */
+    value?: number | string;
+    /**
+     * @property {number} [max]
+     * @version 0.0.4
+     */
+    max?: number;
+    /**
+     * @property {boolean} [dot=false]
+     * @version 0.0.4
+     */
+    dot?: boolean;
+    /**
+     * @property {'primary' | 'sakura' | 'success' | 'warning' | 'danger'} [theme='danger']
+     * @version 0.0.4
+     */
+    theme?: 'primary' | 'sakura' | 'success' | 'warning' | 'danger';
+    /**
+     * @property {boolean} [visible=true]
+     * @version 0.0.4
+     */
+    visible?: boolean;
+    /**
+     * @property {number | [number, number] | { x?: number; y?: number }} [offset=0]
+     * @version 0.0.4
+     */
+    offset?: number | [number, number] | {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * @property {string} [color]
+     * @version 0.0.4
+     */
+    color?: string;
+    /**
+     * @property {string} [borderColor]
+     * @version 0.0.4
+     */
+    borderColor?: string;
+    /**
+     * @property {RestAttrs} [contentProps]
+     * @version 0.0.4
+     */
+    contentProps?: RestAttrs;
+    /**
+     * @property {boolean} [pollSizeChange=false]
+     * @version 0.0.4
+     */
+    pollSizeChange?: boolean;
+};
+export type BadgeSlots = {
+    /**
+     * @slot default
+     * @version 0.0.4
+     */
+    default: {};
+    /**
+     * @slot content
+     * @param {string | string} value
+     * @version 0.0.4
+     */
+    content: {};
+};

package/es/button/index.css

@@ -25,8 +25,7 @@
   transition: 0.25s;
   z-index: 0;
   box-sizing: border-box;
-}
-.px-button.px-button {
+  outline-offset: var(--px-bit);
   font-size: 14px;
 }
 .px-button.px-button__small.px-button__inner {
@@ -101,7 +100,6 @@
 }
 .px-button.px-button__primary:focus-visible {
   outline-color: var(--px-primary-6);
-  outline-offset: var(--px-bit);
 }
 .px-button.px-button__primary.px-button__plain {
   --text-color: var(--px-primary-6);
@@ -151,7 +149,6 @@
 }
 .px-button.px-button__sakura:focus-visible {
   outline-color: var(--px-sakura-6);
-  outline-offset: var(--px-bit);
 }
 .px-button.px-button__sakura.px-button__plain {
   --text-color: var(--px-sakura-6);
@@ -201,7 +198,6 @@
 }
 .px-button.px-button__success:focus-visible {
   outline-color: var(--px-success-6);
-  outline-offset: var(--px-bit);
 }
 .px-button.px-button__success.px-button__plain {
   --text-color: var(--px-success-6);
@@ -251,7 +247,6 @@
 }
 .px-button.px-button__warning:focus-visible {
   outline-color: var(--px-warning-6);
-  outline-offset: var(--px-bit);
 }
 .px-button.px-button__warning.px-button__plain {
   --text-color: var(--px-warning-6);
@@ -301,7 +296,6 @@
 }
 .px-button.px-button__danger:focus-visible {
   outline-color: var(--px-danger-6);
-  outline-offset: var(--px-bit);
 }
 .px-button.px-button__danger.px-button__plain {
   --text-color: var(--px-danger-6);
@@ -354,7 +348,6 @@
 }
 .px-button.px-button__info:focus-visible {
   outline-color: var(--px-neutral-10);
-  outline-offset: var(--px-bit);
 }
 .px-button.px-button__info.px-button__disabled {
   --text-color: var(--px-neutral-7);

package/es/button/index.js

@@ -57,10 +57,10 @@ var button_default = /* @__PURE__ */ defineComponent({
 			ref(false),
 			ref(false)
 		];
-		const buttonGroupProvide = inject(BUTTON_GROUP_PROVIDE);
-		const inputGroupProvide = inject(INPUT_GROUP_PROVIDE);
-		const formProps = inject(FORM_PROVIDE);
-		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const buttonGroupProvide = inject(BUTTON_GROUP_PROVIDE, void 0);
+		const inputGroupProvide = inject(INPUT_GROUP_PROVIDE, void 0);
+		const formProps = inject(FORM_PROVIDE, void 0);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
 		const borderRadiusComputed = createProvideComputed("borderRadius", [
 			innerButtonGroup.value && buttonGroupProvide,
 			innerInputGroup.value && inputGroupProvide,

package/es/button-group/index.js

@@ -22,8 +22,8 @@ var button_group_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
-		const formProvide = inject(FORM_PROVIDE);
-		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const formProvide = inject(FORM_PROVIDE, void 0);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
 		const sizeComputed = createProvideComputed("size", () => [
 			props.size && props,
 			formItemProvide,

package/es/checkbox/index.js

@@ -60,8 +60,8 @@ var checkbox_default = /* @__PURE__ */ defineComponent({
 			defaultField: "defaultValue",
 			transform: (val) => !!val
 		});
-		const formItemProvide = inject(FORM_ITEM_PROVIDE);
-		const checkboxGroupProvide = inject(CHECKBOX_GROUP_PROVIDE);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		const checkboxGroupProvide = inject(CHECKBOX_GROUP_PROVIDE, void 0);
 		const sizeComputed = createProvideComputed("size", () => [
 			checkboxGroupProvide,
 			props.size && props,

package/es/checkbox-group/index.js

@@ -35,7 +35,7 @@ var checkbox_group_default = /* @__PURE__ */ defineComponent({
 			},
 			defaultField: "defaultValue"
 		});
-		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
 		const disabledComputed = createProvideComputed("disabled", [formItemProvide, props], "or");
 		const readonlyComputed = createProvideComputed("readonly", [formItemProvide, props], "or");
 		const getKey = (option) => {

package/es/col/index.js

@@ -22,7 +22,7 @@ var col_default = /* @__PURE__ */ defineComponent({
 			return props.span[widthType.value] || 24;
 		});
 		const instance = getCurrentInstance();
-		const gutter = ref((instance === null || instance === void 0 || (_instance$parent = instance.parent) === null || _instance$parent === void 0 ? void 0 : _instance$parent.type.name) === "Row").value && inject("px-row-provide") || ref({
+		const gutter = ref((instance === null || instance === void 0 || (_instance$parent = instance.parent) === null || _instance$parent === void 0 ? void 0 : _instance$parent.type.name) === "Row").value && inject("px-row-provide", void 0) || ref({
 			x: 0,
 			y: 0
 		});

package/es/container/index.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  box-sizing: border-box;
 }
 .px-container.px-container__has-aside {
   flex-direction: row;

package/es/dialog/dialog-wrapped.d.ts

@@ -0,0 +1,52 @@
+import type { DialogExpose, DialogProps } from './type';
+type __VLS_Props = DialogProps & {
+    onBeforeOk?: () => Promise<boolean | void> | boolean | void;
+};
+declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_11) => any;
+} & {
+    icon?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    footer?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, DialogExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: (event: MouseEvent | KeyboardEvent) => any;
+    close: () => any;
+    open: () => any;
+    "update:visible": (visible: boolean) => any;
+    beforeOk: () => any;
+    ok: (event: MouseEvent) => any;
+    afterOpen: () => any;
+    afterClose: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: ((event: MouseEvent | KeyboardEvent) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    onBeforeOk?: (() => any) | undefined;
+    onOk?: ((event: MouseEvent) => any) | undefined;
+    onAfterOpen?: (() => any) | undefined;
+    onAfterClose?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    title: string;
+    mask: boolean;
+    closable: boolean;
+    visible: boolean | null;
+    defaultVisible: boolean | null;
+    destroyOnHide: boolean;
+    maskClosable: boolean;
+    escToClose: boolean;
+    showCancel: boolean;
+    showFooter: 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 & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/dialog/dialog.d.ts

@@ -0,0 +1,51 @@
+import type { DialogProps } from './type';
+type __VLS_Props = Omit<DialogProps, 'defaultVisible' | 'root'> & {
+    onBeforeOk?: () => Promise<boolean | void> | boolean | void;
+};
+declare var __VLS_23: {}, __VLS_25: {}, __VLS_32: {}, __VLS_34: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_23) => any;
+} & {
+    title?: (props: typeof __VLS_25) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+} & {
+    footer?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: (event: MouseEvent | KeyboardEvent) => any;
+    close: () => any;
+    open: () => any;
+    "update:visible": (visible: boolean) => any;
+    beforeOk: () => any;
+    ok: (event: MouseEvent) => any;
+    afterOpen: () => any;
+    afterClose: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: ((event: MouseEvent | KeyboardEvent) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    onBeforeOk?: (() => any) | undefined;
+    onOk?: ((event: MouseEvent) => any) | undefined;
+    onAfterOpen?: (() => any) | undefined;
+    onAfterClose?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    title: string;
+    mask: boolean;
+    closable: boolean;
+    visible: boolean | null;
+    destroyOnHide: boolean;
+    maskClosable: boolean;
+    escToClose: boolean;
+    showCancel: boolean;
+    showFooter: 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 & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/dialog/index.d.ts

@@ -0,0 +1,5 @@
+import type { DialogOptions, DialogReturn, DialogEvents } from './type';
+import type { EmitEvent } from '../share/type';
+import DialogWrapped from './dialog-wrapped.ts';
+declare const _default: typeof DialogWrapped & { [key in DialogOptions["type"] & string]: (options: (Omit<DialogOptions, "type"> & Omit<EmitEvent<DialogEvents>, "update:visible">) | string) => DialogReturn; };
+export default _default;