From 2c19b50d9eaacb5347f3e9f108d149948efa9490 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 15:33:22 +0100
Subject: [PATCH] Dynamic component, add resource, styling tabs
---
10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue | 20 +--------
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue | 7 +++
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue | 3 -
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue | 66 +++++++++++++++++++++++++++++++++
4 files changed, 77 insertions(+), 19 deletions(-)
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
index f58bf51..987b5f6 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
@@ -1,34 +1,20 @@
<template>
<TheHeader :title="rememberMe"></TheHeader>
- <stored-resources :resources="storedResouces"> </stored-resources>
+ <TheResources></TheResources>
</template>
<script>
-import StoredResources from './components/learning-resource/StoredResource.vue';
import TheHeader from './components/layouts/TheHeader.vue';
+import TheResources from './components/learning-resource/TheResources.vue';
export default {
components: {
- StoredResources: StoredResources,
TheHeader: TheHeader,
+ TheResources: TheResources,
},
data() {
return {
rememberMe: 'Remember Me',
- storedResouces: [
- {
- id: 'official-guide',
- title: 'Official Guide',
- description: 'The official Vue.js documentation',
- link: 'https://vuejs.org',
- },
- {
- id: 'google',
- title: 'Google',
- description: 'Learn to google...',
- link: 'https://google.com',
- },
- ],
};
},
};
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue
new file mode 100644
index 0000000..d6f10e7
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue
@@ -0,0 +1,7 @@
+<template>
+ <h2>Add Resource</h2>
+</template>
+
+<script>export default{}</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue
index f212502..27a564d 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue
@@ -18,8 +18,7 @@
components: {
LearningResource: LearningResource,
},
-
- props: ['resources'],
+ inject: ['resources'],
};
</script>
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue
new file mode 100644
index 0000000..1d136bc
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/TheResources.vue
@@ -0,0 +1,66 @@
+<template>
+ <base-card>
+ <base-button
+ @click="setSelectedTab('stored-resources')"
+ :mode="storedResButtonMode"
+ >Stored Resource</base-button
+ >
+ <base-button
+ @click="setSelectedTab('add-resource')"
+ :mode="addResButtonMode"
+ >Add Resource</base-button
+ >
+ </base-card>
+ <component :is="selectedTab"></component>
+</template>
+
+<script>
+import StoredResources from './StoredResource.vue';
+import AddResource from './AddResource.vue';
+
+export default {
+ components: {
+ StoredResources: StoredResources,
+ AddResource: AddResource,
+ },
+ data() {
+ return {
+ selectedTab: 'stored-resources',
+ storedResouces: [
+ {
+ id: 'official-guide',
+ title: 'Official Guide',
+ description: 'The official Vue.js documentation',
+ link: 'https://vuejs.org',
+ },
+ {
+ id: 'google',
+ title: 'Google',
+ description: 'Learn to google...',
+ link: 'https://google.com',
+ },
+ ],
+ };
+ },
+ computed: {
+ storedResButtonMode() {
+ return this.selectedTab === 'stored-resources' ? null : 'flat';
+ },
+ addResButtonMode() {
+ return this.selectedTab === 'add-resource' ? null : 'flat';
+ },
+ },
+ provide() {
+ return {
+ resources: this.storedResouces,
+ };
+ },
+ methods: {
+ setSelectedTab(tab) {
+ this.selectedTab = tab;
+ },
+ },
+};
+</script>
+
+<style scoped></style>
--
Gitblit v1.8.0