tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sync working code, and import type-doc

Browse Source
This commit is contained in:
Chen Lily
2023-07-17 17:24:49 +08:00
parent 7ab7a7094a
commit 3e9ee59178
43 changed files with 1024 additions and 1553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
lib/utility/cookie.html
View File

@ -1,40 +0,0 @@
<div>
<h1>cookie</h1>
<hr />
<p>
cookie 操作工具类：获取、设置、删除。
</p>
<h2>getCookie</h2>
<code>function getCookie(name: string): string</code>
<h3>name: string</h3>
<p>
待获取的 cookie 关键字
</p>
<h2>setCookie</h2>
<code>function setCookie(name: string, value: string, expireDays?: Number): void</code>
<h3>name: string</h3>
<p>
待设置的 cookie 关键字
</p>
<h3>value: string</h3>
<p>
待设置的值
</p>
<h3>expireDays?: Number</h3>
<p>
有效期天数
</p>
<h2>deleteCookie</h2>
<code>function deleteCookie(name: string): void</code>
<h3>name: string</h3>
<p>
待删除的 cookie 关键字
</p>
<hr />
<h2>用法</h2>
<pre>const cookie = window["lib-utility"];
cookie.getCookie('user_id');
cookie.setCookie('user_id', 'guest');
cookie.deleteCookie('user_id');</pre>
</div>

74
lib/utility/lgres.html
View File

@ -1,74 +0,0 @@
<div>
<h1>lgres</h1>
<hr />
<p>
语言资源工具类，用以设置页面以及脚本中的多语言。
</p>
<h2>r</h2>
<code>function r(key: string, defaultValue?: any): any</code>
<h3>key: string</h3>
<p>
语言资源的关键字
</p>
<h3>defaultValue?: any</h3>
<p>
资源的默认值，如无法获取该语言资源，则返回该值
</p>
<h2>lang</h2>
<code>const lang : {}</code>
<h3>get current(): string</h3>
<p>
返回当前语言 id
</p>
<h3>get unknownError(): string</h3>
<p>
未知错误的语言资源，默认为 <code>'An unknown error occurred, please contact the administrator.'</code>
</p>
<h3>get savedSuccessfully(): string</h3>
<p>
保存成功的语言资源，默认为 <code>'Saved successfully.'</code>
</p>
<h2>init</h2>
<code>function init(dom?: HTMLElement, options?: LgresOptions): Promise&lt;LanguageResource&gt;</code>
<h3>dom?: HTMLElement</h3>
<p>
待处理的元素，为空时处理整个页面
</p>
<h3>options?: LgresOptions</h3>
<p>
初始化参数，结构为
<pre>interface LgresOptions {
template?: string,
callback?: (result: any) => void
}</pre>
</p>
<h4>template?: string</h4>
<p>
语言资源文件的后缀，资源文件 url 为 <code>`language/${lgid}${template}`</code>
</p>
<h4>callback?: (result: any) => void</h4>
<p>
资源初始化后的回调函数，可能在 DOM 加载完成之前触发。
</p>
<h3>return: Promise&lt;LanguageResource&gt;</h3>
<p>
返回一个包含资源结果的 Promise，将在 DOM 加载完成之后触发。
</p>
<p><code>LanguageResource</code> 结构为
<pre>interface LanguageResource {
r(key: string, defaultValue?: any): any
}</pre>
</p>
<hr />
<h2>用法</h2>
<pre>const lgres = window["lib-utility"];
lgres.init(document.body, {
template: '/res.json',
callback: res => document.title = res.r('title', 'Default Title')
}).then(res => {
document.querySelector('#header').innerText = res.r('header', 'My Header');
const msg = lgres.lang.unknownError;
document.querySelector('#message').innerText = lgres.lang.unknownError;
});</pre>
</div>

3
lib/utility/request.d.ts vendored
View File

@ -2,7 +2,8 @@ interface RequestOptions {
method?: string;
accept?: string;
contentType?: string;
customerHeaders?: { [key: string]: string };
customHeaders?: { [key: string]: string };
mode?: RequestMode | undefined;
signal?: AbortSignal | null;
progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent<XMLHttpRequestEventTarget>) => any
}

111
lib/utility/request.html
View File

