@christianriedl/utils 1.0.116 → 1.0.118
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import Microphone from '@christianriedl/utils/src/components/Microphone.vue';
|
|
5
5
|
import Camera from '@christianriedl/utils/src/components/Camera.vue';
|
|
6
6
|
|
|
7
|
-
const props = defineProps<{ prompt: string, onlymicrophone?: boolean,
|
|
7
|
+
const props = defineProps<{ prompt: string, onlymicrophone?: boolean, tools?: string[] }>();
|
|
8
8
|
const emits = defineEmits<{ (e: 'result', result: string): void }>();
|
|
9
9
|
|
|
10
10
|
const getOpenAI = inject(getOpenAISymbol)!;
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
dataUrl.value = "";
|
|
42
42
|
}
|
|
43
43
|
else {
|
|
44
|
-
if (props.
|
|
45
|
-
answer = await openAI.response(question.value);
|
|
44
|
+
if (props.tools !== undefined) {
|
|
45
|
+
answer = await openAI.response(question.value, props.tools);
|
|
46
46
|
}
|
|
47
47
|
else {
|
|
48
48
|
answer = await openAI.complete(question.value);
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref, reactive, inject, nextTick, ComponentPublicInstance } from 'vue';
|
|
3
|
+
import { useTheme, ThemeInstance } from 'vuetify';
|
|
4
|
+
//import { argbFromHex, hexFromArgb, themeFromSourceColor, applyTheme, CustomColor, CustomColorGroup, Theme, Scheme } from "@material/material-color-utilities";
|
|
5
|
+
import { Dictionary, appConfigSymbol } from '@christianriedl/utils';
|
|
6
|
+
|
|
7
|
+
const props = defineProps<{ theme: ThemeInstance }>();
|
|
8
|
+
|
|
9
|
+
const appConfig = inject(appConfigSymbol)!;
|
|
10
|
+
const theme = props.theme;
|
|
11
|
+
const roles: string[] = [];
|
|
12
|
+
//const customRoles: string[] = [];
|
|
13
|
+
const bgClass = ref('');
|
|
14
|
+
const textClass = ref('');
|
|
15
|
+
const selectedColor = ref('');
|
|
16
|
+
const selectedTextColor = ref('');
|
|
17
|
+
const selectedRole = ref('primary');
|
|
18
|
+
const container = ref(false);
|
|
19
|
+
const onContainer = ref(false);
|
|
20
|
+
let stored: Dictionary<Dictionary<string>> = {};
|
|
21
|
+
|
|
22
|
+
initialize();
|
|
23
|
+
onChangeRole();
|
|
24
|
+
|
|
25
|
+
function initialize() {
|
|
26
|
+
const themeColors = appConfig.localStorage.getItem('themeColors');
|
|
27
|
+
if (themeColors)
|
|
28
|
+
stored = JSON.parse(themeColors) as Dictionary<Dictionary<string>>;
|
|
29
|
+
else {
|
|
30
|
+
stored['light'] = {};
|
|
31
|
+
stored['dark'] = {};
|
|
32
|
+
}
|
|
33
|
+
for (const key in theme.current.value.colors) {
|
|
34
|
+
if (!key.includes('-')) {
|
|
35
|
+
roles.push(key);
|
|
36
|
+
/*
|
|
37
|
+
if (!['background', 'primary', 'secondary', 'tertiary', 'surface', 'error'].includes(key))
|
|
38
|
+
customRoles.push(key);
|
|
39
|
+
*/
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
function onChangeRole() {
|
|
44
|
+
bgClass.value = 'bg-' + selectedRole.value;
|
|
45
|
+
textClass.value = 'text-on-' + selectedRole.value;
|
|
46
|
+
selectedColor.value = theme.current.value.colors[selectedRole.value];
|
|
47
|
+
selectedTextColor.value = theme.current.value.colors['on-' + selectedRole.value];
|
|
48
|
+
}
|
|
49
|
+
function onChangeColor() {
|
|
50
|
+
const colors = theme.themes.value[theme.name.value].colors;
|
|
51
|
+
const store = stored[theme.name.value];
|
|
52
|
+
colors[selectedRole.value] = selectedColor.value;
|
|
53
|
+
store[selectedRole.value] = selectedColor.value;
|
|
54
|
+
}
|
|
55
|
+
function onChangeTextColor() {
|
|
56
|
+
const colors = theme.themes.value[theme.name.value].colors;
|
|
57
|
+
const store = stored[theme.name.value];
|
|
58
|
+
colors['on-' + selectedRole.value] = selectedTextColor.value;
|
|
59
|
+
store['on-' + selectedRole.value] = selectedTextColor.value;
|
|
60
|
+
}
|
|
61
|
+
function cycleColorTheme() {
|
|
62
|
+
theme.cycle();
|
|
63
|
+
selectedColor.value = theme.current.value.colors[selectedRole.value];
|
|
64
|
+
selectedTextColor.value = theme.current.value.colors['on-' + selectedRole.value];
|
|
65
|
+
}
|
|
66
|
+
/*
|
|
67
|
+
function genTheme() {
|
|
68
|
+
const colors = theme.themes.value[theme.name.value].colors;
|
|
69
|
+
const customColors: CustomColor[] = [];
|
|
70
|
+
for (let i = 0; i < customRoles.length; i++) {
|
|
71
|
+
const role = customRoles[i];
|
|
72
|
+
customColors.push({
|
|
73
|
+
name: role,
|
|
74
|
+
value: argbFromHex(colors[role]),
|
|
75
|
+
blend: true,
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
const genTheme = themeFromSourceColor(argbFromHex(colors['primary']), customColors);
|
|
79
|
+
copyScheme(genTheme, theme, 'light', container.value, onContainer.value);
|
|
80
|
+
copyScheme(genTheme, theme, 'dark', container.value, onContainer.value);
|
|
81
|
+
}
|
|
82
|
+
function copyScheme(theme: Theme, dest: ThemeInstance, name: 'dark' | 'light', container: boolean, onContainer: boolean): void {
|
|
83
|
+
const srcSchema = theme.schemes[name];
|
|
84
|
+
const dstSchema: Dictionary<string> = dest.themes.value[name].colors as Dictionary<string>;
|
|
85
|
+
|
|
86
|
+
dstSchema['background'] = hexFromArgb(srcSchema.background);
|
|
87
|
+
dstSchema['surface'] = hexFromArgb(srcSchema.surface);
|
|
88
|
+
dstSchema['on-background'] = hexFromArgb(srcSchema.onBackground);
|
|
89
|
+
dstSchema['on-surface'] = hexFromArgb(srcSchema.onSurface);
|
|
90
|
+
if (container) {
|
|
91
|
+
dstSchema['primary'] = hexFromArgb(srcSchema.primaryContainer);
|
|
92
|
+
dstSchema['secondary'] = hexFromArgb(srcSchema.secondaryContainer);
|
|
93
|
+
dstSchema['error'] = hexFromArgb(srcSchema.errorContainer);
|
|
94
|
+
for (let i = 0; i < theme.customColors.length; i++) {
|
|
95
|
+
const customColorGroup = theme.customColors[i];
|
|
96
|
+
const colorGroup = customColorGroup[name];
|
|
97
|
+
dstSchema[customColorGroup.color.name] = hexFromArgb(colorGroup.colorContainer);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
dstSchema['primary'] = hexFromArgb(srcSchema.primary);
|
|
102
|
+
dstSchema['secondary'] = hexFromArgb(srcSchema.secondary);
|
|
103
|
+
dstSchema['error'] = hexFromArgb(srcSchema.error);
|
|
104
|
+
for (let i = 0; i < theme.customColors.length; i++) {
|
|
105
|
+
const customColorGroup = theme.customColors[i];
|
|
106
|
+
const colorGroup = customColorGroup[name];
|
|
107
|
+
dstSchema[customColorGroup.color.name] = hexFromArgb(colorGroup.color);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
if (onContainer) {
|
|
111
|
+
dstSchema['on-primary'] = hexFromArgb(srcSchema.onPrimaryContainer);
|
|
112
|
+
dstSchema['on-secondary'] = hexFromArgb(srcSchema.onSecondaryContainer);
|
|
113
|
+
dstSchema['on-error'] = hexFromArgb(srcSchema.onErrorContainer);
|
|
114
|
+
for (let i = 0; i < theme.customColors.length; i++) {
|
|
115
|
+
const customColorGroup = theme.customColors[i];
|
|
116
|
+
const colorGroup = customColorGroup[name];
|
|
117
|
+
dstSchema['on-' + customColorGroup.color.name] = hexFromArgb(colorGroup.onColorContainer);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
dstSchema['on-primary'] = hexFromArgb(srcSchema.onPrimary);
|
|
122
|
+
dstSchema['on-secondary'] = hexFromArgb(srcSchema.onSecondary);
|
|
123
|
+
dstSchema['on-error'] = hexFromArgb(srcSchema.onError);
|
|
124
|
+
for (let i = 0; i < theme.customColors.length; i++) {
|
|
125
|
+
const customColorGroup = theme.customColors[i];
|
|
126
|
+
const colorGroup = customColorGroup[name];
|
|
127
|
+
dstSchema['on-' + customColorGroup.color.name] = hexFromArgb(colorGroup.onColor);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
*/
|
|
131
|
+
function save() {
|
|
132
|
+
appConfig.localStorage.setItem('themeColors', JSON.stringify(stored));
|
|
133
|
+
}
|
|
134
|
+
</script>
|
|
135
|
+
|
|
136
|
+
<template>
|
|
137
|
+
<v-card :theme="theme.name.value" :class="[bgClass, textClass]">
|
|
138
|
+
<v-card-title>{{'Set Theme ' + theme.name.value}}</v-card-title>
|
|
139
|
+
<v-card-text>
|
|
140
|
+
<v-container fluid>
|
|
141
|
+
<v-row dense align="center">
|
|
142
|
+
<v-col cols="4">Select rule</v-col>
|
|
143
|
+
<!--
|
|
144
|
+
<v-col cols="2">Edit background</v-col>
|
|
145
|
+
<v-col cols="2"><v-checkbox label="Container" v-model="container" hide-details></v-checkbox></v-col>
|
|
146
|
+
<v-col cols="2">Edit text</v-col>
|
|
147
|
+
<v-col cols="2"><v-checkbox label="On Container" v-model="onContainer" hide-details></v-checkbox></v-col>
|
|
148
|
+
-->
|
|
149
|
+
<v-col cols="4">Edit background</v-col>
|
|
150
|
+
<v-col cols="4">Edit text</v-col>
|
|
151
|
+
</v-row>
|
|
152
|
+
<v-row dense align="center">
|
|
153
|
+
<v-col cols="4">
|
|
154
|
+
<v-select v-model="selectedRole" :items="roles" hide-details density="compact" @update:modelValue="onChangeRole"></v-select>
|
|
155
|
+
</v-col>
|
|
156
|
+
<v-col cols="4">
|
|
157
|
+
<v-color-picker mode="hex" class="pe-1" v-model="selectedColor" density="compact" @update:modelValue="onChangeColor"></v-color-picker>
|
|
158
|
+
</v-col>
|
|
159
|
+
<v-col v-if="selectedTextColor" cols="4">
|
|
160
|
+
<v-color-picker mode="hex" class="pe-1" v-model="selectedTextColor" density="compact" @update:modelValue="onChangeTextColor"></v-color-picker>
|
|
161
|
+
</v-col>
|
|
162
|
+
</v-row>
|
|
163
|
+
</v-container>
|
|
164
|
+
</v-card-text>
|
|
165
|
+
<v-card-actions>
|
|
166
|
+
<v-btn size="large" @click="cycleColorTheme">CYCLE</v-btn>
|
|
167
|
+
<v-btn size="large" @click="save">SAVE</v-btn>
|
|
168
|
+
<!--
|
|
169
|
+
<v-btn size="large" @click="genTheme">GEN</v-btn>
|
|
170
|
+
-->
|
|
171
|
+
</v-card-actions>
|
|
172
|
+
</v-card>
|
|
173
|
+
</template>
|
|
174
|
+
|