this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

CRC Card playground!

+71 -15
+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
··· 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
··· 1 + --- 2 + title: CRC Card playground 3 + layout: post 4 + --- 5 + 6 + # CRC Card playground 7 + 8 + <CrcCard editable />
+6
src/pages/posts/crc-cards-as-training-material.mdx
··· 222 222 // removing the magic number at the same time 223 223 <TilesSkeleton numberOfTiles={MAXIMUM_BOOKMARKS} /> 224 224 ``` 225 + 226 + ## Playground 227 + 228 + Do you want to create your own CRC cards? 229 + 230 + Take a look at [the CRC card playground](/crc-cards-playground)!