dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

dev

Browse Source
This commit is contained in:
imelon
2025-03-29 00:48:05 +08:00
parent a865439f39
commit 4c392a23d3
17 changed files with 428 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/calc/autocomplete/index.vue
+1 -1
View File
@@ -170,7 +170,7 @@ export default defineComponent({
z-index: 888;
$hoverColor: #002947;
$activeColor: lighten($hoverColor, 5%);
$activeColor: color.scale($hoverColor, $lightness: 5%);
color: $text-color;
.i-autocomplete-dropdown-item {
frontend/src/components/calc/button/index.vue
+1
View File
@@ -25,6 +25,7 @@ export default defineComponent({
default: "primary"
}
},
emits: ["click"],
setup(props, { slots }) {
return () => {
const proerpties = {
frontend/src/components/calc/cascader/index.vue
+2 -1
View File
@@ -156,6 +156,7 @@ export default defineComponent({
</script>
<style lang="scss">
@use 'sass:color';
$text-color: #937639;
.i-cascader {
min-width: 80px;
@@ -241,7 +242,7 @@ $text-color: #937639;
z-index: 888;
$hoverColor: #002947;
$activeColor: lighten($hoverColor, 5%);
$activeColor: color.scale($hoverColor, $lightness: 5%);
color: $text-color;
}
frontend/src/components/calc/checkbox/index.vue
+160 -145
View File
@@ -1,26 +1,26 @@
<script lang="tsx">
import type { EmitsOptions, SetupContext } from "vue";
import { computed, defineComponent, inject, nextTick, renderSlot } from "vue"
import { selectionProps, switchEmits, switchProps, useSelectionItem, useSwitch } from "hoci"
import { CHECKBOX_GROUP } from "../shared"
import type { EmitsOptions, SetupContext } from 'vue'
import { computed, defineComponent, inject, nextTick, renderSlot } from 'vue'
import { selectionProps, switchEmits, switchProps, useSelectionItem, useSwitch } from 'hoci'
import { CHECKBOX_GROUP } from '../shared'
export default defineComponent({
name: "ICheckbox",
name: 'ICheckbox',
components: {},
props: {
...switchProps,
...selectionProps,
label: {
type: String
type: String,
},
disabled: {
type: Boolean,
default: false
default: false,
},
round: {
type: Boolean,
default: () => false
}
default: () => false,
},
},
emits: [...switchEmits],
@@ -29,18 +29,23 @@ export default defineComponent({
return inject(CHECKBOX_GROUP, false)
})
const { toggle, switchClass } = useSwitch(
const { toggle, className: switchClass } = useSwitch(
() => ({
...props,
class: props.round ? "i-switch text-xs h-auto cursor-pointer" : "i-checkbox text-xs h-auto cursor-pointer",
activeClass: "checked"
class: props.round
? 'i-switch text-xs h-auto cursor-pointer'
: 'i-checkbox text-xs h-auto cursor-pointer',
activeClass: 'checked',
}),
context
context,
)
const { activate, itemClass } = useSelectionItem(props, context as SetupContext<EmitsOptions>)
const { activate, className: itemClass } = useSelectionItem(
props,
context as SetupContext<EmitsOptions>,
)
const baseClass = computed(() => (props.round ? "i-switch" : "i-checkbox"))
const baseClass = computed(() => (props.round ? 'i-switch' : 'i-checkbox'))
const { slots } = context
@@ -59,153 +64,163 @@ export default defineComponent({
})
return () => (
<div onClick={onClick} class={["flex", baseClass.value, className.value]}>
<span class={!props.disabled ? "i-checkbox-icon" : "i-checkbox-icon-disable"}></span>
<div class={["i-checkbox-label h-auto"]}>{props.label ?? renderSlot(slots, "default")}</div>
<div onClick={onClick} class={['flex', baseClass.value, className.value]}>
<span class={!props.disabled ? 'i-checkbox-icon' : 'i-checkbox-icon-disable'}></span>
<div class={['i-checkbox-label h-auto']}>{props.label ?? renderSlot(slots, 'default')}</div>
</div>
)
}
},
})
</script>
<style lang="scss">
.i-checkbox {
display: flex;
align-items: center;
justify-content: baseline;
&.checked {
.i-checkbox-icon {
background-image: url("@/assets/img/control/checkbox_checked.png");
}
}
.i-checkbox {
display: flex;
align-items: center;
justify-content: baseline;
&.checked {
.i-checkbox-icon {
width: 12px;
min-width: 12px;
height: 12px;
margin-right: 4px;
background-image: url("@/assets/img/control/checkbox_uncheck.png");
}
.i-checkbox-icon-disable {
width: 12px;
min-width: 12px;
height: 12px;
margin-right: 4px;
background-image: url("@/assets/img/control/checkbox_disable.png");
}
&:hover:not(.checked) {
.i-checkbox-icon {
background-image: url("@/assets/img/control/checkbox_hover.png");
}
}
.i-checkbox-label {
line-height: 24px;
color: #937639;
background-image: url('@/assets/img/control/checkbox_checked.png');
}
}
.i-switch {
display: flex;
align-items: center;
// justify-content: center;
.i-checkbox-icon {
width: 12px;
min-width: 12px;
height: 12px;
margin-right: 4px;
background-image: url('@/assets/img/control/checkbox_uncheck.png');
}
&.checked {
.i-checkbox-icon {
background-image: linear-gradient(to right, #8f6e29, #8f6e29), linear-gradient(rgb(110, 89, 61), rgb(60, 46, 30));
}
.i-checkbox-icon::after {
left: 100%;
margin-left: -14.8px;
}
}
.i-checkbox-icon-disable {
width: 12px;
min-width: 12px;
height: 12px;
margin-right: 4px;
background-image: url('@/assets/img/control/checkbox_disable.png');
}
&:hover:not(.checked) {
.i-checkbox-icon {
margin: 0;
display: inline-block;
position: relative;
width: 30px;
height: 18px;
background-image: url('@/assets/img/control/checkbox_hover.png');
}
}
outline: none;
border-radius: 10px;
box-sizing: border-box;
background: #dcdfe6;
cursor: pointer;
transition: border-color 0.3s, background-color 0.3s;
vertical-align: middle;
// border-radius: 16px;
border: 1.5px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #141414, #141414), linear-gradient(rgb(110, 89, 61), rgb(60, 46, 30));
box-shadow: inset 0 0 2px 1.5px black;
.i-checkbox-label {
line-height: 24px;
color: #937639;
}
}
.i-switch {
display: flex;
align-items: center;
// justify-content: center;
&.checked {
.i-checkbox-icon {
background-image:
linear-gradient(to right, #8f6e29, #8f6e29),
linear-gradient(rgb(110, 89, 61), rgb(60, 46, 30));
}
.i-checkbox-icon::after {
content: "";
position: absolute;
top: 1.6px;
left: 1px;
border-radius: 100%;
transition: all 0.3s;
width: 13px;
height: 13px;
outline: 0.8px solid black;
background: linear-gradient(rgb(15, 61, 116), rgb(8, 37, 71));
box-shadow: inset 0 0 2px 0.5px rgb(255, 255, 255, 0.1);
}
.i-checkbox-icon-disable {
margin: 0;
display: inline-block;
position: relative;
width: 30px;
height: 18px;
outline: none;
border-radius: 10px;
box-sizing: border-box;
background: #dcdfe6;
cursor: pointer;
transition: border-color 0.3s, background-color 0.3s;
vertical-align: middle;
// border-radius: 16px;
border: 1.5px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #dcdfe6, #dcdfe6), linear-gradient(rgb(110, 89, 61), rgb(60, 46, 30));
box-shadow: inset 0 0 2px 1.5px black;
}
.i-checkbox-icon-disable::after {
content: "";
position: absolute;
top: 1.6px;
left: 1px;
border-radius: 100%;
transition: all 0.3s;
width: 13px;
height: 13px;
// outline: 0.8px solid black;
background: white;
// box-shadow: inset 0 0 2px 0.5px rgb(255, 255, 255, 0.1);
}
&:hover {
.i-checkbox-icon::after {
background: linear-gradient(#15549f, #0e3c72);
}
}
.i-checkbox-label {
line-height: 18px;
height: 18px;
padding-left: 2px;
color: #937639;
left: 100%;
margin-left: -14.8px;
}
}
.i-checkbox-icon {
margin: 0;
display: inline-block;
position: relative;
width: 30px;
height: 18px;
outline: none;
border-radius: 10px;
box-sizing: border-box;
background: #dcdfe6;
cursor: pointer;
transition:
border-color 0.3s,
background-color 0.3s;
vertical-align: middle;
// border-radius: 16px;
border: 1.5px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image:
linear-gradient(to right, #141414, #141414),
linear-gradient(rgb(110, 89, 61), rgb(60, 46, 30));
box-shadow: inset 0 0 2px 1.5px black;
}
.i-checkbox-icon::after {
content: '';
position: absolute;
top: 1.6px;
left: 1px;
border-radius: 100%;
transition: all 0.3s;
width: 13px;
height: 13px;
outline: 0.8px solid black;
background: linear-gradient(rgb(15, 61, 116), rgb(8, 37, 71));
box-shadow: inset 0 0 2px 0.5px rgb(255, 255, 255, 0.1);
}
.i-checkbox-icon-disable {
margin: 0;
display: inline-block;
position: relative;
width: 30px;
height: 18px;
outline: none;
border-radius: 10px;
box-sizing: border-box;
background: #dcdfe6;
cursor: pointer;
transition:
border-color 0.3s,
background-color 0.3s;
vertical-align: middle;
// border-radius: 16px;
border: 1.5px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image:
linear-gradient(to right, #dcdfe6, #dcdfe6),
linear-gradient(rgb(110, 89, 61), rgb(60, 46, 30));
box-shadow: inset 0 0 2px 1.5px black;
}
.i-checkbox-icon-disable::after {
content: '';
position: absolute;
top: 1.6px;
left: 1px;
border-radius: 100%;
transition: all 0.3s;
width: 13px;
height: 13px;
// outline: 0.8px solid black;
background: white;
// box-shadow: inset 0 0 2px 0.5px rgb(255, 255, 255, 0.1);
}
&:hover {
.i-checkbox-icon::after {
background: linear-gradient(#15549f, #0e3c72);
}
}
.i-checkbox-label {
line-height: 18px;
height: 18px;
padding-left: 2px;
color: #937639;
}
}
</style>
frontend/src/components/calc/iconselect/index.vue
+2 -1
View File
@@ -123,6 +123,7 @@ export default defineComponent({
</script>
<style lang="scss">
@use 'sass:color';
$text-color: #e9c556;
.i-icon-select {
width: 28px;
@@ -173,7 +174,7 @@ export default defineComponent({
min-height: 28px;
$hoverColor: #002947;
$activeColor: lighten($hoverColor, 5%);
$activeColor: color.scale($hoverColor, $lightness: 5%);
color: $text-color;
.i-option {
frontend/src/components/calc/select/index.vue
+2 -1
View File
@@ -170,6 +170,7 @@ export default defineComponent({
</script>
<style lang="scss">
@use "sass:color";
$text-color: #937639;
.i-select {
min-width: 80px;
@@ -244,7 +245,7 @@ export default defineComponent({
z-index: 888;
$hoverColor: #002947;
$activeColor: lighten($hoverColor, 5%);
$activeColor: color.scale($hoverColor, $lightness: 5%);
color: $text-color;
.i-select-dropdown-item {