this repo has no description
CRC Card playground!
+71
-15
+4
-8
components.d.ts
+4
-8
components.d.ts
···
1
1
// generated by unplugin-vue-components
2
2
// We suggest you to commit this file into source control
3
-
// Read more: https://github.com/vuejs/core/pull/3399
4
-
import '@vue/runtime-core'
5
-
6
-
export {}
3
+
// Read more: https://github.com/vuejs/vue-next/pull/3399
7
4
8
-
declare module '@vue/runtime-core' {
5
+
declare module 'vue' {
9
6
export interface GlobalComponents {
10
7
AboutMe: typeof import('./src/components/presentation/about-me.vue')['default']
11
8
AppHeader: typeof import('./src/components/app-header.vue')['default']
···
13
10
CrcCard: typeof import('./src/components/architecture/crc-card.vue')['default']
14
11
ForgettingCurve: typeof import('./src/components/smart-notes/forgetting-curve.vue')['default']
15
12
JulienCalixte: typeof import('./src/components/core/julien-calixte.vue')['default']
16
-
MyBooks: typeof import('./src/components/presentation/my-books.vue')['default']
17
13
MyProjects: typeof import('./src/components/presentation/my-projects.vue')['default']
18
14
OrderTag: typeof import('./src/components/core/order-tag.vue')['default']
19
15
ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
20
-
RouterLink: typeof import('vue-router')['RouterLink']
21
-
RouterView: typeof import('vue-router')['RouterView']
22
16
ToucanIcon: typeof import('./src/components/core/toucan-icon.vue')['default']
23
17
Welcome: typeof import('./src/components/Welcome.vue')['default']
24
18
}
25
19
}
20
+
21
+
export { }
+53
-7
src/components/architecture/crc-card.vue
+53
-7
src/components/architecture/crc-card.vue
···
1
-
<script setup lang="ts">
1
+
<script setup lang="ts">import { ref } from 'vue';
2
+
2
3
interface Props {
3
4
name: string,
4
5
responsabilities?: string[]
5
6
collaborators?: string[]
7
+
editable?: boolean
6
8
}
7
9
8
-
withDefaults(defineProps<Props>(), {
10
+
const props = withDefaults(defineProps<Props>(), {
9
11
responsabilities: () => [],
10
-
collaborators: () => []
12
+
collaborators: () => [],
13
+
editable: false
11
14
})
15
+
16
+
const allReponsabilities = ref(props.responsabilities)
17
+
18
+
const newResponsability = ref('')
19
+
20
+
const addResponsability = () => {
21
+
if (!newResponsability || allReponsabilities.value.find(resp => newResponsability.value === resp)) {
22
+
return
23
+
}
24
+
25
+
allReponsabilities.value = [...allReponsabilities.value, newResponsability.value]
26
+
27
+
newResponsability.value = ''
28
+
}
29
+
30
+
const allCollaborators = ref(props.collaborators)
31
+
32
+
const newCollaborator = ref('')
33
+
34
+
const addCollaborator = () => {
35
+
if (!newCollaborator || allCollaborators.value.find(coll => newCollaborator.value === coll)) {
36
+
return
37
+
}
38
+
39
+
allCollaborators.value = [...allCollaborators.value, newCollaborator.value]
40
+
41
+
newCollaborator.value = ''
42
+
}
12
43
</script>
13
44
14
45
<template>
15
46
<div class="crc-card">
16
-
<h3>{{ name }}</h3>
47
+
<h3 :contenteditable="editable">{{ name }}</h3>
17
48
<section>
18
49
<div class="responsabilities">
19
50
<hr>
20
51
<ol>
21
-
<li v-for="responsability in responsabilities" :key="responsability">
52
+
<li v-for="responsability in allReponsabilities" :key="responsability">
22
53
{{ responsability }}
23
54
</li>
24
55
</ol>
56
+
<form @submit.prevent="addResponsability" v-if="editable">
57
+
<input type="text" v-model="newResponsability">
58
+
<button type="submit">+</button>
59
+
</form>
25
60
</div>
26
-
<div class="collaborators" v-if="collaborators.length">
61
+
<div class="collaborators" v-if="collaborators.length || editable">
27
62
<hr>
28
63
<ol>
29
-
<li v-for="collaborator in collaborators" :key="collaborator">
64
+
<li v-for="collaborator in allCollaborators" :key="collaborator">
30
65
{{ collaborator }}
31
66
</li>
32
67
</ol>
68
+
69
+
<form @submit.prevent="addCollaborator" v-if="editable">
70
+
<input type="text" v-model.trim="newCollaborator">
71
+
<button type="submit">+</button>
72
+
</form>
33
73
</div>
34
74
</section>
35
75
</div>
···
71
111
hr {
72
112
visibility: hidden;
73
113
}
114
+
}
115
+
116
+
& [contenteditable] {
117
+
background-color: rgb(76, 71, 71);
118
+
padding: 0 0.5rem;
119
+
border-radius: 0.5rem;
74
120
}
75
121
}
76
122
</style>
+8
src/pages/crc-cards-playground.mdx
+8
src/pages/crc-cards-playground.mdx
+6
src/pages/posts/crc-cards-as-training-material.mdx
+6
src/pages/posts/crc-cards-as-training-material.mdx