mohmdsdgandCursor
b879d085d3
Add/remove keys from the Khanegi versions list (form or JSON), edit values per version, and proxy /get_settings for local work. Co-authored-by: Cursor <cursoragent@cursor.com>
114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="setting-toggle"
|
|
:class="{
|
|
'setting-toggle--on': checked,
|
|
'setting-toggle--off': !checked,
|
|
'setting-toggle--disabled': disabled,
|
|
}"
|
|
role="switch"
|
|
:aria-checked="checked"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="setting-toggle__seg"
|
|
:class="{ 'setting-toggle__seg--active': !checked }"
|
|
:disabled="disabled"
|
|
@click="setChecked(false)"
|
|
>
|
|
<CloseCircleOutlined />
|
|
<span>{{ labels.off }}</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="setting-toggle__seg"
|
|
:class="{ 'setting-toggle__seg--active': checked }"
|
|
:disabled="disabled"
|
|
@click="setChecked(true)"
|
|
>
|
|
<CheckCircleOutlined />
|
|
<span>{{ labels.on }}</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
checked: boolean
|
|
labels: { on: string; off: string }
|
|
disabled?: boolean
|
|
}>(),
|
|
{ disabled: false },
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
change: [checked: boolean]
|
|
}>()
|
|
|
|
function setChecked(next: boolean) {
|
|
if (props.disabled || next === props.checked) return
|
|
emit('change', next)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.setting-toggle {
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
border-radius: 12px;
|
|
background: var(--admin-bg-muted, #f1f5f9);
|
|
border: 1px solid var(--admin-border, #e2e8f0);
|
|
user-select: none;
|
|
}
|
|
.setting-toggle--disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
.setting-toggle__seg {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
min-width: 84px;
|
|
padding: 6px 14px;
|
|
border: none;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: var(--admin-text-secondary, #64748b);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.18s ease;
|
|
}
|
|
.setting-toggle__seg :deep(svg) {
|
|
opacity: 0.75;
|
|
}
|
|
.setting-toggle__seg:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
.setting-toggle__seg--active {
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
|
}
|
|
.setting-toggle--on .setting-toggle__seg--active {
|
|
background: #10b981;
|
|
color: #fff;
|
|
}
|
|
.setting-toggle--on .setting-toggle__seg--active :deep(svg) {
|
|
opacity: 1;
|
|
}
|
|
.setting-toggle--off .setting-toggle__seg--active {
|
|
background: #fff;
|
|
color: #ef4444;
|
|
}
|
|
.setting-toggle--off .setting-toggle__seg--active :deep(svg) {
|
|
opacity: 1;
|
|
}
|
|
</style>
|