@veritree/ui 0.22.3 → 0.23.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 (75) hide show
  1. package/index.js +64 -72
  2. package/mixins/floating-ui-content.js +1 -22
  3. package/mixins/floating-ui-item.js +96 -50
  4. package/mixins/floating-ui.js +7 -9
  5. package/mixins/form-control-icon.js +5 -5
  6. package/mixins/form-control.js +17 -18
  7. package/nuxt.js +30 -23
  8. package/package.json +14 -6
  9. package/src/components/Alert/VTAlert.vue +55 -14
  10. package/src/components/Button/VTButton.vue +20 -12
  11. package/src/components/Checkbox/VTCheckbox.vue +134 -0
  12. package/src/components/Checkbox/VTCheckboxLabel.vue +3 -0
  13. package/src/components/Checkbox/VTCheckboxText.vue +20 -0
  14. package/src/components/Dialog/VTDialog.vue +22 -32
  15. package/src/components/Dialog/VTDialogClose.vue +19 -25
  16. package/src/components/Dialog/VTDialogContent.vue +24 -19
  17. package/src/components/Dialog/VTDialogFooter.vue +11 -16
  18. package/src/components/Dialog/VTDialogHeader.vue +16 -18
  19. package/src/components/Dialog/VTDialogMain.vue +11 -18
  20. package/src/components/Dialog/VTDialogOverlay.vue +18 -18
  21. package/src/components/Dialog/VTDialogTitle.vue +10 -7
  22. package/src/components/Disclosure/VTDisclosureContent.vue +1 -1
  23. package/src/components/Disclosure/VTDisclosureDetails.vue +1 -1
  24. package/src/components/Disclosure/VTDisclosureHeader.vue +2 -2
  25. package/src/components/Disclosure/VTDisclosureIcon.vue +1 -1
  26. package/src/components/Drawer/VTDrawer.vue +6 -15
  27. package/src/components/Drawer/VTDrawerClose.vue +5 -5
  28. package/src/components/Drawer/VTDrawerContent.vue +9 -9
  29. package/src/components/Drawer/VTDrawerFooter.vue +3 -3
  30. package/src/components/Drawer/VTDrawerHeader.vue +4 -4
  31. package/src/components/Drawer/VTDrawerMain.vue +5 -5
  32. package/src/components/Drawer/VTDrawerOverlay.vue +6 -6
  33. package/src/components/Drawer/VTDrawerTitle.vue +5 -5
  34. package/src/components/DropdownMenu/VTDropdownMenu.vue +19 -6
  35. package/src/components/DropdownMenu/VTDropdownMenuContent.vue +14 -6
  36. package/src/components/DropdownMenu/VTDropdownMenuDivider.vue +7 -16
  37. package/src/components/DropdownMenu/VTDropdownMenuItem.vue +7 -3
  38. package/src/components/DropdownMenu/VTDropdownMenuLabel.vue +1 -10
  39. package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue +2 -4
  40. package/src/components/Form/VTFormFeedback.vue +11 -5
  41. package/src/components/Form/VTFormGroup.vue +5 -7
  42. package/src/components/Form/VTFormLabel.vue +22 -0
  43. package/src/components/Form/VTFormRow.vue +5 -0
  44. package/src/components/Form/VTInput.vue +7 -7
  45. package/src/components/Form/VTInputIcon.vue +1 -2
  46. package/src/components/Form/VTInputPassword.vue +14 -5
  47. package/src/components/Form/VTTextarea.vue +1 -1
  48. package/src/components/Image/VTImage.vue +33 -4
  49. package/src/components/Listbox/VTListbox.vue +105 -14
  50. package/src/components/Listbox/VTListboxContent.vue +3 -7
  51. package/src/components/Listbox/VTListboxItem.vue +127 -6
  52. package/src/components/Listbox/VTListboxLabel.vue +3 -4
  53. package/src/components/Listbox/VTListboxList.vue +3 -24
  54. package/src/components/Listbox/VTListboxSearch.vue +64 -55
  55. package/src/components/Listbox/VTListboxTrigger.vue +9 -4
  56. package/src/components/Popover/VTPopover.vue +19 -0
  57. package/src/components/Popover/VTPopoverItem.vue +6 -2
  58. package/src/components/ProgressBar/VTProgressBar.vue +21 -3
  59. package/src/components/Skeleton/VTSkeleton.vue +11 -0
  60. package/src/components/Skeleton/VTSkeletonItem.vue +9 -0
  61. package/src/components/Tabs/VTTab.vue +6 -5
  62. package/src/components/Tabs/VTTabGroup.vue +9 -7
  63. package/src/components/Tabs/VTTabPanel.vue +4 -5
  64. package/src/components/Tooltip/VTTooltip.vue +65 -0
  65. package/src/components/Tooltip/VTTooltipContent.vue +59 -0
  66. package/src/components/Tooltip/VTTooltipTrigger.vue +98 -0
  67. package/src/components/Transitions/FadeInOut.vue +2 -2
  68. package/src/components/Utils/FloatingUi.vue +56 -24
  69. package/src/utils/components.js +18 -0
  70. package/src/components/Input/VTInput.vue +0 -82
  71. package/src/components/Input/VTInputDate.vue +0 -36
  72. package/src/components/Input/VTInputFile.vue +0 -60
  73. package/src/components/Input/VTInputUpload.vue +0 -54
  74. package/src/components/Modal/VTModal.vue +0 -69
  75. package/src/utils/genId.js +0 -13
