yangs-ui 0.0.0-stage → 0.0.2

package/es/button/index.d.ts

@@ -0,0 +1,33 @@
+export declare const YButton: import('@yangs-ui/utils/with-install').SFCWithInstall<{
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        readonly color: StringConstructor;
+        readonly size: import('vue').PropType<number | string>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        readonly color: StringConstructor;
+        readonly size: import('vue').PropType<number | string>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    };
+})>;
+export default YButton;
+export * from './src/button';
+declare module "vue" {
+    interface GlobalComponents {
+        YButton: typeof YButton;
+    }
+}

package/es/button/index.js

@@ -0,0 +1,7 @@
+import { withInstall } from "../utils/with-install.js";
+import { buttonProps } from "./src/button.js";
+import button_default from "./src/button.vue.js";
+import './style/index.css';/* empty css                 */
+// ../compontents/button/index.ts
+var YButton = withInstall(button_default);
+export { YButton, YButton as default, buttonProps };

package/es/button/src/button.d.ts

@@ -0,0 +1,6 @@
+import { PropType, ExtractPropTypes } from 'vue';
+export declare const buttonProps: {
+    readonly color: StringConstructor;
+    readonly size: PropType<number | string>;
+};
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;

package/es/button/src/button.js

@@ -0,0 +1,6 @@
+// ../compontents/button/src/button.ts
+var buttonProps = {
+	color: String,
+	size: [Number, String]
+};
+export { buttonProps };

package/es/button/src/button.vue.d.ts

@@ -0,0 +1,21 @@
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/button/src/button.vue.js

@@ -0,0 +1,4 @@
+import button_vue_vue_type_script_setup_true_lang_default from "./button.vue_vue_type_script_setup_true_lang.js";
+// ../compontents/button/src/button.vue
+var button_default = button_vue_vue_type_script_setup_true_lang_default;
+export { button_default as default };

