theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ci eslint

Browse Source
This commit is contained in:
就眠儀式 2021-12-25 00:09:30 +08:00
parent 6717dfead2
commit 93507d0165
126 changed files with 1028 additions and 912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintcache Normal file
View File

File diff suppressed because one or more lines are too long

79
.eslintrc.js Normal file
View File

@ -0,0 +1,79 @@
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true
}
},
globals: {
AMap: false,
AMapUI: false
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_'
}
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_'
}
],
'space-before-function-paren': 'off',
'vue/name-property-casing': ['error', 'PascalCase'], // vue/component-definition-name-casing 对组件定义名称强制使用特定的大小
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/require-default-prop': 'off',
'vue/script-setup-uses-vars': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always'
},
svg: 'always',
math: 'always'
}
]
}
}

11
package.json
View File

@ -26,6 +26,7 @@
"build": "vite build --emptyOutDir && npm run build:types",
"build:types": "rimraf types && tsc -d",
"build:example": "vite build example",
"lint:eslint": "eslint --cache --max-warnings 0 \"src/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
},
"peerDependencies": {
@ -33,12 +34,14 @@
"vue-router": "^4.0.12"
},
"dependencies": {
"vue": "^3.2.26",
"@layui/hooks-vue": "^0.1.6",
"@layui/icons-vue": "^1.0.1",
"@layui/layer-vue": "^1.2.2",
"async-validator": "^4.0.7",
"evtd": "^0.2.3"
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"evtd": "^0.2.3",
"vue": "^3.2.26"
},
"devDependencies": {
"@babel/core": "^7.15.8",
@ -48,10 +51,14 @@
"@types/markdown-it": "^12.2.3",
"@types/markdown-it-container": "^2.0.4",
"@types/node": "^16.11.9",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/parser": "^5.8.0",
"@vitejs/plugin-vue": "^1.9.3",
"@vue/compiler-sfc": "^3.2.26",
"@vue/server-renderer": "^3.2.26",
"escape-html": "^1.0.3",
"eslint": "^8.5.0",
"eslint-plugin-vue": "^8.2.0",
"less": "^4.1.2",
"markdown-it-container": "^3.0.0",
"prettier": "^2.5.1",

142
src/index.ts
View File

@ -1,72 +1,72 @@
import type { App } from 'vue'
import type { IDefineComponent, InstallOptions } from './module/type/index'
import type { App } from "vue";
import type { IDefineComponent, InstallOptions } from "./module/type/index";
import './css/layui.css';
import '@layui/layer-vue/lib/index.css';
import '@layui/icons-vue/lib/index.css';
import "./css/layui.css";
import "@layui/layer-vue/lib/index.css";
import "@layui/icons-vue/lib/index.css";
import { layer } from '@layui/layer-vue'
import { layer } from "@layui/layer-vue";
import LayModal from './module/layer/modal/index'
import LayBacktop from './module/backTop/index'
import LayAvatar from './module/avatar/index'
import LayRadio from './module/radio/index'
import LayButton from './module/button/index'
import LayButtonContainer from './module/buttonContainer/index'
import LayButtonGroup from './module/buttonGroup/index'
import LayIcon from './module/icon/index'
import LayIconPicker from './module/iconPicker/index'
import LayCard from './module/card/index'
import LayLayout from './module/layout/index'
import LaySide from './module/side/index'
import LayBody from './module/body/index'
import LayHeader from './module/header/index'
import LayFooter from './module/footer/index'
import LayLogo from './module/logo/index'
import LayPanel from './module/panel/index'
import LayProgress from './module/progress/index'
import LayCol from './module/col/index'
import LayRow from './module/row/index'
import LayInput from './module/input/index'
import LayBadge from './module/badge/index'
import LayBlock from './module/block/index'
import LayLine from './module/line/index'
import LayTimeline from './module/timeline/index'
import LayTimelineItem from './module/timelineItem/index'
import LayTextarea from './module/textarea/index'
import LaySwitch from './module/switch/index'
import LayCollapse from './module/collapse/index'
import LayCollapseItem from './module/collapseItem/index'
import LayContainer from './module/container/index'
import LayMenu from './module/menu/index'
import LayMenuItem from './module/menuItem/index'
import LayMenuChildItem from './module/menuChildItem/index'
import LayCheckbox from './module/checkbox/index'
import LayCheckboxGroup from './module/checkboxGroup/index'
import LayForm from './module/form/index'
import LayBreadcrumb from './module/breadcrumb/index'
import LayBreadcrumbItem from './module/breadcrumbItem/index'
import LayField from './module/field/index'
import LaySelect from './module/select/index'
import LaySelectOption from './module/selectOption/index'
import LayScroll from './module/scroll/index'
import LayEmpty from './module/empty/index'
import LayFormItem from './module/formItem/index'
import LayRate from './module/rate/index'
import LayDropdown from './module/dropdown/index'
import LayDropdownItem from './module/dropdownItem/index'
import LayTab from './module/tab/index'
import LayTabItem from './module/tabItem/index'
import LayTree from './module/tree/index'
import LayTable from './module/table/index'
import LayPage from './module/page/index'
import LayTransfer from './module/transfer/index'
import LaySlider from './module/slider/index'
import LayCarousel from './module/carousel/index'
import LayCarouselItem from './module/carouselItem/index'
import LayColorPicker from './module/colorPicker/index'
import LayTooltip from './module/tooltip/index'
import LayInputNumber from './module/inputNumber/index'
import LayModal from "./module/layer/modal/index";
import LayBacktop from "./module/backTop/index";
import LayAvatar from "./module/avatar/index";
import LayRadio from "./module/radio/index";
import LayButton from "./module/button/index";
import LayButtonContainer from "./module/buttonContainer/index";
import LayButtonGroup from "./module/buttonGroup/index";
import LayIcon from "./module/icon/index";
import LayIconPicker from "./module/iconPicker/index";
import LayCard from "./module/card/index";
import LayLayout from "./module/layout/index";
import LaySide from "./module/side/index";
import LayBody from "./module/body/index";
import LayHeader from "./module/header/index";
import LayFooter from "./module/footer/index";
import LayLogo from "./module/logo/index";
import LayPanel from "./module/panel/index";
import LayProgress from "./module/progress/index";
import LayCol from "./module/col/index";
import LayRow from "./module/row/index";
import LayInput from "./module/input/index";
import LayBadge from "./module/badge/index";
import LayBlock from "./module/block/index";
import LayLine from "./module/line/index";
import LayTimeline from "./module/timeline/index";
import LayTimelineItem from "./module/timelineItem/index";
import LayTextarea from "./module/textarea/index";
import LaySwitch from "./module/switch/index";
import LayCollapse from "./module/collapse/index";
import LayCollapseItem from "./module/collapseItem/index";
import LayContainer from "./module/container/index";
import LayMenu from "./module/menu/index";
import LayMenuItem from "./module/menuItem/index";
import LayMenuChildItem from "./module/menuChildItem/index";
import LayCheckbox from "./module/checkbox/index";
import LayCheckboxGroup from "./module/checkboxGroup/index";
import LayForm from "./module/form/index";
import LayBreadcrumb from "./module/breadcrumb/index";
import LayBreadcrumbItem from "./module/breadcrumbItem/index";
import LayField from "./module/field/index";
import LaySelect from "./module/select/index";
import LaySelectOption from "./module/selectOption/index";
import LayScroll from "./module/scroll/index";
import LayEmpty from "./module/empty/index";
import LayFormItem from "./module/formItem/index";
import LayRate from "./module/rate/index";
import LayDropdown from "./module/dropdown/index";
import LayDropdownItem from "./module/dropdownItem/index";
import LayTab from "./module/tab/index";
import LayTabItem from "./module/tabItem/index";
import LayTree from "./module/tree/index";
import LayTable from "./module/table/index";
import LayPage from "./module/page/index";
import LayTransfer from "./module/transfer/index";
import LaySlider from "./module/slider/index";
import LayCarousel from "./module/carousel/index";
import LayCarouselItem from "./module/carouselItem/index";
import LayColorPicker from "./module/colorPicker/index";
import LayTooltip from "./module/tooltip/index";
import LayInputNumber from "./module/inputNumber/index";
const components: Record<string, IDefineComponent> = {
LayRadio,
@ -129,7 +129,7 @@ const components: Record<string, IDefineComponent> = {
LayModal,
LayTooltip,
LayInputNumber,
}
};
const install = (app: App, options?: InstallOptions): void => {
const _options = options;
@ -138,7 +138,7 @@ const install = (app: App, options?: InstallOptions): void => {
const item = components[key];
app.component(item.name || key, item);
}
}
};
export {
LayRadio,
@ -200,7 +200,7 @@ export {
LayColorPicker,
LayModal,
install,
layer
}
layer,
};
export default { install }
export default { install };

