Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop

This commit is contained in:
sight
2022-03-31 03:47:30 +08:00
79 changed files with 337 additions and 318 deletions

View File

@@ -13,7 +13,7 @@ import {
ButtonSize,
ButtonType,
} from "./interface";
import { BooleanOrString, String } from "src/types";
import { BooleanOrString, String } from "../../types";
export interface LayButtonProps {
type?: ButtonType;

View File

@@ -7,7 +7,7 @@ export default {
<script setup lang="ts">
import { computed, useSlots } from "vue";
import "./index.less";
import { String } from "src/types";
import { String } from "../../types";
import { CardShadow } from "./interface";
const slot = useSlots();

View File

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

View File

@@ -0,0 +1 @@
export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";

View File

@@ -36,6 +36,7 @@
text-align: center;
cursor: pointer;
}
/** 位置开始 */
.layui-tab.is-right {
display: flex;
@@ -216,26 +217,36 @@
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.layui-tab-card > .layui-tab-title {
.layui-tab-card > .layui-tab-head.is-top,
.layui-tab-card > .layui-tab-head.is-bottom {
width: 100%;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-top,
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-bottom {
width: 100%;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title {
background-color: @global-neutral-color-1;
}
.layui-tab-card > .layui-tab-title li {
.layui-tab-card > .layui-tab-head > .layui-tab-title li {
margin-right: -1px;
margin-left: -1px;
}
.layui-tab-card > .layui-tab-title .layui-this {
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this {
background-color: #fff;
}
.layui-tab-card > .layui-tab-title .layui-this:after {
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this:after {
border-top: none;
border-width: 1px;
border-bottom-color: #fff;
}
.layui-tab-card > .layui-tab-title .layui-tab-bar {
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-tab-bar {
height: 40px;
line-height: 40px;
border-radius: 0;

View File

@@ -18,7 +18,7 @@ import {
watch,
} from "vue";
export type tabPositionType = "top" | "bottom" | "left" | "right" ;
export type tabPositionType = "top" | "bottom" | "left" | "right";
export interface LayTabProps {
type?: string;
@@ -46,7 +46,7 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
};
const props = withDefaults(defineProps<LayTabProps>(), {
tabPosition: "top"
tabPosition: "top",
});
const emit = defineEmits(["update:modelValue", "change", "close"]);
@@ -98,36 +98,39 @@ provide("slotsChange", slotsChange);
<template>
<div
class="layui-tab"
:class="[type ? 'layui-tab-' + type : '',
props.tabPosition ? `is-${tabPosition}` : '']"
:class="[
type ? 'layui-tab-' + type : '',
props.tabPosition ? `is-${tabPosition}` : '',
]"
v-if="active"
>
<div v-if="tabPosition === 'bottom'" class="layui-tab-content">
<slot></slot>
</div>
<div :class="[
'layui-tab-head',
props.tabPosition ? `is-${tabPosition}` : ''
]">
<ul :class="[
'layui-tab-title',
props.tabPosition ? `is-${tabPosition}` : ''
]">
<li
v-for="(children, index) in childrens"
:key="children"
:class="[children.props.id === active ? 'layui-this' : '',]"
@click.stop="change(children.props.id)"
<div
:class="['layui-tab-head', props.tabPosition ? `is-${tabPosition}` : '']"
>
<ul
:class="[
'layui-tab-title',
props.tabPosition ? `is-${tabPosition}` : '',
]"
>
{{ children.props.title }}
<i
v-if="allowClose && children.props.closable != false"
class="layui-icon layui-icon-close layui-unselect layui-tab-close"
@click.stop="close(index, children.props.id)"
></i>
</li>
</ul>
<li
v-for="(children, index) in childrens"
:key="children"
:class="[children.props.id === active ? 'layui-this' : '']"
@click.stop="change(children.props.id)"
>
{{ children.props.title }}
<i
v-if="allowClose && children.props.closable != false"
class="layui-icon layui-icon-close layui-unselect layui-tab-close"
@click.stop="close(index, children.props.id)"
></i>
</li>
</ul>
</div>
<div v-if="tabPosition != 'bottom'" class="layui-tab-content">

View File

@@ -7,6 +7,11 @@ export default {
<script setup lang="ts">
import { watch } from "vue";
import { useI18n } from "vue-i18n";
import {
enable as enableDarkMode,
disable as disableDarkMode,
} from "darkreader";
const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
export interface LayConfigProviderProps {
@@ -34,8 +39,30 @@ const changeLocales = (lang: string, locales: any, merge: boolean) => {
};
const changeTheme = (theme: string) => {
document.body.removeAttribute("lay-theme");
document.body.setAttribute("lay-theme", theme);
if (theme === "dark") {
enableDarkMode(
{
mode: 1,
brightness: 100,
contrast: 90,
sepia: 0,
// darkSchemeTextColor: 'rgba(255, 255, 255, 0.9)',
// darkSchemeBackgroundColor: '#22272E'
},
{
invert: [],
css: ``,
ignoreInlineStyle: [
".layui-colorpicker-trigger-span",
"div.layui-color-picker *",
],
ignoreImageAnalysis: [],
disableStyleSheetsProxy: false,
}
);
} else {
disableDarkMode();
}
};
const changeThemeVariable = (vars: any) => {

View File

@@ -276,7 +276,6 @@ a cite {
text-align: center;
color: @global-primary-color;
font-size: 16px;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%);
}
.layui-layout-left {

View File

@@ -44,10 +44,6 @@
--global-border-radius: 2px;
--global-fore-color: #333;
--global-back-color: #ffffff;
--global-neutral-color-1: #FAFAFA;
--global-neutral-color-2: #F6F6F6;
@@ -63,27 +59,5 @@
--global-neutral-color-7: #cccccc;
--global-neutral-color-8: #c2c2c2;
}
body[lay-theme="dark"] {
--global-fore-color: #ffffff;
--global-back-color: #333;
--global-neutral-color-1: #FAFAFA;
--global-neutral-color-2: #F6F6F6;
--global-neutral-color-3: #eeeeee;
--global-neutral-color-4: #e2e2e2;
--global-neutral-color-5: #dddddd;
--global-neutral-color-6: #d2d2d2;
--global-neutral-color-7: #cccccc;
--global-neutral-color-8: #c2c2c2;
}
}