package/es/button/src/button.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { createNameSpace } from "../../utils/create.js";
+import { buttonProps } from "./button.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+// ../compontents/button/src/button.vue?vue&type=script&setup=true&lang.ts
+var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "y-button",
+	__name: "button",
+	props: buttonProps,
+	setup(__props) {
+		const props = __props;
+		const bem = createNameSpace("button");
+		const style = computed(() => {
+			if (!props.color && !props.size) return {};
+			return {
+				...props.color ? { color: props.color } : {},
+				...props.size ? { "font-size": `${props.size}px` } : {}
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("i", {
+				class: normalizeClass(unref(bem).b()),
+				style: normalizeStyle(style.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
+});
+export { button_vue_vue_type_script_setup_true_lang_default as default };

package/es/button/style/index.css

@@ -0,0 +1,3 @@
+.y-button {
+  border: 1px solid #ccc;
+}

package/es/icon/index.d.ts

@@ -0,0 +1,33 @@
+export declare const YIcon: import('@yangs-ui/utils/with-install').SFCWithInstall<{
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        readonly color: StringConstructor;
+        readonly size: import('vue').PropType<number | string>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        readonly color: StringConstructor;
+        readonly size: import('vue').PropType<number | string>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    };
+})>;
+export default YIcon;
+export * from './src/icon';
+declare module "vue" {
+    interface GlobalComponents {
+        YIcon: typeof YIcon;
+    }
+}

package/es/icon/index.js

@@ -0,0 +1,7 @@
+import { withInstall } from "../utils/with-install.js";
+import { iconProps } from "./src/icon.js";
+import icon_default from "./src/icon.vue.js";
+import './style/index.css';/* empty css                 */
+// ../compontents/icon/index.ts
+var YIcon = withInstall(icon_default);
+export { YIcon, YIcon as default, iconProps };

package/es/icon/src/icon.d.ts

@@ -0,0 +1,23 @@
+import { PropType, ExtractPropTypes } from 'vue';
+export declare const iconProps: {
+    readonly color: StringConstructor;
+    readonly size: PropType<number | string>;
+};
+export type IconProps = ExtractPropTypes<typeof iconProps>;
+/**
+ * const iconProps = {
+    color: String,
+    size: [Number, String]
+  };
+  这种写法是在vue组件中定义props时的写法，运行时的写法，只能写一个构造函数。String，Number本身也是构造函数
+
+  为什么使用as const。ts的类型
+  让所有属性变为readonly
+  不能直接赋值 iconProps.color = String; // 报错，因为color是readonly属性
+
+  as PropType<number | string> ts的类型
+  返回一个构造函数(构造函数的返回值为number|string)
+  如果color是一个对象，可以指定具体对象的属性类型 color: Object as PropType<{ name: string; age: number }>
+  如果color是一个函数，color: Function as PropType<(val: string) => void>
+  让ExtractPropTypes更好的推导类型，避免手动定义类型
+ */

package/es/icon/src/icon.js

@@ -0,0 +1,23 @@
+// ../compontents/icon/src/icon.ts
+var iconProps = {
+	color: String,
+	size: [Number, String]
+};
+/**
+* const iconProps = {
+color: String,
+size: [Number, String]
+};
+这种写法是在vue组件中定义props时的写法，运行时的写法，只能写一个构造函数。String，Number本身也是构造函数
+
+为什么使用as const。ts的类型
+让所有属性变为readonly
+不能直接赋值 iconProps.color = String; // 报错，因为color是readonly属性
+
+as PropType<number | string> ts的类型
+返回一个构造函数(构造函数的返回值为number|string)
+如果color是一个对象，可以指定具体对象的属性类型 color: Object as PropType<{ name: string; age: number }>
+如果color是一个函数，color: Function as PropType<(val: string) => void>
+让ExtractPropTypes更好的推导类型，避免手动定义类型
+*/
+export { iconProps };

package/es/icon/src/icon.vue.d.ts

@@ -0,0 +1,21 @@
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/icon/src/icon.vue.js

@@ -0,0 +1,4 @@
+import icon_vue_vue_type_script_setup_true_lang_default from "./icon.vue_vue_type_script_setup_true_lang.js";
+// ../compontents/icon/src/icon.vue
+var icon_default = icon_vue_vue_type_script_setup_true_lang_default;
+export { icon_default as default };

package/es/icon/src/icon.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { createNameSpace } from "../../utils/create.js";
+import { iconProps } from "./icon.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+// ../compontents/icon/src/icon.vue?vue&type=script&setup=true&lang.ts
+var icon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "y-icon",
+	__name: "icon",
+	props: iconProps,
+	setup(__props) {
+		const props = __props;
+		const bem = createNameSpace("icon");
+		const iconStyle = computed(() => {
+			if (!props.color && !props.size) return {};
+			return {
+				...props.color ? { color: props.color } : {},
+				...props.size ? { "font-size": `${props.size}px` } : {}
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("i", {
+				class: normalizeClass(unref(bem).b()),
+				style: normalizeStyle(iconStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
+});
+export { icon_vue_vue_type_script_setup_true_lang_default as default };

package/es/icon/style/index.css

@@ -0,0 +1,6 @@
+.y-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  display: inline-flex;
+}

package/es/index.d.ts

@@ -0,0 +1,7 @@
+export * from '@yangs-ui/components';
+export * from '@yangs-ui/constants';
+declare const installer: {
+    install: (app: any) => void;
+};
+export declare const install: (app: any) => void;
+export default installer;

package/es/index.js

@@ -0,0 +1,11 @@
+import { YIcon } from "./icon/index.js";
+import { YButton } from "./button/index.js";
+// index.prod.ts
+var components = [YIcon, YButton];
+var install = (app) => {
+	components.forEach((component) => {
+		app.use(component);
+	});
+};
+var installer = { install };
+export { YButton, YIcon, installer as default, install };

package/es/utils/create.js

@@ -0,0 +1,44 @@
+// ../utils/create.ts
+function _bem(prefixName, blockSuffix, element, modifier) {
+	if (blockSuffix) prefixName += `-${blockSuffix}`;
+	if (element) prefixName += `__${element}`;
+	if (modifier) prefixName += `--${modifier}`;
+	return prefixName;
+}
+function createBem(prefixName) {
+	const b = (blockSuffix = "") => _bem(prefixName, blockSuffix, "", "");
+	const e = (element = "") => _bem(prefixName, "", element, "");
+	const m = (modifier = "") => _bem(prefixName, "", "", modifier);
+	const be = (blockSuffix, element) => blockSuffix && element ? _bem(prefixName, blockSuffix, element, "") : "";
+	const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(prefixName, blockSuffix, "", modifier) : "";
+	const em = (element, modifier) => element && modifier ? _bem(prefixName, "", element, modifier) : "";
+	const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(prefixName, blockSuffix, element, modifier) : "";
+	const is = (name, state) => {
+		if (state) return `is-${name}`;
+		return "";
+	};
+	return {
+		b,
+		e,
+		m,
+		be,
+		bm,
+		em,
+		bem,
+		is
+	};
+}
+function createNameSpace(name) {
+	return createBem(`y-${name}`);
+}
+/**
+*  const bem = createNameSpace("icon");
+console.log(bem.b("block"));
+console.log(bem.e("element"));
+console.log(bem.m("modifier"));
+console.log(bem.be("block", "element"));
+console.log(bem.bm("block", "modifier"));
+console.log(bem.em("element", "modifier"));
+console.log(bem.bem("block", "element", "modifier"));
+*/
+export { createNameSpace };

package/es/utils/with-install.js

@@ -0,0 +1,9 @@
+// ../utils/with-install.ts
+function withInstall(component) {
+	component.install = function(app) {
+		const { name } = component;
+		app.component(name, component);
+	};
+	return component;
+}
+export { withInstall };

package/lib/button/index.cjs

@@ -0,0 +1,9 @@
+require('./style/index.css');const require_with_install = require("../utils/with-install.cjs");
+const require_button = require("./src/button.cjs");
+const require_button$1 = require("./src/button.vue.cjs");
+;/* empty css                   */
+// ../compontents/button/index.ts
+var YButton = require_with_install.withInstall(require_button$1.default);
+exports.YButton = YButton;
+exports.default = YButton;
+exports.buttonProps = require_button.buttonProps;

package/lib/button/index.d.ts

@@ -0,0 +1,33 @@
+export declare const YButton: import('@yangs-ui/utils/with-install').SFCWithInstall<{
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        readonly color: StringConstructor;
+        readonly size: import('vue').PropType<number | string>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        readonly color: StringConstructor;
+        readonly size: import('vue').PropType<number | string>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    };
+})>;
+export default YButton;
+export * from './src/button';
+declare module "vue" {
+    interface GlobalComponents {
+        YButton: typeof YButton;
+    }
+}

package/lib/button/src/button.cjs

@@ -0,0 +1,6 @@
+// ../compontents/button/src/button.ts
+var buttonProps = {
+	color: String,
+	size: [Number, String]
+};
+exports.buttonProps = buttonProps;

package/lib/button/src/button.d.ts

@@ -0,0 +1,6 @@
+import { PropType, ExtractPropTypes } from 'vue';
+export declare const buttonProps: {
+    readonly color: StringConstructor;
+    readonly size: PropType<number | string>;
+};
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;

package/lib/button/src/button.vue.cjs

@@ -0,0 +1,3 @@
+// ../compontents/button/src/button.vue
+var button_default = require("./button.vue_vue_type_script_setup_true_lang.cjs").default;
+exports.default = button_default;

package/lib/button/src/button.vue.d.ts

@@ -0,0 +1,21 @@
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/button/src/button.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,27 @@
+const require_create = require("../../utils/create.cjs");
+const require_button = require("./button.cjs");
+let vue = require("vue");
+// ../compontents/button/src/button.vue?vue&type=script&setup=true&lang.ts
+var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	name: "y-button",
+	__name: "button",
+	props: require_button.buttonProps,
+	setup(__props) {
+		const props = __props;
+		const bem = require_create.createNameSpace("button");
+		const style = (0, vue.computed)(() => {
+			if (!props.color && !props.size) return {};
+			return {
+				...props.color ? { color: props.color } : {},
+				...props.size ? { "font-size": `${props.size}px` } : {}
+			};
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("i", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(bem).b()),
+				style: (0, vue.normalizeStyle)(style.value)
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 6);
+		};
+	}
+});
+exports.default = button_vue_vue_type_script_setup_true_lang_default;

package/lib/button/style/index.css

@@ -0,0 +1,3 @@
+.y-button {
+  border: 1px solid #ccc;
+}

package/lib/component.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from 'vue';
+declare const _default: Plugin[];
+export default _default;

package/lib/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './key';

package/lib/constants/key.d.ts

@@ -0,0 +1 @@
+export declare const INSTALLED_KEY: unique symbol;

package/lib/icon/index.cjs

@@ -0,0 +1,9 @@
+require('./style/index.css');const require_with_install = require("../utils/with-install.cjs");
+const require_icon = require("./src/icon.cjs");
+const require_icon$1 = require("./src/icon.vue.cjs");
+;/* empty css                   */
+// ../compontents/icon/index.ts
+var YIcon = require_with_install.withInstall(require_icon$1.default);
+exports.YIcon = YIcon;
+exports.default = YIcon;
+exports.iconProps = require_icon.iconProps;

package/lib/icon/index.d.ts

@@ -0,0 +1,33 @@
+export declare const YIcon: import('@yangs-ui/utils/with-install').SFCWithInstall<{
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        readonly color: StringConstructor;
+        readonly size: import('vue').PropType<number | string>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        readonly color: StringConstructor;
+        readonly size: import('vue').PropType<number | string>;
+    }>> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    };
+})>;
+export default YIcon;
+export * from './src/icon';
+declare module "vue" {
+    interface GlobalComponents {
+        YIcon: typeof YIcon;
+    }
+}

