`:
28 |
29 | ```html
30 |
35 | ```
36 |
--------------------------------------------------------------------------------
/docs/zh-cn/components/badge.md:
--------------------------------------------------------------------------------
1 | 徽标用于展示动态信息，如计数或状态指示。它可以包含文字或数字。
2 |
3 | ## 使用方法 {#usage}
4 |
5 | 按需导入组件：
6 |
7 | ```js
8 | import 'mdui/components/badge.js';
9 | ```
10 |
11 | 按需导入组件的 TypeScript 类型：
12 |
13 | ```ts
14 | import type { Badge } from 'mdui/components/badge.js';
15 | ```
16 |
17 | 使用示例：
18 |
19 | ```html,example,playgroundId=191
20 | 12
21 | ```
22 |
23 | ## 示例 {#examples}
24 |
25 | ### 形状 {#example-variant}
26 |
27 | 使用 `variant` 属性来设置徽标的形状。当 `variant` 为 `large` 时，将显示大型徽标。你可以在 default slot 中指定要显示的文本。
28 |
29 | ```html,example,expandable,playgroundId=192
30 | 99+
32 | ```
33 |
--------------------------------------------------------------------------------
/docs/zh-cn/components/circular-progress.md:
--------------------------------------------------------------------------------
1 | 圆形进度指示器是一个用于显示任务进度的圆形组件，例如数据加载或表单提交等。
2 |
3 | ## 使用方法 {#usage}
4 |
5 | 按需导入组件：
6 |
7 | ```js
8 | import 'mdui/components/circular-progress.js';
9 | ```
10 |
11 | 按需导入组件的 TypeScript 类型：
12 |
13 | ```ts
14 | import type { CircularProgress } from 'mdui/components/circular-progress.js';
15 | ```
16 |
17 | 使用示例：
18 |
19 | ```html,example,playgroundId=231
20 | getColorFromImage(image: string | HTMLImageElement | JQ <HTMLImageElement>): Promise<string>getTheme(target?: string | HTMLElement | JQ <HTMLElement>): 'light' | 'dark' | 'auto'removeColorScheme(target?: string | HTMLElement | JQ <HTMLElement>): void
23 | ```
24 |
25 | 函数的参数为语言代码，返回值为 Promise，在 Promise resolve 时，语言切换完成。
26 |
27 | 语言代码列表参见 [支持的语言](/zh-cn/docs/2/getting-started/localization#languages)。
28 |
--------------------------------------------------------------------------------
/docs/zh-cn/functions/setTheme.md:
--------------------------------------------------------------------------------
1 | `setTheme` 函数用于设置当前页面或指定元素的主题。
2 |
3 | 可选的主题包括 `light`、`dark`和 `auto`。详见 [暗色模式](/zh-cn/docs/2/styles/dark-mode)。
4 |
5 | ## 使用方法 {#usage}
6 |
7 | 按需导入函数：
8 |
9 | ```js
10 | import { setTheme } from 'mdui/functions/setTheme.js';
11 | ```
12 |
13 | 使用示例：
14 |
15 | ```js
16 | // 把整个页面设置成暗色模式
17 | setTheme('dark');
18 |
19 | // 把 class="element" 元素设置成暗色模式
20 | setTheme('dark', '.element');
21 |
22 | // 把指定 DOM 元素设置成暗色模式
23 | const element = document.querySelector('.element');
24 | setTheme('dark', element);
25 | ```
26 |
27 | ## API {#api}
28 |
29 | setTheme(theme: 'light' | 'dark' | 'auto', target?: string | HTMLElement | JQ <HTMLElement>): void`](/zh-cn/docs/2/components/icon) 组件，可以显著减少项目打包后的体积。
4 |
5 | ## 安装 {#installation}
6 |
7 | 你需要单独安装该包：
8 |
9 | ```bash
10 | npm install @mdui/icons --save
11 | ```
12 |
13 | ## 使用 {#usage}
14 |
15 | 安装完成后，导入所需的图标文件：
16 |
17 | ```js
18 | import '@mdui/icons/search.js';
19 | ```
20 |
21 | 然后，就可以使用对应的图标组件了：
22 |
23 | ```html
24 | ` 表格样式。例如：
6 |
7 | ```html
8 |
15 | ```
16 |
17 | ## 表格样式 {#table}
18 |
19 | 在 `` 元素上添加 `mdui-table` 类，可以优化表格的显示样式。例如：
20 |
21 | ```html
22 |
25 | ```
26 |
27 | 如果你希望表格能在其父元素内横向滚动，可以在 `` 元素的父元素上添加 `mdui-table` 类。例如：
28 |
29 | ```html
30 |
35 | ```
36 |
--------------------------------------------------------------------------------
/packages/create-mdui/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "create-mdui",
3 | "version": "1.0.0",
4 | "description": "npm init mdui",
5 | "files": [
6 | "package.json"
7 | ],
8 | "repository": {
9 | "type": "git",
10 | "url": "https://github.com/zdhxiong/mdui.git"
11 | },
12 | "author": "zdhxiong ",
13 | "license": "MIT",
14 | "bugs": {
15 | "url": "https://github.com/zdhxiong/mdui/issues"
16 | },
17 | "homepage": "https://www.mdui.org"
18 | }
19 |
--------------------------------------------------------------------------------
/packages/icons/.gitignore:
--------------------------------------------------------------------------------
1 | src/shared/style.ts
2 | src/*.ts
3 |
--------------------------------------------------------------------------------
/packages/icons/README.md:
--------------------------------------------------------------------------------
1 | # @mdui/icons
2 |
3 | `@mdui/icons` 是一个独立的包，包含了 Material Icons 的所有图标，其中每一个图标组件都是一个独立的文件，你可以按需导入需要的图标组件，而无需导入整个图标库。
4 |
5 | 文档：https://www.mdui.org/docs/2/libraries/icons
6 |
7 | ## 安装
8 |
9 | ```
10 | npm install @mdui/icons --save
11 | ```
12 |
13 | 导入需要使用的图标：
14 |
15 | ```js
16 | import '@mdui/icons/search.js';
17 | ```
18 |
19 | 使用对应的图标组件：
20 |
21 | ```html
22 | ",
24 | "license": "MIT",
25 | "bugs": {
26 | "url": "https://github.com/zdhxiong/mdui/issues"
27 | },
28 | "homepage": "https://github.com/zdhxiong/mdui",
29 | "dependencies": {
30 | "@mdui/shared": "workspace:^",
31 | "lit": "^3.3.0",
32 | "tslib": "^2.8.1"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/icons/src/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zdhxiong/mdui/d6d465f1adc6852f40b1adced6dcd103d8c406db/packages/icons/src/.gitkeep
--------------------------------------------------------------------------------
/packages/icons/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig",
3 | "include": ["./src/**/*.ts"],
4 | "exclude": [],
5 | "compilerOptions": {
6 | "declarationDir": "./",
7 | "outDir": "./"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/jetbrains-plugin/.gitignore:
--------------------------------------------------------------------------------
1 | .gradle
2 | .idea
3 | .run
4 | build/
5 | /src/main/resources/web-types/*.json
6 | !gradle/wrapper/gradle-wrapper.jar
7 | !**/src/main/**/build/
8 | !**/src/test/**/build/
9 |
--------------------------------------------------------------------------------
/packages/jetbrains-plugin/README.md:
--------------------------------------------------------------------------------
1 | # mdui
2 |
3 | 为 mdui 框架提供自动完成、悬停提示等功能的 IntelliJ IDE 插件。
4 |
5 | 支持以下基于 IntelliJ 的 IDE：
6 |
7 | * IntelliJ IDEA
8 | * PyCharm
9 | * WebStorm
10 | * PhpStorm
11 | * Rider
12 | * CLion
13 | * RubyMine
14 | * GoLand
15 |
16 | ## 功能
17 |
18 | 支持在以下场景中提供自动完成及悬浮提示：
19 |
20 | * HTML 标签名
21 | * HTML 标签属性名
22 | * HTML 标签属性枚举值
23 | * HTML 标签中的事件名
24 | * CSS 中的 `::part()` 选择器的 `part` 属性名
25 | * CSS 中组件内的 CSS 自定义属性名
26 | * CSS 中的全局 CSS 自定义属性名
27 | * CSS 中的全局 class 名
28 |
29 | 
30 |
--------------------------------------------------------------------------------
/packages/jetbrains-plugin/gradle.properties:
--------------------------------------------------------------------------------
1 | # Opt-out flag for bundling Kotlin standard library -> https://jb.gg/intellij-platform-kotlin-stdlib
2 | kotlin.stdlib.default.dependency=false
3 | # Enable Gradle Configuration Cache -> https://docs.gradle.org/current/userguide/configuration_cache.html
4 | org.gradle.configuration-cache=true
5 | # Enable Gradle Build Cache -> https://docs.gradle.org/current/userguide/build_cache.html
6 | org.gradle.caching=true
7 |
--------------------------------------------------------------------------------
/packages/jetbrains-plugin/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zdhxiong/mdui/d6d465f1adc6852f40b1adced6dcd103d8c406db/packages/jetbrains-plugin/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/packages/jetbrains-plugin/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.2-bin.zip
4 | zipStoreBase=GRADLE_USER_HOME
5 | zipStorePath=wrapper/dists
6 |
--------------------------------------------------------------------------------
/packages/jetbrains-plugin/settings.gradle.kts:
--------------------------------------------------------------------------------
1 | pluginManagement {
2 | repositories {
3 | mavenCentral()
4 | gradlePluginPortal()
5 | }
6 | }
7 |
8 | rootProject.name = "mdui"
9 |
--------------------------------------------------------------------------------
/packages/jetbrains-plugin/src/main/resources/META-INF/pluginIcon.svg:
--------------------------------------------------------------------------------
1 |
11 |
Hello
12 |
13 | Goodbye
14 |
15 |
9 | list item 1
10 | list item 2
11 | list item 3
12 | list item 4
13 | list item 5
14 |
15 | `;
16 | });
17 |
18 | it('.first()', () => {
19 | let $first = $('#frame li').first();
20 | assert.sameOrderedMembers(toIdArray($first), ['child-1']);
21 |
22 | $first = $('#notfound').first();
23 | assert.lengthOf($first, 0);
24 | });
25 | });
26 | };
27 |
28 | test(jq, 'jq');
29 | test(jQuery as unknown as JQStatic, 'jQuery');
30 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/get.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/get.js';
2 | import { jQuery, jq, assert, JQStatic } from '../utils.js';
3 |
4 | const test = ($: JQStatic, type: string): void => {
5 | describe(`${type} - .get`, () => {
6 | beforeEach(() => {
7 | document.querySelector('#frame')!.innerHTML = `
8 | a
9 | b
10 | c
11 | d
12 | `;
13 | });
14 |
15 | it('.get(index)', () => {
16 | const $divs = $('#frame div');
17 |
18 | assert.equal($divs.get(1).innerHTML, 'b');
19 | assert.isUndefined($divs.get(4));
20 | assert.equal($divs.get(-1).innerHTML, 'd');
21 | });
22 |
23 | it('.get()', () => {
24 | const ret = $('#frame div').get();
25 | assert.isArray(ret);
26 | assert.lengthOf(ret, 4);
27 | assert.equal(ret[2].innerHTML, 'c');
28 | });
29 | });
30 | };
31 |
32 | test(jq, 'jq');
33 | test(jQuery as unknown as JQStatic, 'jQuery');
34 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/hasClass.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/hasClass.js';
2 | import { jQuery, jq, assert, JQStatic } from '../utils.js';
3 |
4 | const test = ($: JQStatic, type: string): void => {
5 | describe(`${type} - .hasClass`, () => {
6 | beforeEach(() => {
7 | document.querySelector('#frame')!.innerHTML = `
8 | Goodbye
9 | `;
10 | });
11 |
12 | it('.hasClass(string): boolean', () => {
13 | const $div = $('#frame div');
14 | assert.isTrue($div.hasClass('mdui'));
15 | assert.isFalse($div.hasClass('test'));
16 | });
17 | });
18 | };
19 |
20 | test(jq, 'jq');
21 | test(jQuery as unknown as JQStatic, 'jQuery');
22 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/height.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/height.js';
2 | import { jQuery, jq, JQStatic } from '../utils.js';
3 |
4 | const test = (_$: JQStatic, type: string): void => {
5 | describe(`${type} - .height`, () => {
6 | // 已在 .width() 方法中测试
7 | it('.height()', () => {
8 | return '';
9 | });
10 | });
11 | };
12 |
13 | test(jq, 'jq');
14 | test(jQuery as unknown as JQStatic, 'jQuery');
15 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/innerHeight.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/innerHeight.js';
2 | import { jQuery, jq, JQStatic } from '../utils.js';
3 |
4 | const test = (_$: JQStatic, type: string): void => {
5 | describe(`${type} - .innerHeight`, () => {
6 | // 已在 .width() 方法中测试
7 | it('.innerHeight()', () => {
8 | return '';
9 | });
10 | });
11 | };
12 |
13 | test(jq, 'jq');
14 | test(jQuery as unknown as JQStatic, 'jQuery');
15 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/innerWidth.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/innerWidth.js';
2 | import { jQuery, jq, JQStatic } from '../utils.js';
3 |
4 | const test = (_$: JQStatic, type: string): void => {
5 | describe(`${type} - .innerWidth`, () => {
6 | // 已在 .width() 方法中测试
7 | it('.innerWidth()', () => {
8 | return '';
9 | });
10 | });
11 | };
12 |
13 | test(jq, 'jq');
14 | test(jQuery as unknown as JQStatic, 'jQuery');
15 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/last.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/last.js';
2 | import { jQuery, jq, assert, JQStatic, toIdArray } from '../utils.js';
3 |
4 | const test = ($: JQStatic, type: string): void => {
5 | describe(`${type} - .last`, () => {
6 | beforeEach(() => {
7 | document.querySelector('#frame')!.innerHTML = `
8 |
9 | list item 1
10 | list item 2
11 | list item 3
12 | list item 4
13 | list item 5
14 |
15 | `;
16 | });
17 |
18 | it('.last()', () => {
19 | const $last = $('#frame li').last();
20 | assert.sameOrderedMembers(toIdArray($last), ['child-5']);
21 |
22 | assert.lengthOf($('#notfound').last(), 0);
23 | });
24 | });
25 | };
26 |
27 | test(jq, 'jq');
28 | test(jQuery as unknown as JQStatic, 'jQuery');
29 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/off.test.ts:
--------------------------------------------------------------------------------
1 | // .on 测试通过即可
2 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/offsetParent.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/get.js';
2 | import '../../methods/offsetParent.js';
3 | import { jQuery, jq, assert, JQStatic } from '../utils.js';
4 |
5 | const test = ($: JQStatic, type: string): void => {
6 | describe(`${type} - .offsetParent`, () => {
7 | beforeEach(() => {
8 | document.querySelector('#frame')!.innerHTML = `
9 |
10 | II
11 |
14 |
15 | II
16 |
19 |
20 |
21 | `;
22 | });
23 |
24 | it('.offsetParent()', () => {
25 | assert.sameOrderedMembers(
26 | $('.item-a').offsetParent().get(),
27 | $('.item-ii').get(),
28 | );
29 | });
30 | });
31 | };
32 |
33 | test(jq, 'jq');
34 | test(jQuery as unknown as JQStatic, 'jQuery');
35 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/outerHeight.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/outerHeight.js';
2 | import { jQuery, jq, JQStatic } from '../utils.js';
3 |
4 | const test = (_$: JQStatic, type: string): void => {
5 | describe(`${type} - .outerHeight`, () => {
6 | // 已在 .width() 方法中测试
7 | it('.outerHeight()', () => {
8 | return '';
9 | });
10 | });
11 | };
12 |
13 | test(jq, 'jq');
14 | test(jQuery as unknown as JQStatic, 'jQuery');
15 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/outerWidth.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/outerWidth.js';
2 | import { jQuery, jq, JQStatic } from '../utils.js';
3 |
4 | const test = (_$: JQStatic, type: string): void => {
5 | describe(`${type} - .outerWidth`, () => {
6 | // 已在 .width() 方法中测试
7 | it('.outerWidth()', () => {
8 | return '';
9 | });
10 | });
11 | };
12 |
13 | test(jq, 'jq');
14 | test(jQuery as unknown as JQStatic, 'jQuery');
15 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/prependTo.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/prependTo.js';
2 | import { jQuery, jq, JQStatic } from '../utils.js';
3 |
4 | const test = (_$: JQStatic, type: string): void => {
5 | describe(`${type} - .prependTo`, () => {
6 | it('.prependTo(JQSelector): JQ', () => {
7 | // 该方法直接调用 .prepend() 实现，.prepend() 通过即可
8 | });
9 | });
10 | };
11 |
12 | test(jq, 'jq');
13 | test(jQuery as unknown as JQStatic, 'jQuery');
14 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/removeData.test.ts:
--------------------------------------------------------------------------------
1 | // 已经在 .data 方法中进行了测试
2 |
--------------------------------------------------------------------------------
/packages/jq/__test__/methods/removeProp.test.ts:
--------------------------------------------------------------------------------
1 | import '../../methods/prop.js';
2 | import '../../methods/removeProp.js';
3 | import { jQuery, jq, assert, JQStatic } from '../utils.js';
4 |
5 | const test = ($: JQStatic, type: string): void => {
6 | describe(`${type} - .removeProp`, () => {
7 | beforeEach(() => {
8 | document.querySelector('#frame')!.innerHTML = `
9 | ",
29 | "license": "MIT",
30 | "bugs": {
31 | "url": "https://github.com/zdhxiong/mdui/issues"
32 | },
33 | "homepage": "https://github.com/zdhxiong/mdui",
34 | "dependencies": {
35 | "ssr-window": "^5.0.0",
36 | "tslib": "^2.8.1"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/jq/src/functions.ts:
--------------------------------------------------------------------------------
1 | export * from './functions/ajax.js';
2 | export * from './functions/ajaxSetup.js';
3 | export * from './functions/contains.js';
4 | export * from './functions/data.js';
5 | export * from './functions/each.js';
6 | export * from './functions/extend.js';
7 | export * from './functions/map.js';
8 | export * from './functions/merge.js';
9 | export * from './functions/param.js';
10 | export * from './functions/removeData.js';
11 | export * from './functions/unique.js';
12 |
--------------------------------------------------------------------------------
/packages/jq/src/functions/ajaxSetup.ts:
--------------------------------------------------------------------------------
1 | import { globalOptions } from '../shared/ajax.js';
2 | import { extend } from './extend.js';
3 | import type { Options } from '../shared/ajax.js';
4 |
5 | /**
6 | * 为 ajax 请求设置全局配置参数
7 | * @param options 键值对参数
8 | * @example
9 | ```js
10 | ajaxSetup({
11 | dataType: 'json',
12 | method: 'POST',
13 | });
14 | ```
15 | */
16 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
17 | export const ajaxSetup = (
18 | options: Options,
19 | ): Options => {
20 | return extend(globalOptions, options);
21 | };
22 |
--------------------------------------------------------------------------------
/packages/jq/src/functions/contains.ts:
--------------------------------------------------------------------------------
1 | import { toElement } from '../shared/helper.js';
2 |
3 | /**
4 | * 检查 container 元素内是否包含 contains 元素
5 | * @param container 父元素
6 | * @param contains 子元素
7 | * @example
8 | ```js
9 | contains( document, document.body ); // true
10 | contains( document.getElementById('test'), document ); // false
11 | contains( $('.container').get(0), $('.contains').get(0) ); // false
12 | ```
13 | */
14 | export const contains = (
15 | container: Element | Document,
16 | contains: Element | Document,
17 | ): boolean => {
18 | return container !== contains && toElement(container).contains(contains);
19 | };
20 |
--------------------------------------------------------------------------------
/packages/jq/src/functions/merge.ts:
--------------------------------------------------------------------------------
1 | import { eachArray } from '../shared/helper.js';
2 |
3 | /**
4 | * 把第二个数组的元素追加到第一个数组中，并返回合并后的数组
5 | * @param first 第一个数组
6 | * @param second 该数组的元素将被追加到第一个数组中
7 | * @example
8 | ```js
9 | merge( [ 0, 1, 2 ], [ 2, 3, 4 ] )
10 | // [ 0, 1, 2, 2, 3, 4 ]
11 | ```
12 | */
13 | export const merge = (first: (T | U)[], second: U[]): Array => {
14 | eachArray(second, (value) => {
15 | first.push(value);
16 | });
17 |
18 | return first;
19 | };
20 |
--------------------------------------------------------------------------------
/packages/jq/src/functions/unique.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 过滤掉数组中的重复元素
3 | * @param arr 数组
4 | * @example
5 | ```js
6 | unique([1, 2, 12, 3, 2, 1, 2, 1, 1]);
7 | // [1, 2, 12, 3]
8 | ```
9 | */
10 | export const unique = (arr: T[]): T[] => {
11 | return [...new Set(arr)];
12 | };
13 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/add.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { merge } from '../functions/merge.js';
3 | import { unique } from '../functions/unique.js';
4 | import { JQ } from '../shared/core.js';
5 | import './get.js';
6 | import type { TypeOrArray } from '../shared/helper.js';
7 |
8 | declare module '../shared/core.js' {
9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
10 | interface JQ {
11 | /**
12 | * 添加元素到当前集合中
13 | * @param selector 可以是 HTML 字符串、CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList 等
14 | * @example
15 | ```js
16 | // 把含 .selected 的元素添加到当前 JQ 对象中
17 | $('.box').add('.selected');
18 | ```
19 | */
20 | add(selector: string | TypeOrArray | JQ | null | undefined): this;
21 | }
22 | }
23 |
24 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
25 | $.fn.add = function (this: JQ, selector: any): JQ {
26 | return new JQ(unique(merge(this.get(), $(selector).get())));
27 | };
28 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/clone.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import './map.js';
3 | import type { JQ } from '../shared/core.js';
4 |
5 | declare module '../shared/core.js' {
6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
7 | interface JQ {
8 | /**
9 | * 通过深度克隆来复制集合中的所有元素
10 | *
11 | * 通过原生 cloneNode 方法深度克隆来复制集合中的所有元素。此方法不会有数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。
12 | * @example
13 | ```js
14 | $('body').append($("#box").clone())
15 | ```
16 | */
17 | clone(): this;
18 | }
19 | }
20 |
21 | $.fn.clone = function (this: JQ): JQ {
22 | return this.map(function () {
23 | return this.cloneNode(true) as HTMLElement;
24 | });
25 | };
26 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/closest.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { JQ } from '../shared/core.js';
3 | import './eq.js';
4 | import './is.js';
5 | import './parents.js';
6 | import type { Selector } from '../shared/helper.js';
7 |
8 | declare module '../shared/core.js' {
9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
10 | interface JQ {
11 | /**
12 | * 从当前元素向上逐级匹配，返回最先匹配到的元素
13 | * @param selector CSS 选择器、DOM 元素、或 JQ 对象
14 | * @example
15 | ```js
16 | // 获取 .box 元素的父元素中最近的 .parent 元素
17 | $('.box').closest('.parent')
18 | ```
19 | */
20 | closest(selector: Selector | Element | JQ): this;
21 | }
22 | }
23 |
24 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
25 | $.fn.closest = function (this: JQ, selector: any): JQ {
26 | if (this.is(selector)) {
27 | return this;
28 | }
29 |
30 | const matched: HTMLElement[] = [];
31 | this.parents().each((_, element): void | false => {
32 | if ($(element).is(selector)) {
33 | matched.push(element);
34 |
35 | return false;
36 | }
37 | });
38 |
39 | return new JQ(matched);
40 | };
41 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/each.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { eachArray } from '../shared/helper.js';
3 | import type { JQ } from '../shared/core.js';
4 |
5 | declare module '../shared/core.js' {
6 | interface JQ {
7 | /**
8 | * 遍历当前集合，为集合中每一个元素执行一个函数。
9 | * @param callback
10 | * 执行的回调函数
11 | *
12 | * 函数的第一个参数为元素的索引位置，第二个参数为当前元素，`this` 指向当前元素
13 | *
14 | * 如果函数返回 `false`，则结束遍历。
15 | * @example
16 | ```js
17 | $('img').each(function (index, element) {
18 | this.src = 'test' + index + '.jpg';
19 | });
20 | ```
21 | */
22 | each(callback: (this: T, index: number, element: T) => unknown): this;
23 | }
24 | }
25 |
26 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
27 | $.fn.each = function (this: JQ, callback: void | any): JQ {
28 | return eachArray(this, (value, index) => {
29 | return callback.call(value, index, value);
30 | }) as JQ;
31 | };
32 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/empty.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import './each.js';
3 | import type { JQ } from '../shared/core.js';
4 |
5 | declare module '../shared/core.js' {
6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
7 | interface JQ {
8 | /**
9 | * 移除当前元素中所有的子元素
10 | * @example
11 | ```js
12 | $('.box').empty()
13 | ```
14 | */
15 | empty(): this;
16 | }
17 | }
18 |
19 | $.fn.empty = function (this: JQ): JQ {
20 | return this.each((_, element) => {
21 | element.innerHTML = '';
22 | });
23 | };
24 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/eq.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { JQ } from '../shared/core.js';
3 | import './slice.js';
4 |
5 | declare module '../shared/core.js' {
6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
7 | interface JQ {
8 | /**
9 | * 返回仅包含指定索引位置的元素的集合。
10 | * @param index 元素的索引位置
11 | * @example
12 | ```js
13 | // 返回第一个元素的集合
14 | $('div').eq(0);
15 | ```
16 | * @example
17 | ```js
18 | // 返回最后一个元素的集合
19 | $('div').eq(-1);
20 | ```
21 | */
22 | eq(index: number): this;
23 | }
24 | }
25 |
26 | $.fn.eq = function (this: JQ, index: number): JQ {
27 | const ret = index === -1 ? this.slice(index) : this.slice(index, +index + 1);
28 |
29 | return new JQ(ret);
30 | };
31 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/extend.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { eachObject } from '../shared/helper.js';
3 | import type { JQ } from '../shared/core.js';
4 | import type { PlainObject } from '../shared/helper.js';
5 |
6 | declare module '../shared/core.js' {
7 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
8 | interface JQ {
9 | /**
10 | * 在 $ 的原型链上扩展方法
11 | * @param obj
12 | * @example
13 | ```js
14 | $.fn.extend({
15 | customFunc: function () {}
16 | })
17 |
18 | // 然后就可以这样使用扩展的方法了
19 | $(document).customFunc()
20 | ```
21 | */
22 | extend(obj: PlainObject): this;
23 | }
24 | }
25 |
26 | $.fn.extend = function (this: JQ, obj: PlainObject): JQ {
27 | eachObject(obj, (prop, value) => {
28 | // 在 JQ 对象上扩展方法时，需要自己添加 typescript 的类型定义
29 | $.fn[prop as never] = value;
30 | });
31 |
32 | return this;
33 | };
34 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/find.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { merge } from '../functions/merge.js';
3 | import { JQ } from '../shared/core.js';
4 | import './each.js';
5 | import './get.js';
6 | import type { Selector } from '../shared/helper.js';
7 |
8 | declare module '../shared/core.js' {
9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
10 | interface JQ {
11 | /**
12 | * 根据 CSS 选择器找到指定的后代节点的集合
13 | * @param selector CSS 选择器
14 | * @example
15 | ```js
16 | $('#box').find('.box')
17 | ```
18 | */
19 | find(selector: Selector): this;
20 | }
21 | }
22 |
23 | $.fn.find = function (this: JQ, selector: Selector): JQ {
24 | const foundElements: HTMLElement[] = [];
25 |
26 | this.each((_, element) => {
27 | merge(foundElements, $(element.querySelectorAll(selector)).get());
28 | });
29 |
30 | return new JQ(foundElements);
31 | };
32 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/first.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import './eq.js';
3 | import type { JQ } from '../shared/core.js';
4 |
5 | declare module '../shared/core.js' {
6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
7 | interface JQ {
8 | /**
9 | * 返回当前集合中第一个元素的集合。
10 | * @example
11 | ```js
12 | $('div').first()
13 | ```
14 | */
15 | first(): this;
16 | }
17 | }
18 |
19 | $.fn.first = function (this: JQ): JQ {
20 | return this.eq(0);
21 | };
22 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/get.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import type { JQ } from '../shared/core.js';
3 |
4 | declare module '../shared/core.js' {
5 | interface JQ {
6 | /**
7 | * 获取集合中指定索引位置的元素
8 | * @param index 索引位置
9 | * @example
10 | ```js
11 | // 获取第 3 个 p 元素
12 | $('p').get(2)
13 | ```
14 | * @example
15 | ```js
16 | // 获取最后一个 p 元素
17 | $('p').get(-1)
18 | ```
19 | */
20 | get(index: number): T;
21 |
22 | /**
23 | * 获取集合中所有元素组成的数组
24 | * @example
25 | ```js
26 | // 获取所有 p 元素组成的数组
27 | $('p').get()
28 | ```
29 | */
30 | get(): T[];
31 | }
32 | }
33 |
34 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
35 | $.fn.get = function (this: JQ, index?: number): any | any[] {
36 | return index === undefined
37 | ? [].slice.call(this)
38 | : this[index >= 0 ? index : index + this.length];
39 | };
40 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/hasClass.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import type { JQ } from '../shared/core.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 判断集合中的第一个元素是否含有指定 CSS 类。
9 | * @param className CSS 类名
10 | * @example
11 | ```js
12 | $('div').hasClass('item')
13 | ```
14 | */
15 | hasClass(className: string): boolean;
16 | }
17 | }
18 |
19 | $.fn.hasClass = function (this: JQ, className: string): boolean {
20 | return this[0].classList.contains(className);
21 | };
22 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/height.ts:
--------------------------------------------------------------------------------
1 | import './width.js';
2 |
3 | declare module '../shared/core.js' {
4 | interface JQ {
5 | /**
6 | * 设置集合中所有元素的高度（不包含 `padding`, `border`, `margin` 的高度）。
7 | * @param value
8 | * 可以是带单位的字符串，或者数值；或者是返回带单位的字符串或数值的回调函数。
9 | *
10 | * 回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的高度值，`this` 指向当前元素。
11 | *
12 | * 若该值、或函数返回值是数值，则自动添加 `px` 作为单位。
13 | *
14 | * 若该值、或函数返回值是 `null` 或 `undefined`，则不修改元素的高度。
15 | * @example
16 | ```js
17 | $('.box').height('20%');
18 | ```
19 | * @example
20 | ```js
21 | $('.box').height(10);
22 | ```
23 | */
24 | height(
25 | value:
26 | | string
27 | | number
28 | | null
29 | | undefined
30 | | ((
31 | this: T,
32 | index: number,
33 | oldValue: number,
34 | ) => string | number | null | undefined | void),
35 | ): this;
36 |
37 | /**
38 | * 获取集合中第一个元素的高度（像素值），不包含 `padding`, `border`, `margin` 的高度
39 | * @example
40 | ```js
41 | $('.box').height();
42 | ```
43 | */
44 | height(): number;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/hide.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import './each.js';
3 | import type { JQ } from '../shared/core.js';
4 |
5 | declare module '../shared/core.js' {
6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
7 | interface JQ {
8 | /**
9 | * 隐藏集合中所有元素
10 | * @example
11 | ```js
12 | $('.box').hide();
13 | ```
14 | */
15 | hide(): this;
16 | }
17 | }
18 |
19 | $.fn.hide = function (this: JQ): JQ {
20 | return this.each((_, element) => {
21 | element.style.display = 'none';
22 | });
23 | };
24 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/html.ts:
--------------------------------------------------------------------------------
1 | import './val.js';
2 | import type { HTMLString } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | interface JQ {
6 | /**
7 | * 设置集合中所有元素的 HTML 内容
8 | * @param html
9 | * 可以是 HTML 字符串、DOM 元素、或回调函数（返回 HTML 字符串、DOM 元素）
10 | *
11 | * 回调函数的第一个参数为索引位置，第二个参数为元素原有的 HTML 内容，`this` 指向当前元素
12 | *
13 | * 若该值、或函数返回值为 `undefined` 时，不修改对应的 HTML
14 | * @example
15 | ```js
16 | $('#box').html('html content')
17 | ```
18 | */
19 | html(
20 | html:
21 | | HTMLString
22 | | Element
23 | | undefined
24 | | ((
25 | this: T,
26 | index: number,
27 | oldHtml: HTMLString,
28 | ) => HTMLString | Element | void | undefined),
29 | ): this;
30 |
31 | /**
32 | * 获取集合中第一个元素的 HTML 内容
33 | * @example
34 | ```js
35 | $('#box').html()
36 | ```
37 | */
38 | html(): string;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/insertAfter.ts:
--------------------------------------------------------------------------------
1 | import './insertBefore.js';
2 | import type { HTMLString, Selector, TypeOrArray } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 把当前集合中的元素插入到指定元素的后面，作为目标元素的兄弟元素
9 | *
10 | * 如果当前集合中的元素是页面中已有的元素，则将移动该元素，而不是复制
11 | *
12 | * 如果有多个目标元素，则将克隆当前集合中的元素，并添加到每个目标元素的后面
13 | * @param target 可以是 CSS 选择器、HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象
14 | * @returns 由新插入的元素组成的集合
15 | * @example
16 | ```js
17 | $('Hello ').insertAfter('I would like to say:
');
18 | // I would like to say:
Hello
19 | ```
20 | */
21 | insertAfter(
22 | target: Selector | HTMLString | TypeOrArray | JQ,
23 | ): this;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/last.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import './eq.js';
3 | import type { JQ } from '../shared/core.js';
4 |
5 | declare module '../shared/core.js' {
6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
7 | interface JQ {
8 | /**
9 | * 返回当前集合中最后一个元素的集合。
10 | * @example
11 | ```js
12 | $('div').last()
13 | ```
14 | */
15 | last(): this;
16 | }
17 | }
18 |
19 | $.fn.last = function (this: JQ): JQ {
20 | return this.eq(-1);
21 | };
22 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/next.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { eachArray } from '../shared/helper.js';
3 | import { dir } from './utils/dir.js';
4 | import type { JQ } from '../shared/core.js';
5 | import type { Selector } from '../shared/helper.js';
6 |
7 | declare module '../shared/core.js' {
8 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
9 | interface JQ {
10 | /**
11 | * 获取当前集合中每个元素的后一个匹配的同辈元素
12 | * @param selector CSS 选择器。指定该参数时，将仅返回和该参数匹配的元素的集合
13 | * @example
14 | ```js
15 | // 获取 .box 元素的后一个元素的集合
16 | $('.box').next()
17 | ```
18 | * @example
19 | ```js
20 | // 获取 .box 元素的后一个 div 元素的集合
21 | $('.box').next('div')
22 | ```
23 | */
24 | next(selector?: Selector): this;
25 | }
26 | }
27 |
28 | eachArray(['', 'All', 'Until'], (name, nameIndex) => {
29 | $.fn[`next${name}` as 'next'] = function (
30 | this: JQ,
31 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
32 | selector?: any,
33 | filter?: Selector,
34 | ): JQ {
35 | return dir(this, nameIndex, 'nextElementSibling', selector, filter);
36 | };
37 | });
38 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/nextAll.ts:
--------------------------------------------------------------------------------
1 | import './next.js';
2 | import type { Selector } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 获取当前集合中，每个元素后面的所有匹配的同辈元素的集合
9 | * @param selector CSS 选择器。指定该参数时，将仅返回和该参数匹配的元素的集合
10 | * @example
11 | ```js
12 | // 获取 .box 元素后面的所有同辈元素
13 | $('.box').nextAll()
14 | ```
15 | * @example
16 | ```js
17 | // 获取 .box 元素后面的所有含 .selected 的同辈元素
18 | $('.box').nextAll('.selected')
19 | ```
20 | */
21 | nextAll(selector?: Selector): this;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/nextUntil.ts:
--------------------------------------------------------------------------------
1 | import './next.js';
2 | import type { Selector } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 获取当前集合中，每个元素后面所有的同辈元素，直到遇到匹配元素为止（不包含匹配元素）。
9 | * @param selector
10 | * 可以是 CSS 选择器、DOM 元素、或 JQ 对象
11 | *
12 | * 表示遇到和该参数匹配的元素时，停止匹配
13 | *
14 | * 若没有指定该参数，则后面所有同辈元素都将被返回。即和 `.nextAll()` 效果一样
15 | * @param filter CSS 选择器。若指定了该参数，则仅返回和该参数匹配的元素
16 | * @example
17 | ```js
18 | // 获取 .box 元素后面所有的同辈元素
19 | $('.box').nextUntil();
20 | ```
21 | * @example
22 | ```js
23 | // 获取 .box 元素后面的同辈元素，直到遇到 .until 元素为止
24 | $('.box').nextUntil('.until')
25 | ```
26 | * @example
27 | ```js
28 | // 获取 .box 元素后面同辈的 div 元素，直到遇到 .until 元素为止
29 | $('.box').nextUntil('.until', 'div')
30 | ```
31 | */
32 | nextUntil(selector?: Selector | HTMLElement | JQ, filter?: Selector): this;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/offsetParent.ts:
--------------------------------------------------------------------------------
1 | import { getDocument } from 'ssr-window';
2 | import { $ } from '../$.js';
3 | import './css.js';
4 | import './map.js';
5 | import type { JQ } from '../shared/core.js';
6 |
7 | declare module '../shared/core.js' {
8 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
9 | interface JQ {
10 | /**
11 | * 返回集合中第一个元素的用于定位的父元素。
12 | *
13 | * 即父元素中第一个 `position` 为 `relative`, `absolute` 或 `fixed` 的元素。
14 | * @example
15 | ```js
16 | $('.box').offsetParent()
17 | ```
18 | */
19 | offsetParent(): this;
20 | }
21 | }
22 |
23 | /**
24 | * 返回最近的用于定位的父元素
25 | */
26 | $.fn.offsetParent = function (this: JQ): JQ {
27 | const document = getDocument();
28 |
29 | return this.map(function () {
30 | let offsetParent = this.offsetParent as HTMLElement;
31 |
32 | while (offsetParent && $(offsetParent).css('position') === 'static') {
33 | offsetParent = offsetParent.offsetParent as HTMLElement;
34 | }
35 |
36 | return offsetParent || document.documentElement;
37 | });
38 | };
39 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/parents.ts:
--------------------------------------------------------------------------------
1 | import './parent.js';
2 | import type { Selector } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 获取当前集合中，所有元素的祖先元素的集合。
9 | * @param selector CSS 选择器。若指定了该参数，则仅返回与该参数匹配的祖先元素的集合
10 | * @example
11 | ```js
12 | // 返回 span 元素的所有祖先元素
13 | $('span').parents()
14 | ```
15 | * @example
16 | ```js
17 | // 返回 span 元素的所有是 p 元素的祖先元素
18 | $('span').parents('p');
19 | ```
20 | */
21 | parents(selector?: Selector): this;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/parentsUntil.ts:
--------------------------------------------------------------------------------
1 | import './parent.js';
2 | import type { Selector } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 获取当前集合中，每个元素的所有父辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。
9 | * @param selector
10 | * 可以是 CSS 选择器、DOM 元素、或 JQ 对象
11 | *
12 | * 表示遇到和该参数匹配的元素时，停止匹配
13 | *
14 | * 若没有指定该参数，则所有祖先元素都将被返回。即和 `.parents()` 效果一样
15 | * @param filter CSS 选择器。若指定了该参数，则仅返回和该参数匹配的元素
16 | * @example
17 | ```js
18 | // 获取 .item 元素的所有祖先元素
19 | $('.item').parentsUntil();
20 | ```
21 | * @example
22 | ```js
23 | // 获取 .item 元素的所有祖先元素，直到遇到 .parent 元素为止
24 | $('.item').parentsUntil('.parent');
25 | ```
26 | * @example
27 | ```js
28 | // 获取 .item 元素的所有是 div 元素的祖先元素，直到遇到 .parent 元素为止
29 | $('.item').parentsUntil('.parent', 'div');
30 | ```
31 | */
32 | parentsUntil(
33 | selector?: Selector | HTMLElement | JQ,
34 | filter?: Selector,
35 | ): this;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/prependTo.ts:
--------------------------------------------------------------------------------
1 | import './appendTo.js';
2 | import type { HTMLString, Selector, TypeOrArray } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 把当前集合中的元素追加到指定元素内部的前面。
9 | * @param target CSS 选择器、HTML 字符串、DOM 元素、DOM 元素数组、或 JQ 对象
10 | * @returns 由新插入的元素组成的集合
11 | * @example
12 | ```js
13 | $('Hello
').prependTo('I would like to say:
')
14 | //
Hello
I would like to say:
15 | ```
16 | */
17 | prependTo(target: Selector | HTMLString | TypeOrArray | JQ): this;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/prevAll.ts:
--------------------------------------------------------------------------------
1 | import './prev.js';
2 | import type { Selector } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 获取当前集合中，每个元素前面的所有同辈元素组成的集合
9 | * @param selector CSS 选择器。指定该参数时，将仅返回和该参数匹配的元素的集合
10 | * @example
11 | ```js
12 | // 获取 .box 元素前面的所有同辈元素
13 | $('.box').prevAll()
14 | ```
15 | * @example
16 | ```js
17 | // 获取 .box 元素前面的所有含 .selected 的同辈元素
18 | $('.box').prevAll('.selected')
19 | ```
20 | */
21 | prevAll(selector?: Selector): this;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/prevUntil.ts:
--------------------------------------------------------------------------------
1 | import './prev.js';
2 | import type { Selector } from '../shared/helper.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 获取当前集合中，每个元素前面所有的同辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。
9 | * @param selector
10 | * 可以是 CSS 选择器、DOM 元素、或 JQ 对象
11 | *
12 | * 表示遇到和该参数匹配的元素时，停止匹配
13 | *
14 | * 若没有指定该参数，则前面所有同辈元素都将被返回。即和 `.prevAll()` 效果一样
15 | * @param filter CSS 选择器。若指定了该参数，则仅返回和该参数匹配的元素
16 | * @example
17 | ```js
18 | // 获取 .box 元素前面所有的同辈元素
19 | $('.box').prevUntil();
20 | ```
21 | * @example
22 | ```js
23 | // 获取 .box 元素前面的同辈元素，直到遇到 .until 元素为止
24 | $('.box').prevUntil('.until')
25 | ```
26 | * @example
27 | ```js
28 | // 获取 .box 元素前面同辈的 div 元素，直到遇到 .until 元素为止
29 | $('.box').prevUntil('.until', 'div')
30 | ```
31 | */
32 | prevUntil(selector?: Selector | HTMLElement | JQ, filter?: Selector): this;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/remove.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { removeChild } from '../shared/dom.js';
3 | import './each.js';
4 | import './is.js';
5 | import type { JQ } from '../shared/core.js';
6 | import type { Selector } from '../shared/helper.js';
7 |
8 | declare module '../shared/core.js' {
9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
10 | interface JQ {
11 | /**
12 | * 从 DOM 中移除当前集合中的元素
13 | * @param selector CSS 选择器。若指定了该参数，则仅移除当前集合中和该参数匹配的元素
14 | * @example
15 | ```js
16 | // 移除所有 p 元素
17 | $('p').remove()
18 | ```
19 | * @example
20 | ```js
21 | // 移除所有含 .box 的 p 元素
22 | $('p').remove('.box')
23 | ```
24 | */
25 | remove(selector?: Selector): this;
26 | }
27 | }
28 |
29 | $.fn.remove = function (this: JQ, selector?: Selector): JQ {
30 | return this.each((_, element) => {
31 | if (!selector || $(element).is(selector)) {
32 | removeChild(element);
33 | }
34 | });
35 | };
36 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/removeAttr.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { removeAttribute } from '../shared/attributes.js';
3 | import { eachArray } from '../shared/helper.js';
4 | import './each.js';
5 | import type { JQ } from '../shared/core.js';
6 |
7 | declare module '../shared/core.js' {
8 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
9 | interface JQ {
10 | /**
11 | * 移除集合中每个元素上的指定属性
12 | * @param attributeName 属性名，多个属性名可以用空格分隔
13 | * @example
14 | ```js
15 | // 移除一个属性
16 | $('div').removeAttr('title')
17 | ```
18 | * @example
19 | ```js
20 | // 移除多个属性
21 | $('div').removeAttr('title label');
22 | ```
23 | */
24 | removeAttr(attributeName: string): this;
25 | }
26 | }
27 |
28 | $.fn.removeAttr = function (this: JQ, attributeName: string): JQ {
29 | const names = attributeName.split(' ').filter((name) => name);
30 |
31 | return this.each(function () {
32 | eachArray(names, (name) => {
33 | removeAttribute(this, name);
34 | });
35 | });
36 | };
37 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/removeClass.ts:
--------------------------------------------------------------------------------
1 | import './addClass.js';
2 |
3 | declare module '../shared/core.js' {
4 | interface JQ {
5 | /**
6 | * 移除集合中每个元素上的指定 CSS 类
7 | * @param className
8 | * CSS 类名、或返回 CSS 类名的回调函数
9 | *
10 | * 回调函数的第一个参数为元素的索引位置，第二个参数为该元素上原有的 CSS 类名，函数中的 `this` 指向当前元素
11 | *
12 | * 多个 CSS 类名可以用空格分隔
13 | *
14 | * 若没有指定该参数，则将直接移除元素上的 `class` 属性
15 | * @example
16 | ```js
17 | $('p').removeClass('item')
18 | ```
19 | * @example
20 | ```js
21 | $('p').removeClass('item1 item2')
22 | ```
23 | * @example
24 | ```js
25 | $('p').removeClass(function () {
26 | return 'item1';
27 | });
28 | ```
29 | */
30 | removeClass(
31 | className?:
32 | | string
33 | | ((this: T, index: number, oldClassName: string) => string),
34 | ): this;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/removeProp.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import './each.js';
3 | import type { JQ } from '../shared/core.js';
4 |
5 | declare module '../shared/core.js' {
6 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
7 | interface JQ {
8 | /**
9 | * 删除集合中所有元素上指定的 JavaScript 属性值
10 | * @param name 属性名
11 | * @example
12 | ```js
13 | $('input').removeProp('disabled')
14 | ```
15 | */
16 | removeProp(name: string): this;
17 | }
18 | }
19 |
20 | $.fn.removeProp = function (this: JQ, name: string): JQ {
21 | return this.each((_, element) => {
22 | try {
23 | // @ts-ignore
24 | delete element[name];
25 | } catch (_err) {
26 | /* empty */
27 | }
28 | });
29 | };
30 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/replaceAll.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import './clone.js';
3 | import './get.js';
4 | import './map.js';
5 | import './replaceWith.js';
6 | import type { JQ } from '../shared/core.js';
7 | import type { Selector, TypeOrArray } from '../shared/helper.js';
8 |
9 | declare module '../shared/core.js' {
10 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
11 | interface JQ {
12 | /**
13 | * 用当前集合中的元素替换指定元素
14 | * @param target 被替换的元素。可以是 CSS 选择器、DOM 元素、DOM 元素数组、或 JQ 对象
15 | * @returns 用于替换的元素的集合
16 | * @example
17 | ```js
18 | // 用 .new 元素替换所有 .box 元素
19 | $('.new').replaceAll('.box');
20 | ```
21 | */
22 | replaceAll(target: Selector | TypeOrArray | JQ): this;
23 | }
24 | }
25 |
26 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
27 | $.fn.replaceAll = function (this: JQ, target: any): JQ {
28 | return $(target).map((index, element) => {
29 | $(element).replaceWith(index ? this.clone() : this);
30 |
31 | return this.get();
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/serialize.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { param } from '../functions/param.js';
3 | import './serializeArray.js';
4 | import type { JQ } from '../shared/core.js';
5 |
6 | declare module '../shared/core.js' {
7 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
8 | interface JQ {
9 | /**
10 | * 把表单元素的值编译为字符串
11 | * @example
12 | ```js
13 | $('form').serialize();
14 | // golang=456&name=mdui&password=
15 | ```
16 | */
17 | serialize(): string;
18 | }
19 | }
20 |
21 | $.fn.serialize = function (this: JQ): string {
22 | return param(this.serializeArray());
23 | };
24 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/siblings.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import './add.js';
3 | import './nextAll.js';
4 | import './prevAll.js';
5 | import type { JQ } from '../shared/core.js';
6 | import type { Selector } from '../shared/helper.js';
7 |
8 | declare module '../shared/core.js' {
9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
10 | interface JQ {
11 | /**
12 | * 获取当前集合中，每个元素的兄弟元素
13 | * @param selector CSS 选择器。若指定了该参数，则只返回和该参数匹配的兄弟元素
14 | * @example
15 | ```js
16 | // 获取 .box 元素的所有兄弟元素
17 | $('.box').siblings()
18 | ```
19 | * @example
20 | ```js
21 | // 获取 .box 元素的所有兄弟元素中含 .selected 的元素
22 | $('.box').siblings('.selected')
23 | ```
24 | */
25 | siblings(selector?: Selector): this;
26 | }
27 | }
28 |
29 | /**
30 | * 取得同辈元素的集合
31 | * @param selector {String=}
32 | * @returns {JQ}
33 | */
34 | $.fn.siblings = function (this: JQ, selector?: Selector): JQ {
35 | return this.prevAll(selector).add(this.nextAll(selector));
36 | };
37 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/slice.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { JQ } from '../shared/core.js';
3 |
4 | declare module '../shared/core.js' {
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | interface JQ {
7 | /**
8 | * 返回当前集合的子集。
9 | *
10 | * 第一个参数为子集的起始位置，第二个参数为子集的结束位置（不包含结束位置的元素）；若未传入第二个参数，表示包含从起始位置到结尾的所有元素。
11 | * @param start 从该位置开始
12 | * @param end 到该位置结束（不包含该位置）
13 | * @example
14 | ```js
15 | 返回集合中第三个（包含第三个）之后的所有元素
16 | $('div').slice(3);
17 | ```
18 | * @example
19 | ```js
20 | // 返回集合中第三个到第五个（包含第三个，不包含第五个）之间的元素
21 | $('div').slice(3, 5);
22 | ```
23 | */
24 | slice(start: number, end?: number): this;
25 | }
26 | }
27 |
28 | $.fn.slice = function (this: JQ, ...args: [number, number?]): JQ {
29 | return new JQ([].slice.apply(this, args));
30 | };
31 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/text.ts:
--------------------------------------------------------------------------------
1 | import './val.js';
2 |
3 | declare module '../shared/core.js' {
4 | interface JQ {
5 | /**
6 | * 设置当前集合中，每个元素的文本内容
7 | * @param text
8 | * 用于设置的文本
9 | *
10 | * 可以为字符串、数值、布尔值、或回调函数
11 | *
12 | * 回调函数的第一个参数为元素的索引位置，第二个参数为元素原有的文本内容，`this` 指向当前元素
13 | *
14 | * 若文本值或函数返回值为 `undefined`，则不修改对应的文本
15 | * @example
16 | ```js
17 | $('#box').text('text content')
18 | ```
19 | */
20 | text(
21 | text:
22 | | string
23 | | number
24 | | boolean
25 | | undefined
26 | | ((
27 | this: T,
28 | index: number,
29 | oldText: string,
30 | ) => string | number | boolean | void | undefined),
31 | ): this;
32 |
33 | /**
34 | * 获取当前集合中，所有元素的文本内容（包含它们的后代）
35 | * @example
36 | ```js
37 | $('#box').text()
38 | ```
39 | */
40 | text(): string;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/toggle.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { getStyle } from '../shared/css.js';
3 | import './each.js';
4 | import './hide.js';
5 | import './show.js';
6 | import type { JQ } from '../shared/core.js';
7 |
8 | declare module '../shared/core.js' {
9 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
10 | interface JQ {
11 | /**
12 | * 切换集合中所有元素的显示状态
13 | * @example
14 | ```js
15 | $('.box').toggle()
16 | ```
17 | */
18 | toggle(): this;
19 | }
20 | }
21 |
22 | /**
23 | * 切换元素的显示状态
24 | */
25 | $.fn.toggle = function (this: JQ): JQ {
26 | return this.each((_, element) => {
27 | if (getStyle(element, 'display') === 'none') {
28 | $(element).show();
29 | } else {
30 | $(element).hide();
31 | }
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/packages/jq/src/methods/toggleClass.ts:
--------------------------------------------------------------------------------
1 | import './addClass.js';
2 |
3 | declare module '../shared/core.js' {
4 | interface JQ {
5 | /**
6 | * 元素上的 CSS 类，有则删除，无则添加
7 | * @param className
8 | * CSS 类名。可以是字符串、或返回字符串的回调函数
9 | *
10 | * 回调函数的第一个参数为元素的索引位置，第二个参数为该元素上原有的 CSS 类名，函数中的 `this` 指向当前元素
11 | *
12 | * 多个类名之间可以用空格分隔
13 | * @example
14 | ```js
15 | // p 元素上有 item 类，则移除；否则，添加 item 类
16 | $('p').toggleClass('item')
17 | ```
18 | * @example
19 | ```js
20 | // 切换 p 元素上的由回调函数返回的类
21 | $('p').toggleClass(function () {
22 | return 'item';
23 | });
24 | ```
25 | */
26 | toggleClass(
27 | className:
28 | | string
29 | | ((this: T, index: number, currentClassName: string) => string),
30 | ): this;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/jq/src/shared/attributes.ts:
--------------------------------------------------------------------------------
1 | import { isNull } from './helper.js';
2 |
3 | /**
4 | * 获取属性值
5 | * @param element
6 | * @param key 属性键名
7 | * @param defaultValue 当 element.getAttribute 为 null 时，默认返回 undefined
8 | */
9 | export const getAttribute = (
10 | element: Element,
11 | key: string,
12 | defaultValue?: unknown,
13 | ): unknown => {
14 | const value = element.getAttribute(key);
15 |
16 | return isNull(value) ? defaultValue : value;
17 | };
18 |
19 | /**
20 | * 移除属性
21 | * @param element
22 | * @param key 属性键名
23 | */
24 | export const removeAttribute = (element: Element, key: string): void => {
25 | element.removeAttribute(key);
26 | };
27 |
28 | /**
29 | * 设置属性值
30 | * @param element
31 | * @param key 属性键名
32 | * @param value 值，若为 null，则调用 removeAttribute
33 | */
34 | export const setAttribute = (
35 | element: Element,
36 | key: string,
37 | value: string | null,
38 | ): void => {
39 | if (isNull(value)) {
40 | removeAttribute(element, key);
41 | } else {
42 | element.setAttribute(key, value);
43 | }
44 | };
45 |
--------------------------------------------------------------------------------
/packages/jq/src/shared/dom.ts:
--------------------------------------------------------------------------------
1 | import { getDocument } from 'ssr-window';
2 |
3 | /**
4 | * DOM 是否已加载完成
5 | *
6 | * 在 Web Components 中操作组件外部的 DOM、或组件中的 slot 的 DOM 时，必须先判断 DOM 是否已加载完成。
7 | */
8 | export const isDomReady = (document = getDocument()): boolean => {
9 | return /complete|interactive/.test(document.readyState);
10 | };
11 |
12 | export const createElement = (tagName: string): HTMLElement => {
13 | const document = getDocument();
14 | return document.createElement(tagName);
15 | };
16 |
17 | export const appendChild = (element: Node, child: T): T => {
18 | return element.appendChild(child);
19 | };
20 |
21 | export const removeChild = (element: T): T => {
22 | return element.parentNode ? element.parentNode.removeChild(element) : element;
23 | };
24 |
25 | /**
26 | * 获取子节点组成的数组
27 | * @param target
28 | * @param parent
29 | */
30 | export const getChildNodesArray = (
31 | target: string,
32 | parent: string,
33 | ): Array => {
34 | const tempParent = createElement(parent);
35 | tempParent.innerHTML = target;
36 |
37 | return [].slice.call(tempParent.childNodes);
38 | };
39 |
--------------------------------------------------------------------------------
/packages/jq/src/static/ajax.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { ajax } from '../functions/ajax.js';
3 | import type { Options } from '../shared/ajax.js';
4 |
5 | declare module '../shared/core.js' {
6 | interface JQStatic {
7 | /**
8 | * 发送 ajax 请求
9 | * @param options
10 | * @example
11 | ```js
12 | ajax({
13 | method: "POST",
14 | url: "some.php",
15 | data: { name: "John", location: "Boston" }
16 | }).then(function( msg ) {
17 | alert( "Data Saved: " + msg );
18 | });
19 | ```
20 | */
21 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
22 | ajax(options: Options): Promise;
23 | }
24 | }
25 |
26 | $.ajax = ajax;
27 |
--------------------------------------------------------------------------------
/packages/jq/src/static/ajaxSetup.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { ajaxSetup } from '../functions/ajaxSetup.js';
3 | import type { Options } from '../shared/ajax.js';
4 |
5 | declare module '../shared/core.js' {
6 | interface JQStatic {
7 | /**
8 | * 为 Ajax 请求设置全局配置参数
9 | * @param options 键值对参数
10 | * @example
11 | ```js
12 | $.ajaxSetup({
13 | dataType: 'json',
14 | method: 'POST',
15 | });
16 | ```
17 | */
18 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
19 | ajaxSetup(options: Options): Options;
20 | }
21 | }
22 |
23 | $.ajaxSetup = ajaxSetup;
24 |
--------------------------------------------------------------------------------
/packages/jq/src/static/contains.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { contains } from '../functions/contains.js';
3 |
4 | declare module '../shared/core.js' {
5 | interface JQStatic {
6 | /**
7 | * 检查 container 元素内是否包含 contains 元素
8 | * @param container 父元素
9 | * @param contains 子元素
10 | * @example
11 | ```js
12 | $.contains( document, document.body ); // true
13 | $.contains( document.getElementById('test'), document ); // false
14 | $.contains( $('.container').get(0), $('.contains').get(0) ); // false
15 | ```
16 | */
17 | contains(
18 | container: Element | Document | null,
19 | contains: Element | Document | null,
20 | ): boolean;
21 | }
22 | }
23 |
24 | $.contains = contains;
25 |
--------------------------------------------------------------------------------
/packages/jq/src/static/merge.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { merge } from '../functions/merge.js';
3 |
4 | declare module '../shared/core.js' {
5 | interface JQStatic {
6 | /**
7 | * 把第二个数组的元素追加到第一个数组中，并返回合并后的数组
8 | * @param first 第一个数组
9 | * @param second 该数组的元素将被追加到第一个数组中
10 | * @example
11 | ```js
12 | $.merge( [ 0, 1, 2 ], [ 2, 3, 4 ] )
13 | // [ 0, 1, 2, 2, 3, 4 ]
14 | ```
15 | */
16 | merge(first: (T | U)[], second: U[]): Array;
17 | }
18 | }
19 |
20 | $.merge = merge;
21 |
--------------------------------------------------------------------------------
/packages/jq/src/static/removeData.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { removeData } from '../functions/removeData.js';
3 | import type { TypeOrArray } from '../shared/helper.js';
4 |
5 | declare module '../shared/core.js' {
6 | interface JQStatic {
7 | /**
8 | * 移除指定元素上存放的数据
9 | * @param element 存放数据的元素
10 | * @param name
11 | * 数据键名
12 | *
13 | * 若未指定键名，将移除元素上所有数据
14 | *
15 | * 多个键名可以用空格分隔，或者用数组表示多个键名
16 | * @example
17 | ```js
18 | // 移除元素上键名为 name 的数据
19 | $.removeData(document.body, 'name');
20 | ```
21 | * @example
22 | ```js
23 | // 移除元素上键名为 name1 和 name2 的数据
24 | $.removeData(document.body, 'name1 name2');
25 | ```
26 | * @example
27 | ```js
28 | // 移除元素上键名为 name1 和 name2 的数据
29 | $.removeData(document.body, ['name1', 'name2']);
30 | ```
31 | * @example
32 | ```js
33 | // 移除元素上所有数据
34 | $.removeData(document.body);
35 | ```
36 | */
37 | removeData(
38 | element: Element | Document | Window,
39 | name?: TypeOrArray,
40 | ): void;
41 | }
42 | }
43 |
44 | $.removeData = removeData;
45 |
--------------------------------------------------------------------------------
/packages/jq/src/static/unique.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '../$.js';
2 | import { unique } from '../functions/unique.js';
3 |
4 | declare module '../shared/core.js' {
5 | interface JQStatic {
6 | /**
7 | * 过滤掉数组中的重复元素
8 | * @param arr 数组
9 | * @example
10 | ```js
11 | unique([1, 2, 12, 3, 2, 1, 2, 1, 1]);
12 | // [1, 2, 12, 3]
13 | ```
14 | */
15 | unique(arr: T[]): T[];
16 | }
17 | }
18 |
19 | $.unique = unique;
20 |
--------------------------------------------------------------------------------
/packages/jq/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig",
3 | "include": ["./src/**/*.ts"],
4 | "exclude": [],
5 | "compilerOptions": {
6 | "declarationDir": "./",
7 | "outDir": "./"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mdui/.gitignore:
--------------------------------------------------------------------------------
1 | src/components/**/*style.ts
2 | src/functions/utils/locale-codes.ts
3 | src/locales
4 | mdui.css
5 | custom-elements.json
6 | html-data.*.json
7 | css-data.*.json
8 | web-types.*.json
9 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/avatar.ts:
--------------------------------------------------------------------------------
1 | export * from './avatar/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/avatar/style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | --shape-corner: var(--mdui-shape-corner-full);
3 |
4 | position: relative;
5 | display: inline-flex;
6 | align-items: center;
7 | justify-content: center;
8 | flex-shrink: 0;
9 | overflow: hidden;
10 | white-space: nowrap;
11 | vertical-align: middle;
12 | border-radius: var(--shape-corner);
13 | user-select: none;
14 | .width(40);
15 | .height(40);
16 | .background-color(primary-container);
17 | .color(on-primary-container);
18 | .typescale(title-medium);
19 | }
20 |
21 | img {
22 | width: 100%;
23 | height: 100%;
24 | }
25 |
26 | mdui-icon,
27 | ::slotted(mdui-icon) {
28 | font-size: 1.5em;
29 | }
30 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/badge.ts:
--------------------------------------------------------------------------------
1 | export * from './badge/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/badge/style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | --shape-corner: var(--mdui-shape-corner-full);
3 |
4 | display: inline-flex;
5 | align-items: center;
6 | justify-content: center;
7 | flex-shrink: 0;
8 | border-radius: var(--shape-corner);
9 | .padding-left(4);
10 | .padding-right(4);
11 | .color(on-error);
12 | .background-color(error);
13 | .height(16);
14 | .min-width(16);
15 | .typescale(label-small);
16 | }
17 |
18 | :host([variant="small"]) {
19 | min-width: 0;
20 | padding: 0;
21 | .width(6);
22 | .height(6);
23 | }
24 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/bottom-app-bar.ts:
--------------------------------------------------------------------------------
1 | export * from './bottom-app-bar/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/button-icon.ts:
--------------------------------------------------------------------------------
1 | export * from './button-icon/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/button.ts:
--------------------------------------------------------------------------------
1 | export * from './button/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/button/button-base-style.less:
--------------------------------------------------------------------------------
1 | .button {
2 | position: relative;
3 | display: inline-flex;
4 | align-items: center;
5 | justify-content: center;
6 | height: 100%;
7 | padding: 0;
8 | overflow: hidden;
9 | color: inherit;
10 | font-size: inherit;
11 | font-family: inherit;
12 | font-weight: inherit;
13 | letter-spacing: inherit;
14 | white-space: nowrap;
15 | text-align: center;
16 | text-decoration: none;
17 | vertical-align: middle;
18 | background: transparent;
19 | border: none;
20 | outline: none;
21 | cursor: inherit;
22 | user-select: none;
23 | touch-action: manipulation; // 移除点击延迟触发
24 | zoom: 1;
25 | -webkit-user-drag: none;
26 | }
27 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/card.ts:
--------------------------------------------------------------------------------
1 | export * from './card/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/checkbox.ts:
--------------------------------------------------------------------------------
1 | export * from './checkbox/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/chip.ts:
--------------------------------------------------------------------------------
1 | export * from './chip/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/circular-progress.ts:
--------------------------------------------------------------------------------
1 | export * from './circular-progress/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/collapse-item.ts:
--------------------------------------------------------------------------------
1 | export * from './collapse/collapse-item.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/collapse.ts:
--------------------------------------------------------------------------------
1 | export * from './collapse/collapse.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/collapse/collapse-item-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | flex-direction: column;
4 | }
5 |
6 | .header {
7 | display: block;
8 | }
9 |
10 | .body {
11 | display: block;
12 | overflow: hidden;
13 | .transition(height, short4, emphasized);
14 |
15 | &.opened {
16 | overflow: visible;
17 | }
18 |
19 | &.active {
20 | .transition-duration(medium4);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/collapse/collapse-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/dialog.ts:
--------------------------------------------------------------------------------
1 | export * from './dialog/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/divider.ts:
--------------------------------------------------------------------------------
1 | export * from './divider/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/divider/style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | .height(1);
4 | .background-color(surface-variant);
5 | }
6 |
7 | :host([inset]:not([inset="false" i])) {
8 | .margin-left(16);
9 | }
10 |
11 | :host([middle]:not([middle="false" i])) {
12 | .margin-left(16);
13 | .margin-right(16);
14 | }
15 |
16 | :host([vertical]:not([vertical="false" i])) {
17 | height: 100%;
18 | .width(1);
19 | }
20 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/dropdown.ts:
--------------------------------------------------------------------------------
1 | export * from './dropdown/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/dropdown/style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | --z-index: 2100;
3 |
4 | display: contents;
5 | }
6 |
7 | .panel {
8 | display: block;
9 | position: fixed;
10 | z-index: var(--z-index);
11 | }
12 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/fab.ts:
--------------------------------------------------------------------------------
1 | export * from './fab/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/icon.ts:
--------------------------------------------------------------------------------
1 | export * from './icon/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/icon/style.less:
--------------------------------------------------------------------------------
1 | // 参见：https://google.github.io/material-design-icons/
2 | :host {
3 | display: inline-block;
4 | width: 1em;
5 | height: 1em;
6 | font-weight: normal;
7 | font-family: "Material Icons";
8 | font-display: block;
9 | font-style: normal;
10 | line-height: 1;
11 | direction: ltr;
12 | letter-spacing: normal;
13 | white-space: nowrap;
14 | text-transform: none;
15 | word-wrap: normal;
16 |
17 | /* Support for all WebKit browsers. */
18 | -webkit-font-smoothing: antialiased;
19 |
20 | /* Support for Safari and Chrome. */
21 | text-rendering: optimizelegibility;
22 |
23 | /* Support for Firefox. */
24 | -moz-osx-font-smoothing: grayscale;
25 | .font-size(24);
26 | }
27 |
28 | svg,
29 | ::slotted(svg) {
30 | width: 100%;
31 | height: 100%;
32 | fill: currentcolor;
33 | }
34 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/layout-item.ts:
--------------------------------------------------------------------------------
1 | export * from './layout/layout-item.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/layout-main.ts:
--------------------------------------------------------------------------------
1 | export * from './layout/layout-main.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/layout.ts:
--------------------------------------------------------------------------------
1 | export * from './layout/layout.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/layout/layout-item-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | z-index: 1;
4 | }
5 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/layout/layout-main-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | flex: 1 0 auto;
3 | max-width: 100%;
4 | overflow: auto;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/layout/layout-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | position: relative;
3 | display: flex;
4 | flex: 1 1 auto;
5 | overflow: hidden;
6 | }
7 |
8 | :host([full-height]:not([full-height="false" i])) {
9 | height: 100%;
10 | }
11 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/linear-progress.ts:
--------------------------------------------------------------------------------
1 | export * from './linear-progress/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/list-item.ts:
--------------------------------------------------------------------------------
1 | export * from './list/list-item.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/list-subheader.ts:
--------------------------------------------------------------------------------
1 | export * from './list/list-subheader.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/list.ts:
--------------------------------------------------------------------------------
1 | export * from './list/list.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/list/list-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | .padding(8, 0);
4 | }
5 |
6 | ::slotted(mdui-divider[middle]) {
7 | .margin-left(16);
8 | .margin-right(24);
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/list/list-subheader-style.less:
--------------------------------------------------------------------------------
1 | /* 规范中没有该描述 */
2 | :host {
3 | display: block;
4 | overflow: hidden;
5 | white-space: nowrap;
6 | text-overflow: ellipsis;
7 | cursor: default;
8 | .color(on-surface-variant);
9 | .typescale(label-small);
10 | .padding-left(16);
11 | .padding-right(24);
12 | .height(56);
13 | .line-height(56);
14 | }
15 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/menu-item.ts:
--------------------------------------------------------------------------------
1 | export * from './menu/menu-item.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/menu.ts:
--------------------------------------------------------------------------------
1 | export * from './menu/menu.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/menu/menu-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | --shape-corner: var(--mdui-shape-corner-extra-small);
3 |
4 | position: relative;
5 | display: block;
6 | border-radius: var(--shape-corner);
7 | .background-color(surface-container);
8 | .elevation(2);
9 | .min-width(112);
10 | .max-width(280);
11 | .padding-top(8);
12 | .padding-bottom(8);
13 | .state-layer-color(on-surface);
14 | }
15 |
16 | ::slotted(mdui-divider) {
17 | .margin-top(8);
18 | .margin-bottom(8);
19 | }
20 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/navigation-bar-item.ts:
--------------------------------------------------------------------------------
1 | export * from './navigation-bar/navigation-bar-item.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/navigation-bar.ts:
--------------------------------------------------------------------------------
1 | export * from './navigation-bar/navigation-bar.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/navigation-bar/navigation-bar-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | --shape-corner: var(--mdui-shape-corner-none);
3 | --z-index: 2000;
4 |
5 | position: fixed;
6 | right: 0;
7 | bottom: 0;
8 | left: 0;
9 | display: flex;
10 | flex: 0 0 auto;
11 | overflow: hidden;
12 | border-radius: var(--shape-corner) var(--shape-corner) 0 0;
13 | z-index: var(--z-index);
14 | transition-property: transform;
15 | .transition-duration(long2);
16 | .transition-timing-function(emphasized);
17 | .height(80);
18 | .background-color(surface);
19 | .elevation(2);
20 | }
21 |
22 | :host([scroll-target]:not([scroll-target=""])) {
23 | position: absolute;
24 | }
25 |
26 | :host([hide]:not([hide="false" i])) {
27 | .translate-y(80 + 10);
28 | .transition-duration(short4);
29 | }
30 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/navigation-drawer.ts:
--------------------------------------------------------------------------------
1 | export * from './navigation-drawer/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/navigation-rail-item.ts:
--------------------------------------------------------------------------------
1 | export * from './navigation-rail/navigation-rail-item.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/navigation-rail.ts:
--------------------------------------------------------------------------------
1 | export * from './navigation-rail/navigation-rail.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/radio-group.ts:
--------------------------------------------------------------------------------
1 | export * from './radio/radio-group.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/radio.ts:
--------------------------------------------------------------------------------
1 | export * from './radio/radio.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/radio/radio-group-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: inline-block;
3 | }
4 |
5 | fieldset {
6 | border: none;
7 | padding: 0;
8 | margin: 0;
9 | min-width: 0;
10 | }
11 |
12 | input {
13 | position: absolute;
14 | padding: 0;
15 | opacity: 0;
16 | pointer-events: none;
17 | .width(20);
18 | .height(20);
19 | .margin(0, 0, 0, 10);
20 | }
21 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/range-slider.ts:
--------------------------------------------------------------------------------
1 | export * from './range-slider/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/ripple.ts:
--------------------------------------------------------------------------------
1 | export * from './ripple/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/segmented-button-group.ts:
--------------------------------------------------------------------------------
1 | export * from './segmented-button/segmented-button-group.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/segmented-button.ts:
--------------------------------------------------------------------------------
1 | export * from './segmented-button/segmented-button.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/segmented-button/segmented-button-group-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | --shape-corner: var(--mdui-shape-corner-full);
3 |
4 | position: relative;
5 | display: inline-flex;
6 | vertical-align: middle;
7 | .height(40);
8 | .typescale(label-large);
9 | .color(on-surface);
10 | .state-layer-color(on-surface);
11 | }
12 |
13 | :host([full-width]:not([full-width="false" i])) {
14 | display: flex;
15 | flex-wrap: nowrap;
16 | }
17 |
18 | input,
19 | select {
20 | position: absolute;
21 | width: 100%;
22 | height: 100%;
23 | padding: 0;
24 | opacity: 0;
25 | pointer-events: none;
26 | }
27 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/select.ts:
--------------------------------------------------------------------------------
1 | export * from './select/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/select/style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: inline-block;
3 | width: 100%;
4 | }
5 |
6 | .hidden-input {
7 | display: none;
8 | }
9 |
10 | .text-field {
11 | cursor: pointer;
12 | }
13 |
14 | .chips {
15 | display: flex;
16 | flex-wrap: wrap;
17 | .margin(-8, -4);
18 | .min-height(40);
19 |
20 | :host([variant="filled"][label]) & {
21 | .margin(0, -4, -16, -4);
22 | }
23 | }
24 |
25 | .chip {
26 | .margin(4);
27 | }
28 |
29 | mdui-menu {
30 | max-width: none;
31 | }
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/slider.ts:
--------------------------------------------------------------------------------
1 | export * from './slider/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/slider/style.less:
--------------------------------------------------------------------------------
1 | .track-active {
2 | .left(-2); // 为了使标记点位于轨道内，所以往左侧移动 2px
3 | .shape-corner(full, start);
4 | }
5 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/snackbar.ts:
--------------------------------------------------------------------------------
1 | export * from './snackbar/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/switch.ts:
--------------------------------------------------------------------------------
1 | export * from './switch/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/tab-panel.ts:
--------------------------------------------------------------------------------
1 | export * from './tabs/tab-panel.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/tab.ts:
--------------------------------------------------------------------------------
1 | export * from './tabs/tab.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/tabs.ts:
--------------------------------------------------------------------------------
1 | export * from './tabs/tabs.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/tabs/tab-panel-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | overflow-y: auto;
4 | flex: 1 1 auto;
5 | }
6 |
7 | :host(:not([active])) {
8 | display: none;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/text-field.ts:
--------------------------------------------------------------------------------
1 | export * from './text-field/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/tooltip.ts:
--------------------------------------------------------------------------------
1 | export * from './tooltip/index.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/top-app-bar-title.ts:
--------------------------------------------------------------------------------
1 | export * from './top-app-bar/top-app-bar-title.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/components/top-app-bar.ts:
--------------------------------------------------------------------------------
1 | export * from './top-app-bar/top-app-bar.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/breakpoint.ts:
--------------------------------------------------------------------------------
1 | export { breakpoint } from '@mdui/shared/helpers/breakpoint.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/getColorFromImage.ts:
--------------------------------------------------------------------------------
1 | import {
2 | sourceColorFromImage,
3 | hexFromArgb,
4 | } from '@material/material-color-utilities';
5 | import { $ } from '@mdui/jq/$.js';
6 | import type { JQ } from '@mdui/jq/shared/core.js';
7 |
8 | /**
9 | * 根据指定的图片，提取出主色调的十六进制颜色值
10 | * @param image `,
15 | ): Promise => {
16 | const $image = $(image) as JQ;
17 | const source = await sourceColorFromImage($image[0]);
18 | return hexFromArgb(source);
19 | };
20 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/getLocale.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getLocale as getLocaleInternal,
3 | uninitializedError,
4 | } from '../internal/localize.js';
5 | import type { GetLocal } from '../internal/localize.js';
6 |
7 | /**
8 | * 获取当前的语言代码。如果当前正在加载新的语言包，则该函数仍返回先前的语言代码
9 | * @return string 当前的语言代码
10 | */
11 | export const getLocale: GetLocal = () => {
12 | if (!getLocaleInternal) {
13 | throw new Error(uninitializedError);
14 | }
15 |
16 | return getLocaleInternal();
17 | };
18 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/getTheme.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '@mdui/jq/$.js';
2 | import type { Theme } from '../internal/theme.js';
3 | import type { JQ } from '@mdui/jq/shared/core.js';
4 |
5 | /**
6 | * 获取在指定元素上设置的主题。
7 | * 未传入参数时，默认获取 `` 元素上的主题。
8 | * 元素上未设置过主题时，默认返回 `light`。
9 | * @param target 获取该元素上的主题。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `` 元素
10 | * @return Theme 当前主题，值为 `light`、`dark` 或 `auto`
11 | */
12 | export const getTheme = (
13 | target: string | HTMLElement | JQ = document.documentElement,
14 | ): Theme => {
15 | const element = $(target)[0];
16 | const themes: Theme[] = ['light', 'dark', 'auto'];
17 | const prefix = 'mdui-theme-';
18 |
19 | return (Array.from(element.classList)
20 | .find((className) =>
21 | themes.map((theme) => prefix + theme).includes(className),
22 | )
23 | ?.slice(prefix.length) ?? 'light') as Theme;
24 | };
25 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/loadLocale.ts:
--------------------------------------------------------------------------------
1 | import { initializeLocalize } from '../internal/localize.js';
2 | import type { LoadFunc } from '../internal/localize.js';
3 |
4 | /**
5 | * 加载语言包。参数为一个函数，该函数接收一个语言代码作为参数，返回一个 Promise，resolve 的值为对应的语言包
6 | * @param loadFunc
7 | */
8 | export const loadLocale: (loadFunc: LoadFunc) => void = (loadFunc) => {
9 | initializeLocalize(loadFunc);
10 | };
11 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/observeResize.ts:
--------------------------------------------------------------------------------
1 | export { observeResize } from '@mdui/shared/helpers/observeResize.js';
2 | export type { ObserveResize } from '@mdui/shared/helpers/observeResize.js';
3 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/removeColorScheme.ts:
--------------------------------------------------------------------------------
1 | import { remove } from '../internal/colorScheme.js';
2 | import type { JQ } from '@mdui/jq/shared/core.js';
3 |
4 | /**
5 | * 移除指定元素上的配色方案
6 | * @param target 要移除配色方案的元素。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `` 元素
7 | */
8 | export const removeColorScheme = (
9 | target: string | HTMLElement | JQ = document.documentElement,
10 | ): void => {
11 | remove(target);
12 | };
13 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/setColorScheme.ts:
--------------------------------------------------------------------------------
1 | import { argbFromHex } from '@material/material-color-utilities';
2 | import { setFromSource } from '../internal/colorScheme.js';
3 | import type { CustomColor } from '../internal/colorScheme.js';
4 | import type { JQ } from '@mdui/jq/shared/core.js';
5 |
6 | /**
7 | * 在指定元素上设置配色方案
8 | * @param hex 十六进制颜色值，如 #f82506
9 | * @param options
10 | * @param options.target 要设置配色方案的元素。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `` 元素
11 | * @param options.customColors 自定义颜色数组
12 | * @param options.customColors[].name 自定义颜色名
13 | * @param options.customColors[].value 自定义十六进制颜色值，如 #f82506
14 | */
15 | export const setColorScheme = (
16 | hex: string,
17 | options?: {
18 | target?: string | HTMLElement | JQ;
19 | customColors?: CustomColor[];
20 | },
21 | ): void => {
22 | const source = argbFromHex(hex);
23 | setFromSource(source, options);
24 | };
25 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/setLocale.ts:
--------------------------------------------------------------------------------
1 | import {
2 | setLocale as setLocaleInternal,
3 | uninitializedError,
4 | } from '../internal/localize.js';
5 | import type { SetLocal } from '../internal/localize.js';
6 |
7 | /**
8 | * 切换到指定的语言。返回 Promise，在新的语言包加载完成后 resolve
9 | * @param locale 语言代码
10 | */
11 | export const setLocale: SetLocal = (locale) => {
12 | if (!setLocaleInternal) {
13 | throw new Error(uninitializedError);
14 | }
15 |
16 | return setLocaleInternal(locale);
17 | };
18 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/setTheme.ts:
--------------------------------------------------------------------------------
1 | import { $ } from '@mdui/jq/$.js';
2 | import '@mdui/jq/methods/addClass.js';
3 | import '@mdui/jq/methods/removeClass.js';
4 | import type { Theme } from '../internal/theme.js';
5 | import type { JQ } from '@mdui/jq/shared/core.js';
6 |
7 | /**
8 | * 在当前页面、或指定元素上设置主题。
9 | * @param theme 要设置的主题。值为 `light`、`dark` 或 `auto`
10 | * @param target 在该元素上设置主题。可以是 CSS 选择器、DOM 元素、或 JQ 对象。默认为 `` 元素
11 | */
12 | export const setTheme = (
13 | theme: Theme,
14 | target: string | HTMLElement | JQ = document.documentElement,
15 | ): void => {
16 | const $target = $(target);
17 | const themes: Theme[] = ['light', 'dark', 'auto'];
18 | const prefix = 'mdui-theme-';
19 |
20 | $target
21 | .removeClass(themes.map((theme) => prefix + theme).join(' '))
22 | .addClass(prefix + theme);
23 | };
24 |
--------------------------------------------------------------------------------
/packages/mdui/src/functions/throttle.ts:
--------------------------------------------------------------------------------
1 | export { throttle } from '@mdui/shared/helpers/throttle.js';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/internal/theme.ts:
--------------------------------------------------------------------------------
1 | export type Theme = 'light' | 'dark' | 'auto';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/jq.ts:
--------------------------------------------------------------------------------
1 | export * from '@mdui/jq';
2 |
--------------------------------------------------------------------------------
/packages/mdui/src/styles/breakpoint.less:
--------------------------------------------------------------------------------
1 | :root {
2 | /**
3 | * 断点：https://m3.material.io/foundations/adaptive-design/large-screens/overview
4 | * 该自定义属性值仅供 JavaScript 读取，请始终以 px 作为单位。CSS 媒体查询不支持使用 CSS 自定义属性。
5 |
6 | * xs：=0px
7 | * sm: <600px
8 | * md：>=600px & <840px
9 | * lg：>=840px & <1080px
10 | * xl：>=1080px & < 1920px
11 | * xxl：>=1920px
12 | */
13 | --mdui-breakpoint-xs: @mdui-breakpoint-xs;
14 | --mdui-breakpoint-sm: @mdui-breakpoint-sm;
15 | --mdui-breakpoint-md: @mdui-breakpoint-md;
16 | --mdui-breakpoint-lg: @mdui-breakpoint-lg;
17 | --mdui-breakpoint-xl: @mdui-breakpoint-xl;
18 | --mdui-breakpoint-xxl: @mdui-breakpoint-xxl;
19 | }
20 |
--------------------------------------------------------------------------------
/packages/mdui/src/styles/elevation.less:
--------------------------------------------------------------------------------
1 | :root {
2 | /**
3 | * 不同高程对应的阴影值：无官方文档
4 | */
5 | --mdui-elevation-level0: none;
6 | --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
7 | --mdui-elevation-level2: 0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
8 | --mdui-elevation-level3: 0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%);
9 | --mdui-elevation-level4: 0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%);
10 | --mdui-elevation-level5: 0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%);
11 | }
12 |
--------------------------------------------------------------------------------
/packages/mdui/src/styles/index.less:
--------------------------------------------------------------------------------
1 | @import "./breakpoint.less";
2 | @import "./color.less";
3 | @import "./elevation.less";
4 | @import "./motion.less";
5 | @import "./prose.less";
6 | @import "./shape.less";
7 | @import "./state.less";
8 | @import "./typescale.less";
9 |
10 | .mdui-lock-screen {
11 | overflow: hidden !important;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/mdui/src/styles/state.less:
--------------------------------------------------------------------------------
1 | :root {
2 | /**
3 | * 状态层透明度：https://m3.material.io/foundations/interaction/states/state-layers#bf9b84b2-690c-44b2-8429-8c42dc012d43
4 | */
5 | --mdui-state-layer-hover: 0.08;
6 | --mdui-state-layer-focus: 0.12;
7 | --mdui-state-layer-pressed: 0.12;
8 | --mdui-state-layer-dragged: 0.16;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ar-eg.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | يرجى تطابق التنسيق المطلوب.
8 |
9 |
10 | OK
11 | حسنًا
12 |
13 |
14 | OK
15 | حسنًا
16 |
17 |
18 | Cancel
19 | إلغاء
20 |
21 |
22 | OK
23 | حسنًا
24 |
25 |
26 | Cancel
27 | إلغاء
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/az-az.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Zəhmət olmasa, tələb olunan formatla uyğun gəlin.
8 |
9 |
10 | OK
11 | Oldu
12 |
13 |
14 | OK
15 | Oldu
16 |
17 |
18 | Cancel
19 | Ləğv et
20 |
21 |
22 | OK
23 | Oldu
24 |
25 |
26 | Cancel
27 | Ləğv et
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/be-by.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Калі ласка, адпавядайце патрабаванаму фармату.
8 |
9 |
10 | OK
11 | Добра
12 |
13 |
14 | OK
15 | Добра
16 |
17 |
18 | Cancel
19 | Адмяніць
20 |
21 |
22 | OK
23 | Добра
24 |
25 |
26 | Cancel
27 | Адмяніць
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/bg-bg.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Моля, съответствайте на изискания формат.
8 |
9 |
10 | OK
11 | ОК
12 |
13 |
14 | OK
15 | ОК
16 |
17 |
18 | Cancel
19 | Отказ
20 |
21 |
22 | OK
23 | ОК
24 |
25 |
26 | Cancel
27 | Отказ
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ca-es.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Si us plau, compleix el format sol·licitat.
8 |
9 |
10 | OK
11 | D'acord
12 |
13 |
14 | OK
15 | D'acord
16 |
17 |
18 | Cancel
19 | Cancel·lar
20 |
21 |
22 | OK
23 | D'acord
24 |
25 |
26 | Cancel
27 | Cancel·lar
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/cs-cz.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Prosím, zadejte požadovaný formát.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Zrušit
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Zrušit
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/da-dk.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Venligst match den ønskede form.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Annuller
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Annuller
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/de-de.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Bitte passen Sie das angeforderte Format an.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Abbrechen
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Abbrechen
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/el-gr.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Παρακαλώ ταιριάστε με το απαιτούμενο μορφότυπο.
8 |
9 |
10 | OK
11 | Εντάξει
12 |
13 |
14 | OK
15 | Εντάξει
16 |
17 |
18 | Cancel
19 | Ακύρωση
20 |
21 |
22 | OK
23 | Εντάξει
24 |
25 |
26 | Cancel
27 | Ακύρωση
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/en-gb.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Please match the requested format.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Cancel
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Cancel
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/es-es.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Por favor, cumpla con el formato solicitado.
8 |
9 |
10 | OK
11 | Aceptar
12 |
13 |
14 | OK
15 | Aceptar
16 |
17 |
18 | Cancel
19 | Cancelar
20 |
21 |
22 | OK
23 | Aceptar
24 |
25 |
26 | Cancel
27 | Cancelar
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/et-ee.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Palun vastake nõutud formaadiga.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Loobu
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Loobu
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/fa-ir.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | لطفاً به فرمت درخواست شده مطابقت دهید.
8 |
9 |
10 | OK
11 | تایید
12 |
13 |
14 | OK
15 | تایید
16 |
17 |
18 | Cancel
19 | لغو
20 |
21 |
22 | OK
23 | تایید
24 |
25 |
26 | Cancel
27 | لغو
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/fi-fi.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Ole hyvä ja vastaa pyydettyä muotoa.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Peruuta
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Peruuta
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/fr-be.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Veuillez respecter le format demandé.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Annuler
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Annuler
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/fr-ca.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Veuillez respecter le format demandé.
8 |
9 |
10 | OK
11 | D'accord
12 |
13 |
14 | OK
15 | D'accord
16 |
17 |
18 | Cancel
19 | Annuler
20 |
21 |
22 | OK
23 | D'accord
24 |
25 |
26 | Cancel
27 | Annuler
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/fr-fr.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Veuillez respecter le format demandé.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Annuler
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Annuler
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ga-ie.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Tabhair aghaidh ar an bhformáid a iarradh, le do thoil.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Cealaigh
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Cealaigh
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/gl-es.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Por favor, concorda co formato solicitado.
8 |
9 |
10 | OK
11 | Aceptar
12 |
13 |
14 | OK
15 | Aceptar
16 |
17 |
18 | Cancel
19 | Cancelar
20 |
21 |
22 | OK
23 | Aceptar
24 |
25 |
26 | Cancel
27 | Cancelar
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/he-il.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | אנא התאים לפורמט המבוקש.
8 |
9 |
10 | OK
11 | אישור
12 |
13 |
14 | OK
15 | אישור
16 |
17 |
18 | Cancel
19 | ביטול
20 |
21 |
22 | OK
23 | אישור
24 |
25 |
26 | Cancel
27 | ביטול
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/hi-in.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | कृपया अनुरोधित स्वरूप को मेल खाएँ।
8 |
9 |
10 | OK
11 | ठीक है
12 |
13 |
14 | OK
15 | ठीक है
16 |
17 |
18 | Cancel
19 | रद्द करें
20 |
21 |
22 | OK
23 | ठीक है
24 |
25 |
26 | Cancel
27 | रद्द करें
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/hr-hr.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Molimo podudarajte se s traženim formatom.
8 |
9 |
10 | OK
11 | U redu
12 |
13 |
14 | OK
15 | U redu
16 |
17 |
18 | Cancel
19 | Odustani
20 |
21 |
22 | OK
23 | U redu
24 |
25 |
26 | Cancel
27 | Odustani
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/hu-hu.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Kérlek, illeszd a kért formátumhoz.
8 |
9 |
10 | OK
11 | Rendben
12 |
13 |
14 | OK
15 | Rendben
16 |
17 |
18 | Cancel
19 | Mégse
20 |
21 |
22 | OK
23 | Rendben
24 |
25 |
26 | Cancel
27 | Mégse
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/hy-am.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Խնդրում ենք համապատասխանեք հայցվող ձևաչափին։
8 |
9 |
10 | OK
11 | Լավ
12 |
13 |
14 | OK
15 | Լավ
16 |
17 |
18 | Cancel
19 | Չեղարկել
20 |
21 |
22 | OK
23 | Լավ
24 |
25 |
26 | Cancel
27 | Չեղարկել
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/id-id.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Harap sesuaikan format yang diminta.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Batalkan
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Batalkan
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/is-is.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Vinsamlegast samsvarið við beiðni um snið.
8 |
9 |
10 | OK
11 | Í lagi
12 |
13 |
14 | OK
15 | Í lagi
16 |
17 |
18 | Cancel
19 | Hætta við
20 |
21 |
22 | OK
23 | Í lagi
24 |
25 |
26 | Cancel
27 | Hætta við
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/it-it.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Si prega di corrispondere al formato richiesto.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Annulla
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Annulla
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ja-jp.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | 要求された形式と一致させてください。
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | キャンセル
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | キャンセル
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ka-ge.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | გთხოვთ, შეიყვანოთ მოთხოვნილი ფორმატი.
8 |
9 |
10 | OK
11 | კარგი
12 |
13 |
14 | OK
15 | კარგი
16 |
17 |
18 | Cancel
19 | გაუქმება
20 |
21 |
22 | OK
23 | კარგი
24 |
25 |
26 | Cancel
27 | გაუქმება
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/kk-kz.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Сұрақтың талап еткен пішіні тексеріңіз.
8 |
9 |
10 | OK
11 | Жақсы
12 |
13 |
14 | OK
15 | Жақсы
16 |
17 |
18 | Cancel
19 | Болдырмау
20 |
21 |
22 | OK
23 | Жақсы
24 |
25 |
26 | Cancel
27 | Болдырмау
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/km-kh.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | សូមផ្គូផ្គងទៅនឹងទ្រង់ទ្រាយដែលបានស្នើរ។
8 |
9 |
10 | OK
11 | យល់ព្រម
12 |
13 |
14 | OK
15 | យល់ព្រម
16 |
17 |
18 | Cancel
19 | បោះបង់
20 |
21 |
22 | OK
23 | យល់ព្រម
24 |
25 |
26 | Cancel
27 | បោះបង់
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/kmr-iq.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | تکایە یەکخستنەوە لەگەڵ فۆرماتی داواکراو.
8 |
9 |
10 | OK
11 | باشە
12 |
13 |
14 | OK
15 | باشە
16 |
17 |
18 | Cancel
19 | هەڵوەشاندنەوە
20 |
21 |
22 | OK
23 | باشە
24 |
25 |
26 | Cancel
27 | هەڵوەشاندنەوە
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/kn-in.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | ಕೋರಿದ ನಮೂನೆಯನ್ನು ಹೊಂದಿಸಿ.
8 |
9 |
10 | OK
11 | ಸರಿ
12 |
13 |
14 | OK
15 | ಸರಿ
16 |
17 |
18 | Cancel
19 | ರದ್ದು ಮಾಡು
20 |
21 |
22 | OK
23 | ಸರಿ
24 |
25 |
26 | Cancel
27 | ರದ್ದು ಮಾಡು
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ko-kr.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | 요청된 형식과 일치시켜 주세요.
8 |
9 |
10 | OK
11 | 확인
12 |
13 |
14 | OK
15 | 확인
16 |
17 |
18 | Cancel
19 | 취소
20 |
21 |
22 | OK
23 | 확인
24 |
25 |
26 | Cancel
27 | 취소
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/lt-lt.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Prašome atitikti prašomą formatą.
8 |
9 |
10 | OK
11 | Gerai
12 |
13 |
14 | OK
15 | Gerai
16 |
17 |
18 | Cancel
19 | Atšaukti
20 |
21 |
22 | OK
23 | Gerai
24 |
25 |
26 | Cancel
27 | Atšaukti
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/lv-lv.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Lūdzu, atbilstiet pieprasītajam formātam.
8 |
9 |
10 | OK
11 | Labi
12 |
13 |
14 | OK
15 | Labi
16 |
17 |
18 | Cancel
19 | Atcelt
20 |
21 |
22 | OK
23 | Labi
24 |
25 |
26 | Cancel
27 | Atcelt
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/mk-mk.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Ве молиме, внесете го бараниот формат.
8 |
9 |
10 | OK
11 | Во ред
12 |
13 |
14 | OK
15 | Во ред
16 |
17 |
18 | Cancel
19 | Откажи
20 |
21 |
22 | OK
23 | Во ред
24 |
25 |
26 | Cancel
27 | Откажи
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ml-in.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | ദയവായി അനുഗ്രഹിക്കുക, അഭ്യർത്ഥിച്ച ഫോർമാറ്റ് പൊരുതുക.
8 |
9 |
10 | OK
11 | ശരി
12 |
13 |
14 | OK
15 | ശരി
16 |
17 |
18 | Cancel
19 | റദ്ദാക്കുക
20 |
21 |
22 | OK
23 | ശരി
24 |
25 |
26 | Cancel
27 | റദ്ദാക്കുക
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/mn-mn.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Та хүссэн загвартай тааруулж байхаар оруулна уу.
8 |
9 |
10 | OK
11 | Зөв
12 |
13 |
14 | OK
15 | Зөв
16 |
17 |
18 | Cancel
19 | Цуцлах
20 |
21 |
22 | OK
23 | Зөв
24 |
25 |
26 | Cancel
27 | Цуцлах
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ms-my.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Sila padankan format yang diminta.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Batal
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Batal
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/nb-no.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Vennligst match den forespurte formatet.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Avbryt
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Avbryt
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ne-np.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | कृपया अनुरोधित स्वरूपको मेल खाली जानुहोस्।
8 |
9 |
10 | OK
11 | ठिक छ
12 |
13 |
14 | OK
15 | ठिक छ
16 |
17 |
18 | Cancel
19 | रद्द गर्नुहोस्
20 |
21 |
22 | OK
23 | ठिक छ
24 |
25 |
26 | Cancel
27 | रद्द गर्नुहोस्
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/nl-be.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Gelieve het gevraagde formaat overeen te laten komen.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Annuleren
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Annuleren
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/nl-nl.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Graag overeenkomen met het gevraagde formaat.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Annuleren
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Annuleren
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/pl-pl.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Proszę dopasować wymagany format.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Anuluj
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Anuluj
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/pt-br.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Por favor, corresponda ao formato solicitado.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Cancelar
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Cancelar
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/pt-pt.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Por favor, corresponda ao formato solicitado.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Cancelar
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Cancelar
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ro-ro.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Vă rugăm să respectați formatul solicitat.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Anulare
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Anulare
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ru-ru.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Пожалуйста, соответствуйте запрашиваемому формату.
8 |
9 |
10 | OK
11 | ОК
12 |
13 |
14 | OK
15 | ОК
16 |
17 |
18 | Cancel
19 | Отмена
20 |
21 |
22 | OK
23 | ОК
24 |
25 |
26 | Cancel
27 | Отмена
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/sk-sk.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Prosím, zodpovedajte požadovaný formát.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Zrušiť
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Zrušiť
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/sl-si.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Prosimo, ujemite zahtevani format.
8 |
9 |
10 | OK
11 | V redu
12 |
13 |
14 | OK
15 | V redu
16 |
17 |
18 | Cancel
19 | Prekliči
20 |
21 |
22 | OK
23 | V redu
24 |
25 |
26 | Cancel
27 | Prekliči
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/sr-rs.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Molimo vas, prilagodite zahtevani format.
8 |
9 |
10 | OK
11 | U redu
12 |
13 |
14 | OK
15 | U redu
16 |
17 |
18 | Cancel
19 | Otkaži
20 |
21 |
22 | OK
23 | U redu
24 |
25 |
26 | Cancel
27 | Otkaži
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/sv-se.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Vänligen matcha det efterfrågade formatet.
8 |
9 |
10 | OK
11 | OK
12 |
13 |
14 | OK
15 | OK
16 |
17 |
18 | Cancel
19 | Avbryt
20 |
21 |
22 | OK
23 | OK
24 |
25 |
26 | Cancel
27 | Avbryt
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ta-in.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | தயவுசெய்து கேள்விக்கான வடிவமைப்பு பொருத்தமாக உள்ளது.
8 |
9 |
10 | OK
11 | சரி
12 |
13 |
14 | OK
15 | சரி
16 |
17 |
18 | Cancel
19 | ரத்து
20 |
21 |
22 | OK
23 | சரி
24 |
25 |
26 | Cancel
27 | ரத்து
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/th-th.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | โปรดตรงตามรูปแบบที่ร้องขอ
8 |
9 |
10 | OK
11 | ตกลง
12 |
13 |
14 | OK
15 | ตกลง
16 |
17 |
18 | Cancel
19 | ยกเลิก
20 |
21 |
22 | OK
23 | ตกลง
24 |
25 |
26 | Cancel
27 | ยกเลิก
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/tr-tr.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Lütfen istenilen formata uyun.
8 |
9 |
10 | OK
11 | Tamam
12 |
13 |
14 | OK
15 | Tamam
16 |
17 |
18 | Cancel
19 | İptal
20 |
21 |
22 | OK
23 | Tamam
24 |
25 |
26 | Cancel
27 | İptal
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/uk-ua.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Будь ласка, відповідайте вимогам формату.
8 |
9 |
10 | OK
11 | ОК
12 |
13 |
14 | OK
15 | ОК
16 |
17 |
18 | Cancel
19 | Скасувати
20 |
21 |
22 | OK
23 | ОК
24 |
25 |
26 | Cancel
27 | Скасувати
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/ur-pk.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | براہ کرم درخواست شدہ فارمیٹ میں موافق ہوں۔
8 |
9 |
10 | OK
11 | ٹھیک ہے
12 |
13 |
14 | OK
15 | ٹھیک ہے
16 |
17 |
18 | Cancel
19 | منسوخ کریں
20 |
21 |
22 | OK
23 | ٹھیک ہے
24 |
25 |
26 | Cancel
27 | منسوخ کریں
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/vi-vn.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | Vui lòng phù hợp với định dạng yêu cầu.
8 |
9 |
10 | OK
11 | Đồng ý
12 |
13 |
14 | OK
15 | Đồng ý
16 |
17 |
18 | Cancel
19 | Hủy
20 |
21 |
22 | OK
23 | Đồng ý
24 |
25 |
26 | Cancel
27 | Hủy
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/zh-cn.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | 请与所请求的格式保持一致。
8 |
9 |
10 | OK
11 | 确定
12 |
13 |
14 | OK
15 | 确定
16 |
17 |
18 | Cancel
19 | 取消
20 |
21 |
22 | OK
23 | 确定
24 |
25 |
26 | Cancel
27 | 取消
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/zh-hk.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | 請符合要求的格式。
8 |
9 |
10 | OK
11 | 確定
12 |
13 |
14 | OK
15 | 確定
16 |
17 |
18 | Cancel
19 | 取消
20 |
21 |
22 | OK
23 | 確定
24 |
25 |
26 | Cancel
27 | 取消
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/src/xliff/zh-tw.xlf:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Please match the requested format.
7 | 請符合要求的格式。
8 |
9 |
10 | OK
11 | 確定
12 |
13 |
14 | OK
15 | 確定
16 |
17 |
18 | Cancel
19 | 取消
20 |
21 |
22 | OK
23 | 確定
24 |
25 |
26 | Cancel
27 | 取消
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/mdui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig",
3 | "include": ["./src/**/*.ts"],
4 | "exclude": [],
5 | "compilerOptions": {
6 | "declarationDir": "./",
7 | "outDir": "./"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/shared/.gitignore:
--------------------------------------------------------------------------------
1 | src/icons/shared/style.ts
2 | src/icons/*.ts
3 | src/lit-styles/*style.ts
4 | /mixin.less
5 | /lit-styles/component-style.less
6 |
--------------------------------------------------------------------------------
/packages/shared/README.md:
--------------------------------------------------------------------------------
1 | # @mdui/shared
2 |
3 | mdui 内部使用的公共代码
4 |
5 | ## 安装
6 |
7 | ```bash
8 | npm install @mdui/shared --save
9 | ```
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/shared/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@mdui/shared",
3 | "version": "1.0.8",
4 | "description": "mdui 项目的公共部分",
5 | "type": "module",
6 | "files": [
7 | "base",
8 | "controllers",
9 | "decorators",
10 | "helpers",
11 | "icons",
12 | "lit-styles",
13 | "mixins",
14 | "LICENSE",
15 | "mixin.less",
16 | "package.json",
17 | "README.md"
18 | ],
19 | "repository": {
20 | "type": "git",
21 | "url": "git+https://github.com/zdhxiong/mdui.git"
22 | },
23 | "author": "zdhxiong ",
24 | "license": "MIT",
25 | "bugs": {
26 | "url": "https://github.com/zdhxiong/mdui/issues"
27 | },
28 | "homepage": "https://github.com/zdhxiong/mdui#readme",
29 | "dependencies": {
30 | "@mdui/jq": "workspace:^",
31 | "@lit/reactive-element": "^2.1.0",
32 | "lit": "^3.3.0",
33 | "ssr-window": "^5.0.0",
34 | "tslib": "^2.8.1"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/packages/shared/src/helpers/array.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 检查两个数组是否包含相同的元素，不考虑顺序
3 | * @param a
4 | * @param b
5 | */
6 | export const arraysEqualIgnoreOrder = (
7 | a: (string | number | boolean)[],
8 | b: (string | number | boolean)[],
9 | ): boolean => {
10 | if (a.length !== b.length) {
11 | return false;
12 | }
13 |
14 | const sortedA = [...a].sort();
15 | const sortedB = [...b].sort();
16 |
17 | return sortedA.every((value, index) => value === sortedB[index]);
18 | };
19 |
--------------------------------------------------------------------------------
/packages/shared/src/helpers/decorator.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 在原生的 HTML 中，布尔属性只要添加了属性名，不论属性值设置成什么，属性值都是 true
3 | * 但这里设置了 attr="false" 时，要把属性设置为 false
4 | *
5 | * 原因是：
6 | * 在 vue3 中，通过 :attr="value" 设置属性时，vue 会优先从 DOM 属性中寻找是否存在 attr 属性名，
7 | * 若存在，则设置对应的 DOM 属性，否则设置对应的 attribute 属性
8 | * 但在 vue 的服务端渲染（ssr）时，不存在 DOM 对象，所以会把 attribute 属性设置成 attr="true" 或 attr="false"
9 | * 所以在 attribute 属性 attr="false" 时，需要把属性值转换为布尔值 false
10 | *
11 | * 在 CSS 中选择布尔属性时，必须排除掉属性值为 false 的情况。i 表示不区分大小写。仅 public 属性需要这样处理，private 和 protected 属性不需要
12 | * 例如：:host([hide]:not([hide="false" i])) { ... }
13 | *
14 | * 这段代码不能封装成函数，否则生成 custom-elements.json 会识别不了
15 | * 这段注释仅在这里写一次，其他地方不再重复
16 | *
17 | * @see https://v3-migration.vuejs.org/zh/breaking-changes/attribute-coercion.html
18 | */
19 | export const booleanConverter = (value: string | null): boolean => {
20 | return value !== null && value.toLowerCase() !== 'false';
21 | };
22 |
--------------------------------------------------------------------------------
/packages/shared/src/helpers/delay.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 延迟多少毫秒执行
3 | */
4 | export const delay = (duration = 0): Promise => {
5 | return new Promise((resolve) => setTimeout(resolve, duration));
6 | };
7 |
--------------------------------------------------------------------------------
/packages/shared/src/helpers/queue.ts:
--------------------------------------------------------------------------------
1 | import { isUndefined } from '@mdui/jq/shared/helper.js';
2 |
3 | type Func = () => void;
4 | const container: Record = {};
5 |
6 | /**
7 | * 根据队列名，获取队列中所有函数
8 | * @param name 队列名
9 | */
10 | export function queue(name: string): Func[];
11 |
12 | /**
13 | * 写入队列
14 | * @param name 队列名
15 | * @param func 函数
16 | */
17 | export function queue(name: string, func: Func): void;
18 |
19 | export function queue(name: string, func?: Func): void | Func[] {
20 | if (isUndefined(container[name])) {
21 | container[name] = [];
22 | }
23 |
24 | if (isUndefined(func)) {
25 | return container[name];
26 | }
27 |
28 | container[name].push(func);
29 | }
30 |
31 | /**
32 | * 从队列中移除第一个函数，并执行该函数
33 | * @param name 队列名
34 | */
35 | export function dequeue(name: string): void {
36 | if (isUndefined(container[name])) {
37 | return;
38 | }
39 |
40 | if (!container[name].length) {
41 | return;
42 | }
43 |
44 | const func = container[name].shift()!;
45 |
46 | func();
47 | }
48 |
--------------------------------------------------------------------------------
/packages/shared/src/helpers/slot.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 获取一个 slot 中的所有内容
3 | * @param slot
4 | */
5 | export const getInnerHtmlFromSlot = (slot: HTMLSlotElement): string => {
6 | const nodes = slot.assignedNodes({ flatten: true });
7 | let html = '';
8 |
9 | [...nodes].forEach((node) => {
10 | if (node.nodeType === Node.ELEMENT_NODE) {
11 | html += (node as HTMLElement).outerHTML;
12 | }
13 |
14 | if (node.nodeType === Node.TEXT_NODE) {
15 | html += node.textContent;
16 | }
17 | });
18 |
19 | return html;
20 | };
21 |
22 | /**
23 | * 获取一个 slot 中的所有文本内容
24 | * @param slot
25 | */
26 | export const getTextContentFromSlot = (slot: HTMLSlotElement): string => {
27 | const nodes = slot.assignedNodes({ flatten: true });
28 | let text = '';
29 |
30 | [...nodes].forEach((node) => {
31 | if (node.nodeType === Node.TEXT_NODE) {
32 | text += node.textContent;
33 | }
34 | });
35 |
36 | return text;
37 | };
38 |
--------------------------------------------------------------------------------
/packages/shared/src/helpers/template.ts:
--------------------------------------------------------------------------------
1 | import { html, nothing } from 'lit';
2 | import type { TemplateResult } from 'lit';
3 |
4 | export const nothingTemplate: TemplateResult = html`${nothing}`;
5 |
--------------------------------------------------------------------------------
/packages/shared/src/helpers/uniqueId.ts:
--------------------------------------------------------------------------------
1 | let id = 0;
2 |
3 | /**
4 | * 返回一个唯一ID
5 | */
6 | export const uniqueId = (): number => {
7 | return ++id;
8 | };
9 |
--------------------------------------------------------------------------------
/packages/shared/src/icons/shared/style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | display: inline-block;
3 | width: 1em;
4 | height: 1em;
5 | line-height: 1;
6 | .px(font-size, 24);
7 | }
8 |
--------------------------------------------------------------------------------
/packages/shared/src/icons/shared/svg-tag.ts:
--------------------------------------------------------------------------------
1 | import { html } from 'lit';
2 | import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
3 | import type { TemplateResult } from 'lit';
4 |
5 | export const svgTag = (svgPaths: string): TemplateResult =>
6 | html`
13 | ${unsafeSVG(svgPaths)}
14 | `;
15 |
--------------------------------------------------------------------------------
/packages/shared/src/lit-styles/component-style.less:
--------------------------------------------------------------------------------
1 | :host {
2 | box-sizing: border-box;
3 | }
4 |
5 | :host {
6 | *,
7 | *::before,
8 | *::after {
9 | box-sizing: inherit;
10 | }
11 | }
12 |
13 | :host(:focus),
14 | :host(:focus-visible),
15 | :host *:focus,
16 | :host *:focus-visible {
17 | outline: none;
18 | }
19 |
20 | [hidden] {
21 | display: none !important;
22 | }
23 |
--------------------------------------------------------------------------------
/packages/shared/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig",
3 | "include": ["./src/**/*.ts"],
4 | "exclude": [],
5 | "compilerOptions": {
6 | "declarationDir": "./",
7 | "outDir": "./"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/vscode-extension/.gitignore:
--------------------------------------------------------------------------------
1 | mdui.html-data.*.json
2 | mdui.css-data.*.json
3 |
--------------------------------------------------------------------------------
/packages/vscode-extension/README.md:
--------------------------------------------------------------------------------
1 | # mdui
2 |
3 | 为 mdui 框架提供自动完成、悬停提示等功能的 VSCode 扩展。
4 |
5 | ## 功能
6 |
7 | 支持在以下场景中提供自动完成和悬停提示：
8 |
9 | * HTML 标签名
10 | * HTML 标签属性名
11 | * HTML 标签属性枚举值
12 | * 全局 CSS 自定义属性名
13 |
14 | 
15 |
--------------------------------------------------------------------------------
/packages/vscode-extension/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zdhxiong/mdui/d6d465f1adc6852f40b1adced6dcd103d8c406db/packages/vscode-extension/icon.png
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'packages/icons'
3 | - 'packages/jq'
4 | - 'packages/mdui'
5 | - 'packages/shared'
6 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @see https://prettier.io/docs/configuration
3 | * @type {import("prettier").Config}
4 | */
5 | const config = {
6 | printWidth: 80,
7 | singleQuote: true,
8 | };
9 |
10 | export default config;
11 |
--------------------------------------------------------------------------------
/scripts/common/build/index.ts:
--------------------------------------------------------------------------------
1 | export * from './component.js';
2 | export * from './css-properties.js';
3 | export * from './docs.js';
4 | export * from './i18n.js';
5 | export * from './jsx-types.js';
6 | export * from './less.js';
7 | export * from './lit-js.js';
8 | export * from './lit-style.js';
9 | export * from './shared.js';
10 | export * from './vscode.js';
11 | export * from './web-types.js';
12 |
--------------------------------------------------------------------------------
/scripts/common/build/lit-js.ts:
--------------------------------------------------------------------------------
1 | import fs from 'node:fs';
2 | import { defaultMinifyOptions, minifyHTMLLiterals } from 'minify-html-literals';
3 | import { traverseDirectory, isDev } from './shared.js';
4 |
5 | /**
6 | * lit 组件生成 js 文件后，进行构建
7 | * @param filePath js 文件路径
8 | */
9 | export const buildLitJsFile = (filePath: string): void => {
10 | if (isDev) {
11 | return;
12 | }
13 |
14 | const jsInput = fs.readFileSync(filePath).toString();
15 |
16 | const result = minifyHTMLLiterals(jsInput, {
17 | fileName: 'render.js',
18 | minifyOptions: {
19 | ...defaultMinifyOptions,
20 | },
21 | });
22 |
23 | if (result) {
24 | fs.writeFileSync(filePath, result.code);
25 | }
26 | };
27 |
28 | /**
29 | * 构建目录中所有 lit 组件生成的 js 文件
30 | * @param path 目录
31 | */
32 | export const buildLitJsFiles = (path: string): void => {
33 | traverseDirectory(path, 'ts', (srcFilePath) => {
34 | const filePath = srcFilePath
35 | .replace('/src/', '/')
36 | .replace('\\src\\', '\\')
37 | .replace('.ts', '.js');
38 |
39 | buildLitJsFile(filePath);
40 | });
41 | };
42 |
--------------------------------------------------------------------------------
/scripts/common/cem/plugins/sort-items.js:
--------------------------------------------------------------------------------
1 | function sortBy(propertyName, desc = false) {
2 | return (a, b) => {
3 | return desc === false
4 | ? a[propertyName].localeCompare(b[propertyName])
5 | : b[propertyName].localeCompare(a[propertyName]);
6 | };
7 | }
8 |
9 | /**
10 | * custom-elements.json 中的模块按字母顺序排序
11 | * @returns {import('@custom-elements-manifest/analyzer').Plugin}
12 | */
13 | export default function sortItems() {
14 | return {
15 | name: 'sort-items',
16 | packageLinkPhase({ customElementsManifest }) {
17 | customElementsManifest?.modules?.sort(sortBy('path'));
18 | },
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/scripts/common/cem/types.ts:
--------------------------------------------------------------------------------
1 | import { Plugin } from '@custom-elements-manifest/analyzer';
2 |
3 | /**
4 | * @see https://custom-elements-manifest.open-wc.org/analyzer/config/
5 | */
6 | export interface userConfigOptions {
7 | globs?: string[];
8 | exclude?: string[];
9 | outdir?: string;
10 | dev?: boolean;
11 | watch?: boolean;
12 | dependencies?: boolean;
13 | packagejson?: boolean;
14 |
15 | litelement?: boolean;
16 | catalyst?: boolean;
17 | fast?: boolean;
18 | stencil?: boolean;
19 |
20 | plugins?: Array;
21 | }
22 |
--------------------------------------------------------------------------------
/scripts/icons/build-lit-js.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildLitJsFiles } from '../common/build/index.js';
3 |
4 | buildLitJsFiles(path.resolve('./packages/icons/src'));
5 |
--------------------------------------------------------------------------------
/scripts/mdui/build-jsx-types.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildJSXTypes } from '../common/build/index.js';
3 |
4 | buildJSXTypes(path.resolve('./packages/mdui/custom-elements.json'), 'mdui');
5 |
--------------------------------------------------------------------------------
/scripts/mdui/build-less.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildLessFile } from '../common/build/index.js';
3 |
4 | buildLessFile(
5 | path.resolve('./packages/mdui/src/styles/index.less'),
6 | path.resolve('./packages/mdui/mdui.css'),
7 | ).catch((err) => {
8 | console.error(err);
9 | });
10 |
--------------------------------------------------------------------------------
/scripts/mdui/build-lit-js.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildLitJsFiles } from '../common/build/index.js';
3 |
4 | buildLitJsFiles(path.resolve('./packages/mdui/src/components'));
5 |
--------------------------------------------------------------------------------
/scripts/mdui/build-lit-style.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildLitStyleFiles } from '../common/build/index.js';
3 |
4 | buildLitStyleFiles(path.resolve('./packages/mdui/src/components'));
5 |
--------------------------------------------------------------------------------
/scripts/mdui/build-vscode-data.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildVSCodeData } from '../common/build/index.js';
3 |
4 | buildVSCodeData(path.resolve('./packages/mdui/custom-elements.json'), 'mdui');
5 |
--------------------------------------------------------------------------------
/scripts/mdui/build-web-types.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildWebTypes } from '../common/build/index.js';
3 |
4 | buildWebTypes(path.resolve('./packages/mdui/custom-elements.json'), 'mdui');
5 |
--------------------------------------------------------------------------------
/scripts/mdui/cem.js:
--------------------------------------------------------------------------------
1 | import { moduleFilePathPlugin } from '../common/cem/plugins/module-file-path.js';
2 | import sortItems from '../common/cem/plugins/sort-items.js';
3 |
4 | /**
5 | * @type {import('../common/cem/types.js').userConfigOptions}
6 | */
7 | const config = {
8 | globs: [
9 | 'packages/mdui/src/components/**/*.ts',
10 | 'packages/shared/src/mixins/*.ts',
11 | ],
12 | exclude: [
13 | 'packages/mdui/src/components/*.ts',
14 | 'packages/mdui/src/components/ripple/*.ts',
15 | 'packages/mdui/src/components/**/*style.ts',
16 | ],
17 | outdir: 'packages/mdui',
18 | dev: false,
19 | litelement: true,
20 | plugins: [moduleFilePathPlugin('mdui'), sortItems()],
21 | };
22 |
23 | export default config;
24 |
--------------------------------------------------------------------------------
/scripts/mdui/dev.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import watch from 'node-watch';
3 | import { buildLessFile, buildLitStyleFile } from '../common/build/index.js';
4 |
5 | let updating = false;
6 |
7 | watch(
8 | [
9 | path.resolve('./packages/mdui/src/components'),
10 | path.resolve('./packages/mdui/src/styles'),
11 | ],
12 | {
13 | recursive: true,
14 | filter: (filepath) => /.less$/.test(filepath),
15 | },
16 | (_, filePath) => {
17 | if (updating) {
18 | return;
19 | }
20 |
21 | updating = true;
22 |
23 | let updatePromise: Promise;
24 |
25 | if (filePath.replace(/\\/g, '/').includes('packages/mdui/src/styles')) {
26 | updatePromise = buildLessFile(
27 | path.resolve('./packages/mdui/src/styles/index.less'),
28 | path.resolve('./packages/mdui/mdui.css'),
29 | );
30 | } else {
31 | updatePromise = buildLitStyleFile(filePath);
32 | }
33 |
34 | updatePromise.finally(() => {
35 | updating = false;
36 | });
37 | },
38 | );
39 |
--------------------------------------------------------------------------------
/scripts/mdui/test.ts:
--------------------------------------------------------------------------------
1 | import commonjs from '@rollup/plugin-commonjs';
2 | import { fromRollup } from '@web/dev-server-rollup';
3 | import { startTestRunner } from '@web/test-runner';
4 | import { playwrightLauncher } from '@web/test-runner-playwright';
5 |
6 | startTestRunner({
7 | config: {
8 | files: 'packages/mdui/components/__test__/**/*.test.js',
9 | // 打开下面两项，在浏览器中手动测试
10 | // manual: true,
11 | // open: true,
12 | nodeResolve: true,
13 | coverage: false,
14 | coverageConfig: {
15 | report: true,
16 | reportDir: 'packages/mdui/components/coverage',
17 | },
18 | browsers: [
19 | playwrightLauncher({ product: 'chromium' }),
20 | playwrightLauncher({ product: 'firefox' }),
21 | playwrightLauncher({ product: 'webkit' }),
22 | ],
23 | plugins: [fromRollup(commonjs)()],
24 | },
25 | readCliArgs: false,
26 | readFileConfig: false,
27 | }).catch((err) => {
28 | console.error(err);
29 | });
30 |
--------------------------------------------------------------------------------
/scripts/shared/build-js.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildLitJsFiles } from '../common/build/index.js';
3 |
4 | buildLitJsFiles(path.resolve('./packages/shared/src'));
5 |
--------------------------------------------------------------------------------
/scripts/shared/build-less.ts:
--------------------------------------------------------------------------------
1 | import fs from 'node:fs';
2 | import path from 'node:path';
3 |
4 | fs.copyFileSync(
5 | path.resolve('./packages/shared/src/mixin.less'),
6 | path.resolve('./packages/shared/mixin.less'),
7 | );
8 |
--------------------------------------------------------------------------------
/scripts/shared/build-lit-style.ts:
--------------------------------------------------------------------------------
1 | import path from 'node:path';
2 | import { buildLitStyleFiles } from '../common/build/index.js';
3 |
4 | buildLitStyleFiles(path.resolve('./packages/shared/src/lit-styles'));
5 | buildLitStyleFiles(path.resolve('./packages/shared/src/icons/shared'));
6 |
--------------------------------------------------------------------------------
/scripts/shared/dev.ts:
--------------------------------------------------------------------------------
1 | import fs from 'node:fs';
2 | import path from 'node:path';
3 | import watch from 'node-watch';
4 | import { buildLitStyleFile } from '../common/build/index.js';
5 |
6 | let updating = false;
7 |
8 | // src 目录中的 less 文件复制到外层
9 | watch(
10 | path.resolve('./packages/shared/src'),
11 | {
12 | recursive: true,
13 | filter: (filepath) => /.less$/.test(filepath),
14 | },
15 | (_, filePath) => {
16 | if (updating) {
17 | return;
18 | }
19 |
20 | updating = true;
21 |
22 | let updatePromise: Promise;
23 |
24 | if (
25 | filePath.replace(/\\/g, '/').includes('packages/shared/src/icons') ||
26 | filePath.replace(/\\/g, '/').includes('packages/shared/src/lit-styles')
27 | ) {
28 | updatePromise = buildLitStyleFile(filePath);
29 | } else {
30 | fs.copyFileSync(
31 | filePath,
32 | filePath.replace('/src/', '/').replace('\\src\\', '\\'),
33 | );
34 | updatePromise = Promise.resolve();
35 | }
36 |
37 | updatePromise.finally(() => {
38 | updating = false;
39 | });
40 | },
41 | );
42 |
--------------------------------------------------------------------------------
/scripts/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 |
3 | export default defineConfig({
4 | server: {
5 | open: '/demos/index.html',
6 | },
7 | });
8 |
--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @see https://stylelint.io/user-guide/configure
3 | * @type {import('stylelint').Config}
4 | **/
5 | const config = {
6 | extends: ['stylelint-config-standard-less'],
7 | rules: {
8 | 'less/no-duplicate-variables': null,
9 | 'no-duplicate-selectors': null,
10 | 'font-family-no-missing-generic-family-keyword': null,
11 | },
12 | };
13 |
14 | export default config;
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "moduleResolution": "node",
5 | "experimentalDecorators": true,
6 | "importHelpers": true,
7 | "resolveJsonModule": true,
8 | "allowSyntheticDefaultImports": true,
9 | "useDefineForClassFields": false,
10 | "module": "es2020",
11 | "target": "es2021",
12 | "lib": ["es2021", "dom", "dom.iterable"],
13 | "declaration": true
14 | }
15 | }
16 |
--------------------------------------------------------------------------------