cdui-js 1.0.13 → 1.0.14

package/build/css.ts

@@ -162,22 +162,6 @@ export const rules: Rule[] = [
       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) => {
@@ -269,7 +253,10 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
           continue;
         }
 
-        console.error('不合法的格式：' + lines[i]);
+        // 其它格式原样输出
+        if (!/\{\s*\}/.test(line)) {
+          outputs.push(line);
+        }
         break;
 
       case '+': // 上级选择器
@@ -287,7 +274,11 @@ export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
         break;
 
       default:
-        console.error('不合法的格式：' + lines[i]);
+        // 其它格式原样输出
+        if (!/\{\s*\}/.test(line)) {
+          outputs.push(line);
+        }
+        break;
     }
   }
 

package/css/all.css

@@ -1,9 +1,14 @@
 @import url(base.css);
 
+@import url(atomic/all.css);
+
 @import url(icon.css);
 
+@import url(button.css);
+@import url(textbox.css);
+@import url(popup.css);
 @import url(combobox.css);
-@import url(carousel.css);
 @import url(canlendar.css);
-
-@import url(atomic/all.css);
+@import url(datepicker.css);
+@import url(form.css);
+@import url(carousel.css);

package/css/base.css

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 img {
   -webkit-user-drag: none;
   user-drag: none;

package/css/button.css

@@ -0,0 +1,3 @@
+button {
+  outline: none;
+}

package/css/canlendar.css

@@ -1,7 +1,6 @@
 .canlendar {
   max-width: 380px;
   height: 320px;
-  border: 1px solid #e4e4e4;
   border-radius: 12px;
   padding: 16px;
   font-size: 12px;
@@ -23,24 +22,18 @@
   font-size: 14px;
 }
 
-.canlendar-switch {
+.canlendar-header > .icon {
   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 {
@@ -57,15 +50,9 @@
 }
 
 .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;
@@ -80,15 +67,3 @@
   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/carousel.css

@@ -14,7 +14,6 @@
   height: 36px;
   border-radius: 36px;
   padding: 8px;
-  background: rgba(255, 255, 255, 0.1);
   cursor: pointer;
 }
 
@@ -37,10 +36,8 @@
   height: 6px;
   border-radius: 10px;
   margin: 0 2px;
-  background: rgba(65, 72, 90, 1);
 }
 
 .carousel-dot.selected {
   width: 16px;
-  background: white;
 }

package/css/combobox.css

@@ -2,8 +2,6 @@
   position: relative;
   width: 100px;
   height: 32px;
-  border: 1px solid silver;
-  background: white;
   overflow: visible;
 }
 
@@ -15,11 +13,12 @@
   height: 100%;
 }
 
-.combobox-host > input {
+.combobox-input {
   flex: auto;
   width: 100%;
   height: 100%;
   outline: none;
+  border: none;
   padding: 0 4px;
   background: inherit;
   color: inherit;
@@ -27,32 +26,13 @@
   font-size: inherit;
 }
 
-.combobox-host > svg {
+.combobox-host > .icon {
   display: flex;
   justify-items: center;
   align-items: center;
-  padding: 0 3px;
+  height: 100%;
+  padding: 0 4px;
   stroke: inherit;
   fill: inherit;
   cursor: pointer;
 }
-
-.combobox-popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  width: auto;
-  z-index: 100;
-  will-change: height;
-  transition: height 0.2s linear;
-}
-
-.combobox-popup-top {
-  top: auto;
-  bottom: calc(100% + 4px);
-}
-
-.combobox-popup-right {
-  left: auto;
-  right: 0;
-}

package/css/datepicker.css

@@ -0,0 +1,38 @@
+.datepicker {
+  position: relative;
+  width: 100px;
+  height: 32px;
+  overflow: visible;
+}
+
+.datepicker-host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.datepicker-input {
+  flex: auto;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  border: none;
+  padding: 0 4px;
+  background: inherit;
+  color: inherit;
+  vertical-align: top;
+  font-size: inherit;
+}
+
+.datepicker-host > .icon {
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  height: 100%;
+  padding: 0 4px;
+  stroke: inherit;
+  fill: inherit;
+  cursor: pointer;
+}

package/css/form.css

@@ -0,0 +1,19 @@
+.form-align-left,
+.form-align-right {
+  display: flex;
+  align-items: center;
+}
+
+.form-align-left > label,
+.form-align-right > label {
+  width: 100px;
+}
+
+.form-align-left > label {
+  text-align: right;
+  padding-right: 8px;
+}
+
+.form-align-right > label {
+  padding-left: 8px;
+}

package/css/popup.css

@@ -0,0 +1,33 @@
+.popup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: -1px;
+  z-index: 100;
+  /* 不允许内边距，否则动画的高度不能小于内边距 */
+  padding: 0 !important;
+  will-change: height;
+  transition: height 0.2s linear;
+  overflow: hidden;
+}
+
+.popup-top {
+  top: auto;
+  bottom: calc(100% + 4px);
+}
+
+.popup-right {
+  left: auto;
+  right: 0;
+}
+
+.le-480 .popup {
+  position: fixed;
+  top: auto;
+  bottom: 0;
+  left: -1px;
+  right: -1px;
+  width: 100% !important;
+  max-width: 100% !important;
+  max-height: 80%;
+  border-radius: 12px 12px 0 0;
+}

package/css/textbox.css

@@ -0,0 +1,5 @@
+.textbox {
+  width: 100px;
+  height: 32px;
+  outline: none;
+}