package/lib/icon/src/icon.cjs

@@ -0,0 +1,23 @@
+// ../compontents/icon/src/icon.ts
+var iconProps = {
+	color: String,
+	size: [Number, String]
+};
+/**
+* const iconProps = {
+color: String,
+size: [Number, String]
+};
+这种写法是在vue组件中定义props时的写法，运行时的写法，只能写一个构造函数。String，Number本身也是构造函数
+
+为什么使用as const。ts的类型
+让所有属性变为readonly
+不能直接赋值 iconProps.color = String; // 报错，因为color是readonly属性
+
+as PropType<number | string> ts的类型
+返回一个构造函数(构造函数的返回值为number|string)
+如果color是一个对象，可以指定具体对象的属性类型 color: Object as PropType<{ name: string; age: number }>
+如果color是一个函数，color: Function as PropType<(val: string) => void>
+让ExtractPropTypes更好的推导类型，避免手动定义类型
+*/
+exports.iconProps = iconProps;

package/lib/icon/src/icon.d.ts

@@ -0,0 +1,23 @@
+import { PropType, ExtractPropTypes } from 'vue';
+export declare const iconProps: {
+    readonly color: StringConstructor;
+    readonly size: PropType<number | string>;
+};
+export type IconProps = ExtractPropTypes<typeof iconProps>;
+/**
+ * const iconProps = {
+    color: String,
+    size: [Number, String]
+  };
+  这种写法是在vue组件中定义props时的写法，运行时的写法，只能写一个构造函数。String，Number本身也是构造函数
+
+  为什么使用as const。ts的类型
+  让所有属性变为readonly
+  不能直接赋值 iconProps.color = String; // 报错，因为color是readonly属性
+
+  as PropType<number | string> ts的类型
+  返回一个构造函数(构造函数的返回值为number|string)
+  如果color是一个对象，可以指定具体对象的属性类型 color: Object as PropType<{ name: string; age: number }>
+  如果color是一个函数，color: Function as PropType<(val: string) => void>
+  让ExtractPropTypes更好的推导类型，避免手动定义类型
+ */

