Skip to content

Test Synapse components #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
DavidFyon wants to merge 8 commits into
base: dev
Choose a base branch
from
Draft

Test Synapse components #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
002b9f1
change DS package
DavidFyon Oct 9, 2024
1f27969
disable some components
DavidFyon Oct 9, 2024
17fcc1d
add btn vuetify
DavidFyon Oct 9, 2024
3f3b117
add new tokens
VachetVirginie Oct 9, 2024
84f7e0d
add exemple
DavidFyon Oct 30, 2024
56d8aed
try fix
DavidFyon Oct 30, 2024
3750337
update dayjs-nuxt
DavidFyon Oct 30, 2024
5919c4f
redo nuxt-dayjs
DavidFyon Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/router.options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default <RouterConfig>{
name: 'index',
path: '/',
component: () =>
import('~/pages/home.vue').then((r) => r.default || r),
import('~/pages/test.vue').then((r) => r.default || r),
},
],
}
45 changes: 24 additions & 21 deletions layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,38 @@
<template>
<VApp>
<HeaderBar
service-title="Titre du service"
service-sub-title="Description du service"
:navigation-items="navigationItems"
home-link="/home"
/>
<PageContainer>
<slot />
</PageContainer>
<FooterBar
hide-a11y-link
hide-cgu-link
hide-cookies-link
hide-legal-notice-link
hide-sitemap-link
>
<p class="text-secondary mb-0">Contenu supplémentaire.</p>
</FooterBar>
<main>
<!--<HeaderBar
service-title="Titre du service"
service-sub-title="Description du service"
:navigation-items="navigationItems"
home-link="/home"
/>-->
<!--<PageContainer>-->
<slot />
<!--</PageContainer>-->
<!--<FooterBar
hide-a11y-link
hide-cgu-link
hide-cookies-link
hide-legal-notice-link
hide-sitemap-link
>
<p class="text-secondary mb-0">Contenu supplémentaire.</p>
</FooterBar>-->
</main>
</VApp>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { PageContainer, HeaderBar, FooterBar } from '@cnamts/synapse-bridge'
// import { PageContainer, HeaderBar, FooterBar } from '@cnamts/synapse'
import { PageContainer } from '@cnamts/synapse'

export default defineComponent({
components: {
PageContainer,
HeaderBar,
FooterBar,
// HeaderBar,
// FooterBar,
},
data() {
return {
Expand Down
27 changes: 21 additions & 6 deletions nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
import { colorTheme } from '@cnamts/design-tokens/src/colors'
import {cnamLightTheme} from '@cnamts/synapse/designTokens/tokens/cnam/cnamLightTheme.ts'
import Components from 'unplugin-vue-components/vite'

export default defineNuxtConfig({
ssr: false,

runtimeConfig: {
public: {
title: process.env.TITLE,
message: process.env.MESSAGE,
theme: process.env.THEME,
},
},
devtools: { enabled: true },

devtools: {enabled: true},

modules: [
'vuetify-nuxt-module',
'dayjs-nuxt',
'@pinia/nuxt',
'@nuxt/eslint',
],

vuetify: {
vuetifyOptions: {
icons: {
Expand All @@ -26,34 +30,45 @@ export default defineNuxtConfig({
defaultTheme: 'light',
themes: {
light: {
colors: colorTheme,
colors: {
...cnamLightTheme,
// ...bootstrapLightTheme,
},
},
},
},
},
},

build: {
transpile: [
'vuetify',
'@cnamts/synapse-bridge',
'@cnamts/synapse',
'@cnamts/design-tokens',
],
},

vite: {
// change the component dirs to match our project layout
plugins: [Components({ dts: true, dirs: ['./components'] })],
plugins: [Components({dts: true, dirs: ['./components']})],
},
css: ['@cnamts/synapse-bridge/style.css', '~/assets/settings.scss'],

css: ['@cnamts/synapse/style.css', '~/assets/settings.scss'],

imports: {
dirs: ['./stores'],
},

dayjs: {
locales: ['en', 'fr'],
plugins: ['relativeTime', 'utc', 'timezone'],
defaultLocale: 'fr',
defaultTimezone: 'Europe/Paris',
},

pinia: {
autoImports: ['defineStore', 'acceptHMRUpdate'],
},

compatibilityDate: '2024-10-09',
})
21 changes: 21 additions & 0 deletions pages/exemples/PageContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script setup lang="ts">
import { PageContainer } from '@cnamts/synapse'
</script>

<template>
<PageContainer size="s" color="blue">
<h1>Playground</h1>
</PageContainer>
<PageContainer size="m" color="red">
<h1>Playground</h1>
</PageContainer>
<PageContainer size="l" color="orange">
<h1>Playground</h1>
</PageContainer>
<PageContainer size="xl" color="pink">
<h1>Playground</h1>
</PageContainer>
<PageContainer color="yellow" spacing="sm">
<h1>Playground</h1>
</PageContainer>
</template>
81 changes: 3 additions & 78 deletions pages/home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
<v-card-item>
<BackBtn to="/home" />
<br />
<VBtn color="secondary">Bouton secondaire</VBtn>
<br />
<br />
<a
href="https://digital-design-system.netlify.app/demarrer/introduction/"
Expand All @@ -40,94 +42,17 @@
</v-card-item>
</v-card>
</v-col>
<v-col cols="12" md="4">
<v-card color="grey-lighten-4" class="mx-auto">
<v-card-title>Test des stores</v-card-title>
<v-card-item>
<div>Compteur: {{ counterStore?.count }}</div>
<div
class="d-flex flex-wrap align-center justify-center"
>
<v-btn
color="primary"
class="ma-2"
@click="counterStore?.increment"
>
Incrémenter
</v-btn>
<v-btn
color="primary"
class="ma-2"
@click="counterStore?.decrement"
>
Décrémenter
</v-btn>
<v-btn
color="primary"
class="ma-2"
@click="counterStore?.reset"
>
Réinitialiser
</v-btn>
</div>
</v-card-item>
<v-card-item>
<div>
Notification:
{{ notificationStore?.notificationPayload }}
</div>
<div
class="d-flex flex-wrap align-center justify-center"
>
<v-btn
color="primary"
class="ma-2"
@click="createNotification"
>
Créer une notification
</v-btn>
<v-btn
color="primary"
class="ma-2"
@click="removeNotification"
>
Supprimer une notification
</v-btn>
</div>
</v-card-item>
</v-card>
</v-col>
</v-row>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BackBtn } from '@cnamts/synapse-bridge'
import { useCounterStore } from '~/stores/counter'
import { useNotificationStore } from '~/stores/notifications'
import { BackBtn } from '@cnamts/synapse'

export default defineComponent({
components: {
BackBtn,
},
data() {
return {
counterStore: useCounterStore(),
notificationStore: useNotificationStore(),
}
},
methods: {
createNotification() {
const payload = {
message: 'Notification de test',
type: 'success',
}
this.notificationStore.create(payload)
},
removeNotification() {
this.notificationStore.remove()
},
},
})
</script>
21 changes: 21 additions & 0 deletions pages/test.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script setup lang="ts">
import { PageContainer } from '@cnamts/synapse'
</script>

<template>
<PageContainer size="s" color="blue">
<h1>Playground</h1>
</PageContainer>
<PageContainer size="m" color="red">
<h1>Playground</h1>
</PageContainer>
<PageContainer size="l" color="orange">
<h1>Playground</h1>
</PageContainer>
<PageContainer size="xl" color="pink">
<h1>Playground</h1>
</PageContainer>
<PageContainer color="yellow" spacing="sm">
<h1>Playground</h1>
</PageContainer>
</template>