feat: v0.0.13 fix

alinsjs · Nov 20, 2022 · fcb3e31 · fcb3e31
1 parent abd6af8
commit fcb3e31
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 122 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -21,10 +21,11 @@ export {
 export * from './builder/builder';
 export {html} from './builder/html';
 export {text} from './builder/text';
-export {comp, IComponent, IComponentOptions} from './comp/comp';
-export {prop} from './comp/prop';
-export {event} from './comp/event';
-export {slot} from './comp/slot';
+export {comp, IComponent, IComponentOptions, IComponentBuilder} from './comp/comp';
+export {prop, IProp} from './comp/prop';
+export {event, IEvent} from './comp/event';
+export {slot, ISlot} from './comp/slot';
+export {compControllers} from './controller/controller';
 export * from './event/on';
 
 export {

diff --git a/packages/style/src/style-func/style-atom.ts b/packages/style/src/style-func/style-atom.ts
@@ -8,7 +8,7 @@
 import {
     countBindingValue,
 } from 'alins-reactive';
-import {IReactBuilder, IReactItem, IJson, IStyleAtoms, IStyleArgsAtoms, TStyleValue, TUnit, TI, IStyleComponent, IAtomsTool} from 'alins-utils';
+import {IReactBuilder, IReactItem, IJson, IStyleAtoms, IStyleArgsAtoms, TStyleValue, TUnit, TI, IStyleComponent, IAtomsTool, IStyleBuilder, TStyleJsonValue} from 'alins-utils';
 import {parseSingleCssItem} from '../css';
 import {OnlyNumberAttrs, style} from '../style';
 import {createComposeValue} from './style-compose';
@@ -26,7 +26,7 @@ export const StyleAtoms = (() => {
         // none arg style
         'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'fontSize', 'lineHeight', 'top', 'left', 'bottom', 'right', 'borderRadius', 'textIndent',
         // TNumberAutoStyle
-        'width', 'maxWidth', 'height', 'maxHeight', 'flexBasis',
+        'width', 'maxWidth', 'minWidth', 'height', 'maxHeight', 'minHeight', 'flexBasis',
         // pure number style
         'opacity', 'zIndex', 'flex', 'flexGrow', 'flexShrink',        // fournumber style
         'margin', 'padding',
@@ -57,9 +57,9 @@ export const StyleAtoms = (() => {
                     if (typeof item === 'string' || (item).type === 'react') {
                         style(item as any).exe(dom);
                     } else if (item.type === 'style') {
-                        item.exe(dom);
+                        (item as IStyleBuilder).exe(dom);
                     } else if (typeof item === 'object') {
-                        style(item).exe(dom);
+                        style(item as TStyleJsonValue).exe(dom);
                     }
                 });
             }

diff --git a/packages/style/src/style.ts b/packages/style/src/style.ts
@@ -21,7 +21,8 @@ export interface IStyleConstructor extends IStyleAtoms{
 
 export const OnlyNumberAttrs = ['zIndex', 'opacity', 'flex', 'flexGrow', 'flexShrink'];
 
-export const style: IStyleConstructor = Object.assign((
+// ! & {[prop: string]: any} 为了 ts 声明引用时不报属性不存在的错误
+export const style: IStyleConstructor & {[prop: string]: any} = Object.assign((
     a1: TStyleJsonValue | TemplateStringsArray | string | IReactBuilder,
     ...reactions: TReactionItem[]
 ) => {

diff --git a/packages/utils/src/types/style.d.ts b/packages/utils/src/types/style.d.ts
@@ -81,8 +81,10 @@ export interface IStyleArgsAtomsBase {
 
   width: TNumberAutoStyle;
   maxWidth: TNumberAutoStyle;
+  minWidth: TNumberAutoStyle;
   height: TNumberAutoStyle;
   maxHeight: TNumberAutoStyle;
+  minHeight: TNumberAutoStyle;
   flexBasis: TNumberAutoStyle;
 
   // pure number style

diff --git a/scripts/dev/index.ts b/scripts/dev/index.ts
@@ -7,124 +7,124 @@
  */
 
 import './samples/v0.0.13';
-// import './samples/bugs';
-// import './samples/computed-bug';
+import './samples/bugs';
+import './samples/computed-bug';
 
-// import './samples/v0.0.11';
+import './samples/v0.0.11';
 
-// import {
-//     mount, div, react, comp, button,
-//     IReactItem, click, prop, css, style,
-//     $, input, mounted, updated, created, removed, appended,
-//     html, text
-// } from './alins';
-// import {Count, CountProps} from './samples/count';
-// import {For3} from './samples/for-3';
-// import {Parent, testLife} from './samples/hello-world';
-// import {StyleComp, StyleDemo} from './samples/style-comp';
-// import {todoList} from './samples/todo-list';
-// import {Style2, StyleAtom} from './samples/style-comp2';
-// import {Count2} from './samples/counter2';
-// import {renderObject} from './samples/render-obj';
-// import {Controller} from './samples/controller';
-// import {onlyUseStyle} from './samples/style-only';
-// import {Life} from './samples/life';
-// import {CompController} from './samples/comp-controller';
-// import {FuncBuilder} from './samples/func-as-builder';
-// import {htmlComp} from './samples/html';
-// import {initMount} from './samples/mount';
-// import {CompParent} from './samples/comp';
-// import './samples/slot-demo';
-// import './samples/react';
-// const num = $(20);
-// (window as any).numx =  num;
-// const titleBg = $('#ddd');
-// css()(
-//     ['body', style({
-//         backgroundColor: '#111',
-//         color: '#fff'
-//     }), $`transition: color 1s linear;marginLeft: ${num}px`, 'marginTop: 10px'],
-//     ['.title', style('marginLeft: 10px;'), style`
-//         fontWeight: bold;
-//         fontSize: ${num}px;
-//         color: #f44;
-//         marginTop: 10px;
-//         marginBottom: 5px;
-//         backgroundColor: ${titleBg};
-//     `]
-// ).mount();
+import {
+    mount, div, react, comp, button,
+    IReactItem, click, prop, css, style,
+    $, input, mounted, updated, created, removed, appended,
+    html, text
+} from './alins';
+import {Count, CountProps} from './samples/count';
+import {For3} from './samples/for-3';
+import {Parent, testLife} from './samples/hello-world';
+import {StyleComp, StyleDemo} from './samples/style-comp';
+import {todoList} from './samples/todo-list';
+import {Style2, StyleAtom} from './samples/style-comp2';
+import {Count2} from './samples/counter2';
+import {renderObject} from './samples/render-obj';
+import {Controller} from './samples/controller';
+import {onlyUseStyle} from './samples/style-only';
+import {Life} from './samples/life';
+import {CompController} from './samples/comp-controller';
+import {FuncBuilder} from './samples/func-as-builder';
+import {htmlComp} from './samples/html';
+import {initMount} from './samples/mount';
+import {CompParent} from './samples/comp';
+import './samples/slot-demo';
+import './samples/react';
+const num = $(20);
+(window as any).numx =  num;
+const titleBg = $('#ddd');
+css()(
+    ['body', style({
+        backgroundColor: '#111',
+        color: '#fff'
+    }), $`transition: color 1s linear;marginLeft: ${num}px`, 'marginTop: 10px'],
+    ['.title', style('marginLeft: 10px;'), style`
+        fontWeight: bold;
+        fontSize: ${num}px;
+        color: #f44;
+        marginTop: 10px;
+        marginBottom: 5px;
+        backgroundColor: ${titleBg};
+    `]
+).mount();
 
-// // const msg = $('xxxx');
-// // div(msg).mount();
+// const msg = $('xxxx');
+// div(msg).mount();
 
 
-// const list = $([1, 2, 3]);
-// const add = (item: IReactItem, e: Event) => {item.value++; console.log(e);};
-// const value = $(0);
-// const value1 = $(1);
-// const value2 = $(2);
-// const msg = $('Hello msg');
-// (window as any).valuex = value;
+const list = $([1, 2, 3]);
+const add = (item: IReactItem, e: Event) => {item.value++; console.log(e);};
+const value = $(0);
+const value1 = $(1);
+const value2 = $(2);
+const msg = $('Hello msg');
+(window as any).valuex = value;
 
-// mount(
-//     div('title font-size:',
-//         () => [
-//             div('111111'),
-//             div('111111222')
-//         ],
-//         input.model(num, 'number')),
-//     div(msg),
-//     // () => div('111111'),
-// );
+mount(
+    div('title font-size:',
+        () => [
+            div('111111'),
+            div('111111222')
+        ],
+        input.model(num, 'number')),
+    div(msg),
+    // () => div('111111'),
+);
 
-// div.show(() => value.value === 0)('test controller mount').mount();
-// initMount();
+div.show(() => value.value === 0)('test controller mount').mount();
+initMount();
 
-// mount(
-//     div('Hello World'),
-//     div('title font-size:', input.model(num, 'number')),
-//     div('title background:', input.model(titleBg)),
-//     div('.title:comp Parent--------------'),
-//     comp(CompParent),
-//     () => div(111, text(':11/11.[1]')),
-//     () => [div(222), div(333)],
-//     comp(() => div(444)),
-//     div('.title:comp HTML--------------'),
-//     comp(htmlComp),
-//     div('.title:comp Life--------------'),
-//     comp(Life),
-//     div('.title:comp CompController--------------'),
-//     comp(CompController),
-//     div('.title:style Demo--------'),
-//     comp(StyleDemo),
-//     div('.title:Count------------------'),
-//     comp(Count),
-//     div('.title:Count------------------'),
-//     div(comp(renderObject)),
-//     div('.title:todoList-----------'),
-//     comp(todoList),
-//     div('.title:Parent-----------'),
-//     comp(Parent),
-//     div('.title:For3-----------'),
-//     comp(For3),
-//     div('.title:Count-----------'),
-//     comp(Count),
-//     div('.title:Count2-----------'),
-//     comp(Count2),
-//     div('.title:FuncBuilder-----------'),
-//     comp(FuncBuilder),
-//     div('.title:testLife-----------'),
-//     comp(testLife),
-//     div('.title:StyleComp-----------'),
-//     comp(StyleComp),
-//     div('.title:StyleComp2----------'),
-//     comp(Style2),
-//     div('.title:StyleAtom----------'),
-//     comp(StyleAtom),
-//     div('.title:Controllers----------'),
-//     comp(Controller),
-//     div('.title:单独使用style----------'),
-//     onlyUseStyle()
-// );
+mount(
+    div('Hello World'),
+    div('title font-size:', input.model(num, 'number')),
+    div('title background:', input.model(titleBg)),
+    div('.title:comp Parent--------------'),
+    comp(CompParent),
+    () => div(111, text(':11/11.[1]')),
+    () => [div(222), div(333)],
+    comp(() => div(444)),
+    div('.title:comp HTML--------------'),
+    comp(htmlComp),
+    div('.title:comp Life--------------'),
+    comp(Life),
+    div('.title:comp CompController--------------'),
+    comp(CompController),
+    div('.title:style Demo--------'),
+    comp(StyleDemo),
+    div('.title:Count------------------'),
+    comp(Count),
+    div('.title:Count------------------'),
+    div(comp(renderObject)),
+    div('.title:todoList-----------'),
+    comp(todoList),
+    div('.title:Parent-----------'),
+    comp(Parent),
+    div('.title:For3-----------'),
+    comp(For3),
+    div('.title:Count-----------'),
+    comp(Count),
+    div('.title:Count2-----------'),
+    comp(Count2),
+    div('.title:FuncBuilder-----------'),
+    comp(FuncBuilder),
+    div('.title:testLife-----------'),
+    comp(testLife),
+    div('.title:StyleComp-----------'),
+    comp(StyleComp),
+    div('.title:StyleComp2----------'),
+    comp(Style2),
+    div('.title:StyleAtom----------'),
+    comp(StyleAtom),
+    div('.title:Controllers----------'),
+    comp(Controller),
+    div('.title:单独使用style----------'),
+    onlyUseStyle()
+);
 
-// // dom 单独使用
+// dom 单独使用
diff --git a/scripts/todo.md b/scripts/todo.md
@@ -3,17 +3,42 @@
  * @Date: 2022-11-05 12:19:34
  * @Description: Coding something
  * @LastEditors: chenzhongsheng
- * @LastEditTime: 2022-11-13 12:35:09
+ * @LastEditTime: 2022-11-20 17:41:23
 -->
 
 ## v0.0.13 done
 
 feat: style: supporteAdoptedStyle 支持配置打开或者关闭 [done]
 feat: css函数支持传入 json，且有支持提示 [done]
 feat: style枚举属性 提示 [done]
+fix: 原子属性缺少 minWidth minHeight [done]
+fix: 补全ts声明
 
 ## TodoList
 
+feat: 控制器支持 computed
+feat: 原子样式支持 获取属性值 ._reslut.color ...
+fix: 顺序问题 div(a('web-os'), ' made by ', a('theajack'))
+fix: .show(() => list.length > 0) (webos input-item 中)
+        div.show(Hint.enabled)(
+            style.color('#777').marginTop(5),
+            span.show(() => !!Hint.text.value)(text($`Hint: ${Hint.text}`)),
+            div(
+                span.show(() => Hint.list.length > 0)('options:'),
+                span.for(Hint.list)(item => [
+                    style.marginRight(20),
+                    text(item)
+                ])
+            )
+        ),
+
+
+fix: 
+        const result = !!name ? (info.filter(item => item.commandName === name) || []) : info;
+        div.for(result) 会引起报错
+
+fix: wordWrap break-all
+
 feat: emment 使用函数或特殊标记控制 默认字符串和数字 使用 text逻辑
 feat: css 动画 规则
 feat: for 大列表性能优化 考虑使用memo + shallowProxy