package/lib/icon/src/icon.vue.cjs

@@ -0,0 +1,3 @@
+// ../compontents/icon/src/icon.vue
+var icon_default = require("./icon.vue_vue_type_script_setup_true_lang.cjs").default;
+exports.default = icon_default;

package/lib/icon/src/icon.vue.d.ts

@@ -0,0 +1,21 @@
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly color: StringConstructor;
+    readonly size: import('vue').PropType<number | string>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/icon/src/icon.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,27 @@
+const require_create = require("../../utils/create.cjs");
+const require_icon = require("./icon.cjs");
+let vue = require("vue");
+// ../compontents/icon/src/icon.vue?vue&type=script&setup=true&lang.ts
+var icon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	name: "y-icon",
+	__name: "icon",
+	props: require_icon.iconProps,
+	setup(__props) {
+		const props = __props;
+		const bem = require_create.createNameSpace("icon");
+		const iconStyle = (0, vue.computed)(() => {
+			if (!props.color && !props.size) return {};
+			return {
+				...props.color ? { color: props.color } : {},
+				...props.size ? { "font-size": `${props.size}px` } : {}
+			};
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("i", {
+				class: (0, vue.normalizeClass)((0, vue.unref)(bem).b()),
+				style: (0, vue.normalizeStyle)(iconStyle.value)
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 6);
+		};
+	}
+});
+exports.default = icon_vue_vue_type_script_setup_true_lang_default;

