Skip to content

Commit

Permalink
Merge pull request #13 from zzxming/dev
Browse files Browse the repository at this point in the history
  • Loading branch information
zzxming committed May 18, 2024
2 parents 259a38c + 4d9212f commit 76748db
Show file tree
Hide file tree
Showing 23 changed files with 458 additions and 298 deletions.
99 changes: 50 additions & 49 deletions docs/.vitepress/components/code.vue
Original file line number Diff line number Diff line change
@@ -1,49 +1,50 @@
<script lang="ts" setup>
import { ref, computed } from 'vue';
const props = defineProps<{
source: string;
}>();
const isExpand = ref(false);
const exampleCodeText = computed(() => (isExpand.value ? '隐藏源代码' : '查看源代码'));
const exampleCodeStyle = computed(() => ({
height: isExpand.value ? 'auto' : '0',
}));
const code = computed(() => decodeURIComponent(props.source));
</script>

<template>
<div class="example-source">
<div
class="example-source-wrapper"
:style="exampleCodeStyle"
>
<div
class="example-source-code language-vue"
v-html="code"
/>
</div>
<div
class="example-source-expand"
@click="isExpand = !isExpand"
>
{{ exampleCodeText }}
</div>
</div>
</template>

<style lang="less" scoped>
.example {
&-source {
&-wrapper {
@apply overflow-hidden;
}
&-expand {
@apply sticky bottom-0 z-10 w-full flex items-center justify-center p-2
border-t cursor-pointer text-gray-500 hover:text-blue-500 bg-white rounded-b-lg;
}
}
}
</style>
<script lang="ts" setup>
import { CdxCollapseTransition } from 'cdx-component';
import { ref, computed } from 'vue';
const props = defineProps<{
source: string;
}>();
const isExpand = ref(false);
const exampleCodeText = computed(() => (isExpand.value ? '隐藏源代码' : '查看源代码'));
const code = computed(() => decodeURIComponent(props.source));
</script>

<template>
<div class="example-source">
<CdxCollapseTransition>
<div
class="example-source-wrapper"
v-show="isExpand"
>
<div
class="example-source-code language-vue"
v-html="code"
/>
</div>
</CdxCollapseTransition>
<div
class="example-source-expand"
@click="isExpand = !isExpand"
>
{{ exampleCodeText }}
</div>
</div>
</template>

