Skip to content

Commit 91a9159

Browse files
vallemarvallemar
committed
add useColorPalette
1 parent f18128b commit 91a9159

File tree

11 files changed

+273
-242
lines changed

11 files changed

+273
-242
lines changed

‎package-lock.json

Lines changed: 223 additions & 213 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,14 @@
1212
"postinstall": "npm link ../publish"
1313
},
1414
"dependencies": {
15-
"@akylas/nativescript": "^8.5.2",
16-
"@vallemar/nativescript-vueuse": "^0.0.10",
15+
"@nativescript/core": "^8.5.3",
16+
"@vallemar/nativescript-vueuse": "^0.0.11",
1717
"nativescript-vue": "3.0.0-beta.8"
1818
},
1919
"devDependencies": {
2020
"@nativescript-dom/core-types": "^1.0.26",
2121
"@nativescript-dom/vue-types": "^1.0.15",
2222
"@nativescript/android": "8.5.0",
23-
"@nativescript/core": "^8.5.3",
2423
"@nativescript/ios": "8.5.2",
2524
"@nativescript/preview-cli": "^1.0.2",
2625
"@nativescript/stackblitz": "^0.0.7",

‎src/app.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { createApp } from 'nativescript-vue';
2-
import { useColorMode } from "@vallemar/nativescript-vueuse";
2+
import { useColorMode, useColorPalette } from "@vallemar/nativescript-vueuse";
33
import Home from './components/Home.vue';
4-
import { THEMES } from "~/data";
4+
import { PALETTES, THEMES } from "~/data";
55

6+
/* Init Color mode and Palette */
67
useColorMode({
7-
modes: THEMES
8-
})
8+
modes: THEMES,
9+
initialValue: 'dim'
10+
});
11+
useColorPalette({ palettes: PALETTES });
912

1013
createApp(Home).start();