package/lib/icon/style/index.css

@@ -0,0 +1,6 @@
+.y-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  display: inline-flex;
+}

package/lib/index.cjs

@@ -0,0 +1,18 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_index = require("./icon/index.cjs");
+const require_index$1 = require("./button/index.cjs");
+// index.prod.ts
+var components = [require_index.YIcon, require_index$1.YButton];
+var install = (app) => {
+	components.forEach((component) => {
+		app.use(component);
+	});
+};
+var installer = { install };
+exports.YButton = require_index$1.YButton;
+exports.YIcon = require_index.YIcon;
+exports.default = installer;
+exports.install = install;

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export * from '@yangs-ui/components';
+export * from '@yangs-ui/constants';
+declare const installer: {
+    install: (app: any) => void;
+};
+export declare const install: (app: any) => void;
+export default installer;

package/lib/index.prod.d.ts

@@ -0,0 +1,8 @@
+import { YIcon } from '@yangs-ui/components/icon';
+import { YButton } from '@yangs-ui/components/button';
+declare const install: (app: any) => void;
+declare const installer: {
+    install: (app: any) => void;
+};
+export default installer;
+export { install, YIcon, YButton };

package/lib/make-install.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'vue';
+export declare function makeInstall(components: Plugin[]): {
+    install: (app: any) => void;
+};

package/lib/utils/create.cjs

@@ -0,0 +1,44 @@
+// ../utils/create.ts
+function _bem(prefixName, blockSuffix, element, modifier) {
+	if (blockSuffix) prefixName += `-${blockSuffix}`;
+	if (element) prefixName += `__${element}`;
+	if (modifier) prefixName += `--${modifier}`;
+	return prefixName;
+}
+function createBem(prefixName) {
+	const b = (blockSuffix = "") => _bem(prefixName, blockSuffix, "", "");
+	const e = (element = "") => _bem(prefixName, "", element, "");
+	const m = (modifier = "") => _bem(prefixName, "", "", modifier);
+	const be = (blockSuffix, element) => blockSuffix && element ? _bem(prefixName, blockSuffix, element, "") : "";
+	const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(prefixName, blockSuffix, "", modifier) : "";
+	const em = (element, modifier) => element && modifier ? _bem(prefixName, "", element, modifier) : "";
+	const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(prefixName, blockSuffix, element, modifier) : "";
+	const is = (name, state) => {
+		if (state) return `is-${name}`;
+		return "";
+	};
+	return {
+		b,
+		e,
+		m,
+		be,
+		bm,
+		em,
+		bem,
+		is
+	};
+}
+function createNameSpace(name) {
+	return createBem(`y-${name}`);
+}
+/**
+*  const bem = createNameSpace("icon");
+console.log(bem.b("block"));
+console.log(bem.e("element"));
+console.log(bem.m("modifier"));
+console.log(bem.be("block", "element"));
+console.log(bem.bm("block", "modifier"));
+console.log(bem.em("element", "modifier"));
+console.log(bem.bem("block", "element", "modifier"));
+*/
+exports.createNameSpace = createNameSpace;

