@veritree/ui 0.3.1 → 0.4.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 (11) hide show
  1. package/index.js +2 -0
  2. package/package.json +1 -1
  3. package/src/Button/VTButtonSave.vue +1 -1
  4. package/src/Dialog/VTDialogClose.vue +5 -6
  5. package/src/Dialog/VTDialogContent.vue +2 -2
  6. package/src/Dialog/VTDialogHeader.vue +5 -5
  7. package/src/Dialog/VTDialogMain.vue +4 -4
  8. package/src/Dialog/VTDialogOverlay.vue +1 -1
  9. package/src/Dialog/VTDialogTitle.vue +26 -0
  10. package/src/Drawer/VTDrawerClose.vue +1 -1
  11. package/src/Modal/VTModal.vue +1 -1
package/index.js CHANGED
@@ -37,6 +37,7 @@ import VTDialogFooter from './src/Dialog/VTDialogFooter.vue';
37
37
  import VTDialogHeader from './src/Dialog/VTDialogHeader.vue';
38
38
  import VTDialogMain from './src/Dialog/VTDialogMain.vue';
39
39
  import VTDialogOverlay from './src/Dialog/VTDialogOverlay.vue';
40
+ import VTDialogTitle from './src/Dialog/VTDialogTitle.vue';
40
41
 
41
42
  import VTDrawer from './src/Drawer/VTDrawer.vue';
42
43
  import VTDrawerClose from './src/Drawer/VTDrawerClose.vue';
@@ -84,5 +85,6 @@ export {
84
85
  VTDialogHeader,
85
86
  VTDialogMain,
86
87
  VTDialogOverlay,
88
+ VTDialogTitle,
87
89
  }
88
90
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veritree/ui",
3
- "version": "0.3.1",
3
+ "version": "0.4.0",
4
4
  "description": "veritree ui library",
5
5
  "type": "module",
6
6
  "main": "index.js",
package/src/Button/VTButtonSave.vue CHANGED
@@ -11,7 +11,7 @@
11
11
  </template>
12
12
 
13
13
  <script>
14
- import VTButton from './VTButton.vue';
14
+ import VTButton from '../Button/VTButton.vue';
15
15
  import VTSpinner from '../Spinner/VTSpinner.vue';
16
16
 
17
17
  export default {
package/src/Dialog/VTDialogClose.vue CHANGED
@@ -3,7 +3,6 @@
3
3
  variant="icon"
4
4
  :class="{
5
5
  'Dialog-close': headless,
6
- 'absolute right-4 top-4': !headless,
7
6
  }"
8
7
  :theme="theme"
9
8
  @click.prevent="hide"
@@ -12,15 +11,15 @@
12
11
  </template>
13
12
 
14
13
  <script>
15
- import { IconClose } from '@veritree/icons';
16
- import VTButton from './VTButton.vue';
14
+ import { IconClose } from "@veritree/icons";
15
+ import VTButton from "../Button/VTButton.vue";
17
16
 
