@tak-ps/vue-tabler 3.52.0 → 3.53.1

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.
package/CHANGELOG.md CHANGED
@@ -10,6 +10,14 @@
10
10
 
11
11
  ## Version History
12
12
 
13
+ ### v3.53.1
14
+
15
+ - :bug: Fix error status on Input component
16
+
17
+ ### v3.53.0
18
+
19
+ - :rocket: Passthrough Autocomplete on input
20
+
13
21
  ### v3.52.0
14
22
 
15
23
  - :rocket: Allow string dates in Epoch components
@@ -1,34 +1,64 @@
1
1
  <template>
2
- <div class='card-body'>
3
- <div class='d-flex justify-content-center' :class='{
4
- "mt-4 mb-2": !compact
5
- }'>
6
- <IconAlertTriangle v-if='compact' :size='32' :stroke='1' />
7
- <IconAlertTriangle v-else :size='48' :stroke='1'/>
8
- </div>
2
+ <div class='card-body'>
3
+ <div
4
+ class='d-flex justify-content-center'
5
+ :class='{
6
+ "mt-4 mb-2": !compact
7
+ }'
8
+ >
9
+ <IconAlertTriangle
10
+ v-if='compact'
11
+ :size='32'
12
+ :stroke='1'
13
+ />
14
+ <IconAlertTriangle
15
+ v-else
16
+ :size='48'
17
+ :stroke='1'
18
+ />
19
+ </div>
9
20
 
10
- <h3 class='pt-3 text-center' v-text='title'></h3>
11
- <div class='text-center' :class='{
12
- "mb-4 mt-2": !compact
13
- }'>
14
- <div><span v-text='err.message'/></div>
15
- </div>
21
+ <h3
22
+ class='pt-3 text-center'
23
+ v-text='title'
24
+ />
25
+ <div
26
+ class='text-center'
27
+ :class='{
28
+ "mb-4 mt-2": !compact
29
+ }'
30
+ >
31
+ <div><span v-text='err.message' /></div>
32
+ </div>
16
33
 
17
- <template v-if='err.body || err.stack'>
18
- <div class="py-2 px-3">
19
- <div @click='open = !open' class='subheader d-flex align-items-center cursor-pointer'>
20
- <IconChevronRight v-if='!open' :size='24' :stroke='1' class='cursor-pointer'/>
21
- <IconChevronDown v-else :size='24' :stroke='1' class='cursor-pointer'/>
22
- <span>Advanced</span>
34
+ <template v-if='err.body || err.stack'>
35
+ <div class='py-2 px-3'>
36
+ <div
37
+ class='subheader d-flex align-items-center cursor-pointer'
38
+ @click='open = !open'
39
+ >
40
+ <IconChevronRight
41
+ v-if='!open'
42
+ :size='24'
43
+ :stroke='1'
44
+ class='cursor-pointer'
45
+ />
46
+ <IconChevronDown
47
+ v-else
48
+ :size='24'
49
+ :stroke='1'
50
+ class='cursor-pointer'
51
+ />
52
+ <span>Advanced</span>
53
+ </div>
54
+ <pre
55
+ v-if='open'
56
+ class='my-3'
57
+ v-text='err.body || err.stack'
58
+ />
23
59
  </div>
24
- <pre
25
- v-if='open'
26
- v-text='err.body || err.stack'
27
- class='my-3'
28
- />
29
- </div>
30
- </template>
31
- </div>
60
+ </template>
61
+ </div>
32
62
  </template>
33
63
 
34
64
  <script>
@@ -1,19 +1,40 @@
1
1
  <template>
2
- <ol class="breadcrumb" aria-label="breadcrumbs">
3
- <li class="breadcrumb-item"><a @click='$router.push("/")' class='cursor-pointer'>Home</a></li>
4
- <li
5
- :key='crumb_it'
6
- v-for='(crumb, crumb_it) in crumbs'
7
- class="breadcrumb-item"
8
- :class='{
9
- "active": crumb_it === crumbs.length - 1
10
- }'
2
+ <ol
3
+ class='breadcrumb'
4
+ aria-label='breadcrumbs'
11
5
  >
