init
This commit is contained in:
Binary file not shown.
@@ -0,0 +1 @@
|
||||
xE<>A<0E>0Q<>=<3D>/<10><>LO<4C><4F>F<EFBFBD>d<EFBFBD>[<5B>! <20><>iWl<57>I<EFBFBD>*V<><56><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><02>K-<2D><>g"<><C293><18>v<EFBFBD>6n<36>т_<D182><5F><EFBFBD><EFBFBD>b]<5D>Ic<49><63>ԭT<D4AD><54>0<EFBFBD>ؙ<EFBFBD><D899>;<<3C>A<EFBFBD><41>/<2F><><07><>)<29>
|
||||
Binary file not shown.
@@ -0,0 +1,186 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "VerticalRange",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRef, Ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
import { throttle, makeDots } from "./utils/index";
|
||||
|
||||
export interface VerticalRangeProps {
|
||||
rangeValue: Array<number>;
|
||||
disabled?: boolean;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
showDots?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<VerticalRangeProps>(), {
|
||||
step: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
disabled: false,
|
||||
showDots: false,
|
||||
});
|
||||
|
||||
let rv = toRef(props, "rangeValue");
|
||||
|
||||
const moveAction = throttle(rangeMove);
|
||||
let currbtn = -1;
|
||||
function handle_mousedown() {
|
||||
currbtn = -1;
|
||||
tooptipHide.value = false;
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, handle_mouseup);
|
||||
on("mousemove", window, moveAction);
|
||||
}
|
||||
|
||||
function handle_mouseup() {
|
||||
tooptipHide.value = true;
|
||||
off("selectstart", document, handle_select);
|
||||
off("mouseup", window, handle_mouseup);
|
||||
off("mousemove", window, moveAction);
|
||||
}
|
||||
function handle_select(e: Event): void {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const tracker = ref<HTMLElement | null>(null);
|
||||
const emit = defineEmits(["link-val-hook"]);
|
||||
|
||||
const tooptipHide = ref<boolean>(true);
|
||||
|
||||
function rangeMove(e: MouseEvent) {
|
||||
// tooptipHide.value = false;
|
||||
if (!tracker.value) {
|
||||
return;
|
||||
}
|
||||
let tracker_rect = tracker.value.getBoundingClientRect();
|
||||
let origin_bottom = tracker_rect.bottom;
|
||||
let point_bottom = e.clientY;
|
||||
let distance = (point_bottom - origin_bottom) * -1;
|
||||
if (distance < props.min) {
|
||||
rv.value[0] = props.min;
|
||||
} else {
|
||||
let rate = (distance / tracker_rect.height) * 100;
|
||||
let idx = -1;
|
||||
if (currbtn === -1) {
|
||||
currbtn = moveNeighbors(Math.floor(rate), rv);
|
||||
idx = currbtn;
|
||||
} else {
|
||||
idx = currbtn;
|
||||
}
|
||||
|
||||
calcWithStep(rate, rv, idx);
|
||||
if (rv.value[1] > props.max) {
|
||||
rv.value[1] = props.max;
|
||||
}
|
||||
if (rv.value[0] < props.min) {
|
||||
rv.value[0] = props.min;
|
||||
}
|
||||
}
|
||||
emit("link-val-hook", rv.value);
|
||||
}
|
||||
|
||||
function moveNeighbors(rate: number, rangeValues: any) {
|
||||
let d1 = Math.abs(rate - rangeValues.value[0]);
|
||||
let d2 = Math.abs(rate - rangeValues.value[1]);
|
||||
if (d1 > d2) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function calcWithStep(
|
||||
rate: number | undefined,
|
||||
val: Ref<number> | Ref<number[]>,
|
||||
idx: number = -1
|
||||
) {
|
||||
if (typeof rate === "undefined") return false;
|
||||
|
||||
if (typeof val.value === "object") {
|
||||
let r = rate - val.value[idx];
|
||||
if (Math.abs(r) < props.step) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (props.step === 0) val.value[idx] = Math.floor(rate);
|
||||
|
||||
if (Array.isArray(val.value)) {
|
||||
if (r < 0 && props.step !== 0) {
|
||||
val.value[idx] -= props.step;
|
||||
} else {
|
||||
val.value[idx] += props.step;
|
||||
}
|
||||
cross(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cross(val: any) {
|
||||
if (val.value[0] > val.value[1]) {
|
||||
let tmp = val.value[0];
|
||||
val.value[0] = val.value[1];
|
||||
val.value[1] = tmp;
|
||||
currbtn = currbtn === 0 ? 1 : 0;
|
||||
}
|
||||
}
|
||||
// 断点
|
||||
const dots = makeDots(props);
|
||||
|
||||
const focusDot = (item: number) => {
|
||||
let currbtn = moveNeighbors(item, rv);
|
||||
rv.value[currbtn] = item;
|
||||
emit("link-val-hook", rv.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-slider-vertical">
|
||||
<div
|
||||
ref="tracker"
|
||||
@mousedown.stop="handle_mousedown"
|
||||
class="layui-slider-vrange"
|
||||
:class="[disabled ? 'layui-slider-disabled' : '']"
|
||||
>
|
||||
<lay-tooltip :content="'' + rv[1]" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ bottom: rv[1] + '%' }"
|
||||
class="layui-slider-vertical-btn"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<lay-tooltip :content="'' + rv[0]" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ bottom: rv[0] + '%' }"
|
||||
class="layui-slider-vertical-btn"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<div class="layui-slider-vertical-line"></div>
|
||||
<div
|
||||
:style="{
|
||||
height: rv[1] - rv[0] + '%',
|
||||
bottom: rv[0] + '%',
|
||||
}"
|
||||
class="layui-slider-vertical-rate"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
|
||||
></div>
|
||||
<div
|
||||
v-show="showDots"
|
||||
@click="focusDot(item)"
|
||||
class="layui-slider-vertical-dots"
|
||||
v-for="(item, index) in dots"
|
||||
:key="index"
|
||||
:style="{ bottom: item + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import "vue";
|
||||
const component = withInstall(_sfc_main$2E);
|
||||
export { component as default };
|
||||
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "AboutIcon",
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import LayIcon from "../component/icon/index";
|
||||
|
||||
const props = defineProps<{
|
||||
color?: string;
|
||||
size?: string;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<lay-icon :color="props.color" :size="props.size" type="layui-icon-about" />
|
||||
</template>
|
||||
Binary file not shown.
@@ -0,0 +1,43 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, useSlots, openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass, toDisplayString, unref, Fragment, createTextVNode } from "vue";
|
||||
var index = /* @__PURE__ */ (() => '.lay-page-header{display:flex;line-height:24px}.lay-page-header__left{display:flex;cursor:pointer;margin-right:40px;position:relative;color:var(--global-neutral-color-8)}.lay-page-header__left:after{content:"";position:absolute;width:1px;height:16px;right:-20px;top:50%;transform:translateY(-50%);background-color:var(--global-neutral-color-8)}.lay-page-header__left:hover .layui-icon-return,.lay-page-header__left:hover .lay-page-header__title{color:var(--global-checked-color)!important}.lay-page-header__left .layui-icon-return{font-size:14px;margin-right:6px;align-self:center}.lay-page-header__title{font-size:14px}.lay-page-header__content{font-size:18px;color:#393d49}\n')();
|
||||
const _hoisted_1 = { class: "lay-page-header" };
|
||||
const _hoisted_2 = { class: "lay-page-header__title" };
|
||||
const _hoisted_3 = { class: "lay-page-header__content" };
|
||||
const __default__ = {
|
||||
name: "LayPageHeader"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
content: { default: "" },
|
||||
backText: { default: "\u8FD4\u56DE" },
|
||||
backIcon: { default: "layui-icon-return" }
|
||||
},
|
||||
emits: ["back"],
|
||||
setup(__props, { emit: emits }) {
|
||||
const slots = useSlots();
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createElementVNode("div", {
|
||||
class: "lay-page-header__left",
|
||||
onClick: _cache[0] || (_cache[0] = ($event) => emits("back"))
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "backIcon", {}, () => [
|
||||
createElementVNode("i", {
|
||||
class: normalizeClass(["layui-icon", [__props.backIcon]])
|
||||
}, null, 2)
|
||||
]),
|
||||
createElementVNode("div", _hoisted_2, toDisplayString(__props.backText), 1)
|
||||
]),
|
||||
createElementVNode("div", _hoisted_3, [
|
||||
unref(slots).default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
||||
createTextVNode(toDisplayString(__props.content), 1)
|
||||
], 64))
|
||||
])
|
||||
]);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as default };
|
||||
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "AndroidIcon",
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import LayIcon from "../component/icon/index";
|
||||
|
||||
const props = defineProps<{
|
||||
color?: string;
|
||||
size?: string;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<lay-icon :color="props.color" :size="props.size" type="layui-icon-android" />
|
||||
</template>
|
||||
@@ -0,0 +1,78 @@
|
||||
## Introduction
|
||||
|
||||
<p>
|
||||
<a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/v/@layui/layui-vue.svg?sanitize=true" alt="Version"></a>
|
||||
<a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/l/@layui/layui-vue.svg?sanitize=true" alt="License"></a>
|
||||
<a href="https://travis-ci.org/sentsin/layui"><img alt="Build Status" src="https://img.shields.io/travis/sentsin/layui/master.svg"></a>
|
||||
<a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
|
||||
</p>
|
||||
|
||||
**[🔶 Explore the docs »](http://www.layui-vue.com)** **[Join us](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)**
|
||||
|
||||
An enterprise-class UI components based on Layui and Vue.
|
||||
|
||||
**Run with code Sandbox.**
|
||||
|
||||
[](https://codesandbox.io/s/11mvy)
|
||||
|
||||
## Features
|
||||
|
||||
A few of the things you can do with layui vue:
|
||||
|
||||
* Writing components using setup script
|
||||
* Up to 60 high quality components
|
||||
* Provide Axure design resources
|
||||
* Support theme customization
|
||||
* Support internationalization
|
||||
|
||||
## Get Started
|
||||
|
||||
Use npm to install.
|
||||
|
||||
```bash
|
||||
npm i @layui/layui-vue
|
||||
```
|
||||
Before using, you need to mount layui Vue to Vue and introduce index.css style file
|
||||
|
||||
```
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import layui from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/lib/index.css'
|
||||
|
||||
createApp(App).use(layui).mount('#app')
|
||||
```
|
||||
|
||||
We have several examples on the [website](http://layui-vue.pearadmin.com). Here is the first one to get you started:
|
||||
|
||||
```
|
||||
<template>
|
||||
<lay-button-container>
|
||||
<lay-button>Hello Word</lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Feedback
|
||||
|
||||
Feel free to send us feedback on [file an issue](https://github.com/layui-vue/layui-vue/issues/new). Feature requests are always welcome. If you wish to contribute, please take a quick look at the [guidelines](./CONTRIBUTING.md)!
|
||||
|
||||
If there's anything you'd like to chat about, please feel free to join our [Gitter chat](https://gitter.im/layui-vue/community)!
|
||||
|
||||
## Build Process
|
||||
|
||||
- `build` Packaged component library
|
||||
|
||||
Please take a look at the [contributing guidelines](./CONTRIBUTING.md) for a detailed process on how to build your application as well as troubleshooting information.
|
||||
|
||||
## Contributors
|
||||
|
||||
This project follows the [all-contributors](https://github.com/layui-vue/layui-vue/graphs/contributors) specification and is brought to you by these [awesome contributors](https://github.com/layui-vue/layui-vue/graphs/contributors).
|
||||
|
||||
<a href="https://github.com/layui-vue/layui-vue/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
|
||||
</a>
|
||||
|
||||
## Licence
|
||||
|
||||
Layui vue is licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
Binary file not shown.
@@ -0,0 +1,2 @@
|
||||
x+)JMU044f040031Q<31><51>KI<4B><49>+)f<>S*<2A>G<EFBFBD>arS͒<53>l<EFBFBD>ڏ<EFBFBD><DA8F><EFBFBD><EFBFBD>}BQSV<53>ʠ߷<>ϟ?{<7B>Z<EFBFBD><5A>浧<EFBFBD>mf<6D><66>WT<57>Z<EFBFBD><5A><EFBFBD><EFBFBD>
|
||||
2<EFBFBD><EFBFBD><EFBFBD>G<EFBFBD>7]<5D><><EFBFBD>ݭ<EFBFBD><DDAD><<3C>ơ'=<3D>2<>
|
||||
Reference in New Issue
Block a user