@gorse/shards-vue 1.0.8 → 2.0.0

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 (56) hide show
  1. package/README.md +8 -5
  2. package/build/optimize.js +27 -15
  3. package/build/rollup.config.js +28 -38
  4. package/dist/shards-vue.common.js +3639 -6083
  5. package/dist/shards-vue.common.js.map +1 -1
  6. package/dist/shards-vue.common.min.js +27 -1
  7. package/dist/shards-vue.common.min.map +1 -1
  8. package/dist/shards-vue.esm.js +3637 -6081
  9. package/dist/shards-vue.esm.js.map +1 -1
  10. package/dist/shards-vue.esm.min.js +27 -1
  11. package/dist/shards-vue.esm.min.map +1 -1
  12. package/dist/shards-vue.umd.js +3641 -6086
  13. package/dist/shards-vue.umd.js.map +1 -1
  14. package/dist/shards-vue.umd.min.js +27 -1
  15. package/dist/shards-vue.umd.min.map +1 -1
  16. package/package.json +24 -25
  17. package/sandbox/Sandbox.vue +1 -17
  18. package/sandbox/index.html +12 -0
  19. package/sandbox/main.js +7 -0
  20. package/sandbox/vite.config.js +6 -0
  21. package/src/components/alert/Alert.vue +20 -11
  22. package/src/components/button/Button.vue +1 -0
  23. package/src/components/button/ButtonClose.vue +1 -0
  24. package/src/components/collapse/Collapse.vue +17 -9
  25. package/src/components/datepicker/Datepicker.vue +335 -36
  26. package/src/components/datepicker/README.md +1 -1
  27. package/src/components/dropdown/Dropdown.vue +9 -10
  28. package/src/components/form-checkbox/FormCheckbox.vue +52 -39
  29. package/src/components/form-input/FormInput.vue +13 -4
  30. package/src/components/form-radio/FormRadio.vue +15 -9
  31. package/src/components/form-select/FormSelect.vue +11 -2
  32. package/src/components/form-textarea/FormTextarea.vue +50 -22
  33. package/src/components/input-group/README.md +24 -12
  34. package/src/components/link/Link.vue +4 -8
  35. package/src/components/modal/Modal.vue +6 -4
  36. package/src/components/modal/README.md +2 -2
  37. package/src/components/navbar/NavbarToggle.vue +1 -1
  38. package/src/components/navbar/README.md +5 -3
  39. package/src/components/popover/Popover.vue +3 -2
  40. package/src/components/popover/README.md +3 -3
  41. package/src/components/slider/Slider.vue +13 -4
  42. package/src/components/tabs/Tab.vue +19 -2
  43. package/src/components/tabs/Tabs.vue +42 -6
  44. package/src/components/tabs/_TabButton.vue +1 -0
  45. package/src/components/tooltip/Tooltip.vue +3 -1
  46. package/src/directives/click-away.js +39 -0
  47. package/src/directives/toggle/toggle.js +12 -7
  48. package/src/directives/tooltip/tooltip.js +6 -11
  49. package/src/index.js +8 -6
  50. package/src/markdown/getting-started/README.md +6 -4
  51. package/src/mixins/checkbox-radio.mixin.js +5 -6
  52. package/src/mixins/root-listener.mixin.js +12 -6
  53. package/src/mixins/tooltip-popover.mixin.js +1 -1
  54. package/src/utils/events.js +66 -0
  55. package/src/utils/index.js +20 -18
  56. package/src/utils/target.js +23 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gorse/shards-vue",
3
- "version": "1.0.8",
3
+ "version": "2.0.0",
4
4
  "packageManager": "pnpm@10.33.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -25,7 +25,7 @@
25
25
  "scripts": {
26
26
  "build": "pnpm run clean && rollup -c build/rollup.config.js && pnpm run optimize && pnpm run bundlesize",
27
27
  "optimize": "node ./build/optimize.js",
28
- "watch": "vue serve sandbox/Sandbox.vue",
28
+ "watch": "vite --host 0.0.0.0 sandbox",
29
29
  "clean": "rimraf dist/*",
30
30
  "bundlesize": "bundlesize"
31
31
  },