@ -1,111 +0,0 @@
<div>
<h1>request</h1>
<hr />
<p>
网络请求工具类，可以实现比较常见的一些请求操作。
</p>
<h2>get</h2>
<code>function get(url: string, options?: RequestOptions): Promise&lt;Response&gt;</code>
<h3>url: string</h3>
<p>
url 地址
</p>
<h3>options?: RequestOptions</h3>
<p>
请求的配置参数，结构为
<pre>interface RequestOptions {
method?: string;
accept?: string;
contentType?: string;
customerHeaders?: { [key: string]: string };
signal?: AbortSignal | null;
progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any
}</pre>
</p>
<h4>method?: string</h4>
<p>
请求类型，默认为 GET 或 POST
</p>
<h4>accept?: string</h4>
<p>
Accept 请求头的值
</p>
<h4>contentType?: string</h4>
<p>
Content-Type 请求头的值
</p>
<h4>customerHeaders?: { [key: string]: string }</h4>
<p>
自定义请求头，例如
<pre>{
'X-Auth-Id': 'xxxxxx',
'X-Auth-Token': 'xxxxxx'
}</pre>
</p>
<h4>signal?: AbortSignal | null</h4>
<p>
终止器的信号，用来控制终止请求任务
</p>
<h4>progress?: (this: XMLHttpRequestUpload, ev: ProgressEvent&lt;XMLHttpRequestEventTarget&gt;) => any</h4>
<p>
调用 upload 方法时在上传过程中触发的事件，返回进度参数
</p>
<h3>return: Promise&lt;Response&gt;</h3>
<p>
返回一个结果为 Response 对象的 Promise
</p>
<h2>post</h2>
<code>function post(url: string, data?: BodyInit | null, options?: RequestOptions): Promise&lt;Response&gt;</code>
<h3>url: string</h3>
<p>
url 地址
</p>
<h3>data?: BodyInit | null</h3>
<p>
post 请求传递的请求正文，可以是 FormData 或者任意对象，后者会经 JSON 序列化后发送
</p>
<h3>options?: RequestOptions</h3>
<p>
请求的配置参数，结构如上述 get
</p>
<h3>return: Promise&lt;Response&gt;</h3>
<p>
返回一个结果为 Response 对象的 Promise
</p>
<h2>upload</h2>
<code>upload(url: string, data: FormData, options?: RequestOptions): Promise&lt;XMLHttpRequest&gt;</code>
<h3>url: string</h3>
<p>
url 地址
</p>
<h3>data: FormData</h3>
<p>
upload 请求传递的请求正文，仅支持 FormData
</p>
<h3>options?: RequestOptions</h3>
<p>
请求的配置参数，结构如上述 get，仅使用其中 <code>progress</code> 与 <code>customerHeaders</code>
</p>
<h3>return: Promise&lt;XMLHttpRequest&gt;</h3>
<p>
返回一个结果为 XMLHttpRequest 对象的 Promise
</p>
<hr />
<h2>用法</h2>
<pre>const request = window["lib-utility"];
request.get('https://www.baidu.com')
.then(r => r.text())
.then(text => console.log(text));
request.post('api/query', { id: 101 })
.then(r => r.json())
.then(result => console.log(result.data));
request.upload('api/upload', data, {
progress: ev => {
console.log(`loaded: ${ev.loaded}, total: ${ev.total}`);
}
})
.then(() => console.log('done.'));</pre>
</div>

19
lib/utility/request.js
View File

@ -12,9 +12,10 @@ function get(url, options = {}) {
return fetch(combineUrl(url), {
method: options.method || 'GET',
headers: {
...options.customerHeaders,
'Accept': options.accept || 'application/json'
...options.customHeaders,
'Accept': options.accept ?? 'application/json'
},
mode: options.mode,
signal: options.signal,
cache: 'default'
});
@ -29,16 +30,16 @@ function post(url, data, options = {}) {
data = JSON.stringify(data);
}
// contentType = 'application/json';
if (options.customerHeaders == null) {
options.customerHeaders = {};
if (options.customHeaders == null) {
options.customHeaders = {};
}
if (options.customerHeaders['Content-Type'] == null) {
options.customerHeaders['Content-Type'] = 'application/json';
if (options.customHeaders['Content-Type'] == null) {
options.customHeaders['Content-Type'] = 'application/json';
}
}
return fetch(combineUrl(url), {
method: options.method || 'POST',
headers: options.customerHeaders,
headers: options.customHeaders,
body: data,
signal: options.signal,
cache: 'no-cache'
@ -65,8 +66,8 @@ function upload(url, data, options = {}) {
}, false);
}
request.open('POST', combineUrl(url));
if (options.customerHeaders != null) {
for (let header of Object.entries(options.customerHeaders)) {
if (options.customHeaders != null) {
for (let header of Object.entries(options.customHeaders)) {
request.setRequestHeader(header[0], header[1]);
}
}

73
lib/utility/strings.html
View File

@ -1,73 +0,0 @@
<div>
<h1>strings</h1>
<hr />
<p>
字符串操作工具类。
</p>
<h2>nullOrEmpty</h2>
<code>function nullOrEmpty(s?: string | any | null): boolean</code>
<h3>s?: string | any | null</h3>
<p>
待判断的对象，非字符串或者长度为 0 则返回 true
</p>
<h2>contains</h2>
<code>function contains(s: string, key: string | any, ignoreCase?: boolean): boolean</code>
<h3>s: string</h3>
<p>
待判断的字符串
</p>
<h3>key: string | any</h3>
<p>
检查字符串中是否含有该值，非字符串会先转换为字符串后再进行判断
</p>
<h3>ignoreCase?: boolean</h3>
<p>
判断时是否忽略大小写
</p>
<h2>endsWith</h2>
<code>function endsWith(s: string, suffix: string): boolean</code>
<h3>s: string</h3>
<p>
待判断的字符串
</p>
<h3>suffix: string</h3>
<p>
检查字符串是否以该字符串结尾
</p>
<h2>padStart</h2>
<code>function padStart(s: string, num: Number, char: string): boolean</code>
<h3>s: string</h3>
<p>
基础字符串
</p>
<h3>num: Number</h3>
<p>
对齐字符个数
</p>
<h3>char: string</h3>
<p>
用此字符串填充，使得字符串对齐，默认为 ' '
</p>
<h2>formatUrl</h2>
<code>function formatUrl(msg: string): string</code>
<h3>msg: string</h3>
<p>
把超链接解析替换为图标
</p>
<h2>escapeHtml</h2>
<code>function escapeHtml(text: string): string</code>
<h3>text: string</h3>
<p>
解析转换 html 代码为显示内容
</p>
<hr />
<h2>用法</h2>
<pre>const util = window["lib-utility"];
let s = 'test string';
console.log(util.nullOrEmpty(s)); // false
console.log(util.contains(s, 'abc')); // true
console.log(util.endsWith(s, 'string')); // true
s = util.padStart(s, 16, '0');
// '00000test string'</pre>
</div>