cdui-js 1.0.1

package/.gitattributes

@@ -0,0 +1 @@
+* text=auto

package/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120
+}

package/README.md

@@ -0,0 +1,185 @@
+
+
+
+
+# MVVM响应式编程
+
+为便于团队合作，建议项目中的所有代码都使用`typescrpt`，本项目使用与`React`类似的响应式`MVVM`框架作为主要开发方式。
+
+响应式`（Reactivity）`增强了应用程序的交互性。这种编程范式是指系统自动响应数据或状态变化的能力，确保用户界面 (UI) 和状态保持同步，从而减少手动更新的需要。
+
+
+## 响应式原理
+
+### 响应式数据
+
+响应式对象是响应式体系的核心元素，在数据管理和系统响应中发挥着重要作用。其负责存储和管理数据，以及触发整个系统的更新。响应式对象的每-个属性都绑定了`getter`和`setter`方法。
+
+读取响应式对象的属性时，会自动调用其相应的`getter`方法，此时系统会自动收集依赖并返回其存储的值。
+修改响应式对象的属性时，会自动调用其相应的`setter`方法，会修改其存储的值且自动更新相应依赖。
+
+```tsx
+import { reactive } from 'cdui-js';
+
+// 创建响应式数据
+const state = reactive({ count: 0 });
+
+// 读取响应式属性值
+let count = state.count;
+
+// 修改响应式属性值
+state.count++;
+```
+
+### 订阅者
+
+订阅者负责追踪响应式数据的变化并在变化时自动执行相应函数，以保持系统与最新的数据变化同步。
+
+有三种订阅变化并同步的方式:
+
+1. watch
+
+```tsx
+import { reactive, watch } from 'cdui-js';
+
+// 创建响应式数据
+const state = reactive({ count: 0 });
+
+// 观测响应式数据的变化，当观测的响应式数据发生变化时，会自动执行观测函数
+watch(() => state.count, (count) => {
+  console.log(count);
+});
+```
+
+可以使用`as const`断言同时观测多个响应式数据。
+
+```tsx
+import { reactive, watch } from 'cdui-js';
+
+const state1 = reactive({ value: 0 });
+const state2 = reactive({ value: 1 });
+
+// 注意，as const 把返回值类型标记为元组
+watch(() => [state1.value, state2.value] as const, ([value1, value2]) => {
+  console.log(value1, value1);
+});
+```
+
+2. createEffect
+
+`watch`方法只有在依赖发生变化时才执行相关依赖，而`createEffect`创建时立即执行追踪函数并自动收集相应的依赖。
+
+```tsx
+import { reactive, createEffect } from 'cdui-js';
+
+const state1 = reactive({ value: 0 });
+const state2 = reactive({ value: 1 });
+
+createEffect(() => {
+  console.log(state1.value);
+
+  // 注意短路问题（state1.value 发生变化时并不会执行回调函数）
+  console.log(state2.value || state1.value);
+});
+```
+
+3. createMemo
+
+`createMemo`用于缓存响应式计算结果，只有当依赖的响应式数据发生变化时才会重新计算，注意，`createMemo`同样存在短路的问题。
+
+```tsx
+import { reactive, createMemo } from 'cdui-js';
+
+const state = reactive({ value: 0 });
+
+// 创建响应式缓存表示式（注意返回值是一个 function，只有 state.value 发生变化时才会重新计算）
+const getValue = createMemo(() => state.value + 100);
+```
+
+## `TSX`组件
+
+本项目使用`tsx`作为模板，但是没有虚拟`DOM`，也更轻量高效。
+
+```tsx
+import { reactive } from 'cdui-js';
+
+function Counter() {
+  // 创建响应式状态
+  const state = reactive({ count: 0 });
+
+  return (
+    <div>
+      <span>Count: {state.count}</span>{" "}
+      {/* 当按钮点击的时候，会自动更新相关绑定 */}
+      <button type="button" onClick={() => state.count++}>
+        Increment
+      </button>
+    </div>
+  );
+}
+```
+
+在这段代码中，当点击`Counter`组件内的按钮时，响应式数据`state.count`自增`1`，绑定了响应式属性`state.count`的部分会自动更新，但不会重新渲染整个组件。也就是说，在`return`语句之前的代码，只在函数调用时执行一次。
+
+### ref
+
+
+
+### 组件生命周期
+
+1. onMount
+
+`onMount`在组件挂载后运行，只会执行一次，且在服务端渲染时不会执行，也不跟踪任何依赖项，此时可以访问相应的`DOM`对象。
+
+```tsx
+import { onMount } from 'cdui-js';
+
+function Component() {
+  onMount(async () => {
+    
+  });
+
+  return <div>...</div>;
+}
+```
+
+2. onCleanup
+
+`onCleanup`用于在组件卸载时执行一些清理任务，以避免避免内存泄漏及一些不必要的操作。
+
+```tsx
+import { onCleanup } from 'cdui-js';
+
+function Component() {
+  const [count, setCount] = createSignal(0);
+
+  const timer = setInterval(() => {
+    setCount((prev) => prev + 1);
+  }, 1000);
+
+  // 组件卸载时清理定时器
+  onCleanup(() => {
+    clearInterval(timer);
+  });
+
+  return <div>Count: {count()}</div>;
+}
+```
+
+### class
+
+
+### style
+
+
+### 事件
+
+
+
+# `TSX`模板
+
+
+# 路由
+
+
+# 服务端渲染