package/lib/utils/create.d.ts

@@ -0,0 +1,20 @@
+export declare function createNameSpace(name: string): {
+    b: (blockSuffix?: string) => string;
+    e: (element?: string) => string;
+    m: (modifier?: string) => string;
+    be: (blockSuffix: string, element: string) => string;
+    bm: (blockSuffix: string, modifier: string) => string;
+    em: (element: string, modifier: string) => string;
+    bem: (blockSuffix: string, element: string, modifier: string) => string;
+    is: (name: string, state: string | boolean) => string;
+};
+/**
+ *  const bem = createNameSpace("icon");
+  console.log(bem.b("block"));
+  console.log(bem.e("element"));
+  console.log(bem.m("modifier"));
+  console.log(bem.be("block", "element"));
+  console.log(bem.bm("block", "modifier"));
+  console.log(bem.em("element", "modifier"));
+  console.log(bem.bem("block", "element", "modifier"));
+ */

package/lib/utils/with-install.cjs

@@ -0,0 +1,9 @@
+// ../utils/with-install.ts
+function withInstall(component) {
+	component.install = function(app) {
+		const { name } = component;
+		app.component(name, component);
+	};
+	return component;
+}
+exports.withInstall = withInstall;

package/lib/utils/with-install.d.ts

@@ -0,0 +1,3 @@
+import { ObjectPlugin } from 'vue';
+export type SFCWithInstall<T> = T & ObjectPlugin;
+export declare function withInstall<T>(component: T): SFCWithInstall<T>;

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "yangs-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "type": "module",
+  "version": "0.0.2",
+  "description": "A Component Library for Vue 3",
+  "keywords": [
+    "yangs-ui",
+    "ui framework",
+    "ui",
+    "vue"
+  ],
+  "license": "MIT",
+  "main": "./lib/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "unpkg": "./dist/umd/index.full.js",
+  "jsdelivr": "./dist/umd/index.full.js",
+  "style": "./dist/umd/index.css",
+  "exports": {
+    ".": {
+      "types": "./es/index.d.ts",
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./es": {
+      "types": "./es/index.d.ts",
+      "import": "./es/index.js"
+    },
+    "./lib": {
+      "types": "./lib/index.d.ts",
+      "require": "./lib/index.js"
+    },
+    "./es/*": {
+      "types": [
+        "./es/*.d.ts",
+        "./es/*/index.d.ts"
+      ],
+      "import": "./es/*.js"
+    },
+    "./lib/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./lib/*.js"
+    },
+    "./lib/*": {
+      "types": [
+        "./lib/*.d.ts",
+        "./lib/*/index.d.ts"
+      ],
+      "require": "./lib/*.js"
+    },
+    "./*": "./*"
+  },
+  "sideEffects": [
+    "**/style/**"
+  ]
 }

package/umd/index.full.css

@@ -0,0 +1,8 @@
+.y-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  display: inline-flex;
+}.y-button {
+  border: 1px solid #ccc;
+}/*$vite$:1*/

package/umd/index.full.js

