@ceale/util 1.5.0 → 1.6.0

package/dist/cjs/index.js

@@ -29,7 +29,8 @@ var __export = (target, all) => {
 // src/index.ts
 var exports_src = {};
 __export(exports_src, {
-  URI: () => URI
+  uri: () => uri,
+  css: () => css
 });
 module.exports = __toCommonJS(exports_src);
 
@@ -95,12 +96,12 @@ Object.defineProperty(String.prototype, "toKebabCase", {
   enumerable: false
 });
 // src/uri.ts
-var URI;
-((URI) => {
+var uri;
+((uri) => {
   const leftSlash = /^\/(?=[^\/])/g;
   const rightSlash = /(?<=[^\/])\/$/g;
   const innerSlash = /(?<=[^\/])\/(?=[^\/])/g;
-  URI.join = (...path) => {
+  uri.join = (...path) => {
     return path.filter((path2) => path2.length > 0).map((path2, index, pathArray) => {
       if (index === 0) {
         return path2.replace(rightSlash, "").split(innerSlash);
@@ -129,7 +130,7 @@ var URI;
       }
     }, "");
   };
-})(URI ||= {});
+})(uri ||= {});
 // src/class.ts
 Object.defineProperty(Function.prototype, "isDirectSubclass", {
   value: function(potentialChild) {
@@ -181,3 +182,21 @@ Object.defineProperty(Function.prototype, "isInstance", {
   configurable: true,
   enumerable: false
 });
+// src/css.ts
+var css;
+((css) => {
+  css.rule = (rule2) => {
+    return Object.entries(rule2).map(([key, value]) => `${key.toKebabCase()}: ${value};`).join(`
+`);
+  };
+  css.selector = (selector2, rule2) => {
+    return selector2 + "{" + rule2 + "}";
+  };
+  css.at = (identifier, rule2) => {
+    return identifier + (rule2 ? "{" + rule2 + "}" : "");
+  };
+  css.join = (...rules) => {
+    return rules.join(`
+`);
+  };
+})(css ||= {});

package/dist/esm/index.js

@@ -60,12 +60,12 @@ Object.defineProperty(String.prototype, "toKebabCase", {
   enumerable: false
 });
 // src/uri.ts
-var URI;
-((URI) => {
+var uri;
+((uri) => {
   const leftSlash = /^\/(?=[^\/])/g;
   const rightSlash = /(?<=[^\/])\/$/g;
   const innerSlash = /(?<=[^\/])\/(?=[^\/])/g;
-  URI.join = (...path) => {
+  uri.join = (...path) => {
     return path.filter((path2) => path2.length > 0).map((path2, index, pathArray) => {
       if (index === 0) {
         return path2.replace(rightSlash, "").split(innerSlash);
@@ -94,7 +94,7 @@ var URI;
       }
     }, "");
   };
-})(URI ||= {});
+})(uri ||= {});
 // src/class.ts
 Object.defineProperty(Function.prototype, "isDirectSubclass", {
   value: function(potentialChild) {
@@ -146,6 +146,25 @@ Object.defineProperty(Function.prototype, "isInstance", {
   configurable: true,
   enumerable: false
 });
+// src/css.ts
+var css;
+((css) => {
+  css.rule = (rule2) => {
+    return Object.entries(rule2).map(([key, value]) => `${key.toKebabCase()}: ${value};`).join(`
+`);
+  };
+  css.selector = (selector2, rule2) => {
+    return selector2 + "{" + rule2 + "}";
+  };
+  css.at = (identifier, rule2) => {
+    return identifier + (rule2 ? "{" + rule2 + "}" : "");
+  };
+  css.join = (...rules) => {
+    return rules.join(`
+`);
+  };
+})(css ||= {});
 export {
-  URI
+  uri,
+  css
 };

package/dist/types/class.d.ts

@@ -2,29 +2,29 @@ type AnyClass = new (...args: any[]) => any;
 declare global {
     interface Function {
         /**
-         * 检查 `potentialChild` 是否是当前类的直接子类。
-         * @param potentialChild 潜在的子类构造函数。
-         * @returns 如果是直接子类，则返回 `true`；否则返回 `false`。
+         * 检查 `potentialChild` 是否是当前类的直接子类
+         * @param potentialChild 潜在的子类构造函数
+         * @returns 如果是直接子类，则返回 `true`；否则返回 `false`
          */
         isDirectSubclass(this: AnyClass, potentialChild: unknown): boolean;
         /**
-         * 检查 `potentialDescendant` 是否是当前类的子孙类或当前类本身。
-         * @param potentialDescendant 潜在的子孙类或类本身。
-         * @returns 如果是子孙类或类本身，则返回 `true`；否则返回 `false`。
+         * 检查 `potentialDescendant` 是否是当前类的子孙类或当前类本身
+         * @param potentialDescendant 潜在的子孙类或类本身
+         * @returns 如果是子孙类或类本身，则返回 `true`；否则返回 `false`
          */
         isSubclass(this: AnyClass, potentialDescendant: unknown): boolean;
         /**
-         * 检查 `potentialInstance` 是否由当前类直接构造。
-         * 判断依据: `Object.getPrototypeOf(potentialInstance).constructor === this`。
-         * @param potentialInstance 潜在的实例对象。
-         * @returns 如果是由当前类直接创建的实例，则返回 `true`；否则返回 `false`。
+         * 检查 `potentialInstance` 是否由当前类直接构造
+         * 判断依据: `Object.getPrototypeOf(potentialInstance).constructor === this`
+         * @param potentialInstance 潜在的实例对象
+         * @returns 如果是由当前类直接创建的实例，则返回 `true`；否则返回 `false`
          */
         isDirectInstance(this: AnyClass, potentialInstance: unknown): boolean;
         /**
-         * 检查 `potentialInstance` 是否是当前类或其任何子类的实例。
-         * 内部使用 `instanceof` 操作符。
-         * @param potentialInstance 潜在的实例对象。
-         * @returns 如果是实例，则返回 `true`；否则返回 `false`。
+         * 检查 `potentialInstance` 是否是当前类或其任何子类的实例
+         * 内部使用 `instanceof` 操作符
+         * @param potentialInstance 潜在的实例对象
+         * @returns 如果是实例，则返回 `true`；否则返回 `false`
          */
         isInstance(this: AnyClass, potentialInstance: unknown): boolean;
     }

package/dist/types/css.d.ts

@@ -0,0 +1,77 @@
+import type { CSSProperties } from "vue";
+import type { AtRules } from "csstype";
+export declare namespace css {
+    const RuleValueSymbol: unique symbol;
+    type RuleValue = string & {
+        [RuleValueSymbol]: never;
+    };
+    const RuleBlockValueSymbol: unique symbol;
+    type RuleBlockValue = string & {
+        [RuleBlockValueSymbol]: never;
+    };
+    const AtValueSymbol: unique symbol;
+    type AtValue = string & {
+        [AtValueSymbol]: never;
+    };
+    /**
+     * 从一个样式对象，创建一个 CSS 规则字符串
+     * @param styles 一个样式对象，使用 Vue 的 `CSSProperties` 类型，同时允许自定义属性
+     * @returns 返回类型为`RuleValue`的字符串，可以传入`css.selector()`和`css.at()`
+     *
+     * @example
+     * css.rule({
+     *     backgroundColor: "red",
+     *     fontSize: "16px",
+     *     "--my-custom-var": "blue"
+     * })
+     */
+    export const rule: (rule: CSSProperties & {
+        [key: string]: string;
+    }) => RuleValue;
+    /**
+     * 根据选择器和 CSS 规则，创建一个 CSS 规则块字符串
+     * @param selector CSS 选择器字符串
+     * @param rule CSS 规则，类型为`RuleValue`的字符串
+     * @returns 返回类型为`RuleBlockValue`的字符串，可以传入`css.at()`和`css.join()`
+     *
+     * @example
+     * css.selector(
+     *     "#my-element",
+     *     css.rule({
+     *         color: "blue"
+     *     })
+     * ) // -> "#my-element { color: blue; }"
+     */
+    export const selector: (selector: string, rule: RuleValue) => RuleBlockValue;
+    /**
+     * 根据 @ 规则和可选的 CSS 规则或规则块，创建一个  @ 规则块字符串
+     * @param identifier @ 规则，如 "@media (min-width: 768px)"
+     * @param rule 可选，类型为`RuleValue`的字符串，或类型为`SelectorValue`的字符串
+     * @returns 返回类型为`AtValue`的字符串，可以传入`css.join()`
+     *
+     * @example
+     * css.at(
+     *     "@font-face",
+     *     css.rule({
+     *         scr: "..."
+     *     })
+     * ) // -> "@font-face { scr: "..."; }"
+     *
+     * @example
+     * css.at(
+     *     "@media (min-width: 768px)",
+     *     css.selector(
+     *         "#my-element",
+     *         css.rule(...)
+     *     )
+     * ) // -> "@media (min-width: 768px) { #my-element { ... } }"
+     */
+    export const at: (identifier: AtRules | (string & {}), rule?: RuleValue | RuleBlockValue) => AtValue;
+    /**
+     * 拼接 CSS 规则块和 @ 规则块，返回一个字符串
+     * @param rules CSS 规则块和 @ 规则块，类型为`RuleBlockValue`或`AtValue`的字符串
+     * @returns 返回标准的字符串
+     */
+    export const join: (...rules: (RuleBlockValue | AtValue)[]) => string;
+    export {};
+}

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./string";
 export * from "./uri";
 export * from "./class";
+export * from "./css";

package/dist/types/uri.d.ts

@@ -1,3 +1,24 @@
-export declare namespace URI {
+export declare namespace uri {
+    /**
+     * 拼接路径字符串：
+     * - 解析路径中的 `.` 和 `..`
+     * - 保留 URL 协议头 (如 `http://`) 和协议自适应的开头 (如 `//domain`)
+     * - 保留主动传入的连续斜杠 (如 `a//b`)
+     *
+     * @param path 若干个要拼接的路径片段
+     * @returns 拼接后的路径字符串
+     *
+     * @example
+     * // 基础拼接
+     * uri.join('/a/', 'b', '/c') // -> "/a/b/c"
+     *
+     * @example
+     * // 路径解析
+     * uri.join('/a/b/../c') // -> "/a/c"
+     *
+     * @example
+     * // 保留协议头
+     * uri.join("http://example.com", "a") // -> "http://example.com/a"
+     */
     const join: (...path: string[]) => string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ceale/util",
   "author": "Ceale",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "module": "index.ts",
   "type": "module",
   "main": "dist/esm/index.js",
@@ -29,5 +29,9 @@
   },
   "peerDependencies": {
     "typescript": "^5"
+  },
+  "dependencies": {
+    "@types/vue": "^2.0.0",
+    "csstype": "^3.1.3"
   }
 }