This commit is contained in:
2022-12-09 16:41:41 +08:00
parent c1cce5a7c2
commit ff7aa8774f
2003 changed files with 156639 additions and 140 deletions

View File

@@ -0,0 +1,36 @@
import { w as withInstall } from "../badge/index2.js";
import { defineComponent, watch, ref, provide, openBlock, createElementBlock, renderSlot } from "vue";
var index = /* @__PURE__ */ (() => ".layui-collapse{border-width:1px;border-style:solid;border-radius:2px}.layui-colla-content,.layui-colla-item{border-top-width:1px;border-top-style:solid}.layui-colla-item:first-child{border-top:none}.layui-colla-title{position:relative;height:42px;line-height:42px;padding:0 15px 0 35px;color:#333;background-color:var(--global-neutral-color-1);cursor:pointer;font-size:14px;overflow:hidden}.layui-colla-content{padding:10px 15px;line-height:1.6;color:#666}.layui-colla-icon{left:15px;top:0;font-size:14px;position:absolute}\n")();
const _hoisted_1 = { class: "layui-collapse" };
const __default__ = {
name: "LayCollapse"
};
const _sfc_main = defineComponent({
...__default__,
props: {
accordion: { type: Boolean, default: false },
modelValue: { default: () => [] },
collapseTransition: { type: Boolean, default: true }
},
emits: ["update:modelValue", "change"],
setup(__props, { emit }) {
const props = __props;
watch(() => props.modelValue, (val) => {
activeValues.value = [].concat(val);
});
const activeValues = ref([].concat(props.modelValue));
provide("layCollapse", {
accordion: props.accordion,
collapseTransition: props.collapseTransition,
activeValues,
emit
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "default")
]);
};
}
});
const component = withInstall(_sfc_main);
export { component as default };

View File