package/build/css.ts

@@ -0,0 +1,293 @@
+import fs from 'fs';
+
+export interface Rule {
+  match: string;
+  build(outputs: string[], selector: string, value: string): void;
+}
+
+export const rules: Rule[] = [
+  {
+    match: '.margin',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { margin: ${value} }`);
+      outputs.push(`${selector.replace('margin', 'margin-t')} { margin-top: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-r')} { margin-right: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-b')} { margin-bottom: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-l')} { margin-left: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-x')} { margin-left: ${value}; margin-right: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-y')} { margin-top: ${value}; margin-bottom: ${value}; }\n`);
+
+      outputs.push(`${selector.replace('margin', '-margin-t')} { margin-top: -${value}; }`);
+      outputs.push(`${selector.replace('margin', '-margin-r')} { margin-right: -${value}; }`);
+      outputs.push(`${selector.replace('margin', '-margin-b')} { margin-bottom: -${value}; }`);
+      outputs.push(`${selector.replace('margin', '-margin-l')} { margin-left: -${value}; }`);
+
+      outputs.push(`${selector.replace('margin', 'padding-m')} { padding: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-t')} { padding-top: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-r')} { padding-right: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-b')} { padding-bottom: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-l')} { padding-left: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-x')} { padding-left: ${value}; padding-right: ${value}; }`);
+      outputs.push(
+        `${selector.replace('margin', 'padding-m-y')} { padding-top: ${value}; padding-bottom: ${value}; }\n`,
+      );
+    },
+  },
+  {
+    match: '.border-c',
+    build: (outputs: string[], selector: string, value: 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} }`);
+      }
+
+      outputs.push(`${selector} { border-color: ${value} }`);
+      outputs.push(`${selector.replace('border-c', 'border-t-c')} { border-top-color: ${value}; }`);
+      outputs.push(`${selector.replace('border-c', 'border-r-c')} { border-right-color: ${value}; }`);
+      outputs.push(`${selector.replace('border-c', 'border-b-c')} { border-bottom-color: ${value}; }`);
+      outputs.push(`${selector.replace('border-c', 'border-l-c')} { border-left-color: ${value}; }`);
+      outputs.push(
+        `${selector.replace('border-c', 'border-x-c')} { border-left-color: ${value}; border-right-color: ${value}; }`,
+      );
+      outputs.push(
+        `${selector.replace('border-c', 'border-y-c')} { border-top-color: ${value}; border-bottom-color: ${value}; }`,
+      );
+    },
+  },
+  {
+    match: '.border-s',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { border-style: ${value} }`);
+      outputs.push(`${selector.replace('border-s', 'border-t-s')} { border-top-style: ${value}; }`);
+      outputs.push(`${selector.replace('border-s', 'border-r-s')} { border-right-style: ${value}; }`);
+      outputs.push(`${selector.replace('border-s', 'border-b-s')} { border-bottom-style: ${value}; }`);
+      outputs.push(`${selector.replace('border-s', 'border-l-s')} { border-left-style: ${value}; }`);
+      outputs.push(
+        `${selector.replace('border-s', 'border-x-s')} { border-left-style: ${value}; border-right-style: ${value}; }`,
+      );
+      outputs.push(
+        `${selector.replace('border-s', 'border-y-s')} { border-top-style: ${value}; border-bottom-style: ${value}; }`,
+      );
+    },
+  },
+  {
+    match: '.border',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { border-width: ${value}; border-style: solid; }`);
+      outputs.push(
+        `${selector.replace('border', 'border-t')} { border-top-width: ${value}; border-top-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-r')} { border-right-width: ${value}; border-right-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-b')} { border-bottom-width: ${value}; border-bottom-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-l')} { border-left-width: ${value}; border-left-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-x')} { border-left-width: ${value}; border-right-width: ${value}; border-left-style: solid; border-right-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-y')} { border-top-width: ${value}; border-bottom-width: ${value}; border-top-style: solid; border-bottom-style: solid; }`,
+      );
+    },
+  },
+  {
+    match: '.round',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { border-radius: ${value} }`);
+    },
+  },
+  {
+    match: '.padding',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { padding: ${value} }`);
+      outputs.push(`${selector.replace('padding', 'padding-t')} { padding-top: ${value}; }`);
+      outputs.push(`${selector.replace('padding', 'padding-r')} { padding-right: ${value}; }`);
+      outputs.push(`${selector.replace('padding', 'padding-b')} { padding-bottom: ${value}; }`);
+      outputs.push(`${selector.replace('padding', 'padding-l')} { padding-left: ${value}; }`);
+      outputs.push(`${selector.replace('padding', 'padding-x')} { padding-left: ${value}; padding-right: ${value}; }`);
+      outputs.push(
+        `${selector.replace('padding', 'padding-y')} { padding-top: ${value}; padding-bottom: ${value}; }\n`,
+      );
+    },
+  },
+  {
+    match: '.bg-c',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { background-color: ${value} }`);
+    },
+  },
+  {
+    match: '.color',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { color: ${value} }`);
+    },
+  },
+  {
+    match: '.font-s',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { font-size: ${value} }`);
+    },
+  },
+  {
+    match: '.font',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { font-weight: ${value} }`);
+    },
+  },
+  {
+    match: '.icon-c',
+    build: (outputs: string[], selector: string, value: string) => {
+      if (selector === '.icon-c') {
+        outputs.unshift(`body { stroke: ${value}; fill: ${value}; }\n.icon { stroke: inherit; fill: inherit; }\n`);
+      }
+
+      outputs.push(`${selector} { stroke: ${value}; fill: ${value}; }`);
+    },
+  },
+  {
+    match: '.icon-s',
+    build: (outputs: string[], selector: string, value: string) => {
+      if (selector === '.icon-s') {
+        outputs.unshift(`.icon { width: ${value}; height: ${value}; }\n`);
+      }
+
+      outputs.push(`${selector} .icon { width: ${value}; height: ${value}; }`);
+      outputs.push(`${selector}.icon { width: ${value}; height: ${value}; }`);
+    },
+  },
+  {
+    match: '.button',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { ${value} }`);
+    },
+  },
+  {
+    match: '.link',
+    build: (outputs: string[], selector: string, value: string) => {
+      if (selector === '.link') {
+        outputs.push(`a, .link { ${value} }`);
+      } else {
+        outputs.push(`${selector} { ${value} }`);
+      }
+    },
+  },
+];
+
+const findRule = (name: string) => {
+  for (let i = 0, l = rules.length; i < l; i++) {
+    if (name.startsWith(rules[i].match)) {
+      return rules[i];
+    }
+  }
+};
+
+const parse = (rule: Rule, outputs: string[], selectorPrefix: string, name: string, value: string) => {
+  if (name.endsWith('-hover')) {
+    rule.build(outputs, selectorPrefix + name + ':hover', value);
+    rule.build(outputs, selectorPrefix + '.hover:hover ' + name, value);
+    return;
+  }
+
+  if (name.endsWith('-active')) {
+    rule.build(outputs, selectorPrefix + name + ':active', value);
+    rule.build(outputs, selectorPrefix + '.active:active ' + name, value);
+    return;
+  }
+
+  if (name.endsWith('-focus')) {
+    rule.build(outputs, selectorPrefix + name + ':focus', value);
+    rule.build(outputs, selectorPrefix + '.focus:focus ' + name, value);
+    return;
+  }
+
+  if (name.endsWith('-selected')) {
+    rule.build(outputs, selectorPrefix + name + '.selected', value);
+    rule.build(outputs, selectorPrefix + '.selected ' + name, value);
+    return;
+  }
+
+  rule.build(outputs, selectorPrefix + name, value);
+};
+
+/**
+ * 解析 CSS 规范生成原子样式
+ *
+ * @param cssRuleFile CSS 规范文件路径（markdown规范文档）
+ * @param cssFile 写 css 文件路径
+ */
+export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
+  let css = fs.readFileSync(cssRuleFile, 'utf8');
+  let lines = css.split(/\r?\n\s*/);
+  let selectorPrefix = '';
+  let outputs = [];
+
+  for (let i = 0, l = lines.length; i < l; i++) {
+    let line = lines[i].trim();
+
+    switch (line[0] || '') {
+      case '.':
+        let index = line.indexOf('{');
+        let name, value, rule: Rule;
+
+        // 样式组
+        if (index > 0 && (name = line.slice(0, index).trim()) && (rule = findRule(name))) {
+          value = line.slice(index + 1);
+
+          if ((value = value.replace(/}\s*\;*\s*/, '').trim())) {
+            rule.build(outputs, selectorPrefix + name, value);
+          }
+
+          continue;
+        }
+
+        // 单样式值
+        if ((index = line.indexOf(':')) > 0 && (name = line.slice(0, index).trim()) && (rule = findRule(name))) {
+          value = line
+            .slice(index + 1)
+            .replace(/;\s*/g, '')
+            .trim();
+
+          if (value && value !== '#') {
+            parse(rule, outputs, selectorPrefix, name, value);
+          }
+
+          continue;
+        }
+
+        console.error('不合法的格式：' + lines[i]);
+        break;
+
+      case '+': // 上级选择器
+        selectorPrefix = line.slice(1).trim() + ' ';
+        outputs.push('\n');
+        break;
+
+      case '#': // 新的分组
+        selectorPrefix = '';
+        outputs.push('\n');
+        break;
+
+      case '>':
+      case '':
+        break;
+
+      default:
+        console.error('不合法的格式：' + lines[i]);
+    }
+  }
+
+  css = outputs.join('\n');
+
+  if (cssFile) {
+    fs.writeFileSync(cssFile, css, 'utf8');
+  }
+
+  return css;
+};

package/build/icons.ts

@@ -0,0 +1,108 @@
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * 从指定 svg 文件读取 symbol 内容
+ *
+ * @param svgFile 指定 svg 文件
+ * @param removeColor 去色标记 fill: 去填充色  stroke：去描边色  both：都去
+ */
+export const readIconFile = (svgFile: string, removeColor?: 'fill' | 'stroke' | 'both'): string => {
+  let name = path.basename(svgFile).replace('.svg', '');
+  let svg = fs.readFileSync(svgFile, 'utf8');
+  let index = svg.indexOf(' viewBox="');
+  let viewBox = svg.slice(index, (index = svg.indexOf('"', index + 12) + 1));
+  let content = svg.slice(svg.indexOf('>', index) + 1, svg.lastIndexOf('</svg>'));
+  let hasStroke = content.indexOf(' stroke="') > 0;
+  let hasFill = content.indexOf(' fill="') > 0;
+
+  // 没有描边
+  if (!hasStroke) {
+    // 强制禁止外部修改描边
+    viewBox += ' stroke="none"';
+  } else if (!hasFill) {
+    // 没有填充则强制禁止外部修改填充
+    viewBox += ' fill="none"';
+  }
+
+  if (removeColor) {
+    // 去填充色
+    if (hasFill && removeColor !== 'stroke') {
+      content = content.replace(/ fill=\"[^"]+\"/g, '');
+    }
+
+    // 去描边色
+    if (hasStroke && removeColor !== 'fill') {
+      content = content.replace(/ stroke=\"[^"]+\"/g, '');
+    }
+  }
+
+  return `<symbol id="icon-${name}"${viewBox}>${content}</symbol>`;
+};
+
+/**
+ * 从指定图标目录读取 svg symbol 内容
+ *
+ * @param svgDirectory 指定 svg 目录
+ * @param removeColor 去色标记 fill: 去填充色  stroke：去描边色  both：都去
+ */
+export const readIconsDirectory = (svgDirectory: string, removeColor?: 'fill' | 'stroke' | 'both'): string => {
+  const outputs = [];
+  const files = fs.readdirSync(svgDirectory);
+
+  for (let i = 0, l = files.length; i < l; i++) {
+    let file = path.join(svgDirectory, files[i]);
+
+    if (path.extname(file) === '.svg') {
+      outputs.push(readIconFile(file, removeColor));
+    }
+  }
+
+  return outputs.join('\n');
+};
+
+/**
+ * 把图标 symbol 内容写入 html 文件
+ *
+ * @param htmlFile html 文件路径
+ * @param symbols 图标 symbol 集合
+ */
+export const writeIconsToHtml = (htmlFile: string, symbols: string) => {
+  let html = fs.readFileSync(htmlFile, 'utf8');
+  let index = html.indexOf('<svg id="ICONS" ');
+
+  if (index > 0) {
+    let start = html.indexOf('>', index) + 1;
+    let end = html.indexOf('</svg>', start);
+
+    html = html.slice(0, start) + '\n' + symbols + '\n' + html.slice(end);
+  } else {
+    let start = html.indexOf('>', html.indexOf('<body')) + 1;
+
+    html =
+      html.slice(0, start) +
+      '\n<svg id="ICONS" aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">' +
+      symbols +
+      '\n</svg>' +
+      html.slice(start);
+  }
+
+  fs.writeFileSync(htmlFile, html, 'utf8');
+};
+
+/**
+ * 写 svg 图标到模块文件
+ *
+ * @param moduleFile 模块文件名
+ * @param symbols svg 图标内容
+ */
+export const writeIconsModule = (moduleFile: string, symbols: string) => {
+  fs.writeFileSync(
+    moduleFile,
+    `import { loadSvgIcons } from 'cdui-js';
+
+loadSvgIcons(\`${symbols}\`);
+`,
+    'utf8',
+  );
+};