package/{css → demo/css}/build.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
 
-import { buildCSS } from 'cdui-js/build/css';
+import { buildCSS } from '../../build/css';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);

package/{css → demo/css}/css.md

@@ -242,8 +242,6 @@
 .icon-c-selected: #ffffff;
 .icon-c-primary-selected: #FF4000;
 
-+ .dark
-
 
 # icon-size 图标大小
 
@@ -270,7 +268,50 @@
 .button-primary:hover { background-color: #FF7A51; }
 .button-primary:disabled { background-color:#FFD1C3; }
 
+
 # link 链接
 
-.link {}
-.link-primary {};
+.link { }
+.link-primary { };
+
+
+# textbox 文本框
+
+.textbox { border: 1px solid #e4e4e4; }
+.textbox:focus { border: 1px solid #1b212d; }
+
+
+# combobox 下拉框
+
+.combobox { border: 1px solid #e4e4e4; background: white; }
+.combobox:has(.combobox-input:focus) { border: 1px solid #1b212d; }
+
+
+# canlendar 日历
+
+.canlendar { border: 1px solid #e4e4e4; }
+.canlendar-header > .icon { stroke: #1b212d; }
+.canlendar-weeks > span { color: #888f97; }
+.canlendar-date.disabled { color: #e4e4e4; }
+.canlendar-date.prev-month, .canlendar-date.next-month { color: #888f97; }
+.canlendar-date.today::before { background: #f5f5f5; }
+.canlendar-date.selected { color: white; }
+.canlendar-date.selected::before { background: #ff4000; }
+
+
+# datepicker 日期选择
+
+.datepicker { border: 1px solid #e4e4e4; background: white; }
+.datepicker:has(.datepicker-input:focus) { border: 1px solid #1b212d; }
+
+
+# popup 弹出层
+
+.popup { border: 1px solid #e4e4e4; background: white; }
+
+
+# carousel 轮播
+
+.carousel-backward, .carousel-forward { background: rgba(255, 255, 255, 0.1); }
+.carousel-dot { background: rgba(65, 72, 90, 1); }
+.carousel-dot.selected { background: white; }

package/demo/icons/build.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { loadIconFile, loadIconsDirectory, saveIconsModule, saveIconsToHtml } from '../../build/icons';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const icons = [
+  loadIconFile(path.join(__dirname, '../../icons/backward.svg')),
+  loadIconFile(path.join(__dirname, '../../icons/close.svg')),
+  loadIconFile(path.join(__dirname, '../../icons/dropdown.svg')),
+  loadIconFile(path.join(__dirname, '../../icons/forward.svg')),
+  loadIconFile(path.join(__dirname, '../../icons/toggle.svg')),
+];
+
+saveIconsToHtml(path.join(__dirname, '../index.html'), icons.join('\n'));

package/{index.html → demo/index.html}

@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-  <title>stock</title>
+  <title>cdui-js demo</title>
   <meta name="description" content="stock" />
   <meta charset="UTF-8" />
   <meta name="renderer" content="webkit" />
@@ -15,6 +15,24 @@
 </head>
 
 <body>
+  <svg id="ICONS" aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;"
+    xmlns="http://www.w3.org/2000/svg">
+<symbol id="icon-backward" viewBox="0 0 16 16" fill="none">
+<path d="M10.3661 2.72003L6.01942 7.0667C5.50609 7.58003 5.50609 8.42003 6.01942 8.93336L10.3661 13.28" stroke="#1B212D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+<symbol id="icon-close" viewBox="0 0 14 14" fill="none">
+<path d="M0.750078 11.3565L11.3567 0.749922M11.3567 11.3565L0.750078 0.749922" stroke="#8693B6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+<symbol id="icon-dropdown" viewBox="0 0 16 16" fill="none">
+<path d="M2.72 5.63428L7.06667 9.98094C7.58 10.4943 8.42 10.4943 8.93333 9.98094L13.28 5.63428" stroke="#1B212D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+<symbol id="icon-forward" viewBox="0 0 16 16" fill="none">
+<path d="M5.63391 2.72003L9.98058 7.0667C10.4939 7.58003 10.4939 8.42003 9.98058 8.93336L5.63391 13.28" stroke="#1B212D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+<symbol id="icon-toggle" viewBox="0 0 10 6" fill="none">
+<path d="M9.14515 0.5L5.58667 4.30333C5.16642 4.7525 4.47873 4.7525 4.05848 4.30333L0.5 0.5" stroke="white" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+</svg>
   <script type="text/javascript">
     window.addEventListener(
       'resize',
@@ -73,7 +91,7 @@
     );
   </script>
   <!-- ssr-body -->
-  <script type="module" src="./demo/main.ts"></script>
+  <script type="module" src="./src/main.ts"></script>
 </body>
 
 </html>

package/demo/src/App.tsx

@@ -0,0 +1,15 @@
+import { CanlendarPage } from './pages/Canlendar';
+import { ComboBoxPage } from './pages/ComboBox';
+import { DatePickerPage } from './pages/DatePicker';
+import { FormPage } from './pages/Form';
+
+export const App = () => {
+  return (
+    <div style={{ 'min-height': '100%' }}>
+      <CanlendarPage></CanlendarPage>
+      <DatePickerPage></DatePickerPage>
+      <ComboBoxPage></ComboBoxPage>
+      <FormPage></FormPage>
+    </div>
+  );
+};

package/demo/src/css/all.css

@@ -0,0 +1,3 @@
+@import url(atomic.css);
+
+@import url(../../../css/all.css);