classcard-ui 0.2.269 → 0.2.273

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.
Files changed (11) hide show
  1. package/dist/classcard-ui.common.js +199 -70
  2. package/dist/classcard-ui.common.js.map +1 -1
  3. package/dist/classcard-ui.umd.js +199 -70
  4. package/dist/classcard-ui.umd.js.map +1 -1
  5. package/dist/classcard-ui.umd.min.js +1 -1
  6. package/dist/classcard-ui.umd.min.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue +48 -4
  9. package/src/components/CEditor/CEditor.vue +1 -1
  10. package/src/components/CTable/CTable.vue +81 -17
  11. package/src/components/CUpload/CUpload.vue +29 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "classcard-ui",
3
- "version": "0.2.269",
3
+ "version": "0.2.273",
4
4
  "main": "dist/classcard-ui.common.js",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue CHANGED
@@ -5,7 +5,19 @@
5
5
  :class="classes"
6
6
  :type="type"
7
7
  @click="handleButtonClick"
8
- class="relative inline-flex items-center px-4 py-2 rounded-l-md text-sm font-medium focus:z-10 focus:outline-none focus:ring-1"
8
+ class="
9
+ relative
10
+ inline-flex
11
+ items-center
12
+ px-4
13
+ py-2
14
+ rounded-l-md
15
+ text-sm
16
+ font-medium
17
+ focus:z-10
18
+ focus:outline-none
19
+ focus:ring-1
20
+ "
9
21
  >
10
22
  {{ selectedValue ? selectedValue : label }}
11
23
  </button>
@@ -15,7 +27,20 @@
15
27
  @blur="close()"
16
28
  :type="type"
17
29
  :class="classes"
18
- class="relative inline-flex items-center px-2 py-2 rounded-r-md text-sm font-medium t focus:z-10 focus:outline-none focus:ring-1"
30
+ class="
31
+ relative
32
+ inline-flex
33
+ items-center
34
+ px-2
35
+ py-2
36
+ rounded-r-md
37
+ text-sm
38
+ font-medium
39
+ t
40
+ focus:z-10
41
+ focus:outline-none
42
+ focus:ring-1
43
+ "
19
44
  >
20
45
  <span class="sr-only">Open options</span>
21
46
  <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
@@ -23,7 +48,18 @@
23
48
  <div
24
49
  v-if="toggleDropdown"
25
50
  :class="dropdownPositionClass"
26
- class="origin-top-right absolute right-0 z-10 mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5"
51
+ class="
52
+ origin-top-right
53
+ absolute
54
+ right-0
55
+ z-10
56
+ mt-2
57
+ w-56
58
+ rounded-md
59
+ shadow-lg
60
+ bg-white
61
+ ring-1 ring-gray-900 ring-opacity-5
62
+ "
27
63
  >
28
64
  <div
29
65
  class="py-1"
@@ -35,7 +71,15 @@
35
71
  v-for="item in items"
36
72
  v-bind:key="item.items"
37
73
  @mousedown="selectOption($event, item.value)"
38
- class="block px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer"
74
+ class="
75
+ block
76
+ px-4
77
+ py-2
78
+ text-sm text-left text-gray-700
79
+ hover:bg-gray-100
80
+ hover:text-gray-900
81
+ cursor-pointer
82
+ "
39
83
  role="menuitem"
40
84
  >
41
85
  {{ item.text }}
package/src/components/CEditor/CEditor.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div>
3
3
  <div class="flex justify-between">
4
- <p class="text-sm text-gray-900">{{ label }}</p>
4
+ <p class="text-sm font-medium text-gray-900">{{ label }}</p>
5
5
  <p class="text-sm text-gray-500" v-if="hint">{{ hint }}</p>
6
6
  </div>
7
7
  <quill-editor
package/src/components/CTable/CTable.vue CHANGED
@@ -1,10 +1,19 @@
1
1
  <template>
2
2
  <div>
3
-
4
- <div slot="table-actions" v-if="tableActions" class="bg-gray-50 rounded-lg p-3 mb-4">
3
+ <div
4
+ slot="table-actions"
5
+ v-if="tableActions"
6
+ class="bg-gray-50 rounded-lg p-3 mb-4"
7
+ >
5
8
  <div class="flex justify-between">
6
9
  <div v-if="searching">