package/cli/bin.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import inquirer from 'inquirer';
+import download from 'download-git-repo';
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+
+// 定义命令
+program
+  .version('1.0.0')
+  .command('create <project-name>')
+  .description('Create a new project from a template')
+  .action(async (projectName) => {
+    // 1. 检查目录是否已存在
+    const targetDir = path.join(process.cwd(), projectName);
+
+    if (fs.existsSync(targetDir)) {
+      console.log(chalk.red(`Error: Directory ${projectName} already exists!`));
+      process.exit(1);
+    }
+
+    const template = {
+      url: 'https://github.com/china-difi/mui-template/archive/refs/heads/main.zip'
+    };
+
+    console.log(chalk.blue(`\n🚀 Downloading template from ${template.url}...`));
+
+    // 3. 下载模板到临时目录
+    const tmpDir = path.join(targetDir, '.tmp');
+
+    await new Promise((resolve, reject) => {
+      download(template, tmpDir, { clone: false }, (err) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+
+    // 4. 读取模板的配置文件（可选，用于更复杂的交互）
+    let templateConfig = {};
+    const configPath = path.join(tmpDir, 'template.config.json');
+    if (fs.existsSync(configPath)) {
+      templateConfig = require(configPath);
+    }
+
+    // 5. 询问模板特定的变量（例如项目描述、作者）
+    const prompts = [];
+    if (templateConfig.prompts) {
+      prompts.push(...templateConfig.prompts);
+    }
+    const answers = await inquirer.prompt(prompts);
+
+    // 6. 移动文件并渲染
+    // 遍历临时目录所有文件，复制到目标目录，并替换变量
+    const files = await fs.readdir(tmpDir);
+    for (const file of files) {
+      if (file === '.git' || file === 'template.config.json') continue; // 忽略无关文件
+      const src = path.join(tmpDir, file);
+      const dest = path.join(targetDir, file);
+      await fs.move(src, dest, { overwrite: true });
+    }
+
+    // 7. 清理和完成
+    await fs.remove(tmpDir);
+    console.log(chalk.green(`\n✅ Project ${chalk.bold(projectName)} created successfully!`));
+    console.log(chalk.cyan(`\nNext steps:`));
+    console.log(`  cd ${projectName}`);
+    console.log(`  npm install`);
+    console.log(`  npm run dev`);
+  });
+
+// 解析命令行参数
+program.parse(process.argv);

package/css/all.css

@@ -0,0 +1,8 @@
+@import url(base.css);
+
+@import url(icon.css);
+
+@import url(combobox.css);
+@import url(carousel.css);
+
+@import url(atomic/all.css);