@ktjs/mui 0.35.0 → 0.36.1

package/README.md

@@ -17,7 +17,9 @@
 
 ## Recent Updates
 
-1. 0.35.x - `reactive.get('a','b')` is a shortcut for `reactive.map((v) => v.a.b)`. By default it has 5 levels of type annotations and it's convienient for common use cases.
+1. 0.36.x - override 0.35.x. Now refs and computeds have 2 new apis:
+   1. `get(...keys)`: create a `KTSubComputed` object. It is a light version of computed, used to bind values
+   2. `subref(...keys)`: create a `KTSubRef` object. It is a light version of ref, used to bind values and also support two-way binding with `k-model`.
 2. 0.34.x - `ref.notify()` no-longer has an optional argument.
 3. 0.33.x - `ref.value` remains the standard read API, and it can also replace the whole outer value with `ref.value = nextValue`.
 4. 0.33.x - `ref.draft` is the deep-mutation entry for literally any objects. Just use `someRef.draft.a = someValue`, and kt.js will add it to microqueue and redraw it on the next tick. Works for `Map`, `Set`, `Array`, `Date` and your custom objects.

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-import { KTReactive, KTRawContent, KTMaybeReactive as KTMaybeReactive$1, JSX } from '@ktjs/core';
+import { KTReactiveLike, KTRawContent, KTMaybeReactive as KTMaybeReactive$1, JSX, KTRefLike } from '@ktjs/core';
 
 interface KTMuiProps {
-  class?: string | KTReactive<string>;
-  style?: string | Partial<CSSStyleDeclaration> | KTReactive<string> | KTReactive<Partial<CSSStyleDeclaration>>;
+  class?: string | KTReactiveLike<string>;
+  style?: string | Partial<CSSStyleDeclaration> | KTReactiveLike<string> | KTReactiveLike<Partial<CSSStyleDeclaration>>;
   children?: KTRawContent;
 }
 
-type KTMaybeReactive<T> = T | KTReactive<T>;
+type KTMaybeReactive<T> = T | KTReactiveLike<T>;
 
 type KTMuiAlertSeverity = 'error' | 'warning' | 'info' | 'success';
 type KTMuiAlertVariant = 'standard' | 'filled' | 'outlined';
@@ -243,7 +243,7 @@ interface KTMuiPopoverOrigin {
     horizontal: KTMuiPopoverHorizontalOrigin;
 }
 type KTMuiPopoverCloseReason = 'backdropClick' | 'escapeKeyDown';
