@pixelium/web-vue 0.0.2 → 0.0.3-beta

package/es/checkbox-group/index.js

@@ -0,0 +1,84 @@
+import './css.js'
+import { B as y } from "../vendor.js";
+import { i as FORM_ITEM_PROVIDE, n as CHECKBOX_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { t as useControlledMode } from "../share/hook/use-controlled-mode.js";
+import { t as checkbox_default } from "../checkbox/index.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, normalizeClass, openBlock, provide, renderList, renderSlot, toDisplayString, toRef, unref, withCtx } from "vue";
+var _hoisted_1 = { class: "px-checkbox-group-inner" };
+var checkbox_group_default = /* @__PURE__ */ defineComponent({
+	name: "CheckboxGroup",
+	__name: "index",
+	props: {
+		modelValue: null,
+		defaultValue: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		variant: null,
+		direction: { default: "horizontal" },
+		options: null,
+		size: null
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			transform: (val) => {
+				return val || [];
+			},
+			defaultField: "defaultValue"
+		});
+		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const disabledComputed = createProvideComputed("disabled", [formItemProvide, props], "or");
+		const readonlyComputed = createProvideComputed("readonly", [formItemProvide, props], "or");
+		const getKey = (option) => {
+			if (y(option)) return option;
+			else return option.key ?? option.value;
+		};
+		const sizeComputed = createProvideComputed("size", () => [
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		provide(CHECKBOX_GROUP_PROVIDE, {
+			modelValue,
+			disabled: disabledComputed,
+			readonly: readonlyComputed,
+			variant: toRef(props, "variant"),
+			size: sizeComputed,
+			updateValue: (value, checked) => {
+				const newValue = (modelValue.value || []).slice();
+				if (checked) {
+					if (!newValue.includes(value)) newValue.push(value);
+				} else {
+					const idx = newValue.indexOf(value);
+					if (idx >= 0) newValue.splice(idx, 1);
+				}
+				modelValue.value = newValue;
+				updateModelValue(newValue);
+				emits("change", newValue);
+				formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["pixelium px-checkbox-group", { [`px-checkbox-group__${props.direction}`]: props.direction }]) }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [props.options ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.options, (option) => {
+				return openBlock(), createBlock(checkbox_default, {
+					key: getKey(option),
+					value: unref(y)(option) ? option : option.value,
+					disabled: unref(y)(option) ? false : option.disabled
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(y)(option) ? option : option.label), 1)]),
+					_: 2
+				}, 1032, ["value", "disabled"]);
+			}), 128)) : createCommentVNode("v-if", true)])])], 2);
+		};
+	}
+});
+export { checkbox_group_default as t };

package/es/checkbox-group/type.d.ts

@@ -0,0 +1,78 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { Option } from '../share/type';
+import type { Nullish } from 'parsnip-kit';
+export interface CheckboxGroupOption<T = any> extends Option<T> {
+    disabled?: boolean;
+    key?: string | number | symbol;
+}
+export type CheckboxGroupProps = {
+    /**
+     * @property {any[] | null} [modelValue]
+     * @version 0.0.3
+     */
+    modelValue?: any[] | null;
+    /**
+     * @property {any[] | null} [defaultValue]
+     * @version 0.0.3
+     */
+    defaultValue?: any[] | null;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.3
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
+    /**
+     * @property {'normal' | 'retro'} [variant]
+     * @version 0.0.3
+     */
+    variant?: 'normal' | 'retro';
+    /**
+     * @property {'horizontal' | 'vertical'} [direction='horizontal']
+     * @version 0.0.3
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @property {(CheckboxGroupOption | string)[]} [options]
+     * @version 0.0.3
+     */
+    options?: (CheckboxGroupOption | string)[];
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.3
+     */
+    size?: 'medium' | 'large' | 'small';
+};
+export type CheckboxGroupEvents = {
+    /**
+     * @event update:modelValue
+     * @param {any[]} value
+     * @version 0.0.3
+     */
+    'update:modelValue': [value: any[]];
+    /**
+     * @event change
+     * @param {any[]} value
+     * @version 0.0.3
+     */
+    change: [value: any[]];
+};
+export type CheckboxGroupSlots = {
+    /**
+     * @slot default
+     * @version 0.0.3
+     */
+    default: {};
+};
+export type CheckboxGroupProvide = {
+    size: ComputedRef<'medium' | 'large' | 'small' | undefined>;
+    variant: Ref<CheckboxGroupProps['variant']>;
+    disabled: ComputedRef<boolean | undefined>;
+    readonly: ComputedRef<boolean | undefined>;
+    modelValue: Ref<any[] | Nullish>;
+    updateValue: (value: any, checked: boolean) => void;
+};