@@ -42,7 +42,7 @@
42
42
  "Free",
43
43
  "Vue",
44
44
  "VueJS",
45
- "Vue2",
45
+ "Vue3",
46
46
  "WebComponents",
47
47
  "jquery",
48
48
  "Popper.js",
@@ -78,44 +78,43 @@
78
78
  "bundlesize": [
79
79
  {
80
80
  "path": "./dist/shards-vue.common.min.js",
81
- "maxSize": "50 KB"
81
+ "maxSize": "60 KB"
82
82
  },
83
83
  {
84
84
  "path": "./dist/shards-vue.esm.min.js",
85
- "maxSize": "50 KB"
85
+ "maxSize": "60 KB"
86
86
  },
87
87
  {
88
88
  "path": "./dist/shards-vue.umd.min.js",
89
- "maxSize": "45 KB"
89
+ "maxSize": "58 KB"
90
90
  }
91
91
  ],
92
92
  "dependencies": {
93
+ "@gorse/shards-ui": "^3.0.1",
94
+ "@vuepic/vue-datepicker": "^14.0.0",
93
95
  "bootstrap": "^4.1.3",
94
96
  "lodash.xor": "^4.5.0",
95
97
  "nouislider": "^11.1.0",
96
- "popper.js": "^1.14.4",
97
- "@gorse/shards-ui": "^3.0.1",
98
- "vue-clickaway": "^2.2.2",
99
- "vuejs-datepicker": "^1.5.3"
98
+ "popper.js": "^1.14.4"
99
+ },
100
+ "peerDependencies": {
101
+ "vue": "^3.5.0"
100
102
  },
101
103
  "devDependencies": {
102
- "@vue/cli": "4.5.19",
103
- "@vue/cli-service-global": "4.5.19",
104
+ "@rollup/plugin-commonjs": "^29.0.3",
105
+ "@rollup/plugin-node-resolve": "^16.0.3",
106
+ "@vitejs/plugin-vue": "^6.0.7",
107
+ "@vue/compiler-sfc": "^3.5.35",
104
108
  "bundlesize": "1.0.0-beta.2",
105
109
  "chalk": "^2.4.1",
106
- "clean-css": "^4.1.11",
107
- "glob": "^7.1.3",
108
- "rimraf": "^2.6.2",
109
- "rollup": "^0.63.4",
110
- "rollup-plugin-buble": "^0.19.2",
111
- "rollup-plugin-commonjs": "^9.1.6",
112
- "rollup-plugin-node-resolve": "^3.3.0",
113
- "rollup-plugin-uglify": "^4.0.0",
114
- "rollup-plugin-vue": "^5.1.9",
110
+ "postcss": "^8.5.15",
111
+ "rimraf": "^6.1.3",
112
+ "rollup": "^4.61.1",
113
+ "rollup-plugin-postcss": "^4.0.2",
114
+ "rollup-plugin-vue": "^6.0.0",
115
115
  "sass": "^1.93.3",
116
- "sass-loader": "^7.1.0",
117
- "uglify-es": "^3.3.9",
118
- "uglify-js": "^3.4.8",
119
- "vue-template-compiler": "^2.5.21"
116
+ "terser": "^5.48.0",
117
+ "vite": "^8.0.16",
118
+ "vue": "^3.5.35"
120
119
  }
121
120
  }
package/sandbox/Sandbox.vue CHANGED
@@ -13,23 +13,7 @@
13
13
  * Check out the comments below to understand what's going on!
14
14
  */
15
15
 
16
- // First we're importing Vue
17
- // eslint-disable-next-line
18
- import Vue from 'vue'
19
-
20
- // We're also importing Bootstrap's and Shards' styles
21
- import 'bootstrap/dist/css/bootstrap.css'
22
- import 'shards-ui/dist/css/shards.css'
23
-
24
- // We're importing one of Shards Vue's components and registering it as a Vue Plugin
25
- // eslint-disable-next-line
26
- import { Button } from '../src/components'
27
-
28
- // Uncomment this line in case you'd like to use the component as a plugin
29
- // Vue.use(Button)
30
-
31
- // ALTERNATIVE: Import the component directly.
32
- import dButton from '../src/components/button/Button'
16
+ import dButton from '../src/components/button/Button.vue'
33
17
 
