forked from
tobinio.dev/task-line
A simple to-do app focused on tasks that can be completed within a specific time span.
changes
+20
-17
+5
-1
app/components/Settings/SettingsSheet.vue
+5
-1
app/components/Settings/SettingsSheet.vue
···
10
10
11
11
const config = useRuntimeConfig();
12
12
13
+
const cookie = useCookie<string>("navStyle", {
14
+
default: () => "classic",
15
+
});
16
+
13
17
function close() {
14
18
isOpen.value = false;
15
19
}
···
92
96
<div>
93
97
<h2 class="text-muted-text text-lg">{{ t("design") }}</h2>
94
98
<select
95
-
v-model="settings.design"
99
+
v-model="cookie"
96
100
class="bg-surface border-secondary h-8 cursor-pointer rounded border px-2 text-white"
97
101
>
98
102
<option value="classic">{{ t(`classic`) }}</option>
+1
-3
app/components/Utils/Sheet.vue
+1
-3
app/components/Utils/Sheet.vue
···
22
22
const emit = defineEmits<{ close: [] }>();
23
23
24
24
const useModal = useMediaQuery("(min-width: 40rem)");
25
-
26
-
const isPwa = useIsPwa();
27
25
</script>
28
26
29
27
<template>
···
37
35
<DrawerContent
38
36
class="bg-surface fixed bottom-0 z-30 flex h-106 w-dvw flex-col gap-2 rounded-t-lg drop-shadow-lg"
39
37
>
40
-
<div class="h-full" :data-pwa="isPwa">
38
+
<div class="h-full">
41
39
<VisuallyHidden>
42
40
<DrawerTitle>{{ title }}</DrawerTitle>
43
41
<DrawerDescription>{{ title }}</DrawerDescription>
+3
-11
app/composables/useSettings.ts
+3
-11
app/composables/useSettings.ts
···
1
1
type Settings = {
2
2
insertionPoint: "top" | "bottom";
3
-
design: "classic" | "floating";
4
3
};
5
4
6
5
export function useSettings() {
7
-
const settings = useLocalStorage<Settings>(
8
-
"settings",
9
-
{
10
-
insertionPoint: "bottom",
11
-
design: "classic",
12
-
},
13
-
{
14
-
initOnMounted: true,
15
-
},
16
-
);
6
+
const settings = useLocalStorage<Settings>("settings", {
7
+
insertionPoint: "bottom",
8
+
});
17
9
return { settings };
18
10
}
+11
-2
app/pages/index.vue
+11
-2
app/pages/index.vue
···
36
36
});
37
37
38
38
const { isMobile } = useDevice();
39
+
const cookie = useCookie("navStyle");
39
40
40
41
const isPwa = useIsPwa();
41
-
const { settings } = useSettings();
42
+
43
+
let design = computed(() => cookie.value);
44
+
45
+
useHead({
46
+
htmlAttrs: {
47
+
"data-design": design,
48
+
"data-pwa": isPwa,
49
+
},
50
+
});
42
51
</script>
43
52
<template>
44
-
<div :data-design="settings.design" :data-pwa="isPwa">
53
+
<div>
45
54
<FilterSheet v-model:is-open="isFilterSheetOpen" />
46
55
<SettingsSheet v-model:is-open="isSettingsSheetOpen" />
47
56
<EditTodoSheet />