├── .gitignore ├── .vscode ├── .jsbeautifyrc ├── .sass-lint.yml ├── extensions.json ├── settings.json └── tslint.json ├── LICENSE ├── README.md ├── assets ├── doc │ ├── assert.d.ts │ ├── doc.js │ ├── doc.scss │ ├── fonts │ │ ├── doc-icon.json │ │ └── doc-icon.ttf │ ├── images │ │ ├── favicon.ico │ │ ├── localization.png │ │ ├── logo.svg │ │ ├── moduler.png │ │ └── palette.png │ ├── index.scss │ ├── qunit.css │ └── qunit.js ├── mockup │ ├── detail.html │ └── index.html ├── resources │ ├── 100x100.png │ ├── 150x150.png │ ├── 200x150.png │ ├── 200x200.png │ ├── avatar.png │ ├── horse.ogg │ └── snow.swf └── tpl │ ├── default │ ├── package.json │ ├── tpl.md │ └── tpl.ts │ ├── typo │ ├── package.json │ ├── tpl.md │ └── tpl.scss │ ├── ui │ ├── package.json │ ├── tpl.md │ ├── tpl.scss │ └── tpl.tsx │ └── util │ ├── package.json │ ├── tpl-test.ts │ ├── tpl.md │ └── tpl.ts ├── components ├── configs.scss ├── index.yml ├── require.js ├── service │ ├── forkMeOnGithub │ │ ├── forkMeOnGithub.md │ │ ├── forkMeOnGithub.scss │ │ ├── old │ │ │ └── forkMeOnGithub.md │ │ └── package.json │ ├── googleMap │ │ ├── googleMap.md │ │ ├── old │ │ │ ├── googleMap.less │ │ │ └── googleMap.md │ │ └── package.json │ └── weather │ │ ├── old │ │ ├── weather.less │ │ └── weather.md │ │ ├── package.json │ │ └── weather.md ├── tsconfig.json ├── typo │ ├── accessibility │ │ ├── accessibility.md │ │ ├── accessibility.scss │ │ └── package.json │ ├── arrow │ │ ├── arrow.md │ │ ├── arrow.scss │ │ └── package.json │ ├── article │ │ ├── article.md │ │ ├── article.scss │ │ └── package.json │ ├── articleList │ │ ├── articleList.md │ │ ├── articleList.scss │ │ └── package.json │ ├── avatar │ │ ├── avatar.md │ │ ├── avatar.scss │ │ └── package.json │ ├── badge │ │ ├── badge.md │ │ ├── badge.scss │ │ └── package.json │ ├── blockquote │ │ ├── blockquote.md │ │ ├── blockquote.scss │ │ └── package.json │ ├── breadcrumb │ │ ├── breadcrumb.md │ │ ├── breadcrumb.scss │ │ └── package.json │ ├── buttonGroup │ │ ├── buttonGroup.md │ │ ├── buttonGroup.scss │ │ └── package.json │ ├── close │ │ ├── close.md │ │ ├── close.scss │ │ └── package.json │ ├── column │ │ ├── column.md │ │ ├── column.scss │ │ └── package.json │ ├── fieldset │ │ ├── fieldset.md │ │ ├── fieldset.scss │ │ └── package.json │ ├── grid │ │ ├── grid.md │ │ ├── grid.scss │ │ └── package.json │ ├── hover │ │ ├── hover.md │ │ ├── hover.scss │ │ └── package.json │ ├── icon │ │ ├── fonts │ │ │ ├── icon.json │ │ │ ├── icon.svg │ │ │ ├── icon.ttf │ │ │ └── icon.woff │ │ ├── icon-class.scss │ │ ├── icon.md │ │ ├── icon.scss │ │ └── package.json │ ├── linkButton │ │ ├── linkButton.md │ │ ├── linkButton.scss │ │ ├── old │ │ │ ├── linkButton (2).md │ │ │ ├── linkButton (3).md │ │ │ └── linkButton.md │ │ └── package.json │ ├── list │ │ ├── list.md │ │ ├── list.scss │ │ └── package.json │ ├── mask │ │ ├── mask.md │ │ ├── mask.scss │ │ └── package.json │ ├── media │ │ ├── media.md │ │ ├── media.scss │ │ └── package.json │ ├── money │ │ ├── money.md │ │ ├── money.scss │ │ └── package.json │ ├── nav │ │ ├── nav.md │ │ ├── nav.scss │ │ ├── old │ │ │ ├── nav.md │ │ │ └── nav.scss │ │ └── package.json │ ├── print │ │ ├── package.json │ │ ├── print.md │ │ └── print.scss │ ├── reset │ │ ├── package.json │ │ ├── reset-more.md │ │ ├── reset-more.scss │ │ ├── reset.md │ │ └── reset.scss │ ├── spin │ │ ├── package.json │ │ ├── spin.md │ │ └── spin.scss │ ├── summary │ │ ├── package.json │ │ ├── summary.md │ │ └── summary.scss │ ├── table │ │ ├── package.json │ │ ├── table-more.md │ │ ├── table-more.scss │ │ ├── table.md │ │ └── table.scss │ ├── tag │ │ ├── package.json │ │ ├── tag.md │ │ └── tag.scss │ ├── textBoxGroup │ │ ├── old │ │ │ ├── inputGroup.md │ │ │ └── inputGroup.scss │ │ ├── package.json │ │ ├── textBoxGroup.md │ │ └── textBoxGroup.scss │ ├── thumbnail │ │ ├── package.json │ │ ├── thumbnail.md │ │ └── thumbnail.scss │ ├── tip │ │ ├── package.json │ │ ├── tip.md │ │ └── tip.scss │ ├── toolBar │ │ ├── package.json │ │ ├── toolBar.md │ │ └── toolBar.scss │ ├── util │ │ ├── package.json │ │ ├── util-more.md │ │ ├── util-more.scss │ │ ├── util.md │ │ └── util.scss │ └── videoPlaceholder │ │ ├── package.json │ │ ├── videoPlaceholder.md │ │ └── videoPlaceholder.scss ├── ui │ ├── accordion │ │ ├── accordion.md │ │ ├── accordion.scss │ │ ├── accordion.tsx │ │ └── package.json │ ├── addToHomeScreen │ │ ├── addToHomeScreen.md │ │ ├── addToHomeScreen.scss │ │ ├── addToHomeScreen.tsx │ │ ├── addToHomeScreen2.md │ │ └── package.json │ ├── balloonTip │ │ ├── balloonTip.md │ │ ├── balloonTip.scss │ │ ├── balloonTip.tsx │ │ └── package.json │ ├── button │ │ ├── button.md │ │ ├── button.scss │ │ ├── button.tsx │ │ └── package.json │ ├── butttonGroup │ │ ├── butttonGroup.md │ │ ├── butttonGroup.scss │ │ ├── butttonGroup.tsx │ │ └── package.json │ ├── calender │ │ ├── calender.md │ │ ├── calender.scss │ │ ├── calender.tsx │ │ ├── old │ │ │ ├── calender.less │ │ │ ├── calender.md │ │ │ └── calender.ts │ │ └── package.json │ ├── carousel │ │ ├── carousel.md │ │ ├── carousel.scss │ │ ├── carousel.tsx │ │ └── package.json │ ├── charCounter │ │ ├── charCounter.md │ │ ├── charCounter.scss │ │ ├── charCounter.tsx │ │ ├── old │ │ │ ├── charCounter.md │ │ │ └── charCounter.ts │ │ └── package.json │ ├── checkBox │ │ ├── checkBox.md │ │ ├── checkBox.scss │ │ ├── checkBox.tsx │ │ └── package.json │ ├── checkBoxGroup │ │ ├── checkBoxGroup.md │ │ ├── checkBoxGroup.scss │ │ ├── checkBoxGroup.tsx │ │ └── package.json │ ├── cityPicker │ │ ├── cityPicker.md │ │ ├── cityPicker.scss │ │ ├── cityPicker.tsx │ │ ├── old │ │ │ ├── cityPicker.md │ │ │ └── cityPicker.ts │ │ └── package.json │ ├── codeEditor │ │ ├── codeEditor.md │ │ ├── codeEditor.scss │ │ ├── codeEditor.tsx │ │ └── package.json │ ├── colorPicker │ │ ├── colorPicker.md │ │ ├── colorPicker.scss │ │ ├── colorPicker.tsx │ │ ├── old │ │ │ ├── colorPicker.less │ │ │ └── colorPicker.md │ │ └── package.json │ ├── comboBox │ │ ├── comboBox.md │ │ ├── comboBox.scss │ │ ├── comboBox.tsx │ │ └── package.json │ ├── contextMenu │ │ ├── contextMenu.md │ │ ├── contextMenu.scss │ │ ├── contextMenu.tsx │ │ ├── index.md │ │ ├── old │ │ │ ├── contextMenu (2).md │ │ │ ├── contextMenu.md │ │ │ └── images │ │ │ │ ├── icon-error (2).gif │ │ │ │ ├── icon-error.gif │ │ │ │ ├── icon-info (2).gif │ │ │ │ ├── icon-info.gif │ │ │ │ ├── icon-question (2).gif │ │ │ │ ├── icon-question.gif │ │ │ │ ├── icon-success (2).png │ │ │ │ ├── icon-success.png │ │ │ │ ├── icon-warning (2).gif │ │ │ │ └── icon-warning.gif │ │ └── package.json │ ├── control │ │ ├── control.md │ │ ├── control.tsx │ │ ├── jsx.d.ts │ │ └── package.json │ ├── dataGridView │ │ ├── dataGridView.md │ │ ├── dataGridView.scss │ │ ├── dataGridView.tsx │ │ ├── package.json │ │ └── table │ │ │ ├── index.md │ │ │ ├── table.less │ │ │ ├── table.ts │ │ │ └── test.ts │ ├── datePicker │ │ ├── datePicker.md │ │ ├── datePicker.scss │ │ ├── datePicker.tsx │ │ ├── old │ │ │ ├── datePicker.md │ │ │ └── datePicker.ts │ │ └── package.json │ ├── dialog │ │ ├── dialog.md │ │ ├── dialog.scss │ │ ├── dialog.tsx │ │ └── package.json │ ├── emailSuggest │ │ ├── emailSuggest.md │ │ ├── emailSuggest.scss │ │ ├── emailSuggest.tsx │ │ ├── old │ │ │ ├── emailSuggest.md │ │ │ └── emailSuggest.ts │ │ └── package.json │ ├── fileUpload │ │ ├── fileUpload.md │ │ ├── fileUpload.scss │ │ ├── fileUpload.tsx │ │ ├── old │ │ │ ├── fileUpload.less │ │ │ ├── fileUpload.md │ │ │ └── fileUpload.ts │ │ └── package.json │ ├── form │ │ ├── form.md │ │ ├── form.scss │ │ ├── form.tsx │ │ ├── form │ │ │ ├── form (2).md │ │ │ ├── form (2).scss │ │ │ ├── form (2).tsx │ │ │ ├── form (3).scss │ │ │ ├── form (3).tsx │ │ │ ├── form.less │ │ │ ├── form.md │ │ │ ├── form.scss │ │ │ ├── form.ts │ │ │ ├── form.tsx │ │ │ └── index.md │ │ └── package.json │ ├── formLayout │ │ ├── formLayout.md │ │ ├── formLayout.scss │ │ ├── formLayout.tsx │ │ └── package.json │ ├── highligher │ │ ├── highligher.md │ │ ├── highligher.scss │ │ ├── highligher.tsx │ │ └── package.json │ ├── htmlEditor │ │ ├── htmlEditor.md │ │ ├── htmlEditor.scss │ │ ├── htmlEditor.tsx │ │ └── package.json │ ├── imageEditor │ │ ├── imageEditor.md │ │ ├── imageEditor.scss │ │ ├── imageEditor.tsx │ │ └── package.json │ ├── imageViewer │ │ ├── imageViewer.md │ │ ├── imageViewer.scss │ │ ├── imageViewer.tsx │ │ └── package.json │ ├── input │ │ ├── input.md │ │ ├── input.tsx │ │ └── package.json │ ├── inputGroup │ │ ├── inputGroup.md │ │ ├── inputGroup.scss │ │ ├── inputGroup.tsx │ │ └── package.json │ ├── listBox │ │ ├── listBox.md │ │ ├── listBox.scss │ │ ├── listBox.tsx │ │ └── package.json │ ├── listView │ │ ├── listView.md │ │ ├── listView.scss │ │ ├── listView.tsx │ │ ├── old │ │ │ ├── listView (2).md │ │ │ └── listView.md │ │ └── package.json │ ├── markdownEditor │ │ ├── markdownEditor.md │ │ ├── markdownEditor.scss │ │ ├── markdownEditor.tsx │ │ └── package.json │ ├── menu │ │ ├── menu.md │ │ ├── menu.scss │ │ ├── menu.tsx │ │ └── package.json │ ├── menuButtton │ │ ├── menuButtton.md │ │ ├── menuButtton.scss │ │ ├── menuButtton.tsx │ │ └── package.json │ ├── messageBox │ │ ├── messageBox.md │ │ ├── messageBox.scss │ │ ├── messageBox.tsx │ │ └── package.json │ ├── multiListBox │ │ ├── multiListBox.md │ │ ├── multiListBox.tsx │ │ └── package.json │ ├── navMenu │ │ ├── images │ │ │ └── chevron-right.svg │ │ ├── navMenu.md │ │ ├── navMenu.scss │ │ ├── navMenu.tsx │ │ └── package.json │ ├── navTab │ │ ├── navTab.md │ │ ├── navTab.scss │ │ ├── navTab.tsx │ │ └── package.json │ ├── navTree │ │ ├── navTree.md │ │ ├── navTree.scss │ │ ├── navTree.tsx │ │ └── package.json │ ├── notification │ │ ├── notification.md │ │ ├── notification.scss │ │ ├── notification.tsx │ │ └── package.json │ ├── numericUpDown │ │ ├── numericUpDown.md │ │ ├── numericUpDown.scss │ │ ├── numericUpDown.tsx │ │ ├── old │ │ │ ├── numericUpDown.md │ │ │ └── numericUpDown.ts │ │ └── package.json │ ├── pagination │ │ ├── old │ │ │ ├── index.md │ │ │ ├── pager (2).scss │ │ │ ├── pager (2).ts │ │ │ ├── pager-full.ts │ │ │ ├── pager-simple.ts │ │ │ ├── pager.md │ │ │ ├── pager.scss │ │ │ ├── pager.ts │ │ │ └── pager.tsx │ │ ├── package.json │ │ ├── pagination.md │ │ ├── pagination.scss │ │ └── pagination.tsx │ ├── palette │ │ ├── old │ │ │ ├── palette.less │ │ │ ├── palette.md │ │ │ └── palette.ts │ │ ├── package.json │ │ ├── palette.md │ │ ├── palette.scss │ │ └── palette.tsx │ ├── panel │ │ ├── package.json │ │ ├── panel.md │ │ ├── panel.scss │ │ └── panel.tsx │ ├── picker │ │ ├── package.json │ │ ├── picker.md │ │ ├── picker.scss │ │ └── picker.tsx │ ├── popup │ │ ├── package.json │ │ ├── popup.md │ │ ├── popup.scss │ │ └── popup.tsx │ ├── progressBar │ │ ├── package.json │ │ ├── progressBar.md │ │ ├── progressBar.scss │ │ └── progressBar.tsx │ ├── progressCircle │ │ ├── package.json │ │ ├── progressCircle.md │ │ ├── progressCircle.scss │ │ └── progressCircle.tsx │ ├── radioButton │ │ ├── package.json │ │ ├── radioButton.md │ │ ├── radioButton.scss │ │ ├── radioButton.tsx │ │ └── radioButton2.md │ ├── radioButtonGroup │ │ ├── package.json │ │ ├── radioButtonGroup.md │ │ ├── radioButtonGroup.scss │ │ └── radioButtonGroup.tsx │ ├── richTextBox │ │ ├── package.json │ │ ├── richTextBox.md │ │ ├── richTextBox.scss │ │ └── richTextBox.tsx │ ├── safeLink │ │ ├── package.json │ │ ├── safeLink.md │ │ ├── safeLink.scss │ │ └── safeLink.tsx │ ├── scrollToTop │ │ ├── package.json │ │ ├── scrollToTop.md │ │ ├── scrollToTop.scss │ │ └── scrollToTop.tsx │ ├── searchBox │ │ ├── package.json │ │ ├── searchBox.md │ │ ├── searchBox.scss │ │ ├── searchBox.tsx │ │ └── searchTextBox │ │ │ ├── package.json │ │ │ ├── searchTextBox (2).md │ │ │ ├── searchTextBox.less │ │ │ ├── searchTextBox.md │ │ │ ├── searchTextBox.scss │ │ │ └── searchTextBox.tsx │ ├── select │ │ ├── package.json │ │ ├── select.md │ │ ├── select.scss │ │ └── select.tsx │ ├── shareTo │ │ ├── old │ │ │ ├── shareTo.less │ │ │ ├── shareTo.md │ │ │ └── shareTo.ts │ │ ├── package.json │ │ ├── shareTo.md │ │ ├── shareTo.scss │ │ └── shareTo.tsx │ ├── slider │ │ ├── old │ │ │ ├── slider.less │ │ │ ├── slider.md │ │ │ └── slider.ts │ │ ├── package.json │ │ ├── slider.md │ │ ├── slider.scss │ │ └── slider.tsx │ ├── splitButton │ │ ├── old │ │ │ ├── splitButton.less │ │ │ ├── splitButton.md │ │ │ └── splitButton.ts │ │ ├── package.json │ │ ├── splitButton.md │ │ ├── splitButton.scss │ │ └── splitButton.tsx │ ├── splitter │ │ ├── package.json │ │ ├── splitter.md │ │ ├── splitter.scss │ │ └── splitter.tsx │ ├── starRating │ │ ├── images │ │ │ ├── icon-starrating-big (2).gif │ │ │ ├── icon-starrating-big.gif │ │ │ ├── star (2).png │ │ │ └── star.png │ │ ├── package.json │ │ ├── starRating.md │ │ ├── starRating.scss │ │ └── starRating.tsx │ ├── suggest │ │ ├── package.json │ │ ├── suggest.md │ │ ├── suggest.scss │ │ └── suggest.tsx │ ├── tabControl │ │ ├── package.json │ │ ├── tab │ │ │ ├── old │ │ │ │ ├── tab-more.scss │ │ │ │ └── tab.scss │ │ │ ├── tab-more.md │ │ │ ├── tab-more.scss │ │ │ ├── tab.md │ │ │ └── tab.scss │ │ ├── tabControl.md │ │ ├── tabControl.scss │ │ └── tabControl.tsx │ ├── tagChooser │ │ ├── package.json │ │ ├── tagChooser.md │ │ ├── tagChooser.scss │ │ └── tagChooser.tsx │ ├── textArea │ │ ├── package.json │ │ ├── textArea.md │ │ └── textArea.tsx │ ├── textBox │ │ ├── package.json │ │ ├── textBox.md │ │ ├── textBox.scss │ │ └── textBox.tsx │ ├── timePicker │ │ ├── package.json │ │ ├── timePicker.md │ │ ├── timePicker.scss │ │ └── timePicker.tsx │ ├── tipBox │ │ ├── package.json │ │ ├── tipBox.md │ │ ├── tipBox.scss │ │ └── tipBox.tsx │ ├── toast │ │ ├── package.json │ │ ├── toast.md │ │ ├── toast.scss │ │ └── toast.tsx │ ├── toolTip │ │ ├── package.json │ │ ├── toolTip.md │ │ ├── toolTip.scss │ │ └── toolTip.tsx │ ├── treeView │ │ ├── old │ │ │ ├── tree.md │ │ │ ├── tree.scss │ │ │ ├── tree.ts │ │ │ ├── treeView (2).less │ │ │ ├── treeView (2).md │ │ │ ├── treeView (2).ts │ │ │ ├── treeView.less │ │ │ ├── treeView.md │ │ │ └── treeView.ts │ │ ├── package.json │ │ ├── treeView.md │ │ ├── treeView.scss │ │ └── treeView.tsx │ ├── ubbEditor │ │ ├── package.json │ │ ├── ubbEditor.md │ │ ├── ubbEditor.scss │ │ └── ubbEditor.tsx │ └── upDown │ │ ├── old │ │ ├── upDown-traditional.less │ │ ├── upDown-traditional.md │ │ ├── upDown.less │ │ ├── upDown.md │ │ └── upDown.ts │ │ ├── package.json │ │ ├── upDown-tradional.scss │ │ ├── upDown.md │ │ ├── upDown.scss │ │ └── upDown.tsx ├── util │ ├── array │ │ ├── array-test.ts │ │ ├── array.md │ │ ├── array.ts │ │ └── package.json │ ├── asyncQueue │ │ ├── asyncQueue-test.ts │ │ ├── asyncQueue.md │ │ ├── asyncQueue.ts │ │ └── package.json │ ├── base64 │ │ ├── base64-test.ts │ │ ├── base64.md │ │ ├── base64.ts │ │ └── package.json │ ├── bigInteger │ │ ├── bigInteger-test.ts │ │ ├── bigInteger.md │ │ ├── bigInteger.ts │ │ └── package.json │ ├── bigNumber │ │ ├── bigNumber.js │ │ ├── bigNumber.md │ │ └── package.json │ ├── boolean │ │ ├── boolean-test.ts │ │ ├── boolean.md │ │ ├── boolean.ts │ │ └── package.json │ ├── bresenham │ │ ├── bresenham-test.ts │ │ ├── bresenham.md │ │ ├── bresenham.ts │ │ └── package.json │ ├── check │ │ ├── check-test.ts │ │ ├── check.md │ │ ├── check.ts │ │ └── package.json │ ├── chineseId │ │ ├── chineseId-test.ts │ │ ├── chineseId.md │ │ ├── chineseId.ts │ │ └── package.json │ ├── class │ │ ├── class-test.ts │ │ ├── class.md │ │ ├── class.ts │ │ └── package.json │ ├── color │ │ ├── color-test.ts │ │ ├── color.md │ │ ├── color.ts │ │ ├── knownColors.ts │ │ └── package.json │ ├── currency │ │ ├── currency-test.ts │ │ ├── currency.md │ │ ├── currency.ts │ │ └── package.json │ ├── dataTable │ │ ├── dataTable-test.ts │ │ ├── dataTable.md │ │ ├── dataTable.ts │ │ └── package.json │ ├── date │ │ ├── date-test.ts │ │ ├── date.md │ │ ├── date.ts │ │ └── package.json │ ├── delegate │ │ ├── delegate-test.ts │ │ ├── delegate.md │ │ ├── delegate.ts │ │ └── package.json │ ├── des │ │ ├── des-test.ts │ │ ├── des.md │ │ ├── des.ts │ │ └── package.json │ ├── encryptString │ │ ├── encryptString-test.ts │ │ ├── encryptString.md │ │ ├── encryptString.ts │ │ └── package.json │ ├── enum │ │ ├── enum-test.ts │ │ ├── enum.md │ │ ├── enum.ts │ │ └── package.json │ ├── events │ │ ├── events-test.ts │ │ ├── events.md │ │ ├── events.ts │ │ └── package.json │ ├── formatCurrencyToChinese │ │ ├── formatCurrencyToChinese-test.ts │ │ ├── formatCurrencyToChinese.md │ │ ├── formatCurrencyToChinese.ts │ │ └── package.json │ ├── formatTimeToChinese │ │ ├── formatTimeToChinese-test.ts │ │ ├── formatTimeToChinese.md │ │ ├── formatTimeToChinese.ts │ │ └── package.json │ ├── function │ │ ├── function-test.ts │ │ ├── function.md │ │ ├── function.ts │ │ └── package.json │ ├── gb2312 │ │ ├── gb2312-test.ts │ │ ├── gb2312.md │ │ ├── gb2312.ts │ │ └── package.json │ ├── html │ │ ├── html-test.ts │ │ ├── html.md │ │ ├── html.ts │ │ └── package.json │ ├── jjencode │ │ ├── jjencode-test.ts │ │ ├── jjencode.js │ │ ├── jjencode.md │ │ └── package.json │ ├── markdown │ │ ├── markdown.js │ │ ├── markdown.md │ │ └── package.json │ ├── md5 │ │ ├── md5-more.md │ │ ├── md5-more.ts │ │ ├── md5-test.ts │ │ ├── md5.md │ │ ├── md5.ts │ │ └── package.json │ ├── namespace │ │ ├── namespace-test.ts │ │ ├── namespace.md │ │ ├── namespace.ts │ │ └── package.json │ ├── number │ │ ├── number-test.ts │ │ ├── number.md │ │ ├── number.ts │ │ └── package.json │ ├── obfuscator │ │ ├── obfuscator.js │ │ ├── obfuscator.md │ │ └── package.json │ ├── object │ │ ├── object-test.ts │ │ ├── object.md │ │ ├── object.ts │ │ └── package.json │ ├── password │ │ ├── package.json │ │ ├── password-test.ts │ │ ├── password.md │ │ └── password.ts │ ├── path │ │ ├── package.json │ │ ├── path-test.ts │ │ ├── path.md │ │ └── path.ts │ ├── pinyin │ │ ├── package.json │ │ ├── pinyin-gbk.md │ │ ├── pinyin-gbk.ts │ │ ├── pinyin-test.ts │ │ ├── pinyin.md │ │ └── pinyin.ts │ ├── qrcode │ │ ├── package.json │ │ ├── qrcode-test.ts │ │ ├── qrcode.md │ │ └── qrcode.ts │ ├── query │ │ ├── package.json │ │ ├── query-test.ts │ │ ├── query.md │ │ └── query.ts │ ├── queue │ │ ├── package.json │ │ ├── queue-test.ts │ │ ├── queue.md │ │ └── queue.ts │ ├── rect │ │ ├── package.json │ │ ├── rect-test.ts │ │ ├── rect.md │ │ └── rect.ts │ ├── regexp │ │ ├── package.json │ │ ├── regexp-lib.md │ │ ├── regexp-lib.ts │ │ ├── regexp-test.ts │ │ ├── regexp.md │ │ └── regexp.ts │ ├── searchPinYin │ │ ├── package.json │ │ ├── searchPinYin-test.ts │ │ ├── searchPinYin.md │ │ └── searchPinYin.ts │ ├── sha1 │ │ ├── package.json │ │ ├── sha1-test.ts │ │ ├── sha1.md │ │ └── sha1.ts │ ├── shim │ │ ├── atob-shim.js │ │ ├── es5-shim.ts │ │ ├── es6-shim.ts │ │ ├── es7-shim.ts │ │ ├── json-shim.js │ │ ├── package.json │ │ ├── promise-shim.js │ │ ├── shim-test.ts │ │ ├── shim.md │ │ └── shim.ts │ ├── sort │ │ ├── package.json │ │ ├── sort-test.ts │ │ ├── sort.md │ │ └── sort.ts │ ├── sqlike │ │ ├── package.json │ │ ├── sqlike.js │ │ └── sqlike.md │ ├── string │ │ ├── package.json │ │ ├── string-test.ts │ │ ├── string.md │ │ └── string.ts │ ├── tpl │ │ ├── old │ │ │ ├── asp.ts │ │ │ ├── curly.ts │ │ │ ├── tpl.md │ │ │ └── tpl.ts │ │ ├── package.json │ │ ├── tpl-test.ts │ │ ├── tpl.md │ │ └── tpl.ts │ ├── tradionalChinese │ │ ├── package.json │ │ ├── tradionalChinese-test.ts │ │ ├── tradionalChinese.md │ │ └── tradionalChinese.ts │ ├── tween │ │ ├── package.json │ │ ├── transitions.md │ │ ├── transitions.ts │ │ ├── tween-test.ts │ │ ├── tween.md │ │ └── tween.ts │ ├── url │ │ ├── package.json │ │ ├── url-test.ts │ │ ├── url.md │ │ └── url.ts │ ├── utf8 │ │ ├── package.json │ │ ├── utf8-test.ts │ │ ├── utf8.md │ │ └── utf8.ts │ └── xRegExp │ │ ├── package.json │ │ ├── xRegExp.js │ │ └── xRegExp.md └── ux │ ├── active │ ├── active.md │ ├── active.ts │ └── package.json │ ├── addFavorite │ ├── addFavorite.md │ ├── addFavorite.ts │ └── package.json │ ├── ajax │ ├── ajax-more.ts │ ├── ajax-test.ts │ ├── ajax.md │ ├── ajax.ts │ └── package.json │ ├── ajaxSubmit │ ├── ajaxSubmit-test.ts │ ├── ajaxSubmit.md │ ├── ajaxSubmit.ts │ └── package.json │ ├── animate │ ├── animate.md │ ├── animate.ts │ ├── old │ │ ├── tween.md │ │ └── tween.ts │ └── package.json │ ├── animateText │ ├── animateText.md │ ├── animateText.ts │ ├── old │ │ ├── animateText.md │ │ └── animateText.ts │ └── package.json │ ├── at │ ├── at.md │ ├── at.ts │ └── package.json │ ├── autoResize │ ├── autoResize.md │ ├── autoResize.ts │ └── package.json │ ├── autoScroll │ ├── autoScroll.md │ ├── autoScroll.ts │ └── package.json │ ├── borderLayout │ ├── borderLayout.md │ ├── borderLayout.ts │ ├── old │ │ ├── borderLayoutEngine.md │ │ ├── layoutEngine.md │ │ └── layoutEngine.ts │ └── package.json │ ├── clipboard │ ├── clipboard-more.ts │ ├── clipboard-test.ts │ ├── clipboard.md │ ├── clipboard.ts │ ├── package.json │ ├── resources │ │ └── ZeroClipboard.swf │ └── zeroClipboard.js │ ├── cookie │ ├── cookie-more.md │ ├── cookie-more.ts │ ├── cookie-test.ts │ ├── cookie.md │ ├── cookie.ts │ └── package.json │ ├── copy │ ├── copy.md │ ├── copy.ts │ └── package.json │ ├── countDown │ ├── countDown.md │ ├── countDown.ts │ └── package.json │ ├── crashBrowser │ ├── crashBrowser-test.ts │ ├── crashBrowser.md │ ├── crashBrowser.ts │ └── package.json │ ├── ctrlEnter │ ├── ctrlEnter.md │ ├── ctrlEnter.ts │ └── package.json │ ├── disableTab │ ├── disableTab.md │ ├── disableTab.ts │ └── package.json │ ├── dom │ ├── dom-test.ts │ ├── dom.md │ ├── dom.ts │ └── package.json │ ├── drag │ ├── drag.md │ ├── drag.ts │ └── package.json │ ├── drop │ ├── drop.md │ ├── drop.ts │ └── package.json │ ├── fixed │ ├── fixed.md │ ├── fixed.ts │ ├── old │ │ ├── fixed.md │ │ └── fixed.ts │ └── package.json │ ├── flash │ ├── flash-test.ts │ ├── flash.md │ ├── flash.ts │ ├── package.json │ └── swfObject.js │ ├── flexible │ ├── flexible.md │ ├── flexible.ts │ ├── flexible │ │ ├── flexible.ts │ │ └── index.md │ └── package.json │ ├── floating │ ├── floating.md │ ├── floating.ts │ ├── old │ │ ├── floating.md │ │ └── floating.ts │ └── package.json │ ├── forceOpen │ ├── forceOpen.md │ ├── forceOpen.ts │ └── package.json │ ├── gray │ ├── gray.md │ ├── gray.ts │ └── package.json │ ├── hashChange │ ├── hashChange.md │ ├── hashChange.ts │ └── package.json │ ├── highlight │ ├── highlight.md │ ├── highlight.ts │ ├── old │ │ ├── highlight.md │ │ ├── highlight.ts │ │ ├── highlightKeywords.md │ │ └── highlightKeywords.ts │ └── package.json │ ├── hover │ ├── hover.md │ ├── hover.ts │ └── package.json │ ├── ieShim │ ├── ie-shim.ts │ ├── ieShim-test.ts │ ├── ieShim.md │ ├── ieShim.ts │ ├── old │ │ └── shim.md │ └── package.json │ ├── iframe │ ├── iframe-test.ts │ ├── iframe.md │ ├── iframe.ts │ ├── old │ │ ├── iframe.md │ │ └── iframe.ts │ └── package.json │ ├── include │ ├── include-test.ts │ ├── include.md │ ├── include.ts │ └── package.json │ ├── keyPress │ ├── keyPress.md │ ├── keyPress.ts │ └── package.json │ ├── keys │ ├── editing.md │ ├── keys-test.ts │ ├── keys.md │ ├── keys.ts │ └── package.json │ ├── killIE │ ├── killIE.md │ └── package.json │ ├── lazyLoad │ ├── lazyLoad.md │ ├── lazyLoad.ts │ └── package.json │ ├── load │ ├── load-test.ts │ ├── load.md │ ├── load.ts │ ├── old │ │ ├── loadHtml.ts │ │ ├── loadImage.ts │ │ ├── loadScript.ts │ │ ├── loadStyle.ts │ │ └── loading.md │ └── package.json │ ├── marquee │ ├── marquee.md │ ├── marquee.ts │ ├── old │ │ ├── marquee.md │ │ └── marquee.ts │ └── package.json │ ├── messager │ ├── messager-test.ts │ ├── messager.md │ ├── messager.ts │ └── package.json │ ├── morph │ ├── morph.md │ ├── morph.ts │ ├── old │ │ ├── morph.md │ │ └── morph.ts │ └── package.json │ ├── multiFade │ ├── multiFade.md │ ├── multiFade.ts │ ├── old │ │ ├── multiFade.md │ │ └── multiFade.ts │ └── package.json │ ├── navigator │ ├── navigator-test.ts │ ├── navigator.md │ ├── navigator.ts │ └── package.json │ ├── nextTick │ ├── nextTick-test.ts │ ├── nextTick.md │ ├── nextTick.ts │ └── package.json │ ├── noContextMenu │ ├── noContextMenu.md │ ├── noContextMenu.ts │ └── package.json │ ├── noIFrame │ ├── noIFrame.md │ ├── noIFrame.ts │ └── package.json │ ├── outerHTML │ ├── outerHTML-test.ts │ ├── outerHTML.md │ ├── outerHTML.ts │ └── package.json │ ├── pin │ ├── package.json │ ├── pin.md │ └── pin.ts │ ├── placeholder │ ├── old │ │ ├── placeholder (2).ts │ │ ├── placeholder.less │ │ ├── placeholder.md │ │ └── placeholder.ts │ ├── package.json │ ├── placeholder.md │ └── placeholder.ts │ ├── popup │ ├── package.json │ ├── popup.md │ └── popup.ts │ ├── preload │ ├── package.json │ ├── preload.md │ └── preload.ts │ ├── preventMaskScroll │ ├── package.json │ ├── preventMaskScroll.md │ └── preventMaskScroll.ts │ ├── resize │ ├── package.json │ ├── resize.md │ └── resize.ts │ ├── scroll │ ├── package.json │ ├── scroll.md │ └── scroll.ts │ ├── scrollSpy │ ├── old │ │ ├── scrollSpy (2).md │ │ ├── scrollSpy (2).ts │ │ ├── scrollSpy.md │ │ └── scrollSpy.ts │ ├── package.json │ ├── scrollSpy.md │ └── scrollSpy.ts │ ├── scrollbar │ ├── old │ │ ├── scrollbar.less │ │ ├── scrollbar.md │ │ └── scrollbar.ts │ ├── package.json │ ├── scrollbar.md │ └── scrollbar.ts │ ├── selection │ ├── old │ │ ├── selection.md │ │ └── selection.ts │ ├── package.json │ ├── selection-test.ts │ ├── selection.md │ └── selection.ts │ ├── sort │ ├── old │ │ ├── sort.ts │ │ └── sortable.md │ ├── package.json │ ├── sort.md │ └── sort.ts │ ├── splitter │ ├── old │ │ └── splitter.md │ ├── package.json │ ├── splitter.md │ ├── splitter.scss │ └── splitter.ts │ ├── status │ ├── package.json │ ├── status.md │ └── status.ts │ ├── stylesheet │ ├── old │ │ ├── stylesheet.md │ │ └── stylesheet.ts │ ├── package.json │ ├── stylesheet-test.ts │ ├── stylesheet.md │ └── stylesheet.ts │ ├── swipe │ ├── package.json │ ├── swipe.md │ ├── swipe.ts │ ├── swipe2.ts │ ├── xswipe.md │ └── xswipe.ts │ ├── tab │ ├── package.json │ ├── tab.md │ └── tab.ts │ ├── tableLayout │ ├── old │ │ └── tableLayoutEngine.md │ ├── package.json │ ├── tableLayout.md │ └── tableLayout.ts │ ├── toggleFullScreen │ ├── package.json │ ├── toggleFullScreen.md │ └── toggleFullScreen.ts │ ├── touch │ ├── old │ │ ├── touchRefresh.ts │ │ ├── touchRotate.ts │ │ ├── touchScroll (2).md │ │ ├── touchScroll (2).ts │ │ ├── touchScroll (3).ts │ │ ├── touchScroll (4).md │ │ ├── touchScroll (4).ts │ │ ├── touchScroll.md │ │ ├── touchScroll.ts │ │ └── touching.md │ ├── package.json │ ├── touch.md │ └── touch.ts │ ├── url │ ├── package.json │ ├── url-test.ts │ ├── url.md │ └── url.ts │ ├── waterfall │ ├── package.json │ ├── waterfall.md │ └── waterfall.ts │ ├── within │ ├── package.json │ ├── within-test.ts │ ├── within.md │ └── within.ts │ └── xml │ ├── package.json │ ├── xml-test.ts │ ├── xml.md │ └── xml.ts ├── digofile.js ├── docs └── index.yml ├── package.json └── tools └── index.yml /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "HookyQR.beautify", 4 | "eg2.tslint", 5 | "glen-84.sass-lint", 6 | "xuld.digo", 7 | "mrmlnc.vscode-scss" 8 | ] 9 | } -------------------------------------------------------------------------------- /assets/doc/fonts/doc-icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/doc/fonts/doc-icon.ttf -------------------------------------------------------------------------------- /assets/doc/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/doc/images/favicon.ico -------------------------------------------------------------------------------- /assets/doc/images/localization.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/doc/images/localization.png -------------------------------------------------------------------------------- /assets/doc/images/moduler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/doc/images/moduler.png -------------------------------------------------------------------------------- /assets/doc/images/palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/doc/images/palette.png -------------------------------------------------------------------------------- /assets/resources/100x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/resources/100x100.png -------------------------------------------------------------------------------- /assets/resources/150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/resources/150x150.png -------------------------------------------------------------------------------- /assets/resources/200x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/resources/200x150.png -------------------------------------------------------------------------------- /assets/resources/200x200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/resources/200x200.png -------------------------------------------------------------------------------- /assets/resources/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/resources/avatar.png -------------------------------------------------------------------------------- /assets/resources/horse.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/resources/horse.ogg -------------------------------------------------------------------------------- /assets/resources/snow.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/assets/resources/snow.swf -------------------------------------------------------------------------------- /assets/tpl/default/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "__nameLower__", 3 | "description": "__description__", 4 | "version": "__version__", 5 | "author": "__author__ <__email__>", 6 | "types": "./__name__.ts" 7 | } -------------------------------------------------------------------------------- /assets/tpl/default/tpl.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: __version__ 3 | author: __author__ <__email__> 4 | --- 5 | # __displayName__ 6 | __description__ 7 | -------------------------------------------------------------------------------- /assets/tpl/default/tpl.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * __description__。 3 | */ 4 | export default function __name__() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /assets/tpl/typo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "__nameLower__", 3 | "description": "__description__", 4 | "version": "__version__", 5 | "author": "__author__ <__email__>", 6 | "types": "./__name__.scss" 7 | } -------------------------------------------------------------------------------- /assets/tpl/typo/tpl.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: __version__ 3 | author: __author__ <__email__> 4 | import: 5 | - typo/reset 6 | --- 7 | # __displayName__ 8 | __description__ 9 | 10 | ## 基本用法 11 | 12 | ```html demo 13 |
14 | ``` 15 | -------------------------------------------------------------------------------- /assets/tpl/typo/tpl.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-__nameLower__ { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /assets/tpl/ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "__nameLower__", 3 | "description": "__description__", 4 | "version": "__version__", 5 | "author": "__author__ <__email__>", 6 | "types": "./__name__.tsx" 7 | } -------------------------------------------------------------------------------- /assets/tpl/ui/tpl.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: __version__ 3 | author: __author__ <__email__> 4 | import: 5 | - typo/reset 6 | --- 7 | # __displayName__ 8 | __description__ 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import __namePascal__ from "__path__"; 15 | 16 | render( 17 | __root__, 18 | <__namePascal__> 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /assets/tpl/ui/tpl.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-__nameLower__ { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /assets/tpl/ui/tpl.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./__name__.scss"; 4 | 5 | /** 6 | * 表示一个__displayName__。 7 | */ 8 | export default class __namePascal__ extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /assets/tpl/util/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "__nameLower__", 3 | "description": "__description__", 4 | "version": "__version__", 5 | "author": "__author__ <__email__>", 6 | "types": "./__name__.ts" 7 | } -------------------------------------------------------------------------------- /assets/tpl/util/tpl-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as __name__ from "./__name__"; 3 | 4 | export function __name__Test() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /assets/tpl/util/tpl.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: __version__ 3 | author: __author__ <__email__> 4 | --- 5 | # __displayName__ 6 | __description__ 7 | -------------------------------------------------------------------------------- /assets/tpl/util/tpl.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * __description__。 3 | */ 4 | export default function __name__() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/service/forkMeOnGithub/forkMeOnGithub.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 在 Github 关注 8 | 在 Github 关注 9 | 10 | ## 基本用法 11 | 12 | -------------------------------------------------------------------------------- /components/service/forkMeOnGithub/forkMeOnGithub.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-forkmeongithub { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/service/forkMeOnGithub/old/forkMeOnGithub.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
-------------------------------------------------------------------------------- /components/service/forkMeOnGithub/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./forkMeOnGithub.tsx" 3 | } -------------------------------------------------------------------------------- /components/service/googleMap/googleMap.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # Google 地图 8 | Google 地图 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import GoogleMap from "ui/googleMap"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/service/googleMap/old/googleMap.less: -------------------------------------------------------------------------------- 1 | /** 2 | * $author 3 | */ 4 | 5 | @import "configs"; 6 | 7 | .x-googlemap { 8 | border: 1px solid $border-color; 9 | margin: 0; 10 | overflow: hidden; 11 | padding: 0; 12 | } -------------------------------------------------------------------------------- /components/service/googleMap/old/googleMap.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/service/googleMap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./googleMap.tsx" 3 | } -------------------------------------------------------------------------------- /components/service/weather/old/weather.less: -------------------------------------------------------------------------------- 1 | /** 2 | * $author [作者] 3 | */ 4 | 5 | @import "configs"; 6 | -------------------------------------------------------------------------------- /components/service/weather/old/weather.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/service/weather/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./weather.tsx" 3 | } -------------------------------------------------------------------------------- /components/service/weather/weather.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 天气 8 | 天气 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import Weather from "ui/weather"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/typo/accessibility/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./accessibility.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/arrow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./arrow.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/article/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./article.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/articleList/articleList.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-articlelist { 4 | > li { 5 | padding: $margin-y 0; 6 | } 7 | 8 | p { 9 | margin-bottom: 0; 10 | line-height: $line-height; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /components/typo/articleList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./articleList.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/avatar/avatar.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-avatar { 4 | border-radius: $border-radius; 5 | 6 | @include size { 7 | border-radius: $border-radius-size; 8 | } 9 | 10 | &-rounded { 11 | border-radius: 50%; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /components/typo/avatar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./avatar.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/badge/badge.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 徽章 8 | 用于显示一些数字提示。 9 | 10 | ## 基本用法 11 | ```html demo 12 | 链接1 13 | ``` 14 | -------------------------------------------------------------------------------- /components/typo/badge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./badge.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/blockquote/blockquote.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 块引用 8 | 显示引用样式。 9 | 10 | ```html demo 11 |
12 |

