Skip to content
This repository was archived by the owner on Oct 30, 2023. It is now read-only.

Commit 0353ec4

Browse files
rbajaniyarbajaniya
authored
Merge pull request #2 from FlowzPlatform/developer
Create test example
2 parents 5ad6172 + 0005edd commit 0353ec4

File tree

7 files changed

+114
-69
lines changed

7 files changed

+114
-69
lines changed

‎examples/components/simple-widget.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div>
3+
<Widget>
4+
<WidgetHeading :Reset="true" :id="1" :Title="'Heading'" :TextColor="true" :DeleteButton="true" :ColorBox="true" :Expand="true" :Collapse="true"></WidgetHeading>
5+
<WidgetBody>
6+
body content
7+
</WidgetBody>
8+
</Widget>
9+
10+
<Widget>
11+
<WidgetHeading :Reset="true" :id="2" :Title="'Heading'" :TextColor="true" :DeleteButton="true" :ColorBox="true" :Expand="true" :Collapse="true"></WidgetHeading>
12+
<WidgetBody>
13+
body content
14+
</WidgetBody>
15+
</Widget>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {
23+
message: "Vuw-widget demo"
24+
}
25+
}
26+
}
27+
</script>
28+
29+
<style lang="less">
30+
@import "../../src/styles/index.less";
31+
</style>

‎examples/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Vue-widgets example</title>
5+
</head>
6+
<body>
7+
<div id="app"></div>
8+
</body>
9+
</html>

‎examples/main.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Vue from 'vue'
2+
import Home from './components/simple-widget.vue'
3+
4+
Vue.config.productionTip = false
5+
6+
import VueWidgets from '../src'
7+
//import '../dist/styles/vue-widgets.css'
8+
import 'vue-awesome/icons'
9+
import Icon from 'vue-awesome/components/Icon'
10+
11+
Vue.use(VueWidgets)
12+
Vue.component('Icon', Icon)
13+
/* eslint-disable no-new */
14+
new Vue({
15+
el: '#app',
16+
render: h => h(Home)
17+
})

