vue_crud 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: aca8b5b76490166baef0e5a1151e9386142ffc3b
|
|
4
|
+
data.tar.gz: 409941cd5b60b0f50127b2bc3b4c03068793821f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6e935c7200e37d4f8892408d83d8292802e3adea3c25cfdf17ee34c6f5f5cffefb37125dbcd73e92733d0fb162d2d18155dc43e96dd2fb41929859038661a3ac
|
|
7
|
+
data.tar.gz: 8fa29bba092322022135227752205aa1a27e58f1b0f43c12539f402fea0501d34798aa3a0e2b6f77c0ce752de3a47e5c680590b58908e267a8d52479f68ebded
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script type="text/javascript">
|
|
2
|
+
if(column_type === undefined) var column_type = 'card';
|
|
3
|
+
if(suffix === undefined) var suffix = '.json';
|
|
4
|
+
if(countOfPage === undefined) var countOfPage = 9;
|
|
2
5
|
$(document).ready(function() {
|
|
3
|
-
var column_type = 'card';
|
|
4
6
|
$('.vue_form_for_new').html($('#vue_form').html());
|
|
5
7
|
var models = $($('#models-' + column_type).html());
|
|
6
8
|
models.find('.custom_models').html(
|
|
@@ -18,11 +20,11 @@ $(document).ready(function() {
|
|
|
18
20
|
models.find('.custom_modal_action').html(
|
|
19
21
|
$('#custom_modal_action').html()
|
|
20
22
|
);
|
|
21
|
-
|
|
22
23
|
$('#models-' + column_type).html(models);
|
|
23
24
|
vue_init({
|
|
24
25
|
column_type: column_type,
|
|
25
|
-
suffix:
|
|
26
|
+
suffix: suffix,
|
|
27
|
+
countOfPage: countOfPage
|
|
26
28
|
});
|
|
27
29
|
$('.filter .ui.dropdown').dropdown();
|
|
28
30
|
});
|
|
@@ -75,6 +77,10 @@ $(document).ready(function() {
|
|
|
75
77
|
<th v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.model_prefix + '.' + attribute.name == model_prefix + '.' + selected_attribute}">
|
|
76
78
|
{{ attribute.display_name }}
|
|
77
79
|
</th>
|
|
80
|
+
<th>
|
|
81
|
+
Action
|
|
82
|
+
</th>
|
|
83
|
+
<th></th>
|
|
78
84
|
</tr>
|
|
79
85
|
</thead>
|
|
80
86
|
<tbody>
|
|
@@ -83,7 +89,7 @@ $(document).ready(function() {
|
|
|
83
89
|
</tbody>
|
|
84
90
|
<tfoot>
|
|
85
91
|
<tr>
|
|
86
|
-
<th :colspan="info.model_attributes.length">
|
|
92
|
+
<th :colspan="info.model_attributes.length + 2">
|
|
87
93
|
<div class="ui right floated pagination menu">
|
|
88
94
|
<a class="item" @click.prevent="setPage(currentPage-1)" :class="{'disabled': (currentPage == '1')}">
|
|
89
95
|
＜
|
|
@@ -118,17 +124,59 @@ $(document).ready(function() {
|
|
|
118
124
|
<!-- NOTE: Templates -->
|
|
119
125
|
<script type="text/x-template" id="models-table">
|
|
120
126
|
<tr>
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
127
|
+
<td v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}">
|
|
128
|
+
<p v-if="attribute.model_prefix">
|
|
129
|
+
<span v-if="attribute.type != 'img'">
|
|
130
|
+
{{ model[attribute.model_prefix][attribute.name] }}
|
|
131
|
+
</span>
|
|
132
|
+
<span v-else>
|
|
133
|
+
<img :src="model[attribute.model_prefix][attribute.name]" />
|
|
134
|
+
</span>
|
|
135
|
+
</p>
|
|
136
|
+
<p v-else>
|
|
137
|
+
<span v-if="attribute.type != 'img'">
|
|
138
|
+
{{ model[attribute.name] }}
|
|
139
|
+
</span>
|
|
140
|
+
<span v-else>
|
|
141
|
+
<img :src="model[attribute.name]" />
|
|
142
|
+
</span>
|
|
143
|
+
</p>
|
|
144
|
+
</td>
|
|
145
|
+
<td style="position: relative;">
|
|
146
|
+
<div class="ui modal" :id="'editModal_' + model.id">
|
|
147
|
+
<div class="ui inverted dimmer">
|
|
148
|
+
<div class="ui indeterminate text loader">Progressing</div>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="header">Update {{ info.titles.title }}</div>
|
|
151
|
+
<div class="content">
|
|
152
|
+
<!-- NOTE: Not customMode -->
|
|
153
|
+
<div v-show="!customMode" class="vue_form_for_edit"></div>
|
|
154
|
+
<!-- NOTE: Is customMode -->
|
|
155
|
+
<!-- NOTE: Custom modal body -->
|
|
156
|
+
<div v-show="customMode"><div class="custom_modal_body"></div></div>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="actions">
|
|
159
|
+
<button class="ui basic gray cancel button">Cancel</button>
|
|
160
|
+
<button @click="updateModel" class="ui button blue" v-show="!customMode">Update</button>
|
|
161
|
+
<!-- NOTE: Custom modal action -->
|
|
162
|
+
<div class="inline-block custom_modal_action"></div>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
<a @click="updateModel(false)" onclick="return false" class="ui orange right corner label" v-show="modified" title="您有尚未儲存的變更">
|
|
166
|
+
<i class="save icon"></i>
|
|
167
|
+
</a>
|
|
168
|
+
<a class="ui green right corner label" v-show="is_success" title="儲存成功">
|
|
169
|
+
<i class="check icon"></i>
|
|
170
|
+
</a>
|
|
171
|
+
<!-- NOTE: Custom action -->
|
|
172
|
+
<div class="inline-block custom_action"></div>
|
|
173
|
+
<div class="ui blue button" :data-modal="'#editModal_' + model.id">Edit</div>
|
|
174
|
+
<div @click="deleteModel" class="ui basic red button" v-show="!deleteMode">Delete</div>
|
|
175
|
+
</td>
|
|
176
|
+
<td :colspan="info.model_attributes.length + 1">
|
|
177
|
+
<!-- NOTE: Custom models -->
|
|
178
|
+
<div class="custom_models"></div>
|
|
179
|
+
</td>
|
|
132
180
|
</tr>
|
|
133
181
|
</script>
|
|
134
182
|
<script type="text/x-template" id="models-card">
|
|
@@ -144,10 +192,20 @@ $(document).ready(function() {
|
|
|
144
192
|
<div class="event">
|
|
145
193
|
<div class="content">
|
|
146
194
|
<div class="summary" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}" v-if="attribute.model_prefix">
|
|
147
|
-
|
|
195
|
+
<span v-if="attribute.type != 'img'">
|
|
196
|
+
{{ attribute.display_name }}: {{ model[attribute.model_prefix][attribute.name] }}
|
|
197
|
+
</span>
|
|
198
|
+
<span v-else>
|
|
199
|
+
<img :src="model[attribute.model_prefix][attribute.name]" />
|
|
200
|
+
</span>
|
|
148
201
|
</div>
|
|
149
202
|
<div class="summary" :class="{highlight: attribute.model_prefix + '.' + attribute.name == selected_attribute}" v-else>
|
|
150
|
-
|
|
203
|
+
<span v-if="attribute.type != 'img'">
|
|
204
|
+
{{ attribute.display_name }}: {{ model[attribute.name] }}
|
|
205
|
+
</span>
|
|
206
|
+
<span v-else>
|
|
207
|
+
<img :src="model[attribute.name]" />
|
|
208
|
+
</span>
|
|
151
209
|
</div>
|
|
152
210
|
</div>
|
|
153
211
|
</div>
|
data/lib/vue_crud/version.rb
CHANGED
|
@@ -44,7 +44,8 @@ function getParameterByName(name) {
|
|
|
44
44
|
function vue_init(params = {}) {
|
|
45
45
|
var default_options = {
|
|
46
46
|
suffix: '.json',
|
|
47
|
-
column_type: 'card'
|
|
47
|
+
column_type: 'card',
|
|
48
|
+
countOfPage: 9
|
|
48
49
|
}
|
|
49
50
|
var options = $.extend(true, {}, default_options, params)
|
|
50
51
|
Vue.filter('datetime', function (value) {
|
|
@@ -150,7 +151,7 @@ function vue_init(params = {}) {
|
|
|
150
151
|
mixins: [root_mixin],
|
|
151
152
|
el: '#vue_crud',
|
|
152
153
|
data: {
|
|
153
|
-
column_type: options.column_type,
|
|
154
|
+
column_type: options.column_type || 'card',
|
|
154
155
|
models: [],
|
|
155
156
|
info: {
|
|
156
157
|
url_prefix: '',
|
|
@@ -161,7 +162,7 @@ function vue_init(params = {}) {
|
|
|
161
162
|
model: {},
|
|
162
163
|
errors: {},
|
|
163
164
|
progress: '0',
|
|
164
|
-
countOfPage: 9,
|
|
165
|
+
countOfPage: options.countOfPage || 9,
|
|
165
166
|
currentPage: getParameterByName("p") || 1,
|
|
166
167
|
searchQuery: getParameterByName("q"),
|
|
167
168
|
filteredModelCount: null,
|
|
@@ -9,13 +9,26 @@
|
|
|
9
9
|
border-radius: 0;
|
|
10
10
|
height: 10px;
|
|
11
11
|
}
|
|
12
|
+
.event .content {
|
|
13
|
+
width: 100%;
|
|
14
|
+
}
|
|
12
15
|
#form-progress {
|
|
13
16
|
position: fixed;
|
|
14
17
|
top: -9999px;
|
|
15
18
|
}
|
|
19
|
+
.label .icon:before {
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
}
|
|
16
22
|
.summary.highlight {
|
|
17
23
|
border: 2px solid #a90000;
|
|
18
24
|
}
|
|
25
|
+
.ui.table td {
|
|
26
|
+
max-width: 150px;
|
|
27
|
+
overflow: auto;
|
|
28
|
+
}
|
|
29
|
+
.ui.table td img {
|
|
30
|
+
max-width: 100%;
|
|
31
|
+
}
|
|
19
32
|
th.highlight {
|
|
20
33
|
border: 2px solid #a90000 !important;
|
|
21
34
|
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: vue_crud
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Donald Chiang
|
|
@@ -78,8 +78,6 @@ files:
|
|
|
78
78
|
- vendor/assets/.DS_Store
|
|
79
79
|
- vendor/assets/javascripts/vue_crud.js
|
|
80
80
|
- vendor/assets/stylesheets/vue_crud.css
|
|
81
|
-
- vue_crud-0.1.0.gem
|
|
82
|
-
- vue_crud-0.1.1.gem
|
|
83
81
|
- vue_crud.gemspec
|
|
84
82
|
homepage: http://www.mynet.com.tw
|
|
85
83
|
licenses:
|
data/vue_crud-0.1.0.gem
DELETED
|
Binary file
|
data/vue_crud-0.1.1.gem
DELETED
|
Binary file
|