quasar-ui-danx 0.4.7 → 0.4.9

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "quasar-ui-danx",
3
- "version": "0.4.7",
3
+ "version": "0.4.9",
4
4
  "author": "Dan <dan@flytedesk.com>",
5
5
  "description": "DanX Vue / Quasar component library",
6
6
  "license": "MIT",
@@ -1,19 +1,19 @@
1
1
  <template>
2
- <span>
2
+ <span class="dx-field-label">
3
3
  <slot>
4
4
  {{ labelText }}
5
5
  <template v-if="showName">({{ field?.name }})</template>
6
6
  </slot>
7
7
  <span
8
8
  v-if="requiredLabel"
9
- class="text-red-900 ml-1 text-xs bottom-1 relative"
9
+ class="dx-field-required"
10
10
  >{{ requiredLabel }}</span>
11
11
  </span>
12
12
  </template>
13
13
 
14
14
  <script setup lang="ts">
15
- import { FormField } from "src/types";
16
15
  import { computed } from "vue";
16
+ import { FormField } from "../../../../types";
17
17
 
18
18
  const props = defineProps<{
19
19
  field?: FormField;
@@ -9,7 +9,6 @@
9
9
  :field="field"
10
10
  :label="label"
11
11
  :show-name="showName"
12
- class="text-sm font-semibold"
13
12
  />
14
13
 
15
14
  <input
@@ -26,9 +25,8 @@
26
25
  v-for="file in uploadedFiles"
27
26
  :key="'file-upload-' + file.id"
28
27
  class="w-32 h-32 m-2 cursor-pointer bg-gray-200"
29
- :class="{'border border-dashed border-blue-600': !uploadedFiles.length}"
30
28
  :file="file"
31
- :related-files="uploadedFiles"
29
+ :related-files="file.transcodes || uploadedFiles"
32
30
  downloadable
33
31
  :removable="!readonly && !disable"
34
32
  @remove="onRemove(file)"
@@ -3,7 +3,6 @@
3
3
  <FieldLabel
4
4
  v-if="label"
5
5
  :label="label"
6
- class="mb-1 block"
7
6
  />
8
7
  <QSelect
9
8
  ref="selectField"
@@ -6,7 +6,6 @@
6
6
  :show-name="showName"
7
7
  :class="labelClass"
8
8
  :value="readonly ? modelValue : ''"
9
- class="mb-1 block"
10
9
  />
11
10
  <template v-if="!readonly">
12
11
  <QInput
@@ -4,7 +4,6 @@
4
4
  v-if="!noLabel"
5
5
  :field="field"
6
6
  :show-name="showName"
7
- class="text-sm font-semibold text-gray-700 block mb-2"
8
7
  />
9
8
  <template v-if="readonly">
10
9
  <div
@@ -30,17 +29,17 @@ import FieldLabel from "./FieldLabel";
30
29
 
31
30
  defineEmits(["update:model-value"]);
32
31
  defineProps({
33
- modelValue: {
34
- type: [String, Number],
35
- default: null
36
- },
37
- field: {
38
- type: Object,
39
- required: true
40
- },
41
- noLabel: Boolean,
42
- showName: Boolean,
43
- disable: Boolean,
44
- readonly: Boolean
32
+ modelValue: {
33
+ type: [String, Number],
34
+ default: null
35
+ },
36
+ field: {
37
+ type: Object,
38
+ required: true
39
+ },
40
+ noLabel: Boolean,
41
+ showName: Boolean,
42
+ disable: Boolean,
43
+ readonly: Boolean
45
44
  });
46
45
  </script>
@@ -74,7 +74,7 @@ function isVideo(file) {
74
74
  }
75
75
 
76
76
  function getPreviewUrl(file) {
77
- return file.transcodes?.compress?.url || file.blobUrl || file.url;
77
+ return file.optimized?.url || file.blobUrl || file.url;
78
78
  }
79
79
 
80
80
  function getThumbUrl(file) {
@@ -107,7 +107,7 @@
107
107
  <FullScreenCarouselDialog
108
108
  v-if="showPreview && !disabled"
109
109
  :files="relatedFiles || [computedImage]"
110
- :default-slide="computedImage?.id || ''"
110
+ :default-slide="relatedFiles ? relatedFiles[0].id : (computedImage?.id || '')"
111
111
  @close="showPreview = false"
112
112
  />
113
113
  </div>
@@ -115,10 +115,10 @@
115
115
 
116
116
  <script setup lang="ts">
117
117
  import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
118
- import { UploadedFile } from "src/types";
119
118
  import { computed, ComputedRef, ref } from "vue";
120
119
  import { download } from "../../../helpers";
121
120
  import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
121
+ import { UploadedFile } from "../../../types";
122
122
  import { FullScreenCarouselDialog } from "../Dialogs";
123
123
 
124
124
  export interface FilePreviewProps {
@@ -171,10 +171,10 @@ const isImage = computed(() => !!mimeType.value.match(/^image\//));
171
171
  const isVideo = computed(() => !!mimeType.value.match(/^video\//));
172
172
  const isPdf = computed(() => !!mimeType.value.match(/^application\/pdf/));
173
173
  const previewUrl = computed(
174
- () => computedImage.value?.transcodes?.compress?.url || computedImage.value?.blobUrl || computedImage.value?.url
174
+ () => computedImage.value?.optimized?.url || computedImage.value?.blobUrl || computedImage.value?.url
175
175
  );
176
176
  const thumbUrl = computed(() => {
177
- return computedImage.value?.transcodes?.thumb?.url;
177
+ return computedImage.value?.thumb?.url;
178
178
  });
179
179
  const isPreviewable = computed(() => {
180
180
  return !!thumbUrl.value || isVideo.value || isImage.value;
@@ -50,13 +50,14 @@
50
50
 
51
51
  &.q-textarea {
52
52
  .q-field__control-container {
53
- padding-bottom: 1.1rem;
53
+ padding: .5rem 0;
54
54
  }
55
55
  }
56
56
  }
57
57
 
58
58
  .q-field__marginal, .q-field__input, .q-field__label {
59
59
  color: inherit;
60
+ height: auto;
60
61
  }
61
62
  }
62
63
  }
@@ -0,0 +1,5 @@
1
+ .q-carousel {
2
+ .q-carousel__thumbnail--active {
3
+ @apply outline-1 outline-sky-800;
4
+ }
5
+ }
@@ -1,3 +1,11 @@
1
+ .dx-field-label {
2
+ @apply text-xs block mb-1.5;
3
+
4
+ .dx-field-required {
5
+ @apply text-red-900 ml-0.5 bottom-1 relative;
6
+ }
7
+ }
8
+
1
9
  .q-field {
2
10
  .q-field__label {
3
11
  @apply text-sm text-gray-700;
@@ -1,5 +1,6 @@
1
1
  @import "action-table";
2
2
  @import "buttons";
3
+ @import "carousels";
3
4
  @import "dialogs";
4
5
  @import "forms";
5
6
  @import "panels";
@@ -24,6 +24,9 @@ export interface UploadedFile {
24
24
  location?: string;
25
25
  blobUrl?: string;
26
26
  url?: string;
27
+ thumb?: UploadedFile;
28
+ optimized?: UploadedFile;
29
+ transcodes?: UploadedFile[];
27
30
  }
28
31
 
29
32
  export interface FileUploadCompleteCallbackParams {
@@ -1,4 +1,4 @@
1
- import { AnyObject } from "src/types/shared";
1
+ import { AnyObject } from "./shared";
2
2
 
3
3
  export interface RequestApi {
4
4
  abortControllers: { [key: string]: { abort: AbortController, timestamp: number } };