Skip to content

Commit d8dc686

Browse files
motlamotla
committed
2.1.0 dropping usage of scss and eslint
1 parent 7c40502 commit d8dc686

File tree

5 files changed

+271
-247
lines changed

5 files changed

+271
-247
lines changed

‎CHANGELOG.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
1+
## v2.1.0
2+
3+
- SCSS has been converted to basic CSS, so you don't have to install a SCSS compiler anymore
4+
- Updating dependencies
5+
- Removing ESLint for a lighter project
6+
17
## v2.0.5
8+
29
- Bump `@ckpack/vue-color` dependency to its last version to fix part 2 of [Issue 16](https://github.com/motla/vue-file-toolbar-menu/issues/16).
310

411
## v2.0.4
12+
513
- Bump `@ckpack/vue-color` dependency to its last version to fix part 2 of [Issue 16](https://github.com/motla/vue-file-toolbar-menu/issues/16).
614

715
## v2.0.3
16+
817
- Fix v2.0.2 has wrong paths (Bug fix [Issue 16](https://github.com/motla/vue-file-toolbar-menu/issues/16))
918

1019
## v2.0.2
@@ -25,6 +34,16 @@
2534
- Switched `vue-color` to the `@ckpack/vue-color` fork for Vue3 compatibility
2635
- Dependencies upgrade
2736

37+
## v1.4.1
38+
39+
- Bugfix: CSS scoping issue
40+
41+
## v1.4.0
42+
43+
- SCSS has been converted to basic CSS, so you don't have to install a SCSS compiler anymore
44+
- Updating dependencies
45+
- Removing ESLint for a lighter project
46+
2847
## v1.3.4
2948

3049
- \[Color button\] Prevent calling `color_update()` callback when the color is changed not from the color palette

‎README.md

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ npm install vue-file-toolbar-menu
3131
npm install vue-file-toolbar-menu@1
3232
```
3333

34-
###### :warning: Your Vue.js project must have [`scss`](https://vue-loader.vuejs.org/guide/pre-processors.html#sass) support
35-
3634
###### :speech_balloon: If you prefer static files, import assets from the `dist` folder
3735

3836
## Basic example
@@ -73,7 +71,7 @@ Should render this:
7371
<img src="https://github.com/motla/vue-file-toolbar-menu/raw/master/img/basic-example.png" width="201">
7472

7573
<details>
76-
<summary><small>same example using static files loaded with a CDN</small></summary>
74+
<summary><small>same example using static files loaded with a CDN (Vue 3)</small></summary>
7775

7876
```HTML
7977
<html>
@@ -113,6 +111,49 @@ Should render this:
113111
</html>
114112
```
115113

114+
</details>
115+
<details>
116+
<summary><small>same example using static files loaded with a CDN (Vue 2)</small></summary>
117+
118+
```HTML
119+
<html>
120+
<head>
121+
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
122+
<script src="https://cdn.jsdelivr.net/npm/vue-file-toolbar-menu@1/dist/VueFileToolbarMenu.umd.min.js"></script>
123+
<link href="https://cdn.jsdelivr.net/npm/vue-file-toolbar-menu@1/dist/VueFileToolbarMenu.css" rel="stylesheet">
124+
</head>
125+
<body>
126+
<div id="app">
127+
<vue-file-toolbar-menu :content="my_menu" />
128+
</div>
129+
<script>
130+
var app = new Vue({
131+
el: '#app',
132+
components: { VueFileToolbarMenu },
133+
134+
data () { return { happy: false } },
135+
136+
computed: {
137+
my_menu () {
138+
return [
139+
{ text: "My Menu", menu: [
140+
{ text: "Item 1", click: () => alert("Action 1") },
141+
{ text: "Item 2", click: () => alert("Action 2") }
142+
] }, {
143+
text: "My Button",
144+
active: this.happy,
145+
icon: this.happy ? "sentiment_very_satisfied" : "sentiment_satisfied",
146+
click: () => { this.happy = !this.happy }
147+
}
148+
]
149+
}
150+
}
151+
})
152+
</script>
153+
</body>
154+
</html>
155+
```
156+
116157
</details>
117158

118159
## Complete example
@@ -122,7 +163,7 @@ See the [Demo.vue](src/Demo/Demo.vue) file corresponding to the [live demo](http
122163

123164
Styling can be done either by writing CSS variables or by overloading CSS properties using [`!important`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_!important_can_be_used).
124165

125-
**:blue_book: Check the CSS variables list and default values in the [default stylesheet](src/Bar/imports/bar-default-styles.scss).**
166+
**:blue_book: Check the CSS variables list and default values in the [Bar.vue stylesheet](src/Bar/Bar.vue#L70).**
126167

127168
###### :speech_balloon: If you need some variables that are missing, edit the stylesheet then submit a PR.
128169

@@ -213,7 +254,6 @@ Styling can be done either by writing CSS variables or by overloading CSS proper
213254

214255
## Project development
215256
- `npm run serve` compiles and hot-reloads demo for development
216-
- `npm run lint` lints and fixes files
217257
- `npm run build` compiles and minifies production files and demo
218258

219259
## Dependencies

‎package.json

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -30,43 +30,19 @@
3030
"scripts": {
3131
"serve": "vue-cli-service serve",
3232
"build": "vue-cli-service build --dest docs && vue-cli-service build --target lib --name VueFileToolbarMenu src/Bar/Bar.vue",
33-
"lint": "vue-cli-service lint",
34-
"preversion": "npm run lint",
3533
"version": "npm run build && git add -A"
3634
},
3735
"main": "src/Bar/Bar.vue",
3836
"dependencies": {
39-
"@ckpack/vue-color": "^1.1.7",
40-
"hotkeys-js": "^3.8.2",
41-
"material-icons": "^1.5.1",
42-
"node-emoji": "^1.10.0"
37+
"@ckpack/vue-color": "^1.2.4",
38+
"hotkeys-js": "^3.10.0",
39+
"material-icons": "^1.12.0",
40+
"node-emoji": "^1.11.0"
4341
},
4442
"devDependencies": {
45-
"@vue/cli-plugin-babel": "^4.5.0",
46-
"@vue/cli-plugin-eslint": "^4.5.0",
47-
"@vue/cli-service": "^4.5.0",
48-
"@vue/compiler-sfc": "^3.2.19",
49-
"babel-eslint": "^10.1.0",
50-
"core-js": "^3.18.1",
51-
"eslint": "^6.7.0",
52-
"eslint-plugin-vue": "^7.18.0",
53-
"sass": "^1.45.0",
54-
"sass-loader": "^8.0.0",
55-
"vue": "^3.2.19"
56-
},
57-
"eslintConfig": {
58-
"root": true,
59-
"env": {
60-
"node": true
61-
},
62-
"extends": [
63-
"plugin:vue/essential",
64-
"eslint:recommended"
65-
],
66-
"parserOptions": {
67-
"parser": "babel-eslint"
68-
},
69-
"rules": {}
43+
"@vue/cli-plugin-babel": "^5.0.8",
44+
"@vue/cli-service": "^5.0.8",
45+
"vue": "^3.2.41"
7046
},
7147
"browserslist": [
7248
"> 1%",

‎src/Bar/Bar.vue

Lines changed: 200 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,204 @@ export default {
6767
}
6868
</script>
6969

70-
<style lang="scss" scoped>
71-
@import "./imports/bar-default-styles.scss";
70+
<style scoped>
71+
.bar {
72+
display: flex;
73+
align-items: stretch;
74+
justify-content: flex-start;
75+
flex-wrap: wrap;
76+
color: var(--bar-font-color, rgba(0, 0, 0, 0.7));
77+
font-family: var(--bar-font-family, Avenir, Helvetica, Arial, sans-serif);
78+
font-size: var(--bar-font-size, 16px);
79+
font-weight: var(--bar-font-weight, 500);
80+
font-style: var(--bar-font-style);
81+
letter-spacing: var(--bar-letter-spacing);
82+
margin: var(--bar-margin);
83+
padding: var(--bar-padding);
84+
border: var(--bar-border);
85+
border-radius: var(--bar-border-radius);
86+
-webkit-font-smoothing: antialiased;
87+
-moz-osx-font-smoothing: grayscale;
88+
user-select: none;
89+
cursor: default;
90+
}
91+
.bar :deep(::-webkit-scrollbar) {
92+
width: 16px;
93+
height: 16px;
94+
}
95+
.bar :deep(::-webkit-scrollbar-track),
96+
.bar :deep(::-webkit-scrollbar-corner) {
97+
display: none;
98+
}
99+
.bar :deep(::-webkit-scrollbar-thumb) {
100+
background-color: rgba(0, 0, 0, 0.5);
101+
border: 5px solid transparent;
102+
border-radius: 16px;
103+
background-clip: content-box;
104+
}
105+
.bar :deep(::-webkit-scrollbar-thumb):hover {
106+
background-color: rgba(0, 0, 0, 0.8);
107+
}
108+
.bar :deep(.ellipsis) {
109+
width: 100%;
110+
white-space: nowrap;
111+
overflow: hidden;
112+
text-overflow: ellipsis;
113+
}
114+
.bar :deep(.bar-button) {
115+
position: relative;
116+
display: flex;
117+
align-items: center;
118+
justify-content: center;
119+
padding: var(--bar-button-padding, 7px);
120+
border-radius: var(--bar-button-radius, 3px);
121+
white-space: nowrap;
122+
}
123+
.bar :deep(.bar-button).active {
124+
color: var(--bar-button-active-color, #41b883);
125+
background: var(--bar-button-active-bkg, #eaf7f4);
126+
}
127+
.bar :deep(.bar-button).open:hover {
128+
color: var(--bar-button-open-color, #41b883);
129+
background: var(--bar-button-open-bkg, #eaf7f4);
130+
}
131+
.bar :deep(.bar-button).disabled {
132+
color: var(--bar-button-disabled-color, rgba(0, 0, 0, 0.3));
133+
background: var(--bar-button-disabled-bkg);
134+
}
135+
.bar :deep(.bar-button):not(.active):not(.open):not(.disabled):hover {
136+
color: var(--bar-button-hover-color);
137+
background: var(--bar-button-hover-bkg, #f1f3f4);
138+
}
139+
.bar :deep(.bar-button) > .label {
140+
display: flex;
141+
align-items: center;
142+
padding: var(--bar-button-label-padding, 0 3px);
143+
}
144+
.bar :deep(.bar-button) > .icon,
145+
.bar :deep(.bar-button) > .emoji {
146+
font-display: block;
147+
width: 1em;
148+
font-size: var(--bar-button-icon-size, 24px);
149+
margin: var(--bar-button-icon-margin);
150+
}
151+
.bar :deep(.bar-button) > .chevron {
152+
font-display: block;
153+
width: 1em;
154+
margin: var(--bar-button-chevron-margin, 0 -5px 0 0);
155+
}
156+
.bar :deep(.bar-button) > .menu {
157+
position: absolute;
158+
left: 0;
159+
top: 100%;
160+
display: none;
161+
z-index: 1000;
162+
}
163+
.bar :deep(.bar-button) > .menu.align-left {
164+
left: 0;
165+
}
166+
.bar :deep(.bar-button) > .menu.align-center {
167+
left: auto;
168+
}
169+
.bar :deep(.bar-button) > .menu.align-right {
170+
left: auto;
171+
right: 0;
172+
}
173+
.bar :deep(.bar-button).open:hover > .menu {
174+
display: block;
175+
}
176+
.bar :deep(.bar-menu) {
177+
position: relative;
178+
white-space: normal;
179+
}
180+
.bar :deep(.bar-menu) > .extended-hover-zone {
181+
position: absolute;
182+
top: 0;
183+
left: -100px;
184+
right: -100px;
185+
bottom: -40px;
186+
}
187+
.bar :deep(.bar-menu) > .bar-menu-items {
188+
position: relative;
189+
min-width: var(--bar-menu-min-width, 160px);
190+
color: var(--bar-menu-color, rgba(0, 0, 0, 0.7));
191+
background: var(--bar-menu-bkg, white);
192+
padding: var(--bar-menu-padding, 5px 0);
193+
box-shadow: var(--bar-menu-shadow, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px);
194+
border: var(--bar-menu-border);
195+
border-radius: var(--bar-menu-border-radius);
196+
}
197+
@supports (backdrop-filter: var(--bar-menu-backdrop-filter)) {
198+
.bar :deep(.bar-menu) > .bar-menu-items {
199+
backdrop-filter: var(--bar-menu-backdrop-filter);
200+
background: var(--bar-menu-backdrop-filter-bkg, var(--bar-menu-bkg, white));
201+
}
202+
}
203+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item {
204+
position: relative;
205+
display: flex;
206+
align-items: center;
207+
justify-content: flex-start;
208+
font-size: var(--bar-menu-item-font-size);
209+
padding: var(--bar-menu-item-padding, 8px 15px);
210+
}
211+
.bar :deep(.bar-men) > .bar-menu-items > .bar-menu-item.active {
212+
color: var(--bar-menu-item-active-color);
213+
background: var(--bar-menu-item-active-bkg, #e7e8e9);
214+
}
215+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item.disabled {
216+
color: var(--bar-menu-item-disabled-color, rgba(0, 0, 0, 0.3));
217+
}
218+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item:not(.active):not(.disabled):hover {
219+
color: var(--bar-menu-item-hover-color);
220+
background: var(--bar-menu-item-hover-bkg, #f1f3f4);
221+
}
222+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item > .label {
223+
display: flex;
224+
align-items: center;
225+
flex-grow: 1;
226+
}
227+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item > .icon,
228+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item > .emoji {
229+
font-display: block;
230+
width: 1em;
231+
font-size: var(--bar-menu-item-icon-size, 24px);
232+
margin: var(--bar-menu-item-icon-margin, 0 10px 0 0);
233+
}
234+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item > .chevron {
235+
font-display: block;
236+
width: 1em;
237+
margin: var(--bar-menu-item-chevron-margin, 0 -6px 0 0);
238+
}
239+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item > .menu {
240+
position: absolute;
241+
left: 100%;
242+
top: 0;
243+
display: none;
244+
z-index: 1000;
245+
}
246+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item:hover > .menu {
247+
display: block;
248+
}
249+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item > .bar-menu {
250+
border-radius: var(--bar-sub-menu-border-radius);
251+
}
252+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-item > .bar-menu > .extended-hover-zone {
253+
top: -100px;
254+
left: 0;
255+
bottom: -100px;
256+
}
257+
.bar :deep(.bar-menu) > .bar-menu-items > .bar-menu-separator {
258+
height: var(--bar-menu-separator-height, 1px);
259+
margin: var(--bar-menu-separator-margin, 5px 0);
260+
background-color: var(--bar-menu-separator-color, rgba(0, 0, 0, 0.1));
261+
}
262+
.bar :deep(.bar-separator) {
263+
width: var(--bar-separator-width, 2px);
264+
margin: var(--bar-separator-margin, 5px);
265+
background-color: var(--bar-separator-color, rgba(0, 0, 0, 0.1));
266+
}
267+
.bar :deep(.bar-spacer) {
268+
flex-grow: 1;
269+
}
72270
</style>

0 commit comments

Comments
 (0)