init
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySelectOption",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LayCheckbox from "../checkbox/index.vue";
|
||||
import {
|
||||
computed,
|
||||
ComputedRef,
|
||||
inject,
|
||||
WritableComputedRef,
|
||||
Ref,
|
||||
ref,
|
||||
} from "vue";
|
||||
|
||||
export interface SelectOptionProps {
|
||||
label?: string;
|
||||
value: string | number | object;
|
||||
disabled?: boolean;
|
||||
keyword?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<SelectOptionProps>(), {
|
||||
disabled: false,
|
||||
keyword: "",
|
||||
label: "",
|
||||
});
|
||||
|
||||
const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
|
||||
const selectRef: Ref<HTMLElement> = inject("selectRef") as Ref<HTMLElement>;
|
||||
const selectedValue: WritableComputedRef<any> = inject(
|
||||
"selectedValue"
|
||||
) as WritableComputedRef<any>;
|
||||
const multiple: ComputedRef = inject("multiple") as ComputedRef;
|
||||
const checkboxRef = ref<HTMLElement>();
|
||||
|
||||
const handleSelect = () => {
|
||||
if (multiple.value) {
|
||||
if (!props.disabled) {
|
||||
// @ts-ignore
|
||||
checkboxRef.value?.toggle();
|
||||
}
|
||||
} else {
|
||||
if (!props.disabled) {
|
||||
// @ts-ignore
|
||||
selectRef.value.hide();
|
||||
selectedValue.value = props.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const selected = computed(() => {
|
||||
if (multiple.value) {
|
||||
return selectedValue.value.indexOf(props.value) != -1;
|
||||
} else {
|
||||
return selectedValue.value === props.value;
|
||||
}
|
||||
});
|
||||
|
||||
const display = computed(() => {
|
||||
return (
|
||||
props.keyword?.toString().indexOf(searchValue.value) > -1 ||
|
||||
props.label?.toString().indexOf(searchValue.value) > -1
|
||||
);
|
||||
});
|
||||
|
||||
const classes = computed(() => {
|
||||
return [
|
||||
"layui-select-option",
|
||||
{
|
||||
"layui-this": selected.value,
|
||||
"layui-disabled": props.disabled,
|
||||
},
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dd v-show="display" :class="classes" @click="handleSelect">
|
||||
<template v-if="multiple">
|
||||
<lay-checkbox
|
||||
skin="primary"
|
||||
ref="checkboxRef"
|
||||
v-model="selectedValue"
|
||||
:disabled="disabled"
|
||||
:value="value"
|
||||
></lay-checkbox>
|
||||
</template>
|
||||
<slot>{{ label }}</slot>
|
||||
</dd>
|
||||
</template>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,26 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, openBlock, createElementBlock, mergeProps, createVNode, unref, createCommentVNode } from "vue";
|
||||
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
|
||||
const _hoisted_1 = { key: 0 };
|
||||
const __default__ = {
|
||||
name: "LaySkeletonItem"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
type: { default: "p" }
|
||||
},
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", mergeProps({
|
||||
class: ["lay-skeleton-item", `lay-skeleton-type--${__props.type}`]
|
||||
}, _ctx.$attrs), [
|
||||
__props.type === "image" ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createVNode(unref(_sfc_main$2E), { type: "layui-icon-picture" })
|
||||
])) : createCommentVNode("", true)
|
||||
], 16);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { _sfc_main as _, component as c };
|
||||
@@ -0,0 +1,33 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>选项</legend>
|
||||
</fieldset>
|
||||
|
||||
我们提供了丰富的 `options` 配置, 你可以通过配置来满足对 layer 的定制化, 需要注意的是有些属性仅适用部分组件。
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| -- | -- | -- | -- | -- |
|
||||
| type | 类型 | string | `1` | `0` `1` `2` `3` `4` `5` |
|
||||
| title | 标题 | string boolean | `信息` | -- |
|
||||
| content | 内容 | string vnode | -- | -- |
|
||||
| v-model | 显示 | boolean | `false` | `true` `false` |
|
||||
| offset | 位置 | string array | `['50%','50%']` | -- |
|
||||
| area | 尺寸 | string array | `auto` | -- |
|
||||
| move | 拖拽 | boolean | `true` | `true` `false` |anim
|
||||
| maxmin | 缩放 | boolean | `false` | `true` `false` |
|
||||
| resize | 拉伸 | boolean | `false` | `true` `false` |
|
||||
| anim | 入场动画 | number | `0` | `0` - `6` |
|
||||
| isOutAnim | 出场动画 | boolean | `true` | `true` `false` |
|
||||
| btnAlign | 按钮位置 | string | `r` | `l` `c` `r` |
|
||||
| closeBtn | 关闭按钮 | boolean string | `1` | `false` `1` `2` |
|
||||
| time | 关闭时间 | number | `0` | -- |
|
||||
| shade | 遮盖层 | boolean | `true` | `true` `false` |
|
||||
| shadeClose | 遮盖层关闭 | boolean | `true` | `true` `false` |
|
||||
| shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
|
||||
| isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
|
||||
| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选',thumb:'缩略图可选'}] | - | - |
|
||||
| startIndex | 图片初始浏览索引 | number | 0 | - |
|
||||
| full | 最大化回调 | function | - | - |
|
||||
| min | 最小化回调 | function | - | - |
|
||||
| restore | 重置回调 | function | - | - |
|
||||
| success | 打开回调 | function | - | - |
|
||||
| end | 关闭回调 | function | - | - |
|
||||
@@ -0,0 +1 @@
|
||||
.lay-tooltip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.layui-popper{position:fixed;padding:10px;border-radius:3px;word-wrap:break-word;min-width:12px;min-height:12px;font-size:14px;box-sizing:border-box;box-shadow:0 2px 12px #00000026;background-color:#fff;color:#3a3a3a;border:1px solid #cecece;max-width:300px;z-index:99999}.layui-popper[position=top]{margin-bottom:6px}.layui-popper[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#cecece}.layui-popper[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#fff}.layui-popper[position=bottom]{margin-top:6px}.layui-popper[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#cecece}.layui-popper[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#fff}.layui-popper[position=right]{margin-left:6px}.layui-popper[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#cecece}.layui-popper[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#fff}.layui-popper[position=left]{margin-right:6px}.layui-popper[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#cecece}.layui-popper[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#fff}.layui-popper[position=top] .layui-popper-arrow,.layui-popper[position=bottom] .layui-popper-arrow{left:-moz-calc(44%);left:-webkit-calc(44%);left:calc(50% - 6px)}.layui-popper[position=left] .layui-popper-arrow,.layui-popper[position=right] .layui-popper-arrow{top:-moz-calc(44%);top:-webkit-calc(44%);top:calc(50% - 6px)}.layui-popper:after{content:" ";position:absolute;display:block}.layui-popper[position=top]:after{bottom:-7px;left:0;width:100%;height:7px}.layui-popper[position=bottom]:after{top:-7px;left:0;width:100%;height:7px}.layui-popper[position=left]:after{right:-7px;bottom:0;height:100%;width:7px}.layui-popper[position=right]:after{left:-7px;bottom:0;height:100%;width:7px}.layui-popper .layui-popper-arrow,.layui-popper .layui-popper-arrow:after{position:absolute;display:block;width:0;height:0;border-width:6px;border-style:solid;border-color:transparent}.layui-popper .layui-popper-arrow:after{content:" "}.layui-popper.layui-dark{background-color:#353535;color:#fff;border:1px solid #353535}.layui-popper.layui-dark[position=top]{margin-bottom:6px}.layui-popper.layui-dark[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#353535}.layui-popper.layui-dark[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#353535}.layui-popper.layui-dark[position=bottom]{margin-top:6px}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#353535}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#353535}.layui-popper.layui-dark[position=right]{margin-left:6px}.layui-popper.layui-dark[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#353535}.layui-popper.layui-dark[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#353535}.layui-popper.layui-dark[position=left]{margin-right:6px}.layui-popper.layui-dark[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#353535}.layui-popper.layui-dark[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#353535}
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,88 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, computed, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, Fragment, renderSlot } from "vue";
|
||||
var index = /* @__PURE__ */ (() => ".layui-switch-container[size=lg] .layui-form-switch{height:24px;min-width:42px}.layui-switch-container[size=lg] .layui-form-switch span{width:20px;height:20px;transition:all .1s linear}.layui-switch-container[size=lg] .layui-form-switch em{margin-left:21px}.layui-switch-container[size=lg] .layui-form-onswitch span{left:calc(100% - 23px)}.layui-switch-container[size=lg] .layui-form-onswitch em{margin-right:21px;margin-left:0}.layui-switch-container[size=md] .layui-form-switch{height:22px;min-width:37px}.layui-switch-container[size=md] .layui-form-switch span{width:18px;height:18px;transition:all .1s linear}.layui-switch-container[size=md] .layui-form-switch em{margin-left:19px}.layui-switch-container[size=md] .layui-form-onswitch span{left:calc(100% - 21px)}.layui-switch-container[size=md] .layui-form-onswitch em{margin-right:19px;margin-left:0}.layui-switch-container[size=sm] .layui-form-switch{height:20px;min-width:32px}.layui-switch-container[size=sm] .layui-form-switch span{width:16px;height:16px;transition:all .1s linear}.layui-switch-container[size=sm] .layui-form-switch em{margin-left:17px}.layui-switch-container[size=sm] .layui-form-onswitch span{left:calc(100% - 19px)}.layui-switch-container[size=sm] .layui-form-onswitch em{margin-right:17px;margin-left:0}.layui-switch-container[size=xs] .layui-form-switch{height:18px;min-width:27px}.layui-switch-container[size=xs] .layui-form-switch span{width:14px;height:14px;transition:all .1s linear}.layui-switch-container[size=xs] .layui-form-switch em{margin-left:15px}.layui-switch-container[size=xs] .layui-form-onswitch span{left:calc(100% - 17px)}.layui-switch-container[size=xs] .layui-form-onswitch em{margin-right:15px;margin-left:0}.layui-switch-container .layui-switch-input{display:none}.layui-form-switch{position:relative;height:22px;line-height:22px;min-width:35px;padding:0 4px;border-radius:20px;cursor:pointer;background-color:var(--global-neutral-color-6);-webkit-transition:all .1s linear;transition:all .1s linear}.layui-form-switch span{position:absolute;display:flex;align-items:center;justify-content:center;left:3px;top:2px;width:18px;height:18px;line-height:18px;border-radius:20px;background-color:#fff;box-shadow:0 2px 4px #00230b33;-webkit-transition:all .1s linear;transition:all .1s linear}.layui-form-switch em{position:relative;padding:0 2px;text-align:center!important;color:#999!important;font-style:normal!important;font-size:12px;width:25px;top:0}.layui-form-onswitch{border-color:var(--global-checked-color);background-color:var(--global-checked-color)}.layui-form-onswitch span{background-color:#fff}.layui-form-onswitch em{color:#fff!important}.layui-switch-disabled{opacity:.6}.layui-switch-disabled,.layui-switch-disabled *{cursor:not-allowed!important}\n")();
|
||||
const _hoisted_1 = ["onClick", "size"];
|
||||
const _hoisted_2 = ["name", "value"];
|
||||
const _hoisted_3 = { key: 0 };
|
||||
const __default__ = {
|
||||
name: "LaySwitch"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
name: null,
|
||||
disabled: { type: Boolean, default: false },
|
||||
modelValue: { type: [String, Number, Boolean] },
|
||||
onswitchText: null,
|
||||
unswitchText: null,
|
||||
onswitchColor: null,
|
||||
unswitchColor: null,
|
||||
onswitchValue: { type: [String, Number, Boolean], default: true },
|
||||
unswitchValue: { type: [String, Number, Boolean], default: false },
|
||||
size: { default: "md" },
|
||||
loadingIcon: { default: "layui-icon-loading-one" },
|
||||
loading: { type: Boolean }
|
||||
},
|
||||
emits: ["update:modelValue", "change"],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const isActive = computed({
|
||||
get() {
|
||||
return props.modelValue === props.onswitchValue;
|
||||
},
|
||||
set(val) {
|
||||
if (val) {
|
||||
emit("change", props.onswitchValue);
|
||||
emit("update:modelValue", props.onswitchValue);
|
||||
} else {
|
||||
emit("change", props.unswitchValue);
|
||||
emit("update:modelValue", props.unswitchValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
const handleClick = () => {
|
||||
if (!props.disabled) {
|
||||
isActive.value = !isActive.value;
|
||||
}
|
||||
};
|
||||
const styles = computed(() => {
|
||||
return {
|
||||
"background-color": isActive.value ? props.onswitchColor : props.unswitchColor
|
||||
};
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("span", {
|
||||
onClick: withModifiers(handleClick, ["stop"]),
|
||||
class: "layui-switch-container",
|
||||
size: __props.size
|
||||
}, [
|
||||
createElementVNode("input", {
|
||||
class: "layui-switch-input",
|
||||
name: __props.name,
|
||||
value: __props.modelValue
|
||||
}, null, 8, _hoisted_2),
|
||||
createElementVNode("div", {
|
||||
class: normalizeClass(["layui-unselect layui-form-switch", {
|
||||
"layui-form-onswitch": unref(isActive),
|
||||
"layui-switch-disabled": __props.disabled
|
||||
}]),
|
||||
style: normalizeStyle(unref(styles))
|
||||
}, [
|
||||
__props.onswitchText || __props.unswitchText ? (openBlock(), createElementBlock("em", _hoisted_3, toDisplayString(unref(isActive) == true ? __props.onswitchText : __props.unswitchText), 1)) : createCommentVNode("", true),
|
||||
createElementVNode("span", null, [
|
||||
createElementVNode("div", null, [
|
||||
__props.loading ? (openBlock(), createElementBlock("i", {
|
||||
key: 0,
|
||||
class: normalizeClass(["layui-icon layui-anim layui-anim-rotate layui-anim-loop", __props.loadingIcon])
|
||||
}, null, 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
||||
unref(isActive) ? renderSlot(_ctx.$slots, "onswitch-icon", { key: 0 }) : renderSlot(_ctx.$slots, "unswitch-icon", { key: 1 })
|
||||
], 64))
|
||||
])
|
||||
])
|
||||
], 6)
|
||||
], 8, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as default };
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="layui-laydate">
|
||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||
<div class="layui-laydate-header">
|
||||
<div class="laydate-set-ym">
|
||||
<span class="laydate-time-text">{{
|
||||
t("datePicker.selectYear")
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="layui-laydate-content"
|
||||
style="height: 220px; overflow-y: auto"
|
||||
ref="ScrollRef"
|
||||
>
|
||||
<ul class="layui-laydate-list laydate-year-list">
|
||||
<li
|
||||
v-for="item of yearList"
|
||||
:key="item"
|
||||
:class="{
|
||||
'layui-this': Year === item,
|
||||
'layui-laydate-current': !Year && item === dayjs().year(),
|
||||
}"
|
||||
@click="handleYearClick(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
|
||||
<span
|
||||
v-if="datePicker.type === 'yearmonth'"
|
||||
@click="datePicker.showPanel.value = 'month'"
|
||||
class="laydate-btns-time"
|
||||
>{{ t("datePicker.selectMonth") }}</span
|
||||
>
|
||||
<template v-else-if="Year > 0">{{ Year }}</template>
|
||||
</PanelFoot>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "YearPanel",
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import dayjs from "dayjs";
|
||||
import { useI18n } from "../../../language";
|
||||
import { inject, nextTick, onMounted, ref, watch } from "vue";
|
||||
import { getYears } from "../day";
|
||||
import { provideType } from "../interface";
|
||||
import PanelFoot from "./PanelFoot.vue";
|
||||
|
||||
export interface TimePanelProps {
|
||||
modelValue: number | string;
|
||||
max?: number;
|
||||
}
|
||||
const props = withDefaults(defineProps<TimePanelProps>(), {
|
||||
max: dayjs().year() + 100,
|
||||
});
|
||||
const emits = defineEmits(["update:modelValue", "ok"]);
|
||||
const datePicker: provideType = inject("datePicker") as provideType;
|
||||
const yearList = ref<number[]>(getYears());
|
||||
const unWatch = ref(false);
|
||||
const Year = ref(props.modelValue);
|
||||
const { t } = useI18n();
|
||||
|
||||
// 点击年份
|
||||
const handleYearClick = (item: any) => {
|
||||
unWatch.value = true;
|
||||
Year.value = item;
|
||||
if (!datePicker.range) {
|
||||
if (datePicker.type === "year") {
|
||||
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||||
} else if (datePicker.type === "yearmonth") {
|
||||
datePicker.currentDay.value = dayjs().year(item).valueOf();
|
||||
datePicker.showPanel.value = "month";
|
||||
emits("update:modelValue", Year.value);
|
||||
} else {
|
||||
emits("update:modelValue", Year.value);
|
||||
datePicker.showPanel.value = datePicker.type;
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
unWatch.value = false;
|
||||
}, 0);
|
||||
|
||||
if (datePicker.simple) {
|
||||
footOnOk();
|
||||
}
|
||||
};
|
||||
|
||||
const ScrollRef = ref();
|
||||
onMounted(() => {
|
||||
scrollTo();
|
||||
});
|
||||
watch(
|
||||
() => Year,
|
||||
() => {
|
||||
Year.value = props.modelValue;
|
||||
}
|
||||
);
|
||||
const scrollTo = () => {
|
||||
nextTick(() => {
|
||||
let scrollTop = 0;
|
||||
for (const child of ScrollRef.value.firstElementChild.childNodes) {
|
||||
if (child.classList && child.classList.contains("layui-this")) {
|
||||
scrollTop =
|
||||
child.offsetTop -
|
||||
(ScrollRef.value.offsetHeight - child.offsetHeight) / 2;
|
||||
break;
|
||||
}
|
||||
}
|
||||
ScrollRef.value.scrollTo(0, scrollTop);
|
||||
});
|
||||
};
|
||||
|
||||
//关闭回调
|
||||
const footOnOk = () => {
|
||||
emits("update:modelValue", Year.value ? Year.value : -1);
|
||||
if (datePicker.range) {
|
||||
//关闭菜单
|
||||
emits("ok");
|
||||
return;
|
||||
} else {
|
||||
if (datePicker.type === "datetime" || datePicker.type === "date") {
|
||||
datePicker.showPanel.value = datePicker.type;
|
||||
} else {
|
||||
datePicker.ok();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//现在回调
|
||||
const footOnNow = () => {
|
||||
Year.value = dayjs().year();
|
||||
if (datePicker.type === "yearmonth") {
|
||||
datePicker.currentMonth.value = dayjs().month();
|
||||
}
|
||||
scrollTo();
|
||||
};
|
||||
|
||||
//清空回调
|
||||
const footOnClear = () => {
|
||||
Year.value = "";
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
@@ -0,0 +1,15 @@
|
||||
#!/bin/sh
|
||||
#
|
||||
# An example hook script to check the commit log message taken by
|
||||
# applypatch from an e-mail message.
|
||||
#
|
||||
# The hook should exit with non-zero status after issuing an
|
||||
# appropriate message if it wants to stop the commit. The hook is
|
||||
# allowed to edit the commit message file.
|
||||
#
|
||||
# To enable this hook, rename this file to "applypatch-msg".
|
||||
|
||||
. git-sh-setup
|
||||
commitmsg="$(git rev-parse --git-path hooks/commit-msg)"
|
||||
test -x "$commitmsg" && exec "$commitmsg" ${1+"$@"}
|
||||
:
|
||||
Reference in New Issue
Block a user