package/es/col/index.d.ts

@@ -4,8 +4,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColProps> & Readonly<{}>, {
-    span: number | import("../index.ts").ValueWithDeviceWidth<number>;
-    offset: number | import("../index.ts").ValueWithDeviceWidth<number>;
+    span: number | import("..").ValueWithDeviceWidth<number>;
+    offset: number | import("..").ValueWithDeviceWidth<number>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/es/col/index.js

@@ -1,60 +1,45 @@
 import './css.js'
-import { defineComponent, computed, getCurrentInstance, ref, inject, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot } from "vue";
-import { k } from "../aside/index.js";
-import { u as useScreenWidth } from "../share/hook/use-screen-width.js";
-import { _ as _sfc_main$1 } from "../row/index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Col"
-  },
-  __name: "index",
-  props: {
-    offset: { default: 0 },
-    span: { default: 24 }
-  },
-  setup(__props) {
-    var _a;
-    const props = __props;
-    const [widthType] = useScreenWidth();
-    const offsetComputed = computed(() => {
-      if (k(props.offset)) {
-        return props.offset;
-      }
-      return props.offset[widthType.value] || 0;
-    });
-    const spanComputed = computed(() => {
-      if (k(props.span)) {
-        return props.span;
-      }
-      return props.span[widthType.value] || 24;
-    });
-    const instance = getCurrentInstance();
-    const inner = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
-    const gutter = inner.value && inject("px-row-provide") || ref({ x: 0, y: 0 });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["pixelium px-col", {
-            [`px-col__span-${spanComputed.value}`]: true,
-            [`px-col__offset-${offsetComputed.value}`]: true
-          }]),
-          style: normalizeStyle({
-            paddingLeft: unref(gutter) ? unref(gutter).x / 2 + "px" : void 0,
-            paddingRight: unref(gutter) ? unref(gutter).x / 2 + "px" : void 0,
-            paddingTop: unref(gutter) ? unref(gutter).y / 2 + "px" : void 0,
-            paddingBottom: unref(gutter) ? unref(gutter).y / 2 + "px" : void 0
-          })
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
+import { g as A } from "../vendor.js";
+import { t as useScreenWidth } from "../share/hook/use-screen-width.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, inject, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref } from "vue";
+var col_default = /* @__PURE__ */ defineComponent({
+	name: "Col",
+	__name: "index",
+	props: {
+		offset: { default: 0 },
+		span: { default: 24 }
+	},
+	setup(__props) {
+		var _instance$parent;
+		const props = __props;
+		const [widthType] = useScreenWidth();
+		const offsetComputed = computed(() => {
+			if (A(props.offset)) return props.offset;
+			return props.offset[widthType.value] || 0;
+		});
+		const spanComputed = computed(() => {
+			if (A(props.span)) return props.span;
+			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({
+			x: 0,
+			y: 0
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-col", {
+					[`px-col__span-${spanComputed.value}`]: true,
+					[`px-col__offset-${offsetComputed.value}`]: true
+				}]),
+				style: normalizeStyle({
+					paddingLeft: unref(gutter) ? unref(gutter).x / 2 + "px" : void 0,
+					paddingRight: unref(gutter) ? unref(gutter).x / 2 + "px" : void 0,
+					paddingTop: unref(gutter) ? unref(gutter).y / 2 + "px" : void 0,
+					paddingBottom: unref(gutter) ? unref(gutter).y / 2 + "px" : void 0
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { col_default as t };

package/es/container/index.js

@@ -1,33 +1,20 @@
 import './css.js'
-import { defineComponent, ref, provide, createElementBlock, openBlock, normalizeClass, renderSlot } from "vue";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ name: "Container" },
-  __name: "index",
-  props: {
-    direction: null
-  },
-  setup(__props) {
-    const aside = ref(0);
-    provide("px-container-provide", aside);
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "section",
-        {
-          class: normalizeClass(["pixelium px-container", {
-            "px-container__has-aside": !!aside.value,
-            [`px-container__${props.direction}`]: !!props.direction
-          }])
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
+import { r as CONTAINER_PROVIDE } from "../share/const/provide-key.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, provide, ref, renderSlot } from "vue";
+var container_default = /* @__PURE__ */ defineComponent({
+	name: "Container",
+	__name: "index",
+	props: { direction: null },
+	setup(__props) {
+		const aside = ref(0);
+		provide(CONTAINER_PROVIDE, aside);
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", { class: normalizeClass(["pixelium px-container", {
+				"px-container__has-aside": !!aside.value,
+				[`px-container__${props.direction}`]: !!props.direction
+			}]) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { container_default as t };

package/es/divider/index.js

@@ -1,55 +1,41 @@
 import './css.js'
-import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
-import { N, k } from "../aside/index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Divider"
-  },
-  __name: "index",
-  props: {
-    direction: { default: "horizontal" },
-    variant: { default: "solid" },
-    margin: null,
-    size: null
-  },
-  setup(__props) {
-    const props = __props;
-    const marginComputed = computed(() => {
-      if (N(props.margin)) {
-        return;
-      }
-      return k(props.margin) ? `${props.margin}px` : props.margin;
-    });
-    const sizeComputed = computed(() => {
-      if (N(props.size)) {
-        return;
-      }
-      return k(props.size) ? `${props.size}px` : props.size;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["pixelium px-divider", {
-            [`px-divider__${props.direction}`]: true,
-            [`px-divider__${props.variant}`]: true
-          }]),
-          style: normalizeStyle({
-            marginLeft: props.direction === "vertical" ? marginComputed.value : void 0,
-            marginRight: props.direction === "vertical" ? marginComputed.value : void 0,
-            marginTop: props.direction === "horizontal" ? marginComputed.value : void 0,
-            marginBottom: props.direction === "horizontal" ? marginComputed.value : void 0,
-            borderBottomWidth: props.direction === "horizontal" ? sizeComputed.value : void 0,
-            borderRightWidth: props.direction === "vertical" ? sizeComputed.value : void 0
-          })
-        },
-        null,
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
+import { _ as E, g as A } from "../vendor.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock } from "vue";
+var divider_default = /* @__PURE__ */ defineComponent({
+	name: "Divider",
+	__name: "index",
+	props: {
+		direction: { default: "horizontal" },
+		variant: { default: "solid" },
+		margin: null,
+		size: null
+	},
+	setup(__props) {
+		const props = __props;
+		const marginComputed = computed(() => {
+			if (E(props.margin)) return;
+			return A(props.margin) ? `${props.margin}px` : props.margin;
+		});
+		const sizeComputed = computed(() => {
+			if (E(props.size)) return;
+			return A(props.size) ? `${props.size}px` : props.size;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-divider", {
+					[`px-divider__${props.direction}`]: true,
+					[`px-divider__${props.variant}`]: true
+				}]),
+				style: normalizeStyle({
+					marginLeft: props.direction === "vertical" ? marginComputed.value : void 0,
+					marginRight: props.direction === "vertical" ? marginComputed.value : void 0,
+					marginTop: props.direction === "horizontal" ? marginComputed.value : void 0,
+					marginBottom: props.direction === "horizontal" ? marginComputed.value : void 0,
+					borderBottomWidth: props.direction === "horizontal" ? sizeComputed.value : void 0,
+					borderRightWidth: props.direction === "vertical" ? sizeComputed.value : void 0
+				})
+			}, null, 6);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { divider_default as t };

package/es/empty/index.css

@@ -5,15 +5,15 @@
   align-items: center;
 }
 .px-empty .px-empty-icon {
-  width: var(--px-large-base-size);
-  height: var(--px-large-base-size);
+  width: 36px;
+  height: 36px;
 }
 .px-empty-icon-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--px-large-base-size);
+  font-size: 36px;
 }
 .px-empty-description {
-  margin-top: var(--px-interval-1);
+  margin-top: 4px;
 }

package/es/empty/index.js

@@ -1,73 +1,18 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, createElementVNode, renderSlot, createVNode, unref, createTextVNode, toDisplayString } from "vue";
-const FileDelete = /* @__PURE__ */ defineComponent({
-  props: {
-    size: {},
-    color: {}
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "svg",
-        {
-          class: "px-icon-pa",
-          style: normalizeStyle({ color: props.color, fontSize: props.size + "px" }),
-          xmlns: "http://www.w3.org/2000/svg",
-          fill: "none",
-          viewBox: "0 0 24 24"
-        },
-        [..._cache[0] || (_cache[0] = [
-          createElementVNode(
-            "path",
-            {
-              fill: "currentColor",
-              d: "M11 22h10V8h-2V6h-2v2h-2V6h2V4h-2V2H3v12h2V4h8v6h6v10h-8zm-4-2H5v2H3v-2h2v-2H3v-2h2v2h2v-2h2v2H7zm0 0h2v2H7z"
-            },
-            null,
-            -1
-            /* CACHED */
-          )
-        ])],
-        4
-        /* STYLE */
-      );
-    };
-  }
+import { n as file_delete_default } from "../vendor.js";
+import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref } from "vue";
+var _hoisted_1 = { class: "pixelium px-empty" };
+var _hoisted_2 = { class: "px-empty-icon-wrapper" };
+var _hoisted_3 = { class: "px-empty-description" };
+var empty_default = /* @__PURE__ */ defineComponent({
+	name: "Empty",
+	__name: "index",
+	props: { description: { default: "No Data" } },
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "image", {}, () => [createVNode(unref(file_delete_default), { class: "px-empty-icon" })])]), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(props.description), 1)])])]);
+		};
+	}
 });
