Skip to content

Commit 155d1f6

Browse files
philwing100philwing100
committed
Added checkbox, date input, slider select, changes to the list element.
1 parent ce111bb commit 155d1f6

File tree

7 files changed

+404
-203
lines changed

7 files changed

+404
-203
lines changed

‎src/components/AboutMeComponents/SideScrolling.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<template>
22
<div id="scroll-container">
3-
43
<div id="scroll-text">This is scrolling text.</div>
54
</div>
6-
7-
85
</template>
96

107
<script>

‎src/components/ListItems/CheckBox.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="checkbox-container">
3+
<label for="checkbox-input">{{ label }}</label>
4+
<input
5+
type="checkbox"
6+
id="checkbox-input"
7+
v-model="isChecked"
8+
@change="emitCheckboxChange"
9+
@keyup.enter="toggleCheckbox"
10+
tabindex="0" />
11+
</div>
12+
</template>
13+
14+
<script>
15+
export default {
16+
name: 'CheckboxInput',
17+
props: {
18+
label: {
19+
type: String,
20+
default: 'Checkbox' // Default label text
21+
}
22+
},
23+
data() {
24+
return {
25+
isChecked: false
26+
};
27+
},
28+
methods: {
29+
emitCheckboxChange() {
30+
this.$emit('checkbox-toggled', this.isChecked); // Emit the checked state to the parent
31+
},
32+
toggleCheckbox() {
33+
// Toggle the checkbox value when Enter is pressed
34+
this.isChecked = !this.isChecked;
35+
this.emitCheckboxChange(); // Emit the change
36+
}
37+
}
38+
};
39+
</script>
40+
41+
<style scoped>
42+
/* Add your styling here */
43+
</style>
44+

‎src/components/ListItems/DateInput.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="date-input-container">
3+
<label for="date-input"></label>
4+
<input type="date" id="date-input" v-model="selectedDate" @change="emitDateChange" />
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
data() {
11+
return {
12+
selectedDate: null,
13+
};
14+
},
15+
methods: {
16+
emitDateChange() {
17+
this.$emit('date-selected', this.selectedDate); // Emit the selected date to the parent
18+
}
19+
}
20+
};
21+
</script>
22+
23+
<style scoped>
24+
/* Add your styling here */
25+
</style>

‎src/components/ListItems/ListElement.css

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
.dropbtn {
2+
margin-bottom: 10px;
3+
min-width: 20px;
4+
max-width: 200px;
5+
width: 200px;
6+
}
7+
8+
9+
.dropdown {
10+
position: relative;
11+
display: inline-block;
12+
}
13+
14+
.dropdown-content {
15+
display: none;
16+
position: absolute;
17+
background-color: #f9f9f9;
18+
min-width: 160px;
19+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
20+
z-index: 1;
21+
}
22+
23+
.dropdown-content a {
24+
color: black;
25+
padding: 12px 16px;
26+
text-decoration: none;
27+
display: block;
28+
}
29+
30+
.dropdown-content a:hover {
31+
background-color: #f1f1f1;
32+
}
33+
34+
.dropdown:hover .dropdown-content {
35+
display: block;
36+
}
37+
38+
.text-cursor {
39+
cursor: text;
40+
}
41+
42+
.item-text:focus {
43+
outline: none;
44+
/* Remove default outline for focused element */
45+
}
46+
47+
.drag-button {
48+
padding: 4px;
49+
background-color: #ccc;
50+
color: #333;
51+
border: none;
52+
border-radius: 4px;
53+
cursor: pointer;
54+
margin-right: 4px;
55+
}
56+
57+
/* Styles for dragging */
58+
.ListItem li {
59+
cursor: move;
60+
}
61+
62+
.template-container {
63+
background-color: black;
64+
border-radius: 10px;
65+
border-color: white;
66+
border-width: 1px;
67+
border-style: solid;
68+
min-height: 400px;
69+
max-height: 600px;
70+
min-width: 400px;
71+
max-width: 500px;
72+
padding: 5px 10px;
73+
}
74+
75+
.input-container {
76+
margin-bottom: 0px;
77+
display: flex;
78+
align-items: center;
79+
}
80+
81+
82+
83+
.input-field {
84+
padding: 8px 12px;
85+
border: 1px solid #ccc;
86+
border-radius: 4px;
87+
margin-right: 8px;
88+
font-size: 14px;
89+
}
90+
91+
.add-button,
92+
.toggle-popup-button {
93+
padding: 8px 16px;
94+
background-color: #2d5dc7;
95+
color: white;
96+
border: none;
97+
border-radius: 4px;
98+
cursor: pointer;
99+
font-size: 14px;
100+
margin-right: 8px;
101+
}
102+
103+
.remove-button {
104+
padding: 4px 8px;
105+
background-color: #343541;
106+
color: white;
107+
border: none;
108+
border-radius: 50%;
109+
cursor: pointer;
110+
font-size: 12px;
111+
margin-right: 8px;
112+
}
113+
114+
.ListContainer {
115+
display: flex;
116+
flex-direction: column;
117+
}
118+
119+
.ListItem {
120+
padding: 0;
121+
}
122+
123+
.item-container {
124+
display: flex;
125+
align-items: center;
126+
}
127+
128+
.item-text {
129+
margin-left: 10px;
130+
outline: none;
131+
}
132+
133+
.ListItem li {
134+
position: relative;
135+
padding-top: 1.45px;
136+
padding-bottom: 1.45px;
137+
}
138+
139+
.ListContainer {
140+
max-height: 300px;
141+
max-width: 400px;
142+
overflow-y: auto;
143+
display: flex;
144+
}
145+
146+
.ListItem {
147+
padding: 0;
148+
}
149+
150+
.ListItem,
151+
.RemoveButtonContainer {
152+
list-style-type: none;
153+
padding: 0;
154+
}
155+
156+
li {
157+
list-style-type: none;
158+
padding-right: 10px;
159+
spellcheck: false;
160+
}
161+
162+
li:hover {
163+
background-color: grey;
164+
border-radius: 15px;
165+
}

0 commit comments

Comments
 (0)