-type KTMuiPopoverAnchorEl<TAnchor extends JSX.Element | undefined = JSX.Element | undefined> = TAnchor | KTReactive<TAnchor>;
+type KTMuiPopoverAnchorEl<TAnchor extends JSX.Element | undefined = JSX.Element | undefined> = TAnchor | KTReactiveLike<TAnchor>;
 interface KTMuiPopoverProps<TAnchor extends JSX.Element | undefined = JSX.Element | undefined> extends KTMuiProps {
     /**
      * Indicates whether the popover is open.
@@ -343,7 +343,7 @@ type ComponentChangeHandler<T = string> = (value: T, ...args: any[]) => void;
 type KTMuiTextFieldType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 type KTMuiTextFieldSize = 'small' | 'medium';
 interface KTMuiTextFieldProps<T extends KTMuiTextFieldType = 'text'> extends KTMuiProps {
-    'k-model'?: T extends 'number' ? KTReactive<number> : KTReactive<string>;
+    'k-model'?: T extends 'number' ? KTRefLike<number> : KTRefLike<string>;
     label?: KTMaybeReactive<string>;
     placeholder?: KTMaybeReactive<string>;
     value?: any;
@@ -356,7 +356,7 @@ interface KTMuiTextFieldProps<T extends KTMuiTextFieldType = 'text'> extends KTM
     fullWidth?: KTMaybeReactive<boolean>;
     multiline?: boolean;
     rows?: KTMaybeReactive<number>;
-    size?: KTMuiTextFieldSize | KTReactive<KTMuiTextFieldSize>;
+    size?: KTMuiTextFieldSize | KTReactiveLike<KTMuiTextFieldSize>;
     'on:input'?: ComponentChangeHandler<T extends 'number' ? number : T extends 'date' ? Date : string>;
     'on:change'?: ComponentChangeHandler<T extends 'number' ? number : T extends 'date' ? Date : string>;
     'on:blur'?: () => void;
@@ -370,7 +370,7 @@ declare function TextField<T extends KTMuiTextFieldType = 'text'>(props: KTMuiTe
 
 type KTMuiFilePickerSize = 'small' | 'medium';
 interface KTMuiFilePickerProps extends KTMuiProps {
-    'k-model'?: KTReactive<File[]>;
+    'k-model'?: KTRefLike<File[]>;
     label?: KTMaybeReactive<string>;
     placeholder?: KTMaybeReactive<string>;
     value?: File[];
@@ -382,7 +382,7 @@ interface KTMuiFilePickerProps extends KTMuiProps {
     error?: KTMaybeReactive<boolean>;
     helperText?: KTMaybeReactive<string>;
     fullWidth?: KTMaybeReactive<boolean>;
-    size?: KTMuiFilePickerSize | KTReactive<KTMuiFilePickerSize>;
+    size?: KTMuiFilePickerSize | KTReactiveLike<KTMuiFilePickerSize>;
     buttonText?: KTMaybeReactive<string>;
     showFileCount?: KTMaybeReactive<boolean>;
     'on:change'?: (files: File[]) => void;
@@ -397,7 +397,7 @@ declare function FilePicker(props: KTMuiFilePickerProps): KTMuiFilePicker;
 
 type KTMuiDirectoryPickerSize = 'small' | 'medium';
 interface KTMuiDirectoryPickerProps extends KTMuiProps {
-    'k-model'?: KTReactive<File[]>;
+    'k-model'?: KTRefLike<File[]>;
     label?: KTMaybeReactive<string>;
     placeholder?: KTMaybeReactive<string>;
     value?: File[];
@@ -407,7 +407,7 @@ interface KTMuiDirectoryPickerProps extends KTMuiProps {
     error?: KTMaybeReactive<boolean>;
     helperText?: KTMaybeReactive<string>;
     fullWidth?: KTMaybeReactive<boolean>;
-    size?: KTMuiDirectoryPickerSize | KTReactive<KTMuiDirectoryPickerSize>;
+    size?: KTMuiDirectoryPickerSize | KTReactiveLike<KTMuiDirectoryPickerSize>;
     buttonText?: KTMaybeReactive<string>;
     'on:change'?: (files: File[], directoryPath: string) => void;
     'on:blur'?: () => void;
@@ -423,7 +423,7 @@ type KTMuiRadioSize = 'small' | 'medium';
 type KTMuiRadioColor = 'primary' | 'secondary' | 'default';
 interface KTMuiRadioProps extends KTMuiProps {
     value: string;
-    label: string | JSX.Element | HTMLElement | KTReactive<string | JSX.Element | HTMLElement>;
+    label: KTMaybeReactive$1<string | JSX.Element | HTMLElement>;
     checked?: boolean;
     size?: KTMuiRadioSize;
     'on:change'?: (checked: boolean, value: string) => void;
@@ -487,10 +487,10 @@ declare function Select(props: KTMuiSelectProps): KTMuiSelect;
 
 type KTMuiCardVariant = 'elevation' | 'outlined' | 'contained';
 interface KTMuiCardProps extends KTMuiProps {
-    variant?: KTMuiCardVariant;
-    elevation?: number | KTReactive<number>;
-    square?: boolean | KTReactive<boolean>;
-    raised?: boolean | KTReactive<boolean>;
+    variant?: KTMaybeReactive$1<KTMuiCardVariant>;
+    elevation?: KTMaybeReactive$1<number>;
+    square?: KTMaybeReactive$1<boolean>;
+    raised?: KTMaybeReactive$1<boolean>;
     'on:click'?: (event: MouseEvent) => void;
     'on:mouseenter'?: (event: MouseEvent) => void;
     'on:mouseleave'?: (event: MouseEvent) => void;
@@ -554,7 +554,7 @@ interface KTMuiBadgeAnchorOrigin {
     horizontal: KTMuiBadgeHorizontalOrigin;
 }
 interface KTMuiBadgeProps extends KTMuiProps {
-    badgeContent?: KTMuiBadgeContent | KTReactive<number> | KTReactive<string>;
+    badgeContent?: KTMaybeReactive$1<KTMuiBadgeContent>;
     max?: KTMaybeReactive$1<number>;
     showZero?: KTMaybeReactive$1<boolean>;
     invisible?: KTMaybeReactive$1<boolean>;
@@ -583,7 +583,7 @@ interface KTMuiTabOption {
     disabled?: boolean;
 }
 interface KTMuiTabsProps extends KTMuiProps {
-    'k-model'?: KTReactive<string>;
+    'k-model'?: KTRefLike<string>;
     options: KTMaybeReactive<KTMuiTabOption[]>;
     variant?: KTMaybeReactive<KTMuiTabsVariant>;
     textColor?: KTMaybeReactive<KTMuiTabsTextColor>;