18
17
  export default {
19
- name: 'VTDialogClose',
18
+ name: "VTDialogClose",
20
19
 
21
20
  components: { IconClose, VTButton },
22
21
 
23
- inject: ['api'],
22
+ inject: ["api"],
24
23
 
25
24
  computed: {
26
25
  dark() {
@@ -33,7 +32,7 @@ export default {
33
32
 
34
33
  // temporary till button theme is implemented
35
34
  theme() {
36
- return this.dark ? 'dark' : null;
35
+ return this.dark ? "dark" : null;
37
36
  },
38
37
  },
39
38
 
package/src/Dialog/VTDialogContent.vue CHANGED
@@ -28,9 +28,9 @@
28
28
 
29
29
  <script>
30
30
  export default {
31
- name: 'VTDialogContent',
31
+ name: "VTDialogContent",
32
32
 
33
- inject: ['api'],
33
+ inject: ["api"],
34
34
 
35
35
  data() {
36
36
  return {
package/src/Dialog/VTDialogHeader.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  :id="id"
5
5
  :class="{
6
6
  'Dialog-header': headless,
7
- 'mb-8 text-2xl font-semibold': !headless,
7
+ 'mb-8 flex justify-between gap-x-3 items-center': !headless,
8
8
  }"
9
9
  >
10
10
  <slot></slot>
@@ -13,14 +13,14 @@
13
13
 
14
14
  <script>
15
15
  export default {
16
- name: 'VTDialogHeader',
16
+ name: "VTDialogHeader",
17
17
 
18
- inject: ['api'],
18
+ inject: ["api"],
19
19
 
20
20
  props: {
21
21
  as: {
22
22
  type: String,
23
- default: 'header',
23
+ default: "header",
24
24
  },
25
25
  },
26
26
 
@@ -48,7 +48,7 @@ export default {
48
48
  const dialog = document.getElementById(this.api().id);
49
49
 
50
50
  if (dialog) {
51
- dialog.setAttribute('aria-labelledby', this.id);
51
+ dialog.setAttribute("aria-labelledby", this.id);
52
52
  }
53
53
  },
54
54
  },
package/src/Dialog/VTDialogMain.vue CHANGED
@@ -6,14 +6,14 @@
6
6
 
7
7
  <script>
8
8
  export default {
9
- name: 'VTDialogMain',
9
+ name: "VTDialogMain",
10
10
 
11
- inject: ['api'],
11
+ inject: ["api"],
12
12
 
13
13
  props: {
14
14
  as: {
15
15
  type: String,
16
- default: 'main',
16
+ default: "main",
17
17
  },
18
18
  },
19
19
 
@@ -41,7 +41,7 @@ export default {
41
41
  const dialog = document.getElementById(this.api().id);
42
42
 
43
43
  if (dialog) {
44
- dialog.setAttribute('aria-describedby', this.id);
44
+ dialog.setAttribute("aria-describedby", this.id);
45
45
  }
46
46
  },
47
47
  },
package/src/Dialog/VTDialogOverlay.vue CHANGED
@@ -11,7 +11,7 @@
11
11
  </template>
12
12
 
13
13
  <script>
14
- import FadeInOut from '~/components/Transitions/FadeInOut.vue';
14
+ import FadeInOut from '../Transitions/FadeInOut.vue';
15
15
 
16
16
  export default {
17
17
  name: 'VTDialogOverlay',
package/src/Dialog/VTDialogTitle.vue ADDED
@@ -0,0 +1,26 @@
1
+ <template>
2
+ <span
3
+ :id="id"
4
+ :class="{ 'Dialog-header': headless, 'text-2xl font-semibold': !headless }"
5
+ >
6
+ <slot></slot
7
+ ></span>
8
+ </template>
9
+
10
+ <script>
11
+ export default {
12
+ name: "VTDialogTitle",
13
+
14
+ inject: ["api"],
15
+
16
+ computed: {
17
+ headless() {
18
+ return this.api().isHeadless;
19
+ },
20
+
21
+ id() {
22
+ return `${this.api().id}-title`;
23
+ },
24
+ },
25
+ };
26
+ </script>
package/src/Drawer/VTDrawerClose.vue CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
  <script>
15
15
  import { IconLeft } from '@veritree/icons';
16
- import VTButton from './VTButton.vue';
16
+ import VTButton from '../Button/VTButton.vue';
17
17
 
18
18
  export default {
19
19
  name: 'VTDrawerClose',
package/src/Modal/VTModal.vue CHANGED
@@ -33,7 +33,7 @@
33
33
 
34
34
  <script>
35
35
  import { IconClose } from '@veritree/icons';
36
- import VTButton from './VTButton.vue';
36
+ import VTButton from '../Button/VTButton.vue';
37
37
 
38
38
  export default {
39
39
  name: 'VTModal',