@design.estate/dees-domtools 2.0.57 → 2.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist_bundle/bundle.js +5256 -5725
- package/dist_bundle/bundle.js.map +4 -4
- package/dist_ts/00_commitinfo_data.d.ts +1 -1
- package/dist_ts/00_commitinfo_data.js +4 -4
- package/dist_ts/domtools.classes.domtools.d.ts +2 -2
- package/dist_ts/domtools.css.basestyles.js +1 -1
- package/dist_ts/domtools.elementbasic.js +2 -2
- package/dist_ts/domtools.pluginexports.d.ts +10 -0
- package/dist_ts/domtools.pluginexports.js +11 -0
- package/dist_ts/index.d.ts +2 -12
- package/dist_ts/index.js +3 -13
- package/npmextra.json +22 -3
- package/package.json +32 -16
- package/readme.hints.md +1 -0
- package/readme.md +107 -28
- package/ts/00_commitinfo_data.ts +3 -3
- package/ts/domtools.css.basestyles.ts +1 -1
- package/ts/domtools.elementbasic.ts +2 -2
- package/ts/domtools.pluginexports.ts +21 -0
- package/ts/index.ts +2 -13
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* autocreated commitinfo by @
|
|
2
|
+
* autocreated commitinfo by @push.rocks/commitinfo
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-domtools',
|
|
6
|
-
version: '2.0.
|
|
7
|
-
description: 'tools to simplify complex
|
|
6
|
+
version: '2.0.60',
|
|
7
|
+
description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
|
|
8
8
|
};
|
|
9
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
9
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvMDBfY29tbWl0aW5mb19kYXRhLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHO0lBQ3hCLElBQUksRUFBRSw4QkFBOEI7SUFDcEMsT0FBTyxFQUFFLFFBQVE7SUFDakIsV0FBVyxFQUFFLHFLQUFxSztDQUNuTCxDQUFBIn0=
|
|
@@ -24,8 +24,8 @@ export declare class DomTools {
|
|
|
24
24
|
bodyElement: HTMLElement;
|
|
25
25
|
};
|
|
26
26
|
websetup: WebSetup;
|
|
27
|
-
smartstate: plugins.smartstate.Smartstate<
|
|
28
|
-
domToolsStatePart: Promise<plugins.smartstate.StatePart<
|
|
27
|
+
smartstate: plugins.smartstate.Smartstate<string>;
|
|
28
|
+
domToolsStatePart: Promise<plugins.smartstate.StatePart<string, IDomToolsState>>;
|
|
29
29
|
router: plugins.smartrouter.SmartRouter;
|
|
30
30
|
convenience: {
|
|
31
31
|
typedrequest: typeof plugins.typedrequest;
|
|
@@ -10,7 +10,7 @@ export const staticStyles = css `
|
|
|
10
10
|
|
|
11
11
|
:host {
|
|
12
12
|
box-sizing: border-box;
|
|
13
|
-
font-family: '
|
|
13
|
+
font-family: 'Geist Sans', 'Inter', sans-serif;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
${unsafeCSS(scrollBarStyles)}
|
|
@@ -26,7 +26,7 @@ export const styles = html `
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
:host {
|
|
29
|
-
font-family: '
|
|
29
|
+
font-family: 'Geist Sans', 'Inter', sans-serif;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
${scrollBarStyles}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as smartdelay from '@push.rocks/smartdelay';
|
|
2
|
+
import * as smartmarkdown from '@push.rocks/smartmarkdown';
|
|
3
|
+
import * as smartpromise from '@push.rocks/smartpromise';
|
|
4
|
+
import * as SweetScroll from 'sweet-scroll';
|
|
5
|
+
import * as smartstate from '@push.rocks/smartstate';
|
|
6
|
+
import * as smartrx from '@push.rocks/smartrx';
|
|
7
|
+
import * as smartstring from '@push.rocks/smartstring';
|
|
8
|
+
import * as smarturl from '@push.rocks/smarturl';
|
|
9
|
+
import * as typedrequest from '@api.global/typedrequest';
|
|
10
|
+
export { smartdelay, smartmarkdown, smartpromise, SweetScroll, smartstate, smartrx, smartstring, smarturl, typedrequest };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as smartdelay from '@push.rocks/smartdelay';
|
|
2
|
+
import * as smartmarkdown from '@push.rocks/smartmarkdown';
|
|
3
|
+
import * as smartpromise from '@push.rocks/smartpromise';
|
|
4
|
+
import * as SweetScroll from 'sweet-scroll';
|
|
5
|
+
import * as smartstate from '@push.rocks/smartstate';
|
|
6
|
+
import * as smartrx from '@push.rocks/smartrx';
|
|
7
|
+
import * as smartstring from '@push.rocks/smartstring';
|
|
8
|
+
import * as smarturl from '@push.rocks/smarturl';
|
|
9
|
+
import * as typedrequest from '@api.global/typedrequest';
|
|
10
|
+
export { smartdelay, smartmarkdown, smartpromise, SweetScroll, smartstate, smartrx, smartstring, smarturl, typedrequest };
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMucGx1Z2luZXhwb3J0cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL2RvbXRvb2xzLnBsdWdpbmV4cG9ydHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLFVBQVUsTUFBTSx3QkFBd0IsQ0FBQztBQUNyRCxPQUFPLEtBQUssYUFBYSxNQUFNLDJCQUEyQixDQUFDO0FBQzNELE9BQU8sS0FBSyxZQUFZLE1BQU0sMEJBQTBCLENBQUM7QUFDekQsT0FBTyxLQUFLLFdBQVcsTUFBTSxjQUFjLENBQUM7QUFDNUMsT0FBTyxLQUFLLFVBQVUsTUFBTSx3QkFBd0IsQ0FBQztBQUNyRCxPQUFPLEtBQUssT0FBTyxNQUFNLHFCQUFxQixDQUFDO0FBQy9DLE9BQU8sS0FBSyxXQUFXLE1BQU0seUJBQXlCLENBQUM7QUFDdkQsT0FBTyxLQUFLLFFBQVEsTUFBTSxzQkFBc0IsQ0FBQztBQUNqRCxPQUFPLEtBQUssWUFBWSxNQUFNLDBCQUEwQixDQUFDO0FBRXpELE9BQU8sRUFDTCxVQUFVLEVBQ1YsYUFBYSxFQUNiLFlBQVksRUFDWixXQUFXLEVBQ1gsVUFBVSxFQUNWLE9BQU8sRUFDUCxXQUFXLEVBQ1gsUUFBUSxFQUNSLFlBQVksRUFDYixDQUFDIn0=
|
package/dist_ts/index.d.ts
CHANGED
|
@@ -6,17 +6,7 @@ export { css, breakpoints, elementBasic };
|
|
|
6
6
|
export { DomTools, type IDomToolsContructorOptions } from './domtools.classes.domtools.js';
|
|
7
7
|
export { TypedRequest } from '@api.global/typedrequest';
|
|
8
8
|
export { type IWebSetupConstructorOptions } from '@push.rocks/websetup';
|
|
9
|
-
import * as
|
|
10
|
-
export
|
|
11
|
-
smartdelay: typeof allPlugins.smartdelay;
|
|
12
|
-
smartmarkdown: typeof allPlugins.smartmarkdown;
|
|
13
|
-
smartpromise: typeof allPlugins.smartpromise;
|
|
14
|
-
SweetScroll: typeof allPlugins.SweetScroll;
|
|
15
|
-
smartstate: typeof allPlugins.smartstate;
|
|
16
|
-
smartrx: typeof allPlugins.smartrx;
|
|
17
|
-
smartstring: typeof allPlugins.smartstring;
|
|
18
|
-
smarturl: typeof allPlugins.smarturl;
|
|
19
|
-
typedrequest: typeof allPlugins.typedrequest;
|
|
20
|
-
};
|
|
9
|
+
import * as plugins from './domtools.pluginexports.js';
|
|
10
|
+
export { plugins };
|
|
21
11
|
import type { rxjs } from '@push.rocks/smartrx';
|
|
22
12
|
export type { rxjs, };
|
package/dist_ts/index.js
CHANGED
|
@@ -6,16 +6,6 @@ export { css, breakpoints, elementBasic };
|
|
|
6
6
|
export { DomTools } from './domtools.classes.domtools.js';
|
|
7
7
|
export { TypedRequest } from '@api.global/typedrequest';
|
|
8
8
|
export {} from '@push.rocks/websetup';
|
|
9
|
-
import * as
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
smartmarkdown: allPlugins.smartmarkdown,
|
|
13
|
-
smartpromise: allPlugins.smartpromise,
|
|
14
|
-
SweetScroll: allPlugins.SweetScroll,
|
|
15
|
-
smartstate: allPlugins.smartstate,
|
|
16
|
-
smartrx: allPlugins.smartrx,
|
|
17
|
-
smartstring: allPlugins.smartstring,
|
|
18
|
-
smarturl: allPlugins.smarturl,
|
|
19
|
-
typedrequest: allPlugins.typedrequest,
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHNCQUFzQixDQUFDO0FBRXJDLE9BQU8sS0FBSyxZQUFZLE1BQU0sNEJBQTRCLENBQUM7QUFDM0QsT0FBTyxLQUFLLFdBQVcsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEtBQUssR0FBRyxNQUFNLG1CQUFtQixDQUFDO0FBRXpDLE9BQU8sRUFBRSxHQUFHLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxRQUFRLEVBQW1DLE1BQU0sZ0NBQWdDLENBQUM7QUFDM0YsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3hELE9BQU8sRUFBb0MsTUFBTSxzQkFBc0IsQ0FBQztBQUV4RSxPQUFPLEtBQUssVUFBVSxNQUFNLHVCQUF1QixDQUFDO0FBRXBELE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRztJQUNyQixVQUFVLEVBQUUsVUFBVSxDQUFDLFVBQVU7SUFDakMsYUFBYSxFQUFFLFVBQVUsQ0FBQyxhQUFhO0lBQ3ZDLFlBQVksRUFBRSxVQUFVLENBQUMsWUFBWTtJQUNyQyxXQUFXLEVBQUUsVUFBVSxDQUFDLFdBQVc7SUFDbkMsVUFBVSxFQUFFLFVBQVUsQ0FBQyxVQUFVO0lBQ2pDLE9BQU8sRUFBRSxVQUFVLENBQUMsT0FBTztJQUMzQixXQUFXLEVBQUUsVUFBVSxDQUFDLFdBQVc7SUFDbkMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxRQUFRO0lBQzdCLFlBQVksRUFBRSxVQUFVLENBQUMsWUFBWTtDQUN0QyxDQUFDIn0=
|
|
9
|
+
import * as plugins from './domtools.pluginexports.js';
|
|
10
|
+
export { plugins };
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHNCQUFzQixDQUFDO0FBRXJDLE9BQU8sS0FBSyxZQUFZLE1BQU0sNEJBQTRCLENBQUM7QUFDM0QsT0FBTyxLQUFLLFdBQVcsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEtBQUssR0FBRyxNQUFNLG1CQUFtQixDQUFDO0FBRXpDLE9BQU8sRUFBRSxHQUFHLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxRQUFRLEVBQW1DLE1BQU0sZ0NBQWdDLENBQUM7QUFDM0YsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3hELE9BQU8sRUFBb0MsTUFBTSxzQkFBc0IsQ0FBQztBQUV4RSxPQUFPLEtBQUssT0FBTyxNQUFNLDZCQUE2QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxPQUFPLEVBQUUsQ0FBQyJ9
|
package/npmextra.json
CHANGED
|
@@ -2,17 +2,36 @@
|
|
|
2
2
|
"gitzone": {
|
|
3
3
|
"projectType": "npm",
|
|
4
4
|
"module": {
|
|
5
|
-
"githost": "
|
|
5
|
+
"githost": "code.foss.global",
|
|
6
6
|
"gitscope": "design.estate",
|
|
7
7
|
"gitrepo": "dees-domtools",
|
|
8
|
-
"description": "tools to simplify complex
|
|
8
|
+
"description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
|
|
9
9
|
"npmPackagename": "@design.estate/dees-domtools",
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"projectDomain": "design.estate"
|
|
11
|
+
"projectDomain": "design.estate",
|
|
12
|
+
"keywords": [
|
|
13
|
+
"CSS tools",
|
|
14
|
+
"web development",
|
|
15
|
+
"TypeScript support",
|
|
16
|
+
"CSS structure simplification",
|
|
17
|
+
"web components",
|
|
18
|
+
"theme management",
|
|
19
|
+
"DOM manipulation",
|
|
20
|
+
"responsive design",
|
|
21
|
+
"design system",
|
|
22
|
+
"lit element",
|
|
23
|
+
"keyboard event handling",
|
|
24
|
+
"state management",
|
|
25
|
+
"routing",
|
|
26
|
+
"performance optimization"
|
|
27
|
+
]
|
|
12
28
|
}
|
|
13
29
|
},
|
|
14
30
|
"npmci": {
|
|
15
31
|
"npmGlobalTools": [],
|
|
16
32
|
"npmAccessLevel": "public"
|
|
33
|
+
},
|
|
34
|
+
"tsdoc": {
|
|
35
|
+
"legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
|
|
17
36
|
}
|
|
18
37
|
}
|
package/package.json
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design.estate/dees-domtools",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.60",
|
|
4
4
|
"private": false,
|
|
5
|
-
"description": "tools to simplify complex
|
|
5
|
+
"description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
|
|
6
6
|
"main": "dist_ts/index.js",
|
|
7
7
|
"typings": "dist_ts/index.d.ts",
|
|
8
8
|
"type": "module",
|
|
9
9
|
"author": "Lossless GmbH",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"devDependencies": {
|
|
12
|
-
"@git.zone/tsbuild": "^2.1.
|
|
12
|
+
"@git.zone/tsbuild": "^2.1.84",
|
|
13
13
|
"@git.zone/tsbundle": "^2.0.15",
|
|
14
|
-
"@git.zone/tstest": "^1.0.
|
|
15
|
-
"@push.rocks/tapbundle": "^5.0
|
|
16
|
-
"@types/node": "^
|
|
14
|
+
"@git.zone/tstest": "^1.0.90",
|
|
15
|
+
"@push.rocks/tapbundle": "^5.3.0",
|
|
16
|
+
"@types/node": "^22.7.4"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@api.global/typedrequest": "^3.0.
|
|
20
|
-
"@design.estate/dees-comms": "^1.0.
|
|
21
|
-
"@push.rocks/lik": "^6.0.
|
|
19
|
+
"@api.global/typedrequest": "^3.0.32",
|
|
20
|
+
"@design.estate/dees-comms": "^1.0.27",
|
|
21
|
+
"@push.rocks/lik": "^6.0.15",
|
|
22
22
|
"@push.rocks/smartdelay": "^3.0.5",
|
|
23
|
-
"@push.rocks/smartjson": "^5.0.
|
|
23
|
+
"@push.rocks/smartjson": "^5.0.20",
|
|
24
24
|
"@push.rocks/smartmarkdown": "^3.0.3",
|
|
25
|
-
"@push.rocks/smartpromise": "^4.0.
|
|
25
|
+
"@push.rocks/smartpromise": "^4.0.4",
|
|
26
26
|
"@push.rocks/smartrouter": "^1.0.16",
|
|
27
27
|
"@push.rocks/smartrx": "^3.0.7",
|
|
28
|
-
"@push.rocks/smartstate": "^2.0.
|
|
29
|
-
"@push.rocks/smartstring": "^4.0.
|
|
28
|
+
"@push.rocks/smartstate": "^2.0.18",
|
|
29
|
+
"@push.rocks/smartstring": "^4.0.15",
|
|
30
30
|
"@push.rocks/smarturl": "^3.0.6",
|
|
31
|
-
"@push.rocks/webrequest": "^3.0.
|
|
31
|
+
"@push.rocks/webrequest": "^3.0.37",
|
|
32
32
|
"@push.rocks/websetup": "^3.0.19",
|
|
33
|
-
"@push.rocks/webstore": "^2.0.
|
|
34
|
-
"lit": "^3.
|
|
33
|
+
"@push.rocks/webstore": "^2.0.20",
|
|
34
|
+
"lit": "^3.2.0",
|
|
35
35
|
"sweet-scroll": "^4.0.0"
|
|
36
36
|
},
|
|
37
37
|
"files": [
|
|
@@ -49,6 +49,22 @@
|
|
|
49
49
|
"browserslist": [
|
|
50
50
|
"last 1 chrome versions"
|
|
51
51
|
],
|
|
52
|
+
"keywords": [
|
|
53
|
+
"CSS tools",
|
|
54
|
+
"web development",
|
|
55
|
+
"TypeScript support",
|
|
56
|
+
"CSS structure simplification",
|
|
57
|
+
"web components",
|
|
58
|
+
"theme management",
|
|
59
|
+
"DOM manipulation",
|
|
60
|
+
"responsive design",
|
|
61
|
+
"design system",
|
|
62
|
+
"lit element",
|
|
63
|
+
"keyboard event handling",
|
|
64
|
+
"state management",
|
|
65
|
+
"routing",
|
|
66
|
+
"performance optimization"
|
|
67
|
+
],
|
|
52
68
|
"scripts": {
|
|
53
69
|
"test": "(tstest test/ --web)",
|
|
54
70
|
"build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
|
package/readme.hints.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/readme.md
CHANGED
|
@@ -1,37 +1,116 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @design.estate/dees-domtools
|
|
2
2
|
tools to simplify complex css structures
|
|
3
3
|
|
|
4
|
-
##
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
-- | --
|
|
14
|
-
GitLab Pipelines | [](https://lossless.cloud)
|
|
15
|
-
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
|
16
|
-
npm | [](https://lossless.cloud)
|
|
17
|
-
Snyk | [](https://lossless.cloud)
|
|
18
|
-
TypeScript Support | [](https://lossless.cloud)
|
|
19
|
-
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
|
20
|
-
Code Style | [](https://lossless.cloud)
|
|
21
|
-
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
|
22
|
-
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
|
23
|
-
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
|
4
|
+
## Install
|
|
5
|
+
|
|
6
|
+
To install `@design.estate/dees-domtools`, simply use npm:
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install --save @design.estate/dees-domtools
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Ensure your project supports TypeScript and ESM syntax for the best development experience.
|
|
24
13
|
|
|
25
14
|
## Usage
|
|
26
15
|
|
|
27
|
-
|
|
16
|
+
This documentation aims to give you comprehensive guidance on how to utilize `@design.estate/dees-domtools` in your web projects to simplify complex CSS structures. Whether you're building a sophisticated web application or need a more manageable way to handle your CSS, this toolkit offers a variety of features designed to enhance and streamline your workflow. Throughout this guide, we'll cover the installation process, key features, examples, and best practices when working with `@design.estate/dees-domtools`.
|
|
17
|
+
|
|
18
|
+
Before diving into the examples, please ensure that you've completed the installation step as described above.
|
|
19
|
+
|
|
20
|
+
### Key Features
|
|
21
|
+
|
|
22
|
+
- **CSS Simplification**: Tools and utilities designed to abstract and simplify the handling of complex CSS structures.
|
|
23
|
+
- **Responsive Design Helpers**: Tools for managing responsive designs more easily, with utilities for breakpoints, and adaptable grids.
|
|
24
|
+
- **Element Utilities**: Simplified interactions with DOM elements, including dynamic style manipulations and more.
|
|
25
|
+
- **Theme Management**: Simplify the process of theme toggling (dark mode/light mode) in your applications.
|
|
26
|
+
- **Keyboard Event Handling**: Utilities for managing keyboard events, facilitating better interaction handling.
|
|
27
|
+
- **External Resources Management**: Easily manage external CSS and JavaScript resources within your project.
|
|
28
|
+
|
|
29
|
+
### Getting Started
|
|
30
|
+
|
|
31
|
+
To get started with `@design.estate/dees-domtools`, you first need to import the modules you intend to use in your project. Here's a simple example to illustrate how to import and use the package:
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
import { DomTools, elementBasic, breakpoints, css } from '@design.estate/dees-domtools';
|
|
35
|
+
|
|
36
|
+
// Setting up DomTools for your application
|
|
37
|
+
const domToolsInstance = await DomTools.setupDomTools();
|
|
38
|
+
|
|
39
|
+
// Example: Using elementBasic utilities
|
|
40
|
+
elementBasic.setup();
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Simplifying CSS with CSS Utilities
|
|
44
|
+
|
|
45
|
+
The package offers a variety of CSS utilities that simplify the handling of complex CSS structures. Here's how you can use them in your project:
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
import { css } from '@design.estate/dees-domtools';
|
|
49
|
+
|
|
50
|
+
// Example: Creating a CSS grid with a specified number of columns and gap size
|
|
51
|
+
const gridStyles = css.cssGridColumns(3, 10); // 3 columns with a 10px gap
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Managing Responsive Design
|
|
55
|
+
|
|
56
|
+
Responsive design is critical for modern web development. `@design.estate/dees-domtools` provides utilities to make it easier to manage responsive designs and breakpoints.
|
|
57
|
+
|
|
58
|
+
```typescript
|
|
59
|
+
import { breakpoints } from '@design.estate/dees-domtools';
|
|
60
|
+
|
|
61
|
+
// Example: Applying styles for different viewport sizes
|
|
62
|
+
const tabletStyles = breakpoints.cssForTablet(myCssStyles);
|
|
63
|
+
const phoneStyles = breakpoints.cssForPhone(myCssStyles);
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Theme Management
|
|
67
|
+
|
|
68
|
+
Managing themes (such as toggling between dark and light mode) is simplified with the built-in theme management tools.
|
|
69
|
+
|
|
70
|
+
```typescript
|
|
71
|
+
// Toggle between light and dark themes
|
|
72
|
+
domToolsInstance.themeManager.toggleDarkBright();
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Handling Keyboard Events
|
|
76
|
+
|
|
77
|
+
Keyboard event handling is made easy with the utilities provided by the toolkit. This can be particularly useful for adding keyboard navigation and shortcuts.
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
import { Keyboard } from '@design.estate/dees-domtools';
|
|
81
|
+
|
|
82
|
+
// Initialize keyboard handling
|
|
83
|
+
const keyboard = new Keyboard(document.body);
|
|
84
|
+
|
|
85
|
+
// Bind an event to a specific key combination
|
|
86
|
+
keyboard.on([Keyboard.Key.Ctrl, Keyboard.Key.S]).subscribe(() => {
|
|
87
|
+
console.log('Ctrl+S was pressed');
|
|
88
|
+
});
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Best Practices
|
|
92
|
+
|
|
93
|
+
- **Organize Your CSS**: Use the provided CSS utilities to structure your styles in a way that makes them easy to maintain and scale.
|
|
94
|
+
- **Embrace Responsiveness**: Leverage the responsive design helpers to ensure your application looks great on any device.
|
|
95
|
+
- **Consistent Theme Handling**: Utilize the theme management tools to provide a seamless experience for your users, allowing them to choose their preferred theme.
|
|
96
|
+
|
|
97
|
+
By integrating `@design.estate/dees-domtools` into your project, you can leverage a comprehensive suite of utilities designed to simplify complex CSS structures and enhance your web development workflow.
|
|
98
|
+
|
|
99
|
+
## License and Legal Information
|
|
100
|
+
|
|
101
|
+
This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository.
|
|
102
|
+
|
|
103
|
+
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
|
|
104
|
+
|
|
105
|
+
### Trademarks
|
|
106
|
+
|
|
107
|
+
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
|
|
28
108
|
|
|
29
|
-
|
|
109
|
+
### Company Information
|
|
30
110
|
|
|
31
|
-
|
|
111
|
+
Task Venture Capital GmbH
|
|
112
|
+
Registered at District court Bremen HRB 35230 HB, Germany
|
|
32
113
|
|
|
33
|
-
For
|
|
114
|
+
For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
|
|
34
115
|
|
|
35
|
-
|
|
36
|
-
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
|
37
|
-
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
|
116
|
+
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|
package/ts/00_commitinfo_data.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* autocreated commitinfo by @
|
|
2
|
+
* autocreated commitinfo by @push.rocks/commitinfo
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-domtools',
|
|
6
|
-
version: '2.0.
|
|
7
|
-
description: 'tools to simplify complex
|
|
6
|
+
version: '2.0.60',
|
|
7
|
+
description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
|
|
8
8
|
}
|
|
@@ -12,7 +12,7 @@ export const staticStyles = css`
|
|
|
12
12
|
|
|
13
13
|
:host {
|
|
14
14
|
box-sizing: border-box;
|
|
15
|
-
font-family: '
|
|
15
|
+
font-family: 'Geist Sans', 'Inter', sans-serif;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
${unsafeCSS(scrollBarStyles)}
|
|
@@ -29,7 +29,7 @@ export const styles = html`
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
:host {
|
|
32
|
-
font-family: '
|
|
32
|
+
font-family: 'Geist Sans', 'Inter', sans-serif;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
${scrollBarStyles}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as smartdelay from '@push.rocks/smartdelay';
|
|
2
|
+
import * as smartmarkdown from '@push.rocks/smartmarkdown';
|
|
3
|
+
import * as smartpromise from '@push.rocks/smartpromise';
|
|
4
|
+
import * as SweetScroll from 'sweet-scroll';
|
|
5
|
+
import * as smartstate from '@push.rocks/smartstate';
|
|
6
|
+
import * as smartrx from '@push.rocks/smartrx';
|
|
7
|
+
import * as smartstring from '@push.rocks/smartstring';
|
|
8
|
+
import * as smarturl from '@push.rocks/smarturl';
|
|
9
|
+
import * as typedrequest from '@api.global/typedrequest';
|
|
10
|
+
|
|
11
|
+
export {
|
|
12
|
+
smartdelay,
|
|
13
|
+
smartmarkdown,
|
|
14
|
+
smartpromise,
|
|
15
|
+
SweetScroll,
|
|
16
|
+
smartstate,
|
|
17
|
+
smartrx,
|
|
18
|
+
smartstring,
|
|
19
|
+
smarturl,
|
|
20
|
+
typedrequest
|
|
21
|
+
};
|
package/ts/index.ts
CHANGED
|
@@ -9,19 +9,8 @@ export { DomTools, type IDomToolsContructorOptions } from './domtools.classes.do
|
|
|
9
9
|
export { TypedRequest } from '@api.global/typedrequest';
|
|
10
10
|
export { type IWebSetupConstructorOptions } from '@push.rocks/websetup';
|
|
11
11
|
|
|
12
|
-
import * as
|
|
13
|
-
|
|
14
|
-
export const plugins = {
|
|
15
|
-
smartdelay: allPlugins.smartdelay,
|
|
16
|
-
smartmarkdown: allPlugins.smartmarkdown,
|
|
17
|
-
smartpromise: allPlugins.smartpromise,
|
|
18
|
-
SweetScroll: allPlugins.SweetScroll,
|
|
19
|
-
smartstate: allPlugins.smartstate,
|
|
20
|
-
smartrx: allPlugins.smartrx,
|
|
21
|
-
smartstring: allPlugins.smartstring,
|
|
22
|
-
smarturl: allPlugins.smarturl,
|
|
23
|
-
typedrequest: allPlugins.typedrequest,
|
|
24
|
-
};
|
|
12
|
+
import * as plugins from './domtools.pluginexports.js';
|
|
13
|
+
export { plugins };
|
|
25
14
|
|
|
26
15
|
// type exports
|
|
27
16
|
import type { rxjs } from '@push.rocks/smartrx';
|