quasar-ui-danx 0.0.12 → 0.0.14

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 (52) hide show
  1. package/package.json +1 -1
  2. package/src/components/ActionTable/ActionTable.vue +3 -8
  3. package/src/components/ActionTable/BatchActionMenu.vue +12 -12
  4. package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue +2 -1
  5. package/src/components/ActionTable/Filters/FilterListToggle.vue +2 -2
  6. package/src/components/ActionTable/Filters/FilterableField.vue +1 -1
  7. package/src/components/ActionTable/Form/Fields/DateField.vue +1 -1
  8. package/src/components/ActionTable/Form/Fields/DateRangeField.vue +1 -1
  9. package/src/components/ActionTable/Form/Fields/DateTimeField.vue +2 -2
  10. package/src/components/ActionTable/Form/Fields/DateTimePicker.vue +1 -1
  11. package/src/components/ActionTable/Form/Fields/FileUploadButton.vue +2 -2
  12. package/src/components/ActionTable/Form/Fields/InlineDateTimeField.vue +2 -2
  13. package/src/components/ActionTable/Form/Fields/MultiFileField.vue +2 -2
  14. package/src/components/ActionTable/Form/Fields/NumberField.vue +2 -2
  15. package/src/components/ActionTable/Form/Fields/NumberRangeField.vue +3 -3
  16. package/src/components/ActionTable/Form/Fields/SelectDrawer.vue +2 -2
  17. package/src/components/ActionTable/Form/Fields/SelectWithChildrenField.vue +2 -2
  18. package/src/components/ActionTable/Form/Fields/SingleFileField.vue +2 -2
  19. package/src/components/ActionTable/Form/Fields/WysiwygField.vue +1 -1
  20. package/src/components/ActionTable/TableSummaryRow.vue +12 -12
  21. package/src/components/ActionTable/listActions.ts +1 -1
  22. package/src/components/ActionTable/listHelpers.ts +1 -1
  23. package/src/components/ActionTable/tableColumns.ts +1 -1
  24. package/src/components/DragAndDrop/HandleDraggable.vue +1 -1
  25. package/src/components/DragAndDrop/ListItemDraggable.vue +2 -2
  26. package/src/components/DragAndDrop/listDragAndDrop.ts +1 -1
  27. package/src/components/Utility/Dialogs/FullScreenDialog.vue +2 -2
  28. package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue +7 -7
  29. package/src/components/Utility/ImagePreview.vue +13 -13
  30. package/src/helpers/FileUpload.ts +2 -1
  31. package/src/helpers/compatibility.ts +1 -1
  32. package/src/helpers/date.ts +1 -1
  33. package/src/helpers/downloadPdf.ts +1 -1
  34. package/src/helpers/files.ts +2 -1
  35. package/src/helpers/multiFileUpload.ts +1 -1
  36. package/src/helpers/singleFileUpload.ts +1 -1
  37. package/src/vue-plugin.js +1 -0
  38. package/tsconfig.json +6 -3
  39. package/vite-project/.vscode/extensions.json +3 -0
  40. package/vite-project/README.md +9 -0
  41. package/vite-project/index.html +13 -0
  42. package/vite-project/package.json +20 -0
  43. package/vite-project/public/vite.svg +1 -0
  44. package/vite-project/src/App.vue +30 -0
  45. package/vite-project/src/assets/vue.svg +1 -0
  46. package/vite-project/src/components/HelloWorld.vue +38 -0
  47. package/vite-project/src/main.ts +5 -0
  48. package/vite-project/src/style.css +79 -0
  49. package/vite-project/src/vite-env.d.ts +1 -0
  50. package/vite-project/tsconfig.json +25 -0
  51. package/vite-project/tsconfig.node.json +11 -0
  52. package/vite-project/vite.config.ts +7 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "quasar-ui-danx",
3
- "version": "0.0.12",
3
+ "version": "0.0.14",
4
4
  "author": "Dan <dan@flytedesk.com>",
5
5
  "description": "DanX Vue / Quasar component library",
6
6
  "license": "MIT",
@@ -76,15 +76,10 @@
76
76
  </template>
77
77
 
78
78
  <script setup>
79
- import {
80
- EmptyTableState,
81
- HandleDraggable,
82
- registerStickyScrolling,
83
- RenderComponentColumn,
84
- TableSummaryRow
85
- } from '@ui/components';
86
- import { DragHandleIcon as RowResizeIcon } from '@ui/svg';
87
79
  import { ref } from 'vue';
