@o.z/zui 0.1.0 β 0.2.0
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/README.md +85 -102
- package/dist/decorators.cjs +1 -1
- package/dist/decorators.d.ts +3 -4
- package/dist/decorators.js +2 -2
- package/dist/index.cjs +3 -1
- package/dist/index.d.ts +358 -0
- package/dist/index.js +5 -1
- package/dist/utilities.cjs +2 -1
- package/dist/utilities.d.ts +6 -0
- package/dist/utilities.js +2 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,36 +1,28 @@
|
|
|
1
1
|
# ZUI Framework β‘
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@o.z/zui)
|
|
3
|
+
[](https://www.npmjs.com/package/@o.z/zui)
|
|
4
|
+
[](https://www.npmjs.com/package/@o.z/zui)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
[](https://vitejs.dev/)
|
|
4
7
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
**ZUI** is a lightweight, type-safe abstraction layer for building native Web Components. It leverages the power of **TypeScript Stage 3 Decorators** (`accessor`) to remove boilerplate, manage reactivity, and streamline DOM interactions, all while staying close to the metal of the browser.
|
|
8
|
+
**ZUI** is a next-generation, lightweight abstraction layer for building native Web Components. It leverages **TypeScript Stage 3 Decorators** to eliminate boilerplate, manage reactive state, and streamline DOM interactions while staying close to the metal of the browser.
|
|
8
9
|
|
|
9
10
|
---
|
|
10
11
|
|
|
11
12
|
## π Why ZUI?
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
Standard Web Components require significant boilerplate: managing `observedAttributes`, manually handling `shadowRoot`, and verbose event dispatching. **ZUI** solves this with a declarative, type-safe API:
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
16
|
+
* **β‘ Stage 3 Decorators:** Built for modern TypeScript, utilizing the standard `accessor` pattern.
|
|
17
|
+
* **π Reactive State:** Properties automatically trigger view updates and lifecycle hooks.
|
|
18
|
+
* **π― Zero-Boilerplate Refs:** Type-safe DOM element caching without manual `querySelector` calls.
|
|
19
|
+
* **π‘ Magic Event Emitters:** Auto-generated, strictly typed event dispatch methods.
|
|
20
|
+
* **π¨ Scoped Styling:** Seamless integration with standard Shadow DOM or scoped styles.
|
|
21
|
+
* **π Customized Built-ins:** First-class support for extending native elements (e.g., `<div is="my-component">`).
|
|
20
22
|
|
|
21
23
|
---
|
|
22
24
|
|
|
23
|
-
## π¦
|
|
24
|
-
|
|
25
|
-
* **Stage 3 Decorators:** Built for the future of TypeScript.
|
|
26
|
-
* **Reactivity System:** Simple `accessor` pattern with lifecycle hooks (e.g., `countUpdate`).
|
|
27
|
-
* **Scoped Styling:** Automatic Shadow DOM or scoped style injection.
|
|
28
|
-
* **Vite Compatible:** Designed to work with `.html?raw` and `.scss?inline` imports.
|
|
29
|
-
* **Type Safety:** First-class TypeScript support for Props and Events.
|
|
30
|
-
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
## Installation
|
|
25
|
+
## π¦ Installation
|
|
34
26
|
|
|
35
27
|
```bash
|
|
36
28
|
npm install @o.z/zui
|
|
@@ -44,124 +36,115 @@ pnpm add @o.z/zui
|
|
|
44
36
|
|
|
45
37
|
## π οΈ Usage Example
|
|
46
38
|
|
|
47
|
-
|
|
39
|
+
ZUI is designed to work seamlessly with Viteβs raw and inline string imports for templates and styles.
|
|
48
40
|
|
|
49
|
-
### 1.
|
|
41
|
+
### 1. The Component (```counter.ts```)
|
|
50
42
|
|
|
51
43
|
```typescript
|
|
52
|
-
import { defineElement, event, property, ref } from "@o.z/zui"
|
|
53
|
-
import htmlStr from "./counter.html?raw"
|
|
54
|
-
import cssStr from "./counter.scss?inline"
|
|
44
|
+
import { defineElement, event, property, ref, Zui, EventEmitter } from "@o.z/zui"
|
|
45
|
+
import htmlStr from "./counter.html?raw"
|
|
46
|
+
import cssStr from "./counter.scss?inline"
|
|
47
|
+
|
|
48
|
+
export type CounterClickEvent = { count: number; e?: MouseEvent }
|
|
55
49
|
|
|
56
50
|
@defineElement({
|
|
57
51
|
tagName: "my-counter",
|
|
58
52
|
html: htmlStr,
|
|
59
53
|
css: cssStr,
|
|
60
|
-
options: { extends: 'div' } //
|
|
54
|
+
options: { extends: 'div' } // Extend native div functionality
|
|
61
55
|
})
|
|
62
|
-
export class Counter extends HTMLDivElement {
|
|
63
|
-
|
|
64
|
-
// 1. Reactive State
|
|
56
|
+
export class Counter extends Zui(HTMLDivElement) {
|
|
57
|
+
// 1. Reactive State: Synchronized with 'count' attribute
|
|
65
58
|
@property()
|
|
66
|
-
accessor count
|
|
59
|
+
accessor count = 0
|
|
67
60
|
|
|
68
|
-
// 2. DOM References
|
|
69
|
-
@ref(
|
|
70
|
-
|
|
61
|
+
// 2. DOM References: Automatically queried from Shadow Root
|
|
62
|
+
@ref(".counter-display")
|
|
63
|
+
displayRef!: HTMLDivElement
|
|
71
64
|
|
|
72
|
-
@ref(
|
|
73
|
-
|
|
65
|
+
@ref(".btn-inc")
|
|
66
|
+
incBtn!: HTMLButtonElement
|
|
74
67
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
// 3. Event Definition
|
|
79
|
-
@event({ name: "counter-click" })
|
|
80
|
-
counterClick!: CustomEvent<any>;
|
|
68
|
+
// 3. Event Emitter: Typed event dispatcher
|
|
69
|
+
@event()
|
|
70
|
+
counterClick!: EventEmitter<CounterClickEvent>
|
|
81
71
|
|
|
82
72
|
connected() {
|
|
83
|
-
this.
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
handleUpdate(delta: number) {
|
|
88
|
-
// Magic method generated by @event decorator
|
|
89
|
-
(this as any).emitCounterClick({ count: delta });
|
|
73
|
+
this.incBtn.addEventListener("click", () => {
|
|
74
|
+
this.counterClick.emit({ count: 1 })
|
|
75
|
+
})
|
|
90
76
|
}
|
|
91
77
|
|
|
92
|
-
// 4. Reactive Hook: Called
|
|
93
|
-
countUpdate(
|
|
94
|
-
this.
|
|
78
|
+
// 4. Reactive Hook: Called when 'count' changes
|
|
79
|
+
countUpdate(oldValue: number, newValue: number) {
|
|
80
|
+
this.displayRef.innerHTML = newValue.toString()
|
|
95
81
|
}
|
|
96
82
|
}
|
|
97
83
|
```
|
|
98
84
|
|
|
99
|
-
### 2.
|
|
100
|
-
|
|
101
|
-
**Counter.html**
|
|
102
|
-
```html
|
|
103
|
-
<div class="container">
|
|
104
|
-
<div part="counter-text" class="counter">0</div>
|
|
105
|
-
<button class="decrease"><slot name="decrease"></slot></button>
|
|
106
|
-
<button class="increase"><slot name="increase"></slot></button>
|
|
107
|
-
</div>
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
### 3. Implementation in DOM
|
|
85
|
+
### 2. Usage in HTML
|
|
111
86
|
|
|
112
|
-
|
|
87
|
+
Since we extended the native `div`, we use the `is` attribute:
|
|
113
88
|
|
|
114
89
|
```html
|
|
115
90
|
<div id="counter" is="my-counter">
|
|
116
|
-
<span slot="increase"
|
|
117
|
-
<span slot="decrease">-1</span>
|
|
91
|
+
<span slot="increase">Increment</span>
|
|
118
92
|
</div>
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
```typescript
|
|
122
|
-
// main.ts
|
|
123
|
-
const counterEl = document.querySelector<Counter>("#counter")!;
|
|
124
93
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
94
|
+
<script type="module">
|
|
95
|
+
import { Counter } from "./counter"
|
|
96
|
+
|
|
97
|
+
const el = document.querySelector("#counter")
|
|
98
|
+
|
|
99
|
+
// Fully typed event details via e.detail.value
|
|
100
|
+
el.addEventListener("counter-click", (e) => {
|
|
101
|
+
el.count += e.detail.value.count
|
|
102
|
+
})
|
|
103
|
+
</script>
|
|
129
104
|
```
|
|
130
105
|
|
|
131
106
|
---
|
|
132
107
|
|
|
133
108
|
## π API Reference
|
|
134
109
|
|
|
135
|
-
###
|
|
136
|
-
Class decorator
|
|
137
|
-
*
|
|
138
|
-
*
|
|
139
|
-
*
|
|
140
|
-
*
|
|
141
|
-
|
|
142
|
-
###
|
|
143
|
-
|
|
144
|
-
*
|
|
145
|
-
*
|
|
146
|
-
*
|
|
147
|
-
|
|
148
|
-
###
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
110
|
+
### ```@defineElement(config)```
|
|
111
|
+
Class decorator to register the custom element.
|
|
112
|
+
* **tagName**: The kebab-case name for your component.
|
|
113
|
+
* **html**: Raw HTML string for the template.
|
|
114
|
+
* **css**: (Optional) CSS string to be injected into the Shadow Root.
|
|
115
|
+
* **options**: (Optional) Standard `ElementDefinitionOptions` (e.g., `{ extends: 'button' }`).
|
|
116
|
+
|
|
117
|
+
### ```@property(options)```
|
|
118
|
+
Used on `accessor` fields to create reactive attributes.
|
|
119
|
+
* **type**: `"string" | "number" | "boolean"`. If omitted, it's inferred from the initial value.
|
|
120
|
+
* **name**: Custom attribute name (defaults to kebab-case of the property).
|
|
121
|
+
* **Hook**: Automatically calls `[propertyName]Update(old, new)` on change.
|
|
122
|
+
|
|
123
|
+
### ```@ref(selector)```
|
|
124
|
+
Field decorator that automatically assigns a child element from the Shadow Root to the property using `querySelector`.
|
|
125
|
+
|
|
126
|
+
### ```@event(options)```
|
|
127
|
+
Field decorator that initializes an `EventEmitter`.
|
|
128
|
+
* **name**: Custom event name (defaults to kebab-case of the property).
|
|
129
|
+
* **Usage**: Call `this.propertyName.emit(payload)` to dispatch a `CustomEvent`.
|
|
130
|
+
|
|
131
|
+
### ```Zui(BaseClass)```
|
|
132
|
+
A class mixin that enhances the base element (like `HTMLElement` or `HTMLDivElement`) with improved TypeScript definitions for `addEventListener`, ensuring custom events have correct payload types.
|
|
157
133
|
|
|
158
134
|
---
|
|
159
135
|
|
|
160
|
-
## π»
|
|
136
|
+
## π» Development
|
|
161
137
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
138
|
+
```bash
|
|
139
|
+
# Install dependencies
|
|
140
|
+
yarn install
|
|
141
|
+
|
|
142
|
+
# Start development server
|
|
143
|
+
yarn dev
|
|
144
|
+
|
|
145
|
+
# Build the library
|
|
146
|
+
yarn build
|
|
147
|
+
```
|
|
165
148
|
|
|
166
149
|
---
|
|
167
150
|
|
package/dist/decorators.cjs
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
4
4
|
|
|
5
5
|
const utilities = require('./utilities.cjs');
|
|
6
6
|
|
|
7
|
-
function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}var OBSERVED_ATTRS_KEY=Symbol("observedAttributes");var callFun=function(attribute,oldValue,newValue,bindThis){if(attribute){var funName=attribute.callbackName;if(funName in bindThis){if(attribute.type==="string"){bindThis[funName](oldValue,newValue);}else if(attribute.type==="number"){bindThis[funName](+oldValue,+newValue);}else if(attribute.type==="boolean"){bindThis[funName](typeof oldValue==="string"?oldValue===""||String(oldValue).toLowerCase()==="true":Boolean(oldValue),typeof newValue==="string"?newValue===""||String(newValue).toLowerCase()==="true":Boolean(newValue));}}}};var getConvertor=function(param,bindThis){var type=param.type,name=param.name;var value=bindThis.getAttribute(name);if(value!==undefined&&value!==null){if(type==="number")return +value;else if(type==="string")return value;else if(type==="boolean"){return value===""||(value===null||value===void 0?void 0:value.toLowerCase())==="true"}else throw 'Only accept type of "string", "number", "boolean"'}};var defineElement=function(param){var tagName=param.tagName,html=param.html,_param_css=param.css,css=_param_css===void 0?"":_param_css,options=param.options;return function(originalClass,context){var attributes=context.metadata[OBSERVED_ATTRS_KEY];if(!html)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(html);var NewClass=/*#__PURE__*/function(originalClass){_inherits(NewClass,originalClass);function NewClass(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_class_call_check(this,NewClass);var _this;_this=_call_super(this,NewClass,_to_consumable_array(args)),_define_property(_this,"shadowRoot",void 0);_this.setAttribute("is",tagName);_this.shadowRoot=_this.attachShadow({mode:"closed"});_this.shadowRoot.appendChild(template.content.cloneNode(true));return _this}_create_class(NewClass,[{key:"connectedCallback",value:function connectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["connected"]();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["disconnected"]();});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){if(oldValue!==newValue){var _this_attributyyeChanged,_this;(_this=this)===null||_this===void 0?void 0:(_this_attributyyeChanged=_this["attributyyeChanged"])===null||_this_attributyyeChanged===void 0?void 0:_this_attributyyeChanged.call(_this,attributeName,oldValue,newValue);}if(oldValue!==newValue){callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,this);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};var property=function(){var _ref=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},type=_ref.type,name=_ref.name,callbackName=_ref.callbackName;return function(_accessor,context){var _context_metadata,_OBSERVED_ATTRS_KEY,_;var attributName=name!==null&&name!==void 0?name:utilities.toKebabCase(context.name.toString());var attributCallbackName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(context.name.toString(),"Update");var attribute={type:type,name:attributName,callbackName:attributCallbackName};(_=(_context_metadata=context.metadata)[_OBSERVED_ATTRS_KEY=OBSERVED_ATTRS_KEY])!==null&&_!==void 0?_:_context_metadata[_OBSERVED_ATTRS_KEY]=[];var attributes=context.metadata[OBSERVED_ATTRS_KEY];attributes.push(attribute);return {init:function init(initialValue){var _this=this;attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);this.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){callFun(attribute,initialValue,initialValue,_this);});return initialValue},get:function get(){return getConvertor(attribute,this)},set:function set(value){var _this=this;queueMicrotask(function(){var oldValue=getConvertor(attribute,_this);if(attribute.type==="string"||attribute.type==="number"){_this.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){_this.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)callFun(attribute,oldValue,value,_this);});}}}};var ref=function(selector){return function(_target,context){context.addInitializer(function(){var _this=this;queueMicrotask(function(){_this[context.name]=_this.shadowRoot.querySelector(selector);});});}};var event=function(
|
|
7
|
+
function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}var OBSERVED_ATTRS_KEY=Symbol("observedAttributes");var callFun=function(attribute,oldValue,newValue,bindThis){if(attribute){var funName=attribute.callbackName;if(funName in bindThis){if(attribute.type==="string"){bindThis[funName](oldValue,newValue);}else if(attribute.type==="number"){bindThis[funName](+oldValue,+newValue);}else if(attribute.type==="boolean"){bindThis[funName](typeof oldValue==="string"?oldValue===""||String(oldValue).toLowerCase()==="true":Boolean(oldValue),typeof newValue==="string"?newValue===""||String(newValue).toLowerCase()==="true":Boolean(newValue));}}}};var getConvertor=function(param,bindThis){var type=param.type,name=param.name;var value=bindThis.getAttribute(name);if(value!==undefined&&value!==null){if(type==="number")return +value;else if(type==="string")return value;else if(type==="boolean"){return value===""||(value===null||value===void 0?void 0:value.toLowerCase())==="true"}else throw 'Only accept type of "string", "number", "boolean"'}};var defineElement=function(param){var tagName=param.tagName,html=param.html,_param_css=param.css,css=_param_css===void 0?"":_param_css,options=param.options;return function(originalClass,context){var attributes=context.metadata[OBSERVED_ATTRS_KEY];if(!html)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(html);var NewClass=/*#__PURE__*/function(originalClass){_inherits(NewClass,originalClass);function NewClass(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_class_call_check(this,NewClass);var _this;_this=_call_super(this,NewClass,_to_consumable_array(args)),_define_property(_this,"shadowRoot",void 0);_this.setAttribute("is",tagName);_this.shadowRoot=_this.attachShadow({mode:"closed"});_this.shadowRoot.appendChild(template.content.cloneNode(true));return _this}_create_class(NewClass,[{key:"connectedCallback",value:function connectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["connected"]();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["disconnected"]();});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){if(oldValue!==newValue){var _this_attributyyeChanged,_this;(_this=this)===null||_this===void 0?void 0:(_this_attributyyeChanged=_this["attributyyeChanged"])===null||_this_attributyyeChanged===void 0?void 0:_this_attributyyeChanged.call(_this,attributeName,oldValue,newValue);}if(oldValue!==newValue){callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,this);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};var property=function(){var _ref=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},type=_ref.type,name=_ref.name,callbackName=_ref.callbackName;return function(_accessor,context){var _context_metadata,_OBSERVED_ATTRS_KEY,_;var attributName=name!==null&&name!==void 0?name:utilities.toKebabCase(context.name.toString());var attributCallbackName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(context.name.toString(),"Update");var attribute={type:type,name:attributName,callbackName:attributCallbackName};(_=(_context_metadata=context.metadata)[_OBSERVED_ATTRS_KEY=OBSERVED_ATTRS_KEY])!==null&&_!==void 0?_:_context_metadata[_OBSERVED_ATTRS_KEY]=[];var attributes=context.metadata[OBSERVED_ATTRS_KEY];attributes.push(attribute);return {init:function init(initialValue){var _this=this;attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);this.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){callFun(attribute,initialValue,initialValue,_this);});return initialValue},get:function get(){return getConvertor(attribute,this)},set:function set(value){var _this=this;queueMicrotask(function(){var oldValue=getConvertor(attribute,_this);if(attribute.type==="string"||attribute.type==="number"){_this.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){_this.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)callFun(attribute,oldValue,value,_this);});}}}};var ref=function(selector){return function(_target,context){context.addInitializer(function(){var _this=this;queueMicrotask(function(){_this[context.name]=_this.shadowRoot.querySelector(selector);});});}};var event=function(){var options=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return function(_target,context){var _options_name;var eventName=(_options_name=options.name)!==null&&_options_name!==void 0?_options_name:utilities.toKebabCase(context.name.toString());context.addInitializer(function(){var _this=this;queueMicrotask(function(){_this[context.name]=new utilities.EventEmitter(_this,eventName);});});}};
|
|
8
8
|
|
|
9
9
|
exports.defineElement = defineElement;
|
|
10
10
|
exports.event = event;
|
package/dist/decorators.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { EventEmitter } from './utilities';
|
|
1
2
|
export interface DefineElementProp {
|
|
2
3
|
tagName: string;
|
|
3
4
|
html: string;
|
|
@@ -24,9 +25,7 @@ export declare const property: ({ type, name, callbackName }?: PropertyProp) =>
|
|
|
24
25
|
};
|
|
25
26
|
export declare const ref: (selector: string) => <T extends HTMLElement, V extends HTMLElement>(_target: undefined, context: ClassFieldDecoratorContext<T, V>) => void;
|
|
26
27
|
interface EventProp {
|
|
27
|
-
name
|
|
28
|
-
init?: any;
|
|
29
|
-
emitName?: string;
|
|
28
|
+
name?: string;
|
|
30
29
|
}
|
|
31
|
-
export declare const event: (
|
|
30
|
+
export declare const event: (options?: EventProp) => <T extends HTMLElement, V>(_target: undefined, context: ClassFieldDecoratorContext<T, EventEmitter<V>>) => void;
|
|
32
31
|
export {};
|
package/dist/decorators.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { toKebabCase } from './utilities.js';
|
|
1
|
+
import { toKebabCase, EventEmitter } from './utilities.js';
|
|
2
2
|
|
|
3
|
-
function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}var OBSERVED_ATTRS_KEY=Symbol("observedAttributes");var callFun=function(attribute,oldValue,newValue,bindThis){if(attribute){var funName=attribute.callbackName;if(funName in bindThis){if(attribute.type==="string"){bindThis[funName](oldValue,newValue);}else if(attribute.type==="number"){bindThis[funName](+oldValue,+newValue);}else if(attribute.type==="boolean"){bindThis[funName](typeof oldValue==="string"?oldValue===""||String(oldValue).toLowerCase()==="true":Boolean(oldValue),typeof newValue==="string"?newValue===""||String(newValue).toLowerCase()==="true":Boolean(newValue));}}}};var getConvertor=function(param,bindThis){var type=param.type,name=param.name;var value=bindThis.getAttribute(name);if(value!==undefined&&value!==null){if(type==="number")return +value;else if(type==="string")return value;else if(type==="boolean"){return value===""||(value===null||value===void 0?void 0:value.toLowerCase())==="true"}else throw 'Only accept type of "string", "number", "boolean"'}};var defineElement=function(param){var tagName=param.tagName,html=param.html,_param_css=param.css,css=_param_css===void 0?"":_param_css,options=param.options;return function(originalClass,context){var attributes=context.metadata[OBSERVED_ATTRS_KEY];if(!html)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(html);var NewClass=/*#__PURE__*/function(originalClass){_inherits(NewClass,originalClass);function NewClass(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_class_call_check(this,NewClass);var _this;_this=_call_super(this,NewClass,_to_consumable_array(args)),_define_property(_this,"shadowRoot",void 0);_this.setAttribute("is",tagName);_this.shadowRoot=_this.attachShadow({mode:"closed"});_this.shadowRoot.appendChild(template.content.cloneNode(true));return _this}_create_class(NewClass,[{key:"connectedCallback",value:function connectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["connected"]();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["disconnected"]();});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){if(oldValue!==newValue){var _this_attributyyeChanged,_this;(_this=this)===null||_this===void 0?void 0:(_this_attributyyeChanged=_this["attributyyeChanged"])===null||_this_attributyyeChanged===void 0?void 0:_this_attributyyeChanged.call(_this,attributeName,oldValue,newValue);}if(oldValue!==newValue){callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,this);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};var property=function(){var _ref=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},type=_ref.type,name=_ref.name,callbackName=_ref.callbackName;return function(_accessor,context){var _context_metadata,_OBSERVED_ATTRS_KEY,_;var attributName=name!==null&&name!==void 0?name:toKebabCase(context.name.toString());var attributCallbackName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(context.name.toString(),"Update");var attribute={type:type,name:attributName,callbackName:attributCallbackName};(_=(_context_metadata=context.metadata)[_OBSERVED_ATTRS_KEY=OBSERVED_ATTRS_KEY])!==null&&_!==void 0?_:_context_metadata[_OBSERVED_ATTRS_KEY]=[];var attributes=context.metadata[OBSERVED_ATTRS_KEY];attributes.push(attribute);return {init:function init(initialValue){var _this=this;attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);this.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){callFun(attribute,initialValue,initialValue,_this);});return initialValue},get:function get(){return getConvertor(attribute,this)},set:function set(value){var _this=this;queueMicrotask(function(){var oldValue=getConvertor(attribute,_this);if(attribute.type==="string"||attribute.type==="number"){_this.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){_this.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)callFun(attribute,oldValue,value,_this);});}}}};var ref=function(selector){return function(_target,context){context.addInitializer(function(){var _this=this;queueMicrotask(function(){_this[context.name]=_this.shadowRoot.querySelector(selector);});});}};var event=function(
|
|
3
|
+
function _array_like_to_array(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_without_holes(arr){if(Array.isArray(arr))return _array_like_to_array(arr)}function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _iterable_to_array(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _non_iterable_spread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _to_consumable_array(arr){return _array_without_holes(arr)||_iterable_to_array(arr)||_unsupported_iterable_to_array(arr)||_non_iterable_spread()}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}var OBSERVED_ATTRS_KEY=Symbol("observedAttributes");var callFun=function(attribute,oldValue,newValue,bindThis){if(attribute){var funName=attribute.callbackName;if(funName in bindThis){if(attribute.type==="string"){bindThis[funName](oldValue,newValue);}else if(attribute.type==="number"){bindThis[funName](+oldValue,+newValue);}else if(attribute.type==="boolean"){bindThis[funName](typeof oldValue==="string"?oldValue===""||String(oldValue).toLowerCase()==="true":Boolean(oldValue),typeof newValue==="string"?newValue===""||String(newValue).toLowerCase()==="true":Boolean(newValue));}}}};var getConvertor=function(param,bindThis){var type=param.type,name=param.name;var value=bindThis.getAttribute(name);if(value!==undefined&&value!==null){if(type==="number")return +value;else if(type==="string")return value;else if(type==="boolean"){return value===""||(value===null||value===void 0?void 0:value.toLowerCase())==="true"}else throw 'Only accept type of "string", "number", "boolean"'}};var defineElement=function(param){var tagName=param.tagName,html=param.html,_param_css=param.css,css=_param_css===void 0?"":_param_css,options=param.options;return function(originalClass,context){var attributes=context.metadata[OBSERVED_ATTRS_KEY];if(!html)throw "Html is empty!";var template=document.createElement("template");template.innerHTML="<style>".concat(css,"</style>").concat(html);var NewClass=/*#__PURE__*/function(originalClass){_inherits(NewClass,originalClass);function NewClass(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_class_call_check(this,NewClass);var _this;_this=_call_super(this,NewClass,_to_consumable_array(args)),_define_property(_this,"shadowRoot",void 0);_this.setAttribute("is",tagName);_this.shadowRoot=_this.attachShadow({mode:"closed"});_this.shadowRoot.appendChild(template.content.cloneNode(true));return _this}_create_class(NewClass,[{key:"connectedCallback",value:function connectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["connected"]();});}},{key:"disconnectedCallback",value:function disconnectedCallback(){var _this=this;queueMicrotask(function(){var _this1;(_this1=_this)===null||_this1===void 0?void 0:_this1["disconnected"]();});}},{key:"attributeChangedCallback",value:function attributeChangedCallback(attributeName,oldValue,newValue){if(oldValue!==newValue){var _this_attributyyeChanged,_this;(_this=this)===null||_this===void 0?void 0:(_this_attributyyeChanged=_this["attributyyeChanged"])===null||_this_attributyyeChanged===void 0?void 0:_this_attributyyeChanged.call(_this,attributeName,oldValue,newValue);}if(oldValue!==newValue){callFun(attributes.find(function(i){return i.name===attributeName}),oldValue,newValue,this);}}}]);return NewClass}(originalClass);NewClass.observedAttributes=attributes.map(function(i){return i.name});if(!customElements.get(tagName)){customElements.define(tagName,NewClass,options);}return NewClass}};var property=function(){var _ref=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},type=_ref.type,name=_ref.name,callbackName=_ref.callbackName;return function(_accessor,context){var _context_metadata,_OBSERVED_ATTRS_KEY,_;var attributName=name!==null&&name!==void 0?name:toKebabCase(context.name.toString());var attributCallbackName=callbackName!==null&&callbackName!==void 0?callbackName:"".concat(context.name.toString(),"Update");var attribute={type:type,name:attributName,callbackName:attributCallbackName};(_=(_context_metadata=context.metadata)[_OBSERVED_ATTRS_KEY=OBSERVED_ATTRS_KEY])!==null&&_!==void 0?_:_context_metadata[_OBSERVED_ATTRS_KEY]=[];var attributes=context.metadata[OBSERVED_ATTRS_KEY];attributes.push(attribute);return {init:function init(initialValue){var _this=this;attribute.type=type!==null&&type!==void 0?type:typeof initialValue==="undefined"?"undefined":_type_of(initialValue);this.setAttribute(attribute.name,String(initialValue));queueMicrotask(function(){callFun(attribute,initialValue,initialValue,_this);});return initialValue},get:function get(){return getConvertor(attribute,this)},set:function set(value){var _this=this;queueMicrotask(function(){var oldValue=getConvertor(attribute,_this);if(attribute.type==="string"||attribute.type==="number"){_this.setAttribute(attributName,String(value));}else if(attribute.type==="boolean"){_this.setAttribute(attributName,value?"true":"false");}else throw 'Only accept type of "string", "number", "boolean"';if(oldValue!==value)callFun(attribute,oldValue,value,_this);});}}}};var ref=function(selector){return function(_target,context){context.addInitializer(function(){var _this=this;queueMicrotask(function(){_this[context.name]=_this.shadowRoot.querySelector(selector);});});}};var event=function(){var options=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return function(_target,context){var _options_name;var eventName=(_options_name=options.name)!==null&&_options_name!==void 0?_options_name:toKebabCase(context.name.toString());context.addInitializer(function(){var _this=this;queueMicrotask(function(){_this[context.name]=new EventEmitter(_this,eventName);});});}};
|
|
4
4
|
|
|
5
5
|
export { defineElement, event, property, ref };
|
package/dist/index.cjs
CHANGED
|
@@ -6,8 +6,9 @@ const utilities = require('./utilities.cjs');
|
|
|
6
6
|
const decorators = require('./decorators.cjs');
|
|
7
7
|
const dom = require('./dom.cjs');
|
|
8
8
|
|
|
9
|
+
function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _get(target,property,receiver){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get;}else {_get=function get(target,property,receiver){var base=_super_prop_base(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(receiver||target)}return desc.value};}return _get(target,property,receiver||target)}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _super_prop_base(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_get_prototype_of(object);if(object===null)break}return object}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}function Zui(Base){return /*#__PURE__*/function(Base){_inherits(_class,Base);function _class(){_class_call_check(this,_class);return _call_super(this,_class,arguments)}_create_class(_class,[{key:"addEventListener",value:function addEventListener(type,listener,options){_get(_get_prototype_of(_class.prototype),"addEventListener",this).call(this,type,listener,options);}}]);return _class}(Base)}
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
exports.EventEmitter = utilities.EventEmitter;
|
|
11
12
|
exports.delay = utilities.delay;
|
|
12
13
|
exports.toKebabCase = utilities.toKebabCase;
|
|
13
14
|
exports.defineElement = decorators.defineElement;
|
|
@@ -15,3 +16,4 @@ exports.event = decorators.event;
|
|
|
15
16
|
exports.property = decorators.property;
|
|
16
17
|
exports.ref = decorators.ref;
|
|
17
18
|
exports.createElement = dom.createElement;
|
|
19
|
+
exports.Zui = Zui;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,361 @@
|
|
|
1
|
+
import { EventEmitter } from './utilities';
|
|
1
2
|
export * from './utilities';
|
|
2
3
|
export * from './decorators';
|
|
3
4
|
export * from './dom';
|
|
5
|
+
type InferEventDetail<T, K extends keyof T> = T[K] extends EventEmitter<infer P> ? P : never;
|
|
6
|
+
export declare function Zui<TBase extends new (...args: any[]) => HTMLElement>(Base: TBase): {
|
|
7
|
+
new (...args: any[]): {
|
|
8
|
+
addEventListener<K extends string>(type: K, listener: (ev: CustomEvent<{
|
|
9
|
+
value: InferEventDetail<this, any>;
|
|
10
|
+
}>) => void, options?: boolean | AddEventListenerOptions): void;
|
|
11
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
|
|
12
|
+
accessKey: string;
|
|
13
|
+
readonly accessKeyLabel: string;
|
|
14
|
+
autocapitalize: string;
|
|
15
|
+
autocorrect: boolean;
|
|
16
|
+
dir: string;
|
|
17
|
+
draggable: boolean;
|
|
18
|
+
hidden: boolean;
|
|
19
|
+
inert: boolean;
|
|
20
|
+
innerText: string;
|
|
21
|
+
lang: string;
|
|
22
|
+
readonly offsetHeight: number;
|
|
23
|
+
readonly offsetLeft: number;
|
|
24
|
+
readonly offsetParent: Element | null;
|
|
25
|
+
readonly offsetTop: number;
|
|
26
|
+
readonly offsetWidth: number;
|
|
27
|
+
outerText: string;
|
|
28
|
+
popover: string | null;
|
|
29
|
+
spellcheck: boolean;
|
|
30
|
+
title: string;
|
|
31
|
+
translate: boolean;
|
|
32
|
+
writingSuggestions: string;
|
|
33
|
+
attachInternals(): ElementInternals;
|
|
34
|
+
click(): void;
|
|
35
|
+
hidePopover(): void;
|
|
36
|
+
showPopover(): void;
|
|
37
|
+
togglePopover(options?: boolean): boolean;
|
|
38
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
|
39
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
40
|
+
readonly attributes: NamedNodeMap;
|
|
41
|
+
get classList(): DOMTokenList;
|
|
42
|
+
set classList(value: string);
|
|
43
|
+
className: string;
|
|
44
|
+
readonly clientHeight: number;
|
|
45
|
+
readonly clientLeft: number;
|
|
46
|
+
readonly clientTop: number;
|
|
47
|
+
readonly clientWidth: number;
|
|
48
|
+
readonly currentCSSZoom: number;
|
|
49
|
+
id: string;
|
|
50
|
+
innerHTML: string;
|
|
51
|
+
readonly localName: string;
|
|
52
|
+
readonly namespaceURI: string | null;
|
|
53
|
+
onfullscreenchange: ((this: Element, ev: Event) => any) | null;
|
|
54
|
+
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
|
|
55
|
+
outerHTML: string;
|
|
56
|
+
readonly ownerDocument: Document;
|
|
57
|
+
get part(): DOMTokenList;
|
|
58
|
+
set part(value: string);
|
|
59
|
+
readonly prefix: string | null;
|
|
60
|
+
readonly scrollHeight: number;
|
|
61
|
+
scrollLeft: number;
|
|
62
|
+
scrollTop: number;
|
|
63
|
+
readonly scrollWidth: number;
|
|
64
|
+
readonly shadowRoot: ShadowRoot | null;
|
|
65
|
+
slot: string;
|
|
66
|
+
readonly tagName: string;
|
|
67
|
+
attachShadow(init: ShadowRootInit): ShadowRoot;
|
|
68
|
+
checkVisibility(options?: CheckVisibilityOptions): boolean;
|
|
69
|
+
closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
|
|
70
|
+
closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
|
|
71
|
+
closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
|
|
72
|
+
closest<E extends Element = Element>(selectors: string): E | null;
|
|
73
|
+
computedStyleMap(): StylePropertyMapReadOnly;
|
|
74
|
+
getAttribute(qualifiedName: string): string | null;
|
|
75
|
+
getAttributeNS(namespace: string | null, localName: string): string | null;
|
|
76
|
+
getAttributeNames(): string[];
|
|
77
|
+
getAttributeNode(qualifiedName: string): Attr | null;
|
|
78
|
+
getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
|
|
79
|
+
getBoundingClientRect(): DOMRect;
|
|
80
|
+
getClientRects(): DOMRectList;
|
|
81
|
+
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
|
|
82
|
+
getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
|
|
83
|
+
getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
|
|
84
|
+
getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
|
|
85
|
+
getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
86
|
+
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
87
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
|
88
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
|
89
|
+
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
|
|
90
|
+
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
|
91
|
+
getHTML(options?: GetHTMLOptions): string;
|
|
92
|
+
hasAttribute(qualifiedName: string): boolean;
|
|
93
|
+
hasAttributeNS(namespace: string | null, localName: string): boolean;
|
|
94
|
+
hasAttributes(): boolean;
|
|
95
|
+
hasPointerCapture(pointerId: number): boolean;
|
|
96
|
+
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
|
|
97
|
+
insertAdjacentHTML(position: InsertPosition, string: string): void;
|
|
98
|
+
insertAdjacentText(where: InsertPosition, data: string): void;
|
|
99
|
+
matches(selectors: string): boolean;
|
|
100
|
+
releasePointerCapture(pointerId: number): void;
|
|
101
|
+
removeAttribute(qualifiedName: string): void;
|
|
102
|
+
removeAttributeNS(namespace: string | null, localName: string): void;
|
|
103
|
+
removeAttributeNode(attr: Attr): Attr;
|
|
104
|
+
requestFullscreen(options?: FullscreenOptions): Promise<void>;
|
|
105
|
+
requestPointerLock(options?: PointerLockOptions): Promise<void>;
|
|
106
|
+
scroll(options?: ScrollToOptions): void;
|
|
107
|
+
scroll(x: number, y: number): void;
|
|
108
|
+
scrollBy(options?: ScrollToOptions): void;
|
|
109
|
+
scrollBy(x: number, y: number): void;
|
|
110
|
+
scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
|
|
111
|
+
scrollTo(options?: ScrollToOptions): void;
|
|
112
|
+
scrollTo(x: number, y: number): void;
|
|
113
|
+
setAttribute(qualifiedName: string, value: string): void;
|
|
114
|
+
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
|
|
115
|
+
setAttributeNode(attr: Attr): Attr | null;
|
|
116
|
+
setAttributeNodeNS(attr: Attr): Attr | null;
|
|
117
|
+
setHTMLUnsafe(html: string): void;
|
|
118
|
+
setPointerCapture(pointerId: number): void;
|
|
119
|
+
toggleAttribute(qualifiedName: string, force?: boolean): boolean;
|
|
120
|
+
webkitMatchesSelector(selectors: string): boolean;
|
|
121
|
+
get textContent(): string;
|
|
122
|
+
set textContent(value: string | null);
|
|
123
|
+
readonly baseURI: string;
|
|
124
|
+
readonly childNodes: NodeListOf<ChildNode>;
|
|
125
|
+
readonly firstChild: ChildNode | null;
|
|
126
|
+
readonly isConnected: boolean;
|
|
127
|
+
readonly lastChild: ChildNode | null;
|
|
128
|
+
readonly nextSibling: ChildNode | null;
|
|
129
|
+
readonly nodeName: string;
|
|
130
|
+
readonly nodeType: number;
|
|
131
|
+
nodeValue: string | null;
|
|
132
|
+
readonly parentElement: HTMLElement | null;
|
|
133
|
+
readonly parentNode: ParentNode | null;
|
|
134
|
+
readonly previousSibling: ChildNode | null;
|
|
135
|
+
appendChild<T extends Node>(node: T): T;
|
|
136
|
+
cloneNode(subtree?: boolean): Node;
|
|
137
|
+
compareDocumentPosition(other: Node): number;
|
|
138
|
+
contains(other: Node | null): boolean;
|
|
139
|
+
getRootNode(options?: GetRootNodeOptions): Node;
|
|
140
|
+
hasChildNodes(): boolean;
|
|
141
|
+
insertBefore<T extends Node>(node: T, child: Node | null): T;
|
|
142
|
+
isDefaultNamespace(namespace: string | null): boolean;
|
|
143
|
+
isEqualNode(otherNode: Node | null): boolean;
|
|
144
|
+
isSameNode(otherNode: Node | null): boolean;
|
|
145
|
+
lookupNamespaceURI(prefix: string | null): string | null;
|
|
146
|
+
lookupPrefix(namespace: string | null): string | null;
|
|
147
|
+
normalize(): void;
|
|
148
|
+
removeChild<T extends Node>(child: T): T;
|
|
149
|
+
replaceChild<T extends Node>(node: Node, child: T): T;
|
|
150
|
+
readonly ELEMENT_NODE: 1;
|
|
151
|
+
readonly ATTRIBUTE_NODE: 2;
|
|
152
|
+
readonly TEXT_NODE: 3;
|
|
153
|
+
readonly CDATA_SECTION_NODE: 4;
|
|
154
|
+
readonly ENTITY_REFERENCE_NODE: 5;
|
|
155
|
+
readonly ENTITY_NODE: 6;
|
|
156
|
+
readonly PROCESSING_INSTRUCTION_NODE: 7;
|
|
157
|
+
readonly COMMENT_NODE: 8;
|
|
158
|
+
readonly DOCUMENT_NODE: 9;
|
|
159
|
+
readonly DOCUMENT_TYPE_NODE: 10;
|
|
160
|
+
readonly DOCUMENT_FRAGMENT_NODE: 11;
|
|
161
|
+
readonly NOTATION_NODE: 12;
|
|
162
|
+
readonly DOCUMENT_POSITION_DISCONNECTED: 1;
|
|
163
|
+
readonly DOCUMENT_POSITION_PRECEDING: 2;
|
|
164
|
+
readonly DOCUMENT_POSITION_FOLLOWING: 4;
|
|
165
|
+
readonly DOCUMENT_POSITION_CONTAINS: 8;
|
|
166
|
+
readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
|
|
167
|
+
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
|
|
168
|
+
dispatchEvent(event: Event): boolean;
|
|
169
|
+
ariaActiveDescendantElement: Element | null;
|
|
170
|
+
ariaAtomic: string | null;
|
|
171
|
+
ariaAutoComplete: string | null;
|
|
172
|
+
ariaBrailleLabel: string | null;
|
|
173
|
+
ariaBrailleRoleDescription: string | null;
|
|
174
|
+
ariaBusy: string | null;
|
|
175
|
+
ariaChecked: string | null;
|
|
176
|
+
ariaColCount: string | null;
|
|
177
|
+
ariaColIndex: string | null;
|
|
178
|
+
ariaColIndexText: string | null;
|
|
179
|
+
ariaColSpan: string | null;
|
|
180
|
+
ariaControlsElements: ReadonlyArray<Element> | null;
|
|
181
|
+
ariaCurrent: string | null;
|
|
182
|
+
ariaDescribedByElements: ReadonlyArray<Element> | null;
|
|
183
|
+
ariaDescription: string | null;
|
|
184
|
+
ariaDetailsElements: ReadonlyArray<Element> | null;
|
|
185
|
+
ariaDisabled: string | null;
|
|
186
|
+
ariaErrorMessageElements: ReadonlyArray<Element> | null;
|
|
187
|
+
ariaExpanded: string | null;
|
|
188
|
+
ariaFlowToElements: ReadonlyArray<Element> | null;
|
|
189
|
+
ariaHasPopup: string | null;
|
|
190
|
+
ariaHidden: string | null;
|
|
191
|
+
ariaInvalid: string | null;
|
|
192
|
+
ariaKeyShortcuts: string | null;
|
|
193
|
+
ariaLabel: string | null;
|
|
194
|
+
ariaLabelledByElements: ReadonlyArray<Element> | null;
|
|
195
|
+
ariaLevel: string | null;
|
|
196
|
+
ariaLive: string | null;
|
|
197
|
+
ariaModal: string | null;
|
|
198
|
+
ariaMultiLine: string | null;
|
|
199
|
+
ariaMultiSelectable: string | null;
|
|
200
|
+
ariaOrientation: string | null;
|
|
201
|
+
ariaOwnsElements: ReadonlyArray<Element> | null;
|
|
202
|
+
ariaPlaceholder: string | null;
|
|
203
|
+
ariaPosInSet: string | null;
|
|
204
|
+
ariaPressed: string | null;
|
|
205
|
+
ariaReadOnly: string | null;
|
|
206
|
+
ariaRelevant: string | null;
|
|
207
|
+
ariaRequired: string | null;
|
|
208
|
+
ariaRoleDescription: string | null;
|
|
209
|
+
ariaRowCount: string | null;
|
|
210
|
+
ariaRowIndex: string | null;
|
|
211
|
+
ariaRowIndexText: string | null;
|
|
212
|
+
ariaRowSpan: string | null;
|
|
213
|
+
ariaSelected: string | null;
|
|
214
|
+
ariaSetSize: string | null;
|
|
215
|
+
ariaSort: string | null;
|
|
216
|
+
ariaValueMax: string | null;
|
|
217
|
+
ariaValueMin: string | null;
|
|
218
|
+
ariaValueNow: string | null;
|
|
219
|
+
ariaValueText: string | null;
|
|
220
|
+
role: string | null;
|
|
221
|
+
animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
|
|
222
|
+
getAnimations(options?: GetAnimationsOptions): Animation[];
|
|
223
|
+
after(...nodes: (Node | string)[]): void;
|
|
224
|
+
before(...nodes: (Node | string)[]): void;
|
|
225
|
+
remove(): void;
|
|
226
|
+
replaceWith(...nodes: (Node | string)[]): void;
|
|
227
|
+
readonly nextElementSibling: Element | null;
|
|
228
|
+
readonly previousElementSibling: Element | null;
|
|
229
|
+
readonly childElementCount: number;
|
|
230
|
+
readonly children: HTMLCollection;
|
|
231
|
+
readonly firstElementChild: Element | null;
|
|
232
|
+
readonly lastElementChild: Element | null;
|
|
233
|
+
append(...nodes: (Node | string)[]): void;
|
|
234
|
+
prepend(...nodes: (Node | string)[]): void;
|
|
235
|
+
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
|
|
236
|
+
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
|
|
237
|
+
querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
|
|
238
|
+
querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
|
|
239
|
+
querySelector<E extends Element = Element>(selectors: string): E | null;
|
|
240
|
+
querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
|
|
241
|
+
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
|
|
242
|
+
querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
|
|
243
|
+
querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
|
|
244
|
+
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
|
|
245
|
+
replaceChildren(...nodes: (Node | string)[]): void;
|
|
246
|
+
readonly assignedSlot: HTMLSlotElement | null;
|
|
247
|
+
readonly attributeStyleMap: StylePropertyMap;
|
|
248
|
+
get style(): CSSStyleDeclaration;
|
|
249
|
+
set style(cssText: string);
|
|
250
|
+
contentEditable: string;
|
|
251
|
+
enterKeyHint: string;
|
|
252
|
+
inputMode: string;
|
|
253
|
+
readonly isContentEditable: boolean;
|
|
254
|
+
onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
255
|
+
onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
256
|
+
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
257
|
+
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
258
|
+
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
259
|
+
onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
260
|
+
onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
|
|
261
|
+
onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
262
|
+
onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
|
|
263
|
+
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
264
|
+
oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
265
|
+
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
266
|
+
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
267
|
+
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
268
|
+
onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
269
|
+
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
270
|
+
oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
271
|
+
oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
272
|
+
oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
273
|
+
oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
274
|
+
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
275
|
+
oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
276
|
+
ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
277
|
+
ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
278
|
+
ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
279
|
+
ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
280
|
+
ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
281
|
+
ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
282
|
+
ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
283
|
+
ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
284
|
+
ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
285
|
+
onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
286
|
+
onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
287
|
+
onerror: OnErrorEventHandler;
|
|
288
|
+
onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
289
|
+
onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
|
|
290
|
+
ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
291
|
+
oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
292
|
+
oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
293
|
+
onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
294
|
+
onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
295
|
+
onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
296
|
+
onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
297
|
+
onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
298
|
+
onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
299
|
+
onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
300
|
+
onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
301
|
+
onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
302
|
+
onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
303
|
+
onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
304
|
+
onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
305
|
+
onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
306
|
+
onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
307
|
+
onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
308
|
+
onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
309
|
+
onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
310
|
+
onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
311
|
+
onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
312
|
+
onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
313
|
+
onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
314
|
+
onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
315
|
+
onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
316
|
+
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
317
|
+
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
318
|
+
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
319
|
+
onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
320
|
+
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
321
|
+
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
|
|
322
|
+
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
323
|
+
onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
324
|
+
onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
325
|
+
onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
326
|
+
onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
327
|
+
onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
|
|
328
|
+
onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
329
|
+
onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
330
|
+
onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
331
|
+
onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
332
|
+
onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
333
|
+
onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
334
|
+
onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
335
|
+
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
|
336
|
+
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
337
|
+
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
338
|
+
ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
|
|
339
|
+
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
340
|
+
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
341
|
+
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
342
|
+
ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
343
|
+
ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
344
|
+
ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
345
|
+
ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
346
|
+
ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
347
|
+
onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
348
|
+
onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
349
|
+
onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
350
|
+
onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
351
|
+
onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
352
|
+
onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
353
|
+
onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
|
|
354
|
+
autofocus: boolean;
|
|
355
|
+
readonly dataset: DOMStringMap;
|
|
356
|
+
nonce?: string;
|
|
357
|
+
tabIndex: number;
|
|
358
|
+
blur(): void;
|
|
359
|
+
focus(options?: FocusOptions): void;
|
|
360
|
+
};
|
|
361
|
+
} & TBase;
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
export { delay, toKebabCase } from './utilities.js';
|
|
1
|
+
export { EventEmitter, delay, toKebabCase } from './utilities.js';
|
|
2
2
|
export { defineElement, event, property, ref } from './decorators.js';
|
|
3
3
|
export { createElement } from './dom.js';
|
|
4
|
+
|
|
5
|
+
function _assert_this_initialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}return self}function _call_super(_this,derived,args){derived=_get_prototype_of(derived);return _possible_constructor_return(_this,_is_native_reflect_construct()?Reflect.construct(derived,args||[],_get_prototype_of(_this).constructor):derived.apply(_this,args))}function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _get(target,property,receiver){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get;}else {_get=function get(target,property,receiver){var base=_super_prop_base(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(receiver||target)}return desc.value};}return _get(target,property,receiver||target)}function _get_prototype_of(o){_get_prototype_of=Object.setPrototypeOf?Object.getPrototypeOf:function getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)};return _get_prototype_of(o)}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function")}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_set_prototype_of(subClass,superClass);}function _possible_constructor_return(self,call){if(call&&(_type_of(call)==="object"||typeof call==="function")){return call}return _assert_this_initialized(self)}function _set_prototype_of(o,p){_set_prototype_of=Object.setPrototypeOf||function setPrototypeOf(o,p){o.__proto__=p;return o};return _set_prototype_of(o,p)}function _super_prop_base(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_get_prototype_of(object);if(object===null)break}return object}function _type_of(obj){"@swc/helpers - typeof";return obj&&typeof Symbol!=="undefined"&&obj.constructor===Symbol?"symbol":typeof obj}function _is_native_reflect_construct(){try{var result=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(_){}return (_is_native_reflect_construct=function(){return !!result})()}function Zui(Base){return /*#__PURE__*/function(Base){_inherits(_class,Base);function _class(){_class_call_check(this,_class);return _call_super(this,_class,arguments)}_create_class(_class,[{key:"addEventListener",value:function addEventListener(type,listener,options){_get(_get_prototype_of(_class.prototype),"addEventListener",this).call(this,type,listener,options);}}]);return _class}(Base)}
|
|
6
|
+
|
|
7
|
+
export { Zui };
|
package/dist/utilities.cjs
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
var delay=function(ms){return new Promise(function(resolve){return setTimeout(resolve,ms)})};var toKebabCase=function(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()};
|
|
5
|
+
function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}));}ownKeys.forEach(function(key){_define_property(target,key,source[key]);});}return target}var delay=function(ms){return new Promise(function(resolve){return setTimeout(resolve,ms)})};var toKebabCase=function(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()};var EventEmitter=/*#__PURE__*/function(){function EventEmitter(target,eventName){_class_call_check(this,EventEmitter);_define_property(this,"target",void 0);_define_property(this,"eventName",void 0);this.target=target;this.eventName=eventName;}_create_class(EventEmitter,[{key:"emit",value:function emit(value,options){this.target.dispatchEvent(new CustomEvent(this.eventName,_object_spread({detail:{value:value},bubbles:true,composed:true},options)));}}]);return EventEmitter}();
|
|
6
6
|
|
|
7
|
+
exports.EventEmitter = EventEmitter;
|
|
7
8
|
exports.delay = delay;
|
|
8
9
|
exports.toKebabCase = toKebabCase;
|
package/dist/utilities.d.ts
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
export declare const delay: (ms: number) => Promise<unknown>;
|
|
2
2
|
export declare const toKebabCase: (str: string) => string;
|
|
3
|
+
export declare class EventEmitter<T> {
|
|
4
|
+
private target;
|
|
5
|
+
private eventName;
|
|
6
|
+
constructor(target: HTMLElement, eventName: string);
|
|
7
|
+
emit(value: T, options?: Omit<CustomEventInit, 'detail'>): void;
|
|
8
|
+
}
|
package/dist/utilities.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var delay=function(ms){return new Promise(function(resolve){return setTimeout(resolve,ms)})};var toKebabCase=function(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()};
|
|
1
|
+
function _class_call_check(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _create_class(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);return Constructor}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else {obj[key]=value;}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}));}ownKeys.forEach(function(key){_define_property(target,key,source[key]);});}return target}var delay=function(ms){return new Promise(function(resolve){return setTimeout(resolve,ms)})};var toKebabCase=function(str){return str.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()};var EventEmitter=/*#__PURE__*/function(){function EventEmitter(target,eventName){_class_call_check(this,EventEmitter);_define_property(this,"target",void 0);_define_property(this,"eventName",void 0);this.target=target;this.eventName=eventName;}_create_class(EventEmitter,[{key:"emit",value:function emit(value,options){this.target.dispatchEvent(new CustomEvent(this.eventName,_object_spread({detail:{value:value},bubbles:true,composed:true},options)));}}]);return EventEmitter}();
|
|
2
2
|
|
|
3
|
-
export { delay, toKebabCase };
|
|
3
|
+
export { EventEmitter, delay, toKebabCase };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@o.z/zui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Next-generation Web Component framework leveraging TypeScript Stage 3 standard decorators.",
|
|
5
5
|
"homepage": "https://github.com/z-npm/zui#readme",
|
|
6
6
|
"docs": "https://github.com/z-npm/zui#readme",
|
|
@@ -56,10 +56,10 @@
|
|
|
56
56
|
"build": "tsc && vite build"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@types/node": "^25.0.
|
|
59
|
+
"@types/node": "^25.0.10",
|
|
60
60
|
"@z-code/vite-plugin-swc": "^0.5.5",
|
|
61
61
|
"glob": "^13.0.0",
|
|
62
|
-
"sass": "^1.97.
|
|
62
|
+
"sass": "^1.97.3",
|
|
63
63
|
"typescript": "^5.9.3",
|
|
64
64
|
"vite": "^7.3.1",
|
|
65
65
|
"vite-plugin-dts": "^4.5.4",
|