init
This commit is contained in:
@@ -0,0 +1 @@
|
||||
import{o as e,j as o}from"./.pnpm.8fb36023.js";const r={class:"markdown-body"},_={},m={__name:"layer",setup(a,{expose:t}){return t({frontmatter:{}}),(n,s)=>(e(),o("div",r))}};export{m as default,_ as frontmatter};
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayBody",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
Binary file not shown.
@@ -0,0 +1 @@
|
||||
export declare type InputSize = "lg" | "md" | "sm" | "xs";
|
||||
@@ -0,0 +1,267 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySelect",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import {
|
||||
provide,
|
||||
computed,
|
||||
ref,
|
||||
Ref,
|
||||
useSlots,
|
||||
onMounted,
|
||||
VNode,
|
||||
Component,
|
||||
watch,
|
||||
onUnmounted,
|
||||
StyleValue,
|
||||
} from "vue";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import LayInput from "../input/index.vue";
|
||||
import LayTagInput from "../tagInput/index.vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import LaySelectOption, { SelectOptionProps } from "../selectOption/index.vue";
|
||||
import { SelectSize } from "./interface";
|
||||
|
||||
export interface SelectProps {
|
||||
name?: string;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
searchPlaceholder?: string;
|
||||
modelValue?: any;
|
||||
multiple?: boolean;
|
||||
items?: SelectOptionProps[];
|
||||
size?: SelectSize;
|
||||
collapseTagsTooltip?: boolean;
|
||||
minCollapsedNum?: number;
|
||||
allowClear?: boolean;
|
||||
showSearch?: boolean;
|
||||
contentClass?: string | Array<string | object> | object;
|
||||
contentStyle?: StyleValue;
|
||||
}
|
||||
|
||||
export interface SelectEmits {
|
||||
(e: "update:modelValue", value: string): void;
|
||||
(e: "change", value: string): void;
|
||||
(e: "search", value: string): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<SelectProps>(), {
|
||||
modelValue: null,
|
||||
collapseTagsTooltip: true,
|
||||
minCollapsedNum: 3,
|
||||
allowClear: false,
|
||||
showSearch: false,
|
||||
disabled: false,
|
||||
multiple: false,
|
||||
size: "md",
|
||||
});
|
||||
|
||||
const slots = useSlots();
|
||||
const selectRef = ref();
|
||||
const searchValue = ref("");
|
||||
const singleValue = ref("");
|
||||
const multipleValue = ref([]);
|
||||
const emits = defineEmits<SelectEmits>();
|
||||
const openState: Ref<boolean> = ref(false);
|
||||
const options = ref<any>([]);
|
||||
const composing = ref(false);
|
||||
var timer: any;
|
||||
|
||||
const getOption = (nodes: VNode[], newOptions: any[]) => {
|
||||
nodes?.map((item) => {
|
||||
let component = item.type as Component;
|
||||
if (item.type.toString() == "Symbol(Fragment)") {
|
||||
getOption(item.children as VNode[], newOptions);
|
||||
} else {
|
||||
if (component.name == LaySelectOption.name) {
|
||||
if (item.children) {
|
||||
// @ts-ignore
|
||||
const label = item.children.default()[0].children;
|
||||
|
||||
if (typeof label == "string") {
|
||||
// @ts-ignore
|
||||
item.props.label = label;
|
||||
}
|
||||
}
|
||||
newOptions.push(item.props);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const intOption = () => {
|
||||
const newOptions: any[] = [];
|
||||
if (slots.default) {
|
||||
getOption(slots.default(), newOptions);
|
||||
}
|
||||
Object.assign(newOptions, props.items);
|
||||
if (JSON.stringify(newOptions) != JSON.stringify(options.value)) {
|
||||
options.value = newOptions;
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (value: any) => {
|
||||
if (Array.isArray(selectedValue.value)) {
|
||||
selectedValue.value = selectedValue.value.filter((item) => item != value);
|
||||
}
|
||||
};
|
||||
|
||||
const onCompositionstart = () => {
|
||||
composing.value = true;
|
||||
};
|
||||
|
||||
const onCompositionend = (event: Event) => {
|
||||
composing.value = false;
|
||||
handleSearch((event.target as HTMLInputElement).value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
intOption();
|
||||
timer = setInterval(intOption, 500);
|
||||
|
||||
watch(
|
||||
[selectedValue, options],
|
||||
() => {
|
||||
if (multiple.value) {
|
||||
multipleValue.value = selectedValue.value?.map((value: any) => {
|
||||
return options.value.find((item: any) => {
|
||||
item.disabled == "" || item.disabled == true
|
||||
? (item.closable = false)
|
||||
: (item.closable = true);
|
||||
return item.value === value;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
searchValue.value = "";
|
||||
singleValue.value = options.value.find((item: any) => {
|
||||
return item.value === selectedValue.value;
|
||||
})?.label;
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
});
|
||||
|
||||
const selectedValue = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
emits("update:modelValue", value);
|
||||
emits("change", value);
|
||||
},
|
||||
});
|
||||
|
||||
const multiple = computed(() => {
|
||||
return props.multiple;
|
||||
});
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
if (composing.value) return;
|
||||
emits("search", value);
|
||||
searchValue.value = value;
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
if (multiple.value) {
|
||||
selectedValue.value = [];
|
||||
} else {
|
||||
selectedValue.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
provide("selectRef", selectRef);
|
||||
provide("openState", openState);
|
||||
provide("selectedValue", selectedValue);
|
||||
provide("searchValue", searchValue);
|
||||
provide("multiple", multiple);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-select">
|
||||
<lay-dropdown
|
||||
ref="selectRef"
|
||||
:disabled="disabled"
|
||||
:contentClass="contentClass"
|
||||
:contentStyle="contentStyle"
|
||||
:update-at-scroll="true"
|
||||
:autoFitWidth="true"
|
||||
@hide="openState = false"
|
||||
@show="openState = true"
|
||||
>
|
||||
<lay-tag-input
|
||||
v-if="multiple"
|
||||
v-model="multipleValue"
|
||||
:allow-clear="allowClear"
|
||||
:placeholder="placeholder"
|
||||
:collapseTagsTooltip="collapseTagsTooltip"
|
||||
:minCollapsedNum="minCollapsedNum"
|
||||
:disabledInput="true"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:class="{ 'layui-unselect': true }"
|
||||
@remove="handleRemove"
|
||||
@clear="handleClear"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
type="layui-icon-triangle-d"
|
||||
:class="{ triangle: openState }"
|
||||
></lay-icon>
|
||||
</template>
|
||||
</lay-tag-input>
|
||||
<lay-input
|
||||
v-else
|
||||
:modelValue="singleValue"
|
||||
:placeholder="placeholder"
|
||||
:allow-clear="allowClear"
|
||||
:readonly="!showSearch"
|
||||
:disabled="disabled"
|
||||
:class="{ 'layui-unselect': !showSearch }"
|
||||
:size="size"
|
||||
@compositionstart="onCompositionstart"
|
||||
@compositionend="onCompositionend"
|
||||
@Input="handleSearch"
|
||||
@clear="handleClear"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
type="layui-icon-triangle-d"
|
||||
:class="{ triangle: openState }"
|
||||
></lay-icon>
|
||||
</template>
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<dl class="layui-select-content">
|
||||
<div class="layui-select-search" v-if="multiple && showSearch">
|
||||
<lay-input
|
||||
:modelValue="searchValue"
|
||||
:placeholder="searchPlaceholder"
|
||||
@Input="handleSearch"
|
||||
@compositionstart="onCompositionstart"
|
||||
@compositionend="onCompositionend"
|
||||
prefix-icon="layui-icon-search"
|
||||
size="sm"
|
||||
></lay-input>
|
||||
</div>
|
||||
<template v-if="items">
|
||||
<lay-select-option
|
||||
v-for="(item, index) in items"
|
||||
v-bind="item"
|
||||
:key="index"
|
||||
></lay-select-option>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,371 @@
|
||||
.layui-tab {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.layui-tab[overflow] > .layui-tab-head > .layui-tab-title {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-tab.is-left {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.layui-tab.is-right {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.layui-tab.is-top {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layui-tab.is-bottom {
|
||||
flex-direction: column-reverse
|
||||
}
|
||||
|
||||
.layui-tab-head {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-tab-card .layui-tab-head {
|
||||
background-color: var(--global-neutral-color-1);
|
||||
}
|
||||
|
||||
.layui-tab-title {
|
||||
position: relative;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
}
|
||||
|
||||
.layui-tab-title li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
position: relative;
|
||||
line-height: 40px;
|
||||
min-width: 65px;
|
||||
padding: 0 15px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.layui-tab-title li a {
|
||||
display: block;
|
||||
padding: 0 15px;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.layui-tab-head.is-top,
|
||||
.layui-tab-head.is-bottom,
|
||||
.layui-tab-title.is-top,
|
||||
.layui-tab-title.is-bottom {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-tab-title.is-right,
|
||||
.layui-tab-title.is-left {
|
||||
height: 100%;
|
||||
min-width: 60px;
|
||||
border-bottom-width: 0px;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
|
||||
.layui-tab-title.is-left li {
|
||||
display: list-item;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.layui-tab-title.is-right li{
|
||||
display: list-item;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.layui-tab-title.is-top li,
|
||||
.layui-tab-title.is-bottom li {
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-tab-title.is-right {
|
||||
border-left: 1px solid var(--global-neutral-color-3);
|
||||
}
|
||||
|
||||
.layui-tab-title.is-left {
|
||||
border-right: 1px solid var(--global-neutral-color-3);
|
||||
}
|
||||
|
||||
.layui-tab-title .layui-this {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layui-tab-title .layui-this:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-bottom-color: #fff;
|
||||
border-radius: 2px 2px 0 0;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layui-tab-title.is-left .layui-this:after {
|
||||
border: 1px solid var(--global-neutral-color-3);
|
||||
border-right-color: #FFF;
|
||||
}
|
||||
|
||||
.layui-tab-title.is-right .layui-this:after {
|
||||
border: 1px solid var(--global-neutral-color-3);
|
||||
border-left-color: #FFF;
|
||||
}
|
||||
|
||||
.layui-tab-brief>.layui-tab-head{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this {
|
||||
color: var(--global-primary-color);
|
||||
}
|
||||
|
||||
.layui-tab-brief>.layui-tab-head>.layui-tab-more li.layui-this:after,
|
||||
.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this:after {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title{
|
||||
border-left: 1px solid var(--global-neutral-color-3);
|
||||
}
|
||||
.layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title {
|
||||
border-right: 1px solid var(--global-neutral-color-3);
|
||||
}
|
||||
|
||||
.layui-tab-brief[overflow]>.layui-tab-head>.layui-tab-title .layui-this:after {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title li,
|
||||
.layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title li{
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.layui-tab-brief>.layui-tab-head.is-top>.layui-tab-title li,
|
||||
.layui-tab-brief>.layui-tab-head.is-top>.layui-tab-title li {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.layui-tab-card {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-top {
|
||||
margin-top: -1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right,
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left {
|
||||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom li {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title .layui-this:after{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom{
|
||||
border-top: 1px solid var(--global-neutral-color-3);
|
||||
margin-bottom: -2px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left li,
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-top .layui-this:after {
|
||||
border: 1px solid var(--global-neutral-color-3);
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom .layui-this:after {
|
||||
border: 1px solid var(--global-neutral-color-3);
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left .layui-this:after {
|
||||
border: 1px solid var(--global-neutral-color-3);
|
||||
border-right-color: #fff;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right .layui-this:after {
|
||||
border: 1px solid var(--global-neutral-color-3);
|
||||
border-left-color: #fff;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-head .layui-tab-bar {
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 0;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-more .layui-this {
|
||||
background: 0 0;
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
|
||||
.layui-tab-card>.layui-tab-more .layui-this:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layui-tab-bar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
width: 30px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-tab-bar.prev{
|
||||
left: 0;
|
||||
right:auto;
|
||||
border-right: 1px solid var(--global-neutral-color-3) !important;
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.layui-tab-bar .layui-icon {
|
||||
top: 3px;
|
||||
font-size: 13.6px;
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-tab-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layui-tab-more {
|
||||
padding-right: 30px;
|
||||
height: auto !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
.layui-tab-more li.layui-this:after {
|
||||
border-bottom-color: var(--global-neutral-color-3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.layui-tab-more .layui-tab-bar .layui-icon {
|
||||
top: -2px;
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.layui-tab-title li .layui-tab-close {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 20px;
|
||||
margin-left: 8px;
|
||||
top: 1px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--global-neutral-color-8);
|
||||
transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
}
|
||||
|
||||
.layui-tab-title li .layui-tab-close:hover {
|
||||
border-radius: 2px;
|
||||
background-color: #ff5722;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layui-tab-content {
|
||||
padding: 15px 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.layui-tab.is-right>.layui-tab-content,
|
||||
.layui-tab.is-left>.layui-tab-content {
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
.layui-tab-active-bar{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
height: 1.5px;
|
||||
background-color: var(--global-checked-color);
|
||||
z-index: 2;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-top .layui-tab-active-bar{
|
||||
bottom: -1px;
|
||||
height: 1.5px;
|
||||
}
|
||||
|
||||
.is-left .layui-tab-active-bar {
|
||||
left: auto;
|
||||
right: -1px;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
width: 1.5px;
|
||||
}
|
||||
|
||||
.is-right .layui-tab-active-bar {
|
||||
left: -1px;
|
||||
right: auto;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
width: 1.5px;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
Reference in New Issue
Block a user