<style lang="less">
.example {
&-source {
&-wrapper {
@apply overflow-hidden;
}
&-expand {
background-color: var(--vp-c-bg);
@apply sticky bottom-0 z-10 w-full flex items-center justify-center p-2
border-t cursor-pointer text-gray-500 hover:text-blue-500 rounded-b-lg;
}
}
}
</style>
2 changes: 1 addition & 1 deletion docs/.vitepress/config/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default defineConfig({
rewrites: {
'/index.md': '/component/usage.md',
},
appearance: false,
// appearance: false,
themeConfig: {
sidebar: {
'/component/': [
Expand Down
2 changes: 2 additions & 0 deletions docs/component/captcha.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

## 点击验证

可使用 `onBeforeSuccess` 监听验证验证并控制是否验证成功

:::demo captcha/point

:::
Expand Down
17 changes: 9 additions & 8 deletions docs/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./**/*.{less,vue}'],
theme: {
extend: {},
},
plugins: [],
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./**/*.{less,vue}'],
darkMode: 'selector',
theme: {
extend: {},
},
plugins: [],
};
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ const selectContext = inject(selectContextKey, undefined);
const [, bem] = useBem('element-select-item');
const curStatus = ref<unknown>(false);
const curStatus = ref<ElementSelectValueType>(false);
const className = computed(() => [
bem.b(),
isChecked.value && bem.bm('checked'),
isDisabled.value && bem.bm('disabled'),
]);
const model = computed({
const model = computed<ElementSelectValueType | ElementSelectValueType[]>({
get() {
return selectContext ? selectContext.modelValue.value : props.modelValue ?? curStatus.value;
},
Expand Down
70 changes: 31 additions & 39 deletions packages/theme/src/animation/direction.less
Original file line number Diff line number Diff line change
Expand Up @@ -3,66 +3,58 @@

.direction(@animationName, @isSibling: false) {
@directions: ltr, rtl, ttb, btt;
.@{namespace}-@{animationName} {
&-enter-active,
&-leave-active {
each(range(length(@directions)), {
@direction: extract(@directions, @value);
@resultClass: if(@isSibling, ~'&.@{direction}', ~'.@{direction}');

each(@directions, {
@resultClass: if(@isSibling, ~'&.@{value}', ~'.@{value}');

.@{namespace}-@{animationName} {
&-enter-active,
&-leave-active {
@{resultClass} {
@apply transition-transform;
transition-duration: .getCssVar(transition-duration) [];
}
});
}
&-enter-from,
&-leave-to {
@{resultClass} when (@value = ltr) {
--tw-translate-x: -100%;
}
@{resultClass} when (@value = rtl) {
--tw-translate-x: 100%;
}
@{resultClass} when (@value = ttb) {
--tw-translate-y: -100%;
}
@{resultClass} when (@value = btt) {
--tw-translate-y: 100%;
}
}
}
}
each(range(length(@directions)), {
@direction: extract(@directions, @value);
@resultClass: if(@isSibling, ~'&.@{direction}', ~'.@{direction}');
});
each(@directions, {
@resultClass:if(@isSibling, ~'&.@{value}', ~'.@{value}');

@{resultClass} {
@apply absolute transform-gpu;
}
@{resultClass} when (@direction = ltr), (@direction = rtl) {
@{resultClass} when (@value = ltr), (@value = rtl) {
@apply top-0 bottom-0;
}
@{resultClass} when (@direction = ttb), (@direction = btt) {
@{resultClass} when (@value = ttb), (@value = btt) {
@apply left-0 right-0;
}
@{resultClass} when (@direction = ltr) {
@{resultClass} when (@value = ltr) {
@apply left-0;
}
@{resultClass} when (@direction = rtl) {
@{resultClass} when (@value = rtl) {
@apply right-0;
}
@{resultClass} when (@direction = ttb) {
@{resultClass} when (@value = ttb) {
@apply top-0;
}
@{resultClass} when (@direction = btt) {
@{resultClass} when (@value = btt) {
@apply bottom-0;
}
});
each(range(length(@directions)), {
@direction: extract(@directions, @value);
@resultClass: if(@isSibling, ~'&.@{direction}', ~'.@{direction}');

.@{namespace}-@{animationName} {
&-enter-from,
&-leave-to {
@{resultClass} when (@direction = ltr) {
--tw-translate-x: -100%;
}
@{resultClass} when (@direction = rtl) {
--tw-translate-x: 100%;
}
@{resultClass} when (@direction = ttb) {
--tw-translate-y: -100%;
}
@{resultClass} when (@direction = btt) {
--tw-translate-y: 100%;
}
}
}
});
}
70 changes: 35 additions & 35 deletions packages/theme/src/animation/fade.less
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
@import '../shared/variables.less';
@import '../shared/functions.less';
@import './createKeyframe.less';

.keyframes(e('@{namespace}-fade-out'), {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
});
.keyframes(e('@{namespace}-fade-in'), {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
});
.fade-in() {
animation: e('@{namespace}-fade-in') .getCssVar(transition-duration) [] ease-in-out;
}
.fade-out() {
animation: e('@{namespace}-fade-out') .getCssVar(transition-duration) [] ease-in-out;
}

.@{namespace}-fade {
&-enter-active {
.fade-in();
}
&-leave-active {
.fade-out();
}
}
@import '../shared/variables.less';
@import '../shared/functions.less';
@import './createKeyframe.less';

.keyframes(e('@{namespace}-fade-out'), {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
});
.keyframes(e('@{namespace}-fade-in'), {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
});
.fade-in() {
animation: e('@{namespace}-fade-in') .getCssVar(transition-duration) [] ease-in-out;
}
.fade-out() {
animation: e('@{namespace}-fade-out') .getCssVar(transition-duration) [] ease-in-out;
}

.@{namespace}-fade {
&-enter-active {
.fade-in();
}
&-leave-active {
.fade-out();
}
}
14 changes: 1 addition & 13 deletions packages/theme/src/base.less
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,7 @@
@import './shared/variables.less';
@import './shared/functions.less';

:root {
.setCssVar(transition-duration, 300ms);

.setCssVar(border-color-light-2, #e9ecef);

.setCssVar(color-white, #ffffff);
.setCssVar(color-black, #000000);
.setCssVar(text-color-primary, #303133);
.setCssVar(text-color-regular, #606266);
.setCssVar(text-color-secondary, #909399);
.setCssVar(text-color-placeholder, #a8abb2);
.setCssVar(text-color-disabled, #c0c4cc);
}
@import './variables.less';

.@{namespace}-relative {
@apply relative;
Expand Down
20 changes: 11 additions & 9 deletions packages/theme/src/captcha-slider.less
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
@import './shared/variables.less';
@import './shared/functions.less';

.@{namespace}-captcha-slider {
.setCssVar(captcha-slider-bg, #f8f9fa);
.setCssVar(captcha-slider-bg-color, #67e8f9);
.setCssVar(captcha-slider-bg-color, .getCssVar(fill-color-background) []);
.setCssVar(captcha-slider-bg-color-fill, .getCssVar(blue-2) []);
.setCssVar(captcha-slider-bg-transition, width 0ms ease);
.setCssVar(captcha-slider-height, 40px);
.setCssVar(captcha-slider-tip-color, #495057);
.setCssVar(captcha-slider-tip-color-fill, #ffffff);
.setCssVar(captcha-slider-tip-color, .getCssVar(text-color-primary) []);
.setCssVar(captcha-slider-tip-color-fill, .getCssVar(color-white) []);
.setCssVar(captcha-slider-tip-transition, background-position-x 0ms ease);
.setCssVar(captcha-slider-trigger-width, 40px);
.setCssVar(captcha-slider-trigger-height, 40px);
.setCssVar(captcha-slider-trigger-color, #a1adb1);
.setCssVar(captcha-slider-trigger-shadow, 0 0 6px #dee2e6);
.setCssVar(captcha-slider-trigger-color, .getCssVar(text-color-placeholder) []);
.setCssVar(captcha-slider-trigger-shadow, .getCssVar(shadow-base) []);
.setCssVar(captcha-slider-trigger-transition, width 0ms ease);

height: .getCssVar(captcha-slider-height) [];
padding: 0 calc(.getCssVar(captcha-slider-trigger-width) [] * 0.5);
background-color: .getCssVar(captcha-slider-bg) [];
background-color: .getCssVar(captcha-slider-bg-color) [];
@apply relative border border-gray-300 rounded select-none;
&__track {
@apply relative flex items-center justify-center w-full h-full;
}
&__bg {
background-color: .getCssVar(captcha-slider-bg-color) [];
background-color: .getCssVar(captcha-slider-bg-color-fill) [];
transition: .getCssVar(captcha-slider-bg-transition) [];
@apply absolute top-0 left-0 h-full;
}
Expand Down Expand Up @@ -52,5 +51,8 @@
&--lock {
@apply cursor-not-allowed;
}
&:hover {
color: .getCssVar(captcha-slider-bg-color-fill) [];
}
}
}
Loading

0 comments on commit 76748db

Please sign in to comment.