@@ -0,0 +1,281 @@
::: anchor
:::
::: title 基本介绍
:::
::: describe 开关选择器, 需要表示开关状态/两种状态之间的切换时。
:::
::: title 基础使用
:::
::: demo 使用 `lay-switch` 标签, 创建开关
<template>
<lay-switch v-model="active1"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active1 = ref(false);
return {
active1
}
}
}
</script>
:::
::: title 事件回调
:::
::: demo 通过 `change` 事件, 在操作后完成一些后续处理。
<template>
<lay-switch v-model="active2" @change="change"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active2 = ref(true);
const change = function( val ) {
console.log("当前值:" + val)
}
return {
active2,
change
}
}
}
</script>
:::
::: title 禁用状态
:::
::: demo 通过 `disabled` 属性, 禁用开关操作。
<template>
<lay-switch v-model="active3" :disabled="disabled"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active3 = ref(true);
const disabled = ref(true)
return {
active3
}
}
}
</script>
:::
::: title 修改描述
:::
::: demo 通过 `onswitch-text` 与 `unswitch-text` 属性, 设置不同状态的描述文字。
<template>
<lay-switch v-model="active4" onswitch-text="白天" unswitch-text="夜间"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active4 = ref(true)
return {
active4
}
}
}
</script>
:::
::: title 图标插槽
:::
::: demo 通过 `onswitch-icon` 与 `unswitch-icon` 属性, 设置不同状态的展示图标。
<template>
<lay-switch v-model="active5">
<template #onswitch-icon>😄</template>
<template #unswitch-icon>🤔</template>
</lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active5 = ref(true)
return {
active5
}
}
}
</script>
:::
::: title 自定义值
:::
::: demo 通过 onswitch-value 与 unswitch-value 属性, 设置不同状态的值。
<template>
<lay-switch v-model="active6" onswitch-value="dark" unswitch-value="light"></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active6 = ref('dark')
return {
active6
}
}
}
</script>
:::
::: title 尺寸
:::
::: demo 通过 `size` 属性, 设置尺寸。
<template>
<div style='display:flex;align-items: flex-end;'>
<lay-switch v-model="active7" size='lg'></lay-switch>
<lay-switch v-model="active7" size='md' style='margin-left:10px'></lay-switch>
<lay-switch v-model="active7" size='sm' style='margin-left:10px'></lay-switch>
<lay-switch v-model="active7" size='xs' style='margin-left:10px'></lay-switch>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active7 = ref(true)
return {
active7
}
}
}
</script>
:::
::: title 加载状态
:::
::: demo 通过 `loading` 与 `loading-icon` 属性, 开启加载状态与自定义加载图标。
<template>
<lay-switch v-model="active8" :loading="loading8" :disabled="true"></lay-switch>
<lay-switch v-model="loading8" style='margin-left:10px'></lay-switch>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active8 = ref(true)
const loading8 = ref(true)
return {
active8,
loading8
}
}
}
</script>
:::
::: title Switch 属性
:::
::: table
| 属性 | 描述 | 类型 |默认值 | 可选值 | 版本 |
| ------------- | -------------- |--------------------------- | -------------------------| --------------------- |--------------------- |
| name | 原生 name 属性 | `string` | -- | -- |-- |
| v-model | 是否启用 | `boolean` `string` `number` | -- | -- |-- |
| disabled | 禁用 | `boolean` | `false` | `true` `false` |-- |
| onswitch-text | 启用描述 | `string` | `启动` | -- |-- |
| unswitch-text | 禁用描述 | `string` | `禁用` | -- |-- |
| onswitch-value | 启用值 | `boolean` `string` `number` | `true` | -- |-- |
| unswitch-value | 禁用值 | `boolean` `string` `number` | `false` | -- |-- |
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` `xs` |-- |
| loading | 加载状态 | `boolean` | `false` | `true` `false` | `1.4.0` |
| loading-icon | 加载图标 | `string` | `layui-icon-loading-one` | -- | `1.4.0` |
:::
::: title Switch 事件
:::
::: table
| 属性 | 描述 | 参数 |
| ------ | -------- | ---------------- |
| change | 切换事件 | val : 当前值 |
:::
::: title Switch 插槽
:::
::: table
| 属性 | 描述 | 参数 |
| ------ | -------- | ---------------- |
| onswitch-icon | 启用图标 | -- |
| unswitch-icon | 禁用图标 | -- |
:::
::: contributor switch
:::
::: previousNext switch
:::

View File

@@ -0,0 +1,52 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
import { createApp } from "./main";
import { renderToString } from "@vue/server-renderer";
export async function render(url, manifest): Promise<string[]> {
const { app, router } = createApp();
// set the router to the desired URL before rendering
router.push(url);
await router.isReady();
// passing SSR context object which will be available via useSSRContext()
// @vitejs/plugin-vue injects code into a component's step() that registers
// itself on ctx.modules. After the render, ctx.modules would contain all the
// components that have been instantiated during this render call.
const ctx = {};
const html = await renderToString(app, ctx);
// the SSR manifest generated by Vite contains module -> chunk/asset mapping
// which we can then use to determine what files need to be preloaded for this
// request.
const preloadLinks = renderPreloadLinks(ctx.modules, manifest);
return [html, preloadLinks];
}
function renderPreloadLinks(modules, manifest) {
let links = "";
const seen = new Set();
modules.forEach((id) => {
const files = manifest[id];
if (files) {
files.forEach((file) => {
if (!seen.has(file)) {
seen.add(file);
links += renderPreloadLink(file);
}
});
}
});
return links;
}
function renderPreloadLink(file) {
if (file.endsWith(".js")) {
return `<link rel="modulepreload" crossorigin href="${file}">`;
} else if (file.endsWith(".css")) {
return `<link rel="stylesheet" href="${file}">`;
} else {
return "";
}
}

View File

@@ -0,0 +1,274 @@
import { w as withInstall } from "../badge/index2.js";
import { defineComponent, onMounted, watch, ref, useSlots, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, Fragment, renderList, createBlock, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
import { _ as _sfc_main$3 } from "../input/index2.js";
import { _ as _sfc_main$2 } from "../scroll/index2.js";
import { _ as _sfc_main$1 } from "../dropdown/index2.js";
import "../checkbox/index2.js";
import "../dropdownMenu/index2.js";
import "../_chunks/@vueuse/index.js";
var index = /* @__PURE__ */ (() => ":root{--input-border-radius: var(--global-border-radius);--input-border-color: var(--global-neutral-color-3)}.layui-input{width:100%;height:38px;line-height:38px;border-width:1px;border-style:solid;border-color:var(--input-border-color);border-radius:var(--input-border-radius);display:inline-flex}.layui-input input{height:38px;line-height:38px;background-color:#fff;color:#000000d9;padding-left:10px;display:inline-block;border:none;height:100%;width:100%}.layui-input-append{background-color:#fafafa;border-left:1px solid var(--input-border-color);display:flex;padding:0 15px;flex:none;align-items:center}.layui-input-prepend{background-color:#fafafa;border-right:1px solid var(--input-border-color);display:flex;padding:0 15px;flex:none;align-items:center}.layui-input-wrapper{width:100%;display:inline-flex;border:none}.layui-input:hover,.layui-input:focus-within{border-color:#d2d2d2}.layui-input-clear,.layui-input-prefix,.layui-input-suffix,.layui-input-password{background-color:#fff}.layui-input-clear,.layui-input-password,.layui-input-prefix,.layui-input-suffix{display:flex;flex:none;align-items:center;padding:0 10px}.layui-input-has-prefix input{padding:0}.layui-input-clear,.layui-input-password{color:#00000073}.layui-input-clear:hover{opacity:.6}.layui-input input::-webkit-input-placeholder{line-height:1.3}.layui-input input::-ms-reveal{display:none}.layui-input-disabled{border-color:var(--input-border-color)!important}.layui-input-disabled{opacity:.6}.layui-input-disabled,.layui-input-disabled *{cursor:not-allowed!important}.layui-input[size=lg]{height:44px}.layui-input[size=lg] .layui-input{height:44px;line-height:44px}.layui-input[size=md]{height:38px}.layui-input[size=md] .layui-input{height:38px;line-height:38px}.layui-input[size=sm]{height:32px}.layui-input[size=sm] .layui-input{height:32px;line-height:32px}.layui-input[size=xs]{height:26px}.layui-input[size=xs] .layui-input{height:26px;line-height:26px}.layui-cascader{display:inline-block}.layui-cascader[size=lg]{height:44px;width:260px}.layui-cascader[size=lg] .layui-input{height:44px;line-height:44px}.layui-cascader[size=md]{height:38px;width:220px}.layui-cascader[size=md] .layui-input{height:38px;line-height:38px}.layui-cascader[size=sm]{height:32px;width:180px}.layui-cascader[size=sm] .layui-input{height:32px;line-height:32px}.layui-cascader[size=xs]{height:26px;width:140px}.layui-cascader[size=xs] .layui-input{height:26px;line-height:26px}.layui-cascader .layui-input-suffix{padding-right:10px}.layui-cascader .layui-icon-triangle-d{transition:all .3s ease-in-out;transform:rotate(0);color:var(--global-neutral-color-8)}.layui-cascader-opend .layui-icon-triangle-d{transform:rotate(180deg)}.layui-cascader .layui-cascader-panel{box-sizing:border-box;border-radius:2px;line-height:26px;color:#000c;font-size:14px;white-space:nowrap;display:inline-flex}.layui-cascader-menu{display:inline-block;border-right:1px solid var(--global-neutral-color-3)}.layui-cascader-menu:last-child{border-right:none}.layui-cascader-menu-item{min-width:130px;padding:5px 9px 5px 15px;box-sizing:border-box;transition:all .1s ease-in-out;display:flex;justify-content:space-between;align-items:center;min-height:35px}.layui-cascader-menu-item:hover,.layui-cascader-selected{background-color:var(--global-checked-color);color:#fff}.layui-cascader-menu-item .layui-icon-right{margin-left:10px}.layui-cascader-disabled,.layui-cascader-disabled *{cursor:not-allowed!important}\n")();
const _hoisted_1 = ["size"];
const _hoisted_2 = { class: "layui-cascader-panel" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = {
key: 2,
class: "layui-icon layui-icon-right"
};
const __default__ = {
name: "LayCascader"
};
const _sfc_main = defineComponent({
...__default__,
props: {
options: { default: null },
modelValue: { default: "" },
decollator: { default: "/" },
placeholder: { default: "" },
onlyLastLevel: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
replaceFields: { default: () => {
return {
label: "label",
value: "value",
children: "children"
};
} },
allowClear: { type: Boolean, default: false },
size: { default: "md" },
trigger: { default: "click" },
contentClass: null,
contentStyle: null
},
emits: ["update:modelValue", "change", "clear"],
setup(__props, { emit }) {
const props = __props;
onMounted(() => {
initTreeData();
});
watch(() => props.options, () => {
initTreeData();
});
watch(() => props.modelValue, () => {
if (props.modelValue === null || props.modelValue === "") {
onClear();
}
});
const treeData = ref([]);
const initTreeData = () => {
let treeLvNum = getMaxFloor(props.options);
for (let index2 = 0; index2 < treeLvNum; index2++) {
if (index2 == 0) {
treeData.value[0] = {
selectIndex: null,
data: findData(props.options, 1)
};
} else {
treeData.value[index2] = {
selectIndex: null,
data: []
};
}
}
if (props.modelValue) {
try {
let valueData = props.modelValue.split(props.decollator);
let data = [];
for (let index2 = 0; index2 < treeData.value.length; index2++) {
const element = treeData.value[index2];
const nowValue = valueData[index2];
for (let i = 0; i < element.length; i++) {
const ele = element[i];
if (nowValue === ele.value) {
data.push(ele);
element.selectIndex = i;
}
}
}
displayValue.value = data.map((e) => {
return e.label;
}).join(` ${props.decollator} `);
} catch (error) {
console.error(error);
}
}
};
function getMaxFloor(treeData2) {
let max = 0;
function each(data, floor) {
data.forEach((e) => {
if (floor > max) {
max = floor;
}
if (e[props.replaceFields.children] && e[props.replaceFields.children].length > 0) {
each(e[props.replaceFields.children], floor + 1);
}
});
}
each(treeData2, 1);
return max;
}
function findData(orginData, level) {
var _a;
let data = [];
for (let i = 0; i < orginData.length; i++) {
const element = orginData[i];
if (level === 1) {
data.push({
value: element[props.replaceFields.value],
label: element[props.replaceFields.label],
slot: element.slot || false,
children: (_a = element[props.replaceFields.children]) != null ? _a : false,
orginData: element
});
}
if (level !== 1 && element[props.replaceFields.children] && element[props.replaceFields.children].length > 0) {
findData(element[props.replaceFields.children], level - 1);
}
}
return data;
}
ref([]);
const selectBar = (item, selectIndex, parentIndex) => {
treeData.value[parentIndex].selectIndex = selectIndex;
if (item.children && item.children.length > 0) {
treeData.value[parentIndex + 1].selectIndex = null;
treeData.value[parentIndex + 1].data = findData(item.children, 1);
}
let nextIndex = parentIndex + 2;
for (let index2 = nextIndex; index2 < treeData.value.length; index2++) {
treeData.value[index2].selectIndex = null;
treeData.value[index2].data = [];
}
if (!item.children || item.children.length === 0) {
let extractData = function(orginData, dataContainer2, index2) {
const element = orginData[index2].data;
const selectIndex2 = orginData[index2].selectIndex;
const selectData = element[selectIndex2];
dataContainer2.push(selectData);
if (selectData.children && selectData.children.length > 0) {
extractData(orginData, dataContainer2, index2 + 1);
}
};
let data = [];
extractData(treeData.value, data, 0);
let fullLable = data.map((e) => {
return e.label;
}).join(` ${props.decollator} `);
if (!props.onlyLastLevel) {
displayValue.value = fullLable;
} else {
let _data = data.map((e) => {
return e.label;
});
displayValue.value = _data[_data.length - 1];
}
let value = data.map((e) => {
return e.value;
}).join(props.decollator);
emit("update:modelValue", value);
let evt = {
display: displayValue.value,
value,
label: fullLable,
currentClick: JSON.parse(JSON.stringify(item.orginData))
};
emit("change", evt);
if (dropdownRef.value)
dropdownRef.value.hide();
}
};
const displayValue = ref("");
const slots = useSlots();
const dropdownRef = ref();
const onClear = () => {
displayValue.value = "";
let arr = JSON.parse(JSON.stringify(treeData.value));
for (let index2 = 0; index2 < arr.length; index2++) {
arr[index2].selectIndex = null;
if (index2 === 0) {
continue;
}
arr[index2].data = [];
}
treeData.value = arr;
emit("update:modelValue", null);
};
const openState = ref(false);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
size: __props.size,
class: normalizeClass([
"layui-cascader",
{
"layui-cascader-opend": openState.value,
"layui-cascader-disabled": __props.disabled
}
])
}, [
createVNode(_sfc_main$1, {
ref_key: "dropdownRef",
ref: dropdownRef,
trigger: __props.trigger,
autoFitMinWidth: false,
updateAtScroll: true,
disabled: __props.disabled,
contentClass: __props.contentClass,
contentStyle: __props.contentStyle,
onShow: _cache[1] || (_cache[1] = ($event) => openState.value = true),
onHide: _cache[2] || (_cache[2] = ($event) => openState.value = false)
}, {
content: withCtx(() => [
createElementVNode("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(treeData.value, (itemCol, index2) => {
return openBlock(), createElementBlock(Fragment, null, [
itemCol.data.length ? (openBlock(), createBlock(_sfc_main$2, {
height: "180px",
class: "layui-cascader-menu",
key: "cascader-menu" + index2
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(itemCol.data, (item, i) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["layui-cascader-menu-item", [
{
"layui-cascader-selected": itemCol.selectIndex === i
}
]]),
key: index2 + i,
onClick: ($event) => selectBar(item, i, index2)
}, [
item.slot && unref(slots)[item.slot] ? renderSlot(_ctx.$slots, item.slot, { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createTextVNode(toDisplayString(item.label), 1)
], 64)),
item.children && item.children.length ? (openBlock(), createElementBlock("i", _hoisted_4)) : createCommentVNode("", true)
], 10, _hoisted_3);
}), 128))
]),
_: 2
}, 1024)) : createCommentVNode("", true)
], 64);
}), 256))
])
]),
default: withCtx(() => [
!unref(slots).default ? (openBlock(), createBlock(_sfc_main$3, {
key: 0,
modelValue: displayValue.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => displayValue.value = $event),
"suffix-icon": "layui-icon-triangle-d",
placeholder: __props.placeholder,
"allow-clear": __props.allowClear,
disabled: __props.disabled,
readonly: true,
size: __props.size,
onClear
}, null, 8, ["modelValue", "placeholder", "allow-clear", "disabled", "size"])) : renderSlot(_ctx.$slots, "default", { key: 1 })
]),
_: 3
}, 8, ["trigger", "disabled", "contentClass", "contentStyle"])
], 10, _hoisted_1);
};
}
});
const component = withInstall(_sfc_main);
export { component as default };

View File

@@ -0,0 +1,25 @@
declare module "*.vue" {
import { DefineComponent } from "vue";
const comp: DefineComponent;
export default comp;
}
declare module "*.md" {
import { DefineComponent } from "vue";
const comp: DefineComponent;
export default comp;
}
declare module "prismjs";
declare module "prismjs/components/index";
declare module "escape-html";
interface ImportMeta {
env: {
MODE: string;
BASE_URL: string;
PROD: boolean;
DEV: boolean;
SSR: boolean;
};
}