@@ -1,36 +0,0 @@
1
- <template>
2
- <VTInput v-model="date" type="date" />
3
- </template>
4
-
5
- <script>
6
- import VTInput from './VTInput.vue';
7
-
8
- export default {
9
- name: 'VTInputDate',
10
-
11
- components: { VTInput },
12
-
13
- model: {
14
- prop: 'value',
15
- event: 'input',
16
- },
17
-
18
- props: {
19
- value: {
20
- type: String,
21
- default: '',
22
- },
23
- },
24
-
25
- computed: {
26
- date: {
27
- get() {
28
- return this.$date.format(this.value, 'YYYY-MM-DD');
29
- },
30
- set(newDate) {
31
- this.$emit('input', newDate);
32
- },
33
- },
34
- },
35
- };
36
- </script>
@@ -1,60 +0,0 @@
1
- <template>
2
- <div class="flex items-stretch gap-2">
3
- <VTInput
4
- ref="input"
5
- type="file"
6
- :value="value"
7
- :theme="theme"
8
- v-bind="$attrs"
9
- @change="onChange"
10
- />
11
- <VTButton :theme="theme" @click.stop="onButtonClick">Browse</VTButton>
12
- </div>
13
- </template>
14
-
15
- <script>
16
- import VTButton from '../Button/VTButton.vue';
17
- import VTInput from './VTInput.vue';
18
-
19
- export default {
20
- name: 'VTInputFile',
21
-
22
- components: {
23
- VTInput,
24
- VTButton,
25
- },
26
-
27
- inheritAttrs: false,
28
-
29
- props: {
30
- theme: {
31
- type: String,
32
- default: null,
33
- validator(value) {
34
- return ['dark'].includes(value);
35
- },
36
- },
37
- multiple: {
38
- type: Boolean,
39
- default: false,
40
- },
41
- },
42
-
43
- data() {
44
- return {
45
- value: null,
46
- };
47
- },
48
-
49
- methods: {
50
- onChange(event) {
51
- this.value = this.$refs.input.$el.value;
52
- this.$emit('change', event);
53
- },
54
-
55
- onButtonClick() {
56
- this.$refs.input.$el.click();
57
- },
58
- },
59
- };
60
- </script>
@@ -1,54 +0,0 @@
1
- <template>
2
- <label
3
- class="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dotted border-white p-4 text-center hover:border-fl-500 hover:bg-fd-500"
4
- :class="{ 'border-fl-500 bg-fd-500': isDraggingOver }"
5
- @drop.prevent="onDrop"
6
- @dragover.prevent="onDragOver"
7
- @dragleave.prevent="onDragLeave"
8
- >
9
- <IconImagePlaceholder class="mb-3" />
10
- <span>Drop your images here, or click to browse</span>
11
- <VTInput type="file" class="sr-only" v-bind="$attrs" @change="onChange" />
12
- </label>
13
- </template>
14
-
15
- <script>
16
- import { IconImagePlaceholder } from '@veritree/icons';
17
- import VTInput from './VTInput.vue';
18
-
19
- export default {
20
- name: 'VTInputFile',
21
-
22
- components: {
23
- VTInput,
24
- IconImagePlaceholder,
25
- },
26
-
27
- inheritAttrs: false,
28
-
29
- data() {
30
- return {
31
- isDraggingOver: false,
32
- };
33
- },
34
-
35
- methods: {
36
- onDrop(event) {
37
- this.isDraggingOver = false;
38
- this.$emit('drop', event);
39
- },
40
-
41
- onDragOver() {
42
- this.isDraggingOver = true;
43
- },
44
-
45
- onDragLeave() {
46
- this.isDraggingOver = false;
47
- },
48
-
49
- onChange(event) {
50
- this.$emit('change', event);
51
- },
52
- },
53
- };
54
- </script>
@@ -1,69 +0,0 @@
1
- <template>
2
- <transition
3
- enter-active-class="duration-300 ease-out"
4
- enter-class="transform opacity-0"
5
- enter-to-class="opacity-100"
6
- leave-active-class="duration-300 ease-in"
7
- leave-class="opacity-100"
8
- leave-to-class="transform opacity-0"
9
- @after-enter="afterEnter"
10
- @after-leave="afterLeave"
11
- >
12
- <div
13
- v-if="visible"
14
- class="fixed inset-0 z-50 flex flex-col justify-center bg-fd-700/75"
15
- tabindex="-1"
16
- @keyup.esc="close"
17
- @click="close"
18
- >
19
- <div
20
- class="relative mx-auto flex max-w-lg flex-col justify-center rounded bg-white"
21
- @click.stop
22
- >
23
- <div class="absolute right-4 top-4">
24
- <VTButton variant="icon" @click.prevent="close"
25
- ><IconClose class="h-4 w-4"
26
- /></VTButton>
27
- </div>
28
- <slot></slot>
29
- </div>
30
- </div>
31
- </transition>
32
- </template>
33
-
34
- <script>
35
- import { IconClose } from '@veritree/icons';
36
- import VTButton from '../Button/VTButton.vue';
37
-
38
- export default {
39
- name: 'VTModal',
40
-
41
- components: { IconClose, VTButton },
42
-
43
- model: {
44
- prop: 'visible',
45
- },
46
-
47
- props: {
48
- visible: {
49
- type: Boolean,
50
- default: false,
51
- },
52
- },
53
-
54
- methods: {
55
- close() {
56
- this.$emit('input', false);
57
- },
58
-
59
- afterEnter() {
60
- this.$emit('shown');
61
- this.$nextTick(() => this.$el.focus());
62
- },
63
-
64
- afterLeave() {
65
- this.$emit('hidden');
66
- },
67
- },
68
- };
69
- </script>
@@ -1,13 +0,0 @@
1
- // Generate id
2
- // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
3
- let gen = null;
4
-
5
- function* idMaker() {
6
- let index = 0;
7
- while (true) yield index++;
8
- }
9
-
10
- export const genId = () => {
11
- if (!gen) gen = idMaker();
12
- return gen.next().value;
13
- };