80
+ import { EmptyTableState, registerStickyScrolling, RenderComponentColumn, TableSummaryRow } from '.';
81
+ import { DragHandleIcon as RowResizeIcon } from '../../svg';
82
+ import { HandleDraggable } from '../DragAndDrop';
88
83
 
89
84
  defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
90
85
  defineProps({
@@ -8,22 +8,22 @@
8
8
  />
9
9
  <q-tooltip v-if="selectedRows.length === 0">
10
10
  Batch actions require a selection
11
- </q-tooltip>
12
- <slot>
13
- <Component
14
- :is="activeComponent.is"
15
- v-if="activeComponent"
16
- v-bind="activeComponent.props"
17
- :is-saving="isSaving"
18
- @close="activeAction = false"
19
- @confirm="onConfirmAction"
20
- />
21
- </slot>
11
+ </q-tooltip>
12
+ <slot>
13
+ <Component
14
+ :is="activeComponent.is"
15
+ v-if="activeComponent"
16
+ v-bind="activeComponent.props"
17
+ :is-saving="isSaving"
18
+ @close="activeAction = false"
19
+ @confirm="onConfirmAction"
20
+ />
21
+ </slot>
22
22
  </div>
23
23
  </template>
24
24
  <script setup>
25
- import PopoverMenu from '@ui/components/Utility/Popover/PopoverMenu';
26
25
  import { computed, ref } from 'vue';
26
+ import PopoverMenu from '../../components/Utility/Popover/PopoverMenu';
27
27
 
28
28
  const emit = defineEmits(['action']);
29
29
  const props = defineProps({
@@ -15,7 +15,8 @@
15
15
  </CollapsableSidebar>
16
16
  </template>
17
17
  <script setup>
18
- import { CollapsableSidebar, FilterGroupList } from '@ui/components';
18
+ import { FilterGroupList } from '.';
19
+ import { CollapsableSidebar } from '../../Utility';
19
20
 
20
21
  defineEmits(['update:filter', 'update:show-filters']);
21
22
  defineProps({
@@ -12,7 +12,7 @@
12
12
  rounded
13
13
  :color="activeCount > 0 ? 'blue-base' : 'gray-base'"
14
14
  />
15
- </q-btn>
15
+ </q-btn>
16
16
  </div>
17
17
  <a
18
18
  v-if="activeCount > 0"
@@ -22,8 +22,8 @@
22
22
  </div>
23
23
  </template>
24
24
  <script setup>
25
- import { FilterIcon } from '@ui/svg';
26
25
  import { computed } from 'vue';
26
+ import { FilterIcon } from '../../../svg';
27
27
 
28
28
  defineEmits(['update:show-filters', 'update:filter']);
29
29
  const props = defineProps({
@@ -110,7 +110,7 @@ import {
110
110
  NumberRangeField,
111
111
  SelectField,
112
112
  SelectWithChildrenField
113
- } from '@ui/components';
113
+ } from '../Form/Fields';
114
114
 
115
115
  const emit = defineEmits(['update:model-value']);
116
116
  const props = defineProps({
@@ -28,8 +28,8 @@
28
28
 
29
29
  <script setup>
30
30
  import { CalendarIcon as DateIcon } from '@heroicons/vue/outline';
31
- import { fDate, parseQDate } from '@ui/helpers/formats';
32
31
  import { computed, ref, watch } from 'vue';
32
+ import { fDate, parseQDate } from '../../../../helpers';
33
33
 
34
34
  const emit = defineEmits(['update:model-value']);
35
35
  const props = defineProps({
@@ -39,8 +39,8 @@
39
39
 
40
40
  <script setup>
41
41
  import { CalendarIcon as DateIcon } from '@heroicons/vue/outline';
42
- import { fDate, parseQDate, parseQDateTime } from '@ui/helpers/formats';
43
42
  import { computed, ref, watch } from 'vue';
43
+ import { fDate, parseQDate, parseQDateTime } from '../../../../helpers';
44
44
 
45
45
  const emit = defineEmits(['update:model-value']);
46
46
  const props = defineProps({
@@ -19,13 +19,13 @@
19
19
  </q-popup-proxy>
20
20
  </q-icon>
21
21
  </template>
22
- </q-input>
22
+ </q-input>
23
23
  </div>
24
24
  </template>
25
25
 
26
26
  <script setup>
27
- import { fLocalizedDateTime } from '@ui/helpers/formats';
28
27
  import { ref } from 'vue';
28
+ import { fLocalizedDateTime } from '../../../../helpers';
29
29
  import DateTimePicker from './DateTimePicker';
30
30
 
31
31
  const emit = defineEmits(['update:model-value']);
@@ -26,8 +26,8 @@
26
26
  </q-popup-proxy>
27
27
  </template>
28
28
  <script setup>
29
- import { dbDateTime, localizedDateTime, remoteDateTime } from '@ui/helpers/formats';
30
29
  import { computed } from 'vue';
30
+ import { dbDateTime, localizedDateTime, remoteDateTime } from '../../../../helpers';
31
31
 
32
32
  const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'clear']);
33
33
  const props = defineProps({
@@ -15,13 +15,13 @@
15
15
  multiple
16
16
  @change="onAttachFiles"
17
17
  />
18
- </q-btn>
18
+ </q-btn>
19
19
  </template>
20
20
  <script setup>
21
21
  import { PlusIcon } from '@heroicons/vue/outline';
22
- import { FileUpload } from '@ui/helpers';
23
22
  import { QBtn } from 'quasar';
24
23
  import { ref } from 'vue';
24
+ import { FileUpload } from '../../../../helpers';
25
25
 
26
26
  defineExpose({ upload });
27
27
  const emit = defineEmits([
@@ -18,13 +18,13 @@
18
18
  @save="onSave(scope)"
19
19
  @cancel="scope.cancel"
20
20
  />
21
- </q-popup-edit>
21
+ </q-popup-edit>
22
22
  </div>
23
23
  </div>
24
24
  </template>
25
25
  <script setup>
26
26
  import { PencilIcon as EditIcon } from '@heroicons/vue/solid';
27
- import { fLocalizedDateTime } from '@ui/helpers/formats';
27
+ import { fLocalizedDateTime } from '../../../../helpers';
28
28
  import DateTimePicker from './DateTimePicker';
29
29
 
30
30
  const emit = defineEmits(['close', 'save', 'update:model-value']);
@@ -61,9 +61,9 @@
61
61
  </template>
62
62
 
63
63
  <script setup>
64
- import { ImagePreview } from '@ui/components';
65
- import { useMultiFileUpload } from '@ui/helpers';
66
64
  import { onMounted } from 'vue';
65
+ import { useMultiFileUpload } from '../../../../helpers';
66
+ import { ImagePreview } from '../../../Utility';
67
67
  import FieldLabel from './FieldLabel';
68
68
 
69
69
  const emit = defineEmits(['update:model-value']);
@@ -16,12 +16,12 @@
16
16
  :show-name="showName"
17
17
  />
18
18
  </template>
19
- </q-input>
19
+ </q-input>
20
20
  </template>
21
21
 
22
22
  <script setup>
23
- import { fNumber } from '@ui/helpers/formats';
24
23
  import { computed, nextTick, ref, watch } from 'vue';
24
+ import { fNumber } from '../../../../helpers';
25
25
  import FieldLabel from './FieldLabel';
26
26
 
27
27
  const emit = defineEmits(['update:model-value']);
@@ -32,16 +32,16 @@
32
32
  :field="maxField"
33
33
  @update:model-value="onSave"
34
34
  />
35
- </q-popup-proxy>
35
+ </q-popup-proxy>
36
36
  </div>
37
37
  </template>
38
38
 
39
39
  <script setup>
40
40
  import { CurrencyDollarIcon as CurrencyIcon, HashtagIcon as NumberIcon } from '@heroicons/vue/outline';
41
- import { fCurrency, fNumber, fPercent } from '@ui/helpers';
42
- import { PercentIcon } from '@ui/svg';
43
41
  import { useDebounceFn } from '@vueuse/core';
44
42
  import { computed, ref, watch } from 'vue';
43
+ import { fCurrency, fNumber, fPercent } from '../../../../helpers';
44
+ import { PercentIcon } from '../../../../svg';
45
45
  import NumberField from './NumberField';
46
46
 
47
47
  const emit = defineEmits(['update:model-value']);
@@ -53,13 +53,13 @@
53
53
  <slot name="placeholder">{{ placeholder }}</slot>
54
54
  </template>
55
55
  </slot>
56
- </q-chip>
56
+ </q-chip>
57
57
  </div>
58
58
  </template>
59
59
 
60
60
  <script setup>
61
- import { ContentDrawer } from '@ui/components';
62
61
  import { computed, ref } from 'vue';
62
+ import { ContentDrawer } from '../../../Utility';
63
63
 
64
64
  const emit = defineEmits(['update:modelValue']);
65
65
  const props = defineProps({
@@ -23,13 +23,13 @@
23
23
  >
24
24
  <div>{{ child.label }}</div>
25
25
  <div class="text-xs text-gray-silver">{{ child.name }}</div>
26
- </q-checkbox>
26
+ </q-checkbox>
27
27
  </div>
28
28
  </div>
29
29
  </template>
30
30
  <script setup>
31
- import { remove } from '@ui/helpers/array';
32
31
  import { ref, watch } from 'vue';
32
+ import { remove } from '../../../../helpers';
33
33
  import SelectField from './SelectField';
34
34
 
35
35
  const emit = defineEmits(['update:model-value']);
@@ -48,9 +48,9 @@
48
48
  </template>
49
49
 
50
50
  <script setup>
51
- import { ImagePreview } from '@ui/components';
52
- import { useSingleFileUpload } from '@ui/helpers/singleFileUpload';
53
51
  import { onMounted } from 'vue';
52
+ import { useSingleFileUpload } from '../../../../helpers';
53
+ import { ImagePreview } from '../../../Utility';
54
54
  import FieldLabel from './FieldLabel';
55
55
 
56
56
  const emit = defineEmits(['update:model-value']);
@@ -24,8 +24,8 @@
24
24
  </template>
25
25
 
26
26
  <script setup>
27
- import { apiKey } from '@ui/vendor/tinymce-config';
28
27
  import { default as TinyMceEditor } from '@tinymce/tinymce-vue';
28
+ import { apiKey } from '../../../../vendor/tinymce-config';
29
29
  import FieldLabel from './FieldLabel';
30
30
 
31
31
  defineEmits(['update:model-value']);
@@ -28,22 +28,22 @@
28
28
  size="18"
29
29
  />
30
30
  </div>
31
- </q-td>
32
- <q-td
33
- v-for="column in summaryColumns"
34
- :key="column.name"
35
- :align="column.align || 'left'"
36
- >
37
- <template v-if="summary">
38
- {{ formatValue(column) }}
39
- </template>
40
- </q-td>
41
- </q-tr>
31
+ </q-td>
32
+ <q-td
33
+ v-for="column in summaryColumns"
34
+ :key="column.name"
35
+ :align="column.align || 'left'"
36
+ >
37
+ <template v-if="summary">
38
+ {{ formatValue(column) }}
39
+ </template>
40
+ </q-td>
41
+ </q-tr>
42
42
  </template>
43
43
  <script setup>
44
- import { fNumber } from '@ui/helpers/formats';
45
44
  import { XCircleIcon as ClearIcon } from '@heroicons/vue/solid';
46
45
  import { computed } from 'vue';
46
+ import { fNumber } from '../../helpers';
47
47
 
48
48
  defineEmits(['clear']);
49
49
  const props = defineProps({
@@ -1,5 +1,5 @@
1
- import { getItem, setItem } from "@ui/helpers";
2
1
  import { computed, ref, watch } from "vue";
2
+ import { getItem, setItem } from "../../helpers";
3
3
  import { getFilterFromUrl, mapSortBy, waitForRef } from "./listHelpers";
4
4
 
5
5
  export function useListActions(name, {
@@ -1,5 +1,5 @@
1
- import { getUrlParam } from "@ui/helpers";
2
1
  import { onMounted, watch } from "vue";
2
+ import { getUrlParam } from "../../helpers";
3
3
 
4
4
  export function registerStickyScrolling(tableRef) {
5
5
  onMounted(() => {
@@ -1,5 +1,5 @@
1
- import { getItem, setItem } from "@ui/helpers";
2
1
  import { computed, ref, watch } from "vue";
2
+ import { getItem, setItem } from "../../helpers";
3
3
 
4
4
  export function useTableColumns(name, columns, options = { titleMinWidth: 120, titleMaxWidth: 200 }) {
5
5
  const COLUMN_ORDER_KEY = `${name}-column-order`;
@@ -13,8 +13,8 @@
13
13
  </div>
14
14
  </template>
15
15
  <script setup>
16
- import { DragAndDrop } from '@ui/components';
17
16
  import { useDebounceFn } from '@vueuse/core';
17
+ import { DragAndDrop } from './dragAndDrop';
18
18
 
19
19
  const emit = defineEmits(['start', 'end', 'resize']);
20
20
  const props = defineProps({
@@ -16,9 +16,9 @@
16
16
  </div>
17
17
  </template>
18
18
  <script setup>
19
- import { ListDragAndDrop } from '@ui/components';
20
- import { DragHandleDotsIcon as DragHandleIcon } from '@ui/svg';
19
+ import { DragHandleDotsIcon as DragHandleIcon } from '../../svg';
21
20
  import SvgImg from '../Utility/SvgImg';
21
+ import { ListDragAndDrop } from './listDragAndDrop';
22
22
 
23
23
  const emit = defineEmits(['position', 'update:list-items']);
24
24
  const props = defineProps({
@@ -1,4 +1,4 @@
1
- import { DragAndDrop } from "@ui/components";
1
+ import { DragAndDrop } from "./dragAndDrop";
2
2
 
3
3
  /**
4
4
  * ListDragAndDrop supports dragging elements in a list to new positions in the same list.
@@ -16,12 +16,12 @@
16
16
  </div>
17
17
  <slot />
18
18
  </div>
19
- </q-dialog>
19
+ </q-dialog>
20
20
  </template>
21
21
 
22
22
  <script setup>
23
- import { XIcon } from '@ui/svg';
24
23
  import { computed } from 'vue';
24
+ import { XIcon } from '../../../svg';
25
25
 
26
26
  const emit = defineEmits(['update:model-value', 'close']);
27
27
  const props = defineProps({
@@ -38,17 +38,17 @@
38
38
  <img v-else :alt="file.filename" :src="file.url" />
39
39
  </div>
40
40
  </q-carousel-slide>
41
- </q-carousel>
42
- <CloseIcon
43
- class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
44
- @click="$emit('close')"
45
- />
41
+ </q-carousel>
42
+ <CloseIcon
43
+ class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
44
+ @click="$emit('close')"
45
+ />
46
46
  </div>
47
- </q-dialog>
47
+ </q-dialog>
48
48
  </template>
49
49
  <script setup>
50
- import { XIcon as CloseIcon } from '@ui/svg';
51
50
  import { ref } from 'vue';
51
+ import { XIcon as CloseIcon } from '../../../svg';
52
52
 
53
53
  defineEmits(['close']);
54
54
  const props = defineProps({
@@ -75,17 +75,17 @@
75
75
  @click.stop="download(computedImage.url)"
76
76
  >
77
77
  <DownloadIcon class="w-4 h-5" />
78
- </q-btn>
78
+ </q-btn>
79
79
 
80
- <q-btn
81
- v-if="removable"
82
- size="sm"
83
- class="bg-red-dark text-white !p-1 opacity-50 hover:opacity-100"
84
- @click.stop="onRemove"
85
- >
86
- <div v-if="isConfirmingRemove" class="font-bold text-[1rem] leading-[1.2rem]">?</div>
87
- <RemoveIcon v-else class="w-3" />
88
- </q-btn>
80
+ <q-btn
81
+ v-if="removable"
82
+ size="sm"
83
+ class="bg-red-dark text-white !p-1 opacity-50 hover:opacity-100"
84
+ @click.stop="onRemove"
85
+ >
86
+ <div v-if="isConfirmingRemove" class="font-bold text-[1rem] leading-[1.2rem]">?</div>
87
+ <RemoveIcon v-else class="w-3" />
88
+ </q-btn>
89
89
  </div>
90
90
 
91
91
  <FullScreenCarouselDialog
@@ -99,10 +99,10 @@
99
99
 
100
100
  <script setup>
101
101
  import { DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
102
- import { FullScreenCarouselDialog } from '@ui/components';
103
- import { download } from '@ui/helpers';
104
- import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from '@ui/svg';
105
102
  import { computed, ref } from 'vue';
103
+ import { FullScreenCarouselDialog } from '.';
104
+ import { download } from '../../helpers';
105
+ import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from '../../svg';
106
106
 
107
107
  const emit = defineEmits(['remove']);
108
108
  const props = defineProps({
@@ -1,5 +1,6 @@
1
- import { FlashMessages, resolveFileLocation } from "@ui/helpers";
2
1
  import { uid } from "quasar";
2
+ import { resolveFileLocation } from "./files";
3
+ import { FlashMessages } from "./FlashMessages";
3
4
 
4
5
  export type FileUploadOptions = {
5
6
  directory: string,
@@ -1,6 +1,6 @@
1
- import { sleep } from "@ui/helpers";
2
1
  import { useGeolocation } from "@vueuse/core";
3
2
  import { computed } from "vue";
3
+ import { sleep } from "./utils";
4
4
 
5
5
  let isLoaded = false;
6
6
  let hasAlreadyWaited = false;
@@ -1,4 +1,4 @@
1
- import { parseDateTime } from "@ui/helpers/formats";
1
+ import { parseDateTime } from "./formats";
2
2
 
3
3
  export function diffInDays(date1, date2) {
4
4
  return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
@@ -1,4 +1,4 @@
1
- import { download } from "@ui/helpers/download";
1
+ import { download } from "./download";
2
2
 
3
3
  /**
4
4
  * Asynchronously load a file from the URL and trigger a download in the browser
@@ -1,5 +1,6 @@
1
- import { FlashMessages, useCompatibility } from "@ui/helpers";
2
1
  import ExifReader from "exifreader";
2
+ import { useCompatibility } from "./compatibility";
3
+ import { FlashMessages } from "./FlashMessages";
3
4
 
4
5
  export async function resolveFileLocation(file, waitMessage = null) {
5
6
  if (file.location) {
@@ -1,5 +1,5 @@
1
- import { FileUpload, FileUploadOptions } from "@ui/helpers/FileUpload";
2
1
  import { ref } from "vue";
2
+ import { FileUpload, FileUploadOptions } from "./FileUpload";
3
3
 
4
4
  export function useMultiFileUpload(options: FileUploadOptions) {
5
5
  const uploadedFiles = ref([]);
@@ -1,5 +1,5 @@
1
- import { FileUpload, FileUploadOptions } from "@ui/helpers";
2
1
  import { computed, ref } from "vue";
2
+ import { FileUpload, FileUploadOptions } from "./FileUpload";
3
3
 
4
4
  export function useSingleFileUpload(options: FileUploadOptions) {
5
5
  const uploadedFile = ref(null);
package/src/vue-plugin.js CHANGED
@@ -2,6 +2,7 @@ export * from './helpers';
2
2
  export * from './components/DragAndDrop';
3
3
  export * from './components/ActionTable';
4
4
  export * from './components/Utility';
5
+ export * from './svg';
5
6
  // export * from './components';
6
7
 
7
8
  import packageJson from '../package.json';
package/tsconfig.json CHANGED
@@ -1,5 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
+ "outDir": "./dist",
4
+ "declaration": true,
3
5
  // Specify ECMAScript target version
4
6
  "target": "esnext",
5
7
  // Specify module code generation
@@ -24,8 +26,8 @@
24
26
  "@/*": [
25
27
  "./dev/src/*"
26
28
  ],
27
- "@ui/*": [
28
- "./src/*"
29
+ "ui": [
30
+ "./src/index.esm.js"
29
31
  ]
30
32
  }
31
33
  },
@@ -36,6 +38,7 @@
36
38
  "types/**/*.d.ts"
37
39
  ],
38
40
  "exclude": [
39
- "node_modules"
41
+ "node_modules",
42
+ "dist"
40
43
  ]
41
44
  }
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
@@ -0,0 +1,9 @@
1
+ # Vue 3 + TypeScript + Vite
2
+
3
+ This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4
+
5
+ ## Recommended Setup
6
+
7
+ - [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
8
+
9
+ - Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + Vue + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.ts"></script>
12
+ </body>
13
+ </html>
@@ -0,0 +1,20 @@
1
+ {
2
+ "name": "vite-project",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vue-tsc && vite build",
9
+ "preview": "vite preview"
10
+ },
11
+ "dependencies": {
12
+ "vue": "^3.4.21"
13
+ },
14
+ "devDependencies": {
15
+ "@vitejs/plugin-vue": "^5.0.4",
16
+ "typescript": "^5.2.2",
17
+ "vite": "^5.2.0",
18
+ "vue-tsc": "^2.0.6"
19
+ }
20
+ }
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -0,0 +1,30 @@
1
+ <script setup lang="ts">
2
+ import HelloWorld from './components/HelloWorld.vue'
3
+ </script>
4
+
5
+ <template>
6
+ <div>
7
+ <a href="https://vitejs.dev" target="_blank">
8
+ <img src="/vite.svg" class="logo" alt="Vite logo" />
9
+ </a>
10
+ <a href="https://vuejs.org/" target="_blank">
11
+ <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
12
+ </a>
13
+ </div>
14
+ <HelloWorld msg="Vite + Vue" />
15
+ </template>
16
+
17
+ <style scoped>
18
+ .logo {
19
+ height: 6em;
20
+ padding: 1.5em;
21
+ will-change: filter;
22
+ transition: filter 300ms;
23
+ }
24
+ .logo:hover {
25
+ filter: drop-shadow(0 0 2em #646cffaa);
26
+ }
27
+ .logo.vue:hover {
28
+ filter: drop-shadow(0 0 2em #42b883aa);
29
+ }
30
+ </style>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
@@ -0,0 +1,38 @@
1
+ <script setup lang="ts">
2
+ import { ref } from 'vue'
3
+
4
+ defineProps<{ msg: string }>()
5
+
6
+ const count = ref(0)
7
+ </script>
8
+
9
+ <template>
10
+ <h1>{{ msg }}</h1>
11
+
12
+ <div class="card">
13
+ <button type="button" @click="count++">count is {{ count }}</button>
14
+ <p>
15
+ Edit
16
+ <code>components/HelloWorld.vue</code> to test HMR
17
+ </p>
18
+ </div>
19
+
20
+ <p>
21
+ Check out
22
+ <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
23
+ >create-vue</a
24
+ >, the official Vue + Vite starter
25
+ </p>
26
+ <p>
27
+ Install
28
+ <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
29
+ in your IDE for a better DX
30
+ </p>
31
+ <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
32
+ </template>
33
+
34
+ <style scoped>
35
+ .read-the-docs {
36
+ color: #888;
37
+ }
38
+ </style>
@@ -0,0 +1,5 @@
1
+ import { createApp } from 'vue'
2
+ import './style.css'
3
+ import App from './App.vue'
4
+
5
+ createApp(App).mount('#app')
@@ -0,0 +1,79 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ button {
39
+ border-radius: 8px;
40
+ border: 1px solid transparent;
41
+ padding: 0.6em 1.2em;
42
+ font-size: 1em;
43
+ font-weight: 500;
44
+ font-family: inherit;
45
+ background-color: #1a1a1a;
46
+ cursor: pointer;
47
+ transition: border-color 0.25s;
48
+ }
49
+ button:hover {
50
+ border-color: #646cff;
51
+ }
52
+ button:focus,
53
+ button:focus-visible {
54
+ outline: 4px auto -webkit-focus-ring-color;
55
+ }
56
+
57
+ .card {
58
+ padding: 2em;
59
+ }
60
+
61
+ #app {
62
+ max-width: 1280px;
63
+ margin: 0 auto;
64
+ padding: 2rem;
65
+ text-align: center;
66
+ }
67
+
68
+ @media (prefers-color-scheme: light) {
69
+ :root {
70
+ color: #213547;
71
+ background-color: #ffffff;
72
+ }
73
+ a:hover {
74
+ color: #747bff;
75
+ }
76
+ button {
77
+ background-color: #f9f9f9;
78
+ }
79
+ }
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
@@ -0,0 +1,25 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2020",
4
+ "useDefineForClassFields": true,
5
+ "module": "ESNext",
6
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
7
+ "skipLibCheck": true,
8
+
9
+ /* Bundler mode */
10
+ "moduleResolution": "bundler",
11
+ "allowImportingTsExtensions": true,
12
+ "resolveJsonModule": true,
13
+ "isolatedModules": true,
14
+ "noEmit": true,
15
+ "jsx": "preserve",
16
+
17
+ /* Linting */
18
+ "strict": true,
19
+ "noUnusedLocals": true,
20
+ "noUnusedParameters": true,
21
+ "noFallthroughCasesInSwitch": true
22
+ },
23
+ "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
24
+ "references": [{ "path": "./tsconfig.node.json" }]
25
+ }
@@ -0,0 +1,11 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true,
4
+ "skipLibCheck": true,
5
+ "module": "ESNext",
6
+ "moduleResolution": "bundler",
7
+ "allowSyntheticDefaultImports": true,
8
+ "strict": true
9
+ },
10
+ "include": ["vite.config.ts"]
11
+ }
@@ -0,0 +1,7 @@
1
+ import { defineConfig } from 'vite'
2
+ import vue from '@vitejs/plugin-vue'
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ plugins: [vue()],
7
+ })