-const _hoisted_1 = { class: "pixelium px-empty" };
-const _hoisted_2 = { class: "px-empty-icon-wrapper" };
-const _hoisted_3 = { class: "px-empty-description" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Empty"
-  },
-  __name: "index",
-  props: {
-    description: { default: "No Data" }
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          renderSlot(_ctx.$slots, "image", {}, () => [
-            createVNode(unref(FileDelete), { class: "px-empty-icon" })
-          ])
-        ]),
-        createElementVNode("div", _hoisted_3, [
-          renderSlot(_ctx.$slots, "description", {}, () => [
-            createTextVNode(
-              toDisplayString(props.description),
-              1
-              /* TEXT */
-            )
-          ])
-        ])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};
+export { empty_default as t };

package/es/entry.js

@@ -0,0 +1,102 @@
+import { t as inBrowser } from "./share/util/env.js";
+import { t as button_default } from "./button/index.js";
+import { t as button_group_default } from "./button-group/index.js";
+import { t as link_default } from "./link/index.js";
+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 { 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 { 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 { t as useThemeMode } from "./share/hook/use-theme-mode.js";
+import { t as icon_default } from "./icon/index.js";
+import { t as input_default } from "./input/index.js";
+import { t as input_number_default } from "./input-number/index.js";
+import { t as textarea_default } from "./textarea/index.js";
+import { t as tag_default } from "./tag/index.js";
+import { t as input_group_default } from "./input-group/index.js";
+import { t as input_group_label_default } from "./input-group-label/index.js";
+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 { t as virtual_list_default } from "./virtual-list/index.js";
+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 { t as select_default } from "./select/index.js";
+import { t as image_default } from "./image/index.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 switch_default } from "./switch/index.js";
+import { t as slider_default } from "./slider/index.js";
+import { t as radio_default } from "./radio/index.js";
+import { t as radio_group_default } from "./radio-group/index.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";
+var components = [
+	button_default,
+	button_group_default,
+	link_default,
+	message_box_wrapped_default,
+	row_default,
+	col_default,
+	divider_default,
+	space_default,
+	grid_default,
+	grid_item_default,
+	container_default,
+	main_default,
+	aside_default,
+	header_default,
+	footer_default,
+	icon_default,
+	input_default,
+	input_number_default,
+	textarea_default,
+	input_group_default,
+	input_group_label_default,
+	tag_default,
+	input_tag_default,
+	tooltip_default,
+	popover_default,
+	empty_default,
+	auto_complete_default,
+	mask_default,
+	spin_default,
+	select_default,
+	virtual_list_default,
+	image_default,
+	avatar_default,
+	form_default,
+	form_item_default,
+	switch_default,
+	slider_default,
+	radio_default,
+	radio_group_default,
+	checkbox_default,
+	checkbox_group_default,
+	text_outline_default
+];
+var defaultPrefix = "Px";
+var 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: message_box_default,
+		useThemeMode
+	};
+	if (options.attachToWindow !== false && inBrowser()) window.$message = message_box_default;
+};
+var lib_default = { install };
+export { lib_default as n, install as t };