7
- <c-input v-model="searchTerm" :isValidate="searching" :placeholder="searchPlaceholder" class="-mt-1 w-56" type="text"></c-input>
10
+ <c-input
11
+ v-model="searchTerm"
12
+ :isValidate="searching"
13
+ :placeholder="searchPlaceholder"
14
+ class="-mt-1 w-56"
15
+ type="text"
16
+ ></c-input>
8
17
  </div>
9
18
  <div class="flex">
10
19
  <!-- dropdown icon on top right of table -->
@@ -13,11 +22,30 @@
13
22
  <div>
14
23
  <button
15
24
  @click="handleToggle"
16
- class="inline-flex justify-center w-full rounded-md border border-gray-200 shadow-sm px-2 py-2 bg-white text-sm font-medium hover:bg-gray-50 focus:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
25
+ class="
26
+ inline-flex
27
+ justify-center
28
+ w-full
29
+ rounded-md
30
+ border border-gray-200
31
+ shadow-sm
32
+ px-2
33
+ py-2
34
+ bg-white
35
+ text-sm
36
+ font-medium
37
+ hover:bg-gray-50
38
+ focus:outline-none focus:outline-none
39
+ focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600
40
+ "
17
41
  aria-haspopup="true"
18
42
  aria-expanded="true"
19
43
  >
20
- <c-icon name="view-board" type="solid" class="text-gray-400 h-5 w-5"></c-icon>
44
+ <c-icon
45
+ name="view-board"
46
+ type="solid"
47
+ class="text-gray-400 h-5 w-5"
48
+ ></c-icon>
21
49
  <c-icon
22
50
  name="chevron-down"
23
51
  type="solid"
@@ -28,10 +56,24 @@
28
56
  <!-- dropdown having list of all columns to show hide -->
29
57
  <div
30
58
  v-if="toggleDropdown"
31
- class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-100 overflow-y-auto max-h-96"
59
+ class="
60
+ origin-top-right
61
+ absolute
62
+ right-0
63
+ mt-2
64
+ -mr-1
65
+ w-56
66
+ rounded-md
67
+ shadow-lg
68
+ bg-white
69
+ ring-1 ring-gray-900 ring-opacity-5
70
+ z-100
71
+ overflow-y-auto
72
+ max-h-96
73
+ "
32
74
  tabindex="0"
33
75
  @blur="handleToggle"
34
- >
76
+ >
35
77
  <div
36
78
  class="py-1"
37
79
  role="menu"
@@ -42,7 +84,15 @@
42
84
  href="#"
43
85
  v-for="column in showHideColumnList"
44
86
  v-bind:key="column.field"
45
- class="flex block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
87
+ class="
88
+ flex
89
+ block
90
+ px-4
91
+ py-2
92
+ text-sm text-gray-700
93
+ hover:bg-gray-100
94
+ hover:text-gray-900
95
+ "
46
96
  role="menuitem"
47
97
  >
48
98
  <c-checkbox
@@ -58,7 +108,11 @@
58
108
  <div>
59
109
  <c-button-icon
60
110
  type="white"
61
- :icon="{ name: 'download-solid', type: 'solid', class: 'h-5 w-5 text-gray-400' }"
111
+ :icon="{
112
+ name: 'download-solid',
113
+ type: 'solid',
114
+ class: 'h-5 w-5 text-gray-400',
115
+ }"
62
116
  class="ml-3"
63
117
  ></c-button-icon>
64
118
  </div>
@@ -70,7 +124,9 @@
70
124
  class="border-solid border-2 border-gray-100 rounded-lg overflow-hidden"
71
125
  mode="remote"
72
126
  ref="my-table"
73
- :styleClass="showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'"
127
+ :styleClass="
128
+ showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'
129
+ "
74
130
  row-style-class="focus:outline-none"
75
131
  min-height="400px"
76
132
  :globalSearch="true"
@@ -139,7 +195,11 @@
139
195
  <template slot="table-row" slot-scope="props">
140
196
  <!-- renders if drag and drop is present in table -->
141
197
  <span v-if="props.column.field == 'drag'">
142
- <c-icon name="menu-solid" type="solid" class="h-5 w-5 text-gray-500 handle"></c-icon>
198
+ <c-icon
199
+ name="menu-solid"
200
+ type="solid"
201
+ class="h-5 w-5 text-gray-500 handle"
202
+ ></c-icon>
143
203
  </span>
144
204
  <!-- if customization or adding another form element is required -->
145
205
  <span v-else-if="props.column.customizeColumn">
@@ -163,7 +223,7 @@
163
223
  <!-- Custom loader for table -->
164
224
  <template slot="loadingContent">