‎src/components/ColorModeView.vue

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,50 @@
11
<script lang="ts" setup>
22
import { ListItem } from "nativescript-vue";
3-
import { useColorMode } from "@vallemar/nativescript-vueuse";
4-
import { THEMES } from "~/data";
3+
import { useColorMode, useColorPalette } from "@vallemar/nativescript-vueuse";
4+
import { Patelle, THEMES } from "~/data";
55
6-
7-
const { store } = useColorMode({
8-
modes: THEMES, onChanged: (mode) => {
6+
const { schema } = useColorMode({
7+
onChanged: (mode) => {
98
console.log("onChanged: " + mode);
109
}
1110
})
1211
13-
function changeTheme(newTheme: string) {
14-
store.value = newTheme
12+
const { palette } = useColorPalette<string, Patelle>()
13+
14+
function changeTheme(newTheme: any) {
15+
schema.value = newTheme
1516
}
1617
1718
</script>
1819

1920
<template>
2021
<Page actionBarHidden="true">
2122
<StackLayout class="py-4 pl-3">
22-
<Label :text="`Current Theme: ${store}`" />
23+
<Label :text="`Current Theme: ${schema}`" />
2324

24-
<ListView :items="THEMES" height="800">
25+
<ListView :items="THEMES" height="400">
2526
<template #default="{ item, index }: ListItem<string>">
2627
<FlexboxLayout class="pl-2 py-4" @tap="changeTheme(item)">
2728
<Label class="h-[16] w-[16] bg-green-400 rounded-full"
28-
:class=" [item === store ? 'opacity-1' : 'opacity-0'] " />
29+
:class=" [item === schema ? 'opacity-1' : 'opacity-0'] " />
2930
<Label class="text-lg rounded-2xl ml-2 py-1" :text=" item " />
3031
</FlexboxLayout>
3132
</template>
3233
</ListView>
34+
<FlexboxLayout class=" justify-around">
35+
<StackLayout :backgroundColor=" palette?.colors.bgVariant " class="px-3 py-2 rounded-full text-center">
36+
<Label text="bg"></Label>
37+
<Label :text=" palette?.colors.bg "></Label>
38+
</StackLayout>
39+
<StackLayout :backgroundColor=" palette?.colors.bgVariant " class="px-3 py-2 rounded-full text-center">
40+
<Label text="bgVariant"></Label>
41+
<Label :text=" palette?.colors.bg "></Label>
42+
</StackLayout>
43+
<StackLayout :backgroundColor=" palette?.colors.textColor " class="px-3 py-2 rounded-full text-center">
44+
<Label text="textColor" :color=" palette?.colors.bg "></Label>
45+
<Label :text=" palette?.colors.bg " :color=" palette?.colors.bg "></Label>
46+
</StackLayout>
47+
</FlexboxLayout>
3348
</StackLayout>
3449
</Page>
3550
</template>

‎src/components/ElementSizeView.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@ const { width, height } = useElementSize(refView);
77
88
function changeSize() {
99
const view = unrefView(refView);
10-
view?.animate({
11-
height: view.getActualSize().height === 400 ? 150 : 400,
12-
duration: 2000
13-
})
10+
if(view){
11+
view.height = view.getActualSize().height === 400 ? 150 : 400;
12+
}
1413
}
1514
</script>
1615

‎src/components/rootLayout/BottomSheet.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<GridLayout rows="auto, auto" verticalAlignment="bottom" height="455" class="bg-white rounded-t-xl p-6 text-black">
2+
<GridLayout rows="auto, auto" verticalAlignment="bottom" height="455" class="bg-variant rounded-t-xl p-6 text-black">
33
<Label row="0" class="mt-8 text-2xl" text="Hello 👋!"></Label>
44
<Label row="1" class="mt-8 text-lg" text="I am a BottomSheet built with RootLayout 💪" textWrap="true"></Label>
55
</GridLayout>

‎src/components/rootLayout/Modal.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<StackLayout verticalAlignment="center" horizontalAlignment="center" height="250" class="p-4">
3-
<GridLayout rows="auto, auto" class="bg-white rounded-xl p-8 text-black">
3+
<GridLayout rows="auto, auto" class="bg-variant rounded-xl p-8 text-black">
44
<Label row="0" class="text-2xl" text="Hello 👋!"></Label>
55
<Label row="1" class="mt-8 text-lg" text="I am a Modal built with RootLayout 💪" textWrap="true"></Label>
66
</GridLayout>

‎src/components/rootLayout/SideBar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<StackLayout height="100%" width="75%" class="rounded-r-2xl bg-white pt-8 px-4 text-black" horizontalAlignment="left">
2+
<StackLayout height="100%" width="75%" class="rounded-r-2xl bg-variant pt-8 px-4 text-black" horizontalAlignment="left">
33
<Label row="0" class="text-2xl" text="Hello 👋!"></Label>
44
<Label row="1" class="mt-6 text-lg" text="I am a Sidebar built with RootLayout 💪" textWrap="true"></Label>
55
</StackLayout>

‎src/components/rootLayout/SnackBar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
<template>
3-
<GridLayout rows="auto, auto" class="bg-white rounded-b-2xl p-6 text-black" verticalAlignment="top">
3+
<GridLayout rows="auto, auto" class="bg-variant rounded-b-2xl p-6 text-black" verticalAlignment="top">
44
<Label row="0" class="text-2xl" text="Hello 👋!"></Label>
55
<Label row="1" class="mt-6 text-lg" text="I am a Snackbar built with RootLayout 💪" textWrap="true"></Label>
66
</GridLayout>

‎src/data.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
11

2-
export const THEMES = ["light", "dark", "dim", "cafe"]
2+
export const THEMES = ["light", "dark", "dim", "cafe"]
3+
4+
export type Patelle = { bg: string, bgVariant: string, textColor: string }
5+
export const PALETTES = [
6+
{ theme: "light", colors: { bg: "#f1f1f1", bgVariant: "#e3e3e3", textColor: "black" } },
7+
{ theme: "dark", colors: { bg: "#0f0b15", bgVariant: "#292e3a", textColor: "#9bd1c3" } },
8+
{ theme: "dim", colors: { bg: "#c4dfdf", bgVariant: "#8ea8a8", textColor: "#252525" } },
9+
{ theme: "cafe", colors: { bg: "#884a39", bgVariant: "#c07c68", textColor: "#ffe6d8" } },
10+
]

0 commit comments

Comments
 (0)