@@ -0,0 +1,127 @@
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.YangsUI = {}, global.Vue));
+})(this, function(exports, vue) {
+	Object.defineProperties(exports, {
+		__esModule: { value: true },
+		[Symbol.toStringTag]: { value: "Module" }
+	});
+	// ../utils/with-install.ts
+	function withInstall(component) {
+		component.install = function(app) {
+			const { name } = component;
+			app.component(name, component);
+		};
+		return component;
+	}
+	// ../utils/create.ts
+	function _bem(prefixName, blockSuffix, element, modifier) {
+		if (blockSuffix) prefixName += `-${blockSuffix}`;
+		if (element) prefixName += `__${element}`;
+		if (modifier) prefixName += `--${modifier}`;
+		return prefixName;
+	}
+	function createBem(prefixName) {
+		const b = (blockSuffix = "") => _bem(prefixName, blockSuffix, "", "");
+		const e = (element = "") => _bem(prefixName, "", element, "");
+		const m = (modifier = "") => _bem(prefixName, "", "", modifier);
+		const be = (blockSuffix, element) => blockSuffix && element ? _bem(prefixName, blockSuffix, element, "") : "";
+		const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(prefixName, blockSuffix, "", modifier) : "";
+		const em = (element, modifier) => element && modifier ? _bem(prefixName, "", element, modifier) : "";
+		const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(prefixName, blockSuffix, element, modifier) : "";
+		const is = (name, state) => {
+			if (state) return `is-${name}`;
+			return "";
+		};
+		return {
+			b,
+			e,
+			m,
+			be,
+			bm,
+			em,
+			bem,
+			is
+		};
+	}
+	function createNameSpace(name) {
+		return createBem(`y-${name}`);
+	}
+	/**
+	*  const bem = createNameSpace("icon");
+	console.log(bem.b("block"));
+	console.log(bem.e("element"));
+	console.log(bem.m("modifier"));
+	console.log(bem.be("block", "element"));
+	console.log(bem.bm("block", "modifier"));
+	console.log(bem.em("element", "modifier"));
+	console.log(bem.bem("block", "element", "modifier"));
+	*/
+	// ../compontents/icon/src/icon.ts
+	var iconProps = {
+		color: String,
+		size: [Number, String]
+	};
+	// ../compontents/icon/index.ts
+	var YIcon = withInstall(/* @__PURE__ */ (0, vue.defineComponent)({
+		name: "y-icon",
+		__name: "icon",
+		props: iconProps,
+		setup(__props) {
+			const props = __props;
+			const bem = createNameSpace("icon");
+			const iconStyle = (0, vue.computed)(() => {
+				if (!props.color && !props.size) return {};
+				return {
+					...props.color ? { color: props.color } : {},
+					...props.size ? { "font-size": `${props.size}px` } : {}
+				};
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("i", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(bem).b()),
+					style: (0, vue.normalizeStyle)(iconStyle.value)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 6);
+			};
+		}
+	}));
+	// ../compontents/button/src/button.ts
+	var buttonProps = {
+		color: String,
+		size: [Number, String]
+	};
+	// ../compontents/button/index.ts
+	var YButton = withInstall(/* @__PURE__ */ (0, vue.defineComponent)({
+		name: "y-button",
+		__name: "button",
+		props: buttonProps,
+		setup(__props) {
+			const props = __props;
+			const bem = createNameSpace("button");
+			const style = (0, vue.computed)(() => {
+				if (!props.color && !props.size) return {};
+				return {
+					...props.color ? { color: props.color } : {},
+					...props.size ? { "font-size": `${props.size}px` } : {}
+				};
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("i", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(bem).b()),
+					style: (0, vue.normalizeStyle)(style.value)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 6);
+			};
+		}
+	}));
+	// index.prod.ts
+	var components = [YIcon, YButton];
+	var install = (app) => {
+		components.forEach((component) => {
+			app.use(component);
+		});
+	};
+	var installer = { install };
+	exports.YButton = YButton;
+	exports.YIcon = YIcon;
+	exports.default = installer;
+	exports.install = install;
+});

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.