13 | 土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 14 |

15 |
—— 别林斯基
16 |
17 | ``` 18 | -------------------------------------------------------------------------------- /components/typo/blockquote/blockquote.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-blockquote { 4 | border-left: 5px solid $border-color; 5 | padding-left: $margin-x; 6 | 7 | > p { 8 | margin: 0; 9 | font-family: $font-family-scripts; 10 | } 11 | 12 | > footer { 13 | color: $text-color-light; 14 | font-size: $font-size-small; 15 | font-weight: $font-weight-small; 16 | text-align: right; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/typo/blockquote/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./blockquote.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/breadcrumb/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-breadcrumb { 4 | margin: 0 0 $margin-y; 5 | color: $text-color-light; 6 | font-size: 95%; 7 | 8 | &-divider { 9 | margin: 0 $spacer-small; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /components/typo/breadcrumb/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./breadcrumb.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/buttonGroup/buttonGroup.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 按钮组 8 | 按钮组 9 | 10 | ## 基本用法 11 | 12 | ```html demo 13 |
14 | ``` 15 | -------------------------------------------------------------------------------- /components/typo/buttonGroup/buttonGroup.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-buttongroup { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/typo/buttonGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./buttonGroup.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/close/close.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-close { 4 | @include reset-button(); 5 | float: right; 6 | margin: (1rem * $line-height - 1rem) / 2 0; 7 | width: 1rem; 8 | border-radius: 50%; 9 | color: $text-color-light; 10 | font-size: 1rem; 11 | line-height: 1rem; 12 | 13 | &:hover, &:focus { 14 | background-color: $error-text-color; 15 | color: $selected-text-color; 16 | transition: background-color $duration; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/typo/close/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./close.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/column/column.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-tr { 4 | display: table; 5 | width: 100%; 6 | border-collapse: separate; // 避免继承上级表格的属性。 7 | } 8 | 9 | .x-td { 10 | display: table-cell; 11 | width: 1%; 12 | white-space: nowrap; 13 | vertical-align: top; 14 | 15 | & ~ & { 16 | padding-left: $margin-x; 17 | } 18 | 19 | &-block { 20 | width: 99%; 21 | white-space: normal; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /components/typo/column/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./column.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/fieldset/fieldset.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 字段集 8 | 含标题的表单字段。 9 | 10 | ## 基本用法 11 | ```html demo 12 |
13 | 标题 14 | 内容 15 |
16 | ``` 17 | -------------------------------------------------------------------------------- /components/typo/fieldset/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./fieldset.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./grid.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/hover/hover.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 悬浮隐藏 8 | 隐藏一些元素并在鼠标移上后显示。 9 | 10 | ## 基本用法 11 | 将需要隐藏的元素放在 `.x-hover-show` 中，当鼠标移到 `.x-hover` 时会自动显示。 12 | ```html demo doc 13 | 16 | ``` 17 | -------------------------------------------------------------------------------- /components/typo/hover/hover.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-hover { 4 | &-show { 5 | opacity: 0; 6 | transition: opacity $duration; 7 | } 8 | 9 | &:hover &-show { 10 | opacity: 1; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /components/typo/hover/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./hover.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/icon/fonts/icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/typo/icon/fonts/icon.ttf -------------------------------------------------------------------------------- /components/typo/icon/fonts/icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/typo/icon/fonts/icon.woff -------------------------------------------------------------------------------- /components/typo/icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./icon.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/linkButton/linkButton.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | - typo/icon 7 | - ui/button 8 | --- 9 | # 链接按钮 10 | 具有链接样式的按钮。 11 | 12 | ```html demo 13 | 确定 14 | 取消 15 | ``` 16 | -------------------------------------------------------------------------------- /components/typo/linkButton/linkButton.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-linkbutton { 4 | display: inline-block; 5 | border: 1px solid transparent; 6 | padding: $padding-y $padding-x; 7 | } 8 | -------------------------------------------------------------------------------- /components/typo/linkButton/old/linkButton (2).md: -------------------------------------------------------------------------------- 1 | # 链接按钮 2 | 具有链接样式的按钮。 3 | 4 | 5 | 6 | 7 | ```html demo 8 | 链接按钮 9 | ✖链接按钮 10 | ``` 11 | ```html demo 12 | 确定 13 | 取消 14 | ``` 15 | -------------------------------------------------------------------------------- /components/typo/linkButton/old/linkButton.md: -------------------------------------------------------------------------------- 1 | # 链接按钮 2 | 具有链接样式的按钮。 3 | 4 | 5 | 6 | 7 | ```htm 8 | 链接按钮 9 | ✖链接按钮 10 | ``` 11 | ```htm 12 | 确定 13 | 取消 14 | ``` 15 | -------------------------------------------------------------------------------- /components/typo/linkButton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./linkButton.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./list.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/mask/mask.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | - typo/icon 7 | - typo/spin 8 | keyword: 9 | - 阴影 10 | --- 11 | # 遮罩 12 | 遮罩(蒙版)主要用于覆盖用户点击区域，防止用户的误操作。 13 | 14 | ## 基本用法 15 | ```html demo 16 | 我是普通文本 17 |
18 |
҉ 加载中...
19 |
20 | ``` 21 | -------------------------------------------------------------------------------- /components/typo/mask/mask.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | $mask-background-color: #000 !default; 4 | $mask-opacity: .5 !default; 5 | 6 | .x-mask { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | z-index: $z-index-fixed; 11 | display: flex; 12 | width: 100%; 13 | height: 100%; 14 | background: $mask-background-color; 15 | color: $selected-text-color; 16 | opacity: $mask-opacity; 17 | 18 | &-body { 19 | margin: auto; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components/typo/mask/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./mask.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/media/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./media.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/money/money.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | keyword: 7 | - 钱 8 | - 价格 9 | - price 10 | --- 11 | # 金额 12 | 用于金额高亮显示以及对齐。 13 | 14 | ## 基本用法 15 | ```html demo 16 | 最低价：¥ 20,001 17 | ``` 18 | -------------------------------------------------------------------------------- /components/typo/money/money.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-money { 4 | color: #e75242; 5 | font-size: $font-size-large; 6 | } 7 | -------------------------------------------------------------------------------- /components/typo/money/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./money.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/nav/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./nav.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/print/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./print.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/reset/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./reset.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/reset/reset-more.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 样式重置扩展 6 | 更多的样式重置。 7 | 8 | 1. 隐藏 `tabindex = -1` 的边框。 9 | 2. 令 IE6-8 支持 HTML5 标签。 10 | 3. 修复更多表单标签的样式。 11 | 12 | ## `
` 13 | ```html demo 14 |
15 | 标签 16 | 文字 17 |
18 | ``` 19 | 20 | ## `` 21 | ```html demo 22 | abbr 23 | ``` 24 | 25 | > ##### 另参考 26 | > - [normalize.css](https://github.com/necolas/normalize.css/blob/master/normalize.css) -------------------------------------------------------------------------------- /components/typo/spin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./spin.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/spin/spin.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 旋转 8 | 实现旋转效果。 9 | 10 | ## 旋转文字 11 | ```html demo 12 |
A
13 | ``` 14 | 15 | ## 旋转图片 16 | ```html demo 17 | 18 | ``` 19 | -------------------------------------------------------------------------------- /components/typo/spin/spin.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | $spin-animation: x-spin !default; 4 | 5 | .x-spin { 6 | display: inline-block; 7 | animation: 2s linear 0s normal none infinite running $spin-animation; 8 | 9 | @keyframes #{$spin-animation} { 10 | 0% { 11 | transform: rotate(0); 12 | } 13 | 100% { 14 | transform: rotate(359deg); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/typo/summary/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./summary.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/summary/summary.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 概述 8 | 用于在一篇文章开头显示概述。 9 | 10 | ## 基本用法 11 | 12 | ```html demo 13 |

