Merge branch 'develop' of https://gitee.com/layui-vue/layui-vue into develop
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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>
|
||||
|
||||
1
src/component/datePicker/interface.ts
Normal file
1
src/component/datePicker/interface.ts
Normal file
@@ -0,0 +1 @@
|
||||
export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";
|
||||
@@ -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;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user