‎package-lock.json

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-widgets",
3-
"version": "1.0.4",
3+
"version": "1.0.6",
44
"description": "Vue.js widget component",
55
"main": "dist/vue-widgets.js",
66
"scripts": {
@@ -28,10 +28,6 @@
2828
},
2929
"homepage": "https://github.com/FlowzPlatform/vue-widgets#readme",
3030
"dependencies": {
31-
"async-validator": "^1.7.1",
32-
"core-js": "^2.4.1",
33-
"deepmerge": "^1.3.1",
34-
"popper.js": "^0.6.4",
3531
"vue-awesome": "^2.3.1"
3632
},
3733
"peerDependencies": {

‎src/components/widget/widget-heading.vue

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,66 @@
11
<template>
22
<div class="vw-widget-heading" v-bind:style="styles">
3-
<Icon name="comments"></Icon>
43
<span v-if="headerShow" v-on:mouseover="changeHeader()" title="Edit">
54
<slot>{{Titles}}</slot>
65
</span>
76

87
<div v-if="DeleteButton" class="vw-widget-options vw-pull-right">
9-
<a @click="close" title="Close Widget"><Icon name="times"></Icon></a>
8+
<a v-bind:style="textClass" @click="close" title="Close Widget"><Icon name="times"></Icon></a>
109
</div>
1110

12-
<!-- Expand Component starts -->
11+
<!-- Expand Component -->
1312
<div v-if="Expand" class="vw-widget-options vw-pull-right">
14-
<a @click="fullscreen" title="Fullscreen">
13+
<a v-bind:style="textClass" @click="fullscreen" title="Fullscreen">
1514
<Icon v-if="!Fullscreen" name="expand"></Icon>
1615
<Icon v-else name="compress"></Icon>
1716
</a>
1817
</div>
19-
<!-- Expand Component ends-->
18+
<!-- /Expand Component -->
2019

21-
<!-- Collaps Component starts -->
20+
<!-- Collaps Component -->
2221
<div v-if="Collapse" class="vw-widget-options vw-pull-right">
23-
<a @click="minimizebody" title="Collapse">
22+
<a v-bind:style="textClass" @click="minimizebody" title="Collapse">
2423
<Icon v-if="Minimize" name="minus"></Icon>
2524
<Icon v-else name="plus"></Icon>
2625
</a>
2726
</div>
28-
<!-- Collaps Component ends -->
27+
<!-- /Collaps Component -->
2928

29+
<!-- Reset Component -->
30+
<div v-if="Reset" class="vw-widget-options vw-pull-right">
31+
<a v-bind:style="textClass" v-on:click="removeState()" title="Reset Component">
32+
<Icon name="undo"></Icon>
33+
</a>
34+
</div>
35+
<!-- /Reset Component-->
36+
37+
<!-- Color-Box Component -->
3038
<div v-if="ColorBox" class="vw-widget-options vw-pull-right">
31-
<div class="vw-widget-color">
32-
<Icon name="paint-brush"></Icon>
33-
<input type="color" v-model="Headcolor" value="#00dcff" v-on:change="setColor()" title="Window Color" >
34-
</div>
35-
<!-- <i class="material-icons" v-on:click="colorSet()">format_color_fill</i> -->
39+
<!-- <div class="vw-widget-color"> -->
40+
<a v-bind:style="textClass">
41+
<Icon id="svg" name="paint-brush"></Icon>
42+
<input type="color" v-model="Headcolor" value="#00dcff" v-on:change="setColor()" title="Change Color">
43+
</a>
44+
<!-- </div> -->
3645
</div>
37-
<!-- Color-Box Component ends -->
46+
<!-- /Color-Box Component -->
3847

39-
<!-- Heading Edit Component starts -->
48+
<!-- Heading Edit Component -->
4049
<span v-if="editHeading">
41-
<input v-model="Titles" type="text" name="txtTitle" class="vw-widget-txt" v-on:keyup.enter="validate()" @mouseleave="changeHeader()" v-bind:style="textClass">
50+
<input v-model="Titles" type="text" name="txtTitle" class="vw-widget-txt" v-on:keyup.enter="validate()" @mouseleave="validate()" v-bind:style="txtBoxClass">
4251
</span>
43-
<!-- Heading Edit Component ends -->
44-
45-
<!-- Reset Component -->
46-
<div v-if="Reset" class="vw-widget-options vw-pull-right">
47-
<a v-on:click="removeState()" title="Reset Component">
48-
<Icon name="undo"></Icon>
49-
</a>
50-
</div>
51-
<!-- Reset Component ends -->
52+
<!-- /Heading Edit Component -->
5253

5354
<!-- Text Color -->
5455
<div v-if="TextColor" class="vw-widget-options vw-pull-right">
55-
<div class="vw-widget-color">
56-
<Icon name="font"></Icon>
57-
<input type="color" v-model="Textcolor" v-on:change="setTextColor()" title="Font Color">
58-
</div>
56+
<!-- <div class="vw-widget-color"> -->
57+
<a v-bind:style="textClass">
58+
<Icon id="svg" name="font"></Icon>
59+
<input type="color" v-model="Textcolor" v-on:change="setTextColor()" title="Font Color">
60+
</a>
61+
<!-- </div> -->
5962
</div>
60-
<!-- Text Color Ends -->
63+
<!-- /Text Color -->
6164
</div>
6265
</template>
6366

@@ -118,11 +121,16 @@
118121
'color': this.Textcolor
119122
};
120123
},
121-
textClass() {
124+
txtBoxClass() {
122125
return {
123126
'color': this.Textcolor,
124127
'border-color': this.Textcolor
125128
}
129+
},
130+
textClass() {
131+
return {
132+
'color': this.Textcolor
133+
}
126134
}
127135
},
128136

‎src/styles/components/widget.less

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -39,50 +39,29 @@
3939
background-color: #f5f5f5;
4040
border-color: #ddd;
4141
}
42-
4342
&-options a{
4443
border:1px solid transparent;
4544
background: transparent;
4645
padding:4px 8px;
4746
border-radius:25px;
4847
text-decoration:none;
4948
cursor: pointer
50-
}
49+
}
50+
&-options a input{
51+
cursor: pointer;
52+
opacity: 0;
53+
padding: 0;
54+
width: 15px;
55+
height: 22px
56+
}
57+
&-options a #svg{
58+
position: absolute;
59+
}
5160
&-heading span{
5261
cursor: pointer;
53-
}
54-
&-color {
55-
cursor: pointer;
56-
position:relative;
57-
> i{
58-
position: absolute;
59-
top: 2px;
60-
}
61-
> input{
62-
opacity: 0;
63-
padding: 0px;
64-
margin-top: -4px;
65-
width: 16px;
66-
height: 22px;
67-
}
6862
}
6963
&-body{
7064
padding:15px;
71-
}
72-
&-color {
73-
cursor: pointer;
74-
position:relative;
75-
> svg{
76-
position: absolute;
77-
top: 2px;
78-
}
79-
> input{
80-
opacity: 0;
81-
padding: 0px;
82-
margin-top: -4px;
83-
width: 16px;
84-
height: 22px;
85-
}
8665
}
8766
&-txt {
8867
color: #333;

0 commit comments

Comments
 (0)