tosijs-ui 1.0.4 → 1.0.7

package/README.md

@@ -5,10 +5,17 @@
 
 <!--{ "pin": "top" }-->
 
-[ui.xinjs.net live demo](https://ui.xinjs.net) | [xinjs](https://xinjs.net) | [discord](https://discord.gg/ramJ9rgky5) | [github](https://github.com/tonioloewald/tosijs-ui#readme) | [npm](https://www.npmjs.com/package/tosijs-ui)
+[ui.tosijs.net live demo](https://ui.tosijs.net) | [tosijs](https://tosijs.net) | [discord](https://discord.gg/ramJ9rgky5) | [github](https://github.com/tonioloewald/tosijs-ui#readme) | [npm](https://www.npmjs.com/package/tosijs-ui)
+
+[![tosijs is on NPM](https://badge.fury.io/js/tosijs.svg)](https://www.npmjs.com/package/tosijs-ui)
+[![tosijs is about 10kB gzipped](https://deno.bundlejs.com/?q=tosijs-ui&badge=)](https://bundlejs.com/?q=tosijs-ui&badge=)
+[![tosijs on jsdelivr](https://data.jsdelivr.com/v1/package/npm/tosijs-ui/badge)](https://www.jsdelivr.com/package/npm/tosijs-ui)
 
 <center>
-  <xin-icon class="logo" icon="tosiUi" size=300></xin-icon>
+  <xin-lottie
+    style="width: 280px; height: 280px; background: #da1167; border-radius: 40px;"
+    src="/tosi-ui.json"
+  ></xin-lottie>
 </center>
 
 Copyright ©2023-2025 Tonio Loewald
@@ -27,7 +34,7 @@ It works beautifully with other web-component libraries, such as [shoelace.style
 
 Add xinjs-ui to your project, e.g.
 
-```
+```bash
 npm add xinjs-ui
 ```
 
@@ -35,7 +42,7 @@ Then you can import the component `elementCreator` and create the element any wa
 like, the easiest way being to use the `elementCreator` itself. A `tosijs` `elementCreator`
 is syntax sugar around `document.createElement()`.
 
-```
+```ts
 import { dataTable } from 'xinjs-ui'
 
 document.body.append(dataTable())
@@ -166,3 +173,11 @@ for an `<input>` or `<textarea>` (while mitigating the historical pathologies of
 `<select>` and `<input type="radio">`). E.g. the `<xin-select>` does not suffer from a
 race-condition between having its value set and being given an `<option>` with the intended value
 and you can differentiate between the user picking a value (`action`) and the value changing (`change`).
+
+## Credits
+
+`tosijs-ui` is being developed using [bun](https://bun.sh/).
+`bun` is crazy fast (based on Webkit's JS engine, vs. V8), does a lot of stuff
+natively, and runs TypeScript (with import and require) directly.
+
+Logo animations by [@anicoremotion](https://pro.fiverr.com/freelancers/anicoremotion).

package/dist/ab-test.d.ts

@@ -11,4 +11,4 @@ export declare class AbTest extends Component {
     disconnectedCallback(): void;
     render(): void;
 }
-export declare const abTest: import("tosijs").ElementCreator<Component<import("tosijs").PartsMap>>;
+export declare const abTest: import("tosijs").ElementCreator<AbTest>;

package/dist/code-editor.d.ts

@@ -6,11 +6,13 @@ export declare class CodeEditor extends WebComponent {
     mode: string;
     disabled: boolean;
     role: string;
-    get editor(): any;
+    private _ace;
     private _editor;
     private _editorPromise;
     options: any;
     theme: string;
+    get ace(): any;
+    get editor(): any;
     static styleSpec: {
         ':host': {
             display: string;

package/dist/dialog.d.ts

@@ -18,5 +18,5 @@ export declare class TosiDialog extends Component<DialogParts> {
     ok: () => void;
     content: () => HTMLDialogElement;
 }
-export declare const tosiDialog: import("tosijs").ElementCreator<Component<PartsMap>>;
+export declare const tosiDialog: import("tosijs").ElementCreator<TosiDialog>;
 export {};

package/dist/editable-rect.d.ts

@@ -93,5 +93,5 @@ export declare class EditableRect extends Component {
     connectedCallback(): void;
     render(): void;
 }
-export declare const editableRect: import("tosijs").ElementCreator<Component<import("tosijs").PartsMap>>;
+export declare const editableRect: import("tosijs").ElementCreator<EditableRect>;
 export {};

package/dist/filter-builder.d.ts

@@ -1,4 +1,5 @@
-import { Component as WebComponent, ElementCreator } from 'tosijs';
+import { Component as WebComponent, ElementCreator, PartsMap } from 'tosijs';
+import { XinSelect } from './select';
 type ObjectTest = (obj: any) => boolean;
 type ArrayFilter = (array: any[]) => any[];
 interface FilterMaker {
@@ -23,7 +24,13 @@ export interface FilterPartState {
     condition: string;
     needle: string;
 }
-export declare class FilterPart extends WebComponent {
+interface FilterPartParts extends PartsMap {
+    haystack: XinSelect;
+    condition: XinSelect;
+    needle: HTMLInputElement;
+    remove: HTMLButtonElement;
+}
+export declare class FilterPart extends WebComponent<FilterPartParts> {
     fields: Fields;
     filters: {
         [key: string]: FilterMaker;
@@ -31,7 +38,7 @@ export declare class FilterPart extends WebComponent {
     haystack: string;
     condition: string;
     needle: string;
-    content: () => (SVGElement | HTMLSpanElement)[];
+    content: () => HTMLSpanElement[];
     filter: Filter;
     constructor();
     get state(): FilterPartState;
@@ -42,7 +49,11 @@ export declare class FilterPart extends WebComponent {
 }
 export declare const filterPart: ElementCreator<FilterPart>;
 export type FilterState = FilterPartState[];
-export declare class FilterBuilder extends WebComponent {
+export interface FilterBuilderParts extends PartsMap {
+    add: HTMLButtonElement;
+    resent: HTMLButtonElement;
+}
+export declare class FilterBuilder extends WebComponent<FilterBuilderParts> {
     private _fields;
     get fields(): Fields;
     set fields(_fields: Fields);

package/dist/icons.d.ts

@@ -3,7 +3,7 @@ import { SVGIconMap } from './icon-types';
 export declare const defineIcons: (newIcons: {
     [key: string]: string;
 }) => void;
-export declare const svg2DataUrl: (svg: SVGElement, fill?: string | false, stroke?: string | false, strokeWidth?: number | string) => string;
+export declare const svg2DataUrl: (svg: SVGElement, fill?: string, stroke?: string, strokeWidth?: number) => string;
 export declare const icons: SVGIconMap;
 export declare class SvgIcon extends WebComponent {
     icon: string;
@@ -14,4 +14,4 @@ export declare class SvgIcon extends WebComponent {
     constructor();
     render(): void;
 }
-export declare const svgIcon: ElementCreator<WebComponent<import("tosijs").PartsMap>>;
+export declare const svgIcon: ElementCreator<SvgIcon>;