Skip to content

Commit 9fa83e2

Browse files
imrealashuimrealashu
committed
First draft of the invoice maker.
1 parent 9e4e943 commit 9fa83e2

File tree

16 files changed

+44640
-9557
lines changed

16 files changed

+44640
-9557
lines changed

‎assets/css/app.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.ql-size-small {
2+
@apply text-xs;
3+
}
4+
5+
.ql-size-huge {
6+
@apply text-4xl;
7+
}
8+
9+
.ql-size-large {
10+
@apply text-2xl;
11+
}
12+
13+
.vs--open {
14+
@apply w-48;
15+
}

‎components/Dropdown.vue‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<template>
2+
<div class="group inline-block z-50">
3+
<button
4+
class="outline-none focus:outline-none border px-3 py-1 bg-white rounded-sm flex items-center min-w-32"
5+
>
6+
<span class="pr-1 font-semibold flex-1">{{ currentSelection }}</span>
7+
<span>
8+
<svg
9+
class="fill-current h-4 w-4 transform group-hover:-rotate-180 transition duration-150 ease-in-out"
10+
xmlns="http://www.w3.org/2000/svg"
11+
viewBox="0 0 20 20"
12+
>
13+
<path
14+
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
15+
/>
16+
</svg>
17+
</span>
18+
</button>
19+
<ul
20+
class="bg-white border rounded-sm transform scale-0 group-hover:scale-100 absolute transition duration-150 ease-in-out origin-top min-w-32 z-10"
21+
>
22+
<li
23+
v-for="item in data"
24+
:key="item.value"
25+
class="rounded-sm px-3 py-1 hover:bg-gray-100 cursor-pointer"
26+
@click="selectItem(item.value)"
27+
>
28+
{{ item.name }}
29+
</li>
30+
<!-- <li class="rounded-sm relative px-3 py-1 hover:bg-gray-100">
31+
<button
32+
class="w-full text-left flex items-center outline-none focus:outline-none"
33+
>
34+
<span class="pr-1 flex-1">Langauges</span>
35+
<span class="mr-auto">
36+
<svg
37+
class="fill-current h-4 w-4 transition duration-150 ease-in-out"
38+
xmlns="http://www.w3.org/2000/svg"
39+
viewBox="0 0 20 20"
40+
>
41+
<path
42+
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
43+
/>
44+
</svg>
45+
</span>
46+
</button>
47+
<ul
48+
class="bg-white border rounded-sm absolute top-0 right-0 transition duration-150 ease-in-out origin-top-left min-w-32"
49+
>
50+
<li class="px-3 py-1 hover:bg-gray-100">Javascript</li>
51+
<li class="rounded-sm relative px-3 py-1 hover:bg-gray-100">
52+
<button
53+
class="w-full text-left flex items-center outline-none focus:outline-none"
54+
>
55+
<span class="pr-1 flex-1">Python</span>
56+
<span class="mr-auto">
57+
<svg
58+
class="fill-current h-4 w-4 transition duration-150 ease-in-out"
59+
xmlns="http://www.w3.org/2000/svg"
60+
viewBox="0 0 20 20"
61+
>
62+
<path
63+
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
64+
/>
65+
</svg>
66+
</span>
67+
</button>
68+
<ul
69+
class="bg-white border rounded-sm absolute top-0 right-0 transition duration-150 ease-in-out origin-top-left min-w-32"
70+
>
71+
<li class="px-3 py-1 hover:bg-gray-100">2.7</li>
72+
<li class="px-3 py-1 hover:bg-gray-100">3+</li>
73+
</ul>
74+
</li>
75+
</ul>
76+
</li> -->
77+
</ul>
78+
</div>
79+
</template>
80+
<script lang="ts">
81+
import Vue from "vue";
82+
export default Vue.extend({
83+
props: {
84+
data: {
85+
type: Array,
86+
required: true,
87+
},
88+
label: {
89+
type: String,
90+
required: false,
91+
default: "Dropdown",
92+
},
93+
defaultValue: {
94+
type: String,
95+
required: false,
96+
},
97+
},
98+
data() {
99+
return {
100+
selectedItem: this.defaultValue || "",
101+
};
102+
},
103+
computed: {
104+
currentSelection() {
105+
if (this.selectedItem === "") {
106+
return this.label;
107+
}
108+
return this.label + ": " + this.selectedItem;
109+
},
110+
},
111+
methods: {
112+
selectItem(value) {
113+
this.selectedItem = value;
114+
this.$emit("selected", value);
115+
},
116+
},
117+
mounted() {
118+
// if (this.defaultValue) {
119+
// setTimeout(() => {
120+
// this.selectedItem = this.defaultValue;
121+
// }, 1000);
122+
// }
123+
},
124+
});
125+
</script>
126+
<style scoped lang="scss">
127+
/*
128+
* since nested groupes are not supported we have to use
129+
* regular css for the nested dropdowns
130+
*/
131+
li > ul {
132+
transform: translatex(100%) scale(0);
133+
}
134+
li:hover > ul {
135+
transform: translatex(101%) scale(1);
136+
}
137+
li > button svg {
138+
transform: rotate(-90deg);
139+
}
140+
li:hover > button svg {
141+
transform: rotate(-270deg);
142+
}
143+
144+
/* Below styles fake what can be achieved with the tailwind config
145+
you need to add the group-hover variant to scale and define your custom
146+
min width style.
147+
See https://codesandbox.io/s/tailwindcss-multilevel-dropdown-y91j7?file=/index.html
148+
for implementation with config file
149+
*/
150+
.group:hover .group-hover\:scale-100 {
151+
transform: scale(1);
152+
}
153+
.group:hover .group-hover\:-rotate-180 {
154+
transform: rotate(180deg);
155+
}
156+
.scale-0 {
157+
transform: scale(0);
158+
}
159+
.min-w-32 {
160+
min-width: 8rem;
161+
}
162+
</style>

