cdui-js 1.0.11 → 1.0.13

package/css/all.css

@@ -4,5 +4,6 @@
 
 @import url(combobox.css);
 @import url(carousel.css);
+@import url(canlendar.css);
 
 @import url(atomic/all.css);

package/css/build.ts

@@ -0,0 +1,12 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { buildCSS } from 'cdui-js/build/css';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const ruleFile = path.join(__dirname, 'css.md');
+const cssFile = path.join(__dirname, '../src/css/atomic.css');
+
+buildCSS(ruleFile, cssFile);

package/css/canlendar.css

@@ -0,0 +1,94 @@
+.canlendar {
+  max-width: 380px;
+  height: 320px;
+  border: 1px solid #e4e4e4;
+  border-radius: 12px;
+  padding: 16px;
+  font-size: 12px;
+  user-select: none;
+}
+
+.canlendar-header,
+.canlendar-weeks {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  line-height: 36px;
+}
+
+.canlendar-month {
+  flex: auto;
+  padding-left: 12px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.canlendar-switch {
+  box-sizing: border-box;
+  width: 40px;
+  height: 100%;
+  padding: 0 11px;
+  stroke: #1b212d;
+  cursor: pointer;
+}
+
+.canlendar-switch:last-child {
+  transform: rotateZ(180deg);
+}
+
+.canlendar-weeks > span {
+  flex: auto;
+  text-align: center;
+  vertical-align: middle;
+  color: #888f97;
+}
+
+.canlendar-body {
+  height: calc(100% - 72px);
+}
+
+.canlendar-date {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 14.28%;
+  height: 16.66%;
+  cursor: pointer;
+}
+
+.canlendar-date.disabled {
+  color: #e4e4e4;
+  cursor: not-allowed;
+}
+
+.canlendar-date.prev-month,
+.canlendar-date.next-month {
+  color: #888f97;
+}
+
+.canlendar-date.today,
+.canlendar-date.selected {
+  position: relative;
+}
+
+.canlendar-date.today::before,
+.canlendar-date.selected::before {
+  position: absolute;
+  content: '';
+  width: 40px;
+  height: 40px;
+  border-radius: 40px;
+  z-index: -1;
+}
+
+.canlendar-date.today::before {
+  background: #f5f5f5;
+}
+
+.canlendar-date.selected {
+  color: white;
+}
+
+.canlendar-date.selected::before {
+  background: #ff4000;
+}

package/css/css.md

@@ -0,0 +1,276 @@
+> 说明
+> 颜色色阶：D (Dark 加暗) L（Light 加亮）XL（再加亮）XD（再加暗）依此类推
+> 距离大小：L（放大）S（缩小）XL（再加大）XS（再缩小）依此类推
+> 以 margin、border、padding 开头的样式，会自动在其后生成 l、r、t、b 及 x、y 六个组合，如：margin-l（margin-left），margin-x（margin-left + margin-right），border-l（border-left），border-y-color（border-top-color + border-bottom-color）
+
+
+# margin 外边距
+
+.margin-XXS: 8px;
+.margin-XS: 10px;
+.margin-S: 12px;
+.margin: 16px;
+.margin-L: 20px;
+.margin-XL: 40px;
+.margin-XXL: 60px;
+
++ .le-800
+
+.margin-XXS: 6px;
+.margin-XS: 8px;
+.margin-S: 10px;
+.margin: 14px;
+.margin-L: 16px;
+.margin-XL: 30px;
+.margin-XXL: 40px;
+
++ .le-480
+
+.margin-XXS: 4px;
+.margin-XS: 8px;
+.margin-S: 12px;
+.margin: 16px;
+.margin-L: 20px;
+.margin-XL: 32px;
+.margin-XXL: 40px;
+
+
+# padding 内边距
+
+.padding-XXS: 4px;
+.padding-XS: 6px;
+.padding-S: 8px;
+.padding: 10px;
+.padding-L: 14px;
+.padding-XL: 24px;
+.padding-XXL: 40px;
+
++ .le-480
+
+.padding-XXS: 4px;
+.padding-XS: 6px;
+.padding-S: 8px;
+.padding: 12px;
+.padding-L: 16px;
+.padding-XL: 24px;
+.padding-XXL: 40px;
+
+# border 边框
+
+.border: 1px;
+.border-bold: 2px;
+.border-bolder: 4px;
+
+
+# border-color 边框颜色
+
+.border-c-XXL: #;
+.border-c-XL: #;
+.border-c-L: #F5F5F5;
+.border-c: #E4E4E4;
+.border-c-D: #;
+.border-c-XD: #;
+.border-c-XXD: #;
+
+.border-c-primary: #FF4000;
+.border-c-secondary: #FFD1C3;
+.border-c-error: #FF4E4E;
+.border-c-warn: #;
+.border-c-info: #;
+.border-c-disabled: #FF4E4E;
+
+.border-c-active: #ffffff;
+.border-c-primary-active: #ffffff;
+
+.border-c-focus: #ffffff;
+.border-c-primary-focus: #ffffff;
+
+.border-c-hover: #ffffff;
+.border-c-primary-hover: #ffffff;
+
+.border-c-selected: #ffffff;
+.border-c-primary-selected: #ffffff;
+
++ .dark
+.border-c-primary: #000000
+
+# border-style 边框样式
+
+.border-s-dashed: dashed;
+.border-s-dotted: dotted;
+
+
+# border-radius 圆角边框
+
+.round-XXS: ;
+.round-XS: 6px;
+.round-S: 10px;
+.round: 12px;
+.round-L: 14px;
+.round-XL: 20px;
+.round-XXL: ;
+
++ .le-480
+
+.round-XXS: 2px;
+.round-XS: 4px;
+.round-S: 6px;
+.round: 8px;
+.round-L: 10px;
+.round-XL: 12px;
+.round-XXL: 40px;
+
+
+# background-color 背景颜色
+
+.bg-c-XXL: #;
+.bg-c-XL: #ffffff;
+.bg-c-L: #ffffff;
+.bg-c: #ffffff;
+.bg-c-D:  #F7F8FA;
+.bg-c-XD: #F5F5F5;
+.bg-c-XXD: #F5F5F5;
+
+.bg-c-primary: #FFF3EF;
+.bg-c-secondary: #FFEDED;
+.bg-c-error: #;
+.bg-c-warn: #;
+.bg-c-info: #;
+.bg-c-disabled: #;
+
+.bg-c-active: #ffffff;
+.bg-c-primary-active: #ffffff;
+
+.bg-c-focus: #ffffff;
+.bg-c-primary-focus: #ffffff;
+
+.bg-c-hover: #;
+.bg-c-primary-hover: #69F469;
+
+.bg-c-selected: #ffffff;
+.bg-c-primary-selected: #ffffff;
+
++ .dark
+.bg-c: #101113;
+
+
+# color 字体颜色
+
+.color-XXL: #ffffff;
+.color-XL: #C2C3CB;
+.color-L: #A2A7AD;
+.color: #888F97;
+.color-D: #1B212D;
+.color-XD: #1B212D;
+.color-XXD: #1B212D;
+
+.color-primary: #FF4000;
+.color-secondary: #FFD1C3;
+.color-error: #FF4E4E;
+.color-warn: #;
+.color-info: #;
+.color-disabled: #02C58D;
+
+.color-active: #ffffff;
+.color-primary-active: #FF4000;
+
+.color-focus: #ffffff;
+.color-primary-focus: #FF4000;
+
+.color-hover: #ffffff;
+.color-primary-hover: #FF4000;
+
+.color-selected: #ffffff;
+.color-primary-selected: #FF4000;
+
++ .dark
+
+.color-D: #ffffff;
+
+
+# font-size 字体大小
+
+.font-s-XXS: 12px;
+.font-s-XS: 12px;
+.font-s-S: 14px;
+.font-s: 16px;
+.font-s-L: 20px;
+.font-s-XL: 22px;
+.font-s-XXL: 32px;
+
++ .le-480
+
+.font-s-XXS: 10px;
+.font-s-XS: 12px;
+.font-s-S: 14px;
+.font-s: 16px;
+.font-s-L: 20px;
+.font-s-XL: 24px;
+.font-s-XXL: 28px;
+
+
+# font-weight 字体粗细
+
+.font-lighter: lighter;
+.font-bold: bold;
+.font-bolder: bolder;
+
+
+# icon-color 图标颜色
+
+.icon-c-XXL: #;
+.icon-c-XL: #;
+.icon-c-L: #ffffff;
+.icon-c: #A2A7AD;
+.icon-c-D: #1B212D;
+.icon-c-XD: #;
+.icon-c-XXD: #;
+
+.icon-c-primary: #FF4000;
+.icon-c-secondary: #2BA8F7;
+.icon-c-error: #FF4E4E;
+.icon-c-warn: #;
+.icon-c-info: #;
+.icon-c-disabled: #FF4E4E;
+
+.icon-c-active: #ffffff;
+.icon-c-primary-active: #ffffff;
+
+.icon-c-hover: #ffffff;
+.icon-c-primary-hover: #FF4000;
+
+.icon-c-selected: #ffffff;
+.icon-c-primary-selected: #FF4000;
+
++ .dark
+
+
+# icon-size 图标大小
+
+.icon-s-XXS: 12px;
+.icon-s-XS: 14px;
+.icon-s-S: 16px;
+.icon-s: 18px;
+.icon-s-L: 20px;
+.icon-s-XL: 24px;
+.icon-s-XXL: 32px;
+
+
+# button 按钮
+
+.button { background-color: #21282D; color: #ffffff; border-radius: 14px; outline: none; border: none; min-width: 60px; padding: 4px 8px; }
+.button:active { background-color: #1D252B; }
+.button:focus { background-color: #1D252B; border: 2px solid #FFFFFF; }
+.button:hover { background-color: #2D363B; }
+.button:disabled { color: #8693B6; }
+
+.button-primary { background-color: #FF4000; color: #ffffff; border-radius: 12px; outline: none; border: none; min-width: 60px; padding: 4px 8px; }
+.button-primary:active { background-color: #FF7A51; }
+.button-primary:focus { background-color: #FF7A51; }
+.button-primary:hover { background-color: #FF7A51; }
+.button-primary:disabled { background-color:#FFD1C3; }
+
+# link 链接
+
+.link {}
+.link-primary {};

package/demo/App.tsx

@@ -0,0 +1,31 @@
+import { reactive } from '../src/reactive';
+import { CanlendarPage } from './pages/Canlendar';
+import { ComboBoxPage } from './pages/ComboBox';
+import { FormPage } from './pages/Form';
+
+const Test = (props: { value: number; text: string }) => {
+  return (
+    <div>
+      <span>{props.value}</span>
+      <span>{props.text}</span>
+    </div>
+  );
+};
+
+export const App = () => {
+  const state = reactive({
+    value: 111,
+  });
+
+  const a = { text: '222' };
+
+  return (
+    <div>
+      <CanlendarPage></CanlendarPage>
+      <ComboBoxPage></ComboBoxPage>
+      <FormPage></FormPage>
+      <Test value={state.value} text={'222' + a.text}></Test>
+      <button onclick={() => (state.value = Math.random())}></button>
+    </div>
+  );
+};

package/demo/main.ts

@@ -0,0 +1,7 @@
+import '../css/all.css';
+
+import { render } from '../src';
+import { App } from './App';
+
+// 客户端渲染
+render(App, document.body);

package/demo/pages/Canlendar.tsx

@@ -0,0 +1,12 @@
+import { Canlendar } from '../../src/components/Canlendar';
+
+export const CanlendarPage = () => {
+  return (
+    <Canlendar
+      value={new Date()}
+      onValueChange={(date) => {
+        console.log(date);
+      }}
+    ></Canlendar>
+  );
+};

package/demo/pages/ComboBox.tsx

@@ -0,0 +1,10 @@
+import { ComboBox } from '../../src/components/ComboBox';
+
+export const ComboBoxPage = () => {
+  return (
+    <ComboBox>
+      <div>111</div>
+      <div>222</div>
+    </ComboBox>
+  );
+};

package/demo/pages/Form.tsx

@@ -0,0 +1,32 @@
+import { reactive } from '../../src/reactive';
+import { For } from '../../src/components/For';
+import { Form, FormItem } from '../../src/components/Form';
+
+export const FormPage = () => {
+  const state = reactive({
+    align: 'right' as 'right' | 'left',
+    width: '100px',
+  });
+
+  return (
+    <Form data={{}} rules={{}} align={state.align} labelWidth={state.width}>
+      <FormItem field="a" label="111">
+        <input></input>
+      </FormItem>
+      <FormItem
+        field="b"
+        label={
+          <>
+            <span>123</span>
+            <span>456</span>
+          </>
+        }
+      >
+        <input></input>
+      </FormItem>
+      <button type="button" onclick={() => (state.align = state.align === 'left' ? 'right' : 'left')}>
+        align
+      </button>
+    </Form>
+  );
+};

package/demo/test.js

@@ -0,0 +1,45 @@
+
+const Form = ({ a, b, c }, context) => {
+  return <div></div>
+};
+
+
+const FormPage1 = () => {
+  const state = reactive({
+    align: 'right',
+    width: '100px',
+  });
+
+  createEffect(() => {
+
+  });
+
+  watch(() => state.align, align => {
+
+  });
+
+  return Form(
+    {
+      data: {},
+      rules: {},
+      align: () => state.align,
+      labelWidth: () => state.width,
+    },
+    (context) => [
+      FormItem(
+        {
+          field: 'a',
+          label: '111',
+        },
+        (context) => [],
+      ),
+      FormItem(
+        {
+          field: 'b',
+          label: () => [_tmpl$3(), _tmpl$4()],
+        },
+        (context) => [],
+      ),
+    ],
+  );
+};

package/icons/build.ts

@@ -0,0 +1,24 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { loadIconFile, loadIconsDirectory, saveIconsModule, saveIconsToHtml } from 'cdui-js/build/icons';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const icons = [
+  // 加载 cdui-js/icons 下的图标
+  loadIconsDirectory(path.join(__dirname, '../../../node_modules/cdui-js/icons'), 'both'),
+
+  loadIconFile(path.join(__dirname, 'logo.svg')),
+  loadIconsDirectory(path.join(__dirname, 'common/both')),
+  loadIconsDirectory(path.join(__dirname, 'common/stroke'), 'stroke'),
+  loadIconsDirectory(path.join(__dirname, 'header'), 'stroke'),
+
+  loadIconsDirectory(path.join(__dirname, 'menu'), 'both'),
+  loadIconsDirectory(path.join(__dirname, 'menu/color')),
+
+  loadIconsDirectory(path.join(__dirname, 'my'), 'both'),
+];
+
+saveIconsToHtml(path.join(__dirname, '../index.html'), icons.join('\n'));

package/index.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>stock</title>
+  <meta name="description" content="stock" />
+  <meta charset="UTF-8" />
+  <meta name="renderer" content="webkit" />
+  <meta name="force-rendering" content="webkit" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+  <link rel="icon" type="image/svg" href="favicon.svg?v=1" />
+  <!-- ssr-head -->
+</head>
+
+<body>
+  <script type="text/javascript">
+    window.addEventListener(
+      'resize',
+      (function (window, navigator) {
+        function update() {
+          var ua = navigator.ua;
+          var body = document.body;
+          var limits = [1920, 1280, 1024, 800, 640, 480];
+          var length = limits.length;
+          var width = window.innerWidth;
+          var classList = ['pc'];
+
+          if (/Mobile|iPhone/i.test(ua)) {
+            classList.push('mobile');
+          } else if (/iPad|Tablet|Android/i.test(ua) || (navigator.maxTouchPoints > 1 && !/Windows|Linux/.test(ua))) {
+            classList.push('tablet');
+          }
+
+          classList.push(window.innerHeight < width ? 'landscape' : 'portrait');
+
+          for (var i = 0; i < length; i++) {
+            var limit = limits[i];
+
+            if (width <= limit) {
+              if (width < limit) {
+                classList.push('lt-' + limit);
+              }
+
+              classList.push('le-' + limit);
+            } else if (width >= limit) {
+              classList.push('ge-' + limit);
+
+              if (width > limit) {
+                classList.push('gt-' + limit);
+              }
+            }
+          }
+
+          // 计算侧边框展开或收拢
+          classList.push('sidebar-' + (width > 1280 ? 'expanded' : 'collapsed'));
+          classList = classList.join(' ');
+
+          if (body.className !== classList) {
+            body.className = classList;
+            (window.onlayoutchange || function () { })();
+          }
+
+          // 触发内容区大小变化事件
+          window.dispatchEvent(new Event('content-resize'));
+        }
+
+        update();
+
+        return update;
+      })(window, navigator)
+    );
+  </script>
+  <!-- ssr-body -->
+  <script type="module" src="./demo/main.ts"></script>
+</body>
+
+</html>

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "cdui-js",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "main": "src/index.ts",
   "bin": {
     "cdui-js": "./cli/bin.js"
   },
-  "scripts": {},
+  "scripts": {
+    "dev": "vite --config vite.config.ts"
+  },
   "dependencies": {
     "chalk": "^5.6.2",
     "commander": "^14.0.3",
-    "download-git-repo": "^3.0.2",
+    "download-git-repo": "^0.0.2",
     "fs-extra": "^11.3.3",
     "inquirer": "^13.3.0",
     "solid-js": "^1.9.10",
@@ -18,6 +20,7 @@
   },
   "devDependencies": {
     "@types/node": "^25.3.3",
-    "typescript": "~5.6.2"
+    "typescript": "~5.6.2",
+    "vite": "^8.0.0"
   }
 }