在很远很远以前...

14 | ``` 15 | -------------------------------------------------------------------------------- /components/typo/summary/summary.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-summary { 4 | font-size: $font-size-large; 5 | font-weight: 300; 6 | } 7 | -------------------------------------------------------------------------------- /components/typo/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./table.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/tag/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./tag.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/textBoxGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./textBoxGroup.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/textBoxGroup/textBoxGroup.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 文本框组 8 | 文本框组 9 | 10 | ## 基本用法 11 | 12 | ```html demo 13 |
14 | ``` 15 | -------------------------------------------------------------------------------- /components/typo/textBoxGroup/textBoxGroup.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-textboxgroup { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/typo/thumbnail/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./thumbnail.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/thumbnail/thumbnail.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-thumbnail { 4 | box-sizing: border-box; 5 | border: 1px solid $border-color; 6 | border-radius: $border-radius; 7 | padding: $padding-y-small; 8 | transition: border-color ease-in-out $duration; 9 | 10 | a:hover & { 11 | border-color: $primary-color; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /components/typo/tip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./tip.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/tip/tip.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | keyword: 7 | - 颜色 8 | - color 9 | - 状态 10 | - status 11 | - state 12 | --- 13 | # 提示 14 | 文案配色 15 | 16 | ## 基本用法 17 | ```html demo 18 | 提示 19 | --- 20 | 信息 21 | --- 22 | 成功 23 | --- 24 | 警告 25 | --- 26 | 失败 27 | ``` 28 | -------------------------------------------------------------------------------- /components/typo/tip/tip.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-tip { 4 | color: $text-color-light; 5 | 6 | @include state { 7 | color: $state-text-color; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /components/typo/toolBar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./toolBar.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/util/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./util.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/util/util-more.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 工具样式扩展 8 | 提供更多的工具样式 9 | 10 | ## 定位 11 | - `x-relative`: 相对定位 12 | - `x-absolute`: 绝对定位 13 | ```html demo 14 |
15 |
16 | 绝对定位 17 |
18 |
19 | ``` 20 | 21 | ## 边框 22 | - `x-dotted`: 点线边框 23 | - `x-dashed`: 虚线边框 24 | ```html demo 25 |
26 |
27 | ``` 28 | -------------------------------------------------------------------------------- /components/typo/util/util-more.scss: -------------------------------------------------------------------------------- 1 | .x-relative { 2 | position: relative !important; 3 | } 4 | 5 | .x-absolute { 6 | position: absolute !important; 7 | } 8 | 9 | .x-dotted { 10 | border-style: dotted !important; 11 | } 12 | 13 | .x-dashed { 14 | border-style: dashed !important; 15 | } 16 | -------------------------------------------------------------------------------- /components/typo/videoPlaceholder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./videoPlaceholder.scss" 3 | } -------------------------------------------------------------------------------- /components/typo/videoPlaceholder/videoPlaceholder.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | - typo/icon 7 | - typo/thumbnail 8 | --- 9 | # 视频缩略图 10 | 提供视图缩略图。 11 | 12 | ## 基本用法 13 | ```html demo 14 | 15 | 16 | 17 | ``` 18 | -------------------------------------------------------------------------------- /components/ui/accordion/accordion.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-accordion { 4 | margin: 0 0 $margin-y; 5 | 6 | &:last-child { 7 | margin: 0; 8 | } 9 | 10 | > .x-panel:not(:first-child) { 11 | border-top: 0; 12 | border-top-left-radius: 0; 13 | border-top-right-radius: 0; 14 | } 15 | 16 | > .x-panel:not(:last-child) { 17 | margin-bottom: 0; 18 | border-bottom-right-radius: 0; 19 | border-bottom-left-radius: 0; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components/ui/accordion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./accordion.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/addToHomeScreen/addToHomeScreen.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 添加到主屏幕 8 | 添加到主屏幕 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import AddToHomeScreen from "ui/addToHomeScreen"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/ui/addToHomeScreen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./addToHomeScreen.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/balloonTip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./balloonTip.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./button.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/butttonGroup/butttonGroup.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./butttonGroup.scss"; 3 | 4 | /** 5 | * 表示一个按钮组。 6 | */ 7 | export class ButttonGroup extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default ButttonGroup; 20 | -------------------------------------------------------------------------------- /components/ui/butttonGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./butttonGroup.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/calender/calender.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | 日历(calender) 8 | ============================ 9 | 10 | -------------------------------------------------------------------------------- /components/ui/calender/calender.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview 日历 3 | * @author xuld 4 | */ 5 | @import "../configs.less"; 6 | @import "../typo/mixins.less"; 7 | 8 | .x-calender { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /components/ui/calender/calender.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview 日历 3 | * @author xuld 4 | */ 5 | import * as dom from "dom"; 6 | import Control from "control"; 7 | import "./calender.less"; 8 | 9 | /** 10 | * 表示一个日历。 11 | */ 12 | export default class Calender extends Control { 13 | 14 | /** 15 | * 获取当前控件的模板。 16 | */ 17 | protected tpl = `
`; 18 | 19 | /** 20 | * 当被子类重写时，负责初始化当前控件。 21 | */ 22 | protected init() { 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /components/ui/calender/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./calender.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/carousel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./carousel.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/charCounter/charCounter.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | --- 8 | version: 0.0.1 9 | author: xuld 10 | import: 11 | - typo/reset 12 | --- 13 | # charCounter 14 | charCounter 15 | 16 | ## 基本用法 17 | 18 | ```jsx demo 19 | import { VNode, render } from "ui/control"; 20 | import CharCounter from "ui/charCounter"; 21 | 22 | render( 23 | __root__, 24 | 25 | ); 26 | ``` 27 | -------------------------------------------------------------------------------- /components/ui/charCounter/charCounter.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-charcounter { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/charCounter/charCounter.tsx: -------------------------------------------------------------------------------- 1 | import { Control } from "control"; 2 | 3 | /** 4 | * 表示一个文字计数器。 5 | */ 6 | export default class CharCounter extends Control { 7 | 8 | /** 9 | * 获取或设置最大允许输入的字符数。 10 | */ 11 | maxLength = 300; 12 | 13 | input: number; 14 | 15 | render() { 16 | return {input}/{total}; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /components/ui/charCounter/old/charCounter.md: -------------------------------------------------------------------------------- 1 | @doc charCounter.ts 2 | 3 | @demo 4 | 5 | {input}/{total} 6 | -------------------------------------------------------------------------------- /components/ui/charCounter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./charCounter.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/checkBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./checkBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/checkBoxGroup/checkBoxGroup.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-checkboxgroup { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/checkBoxGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./checkBoxGroup.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/cityPicker/cityPicker.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 城市选择器 8 | 城市选择器 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import CityPicker from "ui/cityPicker"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/ui/cityPicker/cityPicker.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-citypicker { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/cityPicker/cityPicker.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./cityPicker.scss"; 4 | 5 | /** 6 | * 表示一个城市选择器。 7 | */ 8 | export default class CityPicker extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/cityPicker/old/cityPicker.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 | 7 | 8 | 9 |
-------------------------------------------------------------------------------- /components/ui/cityPicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./cityPicker.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/codeEditor/codeEditor.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 |
-------------------------------------------------------------------------------- /components/ui/codeEditor/codeEditor.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-codeeditor { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/codeEditor/codeEditor.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./codeEditor.scss"; 4 | 5 | /** 6 | * 表示一个codeEditor。 7 | */ 8 | export default class CodeEditor extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/codeEditor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./codeEditor.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/colorPicker/colorPicker.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 颜色选择器 8 | 颜色选择器 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import ColorPicker from "ui/colorPicker"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/ui/colorPicker/colorPicker.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-colorpicker { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/colorPicker/colorPicker.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./colorPicker.scss"; 4 | 5 | /** 6 | * 表示一个颜色选择器。 7 | */ 8 | export default class ColorPicker extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/colorPicker/old/colorPicker.less: -------------------------------------------------------------------------------- 1 | 2 | @import "configs"; 3 | 4 | .x-colorpicker-demo { 5 | position: absolute; 6 | left: $padding-width; 7 | top: ($padding-height + $line-height) / 2 - ($font-size - 2) / 4; 8 | width: $font-size - 2px; 9 | height: $font-size - 2px; 10 | 11 | + .x-textbox { 12 | padding-left: $padding-width * 2 + $font-size - 6px; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/colorPicker/old/colorPicker.md: -------------------------------------------------------------------------------- 1 | ## 基本用法 2 | 3 | 4 | 5 |
-------------------------------------------------------------------------------- /components/ui/colorPicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./colorPicker.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/comboBox/comboBox.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-combobox { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/comboBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./comboBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/contextMenu/contextMenu.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | --- 8 | version: 0.0.1 9 | author: xuld 10 | import: 11 | - typo/reset 12 | --- 13 | # contextMenu 14 | contextMenu 15 | 16 | ## 基本用法 17 | 18 | ```jsx demo 19 | import { VNode, render } from "ui/control"; 20 | import ContextMenu from "ui/contextMenu"; 21 | 22 | render( 23 | __root__, 24 | 25 | ); 26 | ``` 27 | -------------------------------------------------------------------------------- /components/ui/contextMenu/contextMenu.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-contextmenu { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/contextMenu/old/contextMenu (2).md: -------------------------------------------------------------------------------- 1 | ## 基本用法 2 | 3 | -------------------------------------------------------------------------------- /components/ui/contextMenu/old/contextMenu.md: -------------------------------------------------------------------------------- 1 | ## 基本用法 2 | 3 | -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-error (2).gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-error (2).gif -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-error.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-error.gif -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-info (2).gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-info (2).gif -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-info.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-info.gif -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-question (2).gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-question (2).gif -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-question.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-question.gif -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-success (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-success (2).png -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-success.png -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-warning (2).gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-warning (2).gif -------------------------------------------------------------------------------- /components/ui/contextMenu/old/images/icon-warning.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/contextMenu/old/images/icon-warning.gif -------------------------------------------------------------------------------- /components/ui/contextMenu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./contextMenu.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/control/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./control.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/dataGridView/dataGridView.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 表格视图 8 | 9 | ```tsx demo 10 | 11 | ``` -------------------------------------------------------------------------------- /components/ui/dataGridView/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./dataGridView.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/dataGridView/table/index.md: -------------------------------------------------------------------------------- 1 | 表格(table) 2 | ============================ 3 | 4 | -------------------------------------------------------------------------------- /components/ui/dataGridView/table/table.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview 表格 3 | * @author xuld 4 | */ 5 | import * as dom from "dom"; 6 | import Control from "control"; 7 | import "./table.less"; 8 | 9 | /** 10 | * 表示一个表格。 11 | */ 12 | export default class Table extends Control { 13 | 14 | /** 15 | * 获取当前控件的模板。 16 | */ 17 | protected tpl = `
`; 18 | 19 | /** 20 | * 当被子类重写时，负责初始化当前控件。 21 | */ 22 | protected init() { 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /components/ui/dataGridView/table/test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | 3 | export function tableTest() { 4 | assert.equal(true, true); 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/datePicker/datePicker.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | 日期选择器(datePicker) 8 | ============================ 9 | 10 | -------------------------------------------------------------------------------- /components/ui/datePicker/datePicker.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview 日期选择器 3 | * @author xuld 4 | */ 5 | @import "../configs.less"; 6 | @import "../typo/mixins.less"; 7 | 8 | .x-datePicker { 9 | 10 | } 11 | -------------------------------------------------------------------------------- /components/ui/datePicker/datePicker.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview 日期选择器 3 | * @author xuld 4 | */ 5 | import * as dom from "dom"; 6 | import Control from "control"; 7 | import "./datePicker.less"; 8 | 9 | /** 10 | * 表示一个日期选择器。 11 | */ 12 | export default class DatePicker extends Control { 13 | 14 | /** 15 | * 获取当前控件的模板。 16 | */ 17 | protected tpl = `
`; 18 | 19 | /** 20 | * 当被子类重写时，负责初始化当前控件。 21 | */ 22 | protected init() { 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /components/ui/datePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./datePicker.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/dialog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./dialog.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/emailSuggest/emailSuggest.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 邮箱提示 8 | 邮箱提示 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import EmailSuggest from "ui/emailSuggest"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/ui/emailSuggest/emailSuggest.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-emailsuggest { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/emailSuggest/emailSuggest.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./emailSuggest.scss"; 4 | 5 | /** 6 | * 表示一个邮箱提示。 7 | */ 8 | export default class EmailSuggest extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/emailSuggest/old/emailSuggest.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/ui/emailSuggest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./emailSuggest.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/fileUpload/fileUpload.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-fileupload { 4 | position: relative; 5 | overflow: hidden; 6 | 7 | input[type="file"] { 8 | position: absolute; 9 | top: 0; 10 | right: 0; 11 | width: 100%; 12 | height: 100%; 13 | opacity: 0; 14 | cursor: default; 15 | 16 | &:focus + .x-button, &:hover + .x-button { 17 | background-color: darken($background-color-dark, 5%); 18 | } 19 | 20 | &:active + .x-button { 21 | background-color: darken($background-color-dark, 10%); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /components/ui/fileUpload/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./fileUpload.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/form/form/form (2).scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-form { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/form/form/form.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview 表单 3 | * @author xuld 4 | */ 5 | import * as dom from "dom"; 6 | import Control from "control"; 7 | import "./form.less"; 8 | 9 | /** 10 | * 表示一个表单。 11 | */ 12 | export default class Form extends Control { 13 | 14 | /** 15 | * 获取当前控件的模板。 16 | */ 17 | protected tpl = `
`; 18 | 19 | /** 20 | * 当被子类重写时，负责初始化当前控件。 21 | */ 22 | protected init() { 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /components/ui/form/form/index.md: -------------------------------------------------------------------------------- 1 | # 表单 2 | 3 | ## 基本用法 4 | 5 | ```htm 6 |
7 | ``` 8 | -------------------------------------------------------------------------------- /components/ui/form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./form.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/formLayout/formLayout.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-form { 4 | width: 100%; 5 | 6 | > tbody > tr > th, > tbody > tr > td { 7 | border: 0; 8 | padding: 0 $spacer $margin-y 0; 9 | vertical-align: middle; 10 | } 11 | 12 | > tbody > tr > th { 13 | font-weight: $font-weight; 14 | text-align: right; 15 | white-space: nowrap; 16 | } 17 | 18 | > tbody > tr > td { 19 | padding: 0 3rem $margin-y 0; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components/ui/formLayout/formLayout.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./formLayout.scss"; 4 | 5 | /** 6 | * 表示一个表单布局。 7 | */ 8 | export default class FormLayout extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/formLayout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./formLayout.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/highligher/highligher.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-syntaxhighligher { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/highligher/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./highligher.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/htmlEditor/htmlEditor.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 |
-------------------------------------------------------------------------------- /components/ui/htmlEditor/htmlEditor.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-htmleditor { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/htmlEditor/htmlEditor.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./htmlEditor.scss"; 3 | 4 | /** 5 | * 表示一个HTML编辑器。 6 | */ 7 | export class HtmlEditor extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default HtmlEditor; 20 | -------------------------------------------------------------------------------- /components/ui/htmlEditor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./htmlEditor.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/imageEditor/imageEditor.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 图片编辑器 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/ui/imageEditor/imageEditor.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-imageeditor { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/imageEditor/imageEditor.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./imageEditor.scss"; 3 | 4 | /** 5 | * 表示一个图片编辑器。 6 | */ 7 | export class ImageEditor extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default ImageEditor; 20 | -------------------------------------------------------------------------------- /components/ui/imageEditor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./imageEditor.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/imageViewer/imageViewer.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 |
8 | 9 | 10 | 11 | 12 | 13 |
-------------------------------------------------------------------------------- /components/ui/imageViewer/imageViewer.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-imageviewer { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/imageViewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./imageViewer.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./input.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/inputGroup/inputGroup.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./inputGroup.scss"; 3 | 4 | /** 5 | * 表示一个输入框组。 6 | */ 7 | export class InputGroup extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default InputGroup; 20 | -------------------------------------------------------------------------------- /components/ui/inputGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./inputGroup.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/listBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./listBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/listView/listView.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 列表视图 8 | 列表视图 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import ListView from "ui/listView"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/ui/listView/listView.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-listview { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/listView/listView.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./listView.scss"; 4 | 5 | /** 6 | * 表示一个列表视图。 7 | */ 8 | export default class ListView extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/listView/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./listView.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/markdownEditor/markdownEditor.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # Markdown编辑器 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/ui/markdownEditor/markdownEditor.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-markdowneditor { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/markdownEditor/markdownEditor.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./markdownEditor.scss"; 3 | 4 | /** 5 | * 表示一个Markdown编辑器。 6 | */ 7 | export class MarkdownEditor extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default MarkdownEditor; 20 | -------------------------------------------------------------------------------- /components/ui/markdownEditor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./markdownEditor.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./menu.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/menuButtton/menuButtton.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/menuButtton/menuButtton.scss -------------------------------------------------------------------------------- /components/ui/menuButtton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./menuButtton.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/messageBox/messageBox.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-messagebox { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/messageBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./messageBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/multiListBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./multiListBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/navMenu/images/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/ui/navMenu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./navMenu.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/navTab/navTab.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 导航标签页 8 | 9 | ```jsx demo 10 | import { VNode, render } from "ui/control"; 11 | import NavTab from "ui/navTab"; 12 | 13 | render( 14 | __root__, 15 |
16 | 17 | 18 |
19 | ); 20 | ``` -------------------------------------------------------------------------------- /components/ui/navTab/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./navTab.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/navTree/navTree.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * $author xuld$vip.qq.com 3 | */ 4 | 5 | @import "configs"; 6 | 7 | .x-tree { 8 | margin: 0; 9 | padding: 0; 10 | 11 | li { 12 | list-style: none; 13 | .text-overflow(ellipsis); 14 | width: 100%; 15 | } 16 | 17 | ul { 18 | margin: 0; 19 | padding-left: 2em; 20 | } 21 | } 22 | 23 | .x-tree-selected > a{ 24 | color: #e9985e; 25 | font-weight: bold; 26 | } 27 | -------------------------------------------------------------------------------- /components/ui/navTree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./navTree.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/notification/notification.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 通知框 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/ui/notification/notification.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-notification { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/notification/notification.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./notification.scss"; 3 | 4 | /** 5 | * 表示一个通知框。 6 | */ 7 | export class Notification extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default Notification; 20 | -------------------------------------------------------------------------------- /components/ui/notification/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./notification.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/numericUpDown/numericUpDown.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-numericupdown { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/numericUpDown/old/numericUpDown.ts: -------------------------------------------------------------------------------- 1 | // #todo 2 | 3 | /** 4 | * @author xuld@vip.qq.com 5 | */ 6 | 7 | 8 | typeof include === "function" && include("ui/suggest/updown.js"); 9 | 10 | var NumericUpDown = UpDown.extend({ 11 | 12 | step: 1, 13 | 14 | onUpDown: function (delta) { 15 | this.elem.querySelector('input').value = (+this.elem.querySelector('input').value || 0) + delta * this.step; 16 | } 17 | 18 | }); -------------------------------------------------------------------------------- /components/ui/numericUpDown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./numericUpDown.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/pagination/old/pager.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileOverview 页码 3 | * @author xuld 4 | */ 5 | import * as dom from "dom"; 6 | import Control from "control"; 7 | import "./pager.less"; 8 | 9 | /** 10 | * 表示一个页码。 11 | */ 12 | export default class Pager extends Control { 13 | 14 | /** 15 | * 获取当前控件的模板。 16 | */ 17 | protected tpl = `
`; 18 | 19 | /** 20 | * 当被子类重写时，负责初始化当前控件。 21 | */ 22 | protected init() { 23 | 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /components/ui/pagination/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./pagination.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/palette/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./palette.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/palette/palette.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 调色板 8 | 调色板 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import Palette from "ui/palette"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/ui/palette/palette.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-palette { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/palette/palette.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./palette.scss"; 4 | 5 | /** 6 | * 表示一个调色板。 7 | */ 8 | export default class Palette extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/panel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./panel.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./picker.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/popup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./popup.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/popup/popup.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-popup { 4 | position: fixed; 5 | z-index: $z-index-popup; 6 | background-color: $background-color-light; 7 | box-shadow: 0 5px 10px rgba(0, 0, 0, .2); 8 | } 9 | -------------------------------------------------------------------------------- /components/ui/progressBar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./progressBar.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/progressBar/progressBar.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./progressBar.scss"; 3 | 4 | /** 5 | * 表示一个进度条。 6 | */ 7 | export class ProgressBar extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default ProgressBar; 20 | -------------------------------------------------------------------------------- /components/ui/progressCircle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./progressCircle.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/progressCircle/progressCircle.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 进度圈 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/ui/progressCircle/progressCircle.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-progresscircle { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/progressCircle/progressCircle.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./progressCircle.scss"; 3 | 4 | /** 5 | * 表示一个进度圈。 6 | */ 7 | export class ProgressCircle extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default ProgressCircle; 20 | -------------------------------------------------------------------------------- /components/ui/radioButton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./radioButton.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/radioButton/radioButton.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/radioButton/radioButton.scss -------------------------------------------------------------------------------- /components/ui/radioButton/radioButton.tsx: -------------------------------------------------------------------------------- 1 | import { VNode, bind } from "ui/control"; 2 | import { CheckBoxBase } from "ui/checkBox"; 3 | 4 | /** 5 | * 表示一个单选按钮。 6 | */ 7 | export default class RadioButton extends CheckBoxBase { 8 | 9 | protected render() { 10 | return ; 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /components/ui/radioButtonGroup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./radioButtonGroup.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/radioButtonGroup/radioButtonGroup.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 单选按钮组 8 | 9 | ```tsx demo 10 | import { VNode, render } from "ui/control"; 11 | import RadioButton from "ui/radioButton"; 12 | import RadioButtonGroup from "ui/radioButtonGroup"; 13 | 14 | render( 15 | __root__, 16 | 17 | 好 18 | 不好 19 | 20 | ); 21 | ``` 22 | -------------------------------------------------------------------------------- /components/ui/radioButtonGroup/radioButtonGroup.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-radiobuttongroup { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/richTextBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./richTextBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/richTextBox/richTextBox.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 富文本编辑器 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/ui/richTextBox/richTextBox.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-richtextbox { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/richTextBox/richTextBox.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./richTextBox.scss"; 3 | 4 | /** 5 | * 表示一个富文本编辑器。 6 | */ 7 | export class RichTextBox extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default RichTextBox; 20 | -------------------------------------------------------------------------------- /components/ui/safeLink/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./safeLink.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/safeLink/safeLink.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 |
8 | 9 |
10 | 11 |
[继续访问](javascript:;) [取消](javascript:;)
12 | 13 |
14 | 15 |
该链接已超出本站范围，可能有一定风险。 原网址为：http://tech.aaaaaa163.com/...0915
16 | 17 |
18 | 19 |
20 | 21 |
-------------------------------------------------------------------------------- /components/ui/safeLink/safeLink.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-safelink { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/scrollToTop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./scrollToTop.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/scrollToTop/scrollToTop.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 滚到顶部 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | > 往下滚， 然后看右下角 :) 15 | 16 | -------------------------------------------------------------------------------- /components/ui/searchBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./searchBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/searchBox/searchBox.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/searchBox/searchBox.scss -------------------------------------------------------------------------------- /components/ui/searchBox/searchBox.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./searchTextBox.scss"; 3 | 4 | /** 5 | * 表示一个搜索框。 6 | */ 7 | export class SearchTextBox extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default SearchTextBox; 20 | -------------------------------------------------------------------------------- /components/ui/searchBox/searchTextBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./searchTextBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/searchBox/searchTextBox/searchTextBox (2).md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/ui/searchBox/searchTextBox/searchTextBox.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./searchTextBox.scss"; 3 | 4 | /** 5 | * 表示一个搜索框。 6 | */ 7 | export class SearchTextBox extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default SearchTextBox; 20 | -------------------------------------------------------------------------------- /components/ui/select/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./select.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/select/select.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 选择框 8 | 9 | ```jsx demo 10 | import { VNode, render } from "ui/control"; 11 | import Picker from "ui/picker"; 12 | import { ListItem } from "ui/listBox"; 13 | import Select from "ui/select"; 14 | 15 | a = render( 16 | __root__, 17 | 23 | ); 24 | ``` -------------------------------------------------------------------------------- /components/ui/select/select.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-select { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/shareTo/old/shareTo.less: -------------------------------------------------------------------------------- 1 | /** 2 | * $author 3 | */ 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /components/ui/shareTo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./shareTo.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/shareTo/shareTo.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 分享到 8 | 分享到 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import ShareTo from "ui/shareTo"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/ui/shareTo/shareTo.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-shareto { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/shareTo/shareTo.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./shareTo.scss"; 4 | 5 | /** 6 | * 表示一个分享到。 7 | */ 8 | export default class ShareTo extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/slider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./slider.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/splitButton/old/splitButton.less: -------------------------------------------------------------------------------- 1 | 2 | @import "configs"; 3 | 4 | .x-splitbutton .x-button:last-child { 5 | padding-left: $padding-width; 6 | padding-right: $padding-width; 7 | } 8 | -------------------------------------------------------------------------------- /components/ui/splitButton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./splitButton.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/splitButton/splitButton.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-splitbutton .x-button:last-child { 4 | padding-left: $spacer; 5 | padding-right: $spacer; 6 | } 7 | -------------------------------------------------------------------------------- /components/ui/splitter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./splitter.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/splitter/splitter.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 分割器 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 |
15 | 16 | 17 | 18 |
-------------------------------------------------------------------------------- /components/ui/splitter/splitter.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./splitter.scss"; 3 | 4 | /** 5 | * 表示一个分割器。 6 | */ 7 | export class Splitter extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default Splitter; 20 | -------------------------------------------------------------------------------- /components/ui/starRating/images/icon-starrating-big (2).gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/starRating/images/icon-starrating-big (2).gif -------------------------------------------------------------------------------- /components/ui/starRating/images/icon-starrating-big.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/starRating/images/icon-starrating-big.gif -------------------------------------------------------------------------------- /components/ui/starRating/images/star (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/starRating/images/star (2).png -------------------------------------------------------------------------------- /components/ui/starRating/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ui/starRating/images/star.png -------------------------------------------------------------------------------- /components/ui/starRating/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./starRating.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/starRating/starRating.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./starRating.scss"; 3 | 4 | /** 5 | * 表示一个星级评分。 6 | */ 7 | export class StarRating extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default StarRating; 20 | -------------------------------------------------------------------------------- /components/ui/suggest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./suggest.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/suggest/suggest.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 提示框 8 | 9 | ```jsx demo 10 | import { VNode, render } from "ui/control"; 11 | import Picker from "ui/picker"; 12 | import { ListItem } from "ui/listBox"; 13 | import Suggest from "ui/suggest"; 14 | 15 | a = render( 16 | __root__, 17 | 18 | 你好 19 | 你好啊 20 | 哈 21 | 22 | ); 23 | ``` -------------------------------------------------------------------------------- /components/ui/suggest/suggest.scss: -------------------------------------------------------------------------------- 1 | @import "typo/configs"; 2 | 3 | .x-suggest { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/tabControl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./tabControl.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/tabControl/tabControl.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./tabControl.scss"; 3 | 4 | /** 5 | * 表示一个选项卡控件。 6 | */ 7 | export class TabControl extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default TabControl; 20 | -------------------------------------------------------------------------------- /components/ui/tagChooser/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./tagChooser.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/tagChooser/tagChooser.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 标签选择器 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | @doc tagChooser.ts 15 | 16 | @demo 17 | @import ../input/textBox.css 18 | 19 | 20 | 选项1 21 | 选项2 22 | 选项3 23 | 24 | -------------------------------------------------------------------------------- /components/ui/tagChooser/tagChooser.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "configs"; 3 | 4 | .x-tagchooser a { 5 | display: inline-block; 6 | padding: 3px 8px; 7 | text-decoration: none; 8 | color: $text-color-link; 9 | border-radius: $border-radius; 10 | 11 | &:before { 12 | content: '✚ '; 13 | } 14 | } 15 | 16 | a.x-tagchooser-selected, .x-tagchooser a:hover { 17 | background-color: $selected-background-color; 18 | color: $selected-text-color; 19 | text-decoration: none; 20 | } 21 | -------------------------------------------------------------------------------- /components/ui/textArea/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./textArea.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/textArea/textArea.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 文本域 8 | 文本域 9 | 10 | ## 基本用法 11 | ```tsx demo 12 | import { VNode, render } from "ui/control"; 13 | import TextArea from "ui/textArea"; 14 | 15 | render( 16 | __root__, 17 | 18 | ); 19 | ``` -------------------------------------------------------------------------------- /components/ui/textArea/textArea.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import TextBox from "ui/textBox"; 4 | 5 | /** 6 | * 表示一个文本域。 7 | */ 8 | export default class TextArea extends TextBox { 9 | 10 | protected render() { 11 | return ; 12 | } 13 | 14 | /** 15 | * 文本的行数。 16 | */ 17 | @bind("@input", "rows") rows: number; 18 | 19 | } 20 | -------------------------------------------------------------------------------- /components/ui/textBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./textBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/timePicker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./timePicker.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/timePicker/timePicker.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 时间选择器 8 | 时间选择器 9 | 10 | ## 基本用法 11 | 12 | ```jsx demo 13 | import { VNode, render } from "ui/control"; 14 | import TimePicker from "ui/timePicker"; 15 | 16 | render( 17 | __root__, 18 | 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/ui/timePicker/timePicker.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-timepicker { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/timePicker/timePicker.tsx: -------------------------------------------------------------------------------- 1 | import * as dom from "ux/dom"; 2 | import Control, { VNode, bind } from "ui/control"; 3 | import "./timePicker.scss"; 4 | 5 | /** 6 | * 表示一个时间选择器。 7 | */ 8 | export default class TimePicker extends Control { 9 | 10 | protected render() { 11 | return
; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /components/ui/tipBox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./tipBox.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/toast/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./toast.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/toast/toast.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 通知 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/ui/toast/toast.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-toast { 4 | position: fixed; 5 | right: $margin-x; 6 | top: $margin-x; 7 | max-width: 25rem; 8 | 9 | &.x-tooltip { 10 | max-width: 15rem; 11 | padding: $padding-y-large $padding-x-large; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /components/ui/toast/toast.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./toast.scss"; 3 | 4 | /** 5 | * 表示一个通知。 6 | */ 7 | export class Toast extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default Toast; 20 | -------------------------------------------------------------------------------- /components/ui/toolTip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./toolTip.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/toolTip/toolTip.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-tooltip { 4 | position: fixed; 5 | z-index: $z-index-popup; 6 | max-width: $popup-max-width; 7 | border: 1px solid $text-color-dark; 8 | border-radius: $border-radius-small; 9 | padding: $padding-y-small $spacer-small; 10 | background-color: $text-color-dark; 11 | color: $selected-text-color; 12 | font-size: $font-size-small; 13 | line-height: $line-height-small; 14 | word-break: break-all; 15 | } 16 | -------------------------------------------------------------------------------- /components/ui/toolTip/toolTip.tsx: -------------------------------------------------------------------------------- 1 | import Control, { VNode, bind, NodeLike } from "ui/control"; 2 | import Popup from "ui/popup"; 3 | import "./toolTip.scss"; 4 | 5 | /** 6 | * 表示一个工具提示。 7 | */ 8 | export default class ToolTip extends Popup { 9 | 10 | protected render() { 11 | return ; 12 | } 13 | 14 | } 15 | 16 | ToolTip.prototype.event = "hover"; 17 | ToolTip.prototype.align = "top"; 18 | -------------------------------------------------------------------------------- /components/ui/treeView/old/tree.md: -------------------------------------------------------------------------------- 1 | ## 基本用法 2 | 3 | -------------------------------------------------------------------------------- /components/ui/treeView/old/tree.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * $author xuld$vip.qq.com 3 | */ 4 | 5 | @import "configs"; 6 | 7 | .x-tree { 8 | margin: 0; 9 | padding: 0; 10 | 11 | li { 12 | list-style: none; 13 | .text-overflow(ellipsis); 14 | width: 100%; 15 | } 16 | 17 | ul { 18 | margin: 0; 19 | padding-left: 2em; 20 | } 21 | } 22 | 23 | .x-tree-selected > a{ 24 | color: #e9985e; 25 | font-weight: bold; 26 | } 27 | -------------------------------------------------------------------------------- /components/ui/treeView/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./treeView.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/treeView/treeView.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # 树视图 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/ui/treeView/treeView.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-treeview { 4 | padding: 0; 5 | overflow: auto; 6 | 7 | .x-icon { 8 | transition: transform $duration; 9 | } 10 | 11 | a { 12 | color: $text-color; 13 | } 14 | 15 | li { 16 | list-style: none; 17 | text-overflow: ellipsis; 18 | width: 100%; 19 | } 20 | 21 | ul { 22 | padding-left: 1rem; 23 | overflow: hidden; 24 | } 25 | 26 | &-active > a { 27 | color: $primary-color; 28 | } 29 | 30 | &-collapsed .x-icon { 31 | transform: rotate(-90deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/ui/treeView/treeView.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./treeView.scss"; 3 | 4 | /** 5 | * 表示一个树视图。 6 | */ 7 | export class TreeView extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default TreeView; 20 | -------------------------------------------------------------------------------- /components/ui/ubbEditor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./ubbEditor.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/ubbEditor/ubbEditor.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | import: 5 | - typo/reset 6 | --- 7 | # Ubb编辑器 8 | 9 | ## 基本用法 10 | 11 | ```htm 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/ui/ubbEditor/ubbEditor.scss: -------------------------------------------------------------------------------- 1 | @import "configs"; 2 | 3 | .x-ubbeditor { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /components/ui/ubbEditor/ubbEditor.tsx: -------------------------------------------------------------------------------- 1 | import { Control, VNode, bind } from "control"; 2 | import "./ubbEditor.scss"; 3 | 4 | /** 5 | * 表示一个Ubb编辑器。 6 | */ 7 | export class UbbEditor extends Control { 8 | 9 | /** 10 | * 当被子类重写时负责渲染当前控件。 11 | * @return 返回一个虚拟节点。 12 | */ 13 | protected render() { 14 | return
; 15 | } 16 | 17 | } 18 | 19 | export default UbbEditor; 20 | -------------------------------------------------------------------------------- /components/ui/upDown/old/upDown-traditional.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | > 传统风格的文本框按钮显示在文本框右边，不适合触屏操作。建议改用 [上下按钮文本框(upDown)](upDown.html) 组件。 -------------------------------------------------------------------------------- /components/ui/upDown/old/upDown.less: -------------------------------------------------------------------------------- 1 | 2 | @import "configs"; 3 | 4 | .x-updown { 5 | .x-textbox { 6 | width: $font-size * 4; 7 | text-align: center; 8 | } 9 | } -------------------------------------------------------------------------------- /components/ui/upDown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./upDown.tsx" 3 | } -------------------------------------------------------------------------------- /components/ui/upDown/upDown-tradional.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * $author xuld$vip.qq.com 3 | */ 4 | 5 | @import "configs"; 6 | 7 | .x-updown { 8 | 9 | .x-updown-up, .x-updown-down { 10 | padding-top: 0; 11 | padding-bottom: 0; 12 | height: ($line-height + $padding-height * 2) / 2 + 1px; 13 | line-height: ($line-height + $padding-height * 2) / 2 + 4px; 14 | } 15 | 16 | .x-updown-down { 17 | top: auto; 18 | bottom: 0; 19 | line-height: ($line-height + $padding-height * 2) / 2 - 4px; 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /components/ui/upDown/upDown.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "configs"; 3 | 4 | .x-updown { 5 | .x-textbox { 6 | width: $font-size * 4; 7 | text-align: center; 8 | } 9 | } -------------------------------------------------------------------------------- /components/util/array/array.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.2 3 | author: xuld 4 | --- 5 | # 数组扩展 6 | 提供 JavaScript 内置对象 Array 的扩展接口。 7 | -------------------------------------------------------------------------------- /components/util/array/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./array.ts" 3 | } -------------------------------------------------------------------------------- /components/util/asyncQueue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./asyncQueue.ts" 3 | } -------------------------------------------------------------------------------- /components/util/base64/base64-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as base64 from "./base64"; 3 | 4 | export function encodeBase64Test() { 5 | assert.strictEqual(base64.encodeBase64("中文"), "5Lit5paH"); 6 | } 7 | 8 | export function decodeBase64Test() { 9 | assert.strictEqual(base64.decodeBase64("5Lit5paH"), "中文"); 10 | } 11 | -------------------------------------------------------------------------------- /components/util/base64/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./base64.ts" 3 | } -------------------------------------------------------------------------------- /components/util/bigInteger/bigInteger-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as bigInteger from "./bigInteger"; 3 | 4 | export function addTest() { 5 | assert.strictEqual(bigInteger.add("1", "2"), "3"); 6 | } 7 | 8 | export function mulTest() { 9 | assert.strictEqual(bigInteger.mul("1", "2"), "2"); 10 | } 11 | -------------------------------------------------------------------------------- /components/util/bigInteger/bigInteger.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 大整数 6 | 提供大正整数确加和乘的方法。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | 13 | 14 | ``` 15 | 16 | > 完整的大数计算见[[util/bigNumber]]。 -------------------------------------------------------------------------------- /components/util/bigInteger/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./bigInteger.ts" 3 | } -------------------------------------------------------------------------------- /components/util/bigNumber/package.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /components/util/boolean/boolean.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.2 3 | author: xuld 4 | --- 5 | # 布尔扩展 6 | 提供 JavaScript 内置对象 Boolean 的扩展接口。 7 | -------------------------------------------------------------------------------- /components/util/boolean/boolean.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 将指定的字符串转为布尔型。 3 | * @param value 要转换的字符串。 4 | * @return 如果字符串为空或 `false`/`0`/`off`/`no` 则返回 false，否则返回 true。 5 | * @example parse("true") // true 6 | */ 7 | export function parse(value: string | null | undefined) { 8 | return !!value && !/^(false|0|off|no)$/.test(value); 9 | } 10 | -------------------------------------------------------------------------------- /components/util/boolean/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./boolean.ts" 3 | } -------------------------------------------------------------------------------- /components/util/bresenham/bresenham-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as bresenham from "./bresenham"; 3 | 4 | export function bresenhamTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/util/bresenham/bresenham.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 贝塞尔曲线 6 | 绘制贝塞尔曲线算法 7 | -------------------------------------------------------------------------------- /components/util/bresenham/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./bresenham.ts" 3 | } -------------------------------------------------------------------------------- /components/util/check/check.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | keyword: 5 | - 验证 6 | - 判断 7 | - validate 8 | --- 9 | # 数据校验 10 | 检验用户输入的数据是否合法。 11 | -------------------------------------------------------------------------------- /components/util/check/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./check.ts" 3 | } -------------------------------------------------------------------------------- /components/util/chineseId/chineseId-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import parseChineseId from "./chineseId"; 3 | 4 | export function parseChineseIdTest() { 5 | assert.deepEqual(parseChineseId("152500198909267865"), { 6 | birthday: new Date("Tue Sep 26 1989 00:00:00 GMT+0800"), 7 | province: "内蒙古", 8 | sex: false, 9 | valid: true 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /components/util/chineseId/chineseId.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 中国身份证号处理 6 | 中国身份证号处理 7 | 8 | ```html demo hide doc 9 | 10 | 11 |
12 | ``` -------------------------------------------------------------------------------- /components/util/chineseId/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./chineseId.ts" 3 | } -------------------------------------------------------------------------------- /components/util/class/class-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as classes from "./class"; 3 | 4 | export function extendTest() { 5 | var clazz = classes.Class.extend({ 6 | fontSize: 1 7 | }); 8 | assert.strictEqual(new clazz().fontSize, 1); 9 | assert.ok(clazz.extend); 10 | } 11 | -------------------------------------------------------------------------------- /components/util/class/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./class.ts" 3 | } -------------------------------------------------------------------------------- /components/util/color/color.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 颜色处理 6 | 颜色处理 7 | 8 | -------------------------------------------------------------------------------- /components/util/color/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./color.ts" 3 | } -------------------------------------------------------------------------------- /components/util/currency/currency.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 货币处理 6 | 提供货币精确运算函数。 7 | 8 | > ##### (!)注意 9 | > 货币组件支持计算的最大货币为：10,000,000,000,000.00，如需支持更大范围，请使用[[util/bignumber]]组件。 10 | -------------------------------------------------------------------------------- /components/util/currency/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./currency.ts" 3 | } -------------------------------------------------------------------------------- /components/util/dataTable/dataTable-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as dataTable from "./dataTable"; 3 | 4 | export function dataTableTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/util/dataTable/dataTable.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 数据表 6 | 数据表 7 | ## 数据表 8 | 9 | 
        // 创建包含两列的表格。
10 |         var dt = new DataTable({
11 |             id: { type: 'number'  },
12 |             name: { type: 'string'  }
13 |         });
14 |         // 为表格添加两行数据。
15 |         dt.add({ id: 1, name: "a" });
16 |         dt.add({ id: 3, name: "b" });
17 | 
18 |         // 为表格基于某列排序。
19 |         dt.sort("name");
20 | 
21 |         // 获取指定行的内容。
22 |         alert(dt[0].id);
23 |
24 | -------------------------------------------------------------------------------- /components/util/dataTable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./dataTable.ts" 3 | } -------------------------------------------------------------------------------- /components/util/date/date.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 日期扩展 6 | 提供 JavaScript 内置对象 Date 的扩展接口。 7 | -------------------------------------------------------------------------------- /components/util/date/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./date.ts" 3 | } -------------------------------------------------------------------------------- /components/util/delegate/delegate-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as delegate from "./delegate"; 3 | 4 | export function delegateTest() { 5 | let i = 0; 6 | const del = new delegate.Delegate(() => i++); 7 | del.add(() => i++); 8 | del.remove(del.funcs[0]); 9 | del(); 10 | assert.strictEqual(i, 1); 11 | } 12 | -------------------------------------------------------------------------------- /components/util/delegate/delegate.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 委托 6 | 允许合并、解除多个函数。 7 | 8 | 委托即函数数组。执行委托即执行数组中的每个函数。函数数组可以动态增删函数，以此增加程序的灵活性。 9 | 10 | ```js 11 | document.onclick = new Delegate(); // 创建新的委托。 12 | document.onclick.add(function() { alert(1) }); // 添加委托函数。 13 | document.onclick.add(function() { alert(2) }); // 添加委托函数。 14 | ``` 15 | -------------------------------------------------------------------------------- /components/util/delegate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./delegate.ts" 3 | } -------------------------------------------------------------------------------- /components/util/des/des-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import des from "./des"; 3 | 4 | export function desTest() { 5 | assert.strictEqual(des("a", "1"), "\u0082\u000e\u0056\u00cc\u007c\u0045\u0059\u00a4"); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/des/des.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # DES 加密 6 | DES 加密和解密实现。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | 13 | ``` -------------------------------------------------------------------------------- /components/util/des/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./des.ts" 3 | } -------------------------------------------------------------------------------- /components/util/encryptString/encryptString-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as encryptString from "./encryptString"; 3 | 4 | export function dencryptStringTest() { 5 | assert.strictEqual(encryptString.dencryptString("abc", 123), "cce"); 6 | } 7 | 8 | export function encryptStringTest() { 9 | assert.strictEqual(encryptString.encryptString("abc", 123), "``e"); 10 | } 11 | -------------------------------------------------------------------------------- /components/util/encryptString/encryptString.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 简单字符串加密 6 | 通过位移实现的字符串加密和解密实现。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | ``` -------------------------------------------------------------------------------- /components/util/encryptString/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./encryptString.ts" 3 | } -------------------------------------------------------------------------------- /components/util/enum/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./enum.ts" 3 | } -------------------------------------------------------------------------------- /components/util/events/events-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import EventEmitter from "./events"; 3 | 4 | export function eventEmitterTest() { 5 | const ee = new EventEmitter(); 6 | const func = (arg1: any, arg2: any) => { 7 | assert.equal(arg1, "arg1"); 8 | assert.equal(arg2, "arg2"); 9 | }; 10 | ee.on("foo", func); 11 | ee.emit("foo", "arg1", "arg2"); 12 | ee.off("foo", func); 13 | ee.emit("foo", "arg1-error", "arg2-error"); 14 | } 15 | -------------------------------------------------------------------------------- /components/util/events/events.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 事件 6 | 提供事件管理对象。 7 | 8 | 事件是一种设计模式。 9 | 程序可以通过触发事件的方式通知外部。 10 | 对此通知感兴趣的对象可以订阅事件并执行相应的回调函数。 11 | 通过事件的设计模式可以将触发事件和实际处理事件的逻辑完全分开，提升代码的可重用性。 12 | 13 | > ##### 另参考 14 | > [Node.js: Event](https://nodejs.org/api/events.html) -------------------------------------------------------------------------------- /components/util/events/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./events.ts" 3 | } -------------------------------------------------------------------------------- /components/util/formatCurrencyToChinese/formatCurrencyToChinese-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import formatCurrencyToChinese from "./formatCurrencyToChinese"; 3 | 4 | export function formatCurrencyToChineseTest() { 5 | assert.strictEqual(formatCurrencyToChinese(10000000), "壹仟万元整"); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/formatCurrencyToChinese/formatCurrencyToChinese.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 中文大写金额 6 | 转换数字为中文大写金额。 7 | 8 | ## 货币运算 9 | ```html demo hide doc 10 | 11 | 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /components/util/formatCurrencyToChinese/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./formatCurrencyToChinese.ts" 3 | } -------------------------------------------------------------------------------- /components/util/formatTimeToChinese/formatTimeToChinese-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import formatTimeToChinese from "./formatTimeToChinese"; 3 | 4 | export function formatTimeToChineseTest() { 5 | assert.strictEqual(formatTimeToChinese(new Date()), "刚刚"); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/formatTimeToChinese/formatTimeToChinese.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 格式化时间 6 | 格式化时间为“N 秒前”格式。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /components/util/formatTimeToChinese/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./formatTimeToChinese.ts" 3 | } -------------------------------------------------------------------------------- /components/util/function/function.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 函数扩展 6 | 提供 JavaScript 内置对象 Function 的扩展接口。 7 | -------------------------------------------------------------------------------- /components/util/function/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./function.ts" 3 | } -------------------------------------------------------------------------------- /components/util/gb2312/gb2312-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as gb2312 from "./gb2312"; 3 | 4 | export function encodeGB2312Test() { 5 | assert.strictEqual(gb2312.encodeGB2312("你"), "%C4%E3"); 6 | } 7 | 8 | export function decodeGB2312Test() { 9 | assert.strictEqual(gb2312.decodeGB2312("%C4%E3"), "你"); 10 | } 11 | -------------------------------------------------------------------------------- /components/util/gb2312/gb2312.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # GB2312 编码 6 | 提供 %##%## 格式的中文字符编码和解码实现。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | ``` -------------------------------------------------------------------------------- /components/util/gb2312/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./gb2312.ts" 3 | } -------------------------------------------------------------------------------- /components/util/html/html.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # HTML 编码 6 | HTML 特殊字符编码 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | 13 | ``` -------------------------------------------------------------------------------- /components/util/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./html.ts" 3 | } -------------------------------------------------------------------------------- /components/util/jjencode/jjencode-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as jjencode from "./jjencode"; 3 | 4 | export function jjencodeTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/util/jjencode/jjencode.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 编码代码 6 | 编码代码（jjencode） 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | ``` -------------------------------------------------------------------------------- /components/util/jjencode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./jjencode.ts" 3 | } -------------------------------------------------------------------------------- /components/util/markdown/markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # Markdown 6 | 编译 Markdown 为 HTML 7 | 8 | ```html demo hide doc 9 | 10 | 11 |
12 | ``` 13 | -------------------------------------------------------------------------------- /components/util/markdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./markdown.ts" 3 | } -------------------------------------------------------------------------------- /components/util/md5/md5-more.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # MD5 加密扩展 6 | MD5 加密算法扩展。 7 | 8 | ```html demo doc hide 9 | 10 | 11 | 12 | 13 | ``` -------------------------------------------------------------------------------- /components/util/md5/md5-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import md5 from "./md5"; 3 | 4 | export function md5Test() { 5 | assert.strictEqual(md5("a"), "0cc175b9c0f1b6a831c399e269772661"); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/md5/md5.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # MD5 加密 6 | MD5 加密算法实现。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | ``` 12 | 13 | > 更多算法扩展见 [[util/md5/md5-more]]。 -------------------------------------------------------------------------------- /components/util/md5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./md5.ts" 3 | } -------------------------------------------------------------------------------- /components/util/namespace/namespace-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import namespace from "./namespace"; 3 | 4 | export function namespaceTest() { 5 | namespace("MyNameSpace.SubNamespace"); 6 | assert.ok((window as any).MyNameSpace.SubNamespace); 7 | (window as any).MyNameSpace.SubNamespace = 1; 8 | namespace("MyNameSpace.SubNamespace"); 9 | assert.strictEqual((window as any).MyNameSpace.SubNamespace, 1); 10 | } 11 | -------------------------------------------------------------------------------- /components/util/namespace/namespace.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 命名空间 6 | 定义命名空间避免组件冲突。 7 | 8 | ```js 9 | var TealUI = namespace("TealUI"); 10 | ``` -------------------------------------------------------------------------------- /components/util/namespace/namespace.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 定义命名空间。 3 | * @param ns 要创建的命名空间。 4 | * @return 如果命名空间已存在则返回之前的命名空间，否则返回新创建的命名空间。 5 | * @example namespace("MyNameSpace.SubNamespace") 6 | */ 7 | export default function namespace(ns: string) { 8 | const parts = ns.split("."); 9 | let current = (function (this: any) { return this; })(); 10 | for (const part of parts) { 11 | current = (current as any)[part] || ((current as any)[part] = {}); 12 | } 13 | return current; 14 | } 15 | -------------------------------------------------------------------------------- /components/util/namespace/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./namespace.ts" 3 | } -------------------------------------------------------------------------------- /components/util/number/number.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 数字扩展 6 | 提供 JavaScript 内置对象 Number 的扩展接口。 7 | -------------------------------------------------------------------------------- /components/util/number/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./number.ts" 3 | } -------------------------------------------------------------------------------- /components/util/obfuscator/obfuscator.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 代码混淆 6 | JavaScript 代码混淆。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | ``` -------------------------------------------------------------------------------- /components/util/obfuscator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./obfuscator.ts" 3 | } -------------------------------------------------------------------------------- /components/util/object/object.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 对象扩展 6 | 提供 JavaScript 内置对象 Object 的扩展接口。 7 | -------------------------------------------------------------------------------- /components/util/object/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./object.ts" 3 | } -------------------------------------------------------------------------------- /components/util/password/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./password.ts" 3 | } -------------------------------------------------------------------------------- /components/util/password/password-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import checkPassword from "./password"; 3 | 4 | export function checkPasswordTest() { 5 | assert.strictEqual(checkPassword("123456"), -1); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/password/password.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 密码复杂度 6 | 计算密码复杂度。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | ``` -------------------------------------------------------------------------------- /components/util/path/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./path.ts" 3 | } -------------------------------------------------------------------------------- /components/util/path/path-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as path from "./path"; 3 | 4 | export function pathTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/util/path/path.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 路径处理 6 | 提供处理文件路径的工具函数。 7 | -------------------------------------------------------------------------------- /components/util/pinyin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./pinyin.ts" 3 | } -------------------------------------------------------------------------------- /components/util/pinyin/pinyin-gbk.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 汉字转拼音（繁体） 6 | 扩展更多字库 7 | 8 | ```html demo doc hide 9 | 10 | 11 | ``` 12 | -------------------------------------------------------------------------------- /components/util/pinyin/pinyin-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import pinyin from "./pinyin"; 3 | 4 | export function pinyinTest() { 5 | assert.deepEqual(pinyin("啊"), [["a"]]); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/qrcode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./qrcode.ts" 3 | } -------------------------------------------------------------------------------- /components/util/qrcode/qrcode-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as qrcode from "./qrcode"; 3 | 4 | export function qrcodeTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/util/qrcode/qrcode.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 二维码生成 6 | 二维码生成 7 | -------------------------------------------------------------------------------- /components/util/qrcode/qrcode.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 二维码生成。 3 | */ 4 | export default function qrcode() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/util/query/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./query.ts" 3 | } -------------------------------------------------------------------------------- /components/util/query/query.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 查询字符串 6 | 解析和格式化查询字符串（如：?a=1&b=2） 7 | -------------------------------------------------------------------------------- /components/util/queue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./queue.ts" 3 | } -------------------------------------------------------------------------------- /components/util/queue/queue.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 队列 6 | 实现队列数据结构。 7 | -------------------------------------------------------------------------------- /components/util/rect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./rect.ts" 3 | } -------------------------------------------------------------------------------- /components/util/rect/rect.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 矩形运算 6 | 提供图形计算相关函数。 -------------------------------------------------------------------------------- /components/util/regexp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./regexp.ts" 3 | } -------------------------------------------------------------------------------- /components/util/regexp/regexp-lib.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 常用正则表达式库 6 | -------------------------------------------------------------------------------- /components/util/regexp/regexp.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 正则表达式扩展 6 | 提供 JavaScript 内置对象 RegExp 的扩展接口。 7 | 8 | > ##### 另参考 9 | > - [[util/regexp/regexp-lib]] 10 | > - [XRegExp](http://xregexp.com/) 11 | -------------------------------------------------------------------------------- /components/util/searchPinYin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./searchPinYin.ts" 3 | } -------------------------------------------------------------------------------- /components/util/searchPinYin/searchPinYin-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as matchPinYin from "./searchPinYin"; 3 | 4 | export function matchPinYinTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/util/searchPinYin/searchPinYin.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 拼音模糊搜索 6 | 模糊搜索匹配项，支持拼音搜索。 7 | 8 | ```html demo hide doc 9 | 13 | 14 | 15 |
16 | ``` -------------------------------------------------------------------------------- /components/util/sha1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./sha1.ts" 3 | } -------------------------------------------------------------------------------- /components/util/sha1/sha1-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import sha1 from "./sha1"; 3 | 4 | export function sha1Test() { 5 | assert.strictEqual(sha1("abc"), "a9993e364706816aba3e25717850c26c9cd0d89d"); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/sha1/sha1.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # SHA-1 加密 6 | SHA-1 加密算法实现。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | ``` 12 | 13 | > 更完整的 SHA 加密算法请参考：[jsSHA](http://caligatio.github.io/jsSHA/)。 14 | -------------------------------------------------------------------------------- /components/util/shim/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./polyfill.ts" 3 | } -------------------------------------------------------------------------------- /components/util/sort/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./sort.ts" 3 | } -------------------------------------------------------------------------------- /components/util/sort/sort-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as sort from "./sort"; 3 | 4 | export function sortTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/util/sort/sort.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 排序算法 6 | 提供常用的排序算法实现。 7 | -------------------------------------------------------------------------------- /components/util/sqlike/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./sqlike.ts" 3 | } -------------------------------------------------------------------------------- /components/util/sqlike/sqlike.md: -------------------------------------------------------------------------------- 1 | # 仿 SQL 引擎 2 | 一个 JavaScript 的仿 SQL 引擎。 3 | 4 | > ##### 另参考 5 | > - [文档和演示](http://www.thomasfrank.se/SQLike/) 6 | > - [官网](http://www.thomasfrank.se/sqlike.html) 7 | -------------------------------------------------------------------------------- /components/util/string/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./string.ts" 3 | } -------------------------------------------------------------------------------- /components/util/string/string.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 字符串扩展 6 | 提供 JavaScript 内置对象 String 的扩展接口。 7 | -------------------------------------------------------------------------------- /components/util/tpl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./tpl.ts" 3 | } -------------------------------------------------------------------------------- /components/util/tpl/tpl-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import tpl from "./tpl"; 3 | 4 | export function tplTest() { 5 | assert.strictEqual(tpl("Hello <%= $.name %>!", { name: "world" }), "Hello world!"); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/tradionalChinese/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./tradionalChinese.ts" 3 | } -------------------------------------------------------------------------------- /components/util/tradionalChinese/tradionalChinese-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as tradionalChinese from "./tradionalChinese"; 3 | 4 | export function toSimpleChineseTest() { 5 | assert.equal(tradionalChinese.toSimpleChinese("簡体"), "简體"); 6 | } 7 | 8 | export function toTradionalChineseTest() { 9 | assert.equal(tradionalChinese.toTradionalChinese("简體"), "簡体"); 10 | } 11 | -------------------------------------------------------------------------------- /components/util/tradionalChinese/tradionalChinese.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 简繁体转换 6 | 简繁体中文转换。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | ``` 13 | 14 | > ##### (i)实现原理 15 | > 在源码中有一个繁简字检索表，函数会检索此表得到对应繁体或简体。 16 | -------------------------------------------------------------------------------- /components/util/tween/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./tween.ts" 3 | } -------------------------------------------------------------------------------- /components/util/tween/transitions.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 补间动画转换函数 6 | 提供常用的补间动画函数。 7 | -------------------------------------------------------------------------------- /components/util/tween/tween-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import Tween from "./tween"; 3 | 4 | export function tweenTest(done: Function) { 5 | const tween = new Tween(); 6 | let c = 0; 7 | tween.set = (e) => { c = e; }; 8 | tween.done = () => { 9 | assert.equal(c, 1); 10 | done(); 11 | }; 12 | tween.reset(); 13 | tween.start(); 14 | } 15 | -------------------------------------------------------------------------------- /components/util/url/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./url.ts" 3 | } -------------------------------------------------------------------------------- /components/util/url/url-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import Url from "./url"; 3 | 4 | export function urlTest() { 5 | assert.strictEqual(Url.format(Url.parse("http://tealui.com/index.html?from=parse")), "http://tealui.com/index.html?from=parse"); 6 | } 7 | -------------------------------------------------------------------------------- /components/util/url/url.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # URL 处理 6 | 提供解析和格式化 URL 的工具函数。 7 | 8 | > 本组件利用原生 JavaScript 解析地址。利用浏览器自带的 `` 标签实现解析见[[ux/url]]。 -------------------------------------------------------------------------------- /components/util/utf8/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./utf8.ts" 3 | } -------------------------------------------------------------------------------- /components/util/utf8/utf8-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as utf8 from "./utf8"; 3 | 4 | export function encodeUTF8Test() { 5 | assert.strictEqual(utf8.encodeUTF8("你"), "\\u4f60"); 6 | } 7 | 8 | export function decodeUTF8Test() { 9 | assert.strictEqual(utf8.decodeUTF8("\\u4f60"), "你"); 10 | } 11 | -------------------------------------------------------------------------------- /components/util/utf8/utf8.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # UTF-8 编码 6 | 提供 \u#### 格式的 Unicode 字符编码和解码实现。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | 12 | ``` -------------------------------------------------------------------------------- /components/util/xRegExp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./xRegExp.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/active/active.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 激活样式 6 | 快速切换当前选中的元素。 7 | 8 | ## 设计意图 9 | 项目中一般对输入框添加 `.active` 表示选中。 10 | 11 | 因此在标记为选中时需要： 12 | ```js 13 | removeClass(oldActive, "active"); 14 | addClass(newActive, "active"); 15 | ``` 16 | 17 | 使用 `setActive` 可以简化代码为： 18 | ```js 19 | setActive(items, "active", newActive); 20 | ``` 21 | 22 | 通过 `setActive` 可以快速实现如选项卡之类的效果。 23 | -------------------------------------------------------------------------------- /components/ux/active/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./active.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/addFavorite/addFavorite.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 添加到收藏夹 6 | 引导用户收藏当前网页。 7 | -------------------------------------------------------------------------------- /components/ux/addFavorite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./addFavorite.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/ajax/ajax-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import ajax from "./ajax"; 3 | 4 | export function ajaxTest(done: Function) { 5 | ajax({ 6 | type: "GET", 7 | url: "", 8 | data: null, 9 | success(data) { 10 | assert.ok(data); 11 | done(); 12 | } 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /components/ux/ajax/ajax.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # AJAX 6 | 发送请求。 7 | 8 | ```jsx 9 | ajax({ 10 | type: "GET", 11 | url: "", 12 | data: null, 13 | success(data) { 14 | console.log(data); 15 | } 16 | }); 17 | ``` 18 | -------------------------------------------------------------------------------- /components/ux/ajax/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./ajax.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/ajaxSubmit/ajaxSubmit.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # AJAX 提交 6 | 使用 AJAX 异步提交表单。 7 | -------------------------------------------------------------------------------- /components/ux/ajaxSubmit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./ajaxSubmit.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/animate/animate.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 动画 6 | 动画 7 | -------------------------------------------------------------------------------- /components/ux/animate/animate.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 动画。 3 | */ 4 | export default function animate() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/animate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./animate.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/animateText/animateText.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 文字特效 6 | 文字特效 7 | -------------------------------------------------------------------------------- /components/ux/animateText/animateText.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 文字特效。 3 | */ 4 | export default function animateText() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/animateText/old/animateText.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 你好啊 4 | 5 | 你好啊 6 | 7 |
8 | 9 | -------------------------------------------------------------------------------- /components/ux/animateText/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./animateText.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/at/at.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # @ 提示 6 | @ 提示 7 | -------------------------------------------------------------------------------- /components/ux/at/at.ts: -------------------------------------------------------------------------------- 1 | // #todo 2 | 3 | 4 | /** 5 | * @param {Object} options 绑定各个事件的处理器。 6 | */ 7 | Dom.prototype.at = function (options) { 8 | throw "此函数未完成"; 9 | }; 10 | -------------------------------------------------------------------------------- /components/ux/at/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./at.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/autoResize/autoResize.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 自动调整文本域大小 6 | 让文本域根据内容自动放大缩小。 7 | 8 | ```html demo {5} hide doc 9 | 10 | 15 | ``` -------------------------------------------------------------------------------- /components/ux/autoResize/autoResize.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 令文本域随输入内容自动调整高度。 3 | * @param elem 要处理的文本域节点。 4 | */ 5 | export default function autoResize(elem: HTMLElement) { 6 | function autoResize() { 7 | elem.style.height = 'auto'; 8 | elem.style.height = elem.scrollHeight + 'px'; 9 | } 10 | elem.style.overflow = "hidden"; 11 | elem.addEventListener("keydown", autoResize); 12 | elem.addEventListener("input", autoResize); 13 | elem.addEventListener("keyup", autoResize); 14 | autoResize(); 15 | } 16 | -------------------------------------------------------------------------------- /components/ux/autoResize/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./autoResize.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/autoScroll/autoScroll.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 自动滚屏 6 | 双击页面后自动滚屏 7 | -------------------------------------------------------------------------------- /components/ux/autoScroll/autoScroll.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 自动滚屏。 3 | */ 4 | export default function autoScroll() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/autoScroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./autoScroll.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/borderLayout/borderLayout.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 边框布局 6 | 边框布局 7 | -------------------------------------------------------------------------------- /components/ux/borderLayout/borderLayout.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 边框布局。 3 | */ 4 | export default function borderLayout() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/borderLayout/old/layoutEngine.md: -------------------------------------------------------------------------------- 1 | ## 基本用法 2 | 3 | 本组件是其它布局组件的基类。要查看本组件功能，请查看具体组件： 4 | 5 | * [边框布局(borderLayoutEngine)](borderLayoutEngine.html) 6 | * [表格布局(tableLayoutEngine)](tableLayoutEngine.html) 7 | 8 | ## 常用 API 9 | 10 | 
        var layoutEngine = new LayoutEngine(document.getElementById('container'));
11 |         layoutEngine.update();
12 |
-------------------------------------------------------------------------------- /components/ux/borderLayout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./borderLayout.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/clipboard/clipboard-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as clipboard from "./clipboard"; 3 | 4 | export function clipboardTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/clipboard/clipboard.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 剪贴板 6 | 剪贴板 7 | 提供和剪贴板的直接交互。 8 | 9 | 注意：最新浏览器由于安全限制，不允许使用此功能。这时，函数会提示用户手动操作。 10 | 11 | # 使用 Flash 处理剪贴板 12 | 基于 Flash　支持复制功能。 13 | 14 | 复制 15 | 16 | 我是需要复制的文本 17 | 18 | ZeroClipboard.init({ 19 | dom: document.getElementById("button1"), 20 | input: document.getElementById("textBox1"), 21 | }); 22 | -------------------------------------------------------------------------------- /components/ux/clipboard/clipboard.ts: -------------------------------------------------------------------------------- 1 | // #todo 2 | 3 | 4 | 5 | /** 6 | * 复制文本到系统剪贴板。 7 | * @param {String} content 要复制的内容。 8 | * @return {Boolean} 是否成功。 9 | * @example copyText("文本") 10 | */ 11 | function copyText(content) { 12 | // IE：目前只有 IE 支持此接口。 13 | if(window.clipboardData) { 14 | window.clipboardData.setData("Text", content); 15 | return true; 16 | } 17 | return false; 18 | } 19 | -------------------------------------------------------------------------------- /components/ux/clipboard/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./clipboard.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/clipboard/resources/ZeroClipboard.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Teal/TealUI/f27df2e60cb02bdb603eca80bc7c1d3b764d8150/components/ux/clipboard/resources/ZeroClipboard.swf -------------------------------------------------------------------------------- /components/ux/cookie/cookie-more.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # Cookie 处理扩展 6 | 提供列出 Cookie 和子 Cookie 功能。 7 | -------------------------------------------------------------------------------- /components/ux/cookie/cookie.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # Cookie 处理 6 | 提供 Cookie 增删功能。 7 | 8 | > ##### 另参考 9 | > - [[ux/cookie/cookie-more]] 10 | -------------------------------------------------------------------------------- /components/ux/cookie/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./cookie.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/copy/copy.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 复制 6 | 复制内容到剪贴板。 7 | 8 | ```html demo hide doc 9 | 10 | 11 | ``` -------------------------------------------------------------------------------- /components/ux/copy/copy.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 复制内容。 3 | * @param content 要复制的内容。 4 | * @return 如果复制成功则返回 true，否则返回 false。 5 | */ 6 | export default function copy(content: string) { 7 | const textarea = document.body.appendChild(document.createElement("textarea")); 8 | textarea.value = content; 9 | textarea.select(); 10 | let success; 11 | try { 12 | success = document.execCommand("copy"); 13 | } catch (e) { 14 | } finally { 15 | document.body.removeChild(textarea); 16 | } 17 | return success; 18 | } 19 | -------------------------------------------------------------------------------- /components/ux/copy/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./copy.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/countDown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./countDown.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/crashBrowser/crashBrowser-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import { crashBrowser, delayBrowser } from "./crashBrowser"; 3 | 4 | export function crashBrowserTest() { 5 | crashBrowser(); 6 | } 7 | 8 | export function delayBrowserTest() { 9 | delayBrowser(); 10 | } 11 | -------------------------------------------------------------------------------- /components/ux/crashBrowser/crashBrowser.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 卡死浏览器 6 | 让浏览器卡死，支持所有浏览器，信不信由你，反正我信了。 7 | 8 | ## 基本用法 9 | ```html demo hide doc 10 | 11 | 12 | ``` 13 | -------------------------------------------------------------------------------- /components/ux/crashBrowser/crashBrowser.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 让浏览器卡死（需要强制关闭进程）。 3 | * @example crashBrowser() 4 | */ 5 | export function crashBrowser() { 6 | while (1) (history.back as any)(-1); 7 | } 8 | 9 | /** 10 | * 让浏览器假死（页面内不响应，但允许关闭页面）。 11 | * @example delayBrowser() 12 | */ 13 | export function delayBrowser() { 14 | var s = "abcde"; 15 | for (var i = 0; i < 21; i++) s += s; 16 | /a.*c.*f/.test(s); 17 | } 18 | -------------------------------------------------------------------------------- /components/ux/crashBrowser/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./crashBrowser.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/ctrlEnter/ctrlEnter.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # Ctrl+回车事件 6 | 绑定Ctrl/Command+回车事件。 7 | 8 | ```html demo doc 9 | 10 | 17 | ``` 18 | -------------------------------------------------------------------------------- /components/ux/ctrlEnter/ctrlEnter.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 绑定 CTRL 回车事件。 3 | * @param elem 要绑定的元素。 4 | * @param callback 设置 CTRL 回车的回调。 5 | * @example ctrlEnter(elem, function(){ alert("CTRL+ENTER"); }); 6 | */ 7 | export default function ctrlEnter(elem: HTMLElement, callback: (e: KeyboardEvent) => void) { 8 | elem.addEventListener("keypress", e => { 9 | if ((e.ctrlKey || e.metaKey) && (e.which === 13 || e.which === 10)) { 10 | callback(e); 11 | } 12 | }); 13 | } 14 | -------------------------------------------------------------------------------- /components/ux/ctrlEnter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./ctrlEnter.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/disableTab/disableTab.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 禁止 Tab 6 | 禁止 Tab 切换焦点并改成输入。 7 | 8 | ```html demo doc 9 | 10 | 15 | ``` 16 | -------------------------------------------------------------------------------- /components/ux/disableTab/disableTab.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 禁止 Tab 切换焦点，改为输入 Tab。 3 | * @param elem 相关的输入框。 4 | * @param tab 输入的 Tab 符号。 5 | */ 6 | export default function disableTab(elem: HTMLInputElement, tab = "\t") { 7 | elem.addEventListener("keydown", e => { 8 | if (e.keyCode == 9) { 9 | e.preventDefault(); 10 | elem.ownerDocument.execCommand("insertHTML", false, tab); 11 | } 12 | }); 13 | } 14 | -------------------------------------------------------------------------------- /components/ux/disableTab/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./disableTab.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/dom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./dom.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/drag/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./drag.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/drop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./drop.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/fixed/fixed.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 模拟 fixed 6 | 模拟 fixed 7 | -------------------------------------------------------------------------------- /components/ux/fixed/fixed.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 模拟 fixed。 3 | */ 4 | export default function fixed() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/fixed/old/fixed.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 固定布局 3 | * 4 | */ 5 | 6 | /** 7 | * 确保指定的元素固定在页面指定位置。 8 | * @param elem 要固定的节点。 9 | */ 10 | export function fixed(elem: HTMLElement) { 11 | var rect = elem.getBoundingClientRect(); 12 | // var activeElemTagName = document.activeElement.tagName; 13 | elem.style.position = "absolute"; 14 | elem.style.top = `100px`; 15 | elem.style.left = `${rect.left}px`; 16 | elem.style.right = `${rect.right}px`; 17 | elem.style.bottom = `${rect.bottom}px`; 18 | } 19 | 20 | export default fixed; 21 | -------------------------------------------------------------------------------- /components/ux/fixed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./fixed.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/flash/flash-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as flash from "./flash"; 3 | 4 | export function flashTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/flash/flash.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Flash。 3 | */ 4 | export default function flash() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/flash/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./flash.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/flexible/flexible.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 自动缩放 6 | 自动缩放 7 | -------------------------------------------------------------------------------- /components/ux/flexible/flexible.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 自动缩放。 3 | */ 4 | export default function flexible() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/flexible/flexible/index.md: -------------------------------------------------------------------------------- 1 | # 自动缩放 2 | -------------------------------------------------------------------------------- /components/ux/flexible/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./flexible.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/floating/floating.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 浮动广告 6 | 浮动广告 7 | -------------------------------------------------------------------------------- /components/ux/floating/floating.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 浮动广告。 3 | */ 4 | export default function floating() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/floating/old/floating.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |
广告层
4 | 5 |
-------------------------------------------------------------------------------- /components/ux/floating/old/floating.ts: -------------------------------------------------------------------------------- 1 | // #todo 2 | 3 | /** * @author */ 4 | -------------------------------------------------------------------------------- /components/ux/floating/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./floating.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/forceOpen/forceOpen.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 强制打开 6 | 防止新开窗口被浏览器拦截。 7 | 8 | ```html demo doc 9 | 10 | ``` 11 | 12 | > ##### (i)原理 13 | > 默认地，在点击事件中新开窗口不会被浏览器拦截。 14 | > 如果发现新窗口被拦截，则捕获首次点击事件强制打开页面。 15 | -------------------------------------------------------------------------------- /components/ux/forceOpen/forceOpen.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 强制打开指定网页。 3 | * @param url 要打开的地址。 4 | * @example forceOpen("http://tealui.com/") 5 | */ 6 | export default function forceOpen(url: string) { 7 | if (!window.open(url)) { 8 | var oldOnClick = document.onclick; 9 | document.onclick = function () { 10 | document.onclick = oldOnClick; 11 | window.open(url); 12 | return oldOnClick && oldOnClick.apply(document, arguments); 13 | }; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /components/ux/forceOpen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./forceOpen.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/gray/gray.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 网站变灰 6 | 网站变灰 7 | 8 | 另参考：[CssGaga](http://www.99css.com/634/) -------------------------------------------------------------------------------- /components/ux/gray/gray.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 网站变灰。 3 | */ 4 | export default function gray() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/gray/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./gray.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/hashChange/hashChange.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 哈希值改变事件 6 | 绑定哈希值改变事件。 7 | -------------------------------------------------------------------------------- /components/ux/hashChange/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./hashChange.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/highlight/highlight.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 高亮 6 | 高亮 7 | -------------------------------------------------------------------------------- /components/ux/highlight/highlight.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 高亮。 3 | */ 4 | export default function highlight() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/highlight/old/highlight.md: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /components/ux/highlight/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./highlight.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/hover/hover.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 鼠标移入事件 6 | 模拟 CSS :hover 伪类。 7 | 8 | ```html demo doc 9 |
10 | 19 | ``` 20 | -------------------------------------------------------------------------------- /components/ux/hover/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./hover.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/ieShim/ieShim.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # IE 兼容补丁 6 | IE 兼容补丁 7 | -------------------------------------------------------------------------------- /components/ux/ieShim/ieShim.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * IE 兼容补丁。 3 | */ 4 | export default function ieShim() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/ieShim/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./ieShim.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/iframe/iframe-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as iframe from "./iframe"; 3 | 4 | export function iframeTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/iframe/iframe.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # IFrame 处理 6 | IFrame 处理 7 | -------------------------------------------------------------------------------- /components/ux/iframe/iframe.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * IFrame 处理。 3 | */ 4 | export default function iframe() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/iframe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./iframe.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/include/include-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as include from "./include"; 3 | 4 | export function includeTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/include/include.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 包含文件 6 | 包含文件 7 | -------------------------------------------------------------------------------- /components/ux/include/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./include.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/keyPress/keyPress.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 键盘按下事件 6 | 快速绑定键盘按下事件。 7 | -------------------------------------------------------------------------------- /components/ux/keyPress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./keyPress.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/keys/keys-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as keys from "./keys"; 3 | 4 | export function keysTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/keys/keys.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 键 6 | 键 7 | -------------------------------------------------------------------------------- /components/ux/keys/keys.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 键。 3 | */ 4 | export default function keys() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/keys/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./keys.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/killIE/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./killIE.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/lazyLoad/lazyLoad.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 图片懒加载 6 | 仅当滚到图片时才加载，减少请求数。 7 | 8 | ```html demo {5} doc 9 | 10 | 15 | ``` 16 | -------------------------------------------------------------------------------- /components/ux/lazyLoad/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./lazyLoad.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/load/load-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as load from "./load"; 3 | 4 | export function loadTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/load/load.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 动态载入 6 | 动态载入 7 | -------------------------------------------------------------------------------- /components/ux/load/load.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 动态载入。 3 | */ 4 | export default function load() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/load/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./load.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/marquee/marquee.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 走马灯 6 | 走马灯 7 | -------------------------------------------------------------------------------- /components/ux/marquee/marquee.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 走马灯。 3 | */ 4 | export default function marquee() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/marquee/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./marquee.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/messager/messager-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import * as messager from "./messager"; 3 | 4 | export function messagerTest() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/messager/messager.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 消息通讯 6 | 消息通讯 7 | -------------------------------------------------------------------------------- /components/ux/messager/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./messager.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/morph/morph.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 变形 6 | 变形 7 | -------------------------------------------------------------------------------- /components/ux/morph/morph.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 变形。 3 | */ 4 | export default function morph() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/morph/old/morph.md: -------------------------------------------------------------------------------- 1 | # 变形 2 | 提供 IFrame 操作的相关功能。 3 | -------------------------------------------------------------------------------- /components/ux/morph/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./morph.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/multiFade/multiFade.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 突出高亮 6 | 突出高亮 7 | -------------------------------------------------------------------------------- /components/ux/multiFade/multiFade.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 突出高亮。 3 | */ 4 | export default function multiFade() { 5 | 6 | } 7 | -------------------------------------------------------------------------------- /components/ux/multiFade/old/multiFade.md: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /components/ux/multiFade/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./multiFade.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/navigator/navigator.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 浏览器平台检测 6 | 让浏览器强制打开指定网页。 7 | 8 | document.getElementById('ua').innerHTML = navigator.userAgent; 9 | 10 | ##### 获取浏览器名 11 | ``` 12 | navigator.browser 13 | ``` 14 | 15 | ##### 获取浏览器主版本 16 | ``` 17 | navigator.version 18 | ``` 19 | 20 | ##### 获取浏览器引擎 21 | ``` 22 | navigator.engine 23 | ``` 24 | 25 | ##### 获取操作系统 26 | ``` 27 | navigator.platform 28 | ``` 29 | -------------------------------------------------------------------------------- /components/ux/navigator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./navigator.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/nextTick/nextTick-test.ts: -------------------------------------------------------------------------------- 1 | import * as assert from "assert"; 2 | import nextTick from "./nextTick"; 3 | 4 | export function nextTickTest(done: Function) { 5 | let i = 0; 6 | nextTick(() => { 7 | i++; 8 | }); 9 | nextTick(() => { 10 | assert.strictEqual(i, 1); 11 | done(); 12 | }); 13 | assert.strictEqual(i, 0); 14 | } 15 | -------------------------------------------------------------------------------- /components/ux/nextTick/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./nextTick.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/noContextMenu/noContextMenu.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 禁止右键菜单 6 | ```html demo hide doc 7 | 8 | ``` 9 | -------------------------------------------------------------------------------- /components/ux/noContextMenu/noContextMenu.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 禁止右键菜单。 3 | * @param elem 相关的元素。 4 | */ 5 | export default function noContextMenu(elem: HTMLElement) { 6 | elem.addEventListener("contextmenu", e => e.preventDefault()); 7 | } 8 | -------------------------------------------------------------------------------- /components/ux/noContextMenu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "types": "./noContextMenu.ts" 3 | } -------------------------------------------------------------------------------- /components/ux/noIFrame/noIFrame.md: -------------------------------------------------------------------------------- 1 | --- 2 | version: 0.0.1 3 | author: xuld 4 | --- 5 | # 禁止被 IFrame 嵌套 6 | 如果页面被内嵌在 `