12
- <a v-if='crumb_it === crumbs.length - 1' v-text='crumb'></a>
13
- <a v-else-if='normalize' @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/").toLowerCase())' class='cursor-pointer' v-text='crumb'></a>
14
- <a v-else @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/"))' class='cursor-pointer' v-text='crumb'></a>
15
- </li>
16
- </ol>
6
+ <li class='breadcrumb-item'>
7
+ <a
8
+ class='cursor-pointer'
9
+ @click='$router.push("/")'
10
+ >Home</a>
11
+ </li>
12
+ <li
13
+ v-for='(crumb, crumb_it) in crumbs'
14
+ :key='crumb_it'
15
+ class='breadcrumb-item'
16
+ :class='{
17
+ "active": crumb_it === crumbs.length - 1
18
+ }'
19
+ >
20
+ <a
21
+ v-if='crumb_it === crumbs.length - 1'
22
+ v-text='crumb'
23
+ />
24
+ <a
25
+ v-else-if='normalize'
26
+ class='cursor-pointer'
27
+ @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/").toLowerCase())'
28
+ v-text='crumb'
29
+ />
30
+ <a
31
+ v-else
32
+ class='cursor-pointer'
33
+ @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/"))'
34
+ v-text='crumb'
35
+ />
36
+ </li>
37
+ </ol>
17
38
  </template>
18
39
 
19
40
  <script>
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <span v-text='display'/>
2
+ <span v-text='display' />
3
3
  </template>
4
4
 
5
5
  <script>
@@ -1,33 +1,58 @@
1
1
  <template>
2
- <div>
3
- <template v-if='displaytype === "button"'>
4
- <div @click.stop.prevent='modal = true' class="btn btn-outline-danger">
5
- <span v-text='label'/>
6
- </div>
7
- </template>
8
- <template v-else>
9
- <IconTrash @click.stop.prevent='modal = true' :size='size' :stroke='1' class='cursor-pointer'/>
10
- </template>
2
+ <div>
3
+ <template v-if='displaytype === "button"'>
4
+ <div
5
+ class='btn btn-outline-danger'
6
+ @click.stop.prevent='modal = true'
7
+ >
8
+ <span v-text='label' />
9
+ </div>
10
+ </template>
11
+ <template v-else>
12
+ <IconTrash
13
+ :size='size'
14
+ :stroke='1'
15
+ class='cursor-pointer'
16
+ @click.stop.prevent='modal = true'
17
+ />
18
+ </template>
11
19
 
12
- <TablerModal v-if='modal'>
13
- <button type="button" class="btn-close" @click='modal = false' aria-label="Close"></button>
14
- <div class="modal-status bg-red"></div>
15
- <div class="modal-header text-center py-4">
16
- Deletion Confirmation
17
- </div>
18
- <div class="modal-body text-center py-4">
19
- Are you sure you wish to perform this deletion?
20
- </div>
21
- <div class="modal-footer">
22
- <div @click='$emit("delete")' class="btn btn-danger">
23
- <TablerLoading v-if='loading' :inline='true'/>
24
- <template v-else>
25
- <IconTrash :size='32' :stroke='1'/><span class='mx-2' v-text='label'/>
26
- </template>
20
+ <TablerModal v-if='modal'>
21
+ <button
22
+ type='button'
23
+ class='btn-close'
24
+ aria-label='Close'
25
+ @click='modal = false'
26
+ />
27
+ <div class='modal-status bg-red' />
28
+ <div class='modal-header text-center py-4'>
29
+ Deletion Confirmation
30
+ </div>
31
+ <div class='modal-body text-center py-4'>
32
+ Are you sure you wish to perform this deletion?
27
33
  </div>
28
- </div>
29
- </TablerModal>
30
- </div>
34
+ <div class='modal-footer'>
35
+ <div
36
+ class='btn btn-danger'
37
+ @click='$emit("delete")'
38
+ >
39
+ <TablerLoading
40
+ v-if='loading'
41
+ :inline='true'
42
+ />
43
+ <template v-else>
44
+ <IconTrash
45
+ :size='32'
46
+ :stroke='1'
47
+ /><span
48
+ class='mx-2'
49
+ v-text='label'
50
+ />
51
+ </template>
52
+ </div>
53
+ </div>
54
+ </TablerModal>
55
+ </div>
31
56
  </template>
