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.
- package/package.json +1 -1
- package/src/components/ActionTable/ActionTable.vue +3 -8
- package/src/components/ActionTable/BatchActionMenu.vue +12 -12
- package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue +2 -1
- package/src/components/ActionTable/Filters/FilterListToggle.vue +2 -2
- package/src/components/ActionTable/Filters/FilterableField.vue +1 -1
- package/src/components/ActionTable/Form/Fields/DateField.vue +1 -1
- package/src/components/ActionTable/Form/Fields/DateRangeField.vue +1 -1
- package/src/components/ActionTable/Form/Fields/DateTimeField.vue +2 -2
- package/src/components/ActionTable/Form/Fields/DateTimePicker.vue +1 -1
- package/src/components/ActionTable/Form/Fields/FileUploadButton.vue +2 -2
- package/src/components/ActionTable/Form/Fields/InlineDateTimeField.vue +2 -2
- package/src/components/ActionTable/Form/Fields/MultiFileField.vue +2 -2
- package/src/components/ActionTable/Form/Fields/NumberField.vue +2 -2
- package/src/components/ActionTable/Form/Fields/NumberRangeField.vue +3 -3
- package/src/components/ActionTable/Form/Fields/SelectDrawer.vue +2 -2
- package/src/components/ActionTable/Form/Fields/SelectWithChildrenField.vue +2 -2
- package/src/components/ActionTable/Form/Fields/SingleFileField.vue +2 -2
- package/src/components/ActionTable/Form/Fields/WysiwygField.vue +1 -1
- package/src/components/ActionTable/TableSummaryRow.vue +12 -12
- package/src/components/ActionTable/listActions.ts +1 -1
- package/src/components/ActionTable/listHelpers.ts +1 -1
- package/src/components/ActionTable/tableColumns.ts +1 -1
- package/src/components/DragAndDrop/HandleDraggable.vue +1 -1
- package/src/components/DragAndDrop/ListItemDraggable.vue +2 -2
- package/src/components/DragAndDrop/listDragAndDrop.ts +1 -1
- package/src/components/Utility/Dialogs/FullScreenDialog.vue +2 -2
- package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue +7 -7
- package/src/components/Utility/ImagePreview.vue +13 -13
- package/src/helpers/FileUpload.ts +2 -1
- package/src/helpers/compatibility.ts +1 -1
- package/src/helpers/date.ts +1 -1
- package/src/helpers/downloadPdf.ts +1 -1
- package/src/helpers/files.ts +2 -1
- package/src/helpers/multiFileUpload.ts +1 -1
- package/src/helpers/singleFileUpload.ts +1 -1
- package/src/vue-plugin.js +1 -0
- package/tsconfig.json +6 -3
- package/vite-project/.vscode/extensions.json +3 -0
- package/vite-project/README.md +9 -0
- package/vite-project/index.html +13 -0
- package/vite-project/package.json +20 -0
- package/vite-project/public/vite.svg +1 -0
- package/vite-project/src/App.vue +30 -0
- package/vite-project/src/assets/vue.svg +1 -0
- package/vite-project/src/components/HelloWorld.vue +38 -0
- package/vite-project/src/main.ts +5 -0
- package/vite-project/src/style.css +79 -0
- package/vite-project/src/vite-env.d.ts +1 -0
- package/vite-project/tsconfig.json +25 -0
- package/vite-project/tsconfig.node.json +11 -0
- package/vite-project/vite.config.ts +7 -0
package/package.json
CHANGED
@@ -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
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
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 {
|
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
|
-
|
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({
|
@@ -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
|
-
|
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
|
-
|
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
|
-
|
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 '
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
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
|
|
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 {
|
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({
|
@@ -16,12 +16,12 @@
|
|
16
16
|
</div>
|
17
17
|
<slot />
|
18
18
|
</div>
|
19
|
-
|
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
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
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
|
-
|
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
|
-
|
78
|
+
</q-btn>
|
79
79
|
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
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({
|
package/src/helpers/date.ts
CHANGED
package/src/helpers/files.ts
CHANGED
@@ -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) {
|
package/src/vue-plugin.js
CHANGED
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
|
-
"
|
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,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,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
|
+
}
|