165
225
  <svg
166
- class="animate-spin h-10 w-10 ml-auto mr-auto"
226
+ class="animate-spin h-7 w-7 text-white ml-auto mr-auto"
167
227
  xmlns="http://www.w3.org/2000/svg"
168
228
  fill="none"
169
229
  viewBox="0 0 24 24"
@@ -196,7 +256,7 @@ import CButtonIcon from "../CButtonIcon/CButtonIcon.vue";
196
256
  import "vue-good-table/dist/vue-good-table.css";
197
257
  import { VueGoodTable } from "vue-good-table";
198
258
  import Sortable from "@shopify/draggable/lib/es5/sortable.js";
199
- import CInput from '../CInput/CInput.vue';
259
+ import CInput from "../CInput/CInput.vue";
200
260
 
201
261
  export default {
202
262
  name: "CTable",
@@ -298,7 +358,7 @@ export default {
298
358
  return {
299
359
  toggleDropdown: false,
300
360
  showLoader: this.isLoading,
301
- searchTerm: '',
361
+ searchTerm: "",
302
362
  paginationRecords: this.paginationData,
303
363
  reorderedArray: [...this.rows],
304
364
  };
@@ -316,15 +376,19 @@ export default {
316
376
  },
317
377
  // array of rows after drag and drop
318
378
  rearrange(oldIndex, newIndex) {
319
- const movedItem = this.reorderedArray.find((item, index) => index === oldIndex);
320
- const remainingItems = this.reorderedArray.filter((item, index) => index !== oldIndex);
379
+ const movedItem = this.reorderedArray.find(
380
+ (item, index) => index === oldIndex
381
+ );
382
+ const remainingItems = this.reorderedArray.filter(
383
+ (item, index) => index !== oldIndex
384
+ );
321
385
  const reorderedItems = [
322
386
  ...remainingItems.slice(0, newIndex),
323
387
  movedItem,
324
388
  ...remainingItems.slice(newIndex),
325
389
  ];
326
390
  this.reorderedArray = [...reorderedItems];
327
- this.$emit('reordered', this.reorderedArray);
391
+ this.$emit("reordered", this.reorderedArray);
328
392
  },
329
393
  // listing functions
330
394
  sortChange(params) {
package/src/components/CUpload/CUpload.vue CHANGED
@@ -6,10 +6,31 @@
6
6
  :class="errorClasses"
7
7
  class=""
8
8
  id="c-file-area"
9
- @click="uploader.open()"
9
+ @click.prevent="uploader.open()"
10
10
  >
11
- <button type="white" class="inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 focus:ring-indigo-600 ">
12
- {{buttonText}}
11
+ <button
12
+ type="white"
13
+ class="
14
+ inline-flex
15
+ items-center
16
+ px-4
17
+ py-2
18
+ shadow-sm
19
+ text-sm
20
+ font-medium
21
+ rounded-md
22
+ focus:outline-none
23
+ focus:ring-2 focus:ring-offset-2
24
+ disabled:opacity-50
25
+ text-gray-700
26
+ border
27
+ bg-white
28
+ border-gray-300
29
+ hover:bg-gray-50
30
+ focus:ring-indigo-600
31
+ "
32
+ >
33
+ {{ buttonText }}
13
34
  </button>
14
35
  </div>
15
36
  </div>
@@ -30,7 +51,7 @@ import { Uppload, Local, xhrUploader, en, Crop, Unsplash } from "uppload";
30
51
 
31
52
  export default {
32
53
  name: "CUpload",
33
- components: { },
54
+ components: {},
34
55
  props: {
35
56
  buttonText: {
36
57
  type: String,
@@ -64,8 +85,8 @@ export default {
64
85
  },
65
86
  data() {
66
87
  return {
67
- uploader: null
68
- }
88
+ uploader: null,
89
+ };
69
90
  },
70
91
  methods: {
71
92
  initFilestack() {
@@ -109,7 +130,7 @@ export default {
109
130
  this.uploader.on("error", (error) => {
110
131
  console.log("The error message is", error);
111
132
  });
112
- }
133
+ },
113
134
  },
114
135
  computed: {
115
136
  errorClasses() {
@@ -123,7 +144,7 @@ export default {
123
144
  mounted() {
124
145
  if (this.type === "filestack") {
125
146
  this.initFilestack();
126
- } else if(this.type == "default") {
147
+ } else if (this.type == "default") {
127
148
  this.initUppload();
128
149
  }
129
150
  },