cdui-js 1.0.7 → 1.0.8

package/build/css.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 
 export interface Rule {
   match: string;
-  build(outputs: string[], selector: string, value: string): void;
+  build(outputs: string[], selector: string, value: string, before: string[]): void;
 }
 
 export const rules: Rule[] = [
@@ -35,13 +35,13 @@ export const rules: Rule[] = [
   },
   {
     match: '.border-c',
-    build: (outputs: string[], selector: string, value: string) => {
+    build: (outputs: string[], selector: string, value: string, before: string[]) => {
       if (selector === '.border-c') {
-        outputs.push(`.border { border-color: ${value} }`);
-        outputs.push(`.border-t { border-top-color: ${value} }`);
-        outputs.push(`.border-r { border-right-color: ${value} }`);
-        outputs.push(`.border-b { border-bottom-color: ${value} }`);
-        outputs.push(`.border-l { border-left-color: ${value} }`);
+        before.push(`.border { border-color: ${value} }`);
+        before.push(`.border-t { border-top-color: ${value} }`);
+        before.push(`.border-r { border-right-color: ${value} }`);
+        before.push(`.border-b { border-bottom-color: ${value} }`);
+        before.push(`.border-l { border-left-color: ${value} }\n`);
       }
 
       outputs.push(`${selector} { border-color: ${value} }`);
@@ -143,9 +143,9 @@ export const rules: Rule[] = [
   },
   {
     match: '.icon-c',
-    build: (outputs: string[], selector: string, value: string) => {
+    build: (outputs: string[], selector: string, value: string, before: string[]) => {
       if (selector === '.icon-c') {
-        outputs.unshift(`body { stroke: ${value}; fill: ${value}; }\n.icon { stroke: inherit; fill: inherit; }\n`);
+        before.push(`body { stroke: ${value}; fill: ${value}; }\n.icon { stroke: inherit; fill: inherit; }`);
       }
 
       outputs.push(`${selector} { stroke: ${value}; fill: ${value}; }`);
@@ -153,9 +153,9 @@ export const rules: Rule[] = [
   },
   {
     match: '.icon-s',
-    build: (outputs: string[], selector: string, value: string) => {
+    build: (outputs: string[], selector: string, value: string, before: string[]) => {
       if (selector === '.icon-s') {
-        outputs.unshift(`.icon { width: ${value}; height: ${value}; }\n`);
+        before.push(`.icon { width: ${value}; height: ${value}; }\n`);
       }
 
       outputs.push(`${selector} .icon { width: ${value}; height: ${value}; }`);
@@ -188,32 +188,39 @@ const findRule = (name: string) => {
   }
 };
 
-const parse = (rule: Rule, outputs: string[], selectorPrefix: string, name: string, value: string) => {
+const parse = (
+  rule: Rule,
+  outputs: string[],
+  selectorPrefix: string,
+  name: string,
+  value: string,
+  before: string[],
+) => {
   if (name.endsWith('-hover')) {
-    rule.build(outputs, selectorPrefix + name + ':hover', value);
-    rule.build(outputs, selectorPrefix + '.hover:hover ' + name, value);
+    rule.build(outputs, selectorPrefix + name + ':hover', value, before);
+    rule.build(outputs, selectorPrefix + '.hover:hover ' + name, value, before);
     return;
   }
 
   if (name.endsWith('-active')) {
-    rule.build(outputs, selectorPrefix + name + ':active', value);
-    rule.build(outputs, selectorPrefix + '.active:active ' + name, value);
+    rule.build(outputs, selectorPrefix + name + ':active', value, before);
+    rule.build(outputs, selectorPrefix + '.active:active ' + name, value, before);
     return;
   }
 
   if (name.endsWith('-focus')) {
-    rule.build(outputs, selectorPrefix + name + ':focus', value);
-    rule.build(outputs, selectorPrefix + '.focus:focus ' + name, value);
+    rule.build(outputs, selectorPrefix + name + ':focus', value, before);
+    rule.build(outputs, selectorPrefix + '.focus:focus ' + name, value, before);
     return;
   }
 
   if (name.endsWith('-selected')) {
-    rule.build(outputs, selectorPrefix + name + '.selected', value);
-    rule.build(outputs, selectorPrefix + '.selected ' + name, value);
+    rule.build(outputs, selectorPrefix + name + '.selected', value, before);
+    rule.build(outputs, selectorPrefix + '.selected ' + name, value, before);
     return;
   }
 
-  rule.build(outputs, selectorPrefix + name, value);
+  rule.build(outputs, selectorPrefix + name, value, before);
 };
 
 /**
@@ -227,6 +234,7 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
   let lines = css.split(/\r?\n\s*/);
   let selectorPrefix = '';
   let outputs = [];
+  let before = [];
 
   for (let i = 0, l = lines.length; i < l; i++) {
     let line = lines[i].trim();
@@ -241,7 +249,7 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
           value = line.slice(index + 1);
 
           if ((value = value.replace(/}\s*\;*\s*/, '').trim())) {
-            rule.build(outputs, selectorPrefix + name, value);
+            rule.build(outputs, selectorPrefix + name, value, before);
           }
 
           continue;
@@ -255,7 +263,7 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
             .trim();
 
           if (value && value !== '#') {
-            parse(rule, outputs, selectorPrefix, name, value);
+            parse(rule, outputs, selectorPrefix, name, value, before);
           }
 
           continue;
@@ -283,6 +291,7 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
     }
   }
 
+  outputs.unshift(...before);
   css = outputs.join('\n');
 
   if (cssFile) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdui-js",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "main": "src/index.ts",
   "bin": {

package/src/components/Dialog.ts

@@ -1,36 +1,36 @@
-import { createRoot } from 'solid-js';
-
-import { JSX } from '../jsx';
-
-/**
- * 对话框
- */
-export type Dialog = HTMLElement & {
-  /**
-   * 关闭对话框方法
-   */
-  close(): void;
-};
-
-/**
- * 显示对话框
- *
- * @param component 对话框组件
- * @returns 关闭对话框方法
- */
-export const showDialog = (component: () => JSX.Element): Dialog => {
-  return createRoot((dispose) => {
-    let body = document.body;
-    let dialog = component() as Dialog;
-
-    dialog.style.cssText = 'position:fixed;z-index:9';
-    body.appendChild(dialog);
-
-    dialog.close = () => {
-      body.removeChild(dialog);
-      dispose();
-    };
-
-    return dialog;
-  });
-};
+import { createRoot } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+/**
+ * 对话框
+ */
+export type Dialog = HTMLElement & {
+  /**
+   * 关闭对话框方法
+   */
+  close(): void;
+};
+
+/**
+ * 显示对话框
+ *
+ * @param component 对话框组件
+ * @returns 关闭对话框方法
+ */
+export const showDialog = (component: () => JSX.Element): Dialog => {
+  return createRoot((dispose) => {
+    let body = document.body;
+    let dialog = component() as Dialog;
+
+    dialog.style.cssText = 'position:fixed;z-index:9';
+    body.appendChild(dialog);
+
+    dialog.close = () => {
+      body.removeChild(dialog);
+      dispose();
+    };
+
+    return dialog;
+  });
+};

package/src/components/For.ts

@@ -1,26 +1,26 @@
-import { createMemo, mapArray } from 'solid-js';
-
-import { JSX } from '../jsx';
-
-export const For = <T, U extends JSX.Element>(props: {
-  /**
-   * 要循环的数据集合
-   */
-  each: readonly T[];
-  /**
-   * 子节点
-   *
-   * @param item 数据项
-   * @param index 索引
-   * @returns JSX.Element
-   */
-  children: (item: T, index: () => number) => U;
-}) => {
-  return createMemo(
-    mapArray(() => props.each, props.children),
-    void 0,
-    {
-      name: 'value',
-    }
-  ) as unknown as JSX.Element;
-};
+import { createMemo, mapArray } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+export const For = <T, U extends JSX.Element>(props: {
+  /**
+   * 要循环的数据集合
+   */
+  each: readonly T[];
+  /**
+   * 子节点
+   *
+   * @param item 数据项
+   * @param index 索引
+   * @returns JSX.Element
+   */
+  children: (item: T, index: () => number) => U;
+}) => {
+  return createMemo(
+    mapArray(() => props.each, props.children),
+    void 0,
+    {
+      name: 'value',
+    }
+  ) as unknown as JSX.Element;
+};

package/src/components/If.ts

@@ -1,14 +1,14 @@
-import { createMemo } from 'solid-js';
-
-import { JSX } from '../jsx';
-
-/**
- * 条件渲染
- *
- * @param props 属性集合
- */
-export const If = (props: { when: any; children: JSX.Element | JSX.Element[]; else?: JSX.Element | JSX.Element[] }) => {
-  return createMemo(() => {
-    return props.when ? props.children : props.else;
-  }) as unknown as JSX.Element;
-};
+import { createMemo } from 'solid-js';
+
+import { JSX } from '../jsx';
+
+/**
+ * 条件渲染
+ *
+ * @param props 属性集合
+ */
+export const If = (props: { when: any; children: JSX.Element | JSX.Element[]; else?: JSX.Element | JSX.Element[] }) => {
+  return createMemo(() => {
+    return props.when ? props.children : props.else;
+  }) as unknown as JSX.Element;
+};

package/src/components/KeepAlive.ts

@@ -1,26 +1,26 @@
-import { JSX, createMemo, createRoot, onCleanup } from 'solid-js';
-
-export const KeepAlive = (props: {
-  /**
-   * 是否显示
-   */
-  show: boolean;
-  children: JSX.Element | JSX.Element[];
-}) => {
-  let root, ondestory;
-
-  onCleanup(() => {
-    ondestory && ondestory();
-  });
-
-  return createMemo(() => {
-    return (
-      props.show &&
-      (root ||
-        (root = createRoot((dispose) => {
-          ondestory = dispose;
-          return props.children;
-        })))
-    );
-  }) as unknown as JSX.Element;
-};
+import { JSX, createMemo, createRoot, onCleanup } from 'solid-js';
+
+export const KeepAlive = (props: {
+  /**
+   * 是否显示
+   */
+  show: boolean;
+  children: JSX.Element | JSX.Element[];
+}) => {
+  let root, ondestory;
+
+  onCleanup(() => {
+    ondestory && ondestory();
+  });
+
+  return createMemo(() => {
+    return (
+      props.show &&
+      (root ||
+        (root = createRoot((dispose) => {
+          ondestory = dispose;
+          return props.children;
+        })))
+    );
+  }) as unknown as JSX.Element;
+};