12
src/module/avatar/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayAvatar', Component)
}
app.component(Component.name || "LayAvatar", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/backTop/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayBacktop', Component)
}
app.component(Component.name || "LayBacktop", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/backTop/index.vue
View File

@ -14,7 +14,7 @@
:size="`${props.iconSize}px`"
:prefix="props.iconPrefix"
:color="props.iconColor"
></lay-icon>
/>
</slot>
</div>
</template>

12
src/module/badge/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayBadge', Component)
}
app.component(Component.name || "LayBadge", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/badge/index.vue
View File

@ -33,6 +33,6 @@ const styles = computed(() => {
<template>
<span :class="classes" :style="styles">
<slot v-if="type != 'dot'" />
<slot v-if="type != 'dot'"></slot>
</span>
</template>

12
src/module/block/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayBlock', Component)
}
app.component(Component.name || "LayBlock", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/block/index.vue
View File

@ -15,6 +15,6 @@ const props = defineProps<{
<template>
<blockquote class="layui-elem-quote" :class="{ 'layui-quote-nm': nm }">
<slot />
<slot></slot>
</blockquote>
</template>

12
src/module/body/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayBody', Component)
}
app.component(Component.name || "LayBody", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/body/index.vue
View File

@ -10,6 +10,6 @@ import "./index.less";
<template>
<div class="layui-body">
<slot />
<slot></slot>
</div>
</template>

12
src/module/breadcrumb/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayBreadcrumb', Component)
}
app.component(Component.name || "LayBreadcrumb", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/breadcrumbItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayBreadcrumbItem', Component)
}
app.component(Component.name || "LayBreadcrumbItem", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

13
src/module/button/index.ts
View File

@ -1,10 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayButton', Component)
}
app.component(Component.name || "LayButton", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/button/index.vue
View File

@ -53,6 +53,6 @@ const classes = computed(() => {
v-if="loading"
class="layui-icon layui-icon-loading-one layui-anim layui-anim-rotate layui-anim-loop"
></i>
<slot v-else />
<slot v-else></slot>
</button>
</template>

12
src/module/buttonContainer/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayButtonContainer', Component)
}
app.component(Component.name || "LayButtonContainer", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/buttonContainer/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="layui-btn-container">
<slot />
<slot></slot>
</div>
</template>

12
src/module/buttonGroup/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayButtonGroup', Component)
}
app.component(Component.name || "LayButtonGroup", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/buttonGroup/index.vue
View File

@ -10,6 +10,6 @@ import "./index.less";
<template>
<div class="layui-btn-group">
<slot />
<slot></slot>
</div>
</template>

12
src/module/card/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCard ', Component)
}
app.component(Component.name || "LayCard ", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

4
src/module/card/index.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="layui-card">
<div class="layui-card-header" v-if="slot.header || title">
<slot name="header" v-if="slot.header" />
<slot name="header" v-if="slot.header"></slot>
<span v-else>{{ title }}</span>
</div>
<div class="layui-card-body">
<slot name="body" v-if="slot.body" />
<slot name="body" v-if="slot.body"></slot>
<slot v-else></slot>
</div>
</div>

12
src/module/carousel/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCarousel', Component)
}
app.component(Component.name || "LayCarousel", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/carouselItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCarouselItem', Component)
}
app.component(Component.name || "LayCarouselItem", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/checkbox/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCheckbox', Component)
}
app.component(Component.name || "LayCheckbox", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

4
src/module/checkbox/index.vue
View File

@ -104,8 +104,8 @@ const handleClick = function () {
}"
:lay-skin="skin"
>
<span v-if="$slots?.default"><slot /></span>
<i class="layui-icon layui-icon-ok" />
<span v-if="$slots?.default"><slot></slot></span>
<i class="layui-icon layui-icon-ok"></i>
</div>
</span>
</template>

12
src/module/checkboxGroup/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCheckboxGroup', Component)
}
app.component(Component.name || "LayCheckboxGroup", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/col/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCol', Component)
}
app.component(Component.name || "LayCol", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/col/index.vue
View File

@ -34,6 +34,6 @@ const classes = computed(() => {
<template>
<div class="layui-col" :class="classes">
<slot />
<slot></slot>
</div>
</template>

12
src/module/collapse/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCollapse', Component)
}
app.component(Component.name || "LayCollapse", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/collapse/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="layui-collapse">
<slot />
<slot></slot>
</div>
</template>

12
src/module/collapseItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCollapseItem', Component)
}
app.component(Component.name || "LayCollapseItem", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/collapseItem/index.vue
View File

@ -9,7 +9,7 @@
</h2>
<div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
<p>
<slot :props="props" />
<slot :props="props"></slot>
</p>
</div>
</div>

2
src/module/colorPicker/ColorBox.vue
View File

@ -107,7 +107,7 @@ onMounted(() => {
:visible="true"
:alpha="alpha"
:predefine="predefine"
></ColorPicker>
/>
</div>
</template>
<style scoped lang="less"></style>

12
src/module/colorPicker/colorPicker.type.ts
View File

@ -3,32 +3,32 @@ export interface ColorPickerProps {
* 默认颜色，不管你是使用 hex、rgb 还是 rgba 的格式输入，最终会以指定的格式显示。
* v-model:color
*/
color: string
color: string;
/**
* 颜色显示/输入格式，可选值： hex、rgb
* 若在 rgb 格式下开启了透明度，格式会自动变成 rgba。在没有输入颜色的前提下，组件会默认为 #000 也就是黑色。
* default: hex（即 16 进制色值）
*/
format: 'hex' | 'rgb'
format: "hex" | "rgb";
/**
* 是否开启透明度，若不开启，则不会显示透明框。开启了透明度选项时，当你的默认颜色为 hex 或 rgb 格式，
* 组件会默认加上值为 1 的透明度。相同的，当你没有开启透明度，却以 rgba 格式设置默认颜色时，组件会默认没有透明度。
* 注意：该参数必须配合 rgba 颜色值使用
* default: false
*/
alpha: boolean
alpha: boolean;
/**
* 预定义颜色是否开启
* default: false
*/
predefine: boolean
predefine: boolean;
/**
* 预定义颜色，此参数需配合 predefine: true 使用。
* 此处列举一部分：['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
*/
colors: string[]
colors: string[];
/**
* 下拉框大小，可以选择：lg、sm、xs。
*/
size: 'lg' | 'sm' | 'xs'
size: "lg" | "sm" | "xs";
}

128
src/module/colorPicker/colorUtil.ts
View File

@ -1,113 +1,113 @@
export interface RGB {
h: number
s: number
b: number
h: number;
s: number;
b: number;
}
// RGB转HSB
export function RGBToHSB(rgb: any) {
const hsb = { h: 0, s: 0, b: 0 }
const min = Math.min(rgb.r, rgb.g, rgb.b)
const max = Math.max(rgb.r, rgb.g, rgb.b)
const delta = max - min
hsb.b = max
hsb.s = max != 0 ? (255 * delta) / max : 0
const hsb = { h: 0, s: 0, b: 0 };
const min = Math.min(rgb.r, rgb.g, rgb.b);
const max = Math.max(rgb.r, rgb.g, rgb.b);
const delta = max - min;
hsb.b = max;
hsb.s = max != 0 ? (255 * delta) / max : 0;
if (hsb.s != 0) {
if (rgb.r == max) {
hsb.h = (rgb.g - rgb.b) / delta
hsb.h = (rgb.g - rgb.b) / delta;
} else if (rgb.g == max) {
hsb.h = 2 + (rgb.b - rgb.r) / delta
hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else {
hsb.h = 4 + (rgb.r - rgb.g) / delta
hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
} else {
hsb.h = -1
hsb.h = -1;
}
if (max == min) {
hsb.h = 0
hsb.h = 0;
}
hsb.h *= 60
hsb.h *= 60;
if (hsb.h < 0) {
hsb.h += 360
hsb.h += 360;
}
hsb.s *= 100 / 255
hsb.b *= 100 / 255
return hsb
hsb.s *= 100 / 255;
hsb.b *= 100 / 255;
return hsb;
}
// HEX转HSB
export function HEXToHSB(hex: any) {
hex = hex.indexOf('#') > -1 ? hex.substring(1) : hex
hex = hex.indexOf("#") > -1 ? hex.substring(1) : hex;
if (hex.length == 3) {
const num = hex.split('')
hex = num[0] + num[0] + num[1] + num[1] + num[2] + num[2]
const num = hex.split("");
hex = num[0] + num[0] + num[1] + num[1] + num[2] + num[2];
}
hex = parseInt(hex, 16)
const rgb = { r: hex >> 16, g: (hex & 0x00ff00) >> 8, b: hex & 0x0000ff }
return RGBToHSB(rgb)
hex = parseInt(hex, 16);
const rgb = { r: hex >> 16, g: (hex & 0x00ff00) >> 8, b: hex & 0x0000ff };
return RGBToHSB(rgb);
}
// HSB转RGB
export function HSBToRGB(hsb: any) {
const rgb: any = {}
let h = hsb.h
const s = (hsb.s * 255) / 100
const b = (hsb.b * 255) / 100
const rgb: any = {};
let h = hsb.h;
const s = (hsb.s * 255) / 100;
const b = (hsb.b * 255) / 100;
if (s == 0) {
rgb.r = rgb.g = rgb.b = b
rgb.r = rgb.g = rgb.b = b;
} else {
const t1 = b
const t2 = ((255 - s) * b) / 255
const t3 = ((t1 - t2) * (h % 60)) / 60
if (h == 360) h = 0
const t1 = b;
const t2 = ((255 - s) * b) / 255;
const t3 = ((t1 - t2) * (h % 60)) / 60;
if (h == 360) h = 0;
if (h < 60) {
rgb.r = t1
rgb.b = t2
rgb.g = t2 + t3
rgb.r = t1;
rgb.b = t2;
rgb.g = t2 + t3;
} else if (h < 120) {
rgb.g = t1
rgb.b = t2
rgb.r = t1 - t3
rgb.g = t1;
rgb.b = t2;
rgb.r = t1 - t3;
} else if (h < 180) {
rgb.g = t1
rgb.r = t2
rgb.b = t2 + t3
rgb.g = t1;
rgb.r = t2;
rgb.b = t2 + t3;
} else if (h < 240) {
rgb.b = t1
rgb.r = t2
rgb.g = t1 - t3
rgb.b = t1;
rgb.r = t2;
rgb.g = t1 - t3;
} else if (h < 300) {
rgb.b = t1
rgb.g = t2
rgb.r = t2 + t3
rgb.b = t1;
rgb.g = t2;
rgb.r = t2 + t3;
} else if (h < 360) {
rgb.r = t1
rgb.g = t2
rgb.b = t1 - t3
rgb.r = t1;
rgb.g = t2;
rgb.b = t1 - t3;
} else {
rgb.r = 0
rgb.g = 0
rgb.b = 0
rgb.r = 0;
rgb.g = 0;
rgb.b = 0;
}
}
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) }
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
}
// HSB转HEX
export function HSBToHEX(hsb: any) {
const rgb = HSBToRGB(hsb)
const hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)]
const rgb = HSBToRGB(hsb);
const hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
hex.forEach((val, nr) => {
if (val.length == 1) {
hex[nr] = '0' + val
hex[nr] = "0" + val;
}
})
return hex.join('')
});
return hex.join("");
}
//转化成所需rgb格式
export function RGBSTo(rgbs: any) {
const regexp = /[0-9]{1,3}/g
const re = rgbs.match(regexp) || []
return { r: re[0], g: re[1], b: re[2] }
const regexp = /[0-9]{1,3}/g;
const re = rgbs.match(regexp) || [];
return { r: re[0], g: re[1], b: re[2] };
}

12
src/module/colorPicker/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayColorPicker', Component)
}
app.component(Component.name || "LayColorPicker", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/colorPicker/index.vue
View File

@ -53,6 +53,6 @@ const colorPickerProps = withDefaults(defineProps<ColorPickerProps>(), {
<template>
<div class="layui-inline'">
<ColorBox></ColorBox>
<ColorBox />
</div>
</template>

12
src/module/container/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayContainer', Component)
}
app.component(Component.name || "LayContainer", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/container/index.vue
View File

@ -23,6 +23,6 @@ const classes = computed(() =>
<template>
<div :class="classes">
<slot />
<slot></slot>
</div>
</template>

12
src/module/count/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayCount', Component)
}
app.component(Component.name || "LayCount", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/count/index.vue
View File

@ -1,5 +1,5 @@
<template>
<span class="layui-count" />
<span class="layui-count"></span>
</template>
<script setup name="LayCount" lang="ts"></script>

12
src/module/dropdown/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayDropdown', Component)
}
app.component(Component.name || "LayDropdown", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

8
src/module/dropdown/index.vue
View File

@ -52,11 +52,11 @@ defineExpose({ open, hide, toggle });
:class="[openState ? 'layui-dropdown-up' : '']"
>
<div @click="toggle">
<slot />
<slot></slot>
</div>
<dl class="layui-anim layui-anim-upbit">
<ul class="layui-menu layui-dropdown-menu">
<slot name="content" />
<slot name="content"></slot>
</ul>
</dl>
</div>
@ -68,11 +68,11 @@ defineExpose({ open, hide, toggle });
@mouseleave="hide"
>
<div>
<slot />
<slot></slot>
</div>
<dl class="layui-anim layui-anim-upbit">
<ul class="layui-menu layui-dropdown-menu">
<slot name="content" />
<slot name="content"></slot>
</ul>
</dl>
</div>

12
src/module/dropdownItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayDropdownItem', Component)
}
app.component(Component.name || "LayDropdownItem", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/dropdownItem/index.vue
View File

@ -1,7 +1,7 @@
<template>
<li>
<div class="layui-menu-body-title" @click="click">
<slot />
<slot></slot>
</div>
</li>
</template>

12
src/module/empty/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayEmpty', Component)
}
app.component(Component.name || "LayEmpty", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/field/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayField', Component)
}
app.component(Component.name || "LayField", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/field/index.vue
View File

@ -2,7 +2,7 @@
<fieldset v-if="slot.default" class="layui-elem-field">
<legend>{{ title }}</legend>
<div class="layui-field-box">
<slot />
<slot></slot>
</div>
</fieldset>

12
src/module/footer/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayFooter', Component)
}
app.component(Component.name || "LayFooter", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/footer/index.vue
View File

@ -10,6 +10,6 @@ import "./index.less";
<template>
<div class="layui-footer">
<slot />
<slot></slot>
</div>
</template>

12
src/module/form/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayForm', Component)
}
app.component(Component.name || "LayForm", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/form/index.vue
View File

@ -1,6 +1,6 @@
<template>
<form class="layui-form" :onsubmit="submit">
<slot />
<slot></slot>
</form>
</template>

92
src/module/formItem/cnValidateMessage.ts
View File

@ -1,49 +1,49 @@
import { ValidateMessages } from "async-validator";
// 中文翻译 --> 根据 async-validator 中 ValidateMessages 进行翻译
export default {
default: "%s验证失败",
required: "%s不能为空",
enum: "%s不在枚举%s里面",
whitespace: "%s不能为空",
date: {
format: "%s日期%s不是一个有效格式的日期%s",
parse: "%s无法解析为日期,%s是无效的",
invalid: "%s日期%s是无效的"
},
types: {
number: '%s不是一个有效的数字',
boolean: '%s不是一个有效的布尔类型',
method: '%s不是一个有效的方法',
regexp: '%s不是一个有效的正则表达式',
integer: '%s不是一个有效的整型数字',
float: '%s不是一个有效的浮点小数',
array: '%s不是一个有效的数组',
object: '%s不是一个有效的对象',
enum: '%s不是一个有效的枚举',
date: '%s不是一个有效的日期',
url: '%s不是一个有效的url',
hex: '%s不是一个有效的十六进制',
email: '%s不是一个有效的邮箱'
},
string: {
len: "%s必须是长度为%s个字符",
min: "%s最小长度为%s个字符",
max: "%s最长%s个字符",
range: "%s字符长度需要在%s和%s直接"
},
number: {
len: "%s长度必须为%s",
min: "%s必须小于%s",
max: "%s必须大于%s",
range: "%s需要在%s和%s之间"
},
array: {
len: "%s长度必须为%s",
min: "%s长度必须小于%s",
max: "%s长度必须大于%s",
range: "%s长度需要在%s和%s之间"
},
pattern: {
"mismatch": "%s值%s不能匹配%s"
}
} as ValidateMessages;
default: "%s验证失败",
required: "%s不能为空",
enum: "%s不在枚举%s里面",
whitespace: "%s不能为空",
date: {
format: "%s日期%s不是一个有效格式的日期%s",
parse: "%s无法解析为日期,%s是无效的",
invalid: "%s日期%s是无效的",
},
types: {
number: "%s不是一个有效的数字",
boolean: "%s不是一个有效的布尔类型",
method: "%s不是一个有效的方法",
regexp: "%s不是一个有效的正则表达式",
integer: "%s不是一个有效的整型数字",
float: "%s不是一个有效的浮点小数",
array: "%s不是一个有效的数组",
object: "%s不是一个有效的对象",
enum: "%s不是一个有效的枚举",
date: "%s不是一个有效的日期",
url: "%s不是一个有效的url",
hex: "%s不是一个有效的十六进制",
email: "%s不是一个有效的邮箱",
},
string: {
len: "%s必须是长度为%s个字符",
min: "%s最小长度为%s个字符",
max: "%s最长%s个字符",
range: "%s字符长度需要在%s和%s直接",
},
number: {
len: "%s长度必须为%s",
min: "%s必须小于%s",
max: "%s必须大于%s",
range: "%s需要在%s和%s之间",
},
array: {
len: "%s长度必须为%s",
min: "%s长度必须小于%s",
max: "%s长度必须大于%s",
range: "%s长度需要在%s和%s之间",
},
pattern: {
mismatch: "%s值%s不能匹配%s",
},
} as ValidateMessages;

12
src/module/formItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayFormItem', Component)
}
app.component(Component.name || "LayFormItem", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/formItem/index.vue
View File

@ -17,7 +17,7 @@
</label>
<div :class="[mode ? 'layui-input-' + mode : '']">
<div ref="slotParent">
<slot :props="{ ...props, model: layForm.model }" />
<slot :props="{ ...props, model: layForm.model }"></slot>
</div>
<span
v-if="errorStatus"

12
src/module/header/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayHeader', Component)
}
app.component(Component.name || "LayHeader", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/header/index.vue
View File

@ -10,6 +10,6 @@ import "./index.less";
<template>
<div class="layui-header">
<slot />
<slot></slot>
</div>
</template>

12
src/module/icon/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import { LayIcon as Component } from '@layui/icons-vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import { LayIcon as Component } from "@layui/icons-vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayIcon', Component)
}
app.component(Component.name || "LayIcon", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/iconPicker/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayIconPicker', Component)
}
app.component(Component.name || "LayIconPicker", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

23
src/module/iconPicker/index.vue
View File

@ -4,18 +4,18 @@
class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
>
<div class="layui-inline layui-iconpicker-main">
<i class="layui-inline layui-icon" :class="[selectedIcon]" />
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
</div>
<span class="layui-inline layui-iconpicker-suffix"
><i class="layui-icon layui-icon-down layui-anim"
/></span>
><i class="layui-icon layui-icon-down layui-anim"></i
></span>
</div>
<template #content>
<div class="layui-iconpicker-view layui-iconpicker-scroll">
<div v-if="showSearch" class="layui-iconpicker-search">
<div class="layui-form layui-input-wrap layui-input-wrap-prefix">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-search" />
<i class="layui-icon layui-icon-search"></i>
</div>
<input
type="text"
@ -27,7 +27,7 @@
@input="search"
/>
<div class="layui-input-suffix layui-input-affix-event layui-hide">
<i class="layui-icon layui-icon-clear" />
<i class="layui-icon layui-icon-clear"></i>
</div>
</div>
</div>
@ -39,7 +39,7 @@
:class="[selectedIcon === icon.class ? 'layui-this' : '']"
@click="selectIcon(icon.class)"
>
<i class="layui-icon" :class="[icon.class]" />
<i class="layui-icon" :class="[icon.class]"></i>
<p class="layui-elip">
{{ icon.name }}
</p>
@ -57,11 +57,10 @@
class="layui-laypage-prev"
:class="[currentPage === 1 ? 'layui-disabled' : '']"
@click="prev()"
><i class="layui-icon layui-icon-left" /></a
><i class="layui-icon layui-icon-left"></i></a
><span class="layui-laypage-curr"
><em class="layui-laypage-em" /><em
>{{ currentPage }} / {{ totalPage }}</em
></span
><em class="layui-laypage-em"></em
><em>{{ currentPage }} / {{ totalPage }}</em></span
><span class="layui-laypage-spr">…</span
><a href="javascript:;" class="layui-laypage-last" title="尾页"
>14</a
@ -70,8 +69,8 @@
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
class="layui-laypage-next"
@click="next()"
><i class="layui-icon layui-icon-right"
/></a>
><i class="layui-icon layui-icon-right"></i
></a>
</div>
</div>
</div>

12
src/module/input/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayInput', Component)
}
app.component(Component.name || "LayInput", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/inputNumber/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayInputNumber', Component)
}
app.component(Component.name || "LayInputNumber", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

6
src/module/inputNumber/index.vue
View File

@ -13,7 +13,7 @@
:type="
position === 'right' ? 'layui-icon-down' : 'layui-icon-subtraction'
"
></lay-icon>
/>
</lay-button>
<div class="layui-input-number-input">
<lay-input
@ -22,7 +22,7 @@
type="number"
:name="name"
@change="inputChange"
></lay-input>
/>
</div>
<lay-button
type="primary"
@ -35,7 +35,7 @@
>
<lay-icon
:type="position === 'right' ? 'layui-icon-up' : 'layui-icon-addition'"
></lay-icon>
/>
</lay-button>
</div>
</template>

12
src/module/layer/modal/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import { LayModal } from '@layui/layer-vue';
import type { IDefineComponent } from '../../type/index'
import type { App } from "vue";
import { LayModal } from "@layui/layer-vue";
import type { IDefineComponent } from "../../type/index";
LayModal.install = (app: App) => {
app.component(LayModal.name || 'LayModal', LayModal)
}
app.component(LayModal.name || "LayModal", LayModal);
};
export default LayModal as IDefineComponent
export default LayModal as IDefineComponent;

12
src/module/layout/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayLayout', Component)
}
app.component(Component.name || "LayLayout", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/layout/index.vue
View File

@ -36,6 +36,6 @@ const classes = computed(() => {
<template>
<section :class="classes">
<slot />
<slot></slot>
</section>
</template>

12
src/module/line/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayLine', Component)
}
app.component(Component.name || "LayLine", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/logo/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayLogo', Component)
}
app.component(Component.name || "LayLogo", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/logo/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="layui-logo">
<slot />
<slot></slot>
</div>
</template>

12
src/module/menu/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayMenu', Component)
}
app.component(Component.name || "LayMenu", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/menu/index.vue
View File

@ -1,6 +1,6 @@
<template>
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree' : '']">
<slot />
<slot></slot>
</ul>
</template>

12
src/module/menuChildItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayMenuChildItem', Component)
}
app.component(Component.name || "LayMenuChildItem", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/menuItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayMenuItem', Component)
}
app.component(Component.name || "LayMenuItem", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

4
src/module/menuItem/index.vue
View File

@ -6,7 +6,7 @@
>
<a href="javascript:void(0)" @click="openHandle">
{{ title }}
<i class="layui-icon layui-icon-down layui-nav-more" />
<i class="layui-icon layui-icon-down layui-nav-more"></i>
</a>
<dl
class="layui-nav-child"
@ -15,7 +15,7 @@
!isTree ? 'layui-anim layui-anim-upbit' : '',
]"
>
<slot />
<slot></slot>
</dl>
</li>

12
src/module/page/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayPage', Component)
}
app.component(Component.name || "LayPage", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

5
src/module/page/index.vue
View File

@ -15,7 +15,8 @@
><em
class="layui-laypage-em"
:class="[theme ? 'layui-bg-' + theme : '']"
/><em>{{ index }}</em></span
></em
><em>{{ index }}</em></span
>
<a v-else href="javascript:;" @click="jump(index)">
{{ index }}
@ -39,7 +40,7 @@
<option value="50">50 条/页</option>
</select></span
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
><i class="layui-icon layui-icon-refresh" /></a
><i class="layui-icon layui-icon-refresh"></i></a
><span v-if="showSkip" class="layui-laypage-skip"
>到第<input
v-model="currentPageShow"

12
src/module/panel/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayPanel', Component)
}
app.component(Component.name || "LayPanel", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/panel/index.vue
View File

@ -10,6 +10,6 @@ import "./index.less";
<template>
<div class="layui-panel">
<slot />
<slot></slot>
</div>
</template>

115
src/module/popper/calcPosition.ts
View File

@ -1,50 +1,73 @@
import { Ref } from "vue";
// 计算各个方向位置
const postionFns: any = {
top(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
let {top, left, bottom} = el.getBoundingClientRect()
if ((top = top - popper.offsetHeight - 6) < 0 && bottom > popper.offsetHeight) {
innnerPosition.value = 'bottom';
top = bottom;
}
return {
top: `${top}px`,
left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`
}
},
bottom(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
let { top, left, bottom } = el.getBoundingClientRect()
if (window.innerHeight - bottom < popper.offsetHeight + 6) {
innnerPosition.value = 'top';
bottom = top - popper.offsetHeight - 6;
}
return {
top: `${bottom}px`,
left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`
}
},
left(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called : boolean) {
let {top, left, right} = el.getBoundingClientRect()
left = left - popper.offsetWidth - 6;
if (left < 0) {
innnerPosition.value = 'right';
left = right;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${left}px`
}
},
right(el: HTMLElement, popper: HTMLElement, innnerPosition: Ref, called: boolean) {
let { top, left, right } = el.getBoundingClientRect()
if (window.innerWidth < right + popper.offsetWidth + 6) {
innnerPosition.value = 'left';
right = left - popper.offsetWidth - 6;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${right}px`
}
top(
el: HTMLElement,
popper: HTMLElement,
innnerPosition: Ref,
called: boolean
) {
let { top, left, bottom } = el.getBoundingClientRect();
if (
(top = top - popper.offsetHeight - 6) < 0 &&
bottom > popper.offsetHeight
) {
innnerPosition.value = "bottom";
top = bottom;
}
}
export default postionFns;
return {
top: `${top}px`,
left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`,
};
},
bottom(
el: HTMLElement,
popper: HTMLElement,
innnerPosition: Ref,
called: boolean
) {
let { top, left, bottom } = el.getBoundingClientRect();
if (window.innerHeight - bottom < popper.offsetHeight + 6) {
innnerPosition.value = "top";
bottom = top - popper.offsetHeight - 6;
}
return {
top: `${bottom}px`,
left: `${left - (popper.offsetWidth - el.offsetWidth) / 2}px`,
};
},
left(
el: HTMLElement,
popper: HTMLElement,
innnerPosition: Ref,
called: boolean
) {
let { top, left, right } = el.getBoundingClientRect();
left = left - popper.offsetWidth - 6;
if (left < 0) {
innnerPosition.value = "right";
left = right;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${left}px`,
};
},
right(
el: HTMLElement,
popper: HTMLElement,
innnerPosition: Ref,
called: boolean
) {
let { top, left, right } = el.getBoundingClientRect();
if (window.innerWidth < right + popper.offsetWidth + 6) {
innnerPosition.value = "left";
right = left - popper.offsetWidth - 6;
}
return {
top: `${top - (popper.offsetHeight - el.offsetHeight) / 2}px`,
left: `${right}px`,
};
},
};
export default postionFns;

84
src/module/popper/usePopper.ts
View File

@ -1,43 +1,47 @@
import { h, ref, render, watchEffect, watch} from "vue";
import { h, ref, render, watchEffect, watch } from "vue";
import popper from "./index.vue";
import { once } from "../../tools/domUtil";
const EVENT_MAP : any = {
'hover': 'mouseenter',
'click': 'click'
}
const EVENT_MAP: any = {
hover: "mouseenter",
click: "click",
};
const usePopper = {
createPopper(el: HTMLElement, props: any, trigger : string) {
const _this = this;
once(el, EVENT_MAP[trigger], () => {
// TODO 临时解决方案
const _props:any = {el};
for (const key in props) {
_props[key] = ref(props[key]);
}
_props.updateVisible = function(val:boolean) {
_props.visible && (_props.visible.value = val);
}
_this.renderPopper(_props);
watchEffect(() => {
for (const key in _props) {
if (key === 'visible') {
continue;
}
_props[key].value = props[key];
}
});
watch(() => props.visible, (val: boolean)=> {
_props.updateVisible(val);
})
})
},
renderPopper(props: any) {
const container: HTMLDivElement = document.createElement("div");
// container.setAttribute("class", "lay-div");
const node = h(popper, props);
render(node, container);
container.firstElementChild && document.body.appendChild(container.firstElementChild);
return node;
}
}
export default usePopper;
createPopper(el: HTMLElement, props: any, trigger: string) {
const _this = this;
once(el, EVENT_MAP[trigger], () => {
// TODO 临时解决方案
const _props: any = { el };
for (const key in props) {
_props[key] = ref(props[key]);
}
_props.updateVisible = function (val: boolean) {
_props.visible && (_props.visible.value = val);
};
_this.renderPopper(_props);
watchEffect(() => {
for (const key in _props) {
if (key === "visible") {
continue;
}
_props[key].value = props[key];
}
});
watch(
() => props.visible,
(val: boolean) => {
_props.updateVisible(val);
}
);
});
},
renderPopper(props: any) {
const container: HTMLDivElement = document.createElement("div");
// container.setAttribute("class", "lay-div");
const node = h(popper, props);
render(node, container);
container.firstElementChild &&
document.body.appendChild(container.firstElementChild);
return node;
},
};
export default usePopper;

12
src/module/progress/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayProgress', Component)
}
app.component(Component.name || "LayProgress", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/radio/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayRadio ', Component)
}
app.component(Component.name || "LayRadio ", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/radio/index.vue
View File

@ -19,7 +19,7 @@
class="layui-anim layui-icon layui-anim-scaleSpring layui-form-radioed"
>&#xe63f;</i
>
<span><slot /></span>
<span><slot></slot></span>
</div>
</span>
</template>

12
src/module/rate/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayRate', Component)
}
app.component(Component.name || "LayRate", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

4
src/module/rate/index.vue
View File

@ -101,12 +101,12 @@ const action = function (index: number, event: any) {
}`,
]"
:style="{ color: theme }"
/>
></i>
<i
v-else
:class="['layui-icon'].concat(icons[0])"
:style="{ color: theme }"
/>
></i>
</li>
</ul>
<template v-if="text">

12
src/module/row/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayRow', Component)
}
app.component(Component.name || "LayRow", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/row/index.vue
View File

@ -21,6 +21,6 @@ const classes = computed(() => {
<template>
<div class="layui-row" :class="classes">
<slot />
<slot></slot>
</div>
</template>

12
src/module/scroll/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayScroll', Component)
}
app.component(Component.name || "LayScroll", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/select/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LaySelect', Component)
}
app.component(Component.name || "LaySelect", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

9
src/module/select/index.vue
View File

@ -28,7 +28,7 @@
{ 'layui-disabled': disabled },
]"
/>
<i :class="['layui-edge', { 'layui-disabled': disabled }]" />
<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
<!-- 多选 -->
<div
v-if="selectItem.multiple && Array.isArray(selectItem.label)"
@ -66,12 +66,9 @@
<dl class="layui-anim layui-anim-upbit">
<!-- 多选不支持空提示 -->
<template v-if="!multiple && showEmpty">
<lay-select-option
:value="null"
:label="emptyMessage ?? placeholder"
></lay-select-option>
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
</template>
<slot />
<slot></slot>
</dl>
</div>
</template>

12
src/module/selectOption/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LaySelectOption', Component)
}
app.component(Component.name || "LaySelectOption", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/selectOption/index.vue
View File

@ -10,7 +10,7 @@
v-model="selected"
@change="selectHandle"
label=""
></lay-checkbox>
/>
</template>
<slot>{{ label }}</slot>
</dd>

12
src/module/side/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LaySide', Component)
}
app.component(Component.name || "LaySide", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/side/index.vue
View File

@ -25,6 +25,6 @@ const styles = computed<CSSProperties>(() => {
<template>
<div class="layui-side" :style="styles">
<slot />
<slot></slot>
</div>
</template>

12
src/module/slider/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LaySlider', Component)
}
app.component(Component.name || "LaySlider", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

12
src/module/switch/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LaySwitch', Component)
}
app.component(Component.name || "LaySwitch", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

2
src/module/switch/index.vue
View File

@ -51,7 +51,7 @@ const handleClick = function () {
}"
>
<em>{{ isActive == true ? activeText : inactiveText }}</em>
<i />
<i></i>
</div>
</span>
</template>

12
src/module/tab/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue'
import Component from './index.vue'
import type { IDefineComponent } from '../type/index'
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || 'LayTab', Component)
}
app.component(Component.name || "LayTab", Component);
};
export default Component as IDefineComponent
export default Component as IDefineComponent;

Some files were not shown because too many files have changed in this diff Show More