‎components/Editor.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div>
3+
<client-only>
4+
<quill-editor
5+
ref="editor"
6+
v-model="data"
7+
:options="{
8+
modules: {
9+
toolbar: '#editor-' + uniqueID,
10+
},
11+
}"
12+
>
13+
<div :id="'editor-' + uniqueID" slot="toolbar">
14+
<!-- Add a bold button -->
15+
<button class="ql-bold">Bold</button>
16+
<button class="ql-italic">Italic</button>
17+
<!-- Add font size dropdown -->
18+
<select class="ql-size">
19+
<option value="small"></option>
20+
<option selected></option>
21+
<option value="large"></option>
22+
<option value="huge"></option>
23+
</select>
24+
</div>
25+
</quill-editor>
26+
</client-only>
27+
</div>
28+
</template>
29+
<script>
30+
import Vue from "vue";
31+
export default Vue.extend({
32+
props: {
33+
content: {
34+
type: String,
35+
required: false,
36+
},
37+
},
38+
data() {
39+
return {
40+
data: "",
41+
uniqueID: this._uid,
42+
};
43+
},
44+
mounted() {
45+
setTimeout(() => {
46+
if (this.content) {
47+
this.data = this.content;
48+
}
49+
}, 500);
50+
},
51+
});
52+
</script>

‎components/Logo.vue‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎layouts/default.vue‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,63 @@
11
<template>
2-
<div>
2+
<div class="bg-gray-100">
3+
<nav class="container w-full z-30 top-10 py-1 border-orange-400 mx-auto">
4+
<div class="w-full flex items-center justify-between mt-0 py-2">
5+
<label for="menu-toggle" class="cursor-pointer md:hidden block">
6+
<svg
7+
class="fill-current text-blue-600"
8+
xmlns="http://www.w3.org/2000/svg"
9+
width="20"
10+
height="20"
11+
viewBox="0 0 20 20"
12+
>
13+
<title>menu</title>
14+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
15+
</svg>
16+
</label>
17+
<input class="hidden" type="checkbox" id="menu-toggle" />
18+
19+
<div
20+
class="hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1"
21+
id="menu"
22+
>
23+
<nav>
24+
<ul
25+
class="md:flex items-center justify-between text-base text-blue-600 pt-4 md:pt-0"
26+
>
27+
<li>
28+
<img src="logo_transparent_landscape.png" class="w-32" alt="" />
29+
</li>
30+
</ul>
31+
</nav>
32+
</div>
33+
34+
<div
35+
class="order-2 md:order-3 flex flex-wrap items-center justify-end mr-0 md:mr-4"
36+
id="nav-content"
37+
>
38+
<!-- <div class="auth flex items-center w-full md:w-full">
39+
<button
40+
class="bg-transparent text-gray-800 p-2 rounded border border-gray-300 mr-4 hover:bg-gray-100 hover:text-gray-700"
41+
>
42+
Sign in
43+
</button>
44+
<button
45+
class="bg-blue-600 text-gray-200 p-2 rounded hover:bg-blue-500 hover:text-gray-100"
46+
>
47+
Sign up
48+
</button>
49+
</div> -->
50+
</div>
51+
</div>
52+
</nav>
353
<Nuxt />
454
</div>
555
</template>
656

757
<style>
858
html {
9-
font-family:
10-
'Source Sans Pro',
11-
-apple-system,
12-
BlinkMacSystemFont,
13-
'Segoe UI',
14-
Roboto,
15-
'Helvetica Neue',
16-
Arial,
17-
sans-serif;
59+
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
60+
Roboto, "Helvetica Neue", Arial, sans-serif;
1861
font-size: 16px;
1962
word-spacing: 1px;
2063
-ms-text-size-adjust: 100%;

‎nuxt.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,20 @@ export default {
1717

1818
// Global CSS (https://go.nuxtjs.dev/config-css)
1919
css: [
20+
'quill/dist/quill.core.css',
21+
// for snow theme
22+
'quill/dist/quill.snow.css',
23+
// for bubble theme
24+
'quill/dist/quill.bubble.css',
25+
// Vue-Select Library css
26+
"vue-select/src/scss/vue-select.scss",
27+
// Custom CSS
28+
'@assets/css/app.scss',
2029
],
2130

2231
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
2332
plugins: [
33+
{ src: '@/plugins/index', mode: 'client' },
2434
],
2535

2636
// Auto import components (https://go.nuxtjs.dev/config-components)

0 commit comments

Comments
 (0)