32
57
 
33
58
  <script>
@@ -39,6 +64,11 @@ import {
39
64
 
40
65
  export default {
41
66
  name: 'TablerDelete',
67
+ components: {
68
+ IconTrash,
69
+ TablerLoading,
70
+ TablerModal
71
+ },
42
72
  props: {
43
73
  label: {
44
74
  type: String,
@@ -53,6 +83,9 @@ export default {
53
83
  default: 'button' // Or icon
54
84
  }
55
85
  },
86
+ emits: [
87
+ 'delete'
88
+ ],
56
89
  data: function() {
57
90
  return {
58
91
  loading: false,
@@ -64,11 +97,6 @@ export default {
64
97
  this.loading = true;
65
98
  this.$emit('delete')
66
99
  }
67
- },
68
- components: {
69
- IconTrash,
70
- TablerLoading,
71
- TablerModal
72
100
  }
73
101
  }
74
102
  </script>
@@ -1,16 +1,28 @@
1
1
  <template>
2
- <div class="dropdown">
3
- <div type="button" :id='id' data-bs-toggle="dropdown" aria-expanded="false">
4
- <slot>
5
- <IconSettings :size='32' :stoke='1' class='cursor-pointer'/>
6
- </slot>
2
+ <div class='dropdown'>
3
+ <div
4
+ :id='id'
5
+ type='button'
6
+ data-bs-toggle='dropdown'
7
+ aria-expanded='false'
8
+ >
9
+ <slot>
10
+ <IconSettings
11
+ :size='32'
12
+ :stoke='1'
13
+ class='cursor-pointer'
14
+ />
15
+ </slot>
16
+ </div>
17
+ <ul
18
+ class='dropdown-menu w-100'
19
+ :aria-labelledby='id'
20
+ >
21
+ <slot name='dropdown'>
22
+ Dropdown Content
23
+ </slot>
24
+ </ul>
7
25
  </div>
8
- <ul class="dropdown-menu w-100" :aria-labelledby='id'>
9
- <slot name='dropdown'>
10
- Dropdown Content
11
- </slot>
12
- </ul>
13
- </div>
14
26
  </template>
15
27
 
16
28
  <script>
@@ -20,13 +32,13 @@ import {
20
32
 
21
33
  export default {
22
34
  name: 'TablerDropdown',
35
+ components: {
36
+ IconSettings
37
+ },
23
38
  data: function() {
24
39
  return {
25
40
  id: 'tabler-dropdown-' + Math.random().toString(36).substr(2, 9) + '-' + Date.now().toString(36)
26
41
  }
27
- },
28
- components: {
29
- IconSettings
30
42
  }
31
43
  }
32
44
  </script>
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <span v-text='display'/>
2
+ <span v-text='display' />
3
3
  </template>
4
4
 
5
5
  <script>
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <span v-text='display'/>
2
+ <span v-text='display' />
3
3
  </template>
4
4
 
5
5
  <script>
@@ -1,14 +1,27 @@
1
1
  <template>
2
2
  <Modal>
3
- <button type="button" class="btn-close" @click='close' aria-label="Close"></button>
4
- <div class="modal-status bg-yellow"></div>
3
+ <button
4
+ type='button'
5
+ class='btn-close'
6
+ aria-label='Close'
7
+ @click='close'
8
+ />
9
+ <div class='modal-status bg-yellow' />
5
10
 
6
- <Alert :title='title' :err='err'/>
11
+ <Alert
12
+ :title='title'
13
+ :err='err'
14
+ />
7
15
 
8
- <div class="modal-footer">
9
- <div class="w-100">
10
- <div class="row">
11
- <div class="col"><a @click='close' class="cursor-pointer btn w-100">OK</a></div>
16
+ <div class='modal-footer'>
17
+ <div class='w-100'>
18
+ <div class='row'>
19
+ <div class='col'>
20
+ <a
21
+ class='cursor-pointer btn w-100'
22
+ @click='close'
23
+ >OK</a>
24
+ </div>
12
25
  </div>
13
26
  </div>
14
27
  </div>
@@ -21,6 +34,10 @@ import Alert from './Alert.vue';
21
34
 
22
35
  export default {
23
36
  name: 'TablerErr',
37
+ components: {
38
+ Alert,
39
+ Modal
40
+ },
24
41
  props: {
25
42
  err: {
26
43
  type: Error,
@@ -35,6 +52,9 @@ export default {
35
52
  default: true
36
53
  }
37
54
  },
55
+ emits: [
56
+ 'close'
57
+ ],
38
58
  data: function() {
39
59
  return {
40
60
  open: false
@@ -44,10 +64,6 @@ export default {
44
64
  close: function() {
45
65
  this.$emit('close');
46
66
  },
47
- },
48
- components: {
49
- Alert,
50
- Modal
51
67
  }
52
68
  }
53
69
  </script>
@@ -1,17 +1,33 @@
1
1
  <template>
2
2
  <Modal>
3
- <button type="button" class="btn-close" @click='close' aria-label="Close"></button>
4
- <div class="modal-status bg-yellow"></div>
5
- <div class="modal-header d-flex">
6
- <span class='modal-title' v-text='label'></span>
3
+ <button
4
+ type='button'
5
+ class='btn-close'
6
+ aria-label='Close'
7
+ @click='close'
8
+ />
9
+ <div class='modal-status bg-yellow' />
10
+ <div class='modal-header d-flex'>
11
+ <span
12
+ class='modal-title'
13
+ v-text='label'
14
+ />
7
15
  </div>
8
- <div class="modal-body text-center py-4">
9
- <div class="text-muted" v-text='description'></div>
16
+ <div class='modal-body text-center py-4'>
17
+ <div
18
+ class='text-muted'
19
+ v-text='description'
20
+ />
10
21
  </div>
11
- <div class="modal-footer">
12
- <div class="w-100">
13
- <div class="row">
14
- <div class="col"><a @click='close' class="cursor-pointer btn w-100">OK</a></div>
22
+ <div class='modal-footer'>
23
+ <div class='w-100'>
24
+ <div class='row'>
25
+ <div class='col'>
26
+ <a
27
+ class='cursor-pointer btn w-100'
28
+ @click='close'
29
+ >OK</a>
30
+ </div>
15
31
  </div>
16
32
  </div>
17
33
  </div>
@@ -23,6 +39,9 @@ import Modal from './Modal.vue';
23
39
 
24
40
  export default {
25
41
  name: 'TablerHelp',
42
+ components: {
43
+ Modal,
44
+ },
26
45
  props: {
27
46
  label: {
28
47
  type: String,
@@ -34,13 +53,13 @@ export default {
34
53
  require: true
35
54
  }
36
55
  },
56
+ emits: [
57
+ 'close'
58
+ ],
37
59
  methods: {
38
60
  close: function() {
39
61
  this.$emit('close');
40
62
  }
41
- },
42
- components: {
43
- Modal,
44
63
  }
45
64
  }
46
65
  </script>
@@ -1,34 +1,68 @@
1
1
  <template>
2
- <div class="dropdown">
3
- <label
4
- v-if='label'
5
- class='form-label'
6
- :class='{
7
- "required": required
8
- }'
9
- v-text='label'
10
- ></label>
11
- <div type="button" ref='button' id="list-menu-button" data-bs-toggle="dropdown" aria-expanded="false" class='border rounded' style='height: 36px;'>
12
- <div class='d-flex mx-2'>
13
- <span v-if='ele' style='padding-top: 6px;' v-text='ele[namekey]'/>
14
- <span v-else style='padding-top: 6px;'>Select <span v-text='label'/></span>
2
+ <div class='dropdown'>
3
+ <label
4
+ v-if='label'
5
+ class='form-label'
6
+ :class='{
7
+ "required": required
8
+ }'
9
+ v-text='label'
10
+ />
11
+ <div
12
+ id='list-menu-button'
13
+ ref='button'
14
+ type='button'
15
+ data-bs-toggle='dropdown'
16
+ aria-expanded='false'
17
+ class='border rounded'
18
+ style='height: 36px;'
19
+ >
20
+ <div class='d-flex mx-2'>
21
+ <span
22
+ v-if='ele'
23
+ style='padding-top: 6px;'
24
+ v-text='ele[namekey]'
25
+ />
26
+ <span
27
+ v-else
28
+ style='padding-top: 6px;'
29
+ >Select <span v-text='label' /></span>
15
30
 
16
- <div class='ms-auto'>
17
- <IconSettings :size='32' :stroke='1' style='margin-top: 4px;'/>
31
+ <div class='ms-auto'>
32
+ <IconSettings
33
+ :size='32'
34
+ :stroke='1'
35
+ style='margin-top: 4px;'
36
+ />
37
+ </div>
18
38
  </div>
19
39
  </div>
20
- </div>
21
- <ul class="dropdown-menu" aria-labelledby="list-menu-button" :style='{
22
- "width": `${buttonHeight}px`
23
- }'>
24
- <div class='m-1'>
25
- <TablerInput :disabled='disabled' placeholder='Name' v-model='filter'/>
26
- <div @click='select(ele)' :key='ele.id' v-for='ele in list[listkey]'>
27
- <div class="d-flex align-items-center my-1 cursor-pointer" v-text='ele[namekey]'></div>
40
+ <ul
41
+ class='dropdown-menu'
42
+ aria-labelledby='list-menu-button'
43
+ :style='{
44
+ "width": `${buttonHeight}px`
45
+ }'
46
+ >
47
+ <div class='m-1'>
48
+ <TablerInput
49
+ v-model='filter'
50
+ :disabled='disabled'
51
+ placeholder='Name'
52
+ />
53
+ <div
54
+ v-for='ele in list[listkey]'
55
+ :key='ele.id'
56
+ @click='select(ele)'
57
+ >
58
+ <div
59
+ class='d-flex align-items-center my-1 cursor-pointer'
60
+ v-text='ele[namekey]'
61
+ />
62
+ </div>
28
63
  </div>
29
- </div>
30
- </ul>
31
- </div>
64
+ </ul>
65
+ </div>
32
66
  </template>
33
67
 
34
68
  <script>
@@ -39,6 +73,10 @@ import {
39
73
 
40
74
  export default {
41
75
  name: 'TablerList',
76
+ components: {
77
+ IconSettings,
78
+ TablerInput
79
+ },
42
80
  props: {
43
81
  url: String,
44
82
  listkey: String,
@@ -61,6 +99,9 @@ export default {
61
99
  default: 10
62
100
  },
63
101
  },
102
+ emits: [
103
+ 'selected'
104
+ ],
64
105
  data: function() {
65
106
  return {
66
107
  ele: null,
@@ -69,6 +110,13 @@ export default {
69
110
  list: {}
70
111
  }
71
112
  },
113
+ computed: {
114
+ buttonHeight() {
115
+ if(!this.isMounted) return 100;
116
+ const buttonDOM = this.$refs.button
117
+ return buttonDOM ? buttonDOM.offsetWidth : 100;
118
+ },
119
+ },
72
120
  watch: {
73
121
  ele: function() {
74
122
  this.filter = '';
@@ -82,13 +130,6 @@ export default {
82
130
  await this.fetchList();
83
131
  this.isMounted = true;
84
132
  },
85
- computed: {
86
- buttonHeight() {
87
- if(!this.isMounted) return 100;
88
- const buttonDOM = this.$refs.button
89
- return buttonDOM ? buttonDOM.offsetWidth : 100;
90
- },
91
- },
92
133
  methods: {
93
134
  select: function(ele) {
94
135
  this.ele = ele;
@@ -101,10 +142,6 @@ export default {
101
142
  url.searchParams.append('limit', this.limit);
102
143
  this.list = await window.std(url);
103
144
  }
104
- },
105
- components: {
106
- IconSettings,
107
- TablerInput
108
145
  }
109
146
  }
110
147
  </script>