34
18
  // We define our custom component's logic.
35
19
  export default {
package/sandbox/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Shards Vue Sandbox</title>
7
+ </head>
8
+ <body>
9
+ <div id="app"></div>
10
+ <script type="module" src="/main.js"></script>
11
+ </body>
12
+ </html>
package/sandbox/main.js ADDED
@@ -0,0 +1,7 @@
1
+ import { createApp } from 'vue'
2
+ import Sandbox from './Sandbox.vue'
3
+
4
+ import 'bootstrap/dist/css/bootstrap.css'
5
+ import '@gorse/shards-ui/dist/css/shards.css'
6
+
7
+ createApp(Sandbox).mount('#app')
package/sandbox/vite.config.js ADDED
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from 'vite'
2
+ import vue from '@vitejs/plugin-vue'
3
+
4
+ export default defineConfig({
5
+ plugins: [vue()]
6
+ })
package/src/components/alert/Alert.vue CHANGED
@@ -25,6 +25,7 @@ export default {
25
25
  components: {
26
26
  dButtonClose
27
27
  },
28
+ emits: ['update:modelValue', 'update:show', 'input', ALERT_EVENTS.DISMISSED, ALERT_EVENTS.DISMISS_COUNTDOWN],
28
29
  props: {
29
30
  /**
30
31
  * Alert color theme.
@@ -51,15 +52,15 @@ export default {
51
52
  /**
52
53
  * Show state or duration.
53
54
  */
55
+ modelValue: {
56
+ type: [Boolean, Number, String],
57
+ default: undefined
58
+ },
54
59
  show: {
55
60
  type: [Boolean, Number, String],
56
61
  default: false
57
62
  }
58
63
  },
59
- model: {
60
- prop: 'show',
61
- event: 'input'
62
- },
63
64
  data() {
64
65
  return {
65
66
  timer: null,
@@ -67,19 +68,22 @@ export default {
67
68
  }
68
69
  },
69
70
  watch: {
70
- show() {
71
+ computedShowValue() {
71
72
  this.showChanged();
72
73
  }
73
74
  },
74
75
  mounted() {
75
76
  this.showChanged();
76
77
  },
77
- destroyed() {
78
+ beforeUnmount() {
78
79
  this.clearCounter();
79
80
  },
80
81
  computed: {
82
+ computedShowValue() {
83
+ return this.modelValue !== undefined ? this.modelValue : this.show
84
+ },
81
85
  computedShow() {
82
- return !this.dismissed && (this.timer || this.show);
86
+ return !this.dismissed && (this.timer || this.computedShowValue);
83
87
  }
84
88
  },
85
89
  methods: {
@@ -101,10 +105,11 @@ export default {
101
105
  * @type {Boolean}
102
106
  */
103
107
  this.$emit(ALERT_EVENTS.DISMISSED);
108
+ this.$emit('update:modelValue', false);
109
+ this.$emit('update:show', false);
104
110
  this.$emit('input', false);
105
111
 
106
- if (typeof this.show === 'boolean') {
107
- this.$emit('input', false);
112
+ if (typeof this.computedShowValue === 'boolean') {
108
113
  return;
109
114
  }
110
115
 
@@ -115,6 +120,8 @@ export default {
115
120
  * @type {Number}
116
121
  */
117
122
  this.$emit(ALERT_EVENTS.DISMISS_COUNTDOWN, 0);
123
+ this.$emit('update:modelValue', 0);
124
+ this.$emit('update:show', 0);
118
125
  this.$emit('input', 0);
119
126
  },
120
127
 
@@ -122,10 +129,10 @@ export default {
122
129
  this.clearCounter();
123
130
  this.dismissed = false;
124
131
 
125
- if (typeof this.show === 'boolean' || this.show === null || this.show === 0)
132
+ if (typeof this.computedShowValue === 'boolean' || this.computedShowValue === null || this.computedShowValue === 0)
126
133
  return
127
134
 
128
- let dismissTimer = this.show;
135
+ let dismissTimer = this.computedShowValue;
129
136
  this.timer = setInterval(() => {
130
137
  if (dismissTimer < 1) {
131
138
  this.dismiss();
@@ -141,6 +148,8 @@ export default {
141
148
  * @type {Number}
142
149
  */
143
150
  this.$emit(ALERT_EVENTS.DISMISS_COUNTDOWN, dismissTimer);
151
+ this.$emit('update:modelValue', dismissTimer);
152
+ this.$emit('update:show', dismissTimer);
144
153
  this.$emit('input', dismissTimer);
145
154
  }, 1000);
146
155
  }
package/src/components/button/Button.vue CHANGED
@@ -20,6 +20,7 @@ import { THEMECOLORS } from '../../utils/constants'
20
20
 
21
21
  export default {
22
22
  name: 'd-button',
23
+ emits: ['click'],
23
24
  props: {
24
25
  /**
25
26
  * The theme style.
package/src/components/button/ButtonClose.vue CHANGED
@@ -10,6 +10,7 @@
10
10
  <script>
11
11
  export default {
12
12
  name: 'd-button-close',
13
+ emits: ['click'],
13
14
  props: {
14
15
  /**
15
16
  * Whether it should be displayed as disabled, or not.
package/src/components/collapse/Collapse.vue CHANGED
@@ -27,6 +27,7 @@ import rootListenerMixin from '../../mixins/root-listener.mixin'
27
27
  export default {
28
28
  name: 'd-collapse',
29
29
  mixins: [ rootListenerMixin ],
30
+ emits: ['update:modelValue', 'update:visible', 'input', 'show', 'shown', 'hide', 'hidden'],
30
31
  props: {
31
32
  /**
32
33
  * The component ID.
@@ -45,6 +46,10 @@ export default {
45
46
  /**
46
47
  * The visibility state.
47
48
  */
49
+ modelValue: {
50
+ type: Boolean,
51
+ default: undefined
52
+ },
48
53
  visible: {
49
54
  type: Boolean,
50
55
  default: false
@@ -64,12 +69,8 @@ export default {
64
69
  default: null
65
70
  }
66
71
  },
67
- model: {
68
- prop: 'visible',
69
- event: 'input'
70
- },
71
72
  watch: {
72
- visible(newVal) {
73
+ computedVisible(newVal) {
73
74
  if (newVal !== this.show) {
74
75
  this.show = newVal
75
76
  }
@@ -82,17 +83,24 @@ export default {
82
83
  },
83
84
  data() {
84
85
  return {
85
- show: this.visible,
86
+ show: this.modelValue !== undefined ? this.modelValue : this.visible,
86
87
  transitioning: false
87
88
  }
88
89
  },
90
+ computed: {
91
+ computedVisible() {
92
+ return this.modelValue !== undefined ? this.modelValue : this.visible
93
+ }
94
+ },
89
95
  methods: {
90
96
  toggle() {
91
97
  this.show = !this.show
92
98
  },
93
99
  emitStateChange() {
100
+ this.$emit('update:modelValue', this.show)
101
+ this.$emit('update:visible', this.show)
94
102
  this.$emit('input', this.show)
95
- this.$root.$emit('state', this.id, this.show)
103
+ this.emitOnRoot(COLLAPSE_EVENTS.STATE, this.id, this.show)
96
104
 
97
105
  if (this.accordion && this.show) {
98
106
  /**
@@ -100,7 +108,7 @@ export default {
100
108
  *
101
109
  * @event accordion-collapse
102
110
  */
103
- this.$root.$emit(COLLAPSE_EVENTS.ACCORDION, this.id, this.accordion)
111
+ this.emitOnRoot(COLLAPSE_EVENTS.ACCORDION, this.id, this.accordion)
104
112
  }
105
113
 
106
114
  },
@@ -199,7 +207,7 @@ export default {
199
207
 
200
208
  this.emitStateChange()
201
209
  },
202
- beforeDestroy() {
210
+ beforeUnmount() {
203
211
  if (this.isNav && typeof document !== 'undefined') {
204
212
  window.removeEventListener('resize', this.handleResize, false)
205
213
  window.removeEventListener('orientationchange', this.handleResize, false)