yangs-ui 0.0.0-stage → 0.0.1

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.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.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.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.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.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.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/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.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_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/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/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.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_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/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/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/package.json

@@ -1,6 +1,63 @@
 {
   "name": "yangs-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "type": "module",
+  "version": "0.0.1",
+  "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",
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "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.