streaming, markdown, model selecting, and lots more

2026-02-02 23:16:06 -06:00
parent 8c28946703
commit d5a5945c03
114 changed files with 6109 additions and 2938 deletions
@@ -0,0 +1,77 @@
+<script setup>
+const props = defineProps({
+    checked: {
+        type: Boolean,
+        default: false,
+    },
+    id: {
+        type: String
+    },
+    label: {
+        type: String
+    },
+    disabled: {
+        type: Boolean
+    }
+})
+
+const emit = defineEmits(['click'])
+
+const active = ref(props.checked);
+
+watch(() => props.checked, (newValue) => {
+    active.value = newValue;
+})
+</script>
+
+<template>
+    <button role="switch" class="vl-toggle-switch" :aria-disabled="(props.disabled === true) ? 'true' : 'false'"
+        :aria-label="label" :aria-labelledby="id" :tabindex="(disabled) ? '-1' : '0'" @click="(e) => $emit('click', e)"
+        :aria-checked="active" :data-state="(active) ? 'checked' : 'unchecked'">
+        <div></div>
+    </button>
+</template>
+
+<style scoped>
+.vl-toggle-switch {
+    font-size: inherit;
+    border: 0;
+    cursor: pointer;
+    width: 2.5em;
+    height: 1.4em;
+    background: var(--color-highlight);
+    border-radius: 100px;
+    padding: 0.125rem 0.25rem;
+    position: relative;
+    transition: background-color 0.3s ease;
+}
+
+.vl-toggle-switch[aria-disabled="true"] div {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.vl-toggle-switch div {
+    position: relative;
+    left: 0;
+    width: 1em;
+    height: 1em;
+    background: #f7f7f7;
+    border-radius: 90px;
+    pointer-events: none;
+    transition: all 0.3s;
+}
+
+.vl-toggle-switch[data-state="checked"] {
+    background: var(--color-accent);
+}
+
+.vl-toggle-switch[data-state="checked"] div {
+    left: 100%;
+    transform: translateX(-100%);
+}
+
+.vl-toggle-switch:active div {
+    width: 1.3em;
+}
+</style>